juxscript 1.1.367 → 1.1.369

package/bin/cli.js

@@ -289,9 +289,11 @@ Usage:
   jux serve            Start production server
   jux serve --hot      Start dev server with hot reload
   jux comp [name]      Add a component preset to your project
+  jux comp [name] -f   Force overwrite (backs up existing files)
 
 Options:
   --help, -h           Show this help message
+  --force, -f          Overwrite existing files (creates .bak backups)
 `);
 }
 
@@ -301,6 +303,7 @@ Options:
 // ═══════════════════════════════════════════════════════════════
 async function runComp(compName) {
   const presetsDir = path.join(PACKAGE_ROOT, 'presets');
+  const forceFlag = args.includes('--force') || args.includes('-f');
 
   if (!fs.existsSync(presetsDir)) {
     console.error('❌ No presets directory found in juxscript package.');
@@ -342,87 +345,109 @@ async function runComp(compName) {
     fs.mkdirSync(targetSrcDir, { recursive: true });
   }
 
-  // Copy all files from preset to project src dir
-  const presetFiles = fs.readdirSync(presetDir, { withFileTypes: true });
+  // Resolve a safe destination folder name
+  const destFolderName = resolveDestFolderName(targetSrcDir, compName);
+  const destDir = path.join(targetSrcDir, destFolderName);
+
+  // List what will be copied
+  const presetFiles = listFilesRecursive(presetDir);
+
+  console.log(`\n📦 Preset: ${compName}`);
+  console.log(`   Source: presets/${compName}/`);
+  console.log(`   Target: ${path.relative(process.cwd(), destDir)}/\n`);
+
+  if (destFolderName !== compName) {
+    console.log(`   ⚠️  "${compName}" already exists, using "${destFolderName}" instead.\n`);
+  }
+
+  console.log(`   Files to copy:`);
+  presetFiles.forEach(f => console.log(`     📄 ${f}`));
+  console.log('');
+
+  // If dest exists (shouldn't with our naming, but just in case with --force)
+  if (fs.existsSync(destDir) && !forceFlag) {
+    const proceed = await promptYesNo(`   Directory "${destFolderName}" exists. Overwrite contents?`);
+    if (!proceed) {
+      console.log('   Cancelled.\n');
+      process.exit(0);
+    }
+  }
+
+  // Copy the entire preset folder
+  fs.mkdirSync(destDir, { recursive: true });
   let copied = 0;
+  let backed = 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;
-        }
-      }
+  for (const relFile of presetFiles) {
+    const srcPath = path.join(presetDir, relFile);
+    const destPath = path.join(destDir, relFile);
 
-      fs.copyFileSync(srcPath, destPath);
-      console.log(`   ✅ ${entry.name}`);
-      copied++;
+    // Ensure subdirectory exists
+    const destFileDir = path.dirname(destPath);
+    if (!fs.existsSync(destFileDir)) {
+      fs.mkdirSync(destFileDir, { recursive: true });
+    }
+
+    if (fs.existsSync(destPath)) {
+      // Backup existing
+      const backupPath = destPath + '.bak';
+      fs.copyFileSync(destPath, backupPath);
+      backed++;
+      console.log(`   🔄 ${relFile} (backed up to ${relFile}.bak)`);
+    } else {
+      console.log(`   ✅ ${relFile}`);
     }
+
+    fs.copyFileSync(srcPath, destPath);
+    copied++;
   }
 
-  console.log(`\n✅ Copied ${copied} file(s) from preset "${compName}" to ${path.relative(process.cwd(), targetSrcDir)}/\n`);
+  console.log(`\n✅ Done: ${copied} file(s) copied to ${path.relative(process.cwd(), destDir)}/`);
+  if (backed > 0) {
+    console.log(`   ${backed} existing file(s) backed up with .bak extension`);
+  }
+  console.log('');
 }
 
-function resolveProjectSrcDir() {
-  const projectRoot = process.cwd();
-  const configPath = path.join(projectRoot, 'juxconfig.js');
+/**
+ * Resolve a safe folder name: compName -> compName-jux -> compName-1, compName-2, ...
+ */
+function resolveDestFolderName(parentDir, baseName) {
+  const first = path.join(parentDir, baseName);
+  if (!fs.existsSync(first)) return baseName;
 
-  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 (_) { }
+  const juxName = baseName + '-jux';
+  const second = path.join(parentDir, juxName);
+  if (!fs.existsSync(second)) return juxName;
+
+  for (let i = 1; i <= 99; i++) {
+    const numbered = `${baseName}-${i}`;
+    if (!fs.existsSync(path.join(parentDir, numbered))) return numbered;
   }
 
-  return path.resolve(projectRoot, 'jux');
+  // Last resort — timestamp
+  return `${baseName}-${Date.now()}`;
 }
 
-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);
-    });
-  });
-}
+/**
+ * List all files in a directory recursively, returning relative paths
+ */
+function listFilesRecursive(dir, base = '') {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
 
-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');
-    });
-  });
+  for (const entry of entries) {
+    if (entry.name.startsWith('.')) continue;
+    const rel = base ? path.join(base, entry.name) : entry.name;
+
+    if (entry.isDirectory()) {
+      results.push(...listFilesRecursive(path.join(dir, entry.name), rel));
+    } else {
+      results.push(rel);
+    }
+  }
+
+  return results;
 }
 
 // ═══════════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.367",
+  "version": "1.1.369",
   "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/index.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;
+}

package/presets/sidebar/usage.jux

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