@deepfuture/dui-components 0.0.1

package/combobox/combobox.d.ts

@@ -0,0 +1,46 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/combobox */
+import { LitElement, type TemplateResult } from "lit";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export type ComboboxValueChangeDetail = {
+    value: string;
+    option: SelectOption;
+};
+export type ComboboxValuesChangeDetail = {
+    value: string;
+    selected: boolean;
+    values: Set<string>;
+};
+export declare const valueChangeEvent: (detail: ComboboxValueChangeDetail) => CustomEvent<ComboboxValueChangeDetail>;
+export declare const valuesChangeEvent: (detail: ComboboxValuesChangeDetail) => CustomEvent<ComboboxValuesChangeDetail>;
+/**
+ * `<dui-combobox>` — A searchable dropdown for selecting from a list of options.
+ * Supports single-select and multi-select (chip) modes.
+ *
+ * @fires value-change - Single-select: fired when selection changes.
+ *   Detail: { value: string, option: SelectOption }
+ * @fires values-change - Multi-select: fired when a value is toggled.
+ *   Detail: { value: string, selected: boolean, values: Set<string> }
+ */
+export declare class DuiCombobox extends LitElement {
+    #private;
+    static tagName: "dui-combobox";
+    static styles: import("lit").CSSResult[];
+    /** The available options. */
+    accessor options: SelectOption[];
+    /** Currently selected value (single-select mode). */
+    accessor value: string;
+    /** Currently selected values (multi-select mode). */
+    accessor values: Set<string>;
+    /** Enable multi-select mode with chips. */
+    accessor multiple: boolean;
+    /** Placeholder text for the input. */
+    accessor placeholder: string;
+    /** Whether the combobox is disabled. */
+    accessor disabled: boolean;
+    /** Name for form submission. */
+    accessor name: string;
+    render(): TemplateResult;
+}

package/combobox/combobox.js

@@ -0,0 +1,524 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/combobox */
+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 { repeat } from "lit/directives/repeat.js";
+import { live } from "lit/directives/live.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
+export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
+export const valuesChangeEvent = customEvent("values-change", { bubbles: true, composed: true });
+const hostStyles = css `
+  :host {
+    display: block;
+  }
+`;
+const componentStyles = css `
+  /* ---- Input area (structural) ---- */
+
+  .Chips {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    cursor: text;
+  }
+
+  .Chips[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .InputWrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .Input {
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0;
+    min-width: 4rem;
+    flex: 1;
+  }
+
+  .Input:disabled {
+    cursor: not-allowed;
+  }
+
+  .Arrow {
+    position: absolute;
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  .Chip {
+    display: inline-flex;
+    align-items: center;
+    cursor: default;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .ChipLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ChipRemove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+`;
+/** Styles injected into the portal positioner. */
+const portalPopupStyles = [
+    css `
+    .Popup {
+      background: var(--popover);
+      border: var(--border-width-thin) solid var(--border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      opacity: 1;
+      transition-property: opacity, transform;
+      transition-duration: var(--duration-fast);
+      transition-timing-function: var(--ease-out-3);
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    .Popup[data-starting-style],
+    .Popup[data-ending-style] {
+      opacity: 0;
+      transform: translateY(calc(var(--space-1) * -1));
+    }
+
+    dui-scroll-area {
+      max-height: 240px;
+      height: auto;
+    }
+
+    .List {
+      padding: var(--space-1);
+    }
+
+    /* ---- Items ---- */
+
+    .Item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-sm);
+      font-family: var(--font-sans);
+      color: var(--popover-foreground);
+      cursor: pointer;
+    }
+
+    .Item:hover,
+    .Item[data-highlighted] {
+      background: var(--secondary);
+      color: var(--foreground);
+    }
+
+    .ItemIndicator {
+      --icon-size: var(--space-3_5);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ItemText {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* ---- Empty ---- */
+
+    .Empty {
+      padding: var(--space-3) var(--space-3);
+      font-size: var(--font-size-sm);
+      color: var(--muted-foreground);
+      text-align: center;
+    }
+  `,
+];
+/**
+ * `<dui-combobox>` — A searchable dropdown for selecting from a list of options.
+ * Supports single-select and multi-select (chip) modes.
+ *
+ * @fires value-change - Single-select: fired when selection changes.
+ *   Detail: { value: string, option: SelectOption }
+ * @fires values-change - Multi-select: fired when a value is toggled.
+ *   Detail: { value: string, selected: boolean, values: Set<string> }
+ */
+export class DuiCombobox extends LitElement {
+    static { this.tagName = "dui-combobox"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #options_accessor_storage = [];
+    /** The available options. */
+    get options() { return this.#options_accessor_storage; }
+    set options(value) { this.#options_accessor_storage = value; }
+    #value_accessor_storage = "";
+    /** Currently selected value (single-select mode). */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #values_accessor_storage = new Set();
+    /** Currently selected values (multi-select mode). */
+    get values() { return this.#values_accessor_storage; }
+    set values(value) { this.#values_accessor_storage = value; }
+    #multiple_accessor_storage = false;
+    /** Enable multi-select mode with chips. */
+    get multiple() { return this.#multiple_accessor_storage; }
+    set multiple(value) { this.#multiple_accessor_storage = value; }
+    #placeholder_accessor_storage = "Search...";
+    /** Placeholder text for the input. */
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the combobox is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #name_accessor_storage = "";
+    /** Name for form submission. */
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #highlightedIndex_accessor_storage = -1;
+    get #highlightedIndex() { return this.#highlightedIndex_accessor_storage; }
+    set #highlightedIndex(value) { this.#highlightedIndex_accessor_storage = value; }
+    #inputValue_accessor_storage = "";
+    get #inputValue() { return this.#inputValue_accessor_storage; }
+    set #inputValue(value) { this.#inputValue_accessor_storage = value; }
+    #popup = new FloatingPortalController(this, {
+        getAnchor: () => this.multiple
+            ? this.shadowRoot?.querySelector(".Chips")
+            : this.shadowRoot?.querySelector(".InputWrapper"),
+        styles: portalPopupStyles,
+        onOpen: () => {
+            this.#highlightedIndex = -1;
+            if (!this.multiple) {
+                this.#inputValue = "";
+                const input = this.shadowRoot?.querySelector(".Input");
+                if (input)
+                    input.value = "";
+            }
+        },
+        onClose: () => {
+            this.#highlightedIndex = -1;
+            if (!this.multiple) {
+                const selected = this.options.find((o) => o.value === this.value);
+                this.#inputValue = selected?.label ?? "";
+            }
+        },
+        renderPopup: (portal) => {
+            const filtered = this.#filteredOptions;
+            const isEmpty = filtered.length === 0;
+            return html `
+        <div
+          class="Popup"
+          ?data-starting-style="${portal.isStarting}"
+          ?data-ending-style="${portal.isEnding}"
+        >
+          <dui-scroll-area>
+            <div
+              class="List"
+              id="${this.#listId}"
+              role="listbox"
+              aria-labelledby="${this.#inputId}"
+              ?data-empty="${isEmpty}"
+              @mousedown="${this.#onListMouseDown}"
+              @mousemove="${this.#onListMouseMove}"
+            >
+              ${repeat(filtered, (option) => option.value, this.#renderItem)}
+              ${isEmpty ? html ` <div class="Empty">No results</div> ` : nothing}
+            </div>
+          </dui-scroll-area>
+        </div>
+      `;
+        },
+    });
+    #inputId = `combobox-input-${crypto.randomUUID().slice(0, 8)}`;
+    #listId = `combobox-list-${crypto.randomUUID().slice(0, 8)}`;
+    /** Filtered options based on current input text. */
+    get #filteredOptions() {
+        const query = this.#inputValue.toLowerCase();
+        const opts = this.options;
+        if (!query)
+            return opts;
+        return opts.filter((opt) => opt.label.toLowerCase().includes(query));
+    }
+    // ---- Input handling ----
+    #onInput = (event) => {
+        const target = event.target;
+        this.#inputValue = target.value;
+        if (!this.#popup.isOpen) {
+            if (!this.disabled)
+                this.#popup.open();
+        }
+        this.#highlightedIndex = -1;
+    };
+    #onInputFocus = () => {
+        if (!this.#popup.isOpen && !this.disabled) {
+            this.#popup.open();
+        }
+    };
+    #onInputKeyDown = (event) => {
+        const filtered = this.#filteredOptions;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (!this.#popup.isOpen) {
+                    if (!this.disabled)
+                        this.#popup.open();
+                }
+                else {
+                    this.#highlightedIndex = Math.min(this.#highlightedIndex + 1, filtered.length - 1);
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!this.#popup.isOpen) {
+                    if (!this.disabled)
+                        this.#popup.open();
+                }
+                else {
+                    this.#highlightedIndex = Math.max(this.#highlightedIndex - 1, 0);
+                }
+                break;
+            case "Enter": {
+                event.preventDefault();
+                if (this.#popup.isOpen) {
+                    const index = this.#highlightedIndex >= 0 ? this.#highlightedIndex : 0;
+                    const option = filtered[index];
+                    if (option) {
+                        this.#selectOption(option);
+                    }
+                }
+                else if (!this.disabled) {
+                    this.#popup.open();
+                }
+                break;
+            }
+            case "Escape":
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#inputValue = "";
+                    this.#popup.close();
+                }
+                break;
+            case "Tab":
+                if (this.#popup.isOpen) {
+                    this.#popup.close();
+                }
+                break;
+            case "Home":
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#highlightedIndex = 0;
+                }
+                break;
+            case "End":
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#highlightedIndex = filtered.length - 1;
+                }
+                break;
+            case "Backspace":
+                if (this.multiple && this.#inputValue === "" && this.values.size > 0) {
+                    const lastValue = Array.from(this.values).at(-1);
+                    if (lastValue) {
+                        this.#removeValue(lastValue);
+                    }
+                }
+                break;
+        }
+    };
+    // ---- Selection ----
+    #selectOption(option) {
+        if (this.multiple) {
+            const newValues = new Set(this.values);
+            const selected = !newValues.has(option.value);
+            if (selected) {
+                newValues.add(option.value);
+            }
+            else {
+                newValues.delete(option.value);
+            }
+            this.values = newValues;
+            this.#inputValue = "";
+            this.#highlightedIndex = -1;
+            this.dispatchEvent(valuesChangeEvent({
+                value: option.value,
+                selected,
+                values: newValues,
+            }));
+            const input = this.shadowRoot?.querySelector(".Input");
+            input?.focus();
+        }
+        else {
+            this.value = option.value;
+            this.#inputValue = option.label;
+            this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
+            this.#popup.close();
+        }
+    }
+    #removeValue(value) {
+        const newValues = new Set(this.values);
+        newValues.delete(value);
+        this.values = newValues;
+        this.dispatchEvent(valuesChangeEvent({ value, selected: false, values: newValues }));
+    }
+    #onItemClick = (option) => {
+        this.#selectOption(option);
+    };
+    #onListMouseDown = (event) => {
+        event.preventDefault();
+    };
+    #onListMouseMove = () => {
+        if (this.#highlightedIndex !== -1) {
+            this.#highlightedIndex = -1;
+        }
+    };
+    #onChipsClick = () => {
+        const input = this.shadowRoot?.querySelector(".Input");
+        input?.focus();
+    };
+    // ---- Render ----
+    #renderChip = (value) => {
+        const option = this.options.find((o) => o.value === value);
+        const label = option?.label ?? value;
+        return html `
+      <span class="Chip">
+        <span class="ChipLabel">${label}</span>
+        <button
+          class="ChipRemove"
+          type="button"
+          tabindex="-1"
+          @mousedown="${(e) => e.preventDefault()}"
+          @click="${(e) => {
+            e.stopPropagation();
+            this.#removeValue(value);
+        }}"
+        >
+          <dui-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></dui-icon>
+        </button>
+      </span>
+    `;
+    };
+    #renderItem = (option, index) => {
+        const isSelected = this.multiple
+            ? this.values.has(option.value)
+            : option.value === this.value;
+        const isHighlighted = index === this.#highlightedIndex;
+        return html `
+      <div
+        class="Item"
+        role="option"
+        id="${this.#listId}-option-${index}"
+        aria-selected="${isSelected}"
+        ?data-selected="${isSelected}"
+        ?data-highlighted="${isHighlighted}"
+        @click="${() => this.#onItemClick(option)}"
+      >
+        <span class="ItemText">${option.label}</span>
+        <span class="ItemIndicator">
+          ${isSelected ? html `<dui-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></dui-icon>` : nothing}
+        </span>
+      </div>
+    `;
+    };
+    render() {
+        const inputHtml = html `
+      <input
+        class="Input"
+        id="${this.#inputId}"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        aria-haspopup="listbox"
+        aria-expanded="${this.#popup.isOpen}"
+        aria-controls="${this.#listId}"
+        aria-activedescendant="${this.#highlightedIndex >= 0
+            ? `${this.#listId}-option-${this.#highlightedIndex}`
+            : nothing}"
+        .value="${live(this.#inputValue)}"
+        .placeholder="${this.placeholder}"
+        ?disabled="${this.disabled}"
+        @input="${this.#onInput}"
+        @focus="${this.#onInputFocus}"
+        @keydown="${this.#onInputKeyDown}"
+      />
+    `;
+        if (this.multiple) {
+            return html `
+        <div
+          class="Chips"
+          part="chips"
+          ?data-disabled="${this.disabled}"
+          @click="${this.#onChipsClick}"
+        >
+          ${repeat(Array.from(this.values), (v) => v, this.#renderChip)}
+          ${inputHtml}
+          <dui-icon class="Arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></dui-icon>
+        </div>
+        ${this.name
+                ? repeat(Array.from(this.values), (v) => v, (v) => html `
+                <input type="hidden" name="${this.name}" .value="${v}" />
+              `)
+                : nothing}
+      `;
+        }
+        return html `
+      <div class="InputWrapper" part="input-wrapper">
+        ${inputHtml}
+        <dui-icon class="Arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></dui-icon>
+      </div>
+      ${this.name
+            ? html `
+            <input type="hidden" name="${this.name}" .value="${this.value}" />
+          `
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], DuiCombobox.prototype, "options", null);
+__decorate([
+    property({ type: String })
+], DuiCombobox.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], DuiCombobox.prototype, "values", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCombobox.prototype, "multiple", null);
+__decorate([
+    property({ type: String })
+], DuiCombobox.prototype, "placeholder", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCombobox.prototype, "disabled", null);
+__decorate([
+    property({ type: String })
+], DuiCombobox.prototype, "name", null);

package/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiCombobox, valueChangeEvent, valuesChangeEvent, } from "./combobox.js";
+export type { SelectOption, ComboboxValueChangeDetail, ComboboxValuesChangeDetail, } from "./combobox.js";

package/combobox/index.js

@@ -0,0 +1 @@
+export { DuiCombobox, valueChangeEvent, valuesChangeEvent, } from "./combobox.js";

package/combobox/register.d.ts

@@ -0,0 +1 @@
+export {};

package/combobox/register.js

@@ -0,0 +1,4 @@
+import { DuiCombobox } from "./combobox.js";
+if (!customElements.get(DuiCombobox.tagName)) {
+    customElements.define(DuiCombobox.tagName, DuiCombobox);
+}

package/command/command-context.d.ts

@@ -0,0 +1,30 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+export type CommandItemEntry = {
+    readonly id: string;
+    readonly value: string;
+    readonly keywords: readonly string[];
+    readonly textContent: string;
+    readonly disabled: boolean;
+    readonly groupId: string | undefined;
+};
+export type CommandContext = {
+    readonly search: string;
+    readonly selectedItemId: string | undefined;
+    readonly listId: string;
+    readonly loop: boolean;
+    readonly shouldFilter: boolean;
+    readonly getScore: (itemId: string) => number;
+    readonly getVisibleCount: () => number;
+    readonly getGroupVisibleCount: (groupId: string) => number;
+    readonly registerItem: (entry: CommandItemEntry) => void;
+    readonly unregisterItem: (id: string) => void;
+    readonly updateItem: (entry: CommandItemEntry) => void;
+    readonly registerGroup: (groupId: string) => void;
+    readonly unregisterGroup: (groupId: string) => void;
+    readonly setSearch: (value: string) => void;
+    readonly selectItem: (id: string) => void;
+    readonly handleItemSelect: (value: string) => void;
+};
+export declare const commandContext: {
+    __context__: CommandContext;
+};

package/command/command-context.js

@@ -0,0 +1,3 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+import { createContext } from "@lit/context";
+export const commandContext = createContext(Symbol("dui-command"));

package/command/command-empty.d.ts

@@ -0,0 +1,10 @@
+/** 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 DuiCommandEmpty extends LitElement {
+    static tagName: "dui-command-empty";
+    static styles: import("lit").CSSResult[];
+    accessor _ctx: CommandContext;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/command/command-empty.js

@@ -0,0 +1,50 @@
+/** 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;
+  }
+
+  :host([data-hidden]) {
+    display: none;
+  }
+
+  .Empty {
+    text-align: center;
+  }
+`;
+export class DuiCommandEmpty extends LitElement {
+    static { this.tagName = "dui-command-empty"; }
+    static { this.styles = [base, styles]; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    willUpdate() {
+        const shouldShow = this._ctx?.search !== "" && this._ctx?.getVisibleCount() === 0;
+        if (shouldShow) {
+            this.removeAttribute("data-hidden");
+        }
+        else {
+            this.setAttribute("data-hidden", "");
+        }
+    }
+    render() {
+        return html `
+      <div class="Empty" role="status">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    consume({ context: commandContext, subscribe: true })
+], DuiCommandEmpty.prototype, "_ctx", null);