@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/select/multiselect-base.svelte.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Internal — instance type for `multiselect-base.svelte`. Public Multi cmps
+ * (`Multiselect`, `MultiselectAsync`, `MultiselectTree`) proxy to this base
+ * and expose their own narrower instance types.
+ */
+export type MultiselectBaseInstance = {
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+    /** Re-runs `loadOptions` with the current query while the popover is open. Used by sync proxies on `options` prop change. */
+    refresh: () => void;
+};
+import type { MultiselectBaseProps } from './types';
+declare function $$render<T>(): {
+    props: MultiselectBaseProps<T>;
+    exports: {
+        open: () => void;
+        close: () => void;
+        focus: () => void | undefined;
+        refresh: () => void;
+    };
+    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;
+        close: () => void;
+        focus: () => void | undefined;
+        refresh: () => void;
+    };
+}
+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']>;
+}
+/**
+ * INTERNAL — full-featured multi-value picker engine. NOT exported from the module barrel.
+ * Public Multi cmps proxy here:
+ * - `Multiselect` (sync flat) — Fuse shim, no groups.
+ * - `MultiselectAsync` (async flat) — `loadOptions` debounced.
+ * - `MultiselectTree` (sync grouped) — groups + cascade + create-with-parent.
+ *
+ * Owns: input + trigger markup, chip rendering (`inline`/`external`/`selectionSnippet`),
+ * DnD reorder, listbox, create-with-parent section (when `canCreate` + groups in items),
+ * tri-state group headers, race-prevention against in-flight handlers, 600ms spinner gate,
+ * debounced/Fuse-driven `loadOptions` plumbing through `select-core`.
+ *
+ * ### 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 / 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 MultiselectBase: $$IsomorphicComponent;
+type MultiselectBase<T> = InstanceType<typeof MultiselectBase<T>>;
+export default MultiselectBase;

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

@@ -0,0 +1,11 @@
+export declare class MultiselectLocalization {
+    get removeChip(): (label: string) => string;
+    get moreLabel(): (count: number) => string;
+    get loadingLabel(): string;
+    get dragHandle(): string;
+    get createNewItem(): string;
+    get orSelectParentItem(): string;
+    get createIn(): string;
+    get createAsParent(): string;
+    get confirmCreate(): string;
+}

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

@@ -0,0 +1,47 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    removeChip: {
+        en: (label) => `Remove ${label}`,
+        no: (label) => `Fjern ${label}`
+    },
+    moreLabel: {
+        en: (count) => `+${count} more`,
+        no: (count) => `+${count} til`
+    },
+    loadingLabel: { en: 'Loading…', no: 'Laster…' },
+    dragHandle: { en: 'Drag to reorder', no: 'Dra for å omorganisere' },
+    createNewItem: { en: 'Create new item', no: 'Opprett nytt element' },
+    orSelectParentItem: { en: 'Or select parent item', no: 'Eller velg overordnet element' },
+    createIn: { en: 'Create in ', no: 'Opprett i ' },
+    createAsParent: { en: 'Create as parent ', no: 'Opprett som overordnet ' },
+    confirmCreate: { en: 'Confirm create', no: 'Bekreft opprettelse' }
+};
+export class MultiselectLocalization {
+    get removeChip() {
+        return loc.removeChip[AppLocale.current];
+    }
+    get moreLabel() {
+        return loc.moreLabel[AppLocale.current];
+    }
+    get loadingLabel() {
+        return loc.loadingLabel[AppLocale.current];
+    }
+    get dragHandle() {
+        return loc.dragHandle[AppLocale.current];
+    }
+    get createNewItem() {
+        return loc.createNewItem[AppLocale.current];
+    }
+    get orSelectParentItem() {
+        return loc.orSelectParentItem[AppLocale.current];
+    }
+    get createIn() {
+        return loc.createIn[AppLocale.current];
+    }
+    get createAsParent() {
+        return loc.createAsParent[AppLocale.current];
+    }
+    get confirmCreate() {
+        return loc.confirmCreate[AppLocale.current];
+    }
+}

package/dist/ui/select/select-chip.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" generics="T">import { Icon } from '../icon';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+import IconReorderDots from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+const { option, variant = 'external', tone, showFullItem = false, draggable = false, locked = false, removeLabel, dragLabel, chipSnippet, on } = $props();
+const handleRemove = (e) => {
+    e.stopPropagation();
+    if (locked) {
+        return;
+    }
+    on.remove();
+};
+</script>
+
+<span
+  class="select-chip select-chip--{variant}"
+  class:select-chip--full={showFullItem}
+  class:select-chip--neutral={tone === 'neutral'}
+  class:select-chip--accent={tone === 'accent'}>
+  {#if draggable}
+    <span class="select-chip__handle" title={dragLabel} aria-hidden="true">
+      <Icon src={IconReorderDots} />
+    </span>
+  {/if}
+  <span class="select-chip__label">
+    {#if chipSnippet}
+      {@render chipSnippet({ option })}
+    {:else}
+      {option.label}
+    {/if}
+  </span>
+  {#if !locked}
+    <span
+      class="select-chip__remove"
+      role="button"
+      tabindex="-1"
+      aria-label={removeLabel ? removeLabel(option.label) : `Remove ${option.label}`}
+      onclick={handleRemove}
+      onkeydown={() => undefined}>
+      <Icon src={IconDismiss} />
+    </span>
+  {/if}
+</span>
+
+<style>.select-chip {
+  --_chip--background: transparent;
+  --_chip--border-color: transparent;
+  --_chip--color: var(--sc-kit--select--chip--color, var(--sc-kit--color--text--primary));
+  --_chip--padding-block: var(--sc-kit--select--chip--padding-block, 0.125rem);
+  --_chip--padding-inline: var(--sc-kit--select--chip--padding-inline, var(--sc-kit--space--2));
+  --_chip--gap: var(--sc-kit--select--chip--gap, var(--sc-kit--space--1));
+  --_chip--border-radius: var(--sc-kit--select--chip--border-radius, var(--sc-kit--radius--sm));
+  --_chip--font-size: var(--sc-kit--select--chip--font-size, var(--sc-kit--font-size--sm));
+  --_chip--remove-color: var(--sc-kit--select--chip--remove-color, var(--sc-kit--color--text--muted));
+  --_chip--remove-color-hover: var(--sc-kit--select--chip--remove-color--hover, var(--sc-kit--color--text--primary));
+  --_chip--max-width: var(--sc-kit--select--chip--max-width, 13.75rem);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_chip--gap);
+  padding: var(--_chip--padding-block) var(--_chip--padding-inline);
+  background: var(--_chip--background);
+  border: 1px solid var(--_chip--border-color);
+  color: var(--_chip--color);
+  border-radius: var(--_chip--border-radius);
+  font-size: var(--_chip--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  max-width: var(--_chip--max-width);
+  user-select: none;
+}
+.select-chip--inline {
+  --_chip--background: var(--sc-kit--select--chip--inline--background, var(--sc-kit--color--accent--softer));
+  --_chip--border-color: var(--sc-kit--select--chip--inline--border-color, transparent);
+}
+.select-chip--external {
+  --_chip--background: var(--sc-kit--select--chip--external--background, transparent);
+  --_chip--border-color: var(--sc-kit--select--chip--external--border-color, var(--sc-kit--color--border));
+}
+.select-chip--neutral {
+  --_chip--background: var(--sc-kit--color--bg--active);
+  --_chip--border-color: transparent;
+  --_chip--color: var(--sc-kit--color--text--primary);
+  --_chip--remove-color: var(--sc-kit--color--text--muted);
+  --_chip--remove-color-hover: var(--sc-kit--color--text--primary);
+}
+.select-chip--accent {
+  --_chip--background: var(--sc-kit--color--accent--soft);
+  --_chip--border-color: transparent;
+  --_chip--color: var(--sc-kit--color--accent);
+  --_chip--remove-color: var(--sc-kit--color--accent);
+  --_chip--remove-color-hover: var(--sc-kit--color--accent);
+}
+.select-chip--full {
+  max-width: none;
+}
+.select-chip__handle {
+  --sc-kit--icon--size: 0.875rem;
+  --sc-kit--icon--color: var(--_chip--remove-color);
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+}
+.select-chip__label {
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.select-chip--full .select-chip__label {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+.select-chip__remove {
+  --sc-kit--icon--size: 0.75rem;
+  --sc-kit--icon--color: var(--_chip--remove-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.select-chip__remove:hover {
+  --sc-kit--icon--color: var(--_chip--remove-color-hover);
+}</style>

package/dist/ui/select/select-chip.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { SelectOption } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        option: SelectOption<T>;
+        /** `inline` (chips inside the trigger) = filled soft-accent; `external` (chips above the trigger) = transparent + border. */
+        variant?: "inline" | "external";
+        /** Color tone preset. When set, overrides the variant's default background / text / remove colors. */
+        tone?: "neutral" | "accent";
+        /** Wraps label in nowrap+ellipsis when false; lets it grow freely when true. */
+        showFullItem?: boolean;
+        /** Render the drag handle (external + reorderable mode). */
+        draggable?: boolean;
+        /** Disable the remove button (e.g. when the host is disabled/readonly/inert). */
+        locked?: boolean;
+        /** Localized aria-label factory for the remove button. */
+        removeLabel?: (label: string) => string;
+        /** Localized title for the drag handle. */
+        dragLabel?: string;
+        chipSnippet?: Snippet<[{
+            option: SelectOption<T>;
+        }]>;
+        on: {
+            remove: () => void;
+        };
+    };
+    exports: {};
+    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(): {};
+}
+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']>;
+}
+declare const SelectChip: $$IsomorphicComponent;
+type SelectChip<T> = InstanceType<typeof SelectChip<T>>;
+export default SelectChip;

package/dist/ui/select/select-core.svelte.d.ts

@@ -0,0 +1,87 @@
+import type { SelectItem, SelectOption, SelectRow } from './types';
+export type SelectCoreConfig<T> = {
+    picker: 'single' | 'multi';
+    /**
+     * Fetcher invoked on open (empty query) and on every debounced keystroke. Sync wrappers
+     * pass a `(q) => Promise.resolve(buildResults(options, q))` shim so the core stays
+     * single-pathed — there is no separate "sync mode".
+     */
+    loadOptions: (query: string) => Promise<SelectItem<T>[]>;
+    /** Debounce window for `loadOptions`. Sync wrappers pass `0`. @default 400 */
+    getDebounceMs?: () => number;
+    /** Equality comparator for `T`. */
+    getCompare: () => (a: T, b: T) => boolean;
+    /** Optional `canCreate` validator — presence enables creatable mode. */
+    getCanCreate: () => ((q: string) => boolean) | undefined;
+    /** Group-header behavior. `toggle-all` only makes sense for multi. */
+    getGroupHeader: () => 'static' | 'value' | 'toggle-all';
+    /**
+     * Multi-only — controls cascade between group.value and children.
+     * - `'children-only'` (default): picking a child adds only the child; group.value is independent.
+     * - `'children-include-parent'`: picking a child also adds the group.value (and unpicking the last child removes it).
+     */
+    getSelectionMode?: () => 'children-only' | 'children-include-parent';
+    /** Per-cmp predicate: is this option currently part of the selection? */
+    isPicked: (option: SelectOption<T>) => boolean;
+    /** When true, already-selected options are filtered out of the listbox (tag-input style). @default false */
+    getHideSelected?: () => boolean;
+    /** Currently selected options. Used for highlight init + picked-out-of-page surfacing. */
+    getSelectedOptions: () => SelectOption<T>[];
+    /** false when the host is disabled/readonly/inert. */
+    getInteractive: () => boolean;
+    /** Input ref getter (the cmp owns `bind:this`). */
+    getInputEl: () => HTMLInputElement | undefined;
+    /** Variant-specific value-flow callbacks. */
+    onPickOption: (option: SelectOption<T>, parentGroup?: {
+        label: string;
+        value?: T;
+        options: SelectOption<T>[];
+    }) => void;
+    onPickGroupValue: (group: {
+        label: string;
+        value: T;
+    }) => void;
+    onPickGroupAll: (group: {
+        label: string;
+        value?: T;
+        options: SelectOption<T>[];
+    }) => void;
+    onClear: () => void;
+    /**
+     * Consumer's create handler. Receives the current query and (optionally) a `parentValue` picked
+     * via the create-with-parent section. May return a Promise — when it does, the spinner appears
+     * after the {@link SPINNER_DELAY_MS} gate.
+     */
+    onCreate: (payload: {
+        query: string;
+        parentValue?: T;
+    }) => void | Promise<void>;
+};
+export type SelectCore<T> = {
+    readonly isOpen: boolean;
+    readonly query: string;
+    readonly highlight: number;
+    readonly isFiltering: boolean;
+    readonly rows: SelectRow<T>[];
+    /** Current option list (synced from `loadOptions`). Used by the cmp to render the create-with-parent section when groups are present. */
+    readonly items: SelectItem<T>[];
+    /** Mirrors the internal `showCreateRow` predicate (canCreate enabled + non-empty query + predicate true + no exact-label match). Cmps gate the create-with-parent section on this. */
+    readonly canShowCreate: boolean;
+    /** True only after a load/create has been pending for at least {@link SPINNER_DELAY_MS}. Render-side: show the spinner now. */
+    readonly loading: boolean;
+    /** Mirrors `loading` — listbox should dim and refuse pick events to avoid races against the in-flight handler. */
+    readonly interactionLocked: boolean;
+    handleFocus: () => void;
+    handleClick: (e: MouseEvent) => void;
+    handleInput: (e: Event) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    openPopover: () => void;
+    closePopover: () => void;
+    pickRow: (row: SelectRow<T>) => void;
+    setHighlight: (i: number) => void;
+    /** Re-runs `loadOptions` with the current query while the popover is open. No-op when closed. Sync wrappers call this on `options` prop change. */
+    refresh: () => void;
+    /** Trigger consumer's `onCreate({ query, parentValue })`. Used by the create-with-parent section when its confirm button is clicked. */
+    confirmCreate: (parentValue?: T) => void;
+};
+export declare function createSelectCore<T>(config: SelectCoreConfig<T>): SelectCore<T>;