@deepfuture/dui-components 0.0.1

package/command/command-group.d.ts

@@ -0,0 +1,15 @@
+/** 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 DuiCommandGroup extends LitElement {
+    #private;
+    static tagName: "dui-command-group";
+    static styles: import("lit").CSSResult[];
+    /** Heading text for this group. */
+    accessor heading: string;
+    accessor _ctx: CommandContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/command/command-group.js

@@ -0,0 +1,79 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, nothing } 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 groupIdCounter = 0;
+const nextGroupId = () => `dui-command-group-${++groupIdCounter}`;
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  :host([data-hidden]) {
+    display: none;
+  }
+
+  .Group {
+    overflow: hidden;
+  }
+`;
+export class DuiCommandGroup extends LitElement {
+    static { this.tagName = "dui-command-group"; }
+    static { this.styles = [base, styles]; }
+    #heading_accessor_storage = "";
+    /** Heading text for this group. */
+    get heading() { return this.#heading_accessor_storage; }
+    set heading(value) { this.#heading_accessor_storage = value; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #groupId = nextGroupId();
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("data-group-id", this.#groupId);
+        this._ctx?.registerGroup(this.#groupId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._ctx?.unregisterGroup(this.#groupId);
+    }
+    willUpdate() {
+        // Hide group when no visible items
+        if (this._ctx?.shouldFilter) {
+            const visibleCount = this._ctx.getGroupVisibleCount(this.#groupId);
+            if (visibleCount === 0 && this._ctx.search !== "") {
+                this.setAttribute("data-hidden", "");
+            }
+            else {
+                this.removeAttribute("data-hidden");
+            }
+        }
+        else {
+            this.removeAttribute("data-hidden");
+        }
+    }
+    render() {
+        return html `
+      <div class="Group" role="group" aria-label="${this.heading || nothing}">
+        ${this.heading
+            ? html `<div class="Heading" aria-hidden="true">${this.heading}</div>`
+            : nothing}
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], DuiCommandGroup.prototype, "heading", null);
+__decorate([
+    consume({ context: commandContext, subscribe: true })
+], DuiCommandGroup.prototype, "_ctx", null);

package/command/command-input.d.ts

@@ -0,0 +1,13 @@
+/** 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 DuiCommandInput extends LitElement {
+    #private;
+    static tagName: "dui-command-input";
+    static styles: import("lit").CSSResult[];
+    /** Placeholder text for the search input. */
+    accessor placeholder: string;
+    accessor _ctx: CommandContext;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/command/command-input.js

@@ -0,0 +1,106 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, nothing } 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";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .InputWrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .SearchIcon {
+    flex-shrink: 0;
+  }
+
+  .Input {
+    display: flex;
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0;
+  }
+`;
+export class DuiCommandInput extends LitElement {
+    static { this.tagName = "dui-command-input"; }
+    static { this.styles = [base, styles]; }
+    #placeholder_accessor_storage = "Search...";
+    /** Placeholder text for the search input. */
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #prevSearch = undefined;
+    #handleInput = (event) => {
+        const input = event.target;
+        this._ctx?.setSearch(input.value);
+    };
+    #handleKeyDown = (event) => {
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+        }
+    };
+    willUpdate() {
+        // Sync input value when search is cleared externally
+        if (this.#prevSearch !== undefined &&
+            this._ctx?.search === "" &&
+            this.#prevSearch !== "") {
+            const input = this.shadowRoot?.querySelector(".Input");
+            if (input)
+                input.value = "";
+        }
+        this.#prevSearch = this._ctx?.search;
+    }
+    render() {
+        return html `
+      <div class="InputWrapper">
+        <svg
+          class="SearchIcon"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <input
+          class="Input"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-expanded="true"
+          aria-controls="${this._ctx?.listId ?? nothing}"
+          aria-activedescendant="${this._ctx?.selectedItemId ?? nothing}"
+          .placeholder="${this.placeholder}"
+          @input="${this.#handleInput}"
+          @keydown="${this.#handleKeyDown}"
+        />
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], DuiCommandInput.prototype, "placeholder", null);
+__decorate([
+    consume({ context: commandContext, subscribe: true })
+], DuiCommandInput.prototype, "_ctx", null);

package/command/command-item.d.ts

@@ -0,0 +1,20 @@
+/** 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 DuiCommandItem extends LitElement {
+    #private;
+    static tagName: "dui-command-item";
+    static styles: import("lit").CSSResult[];
+    /** The value this item represents. */
+    accessor value: string;
+    /** Additional search keywords. */
+    accessor keywords: string[];
+    /** Whether this item is disabled. */
+    accessor disabled: boolean;
+    accessor _ctx: CommandContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    updated(): void;
+    render(): TemplateResult;
+}

package/command/command-item.js

@@ -0,0 +1,175 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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}`;
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  :host([data-hidden]) {
+    display: none;
+  }
+
+  .Item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+  }
+`;
+export class DuiCommandItem extends LitElement {
+    static { this.tagName = "dui-command-item"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = "";
+    /** The value this item represents. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #keywords_accessor_storage = [];
+    /** Additional search keywords. */
+    get keywords() { return this.#keywords_accessor_storage; }
+    set keywords(value) { this.#keywords_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether this item is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #id = 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>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], DuiCommandItem.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: false })
+], DuiCommandItem.prototype, "keywords", null);
+__decorate([
+    property({ type: Boolean })
+], DuiCommandItem.prototype, "disabled", null);
+__decorate([
+    consume({ context: commandContext, subscribe: true })
+], DuiCommandItem.prototype, "_ctx", null);

package/command/command-list.d.ts

@@ -0,0 +1,9 @@
+/** 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";
+    static styles: import("lit").CSSResult[];
+    accessor _ctx: CommandContext;
+    render(): TemplateResult;
+}

package/command/command-list.js

@@ -0,0 +1,43 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { commandContext } from "./command-context.js";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .List {
+    overflow: hidden;
+  }
+`;
+export class DuiCommandList extends LitElement {
+    static { this.tagName = "dui-command-list"; }
+    static { this.styles = [base, styles]; }
+    #_ctx_accessor_storage;
+    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>
+    `;
+    }
+}
+__decorate([
+    consume({ context: commandContext, subscribe: true })
+], DuiCommandList.prototype, "_ctx", null);

package/command/command-score.d.ts

@@ -0,0 +1,6 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+/**
+ * Score an item against a search query.
+ * Returns 0 for no match, higher values for better matches.
+ */
+export declare const commandScore: (query: string, value: string, textContent: string, keywords: readonly string[]) => number;

package/command/command-score.js

@@ -0,0 +1,31 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+/**
+ * Score an item against a search query.
+ * Returns 0 for no match, higher values for better matches.
+ */
+export const commandScore = (query, value, textContent, keywords) => {
+    if (!query)
+        return 1;
+    const q = query.toLowerCase();
+    const v = value.toLowerCase();
+    const t = textContent.toLowerCase();
+    if (v === q)
+        return 1.0;
+    if (v.startsWith(q))
+        return 0.8;
+    if (t.startsWith(q))
+        return 0.75;
+    if (v.includes(q))
+        return 0.7;
+    if (t.includes(q))
+        return 0.6;
+    for (const kw of keywords) {
+        if (kw.toLowerCase().startsWith(q))
+            return 0.5;
+    }
+    for (const kw of keywords) {
+        if (kw.toLowerCase().includes(q))
+            return 0.4;
+    }
+    return 0;
+};

package/command/command-separator.d.ts

@@ -0,0 +1,7 @@
+/** 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";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/command/command-separator.js

@@ -0,0 +1,15 @@
+/** 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";
+const styles = css `
+  :host {
+    display: block;
+  }
+`;
+export class DuiCommandSeparator extends LitElement {
+    static { this.tagName = "dui-command-separator"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<div class="Separator" role="separator"></div>`;
+    }
+}

package/command/command-shortcut.d.ts

@@ -0,0 +1,7 @@
+/** 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";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/command/command-shortcut.js

@@ -0,0 +1,16 @@
+/** 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";
+const styles = css `
+  :host {
+    display: inline-flex;
+    margin-left: auto;
+  }
+`;
+export class DuiCommandShortcut extends LitElement {
+    static { this.tagName = "dui-command-shortcut"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<span class="Shortcut"><slot></slot></span>`;
+    }
+}

package/command/command.d.ts

@@ -0,0 +1,25 @@
+/** 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";
+    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;
+}