juxscript 1.1.366 → 1.1.368

package/bin/cli.js

@@ -4,6 +4,7 @@ import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { spawn } from 'child_process';
+import { createInterface } from 'readline';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -287,23 +288,154 @@ Usage:
   jux build            Build for production
   jux serve            Start production server
   jux serve --hot      Start dev server with hot reload
+  jux comp [name]      Add a component preset to your project
 
 Options:
   --help, -h           Show this help message
 `);
 }
 
+// ═══════════════════════════════════════════════════════════════
+// COMMAND: comp [name]
+// Copies a preset component into the project's jux directory
+// ═══════════════════════════════════════════════════════════════
+async function runComp(compName) {
+  const presetsDir = path.join(PACKAGE_ROOT, 'presets');
+
+  if (!fs.existsSync(presetsDir)) {
+    console.error('❌ No presets directory found in juxscript package.');
+    process.exit(1);
+  }
+
+  // Discover available presets (each subfolder is a preset)
+  const available = fs.readdirSync(presetsDir, { withFileTypes: true })
+    .filter(d => d.isDirectory())
+    .map(d => d.name);
+
+  if (available.length === 0) {
+    console.error('❌ No presets available.');
+    process.exit(1);
+  }
+
+  // If no name given, show interactive list
+  if (!compName) {
+    compName = await promptPresetSelection(available);
+    if (!compName) {
+      console.log('Cancelled.');
+      process.exit(0);
+    }
+  }
+
+  // Validate preset exists
+  const presetDir = path.join(presetsDir, compName);
+  if (!fs.existsSync(presetDir)) {
+    console.error(`❌ Preset "${compName}" not found.`);
+    console.log(`\nAvailable presets:`);
+    available.forEach(p => console.log(`   • ${p}`));
+    process.exit(1);
+  }
+
+  // Resolve target directory from juxconfig.js or default 'jux'
+  const targetSrcDir = resolveProjectSrcDir();
+
+  if (!fs.existsSync(targetSrcDir)) {
+    fs.mkdirSync(targetSrcDir, { recursive: true });
+  }
+
+  // Copy all files from preset to project src dir
+  const presetFiles = fs.readdirSync(presetDir, { withFileTypes: true });
+  let copied = 0;
+
+  for (const entry of presetFiles) {
+    if (entry.isFile()) {
+      const srcPath = path.join(presetDir, entry.name);
+      const destPath = path.join(targetSrcDir, entry.name);
+
+      if (fs.existsSync(destPath)) {
+        const overwrite = await promptYesNo(`   ⚠️  "${entry.name}" already exists. Overwrite?`);
+        if (!overwrite) {
+          console.log(`   ⏭️  Skipped ${entry.name}`);
+          continue;
+        }
+      }
+
+      fs.copyFileSync(srcPath, destPath);
+      console.log(`   ✅ ${entry.name}`);
+      copied++;
+    }
+  }
+
+  console.log(`\n✅ Copied ${copied} file(s) from preset "${compName}" to ${path.relative(process.cwd(), targetSrcDir)}/\n`);
+}
+
+function resolveProjectSrcDir() {
+  const projectRoot = process.cwd();
+  const configPath = path.join(projectRoot, 'juxconfig.js');
+
+  if (fs.existsSync(configPath)) {
+    try {
+      const configContent = fs.readFileSync(configPath, 'utf8');
+      const srcDirMatch = configContent.match(/srcDir\s*:\s*['"]([^'"]+)['"]/);
+      if (srcDirMatch) {
+        return path.resolve(projectRoot, srcDirMatch[1]);
+      }
+    } catch (_) { }
+  }
+
+  return path.resolve(projectRoot, 'jux');
+}
+
+function promptPresetSelection(presets) {
+  return new Promise((resolve) => {
+    console.log('\n📦 Available component presets:\n');
+    presets.forEach((p, i) => {
+      // Read files in preset to show what's included
+      const presetDir = path.join(PACKAGE_ROOT, 'presets', p);
+      const files = fs.readdirSync(presetDir).filter(f => !f.startsWith('.'));
+      console.log(`   ${i + 1}) ${p}  (${files.join(', ')})`);
+    });
+    console.log(`   0) Cancel\n`);
+
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    rl.question('Select a preset (number or name): ', (answer) => {
+      rl.close();
+      const trimmed = answer.trim();
+
+      // By number
+      const num = parseInt(trimmed, 10);
+      if (num === 0) return resolve(null);
+      if (num >= 1 && num <= presets.length) return resolve(presets[num - 1]);
+
+      // By name
+      if (presets.includes(trimmed)) return resolve(trimmed);
+
+      console.error(`❌ Invalid selection: "${trimmed}"`);
+      resolve(null);
+    });
+  });
+}
+
+function promptYesNo(question) {
+  return new Promise((resolve) => {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`${question} (y/N): `, (answer) => {
+      rl.close();
+      resolve(answer.trim().toLowerCase() === 'y');
+    });
+  });
+}
+
 // ═══════════════════════════════════════════════════════════════
 // MAIN ROUTER
 // ═══════════════════════════════════════════════════════════════
 switch (command) {
   case 'create':
-    createProject(args[0]); // ✅ Already async, no await needed at top level
+    createProject(args[0]);
     break;
 
   case 'init':
   case 'install':
-    initProject(); // ✅ Already async, no await needed at top level
+    initProject();
     break;
 
   case 'build':
@@ -315,6 +447,12 @@ switch (command) {
     runServe();
     break;
 
+  case 'comp':
+  case 'component':
+  case 'preset':
+    runComp(args[0]);
+    break;
+
   case '--help':
   case '-h':
   case undefined:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.366",
+  "version": "1.1.368",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",
@@ -24,6 +24,7 @@
     "dom-structure-map.json",
     "bin",
     "create",
+    "presets",
     "machinery",
     "juxconfig.example.js",
     "README.md",

package/presets/sidebar/sidebar-usage.jux

@@ -0,0 +1,7 @@
+import { jux } from 'juxscript';
+import { juxSidebar } from './sidebar.jux';
+const allRoutes = jux.routes.all();
+
+juxSidebar('my-sidebar', allRoutes,
+    { title: 'Simple App', logo: 'J', footer: 'v1.0', density: 'inflated', collapsible: true });
+

package/presets/sidebar/sidebar.jux

@@ -0,0 +1,235 @@
+import { jux, pageState } from 'juxscript';
+
+var COLLAPSE_ICON_OPEN = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg>';
+var COLLAPSE_ICON_CLOSED = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform:scaleX(-1)"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg>';
+
+export function juxSidebar(id, sections, options) {
+    options = options || {};
+    var _title = options.title || 'App';
+    var _logo = options.logo || _title.charAt(0).toUpperCase();
+    var _footer = options.footer || '';
+    var _width = options.width || '260px';
+    var _collapsedWidth = options.collapsedWidth || '52px';
+    var _target = options.target;
+    var _density = options.density || 'normal';
+    var _collapsible = options.collapsible !== undefined ? options.collapsible : false;
+    var _collapsed = options.collapsed || false;
+    var _sectionCount = 0;
+    var _rendered = false;
+    var _footerRendered = false;
+
+    var DENSITY = {
+        dense: { headerPad: '10px', itemPad: '4px 10px', labelPad: '6px 10px 2px', footerPad: '8px 12px', gap: '0px', fontSize: '12px', iconSize: '13px' },
+        normal: { headerPad: '16px', itemPad: '8px 12px', labelPad: '8px 12px 4px', footerPad: '12px 16px', gap: '1px', fontSize: '13px', iconSize: '15px' },
+        inflated: { headerPad: '20px', itemPad: '12px 16px', labelPad: '12px 16px 6px', footerPad: '16px 20px', gap: '4px', fontSize: '14px', iconSize: '17px' }
+    };
+
+    function normalizeItem(item) {
+        if (typeof item === 'string') {
+            var path = item.startsWith('/') ? item : '/' + item;
+            var seg = path.split('/').filter(Boolean).pop() || 'Home';
+            return { id: id + '-' + seg.toLowerCase().replace(/[^a-z0-9]/g, '-'), label: seg.charAt(0).toUpperCase() + seg.slice(1), path: path };
+        }
+        // Support RouteInfo shape { path, name, file } from jux.routes.all()
+        var itemPath = item.path || '';
+        var seg = itemPath.split('/').filter(Boolean).pop() || 'home';
+        return {
+            id: item.id || id + '-' + seg.toLowerCase().replace(/[^a-z0-9]/g, '-'),
+            label: item.label || item.name || seg.charAt(0).toUpperCase() + seg.slice(1),
+            path: itemPath,
+            icon: item.icon
+        };
+    }
+
+    function normalizeSections(input) {
+        if (!input || !Array.isArray(input) || input.length === 0) return [];
+        var isFlat = input.every(function (i) { return typeof i === 'string' || (typeof i === 'object' && !i.items); });
+        if (isFlat) return [{ items: input.map(normalizeItem) }];
+        return input.map(function (s) {
+            if (typeof s === 'string') return { items: [normalizeItem(s)] };
+            return { label: s.label, items: (s.items || []).map(normalizeItem) };
+        });
+    }
+
+    function ensureShell() {
+        if (_rendered) return;
+        _rendered = true;
+        injectStyles();
+        var sidebarClass = 'jux-sidebar jux-sidebar--' + _density;
+        if (_collapsed) sidebarClass += ' jux-sidebar--collapsed';
+        jux.div(id, { class: sidebarClass, style: 'width:' + (_collapsed ? _collapsedWidth : _width), target: _target });
+        jux.div(id + '-header', { class: 'jux-sidebar-header', target: id });
+        jux.div(id + '-logo', { class: 'jux-sidebar-logo', target: id + '-header' });
+        renderLogo();
+        jux.span(id + '-title', { class: 'jux-sidebar-title-text', content: _title, target: id + '-header' });
+        if (_collapsible) {
+            jux.div(id + '-collapse-btn', {
+                class: 'jux-sidebar-collapse-btn',
+                target: id + '-header'
+            });
+            var btnEl = document.getElementById(id + '-collapse-btn');
+            if (btnEl) btnEl.innerHTML = _collapsed ? COLLAPSE_ICON_CLOSED : COLLAPSE_ICON_OPEN;
+        }
+    }
+
+    function renderLogo() {
+        var logoEl = document.getElementById(id + '-logo');
+        if (!logoEl) return;
+        if (_logo.startsWith('<svg') || _logo.startsWith('<SVG')) {
+            logoEl.innerHTML = _logo;
+        } else if (_logo.startsWith('/') || _logo.startsWith('http') || _logo.startsWith('data:')) {
+            logoEl.innerHTML = '<img src="' + _logo + '" alt="logo" class="jux-sidebar-logo-img" />';
+        } else {
+            logoEl.textContent = _logo;
+        }
+    }
+
+    function renderSection(section) {
+        ensureShell();
+        var i = _sectionCount++;
+        if (i > 0) jux.div(id + '-divider-' + i, { class: 'jux-sidebar-divider', target: id });
+        if (section.label) jux.div(id + '-label-' + i, { class: 'jux-sidebar-label', content: section.label, target: id });
+        jux.nav(id + '-nav-' + i, { target: id, items: section.items });
+    }
+
+    function renderFooter() {
+        if (_footerRendered || !_footer) return;
+        _footerRendered = true;
+        jux.div(id + '-footer', { class: 'jux-sidebar-footer', content: _footer, target: id });
+    }
+
+    function applyCollapsed(collapsed) {
+        _collapsed = collapsed;
+        var el = document.getElementById(id);
+        if (!el) return;
+        if (_collapsed) {
+            el.classList.add('jux-sidebar--collapsed');
+            el.style.width = _collapsedWidth;
+        } else {
+            el.classList.remove('jux-sidebar--collapsed');
+            el.style.width = _width;
+        }
+        if (_collapsible) {
+            var btnEl = document.getElementById(id + '-collapse-btn');
+            if (btnEl) btnEl.innerHTML = _collapsed ? COLLAPSE_ICON_CLOSED : COLLAPSE_ICON_OPEN;
+        }
+    }
+
+    function injectStyles() {
+        jux.style('menu-styles', '\
+        body { margin: 0; }\
+        .jux-sidebar { display:flex; flex-direction:column; min-height:100vh; background:hsl(var(--card)); color:hsl(var(--card-foreground)); border-right:1px solid hsl(var(--border)); font-family:var(--font-sans,system-ui,sans-serif); transition:width 0.2s ease; overflow:hidden; }\
+        .jux-sidebar-header { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; border-bottom:1px solid hsl(var(--border)); min-height:20px; position:relative; }\
+        .jux-sidebar-logo { width:20px; height:20px; min-width:20px; border-radius:6px; background:hsl(var(--primary)); display:flex; align-items:center; justify-content:center; color:hsl(var(--primary-foreground)); font-size:11px; font-weight:700; flex-shrink:0; overflow:hidden; }\
+        .jux-sidebar-logo-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }\
+        .jux-sidebar-logo svg { width:14px; height:14px; }\
+        .jux-sidebar-title-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity 0.2s ease, max-width 0.2s ease; max-width:200px; flex:1; }\
+        .jux-sidebar-label { font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; overflow:hidden; transition:opacity 0.2s ease, max-height 0.2s ease; max-height:30px; }\
+        .jux-sidebar-footer { margin-top:auto; border-top:1px solid hsl(var(--border)); font-size:11px; color:hsl(var(--muted-foreground)); white-space:nowrap; overflow:hidden; transition:opacity 0.2s ease; }\
+        .jux-sidebar-divider { height:1px; background:hsl(var(--border)); margin:4px 8px; }\
+        .jux-nav-item { display:flex; align-items:center; border-radius:var(--radius,6px); font-weight:500; color:hsl(var(--foreground)); cursor:pointer; transition:background 0.15s; user-select:none; text-decoration:none; white-space:nowrap; overflow:hidden; }\
+        .jux-nav-item:hover { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }\
+        .jux-nav-item--active { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); font-weight:600; }\
+        .jux-nav-item-icon { text-align:center; flex-shrink:0; }\
+        .jux-nav-item-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity 0.2s ease; }\
+        \
+        .jux-sidebar-collapse-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:6px; color:hsl(var(--muted-foreground)); flex-shrink:0; transition:background 0.15s, color 0.15s; margin-left:auto; }\
+        .jux-sidebar-collapse-btn:hover { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }\
+        .jux-sidebar-collapse-btn svg { display:block; }\
+        \
+        .jux-sidebar--collapsed .jux-sidebar-header { flex-direction:column; align-items:center; gap:4px; padding-left:4px!important; padding-right:4px!important; }\
+        .jux-sidebar--collapsed .jux-sidebar-title-text { opacity:0; max-width:0; height:0; overflow:hidden; margin:0; }\
+        .jux-sidebar--collapsed .jux-sidebar-label { opacity:0; max-height:0; padding-top:0!important; padding-bottom:0!important; margin:0; }\
+        .jux-sidebar--collapsed .jux-sidebar-footer { opacity:0; height:0; padding:0!important; border:none; }\
+        .jux-sidebar--collapsed .jux-nav-item-text { opacity:0; width:0; overflow:hidden; }\
+        .jux-sidebar--collapsed .jux-nav-item { justify-content:center; gap:0!important; }\
+        .jux-sidebar--collapsed .jux-sidebar-collapse-btn { margin-left:0; width:24px; height:24px; }\
+        .jux-sidebar--collapsed .jux-sidebar-collapse-btn svg { width:14px; height:14px; }\
+        .jux-sidebar--collapsed .jux-sidebar-logo { margin:0; }\
+        \
+        .jux-sidebar--dense .jux-sidebar-header { padding:' + DENSITY.dense.headerPad + '; }\
+        .jux-sidebar--dense .jux-sidebar-label { padding:' + DENSITY.dense.labelPad + '; }\
+        .jux-sidebar--dense .jux-sidebar-footer { padding:' + DENSITY.dense.footerPad + '; }\
+        .jux-sidebar--dense .jux-nav-item { padding:' + DENSITY.dense.itemPad + '; margin:' + DENSITY.dense.gap + ' 0; font-size:' + DENSITY.dense.fontSize + '; gap:8px; }\
+        .jux-sidebar--dense .jux-nav-item-icon { width:16px; font-size:' + DENSITY.dense.iconSize + '; }\
+        \
+        .jux-sidebar--normal .jux-sidebar-header { padding:' + DENSITY.normal.headerPad + '; }\
+        .jux-sidebar--normal .jux-sidebar-label { padding:' + DENSITY.normal.labelPad + '; }\
+        .jux-sidebar--normal .jux-sidebar-footer { padding:' + DENSITY.normal.footerPad + '; }\
+        .jux-sidebar--normal .jux-nav-item { padding:' + DENSITY.normal.itemPad + '; margin:' + DENSITY.normal.gap + ' 0; font-size:' + DENSITY.normal.fontSize + '; gap:10px; }\
+        .jux-sidebar--normal .jux-nav-item-icon { width:18px; font-size:' + DENSITY.normal.iconSize + '; }\
+        \
+        .jux-sidebar--inflated .jux-sidebar-header { padding:' + DENSITY.inflated.headerPad + '; }\
+        .jux-sidebar--inflated .jux-sidebar-label { padding:' + DENSITY.inflated.labelPad + '; }\
+        .jux-sidebar--inflated .jux-sidebar-footer { padding:' + DENSITY.inflated.footerPad + '; }\
+        .jux-sidebar--inflated .jux-nav-item { padding:' + DENSITY.inflated.itemPad + '; margin:' + DENSITY.inflated.gap + ' 0; font-size:' + DENSITY.inflated.fontSize + '; gap:12px; }\
+        .jux-sidebar--inflated .jux-nav-item-icon { width:20px; font-size:' + DENSITY.inflated.iconSize + '; }\
+        ');
+    }
+
+    var api = {
+        id: id,
+        title: function (val) { _title = val; return api; },
+        logo: function (val) { _logo = val; return api; },
+        footer: function (val) {
+            _footer = val;
+            if (_rendered) renderFooter();
+            return api;
+        },
+        width: function (val) { _width = val; return api; },
+        collapsedWidth: function (val) { _collapsedWidth = val; return api; },
+        target: function (val) { _target = val; return api; },
+        density: function (val) { _density = val; return api; },
+        collapsible: function (val) { _collapsible = val !== undefined ? val : true; return api; },
+
+        section: function (label, items) {
+            renderSection({ label: label, items: (items || []).map(normalizeItem) });
+            return api;
+        },
+
+        items: function (items) {
+            renderSection({ items: (items || []).map(normalizeItem) });
+            return api;
+        },
+
+        render: function () {
+            ensureShell();
+            renderFooter();
+            if (_collapsible) {
+                pageState.__watch(function () {
+                    if (pageState[id + '-collapse-btn'].click) {
+                        api.toggleCollapse();
+                    }
+                });
+            }
+            return api;
+        },
+
+        addSection: function (label, items) { return api.section(label, items); },
+        setTitle: function (val) { pageState[id + '-title'].content = val; return api; },
+        setFooter: function (val) { pageState[id + '-footer'].content = val; return api; },
+        show: function () { pageState[id].visible = true; return api; },
+        hide: function () { pageState[id].visible = false; return api; },
+        toggle: function () { pageState[id].visible = !pageState[id].visible; return api; },
+        collapse: function () { applyCollapsed(true); return api; },
+        expand: function () { applyCollapsed(false); return api; },
+        toggleCollapse: function () { applyCollapsed(!_collapsed); return api; },
+        isCollapsed: function () { return _collapsed; },
+        getElement: function () { return document.getElementById(id); }
+    };
+
+    if (sections && Array.isArray(sections) && sections.length > 0) {
+        var normalized = normalizeSections(sections);
+        normalized.forEach(renderSection);
+        renderFooter();
+        if (_collapsible) {
+            pageState.__watch(function () {
+                if (pageState[id + '-collapse-btn'].click) {
+                    api.toggleCollapse();
+                }
+            });
+        }
+    }
+
+    return api;
+}