juxscript 1.1.162 → 1.1.163

package/index.d.ts

@@ -12,6 +12,7 @@ import { datepicker } from './lib/components/datepicker.js';
 import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
+import { dropdownMenu } from './lib/components/dropdown-menu.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -76,6 +77,7 @@ export declare const jux: {
     dialog: typeof dialog;
     divider: typeof divider;
     dropdown: typeof dropdown;
+    dropdownMenu: typeof dropdownMenu;
     element: typeof element;
     fileupload: typeof fileupload;
     grid: typeof grid;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -12,6 +12,7 @@ import { datepicker } from './lib/components/datepicker.js';
 import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
+import { dropdownMenu } from './lib/components/dropdown-menu.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -82,6 +83,7 @@ export const jux = {
     dialog,
     divider,
     dropdown,
+    dropdownMenu,
     element,
     fileupload,
     grid,

package/lib/components/dropdown-menu.d.ts

@@ -0,0 +1,42 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface DropdownMenuItem {
+    type?: 'item' | 'label' | 'separator';
+    label?: string;
+    value?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    submenu?: boolean;
+}
+export interface DropdownMenuOptions {
+    trigger?: string;
+    items?: DropdownMenuItem[];
+    style?: string;
+    class?: string;
+}
+type DropdownMenuState = BaseState & {
+    trigger: string;
+    items: DropdownMenuItem[];
+    open: boolean;
+};
+export declare class DropdownMenu extends BaseComponent<DropdownMenuState> {
+    private _wrapper;
+    private _menuEl;
+    constructor(id: string, options?: DropdownMenuOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    trigger(value: string): this;
+    items(value: DropdownMenuItem[]): this;
+    addItem(item: DropdownMenuItem): this;
+    separator(): this;
+    label(text: string): this;
+    item(label: string, value?: string, shortcut?: string): this;
+    open(): this;
+    close(): this;
+    toggle(): this;
+    update(prop: string, value: any): void;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+    private _buildItems;
+}
+export declare function dropdownMenu(id: string, options?: DropdownMenuOptions): DropdownMenu;
+export {};
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/lib/components/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAKnE,MAAM,WAAW,gBAAgB;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,qBAAa,YAAa,SAAQ,aAAa,CAAC,iBAAiB,CAAC;IAC9D,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA4B;gBAE/B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB;IAUzD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAC/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE5B,KAAK,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI;IAEtC,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAKrC,SAAS,IAAI,IAAI;IAIjB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIzB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAI5D,IAAI,IAAI,IAAI;IAMZ,KAAK,IAAI,IAAI;IAMb,MAAM,IAAI,IAAI;IAId,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAItC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IA2ElE,OAAO,CAAC,WAAW;CA+CtB;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB,GAAG,YAAY,CAExF"}

package/lib/components/dropdown-menu.js

@@ -0,0 +1,177 @@
+import { BaseComponent } from './base/BaseComponent.js';
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['select'];
+export class DropdownMenu extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            trigger: options.trigger ?? 'Open',
+            items: options.items ?? [],
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._wrapper = null;
+        this._menuEl = null;
+    }
+    getTriggerEvents() { return TRIGGER_EVENTS; }
+    getCallbackEvents() { return CALLBACK_EVENTS; }
+    /* ═══════════════════════ FLUENT API ═══════════════════════ */
+    trigger(value) { this.state.trigger = value; return this; }
+    items(value) { this.state.items = value; return this; }
+    addItem(item) {
+        this.state.items = [...this.state.items, item];
+        return this;
+    }
+    separator() {
+        return this.addItem({ type: 'separator' });
+    }
+    label(text) {
+        return this.addItem({ type: 'label', label: text });
+    }
+    item(label, value, shortcut) {
+        return this.addItem({ label, value: value ?? label, shortcut });
+    }
+    open() {
+        this.state.open = true;
+        if (this._menuEl)
+            this._menuEl.style.display = 'flex';
+        return this;
+    }
+    close() {
+        this.state.open = false;
+        if (this._menuEl)
+            this._menuEl.style.display = 'none';
+        return this;
+    }
+    toggle() {
+        return this.state.open ? this.close() : this.open();
+    }
+    update(prop, value) { }
+    /* ═══════════════════════ RENDER ═══════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { trigger, items, style, class: className } = this.state;
+        // Inject styles once
+        if (!document.getElementById('jux-dropdown-menu-styles')) {
+            const styleEl = document.createElement('style');
+            styleEl.id = 'jux-dropdown-menu-styles';
+            styleEl.textContent = `
+                .jux-dmenu-wrapper { position:relative; display:inline-block; }
+                .jux-dmenu-trigger { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; font-size:14px; font-weight:500; border-radius:6px; border:1px solid hsl(var(--border,0 0% 80%)); background:hsl(var(--background,0 0% 100%)); color:hsl(var(--foreground,0 0% 9%)); cursor:pointer; transition:background .15s; }
+                .jux-dmenu-trigger:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:220px; padding:4px; border-radius:8px; border:1px solid hsl(var(--border,0 0% 90%)); background:hsl(var(--popover,0 0% 100%)); color:hsl(var(--popover-foreground,0 0% 9%)); box-shadow:0 4px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06); z-index:100; display:none; flex-direction:column; animation:jux-dmenu-in .12s ease-out; }
+                @keyframes jux-dmenu-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
+                .jux-dmenu-label { padding:6px 8px 4px; font-size:12px; font-weight:600; color:hsl(var(--muted-foreground,0 0% 45%)); user-select:none; }
+                .jux-dmenu-sep { height:1px; margin:4px -4px; background:hsl(var(--border,0 0% 90%)); }
+                .jux-dmenu-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:6px 8px; font-size:14px; border-radius:4px; border:none; background:transparent; color:hsl(var(--popover-foreground,0 0% 9%)); cursor:pointer; text-align:left; transition:background .1s; gap:8px; font-family:inherit; }
+                .jux-dmenu-item:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-item:focus-visible { outline:2px solid hsl(var(--ring,0 0% 63%)); outline-offset:-2px; }
+                .jux-dmenu-item[disabled] { opacity:.5; pointer-events:none; }
+                .jux-dmenu-item-label { flex:1; }
+                .jux-dmenu-shortcut { font-size:12px; color:hsl(var(--muted-foreground,0 0% 45%)); letter-spacing:.04em; }
+                .jux-dmenu-arrow { font-size:10px; color:hsl(var(--muted-foreground,0 0% 45%)); }
+            `;
+            document.head.appendChild(styleEl);
+        }
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dmenu-wrapper';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dmenu-trigger';
+        triggerBtn.textContent = trigger;
+        triggerBtn.type = 'button';
+        wrapper.appendChild(triggerBtn);
+        const menu = document.createElement('div');
+        menu.className = 'jux-dmenu-menu';
+        this._menuEl = menu;
+        this._buildItems(menu, items);
+        wrapper.appendChild(menu);
+        // Toggle
+        triggerBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(); });
+        document.addEventListener('click', (e) => { if (!wrapper.contains(e.target))
+            this.close(); });
+        // Keyboard
+        triggerBtn.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.open();
+                const first = menu.querySelector('.jux-dmenu-item:not([disabled])');
+                if (first)
+                    first.focus();
+            }
+        });
+        menu.addEventListener('keydown', (e) => {
+            const btns = Array.from(menu.querySelectorAll('.jux-dmenu-item:not([disabled])'));
+            const idx = btns.indexOf(document.activeElement);
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                btns[(idx + 1) % btns.length]?.focus();
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                btns[(idx - 1 + btns.length) % btns.length]?.focus();
+            }
+            else if (e.key === 'Escape') {
+                this.close();
+                triggerBtn.focus();
+            }
+        });
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        this._wrapper = wrapper;
+        return this;
+    }
+    _buildItems(menu, items) {
+        menu.innerHTML = '';
+        items.forEach(item => {
+            if (item.type === 'separator') {
+                const sep = document.createElement('div');
+                sep.className = 'jux-dmenu-sep';
+                menu.appendChild(sep);
+            }
+            else if (item.type === 'label') {
+                const lbl = document.createElement('div');
+                lbl.className = 'jux-dmenu-label';
+                lbl.textContent = item.label ?? '';
+                menu.appendChild(lbl);
+            }
+            else {
+                const btn = document.createElement('button');
+                btn.className = 'jux-dmenu-item';
+                btn.type = 'button';
+                if (item.disabled)
+                    btn.disabled = true;
+                const labelSpan = document.createElement('span');
+                labelSpan.className = 'jux-dmenu-item-label';
+                labelSpan.textContent = item.label ?? '';
+                btn.appendChild(labelSpan);
+                if (item.submenu) {
+                    const arrow = document.createElement('span');
+                    arrow.className = 'jux-dmenu-arrow';
+                    arrow.textContent = '›';
+                    btn.appendChild(arrow);
+                }
+                else if (item.shortcut) {
+                    const sc = document.createElement('span');
+                    sc.className = 'jux-dmenu-shortcut';
+                    sc.textContent = item.shortcut;
+                    btn.appendChild(sc);
+                }
+                btn.addEventListener('click', (e) => {
+                    if (!item.disabled) {
+                        this._triggerCallback('select', item.value || item.label, e, this);
+                        this.close();
+                    }
+                });
+                menu.appendChild(btn);
+            }
+        });
+    }
+}
+export function dropdownMenu(id, options = {}) {
+    return new DropdownMenu(id, options);
+}

package/lib/components/dropdown-menu.ts

@@ -0,0 +1,214 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['select'] as const;
+
+export interface DropdownMenuItem {
+    type?: 'item' | 'label' | 'separator';
+    label?: string;
+    value?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    submenu?: boolean;
+}
+
+export interface DropdownMenuOptions {
+    trigger?: string;
+    items?: DropdownMenuItem[];
+    style?: string;
+    class?: string;
+}
+
+type DropdownMenuState = BaseState & {
+    trigger: string;
+    items: DropdownMenuItem[];
+    open: boolean;
+};
+
+export class DropdownMenu extends BaseComponent<DropdownMenuState> {
+    private _wrapper: HTMLElement | null = null;
+    private _menuEl: HTMLElement | null = null;
+
+    constructor(id: string, options: DropdownMenuOptions = {}) {
+        super(id, {
+            trigger: options.trigger ?? 'Open',
+            items: options.items ?? [],
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
+    protected getCallbackEvents(): readonly string[] { return CALLBACK_EVENTS; }
+
+    /* ═══════════════════════ FLUENT API ═══════════════════════ */
+
+    trigger(value: string): this { this.state.trigger = value; return this; }
+
+    items(value: DropdownMenuItem[]): this { this.state.items = value; return this; }
+
+    addItem(item: DropdownMenuItem): this {
+        this.state.items = [...this.state.items, item];
+        return this;
+    }
+
+    separator(): this {
+        return this.addItem({ type: 'separator' });
+    }
+
+    label(text: string): this {
+        return this.addItem({ type: 'label', label: text });
+    }
+
+    item(label: string, value?: string, shortcut?: string): this {
+        return this.addItem({ label, value: value ?? label, shortcut });
+    }
+
+    open(): this {
+        this.state.open = true;
+        if (this._menuEl) this._menuEl.style.display = 'flex';
+        return this;
+    }
+
+    close(): this {
+        this.state.open = false;
+        if (this._menuEl) this._menuEl.style.display = 'none';
+        return this;
+    }
+
+    toggle(): this {
+        return this.state.open ? this.close() : this.open();
+    }
+
+    update(prop: string, value: any): void { }
+
+    /* ═══════════════════════ RENDER ═══════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+        const { trigger, items, style, class: className } = this.state;
+
+        // Inject styles once
+        if (!document.getElementById('jux-dropdown-menu-styles')) {
+            const styleEl = document.createElement('style');
+            styleEl.id = 'jux-dropdown-menu-styles';
+            styleEl.textContent = `
+                .jux-dmenu-wrapper { position:relative; display:inline-block; }
+                .jux-dmenu-trigger { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; font-size:14px; font-weight:500; border-radius:6px; border:1px solid hsl(var(--border,0 0% 80%)); background:hsl(var(--background,0 0% 100%)); color:hsl(var(--foreground,0 0% 9%)); cursor:pointer; transition:background .15s; }
+                .jux-dmenu-trigger:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:220px; padding:4px; border-radius:8px; border:1px solid hsl(var(--border,0 0% 90%)); background:hsl(var(--popover,0 0% 100%)); color:hsl(var(--popover-foreground,0 0% 9%)); box-shadow:0 4px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06); z-index:100; display:none; flex-direction:column; animation:jux-dmenu-in .12s ease-out; }
+                @keyframes jux-dmenu-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
+                .jux-dmenu-label { padding:6px 8px 4px; font-size:12px; font-weight:600; color:hsl(var(--muted-foreground,0 0% 45%)); user-select:none; }
+                .jux-dmenu-sep { height:1px; margin:4px -4px; background:hsl(var(--border,0 0% 90%)); }
+                .jux-dmenu-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:6px 8px; font-size:14px; border-radius:4px; border:none; background:transparent; color:hsl(var(--popover-foreground,0 0% 9%)); cursor:pointer; text-align:left; transition:background .1s; gap:8px; font-family:inherit; }
+                .jux-dmenu-item:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-item:focus-visible { outline:2px solid hsl(var(--ring,0 0% 63%)); outline-offset:-2px; }
+                .jux-dmenu-item[disabled] { opacity:.5; pointer-events:none; }
+                .jux-dmenu-item-label { flex:1; }
+                .jux-dmenu-shortcut { font-size:12px; color:hsl(var(--muted-foreground,0 0% 45%)); letter-spacing:.04em; }
+                .jux-dmenu-arrow { font-size:10px; color:hsl(var(--muted-foreground,0 0% 45%)); }
+            `;
+            document.head.appendChild(styleEl);
+        }
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dmenu-wrapper';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dmenu-trigger';
+        triggerBtn.textContent = trigger;
+        triggerBtn.type = 'button';
+        wrapper.appendChild(triggerBtn);
+
+        const menu = document.createElement('div');
+        menu.className = 'jux-dmenu-menu';
+        this._menuEl = menu;
+
+        this._buildItems(menu, items);
+
+        wrapper.appendChild(menu);
+
+        // Toggle
+        triggerBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(); });
+        document.addEventListener('click', (e) => { if (!wrapper.contains(e.target as Node)) this.close(); });
+
+        // Keyboard
+        triggerBtn.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault(); this.open();
+                const first = menu.querySelector('.jux-dmenu-item:not([disabled])') as HTMLElement;
+                if (first) first.focus();
+            }
+        });
+
+        menu.addEventListener('keydown', (e) => {
+            const btns = Array.from(menu.querySelectorAll('.jux-dmenu-item:not([disabled])')) as HTMLElement[];
+            const idx = btns.indexOf(document.activeElement as HTMLElement);
+            if (e.key === 'ArrowDown') { e.preventDefault(); btns[(idx + 1) % btns.length]?.focus(); }
+            else if (e.key === 'ArrowUp') { e.preventDefault(); btns[(idx - 1 + btns.length) % btns.length]?.focus(); }
+            else if (e.key === 'Escape') { this.close(); triggerBtn.focus(); }
+        });
+
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        this._wrapper = wrapper;
+
+        return this;
+    }
+
+    private _buildItems(menu: HTMLElement, items: DropdownMenuItem[]): void {
+        menu.innerHTML = '';
+
+        items.forEach(item => {
+            if (item.type === 'separator') {
+                const sep = document.createElement('div');
+                sep.className = 'jux-dmenu-sep';
+                menu.appendChild(sep);
+            } else if (item.type === 'label') {
+                const lbl = document.createElement('div');
+                lbl.className = 'jux-dmenu-label';
+                lbl.textContent = item.label ?? '';
+                menu.appendChild(lbl);
+            } else {
+                const btn = document.createElement('button');
+                btn.className = 'jux-dmenu-item';
+                btn.type = 'button';
+                if (item.disabled) btn.disabled = true;
+
+                const labelSpan = document.createElement('span');
+                labelSpan.className = 'jux-dmenu-item-label';
+                labelSpan.textContent = item.label ?? '';
+                btn.appendChild(labelSpan);
+
+                if (item.submenu) {
+                    const arrow = document.createElement('span');
+                    arrow.className = 'jux-dmenu-arrow';
+                    arrow.textContent = '›';
+                    btn.appendChild(arrow);
+                } else if (item.shortcut) {
+                    const sc = document.createElement('span');
+                    sc.className = 'jux-dmenu-shortcut';
+                    sc.textContent = item.shortcut;
+                    btn.appendChild(sc);
+                }
+
+                btn.addEventListener('click', (e) => {
+                    if (!item.disabled) {
+                        this._triggerCallback('select', item.value || item.label, e, this);
+                        this.close();
+                    }
+                });
+
+                menu.appendChild(btn);
+            }
+        });
+    }
+}
+
+export function dropdownMenu(id: string, options: DropdownMenuOptions = {}): DropdownMenu {
+    return new DropdownMenu(id, options);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.162",
+  "version": "1.1.163",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",