npm - create-asciitorium - Versions diffs - 0.1.20 → 0.1.22 - Mend

create-asciitorium 0.1.20 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/templates/base/index.css CHANGED Viewed

@@ -1,3 +1,4 @@
+@import url('https://fonts.cdnfonts.com/css/jetbrains-mono');
 @font-face {
   font-family: 'PrintChar21';
   src:
@@ -9,15 +10,31 @@
 }
 body {
-  font-family: 'Courier New', Courier, monospace;
-  margin: 10;
+  font-family: 'JetBrains Mono', sans-serif;
+  margin: 0;
   background: black;
   color: #3fff00;
-  /* Center the screen horizontally */
+  /* Center the screen both horizontally and vertically */
   display: flex;
   justify-content: center;
+  align-items: center;
   height: 100vh; /* Full viewport height */
+  width: 100vw; /* Full viewport width */
+}
+#screen {
+  /* Use 90% of viewport dimensions to leave some margin */
+  width: 90vw;
+  height: 90vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* Hide scrollbars for clean appearance */
+  /* Ensure monospace font for proper character sizing */
+  font-family: 'PrintChar21', 'Courier New', Courier, monospace;
+  font-size: 16px; /* Base font size for character measurement */
+  line-height: 1; /* Tight line spacing for ASCII art */
 }
 .inverted {

package/dist/templates/base/index.html CHANGED Viewed

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>asciitorium app</title>
+    <title>asciitorium</title>
+    <link rel="icon" type="image/png" href="/logo.png" />
     <link rel="stylesheet" href="index.css" />
   </head>
   <body>
-    <div id="screen"></div>
-    <script type="module" src="src/main.tsx"></script>
+    <pre id="screen">Loading...</pre>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,23 +1,25 @@
 import {
   App,
-  Text,
   AsciiArt,
   Select,
-  Box,
   Component,
+  Row,
   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,
+  RelativeSizingExample,
+  TextInputExample,
+  TabsExample,
+  TextExample,
+  AsciiArtExample,
+  SlidersExample,
+} from 'asciitorium/examples';
 // Load the title ASCII art
 const titleArt = await loadArt('./art/asciitorium.txt');
@@ -32,102 +34,51 @@ const selectedComponent = new PersistentState(
 const componentList = [
   'AsciiArt',
   'Button',
+  'CelticBorder',
   'MultiSelect',
-  'ProgressBar',
+  'RelativeSizing',
   '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,
+  RelativeSizing: RelativeSizingExample,
   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>
     <AsciiArt content={titleArt} align="center" gap={{ bottom: 2 }} />
-    <Box layout="horizontal">
-      {/* Left Panel - Navigation */}
+    <Row height="fit">
       <Select
         label="Components:"
-        width={25}
-        height={28}
+        width="30%"
+        height="fit"
         items={componentList}
         selectedItem={selectedComponent}
         border
       />
-      {/* Right Panel - Dynamic content */}
-      {new DynamicExampleWrapper()}
-    </Box>
+      <Component
+        width="fit"
+        height="fit"
+        dynamicContent={{
+          selectedKey: selectedComponent,
+          componentMap: examples,
+        }}
+      />
+    </Row>
   </App>
 );

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

@@ -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 CHANGED Viewed

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