juxscript 1.1.324 → 1.1.333

package/dist/lib/components/blocks/menu.d.ts

@@ -0,0 +1,40 @@
+interface MenuItem {
+    id: string;
+    label: string;
+    path: string;
+    icon?: string;
+}
+interface MenuOptions {
+    title?: string;
+    logo?: string;
+    footer?: string;
+    width?: string;
+    target?: string;
+    density?: 'dense' | 'normal' | 'inflated';
+}
+interface MenuApi {
+    id: string;
+    title: (val: string) => MenuApi;
+    logo: (val: string) => MenuApi;
+    footer: (val: string) => MenuApi;
+    width: (val: string) => MenuApi;
+    target: (val: string) => MenuApi;
+    density: (val: 'dense' | 'normal' | 'inflated') => MenuApi;
+    section: (label: string, items: (string | MenuItem)[]) => MenuApi;
+    items: (items: (string | MenuItem)[]) => MenuApi;
+    render: () => MenuApi;
+    addSection: (label: string, items: (string | MenuItem)[]) => MenuApi;
+    setTitle: (val: string) => MenuApi;
+    setFooter: (val: string) => MenuApi;
+    show: () => MenuApi;
+    hide: () => MenuApi;
+    toggle: () => MenuApi;
+    getElement: () => HTMLElement | null;
+}
+type SectionInput = string | {
+    label?: string;
+    items?: (string | MenuItem)[];
+};
+export declare function menu(id: string, sections?: SectionInput[], options?: MenuOptions): MenuApi;
+export {};
+//# sourceMappingURL=menu.d.ts.map

package/dist/lib/components/blocks/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../lib/components/blocks/menu.ts"],"names":[],"mappings":"AAEA,UAAU,QAAQ;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,UAAU,WAAW;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC7C;AAYD,UAAU,OAAO;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAChC,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACjC,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAChC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACjC,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,KAAK,OAAO,CAAC;IAC3D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC;IAClE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC;IACjD,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC;IACrE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CACxC;AAED,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,CAAA;CAAE,CAAC;AAE/E,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CA4I1F"}

package/dist/lib/components/blocks/menu.js

@@ -0,0 +1,136 @@
+import { jux, pageState } from '../../index.js';
+export function menu(id, sections, options) {
+    const opts = options || {};
+    let _title = opts.title || 'App';
+    let _logo = opts.logo || _title.charAt(0).toUpperCase();
+    let _footer = opts.footer || '';
+    let _width = opts.width || '260px';
+    let _target = opts.target;
+    let _density = opts.density || 'normal';
+    let _sectionCount = 0;
+    let _rendered = false;
+    let _footerRendered = false;
+    const 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') {
+            const path = item.startsWith('/') ? item : '/' + item;
+            const 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 };
+        }
+        return item;
+    }
+    function normalizeSections(input) {
+        if (!input || !Array.isArray(input) || input.length === 0)
+            return [];
+        const isFlat = input.every((i) => typeof i === 'string' || (typeof i === 'object' && !('items' in i)));
+        if (isFlat)
+            return [{ items: input.map(normalizeItem) }];
+        return input.map((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();
+        jux.div(id, { class: 'jux-sidebar jux-sidebar--' + _density, style: 'width:' + _width, target: _target });
+        jux.div(id + '-header', { class: 'jux-sidebar-header', target: id });
+        jux.div(id + '-logo', { class: 'jux-sidebar-logo', content: _logo, target: id + '-header' });
+        jux.span(id + '-title', { content: _title, target: id + '-header' });
+    }
+    function renderSection(section) {
+        ensureShell();
+        const 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 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); }\
+        .jux-sidebar-header { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; border-bottom:1px solid hsl(var(--border)); }\
+        .jux-sidebar-logo { width:20px; height: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; }\
+        .jux-sidebar-label { font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.05em; }\
+        .jux-sidebar-footer { margin-top:auto; border-top:1px solid hsl(var(--border)); font-size:11px; color:hsl(var(--muted-foreground)); }\
+        .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; }\
+        .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-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 + '; }\
+        ');
+    }
+    const 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; },
+        target: function (val) { _target = val; return api; },
+        density: function (val) { _density = val; 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();
+            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; },
+        getElement: function () { return document.getElementById(id); }
+    };
+    if (sections && Array.isArray(sections) && sections.length > 0) {
+        const normalized = normalizeSections(sections);
+        normalized.forEach(renderSection);
+        renderFooter();
+    }
+    return api;
+}

package/dist/lib/index.d.ts

@@ -17,6 +17,7 @@ import { button, btn } from "./components/button.js";
 import { link, a } from "./components/link.js";
 import { container } from "./components/container.js";
 import { grid } from "./components/grid.js";
+import { menu } from "./components/blocks/menu.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -63,6 +64,7 @@ export declare const jux: {
     a: typeof a;
     container: typeof container;
     grid: typeof grid;
+    menu: typeof menu;
 };
 export { pageState };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Cf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -17,6 +17,7 @@ import { button, btn } from "./components/button.js";
 import { link, a } from "./components/link.js";
 import { container } from "./components/container.js";
 import { grid } from "./components/grid.js";
+import { menu } from "./components/blocks/menu.js";
 export const jux = {
     tag,
     div,
@@ -57,7 +58,8 @@ export const jux = {
     link,
     a,
     container,
-    grid
+    grid,
+    menu
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.324",
+  "version": "1.1.333",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",