create-asciitorium 0.1.20 → 0.1.21

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

@@ -3,7 +3,7 @@ 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>
+  <Box width={42} height={28} layout="aligned" label="ASCII Art Example:" border>
     <AsciiArt content={computer} align="center" />
   </Box>
 );

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

@@ -12,7 +12,7 @@ export const ButtonExample = () => {
         onClick={() => (buttonClickCount.value = buttonClickCount.value + 1)}
         gap={{top: 4, bottom: 3}}
       />
-      <Box layout="horizontal" gap={{left: 6, right: 2}} align="center">
+      <Box layout="row" gap={{left: 6, right: 2}} align="center">
         <Text>Click Count: </Text>
         <Text width={4}>{buttonClickCount}</Text>
       </Box>

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

@@ -1,7 +1,7 @@
 import { Text, HR, VR, Box, CelticBorder } from 'asciitorium';
 
 export const LayoutExample = () => (
-  <Box width={42} height={27} border layout="vertical">
+  <Box width={42} height={27} border layout="column">
     <Text
       width={40}
       height={2}

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

@@ -37,7 +37,7 @@ export const MultiSelectExample = () => {
         selectedItems={multiValue}
         gap={{ top: 2, bottom: 2 }}
       />
-      <Box align="center" layout="horizontal">
+      <Box align="center" layout="row">
         <Text align="top">Selected: </Text>
         <Text
           width={24}

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

@@ -31,7 +31,7 @@ export const SelectExample = () => {
           selectedItem={selectValue}
         />
       </Box>
-      <Box align="center" gap={{ left: 5 }} layout="horizontal">
+      <Box align="center" gap={{ left: 5 }} layout="row">
         <Text>Car Selected: </Text>
         <Text width={20}>{selectValue}</Text>
       </Box>

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

@@ -1,23 +1,23 @@
 import {
   App,
-  Text,
   AsciiArt,
   Select,
-  Box,
   Component,
   PersistentState,
   loadArt,
 } from 'asciitorium';
 
-// 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';
+import {
+  ButtonExample,
+  CelticBorderExample,
+  SelectExample,
+  MultiSelectExample,
+  TextInputExample,
+  TabsExample,
+  TextExample,
+  AsciiArtExample,
+  SlidersExample,
+} from 'asciitorium/examples';
 
 // Load the title ASCII art
 const titleArt = await loadArt('./art/asciitorium.txt');
@@ -32,102 +32,49 @@ const selectedComponent = new PersistentState(
 const componentList = [
   'AsciiArt',
   'Button',
+  'CelticBorder',
   'MultiSelect',
-  'ProgressBar',
   'Select',
+  'Sliders',
   'Tabs',
   'Text',
-  'TextInput'
+  'TextInput',
 ];
 
-// Component mapping
-const examples: Record<string, any> = {
+// Component mapping for dynamic content
+const examples = {
   Button: ButtonExample,
+  CelticBorder: CelticBorderExample,
   Select: SelectExample,
   MultiSelect: MultiSelectExample,
   TextInput: TextInputExample,
-  ProgressBar: ProgressBarExample,
+  Sliders: SlidersExample,
   Tabs: TabsExample,
   Text: TextExample,
-  AsciiArt: AsciiArtExample
+  AsciiArt: AsciiArtExample,
 };
 
-// Create a wrapper component that dynamically switches based on state
-
-class DynamicExampleWrapper extends Box {
-  constructor() {
-    super({ width: 53, height: 28 });
-
-    // Initially set the current example
-    this.updateExample();
-
-    // 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}>
+  <App width={64} height={35}>
     <AsciiArt content={titleArt} align="center" gap={{ bottom: 2 }} />
-    <Box layout="horizontal">
-      {/* Left Panel - Navigation */}
+    <Component layout="row">
       <Select
         label="Components:"
-        width={25}
+        width={16}
         height={28}
         items={componentList}
         selectedItem={selectedComponent}
         border
       />
-      {/* Right Panel - Dynamic content */}
-      {new DynamicExampleWrapper()}
-    </Box>
+      <Component
+        width={48}
+        height={28}
+        dynamicContent={{
+          selectedKey: selectedComponent,
+          componentMap: examples,
+        }}
+      />
+    </Component>
   </App>
 );
 

package/dist/templates/base/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig, Plugin } from 'vite';
 
 // Minimal virtual shim for Node built-ins on the web build
 function nodeBuiltinsShim(): Plugin {
@@ -26,7 +26,11 @@ function nodeBuiltinsShim(): Plugin {
 }
 
 export default defineConfig({
-  esbuild: { target: 'esnext' },
+  esbuild: { 
+    target: 'esnext',
+    jsx: 'automatic',
+    jsxImportSource: 'asciitorium',
+  },
   build: { target: 'esnext' },
   plugins: [nodeBuiltinsShim()],
   server: {

package/package.json

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