@ketvietlab/design-system 0.1.24 → 0.1.29

package/dist/interactions/lightbox/styles.css

@@ -0,0 +1,153 @@
+@layer ket.app {
+  /* A Fancybox-style viewer: thumbnails open a full-screen stage above every
+     other layer, including a record modal, with zoom, pan and previous/next. */
+  :where([data-kv-design-system]) [data-ui="lightbox"] {
+    display: contents;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-thumbs"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2);
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-thumb"],
+  :where([data-kv-design-system]) [data-ui="lightbox-empty"] {
+    --lightbox-thumb-size: 5.5rem;
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--lightbox-thumb-size);
+    block-size: var(--lightbox-thumb-size);
+    flex: none;
+    overflow: hidden;
+    padding: 0;
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-surface-raised);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-sm);
+    text-align: center;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-thumb"] {
+    cursor: zoom-in;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-thumb"]:focus-visible {
+    outline: 2px solid var(--kv-focus-border);
+    outline-offset: 2px;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-thumb"] img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  :where([data-kv-design-system])
+    :is([data-ui="lightbox-thumb"], [data-ui="lightbox-empty"])[data-size="small"] {
+    --lightbox-thumb-size: 2.5rem;
+    border-radius: var(--kv-radius-sm);
+  }
+  :where([data-kv-design-system])
+    :is([data-ui="lightbox-thumb"], [data-ui="lightbox-empty"])[data-size="large"] {
+    --lightbox-thumb-size: 9rem;
+  }
+
+  :where([data-kv-design-system]) [data-ui="lightbox-layer"] {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--kv-z-modal) + 10);
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    color: var(--kv-panel-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-backdrop"] {
+    position: absolute;
+    inset: 0;
+    background: color-mix(in srgb, var(--kv-text-main) 92%, transparent);
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-toolbar"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kv-space-1);
+    padding: var(--kv-space-2) var(--kv-space-3);
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-counter"] {
+    margin-inline-end: auto;
+    font-size: var(--kv-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+  :where([data-kv-design-system]) :is([data-ui="lightbox-tool"], [data-ui="lightbox-nav"]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--kv-panel-bg) 12%, transparent);
+    color: inherit;
+    font-size: 1.5rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  :where([data-kv-design-system]) :is([data-ui="lightbox-tool"], [data-ui="lightbox-nav"]):hover {
+    background: color-mix(in srgb, var(--kv-panel-bg) 24%, transparent);
+  }
+  :where([data-kv-design-system]) :is([data-ui="lightbox-tool"], [data-ui="lightbox-nav"]):focus-visible {
+    outline: 2px solid var(--kv-panel-bg);
+    outline-offset: 2px;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-tool"]:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-stage"] {
+    position: relative;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    padding: var(--kv-space-2) var(--kv-space-12);
+    touch-action: none;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-image"] {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    object-fit: contain;
+    transform-origin: center;
+    transition: transform 160ms ease-out;
+    cursor: zoom-in;
+    user-select: none;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-stage"][data-zoomed="true"] [data-ui="lightbox-image"] {
+    cursor: grab;
+    transition: none;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-nav"] {
+    position: absolute;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-nav"][data-direction="previous"] {
+    inset-inline-start: var(--kv-space-3);
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-nav"][data-direction="next"] {
+    inset-inline-end: var(--kv-space-3);
+  }
+  :where([data-kv-design-system]) [data-ui="lightbox-caption"] {
+    position: relative;
+    margin: 0;
+    padding: var(--kv-space-2) var(--kv-space-4) var(--kv-space-4);
+    font-size: var(--kv-text-sm);
+    text-align: center;
+  }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system]) [data-ui="lightbox-stage"] {
+      padding-inline: var(--kv-space-2);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-kv-design-system]) [data-ui="lightbox-image"] {
+      transition: none;
+    }
+  }
+}

package/dist/interactions/relation-select/demo.d.ts

@@ -0,0 +1,3 @@
+import type { RelationSelectConfig } from './index.tsx';
+export declare const relationSelectDemoConfig: RelationSelectConfig;
+//# sourceMappingURL=demo.d.ts.map

package/dist/interactions/relation-select/demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/relation-select/demo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAOvD,eAAO,MAAM,wBAAwB,EAAE,oBA6BtC,CAAA"}

package/dist/interactions/relation-select/demo.js

@@ -0,0 +1,36 @@
+// Shared between the design-system's own catalogue specimen and the KetAtlas
+// materializer, so both static demos show exactly the same interaction: a closed
+// island with a real, multi-entry option list a reader can open, search and choose
+// from. There is no `manager`, so search beyond these options, create and remove
+// stay no-ops — neither demo has a backend behind it to call.
+export const relationSelectDemoConfig = {
+    name: 'partnerId',
+    ariaLabel: 'Partner',
+    value: 'an-viet',
+    options: [
+        { value: 'an-viet', label: 'An Việt', description: 'Hà Nội' },
+        { value: 'song-xanh', label: 'Sông Xanh', description: 'Đà Nẵng' },
+        { value: 'coop-mart', label: 'Coopmart', description: 'TP. Hồ Chí Minh' },
+    ],
+    labels: {
+        choose: 'Choose a partner',
+        search: 'Search partners',
+        more: 'Browse all',
+        noRecords: 'No partners found',
+        loading: 'Loading…',
+        loadError: 'Could not load partners',
+        dialogTitle: 'Choose a partner',
+        close: 'Close',
+        select: 'Select',
+        create: 'Create partner',
+        edit: 'Edit',
+        save: 'Save',
+        cancel: 'Cancel',
+        remove: 'Remove',
+        confirmRemove: 'Confirm remove',
+        retry: 'Retry',
+        clear: 'Clear',
+        chosen: 'Chosen',
+    },
+};
+//# sourceMappingURL=demo.js.map

package/dist/interactions/relation-select/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/relation-select/demo.ts"],"names":[],"mappings":"AAEA,6EAA6E;AAC7E,iFAAiF;AACjF,mFAAmF;AACnF,iFAAiF;AACjF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,wBAAwB,GAAyB;IAC5D,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE;QACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE;QAC7D,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE;QAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE;KAC1E;IACD,MAAM,EAAE;QACN,MAAM,EAAE,kBAAkB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,mBAAmB;QAC9B,OAAO,EAAE,UAAU;QACnB,SAAS,EAAE,yBAAyB;QACpC,WAAW,EAAE,kBAAkB;QAC/B,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,gBAAgB;QACxB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;QAChB,aAAa,EAAE,gBAAgB;QAC/B,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;KACjB;CACF,CAAA"}

package/dist/interactions/relation-select/index.d.ts

@@ -0,0 +1,87 @@
+import type { IslandController, IslandProps } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['relation-select', 'relation-native', 'relation-trigger', 'relation-value', 'relation-caret', 'relation-chips', 'relation-chip', 'relation-chip-clear', 'relation-menu', 'relation-search', 'relation-options', 'relation-option', 'relation-footer', 'relation-empty', 'relation-editor', 'relation-dialog-toolbar', 'relation-search-field', 'relation-search-icon', 'relation-dialog-list', 'relation-dialog-row', 'relation-dialog-main', 'relation-dialog-meta', 'relation-dialog-actions'];
+export type RelationOption = {
+    value: string;
+    label: string;
+    description?: string | null;
+};
+export type RelationEditorField = {
+    name: string;
+    label: string;
+    type?: 'text' | 'email' | 'tel' | 'select';
+    required?: boolean;
+    options?: RelationOption[];
+};
+export type RelationManager = {
+    listFunction: string;
+    listInput?: Record<string, unknown>;
+    searchParam?: string;
+    limitParam?: string;
+    limit?: number;
+    idField?: string;
+    labelField?: string;
+    descriptionField?: string;
+    saveFunction?: string;
+    saveDefaults?: Record<string, unknown>;
+    removeFunction?: string;
+    removeDefaults?: Record<string, unknown>;
+    fields?: RelationEditorField[];
+    excludeIds?: string[];
+};
+export type RelationSelectLabels = {
+    choose: string;
+    search: string;
+    more: string;
+    noRecords: string;
+    loading: string;
+    loadError: string;
+    dialogTitle: string;
+    close: string;
+    select: string;
+    create: string;
+    edit: string;
+    save: string;
+    cancel: string;
+    remove: string;
+    confirmRemove: string;
+    retry: string;
+    clear: string;
+    chosen: string;
+};
+export type RelationSelectConfig = {
+    name: string;
+    ariaLabel: string;
+    value?: string | null;
+    /**
+     * Several records under one field name, joined by a comma on the way out.
+     *
+     * A repeated form key would not survive `readForm`, which builds a
+     * `Record<string, string>` and keeps only the last value — so a multi-valued
+     * field posts one comma-separated string, which is also what the routes that
+     * take value lists already parse.
+     */
+    multiple?: boolean;
+    values?: string[];
+    options: RelationOption[];
+    required?: boolean;
+    disabled?: boolean;
+    labels: RelationSelectLabels;
+    manager?: RelationManager;
+};
+/** Client-only composition hooks; keep callbacks out of serialized island props. */
+export type RelationSelectCallbacks = {
+    options?: () => RelationOption[];
+    disabled?: () => boolean;
+    onSelect?: (option: RelationOption) => void;
+    onCreate?: (query: string) => void;
+    /** An add-to-list picker returns to its placeholder after each selection. */
+    resetAfterSelect?: boolean;
+};
+type RelationSelectIslandProps = IslandProps & {
+    id: string;
+    config: RelationSelectConfig;
+};
+export declare function createRelationSelectView(props: RelationSelectIslandProps, callbacks?: RelationSelectCallbacks): IslandController;
+export declare const relationSelect: (props: IslandProps) => IslandController;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/relation-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/relation-select/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAkB,MAAM,wBAAwB,CAAA;AAE3F,eAAO,MAAM,KAAK,YAChB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,yBAAyB,EACzB,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACtB,yBAAyB,CACjB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAA;AAE1F,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,oBAAoB,CAAA;IAC5B,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,cAAc,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAID,KAAK,yBAAyB,GAAG,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,oBAAoB,CAAA;CAAE,CAAA;AA6B3F,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,yBAAyB,EAChC,SAAS,GAAE,uBAA4B,GACtC,gBAAgB,CAskBlB;AAED,eAAO,MAAM,cAAc,UAAW,WAAW,KAAG,gBACU,CAAA"}

package/dist/interactions/relation-select/index.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+// Unlike its neighbors here, this is a ketjs-view *island*: it owns reactive state
+// (`signal`) and fetches its own data (`/_ket/fn/...`, a ketjs runtime contract, not
+// an application-specific one) rather than being a static, server-rendered control
+// wired up by the shared `attachDesignSystemInteractions` delegator. A consuming app
+// mounts it through its own island runtime (see `defineIsland` in `@ketvietlab/ketjs-view`)
+// and supplies the `manager` config that names which functions to call.
+import { each, effect, signal } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'relation-select',
+    'relation-native',
+    'relation-trigger',
+    'relation-value',
+    'relation-caret',
+    'relation-chips',
+    'relation-chip',
+    'relation-chip-clear',
+    'relation-menu',
+    'relation-search',
+    'relation-options',
+    'relation-option',
+    'relation-footer',
+    'relation-empty',
+    'relation-editor',
+    'relation-dialog-toolbar',
+    'relation-search-field',
+    'relation-search-icon',
+    'relation-dialog-list',
+    'relation-dialog-row',
+    'relation-dialog-main',
+    'relation-dialog-meta',
+    'relation-dialog-actions',
+];
+const array = (value) => (Array.isArray(value) ? value : []);
+const string = (value) => (value == null ? '' : String(value));
+const callApi = async (name, input, requestSignal) => {
+    const response = await fetch(`/_ket/fn/${encodeURIComponent(name)}`, {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(input),
+        signal: requestSignal,
+    });
+    const payload = (await response.json());
+    if (!response.ok || payload.ok === false) {
+        const domainError = array(payload.errors)[0];
+        throw new Error(string(domainError?.message ?? domainError?.code ?? payload.message ?? `HTTP ${response.status}`));
+    }
+    return payload.value;
+};
+export function createRelationSelectView(props, callbacks = {}) {
+    const { id: islandId, config } = props;
+    const labels = config.labels;
+    const manager = config.manager;
+    // One representation for both modes: an array of chosen ids. Single-select is
+    // the array of length 0 or 1, so downstream code only branches where the UI
+    // genuinely differs — the trigger and the chips.
+    const multiple = config.multiple === true;
+    const chosen = signal(multiple
+        ? array(config.values).map(string).filter(Boolean)
+        : [string(config.value)].filter(Boolean));
+    const selected = () => chosen()[0] ?? '';
+    const isChosen = (value) => chosen().includes(string(value));
+    const options = signal(array(config.options));
+    const availableOptions = () => callbacks.options?.() ?? options();
+    const disabled = () => callbacks.disabled?.() ?? config.disabled === true;
+    const open = signal(false);
+    const dialog = signal(false);
+    const query = signal('');
+    const rows = signal([]);
+    const loading = signal(false);
+    const error = signal('');
+    const editor = signal(null);
+    const pendingRemove = signal('');
+    let activeRequest = null;
+    let searchTimer;
+    let disposed = false;
+    const rowId = (row) => string(row[manager?.idField ?? 'id']);
+    const rowLabel = (row) => string(row[manager?.labelField ?? 'name']) || labels.noRecords;
+    const rowDescription = (row) => string(row[manager?.descriptionField ?? 'ref']);
+    const selectedLabel = () => options().find((entry) => string(entry.value) === selected())?.label ?? labels.choose;
+    const filteredOptions = () => {
+        const needle = query().trim().toLocaleLowerCase();
+        const held = needle
+            ? availableOptions().filter((entry) => `${string(entry.label)} ${string(entry.description)}`.toLocaleLowerCase().includes(needle))
+            : availableOptions();
+        return callbacks.options ? held : held.slice(0, 7);
+    };
+    const choose = (value, label, description = '') => {
+        if (disabled())
+            return;
+        const id = string(value);
+        if (!options().some((entry) => string(entry.value) === id))
+            options.set([...options(), { value: id, label: string(label), description: string(description) }]);
+        if (multiple) {
+            chosen.set(isChosen(id) ? chosen().filter((held) => held !== id) : [...chosen(), id]);
+            callbacks.onSelect?.({ value: id, label: string(label), description: string(description) });
+            return;
+        }
+        chosen.set(id ? [id] : []);
+        open.set(false);
+        dialog.set(false);
+        query.set('');
+        editor.set(null);
+        pendingRemove.set('');
+        if (callbacks.resetAfterSelect)
+            chosen.set([]);
+        callbacks.onSelect?.({ value: id, label: string(label), description: string(description) });
+    };
+    const unchoose = (value) => {
+        chosen.set(chosen().filter((held) => held !== string(value)));
+    };
+    const labelOf = (value) => options().find((entry) => string(entry.value) === string(value))?.label ?? string(value);
+    const loadRows = async () => {
+        if (!manager?.listFunction)
+            return;
+        activeRequest?.abort();
+        const request = new AbortController();
+        activeRequest = request;
+        loading.set(true);
+        error.set('');
+        try {
+            const input = { ...(manager.listInput ?? {}) };
+            input[manager.searchParam ?? 'search'] = query().trim();
+            input[manager.limitParam ?? 'limit'] = manager.limit ?? 80;
+            const value = await callApi(manager.listFunction, input, request.signal);
+            const excluded = new Set(array(manager.excludeIds).map(string));
+            rows.set(array(value).filter((row) => !excluded.has(rowId(row))));
+        }
+        catch (caught) {
+            if (disposed || (caught instanceof Error && caught.name === 'AbortError'))
+                return;
+            error.set(caught instanceof Error ? caught.message : labels.loadError);
+        }
+        finally {
+            if (activeRequest === request)
+                loading.set(false);
+        }
+    };
+    const openDialog = async () => {
+        open.set(false);
+        dialog.set(true);
+        editor.set(null);
+        pendingRemove.set('');
+        await loadRows();
+    };
+    const closeDialog = () => {
+        dialog.set(false);
+        editor.set(null);
+        pendingRemove.set('');
+        error.set('');
+    };
+    const searchManager = (event) => {
+        if (!(event.currentTarget instanceof HTMLInputElement))
+            return;
+        query.set(event.currentTarget.value);
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(loadRows, 180);
+    };
+    const save = async (event) => {
+        event.preventDefault();
+        if (!manager?.saveFunction || !(event.currentTarget instanceof HTMLFormElement))
+            return;
+        const editing = editor();
+        const id = editing?.id || crypto.randomUUID();
+        const payload = { ...(manager.saveDefaults ?? {}), id };
+        for (const [name, value] of new FormData(event.currentTarget).entries())
+            payload[name] = string(value);
+        loading.set(true);
+        error.set('');
+        try {
+            await callApi(manager.saveFunction, payload);
+            const label = string(payload[manager.labelField ?? 'name']);
+            if (!editing?.id) {
+                choose(id, label);
+                if (multiple) {
+                    editor.set(null);
+                    await loadRows();
+                }
+                return;
+            }
+            options.set(options().map((entry) => string(entry.value) === id ? { ...entry, label: label || entry.label } : entry));
+            editor.set(null);
+            await loadRows();
+        }
+        catch (caught) {
+            error.set(caught instanceof Error ? caught.message : labels.loadError);
+        }
+        finally {
+            loading.set(false);
+        }
+    };
+    const remove = async (row) => {
+        const id = rowId(row);
+        if (pendingRemove() !== id) {
+            pendingRemove.set(id);
+            return;
+        }
+        if (!manager?.removeFunction)
+            return;
+        loading.set(true);
+        error.set('');
+        try {
+            await callApi(manager.removeFunction, { ...(manager.removeDefaults ?? {}), id });
+            unchoose(id);
+            options.set(options().filter((entry) => string(entry.value) !== id));
+            pendingRemove.set('');
+            await loadRows();
+        }
+        catch (caught) {
+            error.set(caught instanceof Error ? caught.message : labels.loadError);
+        }
+        finally {
+            loading.set(false);
+        }
+    };
+    const editorField = (field) => {
+        const held = editor()?.row ?? manager?.saveDefaults ?? {};
+        const value = string(held[field.name]);
+        const fieldId = `${islandId}-relation-editor-${field.name}`;
+        return (_jsxs("label", { "data-ui": "form-field", "data-span": "full", htmlFor: fieldId, children: [_jsxs("span", { "data-ui": "form-label", children: [field.label, field.required ? (_jsxs("span", { "data-ui": "form-required", "aria-hidden": "true", children: [' ', "*"] })) : null] }), field.type === 'select' ? (_jsx("select", { "data-ui": "form-control", id: fieldId, name: field.name, required: field.required === true, children: each(array(field.options), (entry) => entry.value, (entry) => (_jsx("option", { value: entry.value, selected: string(entry.value) === value, children: entry.label }))) })) : (_jsx("input", { "data-ui": "form-control", id: fieldId, type: field.type ?? 'text', name: field.name, value: value, autocomplete: "off", required: field.required === true }))] }));
+    };
+    const editorForm = () => (_jsxs("form", { "data-ui": "relation-editor", onSubmit: save, children: [_jsx("div", { "data-ui": "form-grid", children: each(array(manager?.fields), (field) => field.name, editorField) }), _jsx("div", { "data-ui": "form-actions", children: _jsxs("div", { "data-ui": "action-group", children: [_jsx("button", { "data-ui": "action", "data-variant": "primary", type: "submit", disabled: loading(), children: labels.save }), _jsx("button", { "data-ui": "action", "data-variant": "tertiary", type: "button", onClick: () => editor.set(null), children: labels.cancel })] }) })] }));
+    const managerRow = (row) => {
+        const id = rowId(row);
+        const description = rowDescription(row);
+        return (_jsxs("li", { "data-ui": "relation-dialog-row", "data-selected": String(isChosen(id)), children: [_jsxs("button", { "data-ui": "relation-dialog-main", type: "button", "aria-pressed": multiple ? String(isChosen(id)) : null, onClick: () => choose(id, rowLabel(row), description), children: [_jsx("strong", { children: rowLabel(row) }), description ? _jsx("small", { "data-ui": "relation-dialog-meta", children: description }) : null] }), _jsxs("div", { "data-ui": "relation-dialog-actions", children: [_jsx("button", { "data-ui": "action", "data-size": "compact", "data-variant": isChosen(id) ? 'primary' : 'secondary', type: "button", onClick: () => choose(id, rowLabel(row), description), children: isChosen(id) ? labels.chosen : labels.select }), manager?.saveFunction ? (_jsx("button", { "data-ui": "action", "data-size": "compact", "data-variant": "tertiary", type: "button", onClick: () => editor.set({ id, row }), children: labels.edit })) : null, manager?.removeFunction ? (_jsx("button", { "data-ui": "action", "data-size": "compact", "data-variant": "destructive", type: "button", onClick: () => remove(row), children: pendingRemove() === id ? labels.confirmRemove : labels.remove })) : null] })] }));
+    };
+    const dialogView = () => (_jsxs("div", { "data-ui": "modal-layer", "data-presentation": "dialog", children: [_jsx("button", { "data-ui": "modal-backdrop", type: "button", "aria-label": labels.close, onClick: closeDialog, children: _jsx("span", { children: labels.close }) }), _jsxs("section", { "data-ui": "modal-sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": `${islandId}-relation-title`, children: [_jsxs("header", { "data-ui": "modal-head", children: [_jsx("h2", { "data-ui": "modal-title", id: `${islandId}-relation-title`, children: labels.dialogTitle }), _jsx("button", { "data-ui": "modal-close", type: "button", "aria-label": labels.close, title: labels.close, onClick: closeDialog, children: "\u00D7" })] }), _jsxs("div", { "data-ui": "modal-body", children: [_jsxs("div", { "data-ui": "relation-dialog-toolbar", children: [_jsxs("div", { "data-ui": "relation-search-field", children: [_jsx("span", { "data-ui": "relation-search-icon", "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }) }), _jsx("input", { "data-ui": "field-control", type: "search", value: query(), autocomplete: "off", placeholder: labels.search, "aria-label": labels.search, onInput: searchManager })] }), manager?.saveFunction ? (_jsx("button", { "data-ui": "action", "data-variant": "primary", type: "button", onClick: () => editor.set({ id: '', row: manager.saveDefaults ?? {} }), children: labels.create })) : null] }), error() ? (_jsxs("aside", { "data-ui": "notice", "data-tone": "danger", role: "alert", children: [_jsxs("div", { "data-ui": "notice-copy", children: [_jsx("p", { "data-ui": "notice-title", children: labels.loadError }), _jsx("p", { "data-ui": "notice-message", children: error() })] }), _jsx("button", { "data-ui": "action", "data-variant": "secondary", type: "button", onClick: loadRows, children: labels.retry })] })) : null, editor() ? editorForm() : null, loading() ? (_jsx("p", { "data-ui": "relation-empty", role: "status", children: labels.loading })) : null, !loading() && !editor() ? (rows().length ? (_jsx("ul", { "data-ui": "relation-dialog-list", children: each(rows(), rowId, managerRow) })) : (_jsx("p", { "data-ui": "relation-empty", children: labels.noRecords }))) : null] })] })] }));
+    const handleKeydown = (event) => {
+        if (!(event instanceof KeyboardEvent) || event.key !== 'Escape')
+            return;
+        if (!open() && !dialog())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const trigger = event.currentTarget?.querySelector('[data-ui="relation-trigger"]');
+        open.set(false);
+        closeDialog();
+        trigger?.focus();
+    };
+    const handleInvalid = (event) => {
+        event.preventDefault();
+        open.set(true);
+        if (event.currentTarget instanceof HTMLSelectElement)
+            event.currentTarget.nextElementSibling?.focus();
+    };
+    return {
+        view: () => (_jsxs("div", { "data-ui": "relation-select", role: "group", "aria-label": config.ariaLabel, onKeydown: handleKeydown, children: [_jsxs("select", { "data-ui": "relation-native", name: config.name, required: config.required === true, disabled: disabled(), tabindex: "-1", "aria-hidden": "true", onInvalid: handleInvalid, children: [_jsx("option", { value: "", selected: !chosen().length }), multiple ? (chosen().length ? (_jsx("option", { value: chosen().join(','), selected: true, children: chosen().map(labelOf).join(', ') })) : null) : (each(options().filter((entry) => string(entry.value)), (entry) => entry.value, (entry) => (_jsx("option", { value: entry.value, selected: string(entry.value) === selected(), children: entry.label }))))] }), _jsxs("button", { "data-ui": "relation-trigger", "data-empty": String(!chosen().length), type: "button", "aria-haspopup": "listbox", "aria-label": config.ariaLabel, "aria-expanded": String(open()), "aria-controls": `${islandId}-relation-menu`, disabled: disabled(), onClick: () => open.set(!open()), children: [_jsx("span", { "data-ui": "relation-value", children: multiple ? labels.choose : selectedLabel() }), _jsx("span", { "data-ui": "relation-caret", "aria-hidden": "true", children: "\u25BE" })] }), multiple && chosen().length ? (_jsx("ul", { "data-ui": "relation-chips", "aria-label": labels.chosen, children: each(chosen(), (value) => value, (value) => (_jsxs("li", { "data-ui": "relation-chip", children: [_jsx("span", { children: labelOf(value) }), _jsx("button", { "data-ui": "relation-chip-clear", type: "button", "aria-label": `${labels.clear}: ${labelOf(value)}`, title: labels.clear, disabled: disabled(), onClick: () => unchoose(value), children: "\u00D7" })] }))) })) : null, open() ? (_jsxs("div", { "data-ui": "relation-menu", id: `${islandId}-relation-menu`, children: [_jsx("input", { "data-ui": "relation-search", type: "search", value: query(), autocomplete: "off", placeholder: labels.search, "aria-label": labels.search, onInput: (event) => {
+                                if (event.currentTarget instanceof HTMLInputElement)
+                                    query.set(event.currentTarget.value);
+                            } }), _jsx("div", { "data-ui": "relation-options", role: "listbox", children: filteredOptions().length ? (each(filteredOptions(), (entry) => entry.value, (entry) => (_jsxs("button", { "data-ui": "relation-option", type: "button", role: "option", "data-selected": String(isChosen(entry.value)), "aria-selected": String(isChosen(entry.value)), onClick: () => choose(entry.value, entry.label, entry.description), children: [_jsx("span", { children: entry.label }), entry.description ? _jsx("small", { children: entry.description }) : null] })))) : (_jsx("p", { "data-ui": "relation-empty", children: labels.noRecords })) }), manager || !callbacks.options || callbacks.onCreate ? (_jsxs("footer", { "data-ui": "relation-footer", children: [manager || !callbacks.options ? (_jsx("button", { "data-ui": "action", "data-variant": "tertiary", type: "button", onClick: openDialog, children: labels.more })) : null, callbacks.onCreate ? (_jsx("button", { "data-ui": "action", "data-variant": "tertiary", type: "button", disabled: disabled(), onClick: () => {
+                                        if (disabled())
+                                            return;
+                                        const name = query().trim();
+                                        open.set(false);
+                                        query.set('');
+                                        callbacks.onCreate?.(name);
+                                    }, children: labels.create })) : null] })) : null] })) : null, dialog() ? dialogView() : null] })),
+        // The hidden native select stands in for a real one — including firing
+        // `change` for whatever the host page already listens for there (a state
+        // recomputed off another field's selection, say). Skip the effect's own
+        // eager first run: nothing has changed yet, only settled onto its initial value.
+        // The dispatch itself waits a microtask: firing it synchronously, still
+        // inside the signal write that is choosing this very value, let a listener
+        // that reacts by re-rendering (and so disposing and re-mounting this same
+        // island) re-enter this instance's own `choose()` while it was still on the
+        // stack — deferring runs it only once the choice has fully settled.
+        mount: ({ root, lifetime }) => {
+            let first = true;
+            const stop = effect(() => {
+                chosen();
+                if (first) {
+                    first = false;
+                    return;
+                }
+                queueMicrotask(() => {
+                    if (disposed)
+                        return;
+                    const native = [...root.querySelectorAll('[data-ui="relation-native"]')][0];
+                    if (native instanceof HTMLSelectElement)
+                        native.dispatchEvent(new Event('change', { bubbles: true }));
+                });
+            });
+            lifetime.addEventListener('abort', stop);
+            // The inline dropdown isn't a <details> — nothing in the shared
+            // `attachDesignSystemInteractions` outside-click delegator sees it, so it
+            // closes itself the same way every other popup does. The dialog already
+            // closes on its own backdrop click.
+            document.addEventListener('click', (event) => {
+                if (!open())
+                    return;
+                const target = event.target;
+                if (target instanceof Node && root.contains(target))
+                    return;
+                open.set(false);
+            }, { signal: lifetime });
+        },
+        dispose: () => {
+            disposed = true;
+            clearTimeout(searchTimer);
+            activeRequest?.abort();
+        },
+    };
+}
+export const relationSelect = (props) => createRelationSelectView(props);
+//# sourceMappingURL=index.js.map