juxscript 1.0.64 → 1.0.66

package/bin/cli.js

@@ -14,8 +14,8 @@ const command = process.argv[2];
 // ═══════════════════════════════════════════════════════════════════
 
 if (command === 'create') {
-  const timestamp = new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '').slice(0, 12);
-  const projectName = process.argv[3] || `my-jux-app-${timestamp}`;
+  // ✅ FIX: Removed timestamp fallback from default name
+  const projectName = process.argv[3] || 'my-jux-app';
 
   const projectPath = path.join(process.cwd(), projectName);
 
@@ -302,6 +302,7 @@ function findJuxFiles(dir, fileList = []) {
 
     fs.mkdirSync(juxDir, { recursive: true }); // create it.
 
+    let filesCopied = 0;
     // Copy default presets
     const defaultPresetSrc = path.join(PATHS.packageRoot, 'create');
     if (fs.existsSync(defaultPresetSrc)) {
@@ -309,11 +310,26 @@ function findJuxFiles(dir, fileList = []) {
       for (const entry of entries) {
         if (entry.isFile()) {
           fs.copyFileSync(path.join(defaultPresetSrc, entry.name), path.join(juxDir, entry.name));
+          filesCopied++;
           // console.log(`+ Created ${entry.name}`);
         }
       }
     }
 
+    // ✅ ADD: Safe fallback if presets are missing so build doesn't fail
+    if (filesCopied === 0) {
+      console.warn('⚠️  Install pages not available. Creating default index.jux...');
+      const indexContent = `import { jux } from 'juxscript';
+
+jux.hero('welcome', { 
+  title: 'Welcome to JUX',
+  subtitle: 'Start building in jux/index.jux' 
+}).render('#app');
+`;
+      fs.writeFileSync(path.join(juxDir, 'index.jux'), indexContent);
+      console.log('+ Created index.jux');
+    }
+
     // Create juxconfig.js
     const configExampleSrc = path.join(PATHS.packageRoot, 'juxconfig.example.js');
     const configDest = path.join(PATHS.projectRoot, 'juxconfig.js');

package/create/all.jux

@@ -0,0 +1,343 @@
+import { jux, state } from 'juxscript';
+import { initializeGrid } from 'layout.jux';
+
+// Initialize the grid layout - this executes the rendering
+const grid = initializeGrid();
+
+// ═══════════════════════════════════════════════════════════════════
+// ALL COMPONENTS SHOWCASE - Maximum DOM nodes per component
+// ═══════════════════════════════════════════════════════════════════
+
+// Hero - All DOM-generating options
+jux.heading('hero-heading').level(3).text('jux.hero').render("#appmain-content");
+jux.hero('all-hero', {
+  title: 'Hero Title',
+  subtitle: 'Hero Subtitle',
+  content: 'Hero body content goes here',
+  cta: 'Call to Action',
+  ctaLink: '#',
+  backgroundOverlay: true,
+  centered: true
+}).render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('chart-heading').level(3).text('jux.chart, jux.calendar, jux.chatbox, jux.aiwidget, jux.media, jux.icons, jux.data!').render("#appmain-content");
+jux.element('all-element')
+.text('Need Elements! shadcn and tailwind analysis. Mobiles. ios/android - .text')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('alert-heading').level(3).text('jux.alert').render("#appmain-content");
+jux.alert('all-alert')
+.message('this is it - .message').render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('badge-heading').level(3).text('jux.badge').render("#appmain-content");
+jux.badge('all-badge')
+.text('Badge Text - .text').render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('button-heading').level(3).text('jux.button').render("#appmain-content");
+jux.button('all-button')
+.label('Button Label - .label').render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('card-heading').level(3).text('jux.card').render("#appmain-content");
+jux.card('all-card')
+.title('Card Title - .title')
+.content('Card content goes here - .content')
+.footer('Card Footer - .footer')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('checkbox-heading').level(3).text('jux.checkbox').render("#appmain-content");
+jux.checkbox('all-checkbox')
+.label('Checkbox Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('code-heading').level(3).text('jux.code').render("#appmain-content");
+jux.code('all-code')
+.code(`// Sample code - .code`)
+.language('javascript')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('container-heading').level(3).text('jux.container').render("#appmain-content");
+jux.container('all-container')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('datepicker-heading').level(3).text('jux.datepicker').render("#appmain-content");
+jux.datepicker('all-datepicker')
+.label('Select Date - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('dropdown-heading').level(3).text('jux.dropdown').render("#appmain-content");
+jux.dropdown('all-dropdown', {
+  items: [{ label: 'Item 1', value: '1' }, { label: 'Item 2', value: '2' }]
+})
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('fileupload-heading').level(3).text('jux.fileupload').render("#appmain-content");
+jux.fileupload('all-fileupload')
+.label('File Upload - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('heading-heading').level(3).text('jux.heading').render("#appmain-content");
+jux.heading('all-h1')
+.text('Heading Level 1 - .text')
+.level(1)
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+// jux.heading('icon-heading').level(3).text('jux.icon').render("#appmain-content");
+// jux.icon('all-icon').render("#appmain-content");
+// jux.divider().render("#appmain-content");
+
+jux.heading('input-heading').level(3).text('jux.input').render("#appmain-content");
+jux.input('all-input')
+.label('Input Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('kpicard-heading').level(3).text('jux.kpicard').render("#appmain-content");
+jux.kpicard('all-kpicard')
+.delta('+5% - .delta')
+.prefix('$ - .prefix')
+.value('1,000 - .value')
+.title('KPI Card Title - .title')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('list-heading').level(3).text('jux.list').render("#appmain-content");
+jux.list('all-list', {
+  items: ['Item 1', 'Item 2', 'Item 3']
+})
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('loading-heading').level(3).text('jux.loading').render("#appmain-content");
+jux.loading('all-loading')
+.variant('spinner')
+.size('lg')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('sidebar-heading').level(3).text('jux.sidebar').render("#appaside");
+jux.sidebar('all-sidebar')
+.collapsible(true)
+.render("#appaside");
+jux.divider().render("#appaside");
+
+jux.heading('menu-heading').level(3).text('jux.menu').render("#appaside");
+jux.menu('all-menu', {
+  items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
+})
+.render("#appaside");
+jux.divider().render("#appaside");
+
+jux.heading('nav-heading').level(3).text('jux.nav').render("#appmain-content");
+jux.nav('all-nav', {
+  items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
+}).render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('paragraph-heading').level(3).text('jux.paragraph').render("#appmain-content");
+jux.paragraph('all-paragraph')
+.text('This is a sample paragraph created with jux.paragraph - .text')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('progress-heading').level(3).text('jux.progress').render("#appmain-content");
+jux.progress('all-progress')
+.value(70)
+.max(100)
+.variant('success')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('radio-heading').level(3).text('jux.radio').render("#appmain-content");
+jux.radio('all-radio', {
+  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
+})
+.label('Radio Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('select-heading').level(3).text('jux.select').render("#appmain-content");
+jux.select('all-select', {
+  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
+})
+.label('Select Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+
+
+jux.heading('switch-heading').level(3).text('jux.switch').render("#appmain-content");
+jux.switch('all-switch')
+.label('Switch Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('table-heading').level(3).text('jux.table').render("#appmain-content");
+jux.table('all-table', {
+    columns: ['Name', 'Age'],
+    rows: [
+        { Name: 'John', Age: '25' },
+        { Name: 'Jane', Age: '30' },
+        { Name: 'Jane', Age: '30' },
+        { Name: 'Jane', Age: '30' },
+        { Name: 'Jane', Age: '30' }
+    ]
+})
+.bordered(true)
+.selectable(true)
+.filterable(true)
+.paginated(true)
+.rowsPerPage(2)
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('tabs-heading').level(3).text('jux.tabs').render("#appmain-content");
+jux.tabs('all-tabs', {
+  tabs: [{ id: 1, label: 'Tab 1', content: 'Content 1' }, { id: 2, label: 'Tab 2', content: 'Content 2' }]
+})
+.activeTab('1')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('tooltip-heading').level(3).text('jux.tooltip').render("#appmain-content");
+jux.button('tooltip-trigger').label('Hover for tooltip').render("#appmain-content");
+jux.tooltip('all-tooltip', {
+  text: 'Tooltip content',
+  position: 'top'
+}).render('#tooltip-trigger');
+jux.divider().render("#appmain-content");
+
+jux.heading('view-heading').level(3).text('jux.view').render("#appmain-content");
+jux.view('all-view')
+.title('View Title - Need to Rethink - this is for nesting! - .title')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+// ═══════════════════════════════════════════════════════════════════
+// SELF-ANALYSIS: Build component tree from #app
+// ═══════════════════════════════════════════════════════════════════
+
+function buildComponentTree(element, depth = 0) {
+  const indent = '  '.repeat(depth);
+  const tagName = element.tagName.toLowerCase();
+  // ✅ Fix: Check if className exists and is a string
+  const classes = (element.className && typeof element.className === 'string') 
+    ? `.${element.className.split(' ').join('.')}` 
+    : '';
+  
+  let tree = `${indent}${tagName}${classes}\n`;
+  
+  // Recurse through children
+  Array.from(element.children).forEach(child => {
+    tree += buildComponentTree(child, depth + 1);
+  });
+  
+  return tree;
+}
+
+function analyzeComponents() {
+  const app = document.getElementById('app');
+  if (!app) return 'No #app container found';
+  
+  const components = Array.from(app.children);
+  const componentTypes = new Map();
+  
+  let analysis = `═══════════════════════════════════════════════════════════════
+COMPONENT TREE ANALYSIS
+═══════════════════════════════════════════════════════════════
+
+Found ${components.length} components in #app
+
+`;
+  
+  components.forEach((component, index) => {
+    const componentId = component.id || `component-${index}`;
+    // ✅ Fix: Safely handle className
+    const className = (component.className && typeof component.className === 'string') 
+      ? component.className 
+      : '';
+    const rootClasses = className.split(' ').filter(c => c);
+    const primaryClass = rootClasses.find(c => c.startsWith('jux-')) || rootClasses[0] || 'unknown';
+    
+    const componentName = primaryClass
+      .replace(/^jux-/, '')
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+    
+    // Track component types
+    const typeName = primaryClass.replace(/^jux-/, '');
+    componentTypes.set(typeName, (componentTypes.get(typeName) || 0) + 1);
+    
+    analysis += `┌─ ${componentName} (${componentId})\n`;
+    analysis += '│\n';
+    
+    const tree = buildComponentTree(component);
+    tree.split('\n').forEach(line => {
+      if (line.trim()) {
+        analysis += `│   ${line}\n`;
+      }
+    });
+    
+    analysis += `└${'─'.repeat(66)}\n\n`;
+  });
+  
+  // Add summary
+  analysis += `═══════════════════════════════════════════════════════════════
+SUMMARY
+═══════════════════════════════════════════════════════════════
+
+Component Types:
+`;
+  
+  Array.from(componentTypes.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .forEach(([type, count]) => {
+      analysis += `  - ${type}: ${count}\n`;
+    });
+  
+  analysis += `\nTotal: ${components.length} components rendered\n`;
+  
+  return analysis;
+}
+
+// Wait for DOM to be fully rendered
+setTimeout(() => {
+  const analysis = analyzeComponents();
+  
+  // Create analysis display
+  jux.container('analysis-container')
+    .style('margin-top: 3rem; padding: 2rem; background: #1e1e1e; border-radius: 8px;')
+    .render("#appmain-content");
+  
+  jux.heading('analysis-title')
+    .level(2)
+    .text('🔍 Self-Analysis')
+    .style('color: #10b981; margin-bottom: 1rem;')
+    .render('#analysis-container');
+  
+  jux.code('component-tree')
+    .language('text')
+    .code(analysis)
+    .style('background: #0d1117; color: #c9d1d9; font-size: 0.875rem; max-height: 600px; overflow-y: auto;')
+    .render('#analysis-container');
+  
+  jux.paragraph('analysis-note')
+    .text('This tree was generated by JavaScript analyzing the DOM structure of this page.')
+    .style('margin-top: 1rem; color: #8b949e; font-size: 0.875rem;')
+    .render('#analysis-container');
+}, 100);
+
+

package/create/index.jux

@@ -0,0 +1,90 @@
+import { jux, state } from 'juxscript';
+import { initializeGrid } from 'layout.jux';
+
+// Initialize the grid layout - this executes the rendering
+const grid = initializeGrid();
+
+// ═══════════════════════════════════════════════════════════════════
+// HEADER CONTENT
+// ═══════════════════════════════════════════════════════════════════
+
+jux.heading('logo-text')
+    .level(1)
+    .text('JUX')
+    .render('#appheader-logo');
+
+// ═══════════════════════════════════════════════════════════════════
+// MAIN CONTENT
+// ═══════════════════════════════════════════════════════════════════
+
+jux.hero('welcome', {
+    title: 'Welcome to JUX',
+    subtitle: 'A JavaScript UX authorship platform'
+}).render('#appmain-content');
+
+jux.divider().render('#appmain-content');
+
+jux.heading('start-heading')
+    .level(2)
+    .text('Getting Started')
+    .render('#appmain-content');
+
+jux.paragraph('start-intro')
+    .text('Edit this file to build your app. Here are some quick tips:')
+    .style('margin: 1rem 0;')
+    .render('#appmain-content');
+
+jux.list('quick-tips', {
+    items: [
+        'Run npx jux serve for dev mode with hot reload',
+        'Run npx jux build to compile for production',
+        'Serve .jux-dist/ from your backend',
+        'Check out the docs at juxscript.com/docs'
+    ]
+}).render('#appmain-content');
+
+jux.divider().render('#appmain-content');
+
+jux.heading('example-heading')
+    .level(3)
+    .text('Quick Example')
+    .render('#appmain-content');
+
+jux.code('example-code')
+    .language('javascript')
+    .code(`import { jux, state } from 'juxscript';
+
+const count = state(0);
+
+jux.button('increment')
+  .label('Click me!')
+  .bind('click', () => count.set(count.value + 1))
+  .render('#app');
+
+jux.paragraph('counter')
+  .sync('text', count, val => \`Count: \${val}\`)
+  .render('#app');`)
+    .render('#appmain-content');
+
+// Create a reactive counter demo
+const count = state(0);
+
+jux.button('increment')
+    .label('Click me!')
+    .bind('click', () => count.set(count.value + 1))
+    .style('margin: 1rem 0;')
+    .render('#appmain-content');
+
+jux.paragraph('counter')
+    .sync('text', count, val => `Count: ${val}`)
+    .style('font-size: 1.25rem; font-weight: 600; color: var(--color-brand);')
+    .render('#appmain-content');
+
+// ═══════════════════════════════════════════════════════════════════
+// FOOTER CONTENT
+// ═══════════════════════════════════════════════════════════════════
+
+jux.paragraph('footer-text')
+    .text('© 2026 JUX Authoring Framework')
+    .style('color: var(--color-text-tertiary);')
+    .render('#appfooter-content');

package/create/layout.jux

@@ -0,0 +1,57 @@
+import { jux } from 'juxscript';
+
+// Import the layout styles - testing link.
+
+
+// ═══════════════════════════════════════════════════════════════════
+// GRID LAYOUT - INITIALIZATION FUNCTION
+// ═══════════════════════════════════════════════════════════════════
+// Note: #app is automatically created by the Jux compiler
+
+export function initializeGrid() {
+    // add the base jux styles
+    jux.include('style.css');
+    // Header area
+    const appHeader = jux.container('appheader').render('#app');
+    const appHeaderContent = jux.container('appheader-content').render('#appheader');
+    const appHeaderLogo = jux.container('appheader-logo').render('#appheader-content');
+    const appHeaderNav = jux.container('appheader-nav').render('#appheader-content');
+    const appHeaderActions = jux.container('appheader-actions').render('#appheader-content');
+
+    // Left sidebar
+    const appAside = jux.container('appaside').render('#app');
+
+    // Main content area
+    const appMain = jux.container('appmain').render('#app');
+    const appMainContent = jux.container('appmain-content').render('#appmain');
+
+    // Right sidebar (optional - starts hidden)
+    const appSidebar = jux.container('appsidebar').render('#app');
+    const appSidebarHeader = jux.container('appsidebar-header').render('#appsidebar');
+    const appSidebarContent = jux.container('appsidebar-content').render('#appsidebar');
+    const appSidebarFooter = jux.container('appsidebar-footer').render('#appsidebar');
+
+    // Footer area
+    const appFooter = jux.container('appfooter').render('#app');
+    const appFooterContent = jux.container('appfooter-content').render('#appfooter');
+    const appFooterLegal = jux.container('appfooter-legal').render('#appfooter-content');
+
+    // Return references to all containers
+    return {
+        appHeader,
+        appHeaderContent,
+        appHeaderLogo,
+        appHeaderNav,
+        appHeaderActions,
+        appAside,
+        appMain,
+        appMainContent,
+        appSidebar,
+        appSidebarHeader,
+        appSidebarContent,
+        appSidebarFooter,
+        appFooter,
+        appFooterContent,
+        appFooterLegal
+    };
+}