@deepfuture/dui-components 0.0.20 → 1.0.0

package/command/command-item.js

@@ -1,219 +1,31 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
-import { consume } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { commandContext } from "./command-context.js";
-let itemIdCounter = 0;
-const nextItemId = () => `dui-command-item-${++itemIdCounter}`;
+import { css } from "lit";
+import { DuiCommandItemPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
+  .Item {
+    gap: var(--space-2);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1_5) var(--space-2);
+    font-size: var(--text-sm); line-height: var(--text-sm--line-height);
+    text-box: trim-both cap alphabetic;
+    font-weight: var(--font-weight-medium);
   }
 
-  :host([data-hidden]) .Item {
-    display: none;
+  .Item[data-selected] {
+    background: oklch(from var(--foreground) l c h / 0.05);
+    color: var(--text-1);
   }
 
-  .Item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    outline: none;
+  .Item[aria-disabled="true"] {
+    opacity: 0.4;
+  }
+
+  ::slotted(dui-icon) {
+    --icon-size: var(--space-4);
+    color: var(--text-2);
   }
 `;
-let DuiCommandItem = (() => {
-    let _classSuper = LitElement;
-    let _value_decorators;
-    let _value_initializers = [];
-    let _value_extraInitializers = [];
-    let _keywords_decorators;
-    let _keywords_initializers = [];
-    let _keywords_extraInitializers = [];
-    let _disabled_decorators;
-    let _disabled_initializers = [];
-    let _disabled_extraInitializers = [];
-    let __ctx_decorators;
-    let __ctx_initializers = [];
-    let __ctx_extraInitializers = [];
-    return class DuiCommandItem extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _value_decorators = [property({ type: String })];
-            _keywords_decorators = [property({ type: Array, attribute: false })];
-            _disabled_decorators = [property({ type: Boolean })];
-            __ctx_decorators = [consume({ context: commandContext, subscribe: true })];
-            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
-            __esDecorate(this, null, _keywords_decorators, { kind: "accessor", name: "keywords", static: false, private: false, access: { has: obj => "keywords" in obj, get: obj => obj.keywords, set: (obj, value) => { obj.keywords = value; } }, metadata: _metadata }, _keywords_initializers, _keywords_extraInitializers);
-            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
-            __esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-command-item";
-        static styles = [base, styles];
-        #value_accessor_storage = __runInitializers(this, _value_initializers, "");
-        /** The value this item represents. */
-        get value() { return this.#value_accessor_storage; }
-        set value(value) { this.#value_accessor_storage = value; }
-        #keywords_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _keywords_initializers, []));
-        /** Additional search keywords. */
-        get keywords() { return this.#keywords_accessor_storage; }
-        set keywords(value) { this.#keywords_accessor_storage = value; }
-        #disabled_accessor_storage = (__runInitializers(this, _keywords_extraInitializers), __runInitializers(this, _disabled_initializers, false));
-        /** Whether this item is disabled. */
-        get disabled() { return this.#disabled_accessor_storage; }
-        set disabled(value) { this.#disabled_accessor_storage = value; }
-        #_ctx_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, __ctx_initializers, void 0));
-        get _ctx() { return this.#_ctx_accessor_storage; }
-        set _ctx(value) { this.#_ctx_accessor_storage = value; }
-        #id = (__runInitializers(this, __ctx_extraInitializers), nextItemId());
-        // Track previous own-property values to avoid infinite update loops
-        #prevValue = undefined;
-        #prevKeywords = undefined;
-        #prevDisabled = undefined;
-        #registered = false;
-        get #isSelected() {
-            return this._ctx?.selectedItemId === this.#id;
-        }
-        get #isVisible() {
-            if (!this._ctx)
-                return true;
-            return this._ctx.getScore(this.#id) > 0;
-        }
-        #getGroupId() {
-            const groupHost = this.closest("[data-group-id]");
-            return groupHost?.getAttribute("data-group-id") ?? undefined;
-        }
-        #buildEntry() {
-            return {
-                id: this.#id,
-                value: this.value,
-                keywords: this.keywords,
-                textContent: this.textContent?.trim() ?? "",
-                disabled: this.disabled,
-                groupId: this.#getGroupId(),
-            };
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            // Defer registration to next frame so context is available
-            requestAnimationFrame(() => {
-                if (!this.isConnected)
-                    return;
-                this._ctx?.registerItem(this.#buildEntry());
-                this.#registered = true;
-                this.#prevValue = this.value;
-                this.#prevKeywords = this.keywords;
-                this.#prevDisabled = this.disabled;
-            });
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this._ctx?.unregisterItem(this.#id);
-            this.#registered = false;
-        }
-        willUpdate() {
-            // Only call updateItem when own properties change, not on every context update
-            if (this.#registered) {
-                const valueChanged = this.#prevValue !== this.value;
-                const keywordsChanged = this.#prevKeywords !== this.keywords;
-                const disabledChanged = this.#prevDisabled !== this.disabled;
-                if (valueChanged || keywordsChanged || disabledChanged) {
-                    this._ctx?.updateItem(this.#buildEntry());
-                    this.#prevValue = this.value;
-                    this.#prevKeywords = this.keywords;
-                    this.#prevDisabled = this.disabled;
-                }
-            }
-            // Toggle data-hidden attribute
-            if (this._ctx?.shouldFilter) {
-                if (!this.#isVisible) {
-                    this.setAttribute("data-hidden", "");
-                }
-                else {
-                    this.removeAttribute("data-hidden");
-                }
-            }
-            else {
-                this.removeAttribute("data-hidden");
-            }
-            // Update selected attribute
-            if (this.#isSelected) {
-                this.setAttribute("data-selected", "");
-            }
-            else {
-                this.removeAttribute("data-selected");
-            }
-        }
-        updated() {
-            // Scroll into view when selected
-            if (this.#isSelected) {
-                this.scrollIntoView({ block: "nearest" });
-            }
-        }
-        #handleMouseMove = () => {
-            if (!this.disabled && this._ctx?.selectedItemId !== this.#id) {
-                this._ctx?.selectItem(this.#id);
-            }
-        };
-        #handleClick = () => {
-            if (!this.disabled) {
-                this._ctx?.handleItemSelect(this.value);
-            }
-        };
-        render() {
-            return html `
-      <div
-        class="Item"
-        role="option"
-        id="${this.#id}"
-        aria-selected="${this.#isSelected}"
-        aria-disabled="${this.disabled}"
-        ?data-selected="${this.#isSelected}"
-        ?data-disabled="${this.disabled}"
-        @mousemove="${this.#handleMouseMove}"
-        @click="${this.#handleClick}"
-      >
-        <slot></slot>
-      </div>
-    `;
-        }
-    };
-})();
-export { DuiCommandItem };
+export class DuiCommandItem extends DuiCommandItemPrimitive {
+    static styles = [...DuiCommandItemPrimitive.styles, styles];
+}
+customElements.define(DuiCommandItem.tagName, DuiCommandItem);

package/command/command-list.d.ts

@@ -1,9 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-import { type CommandContext } from "./command-context.js";
-export declare class DuiCommandList extends LitElement {
-    static tagName: "dui-command-list";
+import { DuiCommandListPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandList extends DuiCommandListPrimitive {
     static styles: import("lit").CSSResult[];
-    accessor _ctx: CommandContext;
-    render(): TemplateResult;
 }

package/command/command-list.js

@@ -1,85 +1,17 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { css, html, LitElement } from "lit";
-import { consume } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { commandContext } from "./command-context.js";
+import { css } from "lit";
+import { DuiCommandListPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
+  dui-scroll-area {
+    max-height: calc(var(--space-5) * 15);
+    height: auto;
   }
 
   .List {
-    overflow: hidden;
+    padding: var(--space-1) 0;
   }
 `;
-let DuiCommandList = (() => {
-    let _classSuper = LitElement;
-    let __ctx_decorators;
-    let __ctx_initializers = [];
-    let __ctx_extraInitializers = [];
-    return class DuiCommandList extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __ctx_decorators = [consume({ context: commandContext, subscribe: true })];
-            __esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-command-list";
-        static styles = [base, styles];
-        #_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, void 0);
-        get _ctx() { return this.#_ctx_accessor_storage; }
-        set _ctx(value) { this.#_ctx_accessor_storage = value; }
-        render() {
-            return html `
-      <dui-scroll-area>
-        <div
-          class="List"
-          role="listbox"
-          id="${this._ctx?.listId ?? ""}"
-        >
-          <slot></slot>
-        </div>
-      </dui-scroll-area>
-    `;
-        }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, __ctx_extraInitializers);
-        }
-    };
-})();
-export { DuiCommandList };
+export class DuiCommandList extends DuiCommandListPrimitive {
+    static styles = [...DuiCommandListPrimitive.styles, styles];
+}
+customElements.define(DuiCommandList.tagName, DuiCommandList);

package/command/command-separator.d.ts

@@ -1,7 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-export declare class DuiCommandSeparator extends LitElement {
-    static tagName: "dui-command-separator";
+import { DuiCommandSeparatorPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandSeparator extends DuiCommandSeparatorPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/command/command-separator.js

@@ -1,15 +1,14 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { css, html, LitElement } from "lit";
-import { base } from "@deepfuture/dui-core/base";
+import { css } from "lit";
+import { DuiCommandSeparatorPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
+  .Separator {
+    height: var(--border-width-thin);
+    margin-inline: calc(-1 * var(--space-1));
+    background: var(--border);
   }
 `;
-export class DuiCommandSeparator extends LitElement {
-    static tagName = "dui-command-separator";
-    static styles = [base, styles];
-    render() {
-        return html `<div class="Separator" role="separator"></div>`;
-    }
+export class DuiCommandSeparator extends DuiCommandSeparatorPrimitive {
+    static styles = [...DuiCommandSeparatorPrimitive.styles, styles];
 }
+customElements.define(DuiCommandSeparator.tagName, DuiCommandSeparator);

package/command/command-shortcut.d.ts

@@ -1,7 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-export declare class DuiCommandShortcut extends LitElement {
-    static tagName: "dui-command-shortcut";
+import { DuiCommandShortcutPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandShortcut extends DuiCommandShortcutPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/command/command-shortcut.js

@@ -1,16 +1,13 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { css, html, LitElement } from "lit";
-import { base } from "@deepfuture/dui-core/base";
+import { css } from "lit";
+import { DuiCommandShortcutPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: inline-flex;
-    margin-left: auto;
+  .Shortcut {
+    font-size: var(--text-xs); line-height: var(--text-xs--line-height);
+    color: var(--text-2);
   }
 `;
-export class DuiCommandShortcut extends LitElement {
-    static tagName = "dui-command-shortcut";
-    static styles = [base, styles];
-    render() {
-        return html `<span class="Shortcut"><slot></slot></span>`;
-    }
+export class DuiCommandShortcut extends DuiCommandShortcutPrimitive {
+    static styles = [...DuiCommandShortcutPrimitive.styles, styles];
 }
+customElements.define(DuiCommandShortcut.tagName, DuiCommandShortcut);

package/command/command.d.ts

@@ -1,25 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-import { type CommandContext } from "./command-context.js";
-export type FilterFn = (value: string, search: string, keywords?: readonly string[]) => number;
-export declare const selectEvent: (detail: string) => CustomEvent<string>;
-export declare const searchChangeEvent: (detail: string) => CustomEvent<string>;
-export declare const escapeEvent: (detail: void) => CustomEvent<void>;
-export declare class DuiCommand extends LitElement {
-    #private;
-    static tagName: "dui-command";
+import { DuiCommandPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommand extends DuiCommandPrimitive {
     static styles: import("lit").CSSResult[];
-    /** Whether keyboard navigation wraps from last to first and vice versa. */
-    accessor loop: boolean;
-    /** Whether items should be filtered based on search text. */
-    accessor shouldFilter: boolean;
-    /** Controlled value — the currently selected item value. */
-    accessor value: string | undefined;
-    /** Custom filter function. */
-    accessor filter: FilterFn | undefined;
-    accessor _ctx: CommandContext;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    willUpdate(): void;
-    render(): TemplateResult;
 }