juxscript 1.1.404 → 1.1.409

package/dist/components/menu.js

@@ -0,0 +1,665 @@
+import { pageState } from '../state/pageState.js';
+import generateId from '../utils/idgen.js';
+let menuStylesInjected = false;
+function injectMenuStyles() {
+    if (menuStylesInjected)
+        return;
+    menuStylesInjected = true;
+    const s = document.createElement('style');
+    s.id = 'jux-menu-styles';
+    s.textContent = `
+.jux-menu {
+    --menu-bg: hsl(var(--card,0 0% 100%));
+    --menu-border: hsl(var(--border,220 13% 91%));
+    --menu-fg: hsl(var(--foreground,220 13% 18%));
+    --menu-muted: hsl(var(--muted-foreground,220 9% 46%));
+    --menu-hover: hsl(var(--accent,217 91% 97%));
+    --menu-active-bg: hsl(var(--accent,217 91% 97%));
+    --menu-active-fg: hsl(var(--accent-foreground,217 89% 41%));
+    --menu-radius: var(--radius,12px);
+    --menu-width: 240px;
+    display: flex;
+    flex-direction: column;
+    width: var(--menu-width);
+    background: var(--menu-bg);
+    border-right: 1px solid var(--menu-border);
+    font-family: var(--font-sans,'Google Sans','Inter',system-ui,sans-serif);
+    font-size: 14px;
+    overflow: hidden;
+    flex-shrink: 0;
+    height: 100%;
+    box-sizing: border-box;
+    transition: width 0.2s ease;
+    user-select: none;
+}
+.jux-menu--collapsed {
+    --menu-width: 52px;
+}
+.jux-menu__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 12px 10px;
+    border-bottom: 1px solid var(--menu-border);
+    min-height: 52px;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.jux-menu__header-icon {
+    font-size: 18px;
+    flex-shrink: 0;
+    width: 28px;
+    text-align: center;
+}
+.jux-menu__header-title {
+    font-weight: 700;
+    font-size: 15px;
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    transition: opacity 0.15s, width 0.2s;
+}
+.jux-menu--collapsed .jux-menu__header-title {
+    opacity: 0;
+    width: 0;
+    flex: 0;
+    pointer-events: none;
+}
+.jux-menu--collapsed .jux-menu__header-icon {
+    opacity: 0;
+    width: 0;
+    flex: 0;
+    pointer-events: none;
+}
+.jux-menu--collapsed .jux-menu__header {
+    justify-content: center;
+    padding: 14px 4px 10px;
+}
+.jux-menu__collapse-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--menu-muted);
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1;
+    flex-shrink: 0;
+    transition: color 0.12s, background 0.12s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+}
+.jux-menu__collapse-btn:hover {
+    color: var(--menu-fg);
+    background: var(--menu-hover);
+}
+.jux-menu__scroll {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 6px 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--menu-border) transparent;
+}
+.jux-menu__scroll::-webkit-scrollbar { width: 4px; }
+.jux-menu__scroll::-webkit-scrollbar-track { background: transparent; }
+.jux-menu__scroll::-webkit-scrollbar-thumb { background: var(--menu-border); border-radius: 4px; }
+.jux-menu__footer {
+    border-top: 1px solid var(--menu-border);
+    padding: 6px 0;
+    flex-shrink: 0;
+}
+
+/* ── Partition (horizontal rule with optional label) ── */
+.jux-menu__partition {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px 4px;
+    color: var(--menu-muted);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+}
+.jux-menu__partition::before,
+.jux-menu__partition::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--menu-border);
+}
+.jux-menu__partition:not(:has(span))::after { display: none; }
+.jux-menu--collapsed .jux-menu__partition {
+    padding: 8px 4px 4px;
+    justify-content: center;
+}
+.jux-menu--collapsed .jux-menu__partition span { display: none; }
+
+/* ── Spacer ── */
+.jux-menu__spacer { height: 8px; }
+
+/* ── Group label ── */
+.jux-menu__group-label {
+    padding: 8px 12px 2px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--menu-muted);
+    white-space: nowrap;
+    overflow: hidden;
+}
+.jux-menu--collapsed .jux-menu__group-label { display: none; }
+
+/* ── Item ── */
+.jux-menu__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 12px;
+    margin: 1px 6px;
+    border-radius: var(--menu-radius);
+    color: var(--menu-fg);
+    cursor: pointer;
+    text-decoration: none;
+    border: none;
+    background: none;
+    font: inherit;
+    font-size: 14px;
+    text-align: left;
+    width: calc(100% - 12px);
+    box-sizing: border-box;
+    transition: background 0.1s, color 0.1s;
+    position: relative;
+    white-space: nowrap;
+    min-height: 36px;
+}
+.jux-menu__item:hover:not(.jux-menu__item--disabled) {
+    background: var(--menu-hover);
+}
+.jux-menu__item--active {
+    background: var(--menu-active-bg);
+    color: var(--menu-active-fg);
+    font-weight: 600;
+}
+.jux-menu__item--active::before {
+    content: '';
+    position: absolute;
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 60%;
+    background: hsl(var(--primary,217 89% 51%));
+    border-radius: 0 2px 2px 0;
+}
+.jux-menu__item--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.jux-menu__item--has-children > .jux-menu__item-chevron {
+    margin-left: auto;
+    flex-shrink: 0;
+    transition: transform 0.15s;
+    color: var(--menu-muted);
+    font-size: 11px;
+}
+.jux-menu__item--open > .jux-menu__item-chevron {
+    transform: rotate(90deg);
+}
+
+/* ── Item parts ── */
+.jux-menu__item-icon {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+    flex-shrink: 0;
+    line-height: 1;
+}
+.jux-menu__item-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.jux-menu__item-badge {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: hsl(var(--muted,220 14% 96%));
+    color: hsl(var(--muted-foreground,220 9% 46%));
+    flex-shrink: 0;
+    line-height: 1.4;
+}
+.jux-menu__item-badge--success { background: hsl(142 60% 90%); color: hsl(142 60% 30%); }
+.jux-menu__item-badge--warning { background: hsl(38 90% 90%); color: hsl(38 90% 35%); }
+.jux-menu__item-badge--danger  { background: hsl(0 80% 92%); color: hsl(0 72% 40%); }
+
+/* ── Submenu ── */
+.jux-menu__submenu {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.2s ease;
+}
+.jux-menu__submenu--open {
+    max-height: 600px;
+}
+.jux-menu__submenu .jux-menu__item {
+    padding-left: 40px;
+}
+.jux-menu__submenu .jux-menu__submenu .jux-menu__item {
+    padding-left: 56px;
+}
+
+/* ── Collapsed icon-rail mode ── */
+.jux-menu--collapsed .jux-menu__item {
+    padding: 7px;
+    margin: 1px 6px;
+    width: calc(100% - 12px);
+    justify-content: center;
+}
+.jux-menu--collapsed .jux-menu__item-label,
+.jux-menu--collapsed .jux-menu__item-badge,
+.jux-menu--collapsed .jux-menu__item-chevron { display: none; }
+.jux-menu--collapsed .jux-menu__item-icon {
+    width: auto;
+    font-size: 18px;
+}
+.jux-menu--collapsed .jux-menu__submenu { display: none; }
+
+/* Tooltip on collapsed rail */
+.jux-menu--collapsed .jux-menu__item[data-label]:hover::after {
+    content: attr(data-label);
+    position: fixed;
+    left: 60px;
+    background: hsl(var(--popover,220 13% 18%));
+    color: hsl(var(--popover-foreground,0 0% 98%));
+    padding: 4px 10px;
+    border-radius: var(--menu-radius);
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    z-index: 9999;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+`;
+    document.head.appendChild(s);
+}
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function resolveTarget(target) {
+    if (!target)
+        return document.getElementById('app');
+    return document.getElementById(target) || document.querySelector(target);
+}
+function isActive(item, activeId) {
+    if (item.active)
+        return true;
+    if (item.id && item.id === activeId)
+        return true;
+    if (item.href && item.href === activeId)
+        return true;
+    return false;
+}
+function hasActiveDescendant(item, activeId) {
+    if (!item.children)
+        return false;
+    return item.children.some(c => isActive(c, activeId) || hasActiveDescendant(c, activeId));
+}
+// ── Builder ──────────────────────────────────────────────────────────────────
+class Menu {
+    constructor(id, options = {}) {
+        this._el = null;
+        this._openSubmenus = new Set();
+        this._onChange = null;
+        this.id = id || generateId('menu');
+        this._opts = { width: '240px', collapsible: false, collapsed: false, ...options };
+        this._activeId = options.active || '';
+        this._collapsed = options.collapsed ?? false;
+        this._injectStyles();
+    }
+    // ── Fluent API ───────────────────────────────────────────────────────
+    items(val) { this._opts.items = val; this._rerender(); return this; }
+    footer(val) { this._opts.footer = val; this._rerender(); return this; }
+    active(val) { this._activeId = val; this._rerender(); return this; }
+    title(val) { this._opts.title = val; this._rerender(); return this; }
+    titleIcon(val) { this._opts.titleIcon = val; this._rerender(); return this; }
+    collapsible(val) { this._opts.collapsible = val; this._rerender(); return this; }
+    collapsed(val) { return val ? this.collapse() : this.expand(); }
+    class(val) { this._opts.class = val; return this; }
+    style(val) { this._opts.style = val; return this; }
+    target(val) { this._opts.target = val; return this; }
+    onNavigate(fn) { this._opts.onNavigate = fn; return this; }
+    onSelect(fn) { this._opts.onSelect = fn; return this; }
+    onChange(fn) { this._onChange = fn; return this; }
+    width(val) {
+        this._opts.width = val;
+        if (this._el) {
+            this._el.style.width = this._collapsed ? '52px' : val;
+            this._el.style.setProperty('--menu-width', val);
+        }
+        return this;
+    }
+    collapse() {
+        this._collapsed = true;
+        if (this._el) {
+            this._el.classList.add('jux-menu--collapsed');
+            this._el.style.width = '52px';
+        }
+        return this;
+    }
+    expand() {
+        this._collapsed = false;
+        if (this._el) {
+            this._el.classList.remove('jux-menu--collapsed');
+            this._el.style.width = this._opts.width || '240px';
+        }
+        return this;
+    }
+    toggle() { return this._collapsed ? this.expand() : this.collapse(); }
+    // ── get*/set* delegation ─────────────────────────────────────────────
+    getItems() { return this._opts.items || []; }
+    getFooter() { return this._opts.footer || []; }
+    getActive() { return this._activeId; }
+    getWidth() { return this._opts.width || '240px'; }
+    getTitle() { return this._opts.title || ''; }
+    getTitleIcon() { return this._opts.titleIcon || ''; }
+    getCollapsible() { return this._opts.collapsible || false; }
+    getCollapsed() { return this._collapsed; }
+    getCollapse() { return this._collapsed; }
+    getExpand() { return !this._collapsed; }
+    getToggle() { return this._collapsed; }
+    getClass() { return this._opts.class || ''; }
+    getStyle() { return this._opts.style || ''; }
+    getTarget() { return this._opts.target || ''; }
+    getOnNavigate() { return this._opts.onNavigate; }
+    getOnSelect() { return this._opts.onSelect; }
+    setItems(val) { return this.items(val); }
+    setFooter(val) { return this.footer(val); }
+    setActive(val) { return this.active(val); }
+    setWidth(val) { return this.width(val); }
+    setTitle(val) { return this.title(val); }
+    setTitleIcon(val) { return this.titleIcon(val); }
+    setCollapsible(val) { return this.collapsible(val); }
+    setCollapsed(val) { return this.collapsed(val); }
+    setCollapse() { return this.collapse(); }
+    setExpand() { return this.expand(); }
+    setToggle() { return this.toggle(); }
+    setClass(val) { return this.class(val); }
+    setStyle(val) { return this.style(val); }
+    setTarget(val) { return this.target(val); }
+    setOnNavigate(fn) { return this.onNavigate(fn); }
+    setOnSelect(fn) { return this.onSelect(fn); }
+    getElement() { return this._el; }
+    isCollapsed() { return this._collapsed; }
+    getActiveId() { return this._activeId; }
+    get state() { return pageState[this.id]; }
+    // ── Render ───────────────────────────────────────────────────────────
+    render(target) {
+        this._el = this._build();
+        let cont = null;
+        if (target instanceof HTMLElement) {
+            cont = target;
+        }
+        else if (typeof target === 'string') {
+            cont = document.getElementById(target) || document.querySelector(target);
+        }
+        else if (this._opts.target) {
+            cont = document.getElementById(this._opts.target) || document.querySelector(this._opts.target);
+        }
+        else {
+            cont = document.getElementById('app');
+        }
+        cont?.appendChild(this._el);
+        return this;
+    }
+    into(target) { return this.render(target); }
+    destroy() {
+        pageState.__unregister?.(this.id);
+        this._el?.remove();
+        this._el = null;
+    }
+    // ── Styles ───────────────────────────────────────────────────────────
+    _injectStyles() {
+        injectMenuStyles();
+    }
+    // ── Build DOM ────────────────────────────────────────────────────────
+    _build() {
+        const root = document.createElement('nav');
+        root.id = this.id;
+        root.setAttribute('role', 'navigation');
+        root.className = 'jux-menu'
+            + (this._collapsed ? ' jux-menu--collapsed' : '')
+            + (this._opts.class ? ' ' + this._opts.class : '');
+        // Set explicit width directly — CSS var alone won't win over inline styles
+        root.style.width = this._collapsed ? '52px' : (this._opts.width || '240px');
+        if (this._opts.style)
+            root.style.cssText += this._opts.style;
+        // Header
+        if (this._opts.title || this._opts.titleIcon || this._opts.collapsible) {
+            root.appendChild(this._buildHeader());
+        }
+        // Main scroll area
+        const scroll = document.createElement('div');
+        scroll.className = 'jux-menu__scroll';
+        if (this._opts.items?.length) {
+            this._renderItems(this._opts.items, scroll, 0);
+        }
+        root.appendChild(scroll);
+        // Footer
+        if (this._opts.footer?.length) {
+            const footer = document.createElement('div');
+            footer.className = 'jux-menu__footer';
+            this._renderItems(this._opts.footer, footer, 0);
+            root.appendChild(footer);
+        }
+        return root;
+    }
+    _buildHeader() {
+        const header = document.createElement('div');
+        header.className = 'jux-menu__header';
+        if (this._opts.titleIcon) {
+            const icon = document.createElement('span');
+            icon.className = 'jux-menu__header-icon';
+            icon.innerHTML = this._opts.titleIcon;
+            header.appendChild(icon);
+        }
+        if (this._opts.title) {
+            const title = document.createElement('span');
+            title.className = 'jux-menu__header-title';
+            title.textContent = this._opts.title;
+            header.appendChild(title);
+        }
+        if (this._opts.collapsible) {
+            const btn = document.createElement('button');
+            btn.className = 'jux-menu__collapse-btn';
+            btn.setAttribute('aria-label', this._collapsed ? 'Expand menu' : 'Collapse menu');
+            btn.innerHTML = this._collapsed ? '❯' : '❮';
+            btn.addEventListener('click', () => {
+                this.toggle();
+                btn.innerHTML = this._collapsed ? '❯' : '❮';
+                btn.setAttribute('aria-label', this._collapsed ? 'Expand menu' : 'Collapse menu');
+            });
+            header.appendChild(btn);
+        }
+        return header;
+    }
+    _renderItems(items, container, depth) {
+        for (const item of items) {
+            const kind = item.kind ?? 'item';
+            if (kind === 'spacer') {
+                const spacer = document.createElement('div');
+                spacer.className = 'jux-menu__spacer';
+                container.appendChild(spacer);
+                continue;
+            }
+            if (kind === 'partition') {
+                const p = document.createElement('div');
+                p.className = 'jux-menu__partition';
+                if (item.label) {
+                    const lbl = document.createElement('span');
+                    lbl.textContent = item.label;
+                    p.appendChild(lbl);
+                }
+                container.appendChild(p);
+                continue;
+            }
+            if (kind === 'group') {
+                if (item.label) {
+                    const grpLabel = document.createElement('div');
+                    grpLabel.className = 'jux-menu__group-label';
+                    grpLabel.textContent = item.label;
+                    container.appendChild(grpLabel);
+                }
+                if (item.children?.length) {
+                    this._renderItems(item.children, container, depth);
+                }
+                continue;
+            }
+            // Regular item (possibly with submenu)
+            container.appendChild(this._buildItem(item, depth));
+        }
+    }
+    _buildItem(item, depth) {
+        const itemId = item.id || item.href || item.label || generateId('mi');
+        const hasChildren = !!item.children?.length;
+        const active = isActive(item, this._activeId);
+        const openByDefault = hasActiveDescendant(item, this._activeId);
+        if (openByDefault)
+            this._openSubmenus.add(itemId);
+        const isOpen = this._openSubmenus.has(itemId);
+        const wrapper = document.createElement('div');
+        // The clickable element — anchor if href, button otherwise
+        const el = item.href && !hasChildren
+            ? document.createElement('a')
+            : document.createElement('button');
+        el.className = 'jux-menu__item'
+            + (active ? ' jux-menu__item--active' : '')
+            + (item.disabled ? ' jux-menu__item--disabled' : '')
+            + (hasChildren ? ' jux-menu__item--has-children' : '')
+            + (hasChildren && isOpen ? ' jux-menu__item--open' : '');
+        if (item.href && el instanceof HTMLAnchorElement) {
+            el.href = item.href;
+        }
+        if (item.disabled)
+            el.setAttribute('aria-disabled', 'true');
+        if (item.label)
+            el.setAttribute('data-label', item.label);
+        el.setAttribute('type', 'button');
+        // Icon
+        if (item.icon) {
+            const icon = document.createElement('span');
+            icon.className = 'jux-menu__item-icon';
+            icon.innerHTML = item.icon;
+            el.appendChild(icon);
+        }
+        // Label
+        const label = document.createElement('span');
+        label.className = 'jux-menu__item-label';
+        label.textContent = item.label || '';
+        el.appendChild(label);
+        // Badge
+        if (item.badge !== undefined) {
+            const badge = document.createElement('span');
+            badge.className = 'jux-menu__item-badge'
+                + (item.badgeVariant ? ` jux-menu__item-badge--${item.badgeVariant}` : '');
+            badge.textContent = String(item.badge);
+            el.appendChild(badge);
+        }
+        // Chevron for submenus
+        if (hasChildren) {
+            const chevron = document.createElement('span');
+            chevron.className = 'jux-menu__item-chevron';
+            chevron.innerHTML = '❯';
+            el.appendChild(chevron);
+        }
+        // Click handler
+        el.addEventListener('click', (e) => {
+            if (item.disabled) {
+                e.preventDefault();
+                return;
+            }
+            if (hasChildren) {
+                e.preventDefault();
+                if (this._openSubmenus.has(itemId)) {
+                    this._openSubmenus.delete(itemId);
+                    el.classList.remove('jux-menu__item--open');
+                    sub?.classList.remove('jux-menu__submenu--open');
+                }
+                else {
+                    this._openSubmenus.add(itemId);
+                    el.classList.add('jux-menu__item--open');
+                    sub?.classList.add('jux-menu__submenu--open');
+                }
+                return;
+            }
+            if (item.href) {
+                e.preventDefault();
+                this._setActive(itemId);
+                this._opts.onNavigate?.(item.href, item);
+                if (window.navigateTo)
+                    window.navigateTo(item.href);
+            }
+            item.onClick?.(item, e);
+            this._opts.onSelect?.(item);
+            this._onChange?.(item);
+            // Update pageState
+            if (!pageState[this.id])
+                pageState[this.id] = {};
+            pageState[this.id].selected = item.id || item.href || item.label;
+            pageState[this.id].item = item;
+        });
+        wrapper.appendChild(el);
+        // Submenu
+        let sub;
+        if (hasChildren) {
+            sub = document.createElement('div');
+            sub.className = 'jux-menu__submenu' + (isOpen ? ' jux-menu__submenu--open' : '');
+            this._renderItems(item.children, sub, depth + 1);
+            wrapper.appendChild(sub);
+        }
+        return wrapper;
+    }
+    _setActive(id) {
+        this._activeId = id;
+        // Update active classes in DOM without full re-render
+        this._el?.querySelectorAll('.jux-menu__item').forEach(el => {
+            const label = el.getAttribute('data-label') || '';
+            const href = el.href || '';
+            const elId = el.getAttribute('data-id') || '';
+            const active = elId === id || href.endsWith(id) || label === id;
+            el.classList.toggle('jux-menu__item--active', active);
+        });
+    }
+    _rerender() {
+        if (!this._el)
+            return;
+        const parent = this._el.parentElement;
+        const next = this._el.nextSibling;
+        this._el.remove();
+        this._el = this._build();
+        if (parent) {
+            if (next)
+                parent.insertBefore(this._el, next);
+            else
+                parent.appendChild(this._el);
+        }
+    }
+}
+// ── Factory ──────────────────────────────────────────────────────────────────
+export function menu(id, options = {}) {
+    const m = new Menu(id, options);
+    pageState.__register(m);
+    m.render();
+    return m;
+}
+export { Menu };
+export default menu;
+//# sourceMappingURL=menu.js.map