@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/select/select-core.svelte.js

@@ -0,0 +1,380 @@
+import { Utils } from '../../core/utils';
+import { buildGroupMap, flattenItems, getNavigableIndices, isPrintableKey, moveHighlightIndex } from './select-internals';
+/**
+ * Delay before the loading spinner becomes visible. Loads that resolve faster than this
+ * never flash a spinner — common case for sync wrappers (microtask resolve) and fast
+ * networks. Also gates `interactionLocked` — race-prevention only kicks in once the user
+ * has been waiting long enough to actually click on a stale row.
+ */
+const SPINNER_DELAY_MS = 600;
+export function createSelectCore(config) {
+    let isOpen = $state(false);
+    let query = $state('');
+    let highlight = $state(0);
+    let isFiltering = $state(false);
+    let items = $state.raw([]);
+    let loadToken = 0;
+    let loadPending = $state(false);
+    let createPending = $state(false);
+    let spinnerVisible = $state(false);
+    let spinnerTimer;
+    const startSpinnerGate = () => {
+        if (spinnerTimer !== undefined || spinnerVisible) {
+            return;
+        }
+        spinnerTimer = window.setTimeout(() => {
+            spinnerTimer = undefined;
+            if (loadPending || createPending) {
+                spinnerVisible = true;
+            }
+        }, SPINNER_DELAY_MS);
+    };
+    const stopSpinnerGate = () => {
+        if (loadPending || createPending) {
+            return;
+        }
+        if (spinnerTimer !== undefined) {
+            clearTimeout(spinnerTimer);
+            spinnerTimer = undefined;
+        }
+        spinnerVisible = false;
+    };
+    $effect(() => {
+        return () => {
+            if (spinnerTimer !== undefined) {
+                clearTimeout(spinnerTimer);
+                spinnerTimer = undefined;
+            }
+        };
+    });
+    const runLoad = async (q) => {
+        const token = ++loadToken;
+        loadPending = true;
+        startSpinnerGate();
+        try {
+            const result = await config.loadOptions(q);
+            if (token === loadToken) {
+                items = result;
+            }
+        }
+        finally {
+            if (token === loadToken) {
+                loadPending = false;
+                stopSpinnerGate();
+            }
+        }
+    };
+    const debouncedLoad = $derived(Utils.debounce((q) => void runLoad(q), config.getDebounceMs?.() ?? 400));
+    const flatOptions = $derived(flattenItems(items));
+    const showCreateRow = $derived.by(() => {
+        const canCreate = config.getCanCreate();
+        if (!canCreate || !query.trim()) {
+            return false;
+        }
+        if (!canCreate(query)) {
+            return false;
+        }
+        const q = query.trim().toLowerCase();
+        if (flatOptions.some((f) => f.option.label.toLowerCase() === q)) {
+            return false;
+        }
+        return true;
+    });
+    const groupMap = $derived(buildGroupMap(items));
+    const rows = $derived.by(() => {
+        const out = [];
+        if (showCreateRow) {
+            out.push({ kind: 'create', query });
+        }
+        const compare = config.getCompare();
+        const hideSelected = config.getHideSelected?.() ?? false;
+        if (!query && !hideSelected) {
+            const seen = flatOptions.map((f) => f.option.value);
+            // Group values are represented by their group-header row, not a separate option — keep them out of surfacing.
+            for (const [, meta] of groupMap) {
+                if (meta.value !== undefined) {
+                    seen.push(meta.value);
+                }
+            }
+            for (const picked of config.getSelectedOptions()) {
+                const inPage = seen.some((v) => compare(v, picked.value));
+                if (!inPage) {
+                    out.push({ kind: 'option', option: picked, indent: false, selected: true });
+                }
+            }
+        }
+        const groupHeader = config.getGroupHeader();
+        const selectedOpts = config.getSelectedOptions();
+        const selectionMode = config.getSelectionMode?.() ?? 'children-only';
+        const sourceOptions = hideSelected ? flatOptions.filter((f) => !config.isPicked(f.option)) : flatOptions;
+        let currentGroup;
+        for (const f of sourceOptions) {
+            if (f.group && f.group !== currentGroup) {
+                const meta = groupMap.get(f.group);
+                let headerSelectable = false;
+                let state = 'unchecked';
+                if (groupHeader === 'value' && meta?.value !== undefined) {
+                    headerSelectable = true;
+                    const inSelection = selectedOpts.some((o) => meta.value !== undefined && compare(o.value, meta.value));
+                    state = inSelection ? 'checked' : 'unchecked';
+                }
+                else if (groupHeader === 'toggle-all' && meta && meta.options.length > 0) {
+                    headerSelectable = true;
+                    const checkedCount = meta.options.filter((o) => config.isPicked(o)).length;
+                    if (checkedCount === meta.options.length) {
+                        state = 'checked';
+                    }
+                    else if (checkedCount > 0 && selectionMode === 'children-include-parent') {
+                        state = 'indeterminate';
+                    }
+                    else {
+                        state = 'unchecked';
+                    }
+                }
+                out.push({
+                    kind: 'group-header',
+                    label: f.group,
+                    selectable: headerSelectable,
+                    selected: state === 'checked',
+                    state,
+                    value: meta?.value,
+                    options: meta?.options
+                });
+                currentGroup = f.group;
+            }
+            else if (!f.group) {
+                currentGroup = undefined;
+            }
+            out.push({ kind: 'option', option: f.option, group: f.group, indent: !!f.group, selected: config.isPicked(f.option) });
+        }
+        return out;
+    });
+    const navigableIndices = $derived(getNavigableIndices(rows));
+    const openPopover = () => {
+        if (!config.getInteractive() || isOpen) {
+            return;
+        }
+        isOpen = true;
+        query = '';
+        isFiltering = false;
+        const selected = config.getSelectedOptions()[0];
+        if (selected) {
+            const idx = rows.findIndex((r) => r.kind === 'option' && r.option === selected);
+            highlight = idx >= 0 ? idx : (navigableIndices[0] ?? 0);
+        }
+        else {
+            highlight = navigableIndices[0] ?? 0;
+        }
+        void runLoad('');
+        // Clicks land on the trigger root (div role=presentation) — focus the inner input so the
+        // user can start typing immediately without a second click.
+        config.getInputEl()?.focus();
+    };
+    const cancelInFlightLoad = () => {
+        loadToken++;
+        if (loadPending) {
+            loadPending = false;
+            stopSpinnerGate();
+        }
+    };
+    const closePopover = () => {
+        if (!isOpen) {
+            return;
+        }
+        isOpen = false;
+        query = '';
+        isFiltering = false;
+        cancelInFlightLoad();
+    };
+    const resetFilterKeepFocus = () => {
+        query = '';
+        isFiltering = false;
+        highlight = navigableIndices[0] ?? 0;
+        config.getInputEl()?.focus();
+        void runLoad('');
+    };
+    const finishPick = () => {
+        if (config.picker === 'multi') {
+            resetFilterKeepFocus();
+        }
+        else {
+            closePopover();
+        }
+    };
+    const handleCreate = async (q, parentValue) => {
+        createPending = true;
+        startSpinnerGate();
+        try {
+            await config.onCreate({ query: q, parentValue });
+        }
+        finally {
+            createPending = false;
+            stopSpinnerGate();
+        }
+        finishPick();
+    };
+    const pickRow = (row) => {
+        if (spinnerVisible) {
+            return;
+        }
+        if (row.kind === 'create') {
+            if (query.trim()) {
+                void handleCreate(query);
+            }
+            return;
+        }
+        if (row.kind === 'group-header') {
+            if (!row.selectable) {
+                return;
+            }
+            const groupHeader = config.getGroupHeader();
+            if (groupHeader === 'value' && row.value !== undefined) {
+                config.onPickGroupValue({ label: row.label, value: row.value });
+            }
+            else if (groupHeader === 'toggle-all') {
+                const meta = groupMap.get(row.label);
+                if (meta) {
+                    config.onPickGroupAll({ label: row.label, value: meta.value, options: meta.options });
+                }
+            }
+            finishPick();
+            return;
+        }
+        if (row.option.disabled) {
+            return;
+        }
+        const parentMeta = row.group ? groupMap.get(row.group) : undefined;
+        const parentGroup = row.group && parentMeta ? { label: row.group, value: parentMeta.value, options: parentMeta.options } : undefined;
+        config.onPickOption(row.option, parentGroup);
+        finishPick();
+    };
+    const handleFocus = () => undefined;
+    const handleClick = (e) => {
+        if (!config.getInteractive() || isFiltering) {
+            return;
+        }
+        // Chips stop click propagation themselves (their remove button uses stopPropagation;
+        // chip body absorbs the click without re-routing it to the trigger). The listbox panel
+        // does the same — see `select-listbox.svelte`. So this handler only fires for clicks
+        // landing directly on the trigger root, where toggling open/close is exactly what we want.
+        const target = e.target;
+        if (target?.closest('.select-chip')) {
+            return;
+        }
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    };
+    const handleInput = (e) => {
+        if (!config.getInteractive()) {
+            return;
+        }
+        const target = e.target;
+        query = target.value;
+        isFiltering = true;
+        if (!isOpen) {
+            isOpen = true;
+        }
+        highlight = navigableIndices[0] ?? 0;
+        debouncedLoad(query);
+    };
+    const handleKeydown = (e) => {
+        if (!config.getInteractive()) {
+            return;
+        }
+        if (!isOpen) {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                openPopover();
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            highlight = moveHighlightIndex(navigableIndices, highlight, 1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            highlight = moveHighlightIndex(navigableIndices, highlight, -1);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (spinnerVisible) {
+                return;
+            }
+            const row = rows[highlight];
+            if (row) {
+                pickRow(row);
+            }
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            closePopover();
+            config.getInputEl()?.focus();
+        }
+        else if (e.key === 'Backspace' && (!isFiltering || !query)) {
+            e.preventDefault();
+            config.onClear();
+        }
+        else if (!isFiltering && isPrintableKey(e)) {
+            e.preventDefault();
+            isFiltering = true;
+            query = e.key;
+            highlight = navigableIndices[0] ?? 0;
+            debouncedLoad(query);
+        }
+    };
+    return {
+        get isOpen() {
+            return isOpen;
+        },
+        get query() {
+            return query;
+        },
+        get highlight() {
+            return highlight;
+        },
+        get isFiltering() {
+            return isFiltering;
+        },
+        get rows() {
+            return rows;
+        },
+        get items() {
+            return items;
+        },
+        get canShowCreate() {
+            return showCreateRow;
+        },
+        get loading() {
+            return spinnerVisible;
+        },
+        get interactionLocked() {
+            return spinnerVisible;
+        },
+        handleFocus,
+        handleClick,
+        handleInput,
+        handleKeydown,
+        openPopover,
+        closePopover,
+        pickRow,
+        setHighlight(i) {
+            highlight = i;
+        },
+        refresh() {
+            if (isOpen) {
+                void runLoad(query);
+            }
+        },
+        confirmCreate(parentValue) {
+            if (!query.trim() || spinnerVisible) {
+                return;
+            }
+            void handleCreate(query, parentValue);
+        }
+    };
+}

package/dist/ui/select/select-internals.d.ts

@@ -0,0 +1,33 @@
+import { type SelectItem, type SelectOption, type SelectRow } from './types';
+import Fuse from 'fuse.js';
+export declare const isPrintableKey: (e: KeyboardEvent) => boolean;
+export declare const defaultCompare: <T>(a: T, b: T) => boolean;
+export type FlatOption<T> = {
+    option: SelectOption<T>;
+    group?: string;
+};
+export declare const flattenItems: <T>(items: SelectItem<T>[]) => FlatOption<T>[];
+export type GroupMeta<T> = {
+    value?: T;
+    options: SelectOption<T>[];
+};
+export declare const buildGroupMap: <T>(items: SelectItem<T>[]) => Map<string, GroupMeta<T>>;
+export declare const getNavigableIndices: <T>(rows: SelectRow<T>[]) => number[];
+export declare const moveHighlightIndex: (indices: number[], current: number, delta: number) => number;
+/**
+ * Builds a Fuse index over the flattened options. Used by sync wrappers to fuzzy-filter
+ * locally inside their `loadOptions` shim. Async impls don't need this — the server does
+ * the filtering.
+ */
+export declare const buildFuseIndex: <T>(items: SelectItem<T>[]) => Fuse<FlatOption<T>>;
+/**
+ * Runs a fuzzy search via the Fuse index and reconstructs the grouped `SelectItem<T>[]`
+ * shape so the core's group-header logic keeps working. Empty query returns the original
+ * items untouched.
+ *
+ * Group labels participate in the match: when a group's label fuzzy-matches the query, the
+ * entire group (header + every child) is included regardless of whether the children
+ * themselves matched. Matched children also bubble their parent group into the result so
+ * the tree structure stays readable.
+ */
+export declare const runFuseSearch: <T>(fuse: Fuse<FlatOption<T>>, query: string, items: SelectItem<T>[]) => SelectItem<T>[];

package/dist/ui/select/select-internals.js

@@ -0,0 +1,111 @@
+import { isSelectGroup } from './types';
+import Fuse from 'fuse.js';
+export const isPrintableKey = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+export const defaultCompare = (a, b) => a === b;
+export const flattenItems = (items) => {
+    const out = [];
+    for (const item of items) {
+        if (isSelectGroup(item)) {
+            for (const child of item.options) {
+                out.push({ option: child, group: item.label });
+            }
+        }
+        else {
+            out.push({ option: item });
+        }
+    }
+    return out;
+};
+export const buildGroupMap = (items) => {
+    const map = new Map();
+    for (const item of items) {
+        if (isSelectGroup(item)) {
+            map.set(item.label, { value: item.value, options: item.options });
+        }
+    }
+    return map;
+};
+export const getNavigableIndices = (rows) => rows
+    .map((row, i) => {
+    if (row.kind === 'create') {
+        return i;
+    }
+    if (row.kind === 'option' && !row.option.disabled) {
+        return i;
+    }
+    if (row.kind === 'group-header' && row.selectable) {
+        return i;
+    }
+    return -1;
+})
+    .filter((i) => i !== -1);
+export const moveHighlightIndex = (indices, current, delta) => {
+    if (indices.length === 0) {
+        return current;
+    }
+    const curPos = indices.indexOf(current);
+    const nextPos = curPos === -1 ? 0 : (curPos + delta + indices.length) % indices.length;
+    return indices[nextPos];
+};
+/**
+ * Builds a Fuse index over the flattened options. Used by sync wrappers to fuzzy-filter
+ * locally inside their `loadOptions` shim. Async impls don't need this — the server does
+ * the filtering.
+ */
+export const buildFuseIndex = (items) => new Fuse(flattenItems(items), { keys: ['option.label'], threshold: 0.4, ignoreLocation: true });
+/**
+ * Runs a fuzzy search via the Fuse index and reconstructs the grouped `SelectItem<T>[]`
+ * shape so the core's group-header logic keeps working. Empty query returns the original
+ * items untouched.
+ *
+ * Group labels participate in the match: when a group's label fuzzy-matches the query, the
+ * entire group (header + every child) is included regardless of whether the children
+ * themselves matched. Matched children also bubble their parent group into the result so
+ * the tree structure stays readable.
+ */
+export const runFuseSearch = (fuse, query, items) => {
+    if (!query) {
+        return items;
+    }
+    const hits = fuse.search(query).map((r) => r.item);
+    const groupBuckets = new Map();
+    const standalone = [];
+    for (const hit of hits) {
+        if (hit.group) {
+            const bucket = groupBuckets.get(hit.group);
+            if (bucket) {
+                bucket.push(hit.option);
+            }
+            else {
+                groupBuckets.set(hit.group, [hit.option]);
+            }
+        }
+        else {
+            standalone.push(hit.option);
+        }
+    }
+    // Fuzzy-match group labels: build a tiny per-call Fuse just over group label entries.
+    // Cheap (one item per group) and reuses the same threshold so behavior matches options.
+    const groups = items.filter(isSelectGroup);
+    const labelMatches = new Set();
+    if (groups.length > 0) {
+        const labelFuse = new Fuse(groups.map((g) => ({ label: g.label })), { keys: ['label'], threshold: 0.4, ignoreLocation: true });
+        for (const hit of labelFuse.search(query)) {
+            labelMatches.add(hit.item.label);
+        }
+    }
+    const out = [];
+    for (const item of items) {
+        if (isSelectGroup(item)) {
+            // Group label matched → include every child. Otherwise include only the children that matched.
+            const childrenForRender = labelMatches.has(item.label) ? item.options : groupBuckets.get(item.label);
+            if (childrenForRender && childrenForRender.length > 0) {
+                out.push({ label: item.label, value: item.value, options: childrenForRender });
+            }
+        }
+    }
+    for (const opt of standalone) {
+        out.push(opt);
+    }
+    return out;
+};

package/dist/ui/select/select-listbox-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class SelectListboxLocalization {
+    get noMatches(): string;
+    get createLabel(): (value: string) => string;
+}

package/dist/ui/select/select-listbox-localization.js

@@ -0,0 +1,16 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    noMatches: { en: 'No matches', no: 'Ingen treff' },
+    createLabel: {
+        en: (value) => `Create "${value}"`,
+        no: (value) => `Opprett "${value}"`
+    }
+};
+export class SelectListboxLocalization {
+    get noMatches() {
+        return loc.noMatches[AppLocale.current];
+    }
+    get createLabel() {
+        return loc.createLabel[AppLocale.current];
+    }
+}