asciitorium/dist/main.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { App, Banner, Select, Option, OptionGroup, Switch, Case, Row, Column, PerfMonitor, PersistentState, State, Keybind, MobileController, } from './index.js';
import { GettingStarted, ComponentBasics, LayoutBasics, NavigationBasics, StateBasics, LifecycleBasics, SwitchBasics, AlignmentBasics, TextBasics, KeybindingsBasics, SpritesBasics, BannerBasics, MapsBasics, FPVBasics, } from './examples/index.js';
// Main state for component selection with persistence
const selectedKey = new PersistentState('start', 'asciitorium.document.tutorial.selected');
// State for PerfMonitor visibility (F12 toggle)
const showPerfMonitor = new State(true);
// toggle PerfMonitor with "F12" key
const togglePerfMonitor = () => {
    showPerfMonitor.value = !showPerfMonitor.value;
};
// Create Select instance so we can reference it in keybindings
const docSelect = (_jsxs(Select, { label: "Documentation", width: 28, height: "fill", hotkey: "d", selected: selectedKey, children: [_jsx(Option, { value: "start", children: "Getting Started" }), _jsxs(OptionGroup, { label: "Components", children: [_jsx(Option, { value: "components", children: "Component Basics" }), _jsx(Option, { value: "text", children: "Text" }), _jsx(Option, { value: "layout", children: "Layouts" }), _jsx(Option, { value: "align", children: "Align & Gaps" }), _jsx(Option, { value: "navigation", children: "Navigation" }), _jsx(Option, { value: "keybindings", children: "Keybindings" }), _jsx(Option, { value: "state", children: "State Management" }), _jsx(Option, { value: "lifecycle", children: "Lifecycle & Cleanup" }), _jsx(Option, { value: "switch", children: "Switch Component" })] }), _jsxs(OptionGroup, { label: "ASCII Art Assets", children: [_jsx(Option, { value: "sprites", children: "Sprites" }), _jsx(Option, { value: "banners", children: "Banners" }), _jsx(Option, { value: "maps", children: "Maps" }), _jsx(Option, { value: "fpv", children: "First Person View" })] })] }));
const app = (_jsxs(App, { align: "top-center", children: [_jsx(Keybind, { keyBinding: "F12", action: togglePerfMonitor }), _jsx(Banner, { font: "shadows", text: "asciitorium", gap: 1 }), _jsxs(Row, { height: "fill", children: [_jsxs(Column, { width: 28, height: "fill", children: [_jsx(Keybind, { keyBinding: "ArrowDown", action: () => docSelect.moveNext() }), _jsx(Keybind, { keyBinding: "ArrowUp", action: () => docSelect.movePrevious() }), _jsx(Keybind, { keyBinding: "Enter", action: () => docSelect.select() }), _jsx(Keybind, { keyBinding: "PageDown", action: () => docSelect.pageDown() }), _jsx(Keybind, { keyBinding: "PageUp", action: () => docSelect.pageUp() }), _jsx(Keybind, { keyBinding: "Home", action: () => docSelect.moveToStart() }), _jsx(Keybind, { keyBinding: "End", action: () => docSelect.moveToEnd() }), _jsx(MobileController, { dpad: {
                                up: () => docSelect.movePrevious(),
                                down: () => docSelect.moveNext(),
                            }, buttons: {
                                a: () => docSelect.select(),
                            } }), docSelect] }), _jsxs(Switch, { width: "fill", height: "fill", condition: selectedKey, children: [_jsx(Case, { when: "start", create: GettingStarted }), _jsx(Case, { when: "components", create: ComponentBasics }), _jsx(Case, { when: "text", create: TextBasics }), _jsx(Case, { when: "layout", create: LayoutBasics }), _jsx(Case, { when: "align", create: AlignmentBasics }), _jsx(Case, { when: "navigation", create: NavigationBasics }), _jsx(Case, { when: "keybindings", create: KeybindingsBasics }), _jsx(Case, { when: "state", create: StateBasics }), _jsx(Case, { when: "lifecycle", create: LifecycleBasics }), _jsx(Case, { when: "switch", create: SwitchBasics }), _jsx(Case, { when: "sprites", create: SpritesBasics }), _jsx(Case, { when: "banners", create: BannerBasics }), _jsx(Case, { when: "maps", create: MapsBasics }), _jsx(Case, { when: "fpv", create: FPVBasics })] })] }), _jsx(PerfMonitor, { visible: showPerfMonitor })] }));
await app.start();