@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/select/_select-trigger.scss

@@ -0,0 +1,199 @@
+@use 'styles/functions';
+@use 'styles/mixins';
+@use 'styles/transitions';
+@use '../_internal/affordance';
+
+// Shared trigger shape for Singleselect / SingleselectAsync / (later) Multiselect.
+// Public CSS API lives under `--sc-kit--select--trigger--*` so consumers can override
+// once and have all select variants pick it up.
+@mixin select-trigger {
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
+  --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
+  --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
+  --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
+  --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
+  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+
+  @include affordance.host;
+
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: var(--_sel--height);
+  padding: 0 var(--_sel--padding-inline);
+  background: var(--_sel--background);
+  border: 1px solid var(--_sel--border-color);
+  border-radius: var(--_sel--border-radius);
+  color: var(--_sel--color);
+  font-size: var(--_sel--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  box-shadow: inset 0 -0.13em var(--_sel--underline-color);
+  @include transitions.transition(background-color border-color color box-shadow);
+
+  &--sm {
+    --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
+    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
+    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
+    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+  }
+  &--md {
+    --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
+    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
+    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
+    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+  }
+  &--lg {
+    --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
+    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
+    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
+    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
+  }
+
+  &:where(:hover) {
+    --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
+  }
+  &:where(:focus-within),
+  &--open {
+    --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
+  }
+
+  &--error {
+    --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
+    --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);
+  }
+
+  &--disabled,
+  &--readonly,
+  &--inert {
+    --sc-kit--select--trigger--border-color: unset;
+    --sc-kit--select--trigger--underline-color: unset;
+    @include affordance.suppress;
+    cursor: default;
+  }
+
+  &--disabled {
+    --sc-kit--select--trigger--background: var(--_sel--background-disabled);
+    --sc-kit--select--trigger--color: var(--sc-kit--color--text--muted);
+  }
+
+  &--borderless {
+    --sc-kit--select--trigger--background: transparent;
+    --sc-kit--select--trigger--border-color: transparent;
+    --sc-kit--select--trigger--underline-color: transparent;
+    box-shadow: none;
+  }
+
+  &__input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    cursor: inherit;
+
+    &::placeholder {
+      color: var(--_sel--placeholder-color);
+    }
+
+    &:not([readonly]) {
+      cursor: text;
+    }
+
+    &--hidden {
+      opacity: 0;
+      width: 0;
+      flex: 0;
+    }
+  }
+
+  &__selection {
+    flex: 1;
+    min-width: 0;
+    @include mixins.ellipsis;
+  }
+
+  &__icon {
+    --sc-kit--icon--color: var(--_sel--icon-color);
+    --sc-kit--icon--size: var(--_sel--icon-size);
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+
+    &--leading {
+      margin-inline-end: var(--_sel--gap);
+    }
+
+    &--trailing {
+      margin-inline-start: var(--_sel--gap);
+    }
+  }
+
+  &__chevron {
+    transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+  }
+
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+
+  &__spinner {
+    color: var(--_sel--icon-color);
+  }
+
+  // Multi-line wrap mode. Trigger grows under the chip cluster; min-height keeps the
+  // single-line cadence when there are no chips. Padding-block becomes a small gap so
+  // wrapped chip rows breathe without touching the border. Reserve right-side space for
+  // the absolutely-positioned chevron / spinner.
+  &--multi {
+    height: auto;
+    min-height: var(--_sel--height);
+    flex-wrap: wrap;
+    padding-block: #{functions.to-rem(4)};
+    padding-inline-end: calc(var(--_sel--padding-inline) + var(--_sel--icon-size) + var(--_sel--gap));
+    gap: var(--sc-kit--space--1);
+  }
+
+  // Pin chevron to the top-right corner when wrapping — must stay anchored as chips
+  // reflow to additional rows below. (Spinner positioning lives in MultiselectAsync's
+  // local style block — Svelte's per-component CSS-usage check otherwise flags this rule
+  // as unused in Singleselect / sync Multiselect.)
+  &--multi &__chevron {
+    position: absolute;
+    inset-block-start: calc(var(--_sel--height) / 2);
+    inset-inline-end: var(--_sel--padding-inline);
+    transform: translateY(-50%);
+    margin: 0;
+  }
+
+  // Inline-chip area visible inside the trigger when value is non-empty (inline mode).
+  &__more {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--sc-kit--space--2);
+    font-size: var(--sc-kit--font-size--sm);
+    color: var(--sc-kit--color--text--muted);
+    user-select: none;
+  }
+}

package/dist/ui/select/cmp.multiselect-async.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { default as MultiselectBase } from './multiselect-base.svelte';
+const { loadOptions, on, ...rest } = $props();
+const loadOptionsTyped = (q) => loadOptions(q);
+let baseRef = $state.raw(undefined);
+export const open = () => baseRef?.open();
+export const close = () => baseRef?.close();
+export const focus = () => baseRef?.focus();
+</script>
+
+<MultiselectBase
+  bind:this={baseRef}
+  {...rest}
+  loadOptions={loadOptionsTyped}
+  on={{
+    change: (opts) => on?.change?.(opts),
+    create: (payload) => on?.create?.(payload.query)
+  }} />
+
+<!--
+@component
+MultiselectAsync — async, flat multi-value picker with server-side typeahead. Calls
+`loadOptions` with an empty query on open and — debounced — on every keystroke. Value is
+the array of pre-resolved `SelectOption<T>` so chip labels render before the first fetch
+lands. Picked options not present in the current server page are surfaced at the top of the
+list when the query is empty.
+
+Internally proxies to `multiselect-base`. Spinner has a built-in 600ms gate; while it's
+visible the listbox is dimmed and pick events are ignored (race-prevention). Typing stays
+enabled so typeahead works on slow networks. For grouped options with cascade or tri-state
+selection, use `MultiselectTree`. For sync static options, use `Multiselect`.
+
+### CSS Custom Properties
+
+**Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+
+**Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+box-shadow, max-height, padding}`.
+
+**Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-block, padding-inline}`.
+
+**Empty / loading text:** `--sc-kit--select--empty--color`.
+
+**Chip:** `--sc-kit--select--chip--{inline--background, inline--border-color,
+external--background, external--border-color, color, border-radius, padding-block,
+padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
+
+**Spinner** (rendered while loading): `--sc-kit--spinner--{size, duration}`.
+-->

package/dist/ui/select/cmp.multiselect-async.svelte.d.ts

@@ -0,0 +1,79 @@
+export type MultiselectAsyncInstance = {
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+};
+import type { MultiselectBaseProps, SelectOption } from './types';
+declare function $$render<T>(): {
+    props: Omit<MultiselectBaseProps<T>, "on" | "loadOptions" | "groupHeader" | "selectionMode" | "parentSource"> & {
+        /** Server-side fetcher. Invoked with an empty query on open (initial page) and again — debounced — on every keystroke. Expected to return a flat list (no groups). */
+        loadOptions: (query: string) => Promise<SelectOption<T>[]>;
+        on?: {
+            /** Fires when the user picks/unpicks/reorders. Emits the full new selection. */
+            change?: (value: SelectOption<T>[]) => void;
+            /** Fires when the user activates "Create …". Return a Promise to keep the spinner up. */
+            create?: (query: string) => void | Promise<void>;
+        };
+    };
+    exports: {
+        open: () => void | undefined;
+        close: () => void | undefined;
+        focus: () => void | undefined;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        open: () => void | undefined;
+        close: () => void | undefined;
+        focus: () => void | undefined;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * MultiselectAsync — async, flat multi-value picker with server-side typeahead. Calls
+ * `loadOptions` with an empty query on open and — debounced — on every keystroke. Value is
+ * the array of pre-resolved `SelectOption<T>` so chip labels render before the first fetch
+ * lands. Picked options not present in the current server page are surfaced at the top of the
+ * list when the query is empty.
+ *
+ * Internally proxies to `multiselect-base`. Spinner has a built-in 600ms gate; while it's
+ * visible the listbox is dimmed and pick events are ignored (race-prevention). Typing stays
+ * enabled so typeahead works on slow networks. For grouped options with cascade or tri-state
+ * selection, use `MultiselectTree`. For sync static options, use `Multiselect`.
+ *
+ * ### CSS Custom Properties
+ *
+ * **Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+ * background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+ * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+ *
+ * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+ * box-shadow, max-height, padding}`.
+ *
+ * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+ * padding-block, padding-inline}`.
+ *
+ * **Empty / loading text:** `--sc-kit--select--empty--color`.
+ *
+ * **Chip:** `--sc-kit--select--chip--{inline--background, inline--border-color,
+ * external--background, external--border-color, color, border-radius, padding-block,
+ * padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
+ *
+ * **Spinner** (rendered while loading): `--sc-kit--spinner--{size, duration}`.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/select/cmp.multiselect-tree.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { default as MultiselectBase } from './multiselect-base.svelte';
+import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
+import { isSelectGroup } from './types';
+const { options, value, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const fuse = $derived(buildFuseIndex(options));
+const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
+// Full unfiltered group list — fed to the create-with-parent section's parent picker so it
+// stays stable across listbox filtering.
+const parentSource = $derived(options.filter(isSelectGroup).reduce((acc, g) => (g.value !== undefined ? [...acc, { label: g.label, value: g.value }] : acc), []));
+const resolvedValue = $derived.by(() => {
+    const out = [];
+    for (const v of value) {
+        let found;
+        for (const item of options) {
+            if (isSelectGroup(item)) {
+                if (item.value !== undefined && compare(item.value, v)) {
+                    found = { label: item.label, value: item.value };
+                }
+                else {
+                    found = item.options.find((o) => compare(o.value, v));
+                }
+            }
+            else if (compare(item.value, v)) {
+                found = item;
+            }
+            if (found) {
+                break;
+            }
+        }
+        out.push(found ?? { label: String(v), value: v });
+    }
+    return out;
+});
+let baseRef = $state.raw(undefined);
+export const open = () => baseRef?.open();
+export const close = () => baseRef?.close();
+export const focus = () => baseRef?.focus();
+$effect(() => {
+    void options;
+    baseRef?.refresh();
+});
+</script>
+
+<MultiselectBase
+  bind:this={baseRef}
+  loadOptions={loadOptionsShim}
+  debounceMs={0}
+  value={resolvedValue}
+  compare={compare}
+  size={size}
+  placeholder={placeholder}
+  disabled={disabled}
+  readonly={readonly}
+  inert={inert}
+  error={error}
+  borderless={borderless}
+  groupHeader={groupHeader}
+  selectionMode={selectionMode}
+  selectedDisplay={selectedDisplay}
+  canCreate={canCreate}
+  icon={icon}
+  chevronIcon={chevronIcon}
+  optionSnippet={optionSnippet}
+  selectionSnippet={selectionSnippet}
+  parentSource={parentSource}
+  id={id}
+  name={name}
+  autocomplete={autocomplete}
+  aria-label={ariaLabel}
+  aria-describedby={ariaDescribedby}
+  aria-required={ariaRequired}
+  on={{
+    change: (opts) => on?.change?.(opts.map((o) => o.value)),
+    create: (payload) => on?.create?.(payload)
+  }} />
+
+<!--
+@component
+MultiselectTree — sync, grouped multi-value picker with cascade + tri-state behavior and an
+optional create-with-parent section. Tree of one level: parent groups (each a
+`SelectOptionGroup<T>`) with child options; cascade-aware toggle on group headers; tri-state
+checkbox visual when `selectionMode='children-include-parent'`. Selection is visible inside
+the popover (checkbox rows) AND as chips inside the trigger by default; pass an empty
+`selectionSnippet` to hide the chip row entirely, or a custom one to render a count badge
+or any summary instead.
+
+Internally proxies to `multiselect-base` (same engine as `Multiselect` / `MultiselectAsync`)
+with a synchronous `Promise.resolve` `loadOptions` shim, so the 600ms spinner gate and
+race-prevention against in-flight `onCreate` handlers are inherited verbatim.
+
+### CSS Custom Properties
+
+**Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+
+**Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+box-shadow, max-height, padding}`.
+
+**Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-block, padding-inline}`.
+
+**Group header:** `--sc-kit--select--group-header--{color, font-size}`.
+
+**Empty text:** `--sc-kit--select--empty--color`.
+
+**Create-with-parent section:** `--sc-kit--multiselect--create--{background, subtitle--background,
+title--color, description--color, description--color--in, description--accent--color}`.
+
+**Spinner** (rendered briefly when an async `onCreate` exceeds 600ms):
+`--sc-kit--spinner--{size, duration}`.
+-->

package/dist/ui/select/cmp.multiselect-tree.svelte.d.ts

@@ -0,0 +1,152 @@
+export type MultiselectTreeInstance = {
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+};
+import type { IconProp } from '../icon';
+import { type SelectItem, type SelectOption } from './types';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+declare function $$render<T>(): {
+    props: {
+        /**
+         * Option list. Groups are `SelectOptionGroup<T>` items (one level of nesting). Tree's
+         * cascade and tri-state behavior kick in only for items that are groups; flat options at
+         * the top level work as in a regular Multiselect.
+         */
+        options: SelectItem<T>[];
+        /** Current selection — array of values. Parents added via `selectionMode='children-include-parent'` show up here too. */
+        value: T[];
+        /** Trigger height preset. @default 'md' */
+        size?: "sm" | "md" | "lg";
+        /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
+        placeholder?: string;
+        /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
+        disabled?: boolean;
+        /** Read-only — value visible, but selection cannot change. @default false */
+        readonly?: boolean;
+        /** Inert subtree — non-interactive but unstyled. @default false */
+        inert?: boolean;
+        /** Visual error state (accent border + aria-invalid). @default false */
+        error?: boolean;
+        /** Removes the field border. @default false */
+        borderless?: boolean;
+        /**
+         * Group-header behavior:
+         * - `'static'` — non-interactive label.
+         * - `'toggle-all'` (default) — clicking the header toggles every child option at once; tri-state checkbox when `selectionMode='children-include-parent'`.
+         * @default 'toggle-all'
+         */
+        groupHeader?: "static" | "toggle-all";
+        /**
+         * Cascade between group.value and children:
+         * - `'children-only'` (default) — picking a child adds only the child; group's own `value` stays independent.
+         * - `'children-include-parent'` — picking any child auto-adds the group's `value` to the selection; unpicking the last child removes it. Tri-state group headers light up in this mode.
+         * @default 'children-only'
+         */
+        selectionMode?: "children-only" | "children-include-parent";
+        /**
+         * How rows render selected state inside the listbox:
+         * - `'checkbox'` (default) — explicit checkbox on the left of every row; group headers show tri-state when applicable.
+         * - `'checkmark'` — ✓ on the right of selected rows.
+         * - `'highlight'` — selected rows get the active background only.
+         * @default 'checkbox'
+         */
+        selectedDisplay?: "checkmark" | "checkbox" | "highlight";
+        /** Equality comparator for `T`. Required when `T` is an object. @default (a, b) => a === b */
+        compare?: (a: T, b: T) => boolean;
+        /** Enables creatable mode. The predicate validates each query. When the current `options` contain groups, the "Create …" UI expands into a section with a parent picker. */
+        canCreate?: (query: string) => boolean;
+        /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+        icon?: IconProp;
+        /** Trailing chevron icon override. Same shape as `icon`. */
+        chevronIcon?: IconProp;
+        /** Custom row renderer. Replaces the option's label cell — receives `{ option }`. */
+        optionSnippet?: Snippet<[{
+            option: SelectOption<T>;
+        }]>;
+        /** Replaces the trigger's chip row. Pass an empty snippet to hide chips entirely, or render a count badge / any summary. */
+        selectionSnippet?: Snippet<[{
+            options: SelectOption<T>[];
+        }]>;
+        id?: string;
+        name?: string;
+        autocomplete?: HTMLInputAttributes["autocomplete"];
+        'aria-label'?: string;
+        'aria-describedby'?: string;
+        'aria-required'?: boolean;
+        on?: {
+            /** Fires when the user picks/unpicks (and on group toggle-all). Emits the full new selection (array of values). */
+            change?: (value: T[]) => void;
+            /** Fires when the user confirms the create-with-parent section. `parentValue` is the group's `value` picked via the parent dropdown — undefined when no parent was selected. Return a Promise to keep the spinner up. */
+            create?: (payload: {
+                query: string;
+                parentValue?: T;
+            }) => void | Promise<void>;
+        };
+    };
+    exports: {
+        open: () => void | undefined;
+        close: () => void | undefined;
+        focus: () => void | undefined;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        open: () => void | undefined;
+        close: () => void | undefined;
+        focus: () => void | undefined;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * MultiselectTree — sync, grouped multi-value picker with cascade + tri-state behavior and an
+ * optional create-with-parent section. Tree of one level: parent groups (each a
+ * `SelectOptionGroup<T>`) with child options; cascade-aware toggle on group headers; tri-state
+ * checkbox visual when `selectionMode='children-include-parent'`. Selection is visible inside
+ * the popover (checkbox rows) AND as chips inside the trigger by default; pass an empty
+ * `selectionSnippet` to hide the chip row entirely, or a custom one to render a count badge
+ * or any summary instead.
+ *
+ * Internally proxies to `multiselect-base` (same engine as `Multiselect` / `MultiselectAsync`)
+ * with a synchronous `Promise.resolve` `loadOptions` shim, so the 600ms spinner gate and
+ * race-prevention against in-flight `onCreate` handlers are inherited verbatim.
+ *
+ * ### CSS Custom Properties
+ *
+ * **Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+ * background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+ * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+ *
+ * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+ * box-shadow, max-height, padding}`.
+ *
+ * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+ * padding-block, padding-inline}`.
+ *
+ * **Group header:** `--sc-kit--select--group-header--{color, font-size}`.
+ *
+ * **Empty text:** `--sc-kit--select--empty--color`.
+ *
+ * **Create-with-parent section:** `--sc-kit--multiselect--create--{background, subtitle--background,
+ * title--color, description--color, description--color--in, description--accent--color}`.
+ *
+ * **Spinner** (rendered briefly when an async `onCreate` exceeds 600ms):
+ * `--sc-kit--spinner--{size, duration}`.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/select/cmp.multiselect.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { default as MultiselectBase } from './multiselect-base.svelte';
+import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
+import {} from './types';
+const { options, value, compare = defaultCompare, on, ...rest } = $props();
+const optionsAsItems = $derived(options);
+const fuse = $derived(buildFuseIndex(optionsAsItems));
+const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, optionsAsItems));
+const resolvedValue = $derived.by(() => {
+    const out = [];
+    for (const v of value) {
+        const found = options.find((o) => compare(o.value, v));
+        out.push(found ?? { label: String(v), value: v });
+    }
+    return out;
+});
+let baseRef = $state.raw(undefined);
+export const open = () => baseRef?.open();
+export const close = () => baseRef?.close();
+export const focus = () => baseRef?.focus();
+$effect(() => {
+    void options;
+    baseRef?.refresh();
+});
+</script>
+
+<MultiselectBase
+  bind:this={baseRef}
+  {...rest}
+  loadOptions={loadOptionsShim}
+  debounceMs={0}
+  value={resolvedValue}
+  compare={compare}
+  on={{
+    change: (opts) => on?.change?.(opts.map((o) => o.value)),
+    create: (payload) => on?.create?.(payload.query)
+  }} />
+
+<!--
+@component
+Multiselect — sync, flat multi-value picker. Picking toggles membership; the popover stays
+open and the filter resets for chaining. Internally proxies to `multiselect-base` with a
+synchronous `Promise.resolve` `loadOptions` shim; visual behavior, accessibility, 600ms
+spinner gate and race-prevention are inherited verbatim. For grouped options with cascade
+or tri-state selection, use `MultiselectTree`. For server-side typeahead, use
+`MultiselectAsync`.
+
+### CSS Custom Properties
+
+**Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+
+**Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+box-shadow, max-height, padding}`.
+
+**Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-block, padding-inline}`.
+
+**Empty text:** `--sc-kit--select--empty--color`.
+
+**Chip:** `--sc-kit--select--chip--{inline--background, inline--border-color,
+external--background, external--border-color, color, border-radius, padding-block,
+padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
+
+**Spinner** (rendered briefly when an async `onCreate` exceeds 600ms):
+`--sc-kit--spinner--{size, duration}`.
+-->