create-asciitorium 0.1.19 → 0.1.20

package/dist/templates/base/public/art/computer.txt

@@ -0,0 +1,17 @@
+   _____________________
+  /                 `   \
+  |  .-----------.  |   |-----.
+  |  |           |  |   |-=---|
+  |  |           |  |   |-----|
+  |  |           |  |   |-----|
+  |  |           |  |   |-----|
+  |  `-----------'  |   |-----'/\
+   \________________/___'     /  \
+      /                      / / /
+     / //               //  / / /
+    /                      / / /
+   / _/_/_/_/_/_/_/_/_/_/ /   /
+  / _/_/_/_/_/_/_/_/_/_/ /   /
+ / _/_/_/_______/_/_/_/ / __/
+/______________________/ /    
+\______________________\/

package/dist/templates/base/src/examples/AsciiArtExample.tsx

@@ -0,0 +1,9 @@
+import { AsciiArt, Box, loadArt } from 'asciitorium';
+
+const computer = await loadArt('./art/computer.txt');
+
+export const AsciiArtExample = () => (
+  <Box width={42} height={28} layout="relaxed" label="ASCII Art Example:" border>
+    <AsciiArt content={computer} align="center" />
+  </Box>
+);

package/dist/templates/base/src/examples/ButtonExample.tsx

@@ -0,0 +1,21 @@
+import { Text, State, Button, HR, Box } from 'asciitorium';
+
+export const ButtonExample = () => {
+  // State for button click count - local to each component instance
+  const buttonClickCount = new State(0);
+
+  return (
+    <Box width={42} height={28} label="Button Example:" border>
+      <Button
+        label="I'm a Button!"
+        align="center"
+        onClick={() => (buttonClickCount.value = buttonClickCount.value + 1)}
+        gap={{top: 4, bottom: 3}}
+      />
+      <Box layout="horizontal" gap={{left: 6, right: 2}} align="center">
+        <Text>Click Count: </Text>
+        <Text width={4}>{buttonClickCount}</Text>
+      </Box>
+    </Box>
+  );
+};

package/dist/templates/base/src/examples/LayoutExample.tsx

@@ -0,0 +1,45 @@
+import { Text, HR, VR, Box, CelticBorder } from 'asciitorium';
+
+export const LayoutExample = () => (
+  <Box width={42} height={27} border layout="vertical">
+    <Text
+      width={40}
+      height={2}
+    >
+      Layout Components - HR, VR, Box, Borders
+    </Text>
+    <HR gap={1} />
+    <Box
+      width={20}
+      height={5}
+      border
+      gap={1}
+      children={[
+        new Text({
+          width: 16,
+          height: 3,
+          children: ['Box with border\nand content'],
+        }),
+      ]}
+    />
+    <CelticBorder
+      width={20}
+      height={5}
+      gap={1}
+      children={[
+        new Text({
+          width: 16,
+          height: 3,
+          children: ['Celtic border\ndecoration'],
+        }),
+      ]}
+    />
+    <HR gap={1} />
+    <Text
+      width={35}
+      height={2}
+    >
+      Layout components help organize\nand structure your UI.
+    </Text>
+  </Box>
+);

package/dist/templates/base/src/examples/MultiSelectExample.tsx

@@ -0,0 +1,51 @@
+import { Text, State, MultiSelect, Box, HR } from 'asciitorium';
+
+export const MultiSelectExample = () => {
+  const multiValue = new State(['Suspension', 'Brakes']);
+  const displayText = new State(multiValue.value.join(', '));
+
+  multiValue.subscribe((newValue) => {
+    displayText.value = newValue.join(', ');
+  });
+
+  const carParts = [
+    'Engine',
+    'Transmission',
+    'Brakes',
+    'Suspension',
+    'Exhaust',
+    'Radiator',
+    'Battery',
+    'Alternator',
+    'Starter',
+    'Fuel Pump',
+    'Air Filter',
+    'Oil Filter',
+    'Spark Plugs',
+    'Tires',
+    'Wheels',
+  ];
+
+  return (
+    <Box label="MultiSelect Example:" width={42} height={28} border>
+      <MultiSelect
+        label="Car Parts:"
+        align="center"
+        width={34}
+        height={10}
+        items={carParts}
+        selectedItems={multiValue}
+        gap={{ top: 2, bottom: 2 }}
+      />
+      <Box align="center" layout="horizontal">
+        <Text align="top">Selected: </Text>
+        <Text
+          width={24}
+          height={7}
+          align="top"
+          content={displayText}
+        />
+      </Box>
+    </Box>
+  );
+};

package/dist/templates/base/src/examples/ProgressBarExample.tsx

@@ -0,0 +1,42 @@
+import { Text, State, ProgressBar, Button, Box, HR } from 'asciitorium';
+
+export const ProgressBarExample = () => {
+  // State for progress bar - local to each component instance
+  const progressValue = new State(25);
+
+  return (
+    <Box width={42} height={28} border label="ProgressBar Example:" >
+      <Text align="center" gap={{top: 2}}>With Percentage</Text>
+      <ProgressBar
+        width={35}
+        percent={progressValue}
+        align="center"
+        showPercentage
+      />
+      <Text align="center" gap={{top: 2}}>Without Percentage</Text>
+      <ProgressBar
+        width={35}
+        percent={progressValue}
+        showPercentage={false}
+        align="center"
+      />
+
+      <Box layout="horizontal" align="center" gap={{ top: 3 }}>
+        <Button
+          label="Increase"
+          onClick={() =>
+            (progressValue.value = Math.min(100, progressValue.value + 10))
+          }
+          gap={1}
+        />
+        <Button
+          label="Decrease"
+          onClick={() =>
+            (progressValue.value = Math.max(0, progressValue.value - 10))
+          }
+          gap={1}
+        />
+      </Box>
+    </Box>
+  );
+};

package/dist/templates/base/src/examples/SelectExample.tsx

@@ -0,0 +1,40 @@
+import { Text, State, Select, Box } from 'asciitorium';
+
+export const SelectExample = () => {
+  const selectValue = new State('Tesla Model S');
+
+  const carModels = [
+    'Tesla Model S',
+    'BMW M3',
+    'Audi A4',
+    'Mercedes C-Class',
+    'Honda Civic',
+    'Toyota Camry',
+    'Ford Mustang',
+    'Chevrolet Corvette',
+    'Porsche 911',
+    'Ferrari 488',
+    'Lamborghini Huracan',
+    'McLaren 720S',
+    'Nissan GTR',
+    'Subaru WRX',
+  ];
+
+  return (
+    <Box width={42} height={28} label="Select Example:" border>
+      <Box align="center" gap={{ top: 2, bottom: 2 }}>
+        <Select
+          label="Car's to Select:"
+          width={34}
+          height={10}
+          items={carModels}
+          selectedItem={selectValue}
+        />
+      </Box>
+      <Box align="center" gap={{ left: 5 }} layout="horizontal">
+        <Text>Car Selected: </Text>
+        <Text width={20}>{selectValue}</Text>
+      </Box>
+    </Box>
+  );
+};

package/dist/templates/base/src/examples/TabsExample.tsx

@@ -0,0 +1,54 @@
+import { Text, State, Tabs, Box } from 'asciitorium';
+
+export const TabsExample = () => {
+  // State for tabs - local to each component instance
+  const tabsValue = new State('Tab 1');
+
+  // Dynamic content state based on selected tab
+  const tabContentState = new State('');
+  tabsValue.subscribe((tab) => {
+    switch (tab) {
+      case 'Tab 1':
+        tabContentState.value =
+          'Content for Tab 1\nThis shows dynamic content\nbased on selected tab.';
+        break;
+      case 'Tab 2':
+        tabContentState.value =
+          'Content for Tab 2\nDifferent content here!\nTabs make navigation easy.';
+        break;
+      case 'Tab 3':
+        tabContentState.value =
+          'Content for Tab 3\nYet another section.\nUse arrow keys to switch.';
+        break;
+      default:
+        tabContentState.value = 'Select a tab above';
+    }
+  });
+
+  // Initialize content
+  tabContentState.value =
+    tabsValue.value === 'Tab 1'
+      ? 'Content for Tab 1\nThis shows dynamic content\nbased on selected tab.'
+      : tabsValue.value === 'Tab 2'
+        ? 'Content for Tab 2\nDifferent content here!\nTabs make navigation easy.'
+        : 'Content for Tab 3\nYet another section.\nUse arrow keys to switch.';
+
+  return (
+    <Box width={42} height={28} border label="Tabs Example:">
+      <Tabs
+        tabs={['Tab 1', 'Tab 2', 'Tab 3']}
+        align="center"
+        selectedTab={tabsValue}
+        gap={1}
+      />
+      <Box
+        width={38}
+        height={8}
+        gap={1}
+        children={[
+          new Text({ width: 30, height: 6, children: [tabContentState] }),
+        ]}
+      />
+    </Box>
+  );
+};

package/dist/templates/base/src/examples/TextExample.tsx

@@ -0,0 +1,24 @@
+import { Text, AsciiArt, Box } from 'asciitorium';
+
+export const TextExample = () => (
+  <Box width={42} height={28} border label="Text Example:">
+    <Text
+      width={36}
+      height={8}
+      border
+      gap={1}
+    >
+      {'This is bordered text with:\n\n - multiple lines,\n - food for thought, and\n - some formatting.'}
+    </Text>
+    <Text
+      width={36}
+      height={7}
+      border
+      gap={1}
+    >
+      This is a long text that should wrap automatically when width and height are specified and the content exceeds the available space.
+    </Text>
+
+    <Text>Simple Text.</Text>
+  </Box>
+);

package/dist/templates/base/src/examples/TextInputExample.tsx

@@ -0,0 +1,25 @@
+import { Text, State, TextInput, HR, Box } from 'asciitorium';
+
+export const TextInputExample = () => {
+  // States for text input components - local to each component instance
+  const textInputValue = new State('Hello World');
+
+  return (
+    <Box width={42} height={28} label="TextInput Example:" border>
+      <TextInput
+        gap={{ top: 2 }}
+        width={20}
+        align="center"
+        value={textInputValue}
+        placeholder="Enter text here..."
+      />
+      <Text width={20} align="center" height={3} gap={{ left: 5, bottom: 4 }}>
+        {textInputValue}
+      </Text>
+
+      <Text align="center" width={30} height={3}>
+        Use arrow keys to move cursor. Numeric input restricts to numbers only.
+      </Text>
+    </Box>
+  );
+};

package/dist/templates/base/src/main.tsx

@@ -1,44 +1,134 @@
-/** Single entry that runs on Web (DOM) and CLI (Terminal) */
 import {
   App,
-  Box,
   Text,
-  State,
   AsciiArt,
-  TextInput,
-  PerfMonitor,
-  CelticBorder,
-  HR,
-  loadAsciiAsset
+  Select,
+  Box,
+  Component,
+  PersistentState,
+  loadArt,
 } from 'asciitorium';
 
-const appWidth = 64;
-const appHeight = 30;
-
-const helloWorld = new State('Hello, World!');
+// Import example components
+import { ButtonExample } from './examples/ButtonExample';
+import { SelectExample } from './examples/SelectExample';
+import { MultiSelectExample } from './examples/MultiSelectExample';
+import { TextInputExample } from './examples/TextInputExample';
+import { ProgressBarExample } from './examples/ProgressBarExample';
+import { TabsExample } from './examples/TabsExample';
+import { TextExample } from './examples/TextExample';
+import { AsciiArtExample } from './examples/AsciiArtExample';
 
 // Load the title ASCII art
-const titleArt = await loadAsciiAsset('./art/asciitorium.txt');
+const titleArt = await loadArt('./art/asciitorium.txt');
 
-// Construct the app
-const app = (
-  <App width={appWidth} height={appHeight} layout="relaxed">
-    <CelticBorder align="top-left" />
-    <CelticBorder align="top-right" />
-
-    <Box align="top" layout="vertical" gap={2}>
-      <AsciiArt content={titleArt} align="top" />
-      <HR length={48} align="center" />
-      <Text align="top" gap={3}>a ui framework for cli and web</Text>
-    </Box>
+// Main state for component selection with persistence
+const selectedComponent = new PersistentState(
+  'Button',
+  'demo-selected-component'
+);
+
+// Component list for navigation
+const componentList = [
+  'AsciiArt',
+  'Button',
+  'MultiSelect',
+  'ProgressBar',
+  'Select',
+  'Tabs',
+  'Text',
+  'TextInput'
+];
+
+// Component mapping
+const examples: Record<string, any> = {
+  Button: ButtonExample,
+  Select: SelectExample,
+  MultiSelect: MultiSelectExample,
+  TextInput: TextInputExample,
+  ProgressBar: ProgressBarExample,
+  Tabs: TabsExample,
+  Text: TextExample,
+  AsciiArt: AsciiArtExample
+};
+
+// Create a wrapper component that dynamically switches based on state
 
-    <TextInput label="TextInput:" width={30} value={helloWorld} gap={2} align="center" />
+class DynamicExampleWrapper extends Box {
+  constructor() {
+    super({ width: 53, height: 28 });
 
-    <Text value={helloWorld} width={appWidth - 24} align="bottom" gap={8} />
+    // Initially set the current example
+    this.updateExample();
 
-    <CelticBorder align="bottom-left" />
-    <CelticBorder align="bottom-right" />
+    // Subscribe to changes in selectedComponent
+    selectedComponent.subscribe(() => {
+      this.updateExample();
+    });
+  }
+
+  private updateExample() {
+    // Properly remove existing children using removeChild to notify parent
+    const childrenToRemove = [...this.children]; // Create copy to avoid mutation during iteration
+    for (const child of childrenToRemove) {
+      child.destroy();
+      this.removeChild(child);
+    }
+
+    // Get the current example factory function
+    const exampleFactory = examples[selectedComponent.value];
+    if (exampleFactory) {
+      // Call the factory function to create a new component instance
+      const exampleComponent = exampleFactory();
+      this.addChild(exampleComponent);
+    } else {
+      // Fallback for unknown component
+      this.addChild(
+        new Text({
+          width: 40,
+          height: 5,
+          border: true,
+          children: ['Unknown component'],
+        })
+      );
+    }
+
+    // Find the root App component and reset focus manager
+    this.notifyAppOfFocusChange();
+  }
+
+  private notifyAppOfFocusChange() {
+    // Walk up the parent chain to find the App
+    let current: Component | undefined = this;
+    while (current && current.constructor.name !== 'App') {
+      current = current.parent;
+    }
+
+    // If we found the App, reset its focus manager
+    if (current && (current as any).focus) {
+      (current as any).focus.reset(current);
+    }
+  }
+}
+
+// Construct the app with horizontal layout
+const app = (
+  <App width={67} height={35}>
+    <AsciiArt content={titleArt} align="center" gap={{ bottom: 2 }} />
+    <Box layout="horizontal">
+      {/* Left Panel - Navigation */}
+      <Select
+        label="Components:"
+        width={25}
+        height={28}
+        items={componentList}
+        selectedItem={selectedComponent}
+        border
+      />
+      {/* Right Panel - Dynamic content */}
+      {new DynamicExampleWrapper()}
+    </Box>
   </App>
 );
 
-await app.start();
+await app.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-asciitorium",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "private": false,
   "description": "Scaffold a Vite + TypeScript project prewired for asciitorium (web + cli).",
   "bin": {