@streamscloud/kit 0.25.2 → 0.26.0

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

@@ -4,7 +4,7 @@
 <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, searchable = 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 { options, value, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', createOptions, 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));
 // Include flat roots, not only groups — else a childless root can't be picked as a create-parent.
@@ -60,7 +60,7 @@ $effect(() => {
   groupHeader={groupHeader}
   selectionMode={selectionMode}
   selectedDisplay={selectedDisplay}
-  canCreate={canCreate}
+  createOptions={createOptions}
   icon={icon}
   chevronIcon={chevronIcon}
   optionSnippet={optionSnippet}

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

@@ -4,7 +4,7 @@ export type MultiselectTreeInstance = {
     focus: () => void;
 };
 import type { IconProp } from '../icon';
-import { type SelectItem, type SelectOption } from './types';
+import { type SelectCreateOptions, type SelectItem, type SelectOption } from './types';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 declare function $$render<T>(): {
@@ -57,8 +57,8 @@ declare function $$render<T>(): {
         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 at least one top-level root has a `value`, the "Create …" UI expands into a section whose parent picker offers those roots (group or flat); otherwise a plain "Create …" row is shown. */
-        canCreate?: (query: string) => boolean;
+        /** Enables creatable mode. When at least one top-level root has a `value`, the "Create …" UI expands into a section whose parent picker offers those roots (group or flat); otherwise a plain "Create …" row is shown. `createOptions.prefix` applies only to the plain row — the create-with-parent section keeps its own localization. See {@link SelectCreateOptions}. */
+        createOptions?: SelectCreateOptions;
         /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
         icon?: IconProp;
         /** Trailing chevron icon override. Same shape as `icon`. */

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

@@ -9,7 +9,7 @@ import { defaultCompare } from './select-internals';
 import { default as SelectListbox } from './select-listbox.svelte';
 import { SingleselectLocalization } from './singleselect-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
-const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const localization = new SingleselectLocalization();
 const selectedOption = $derived(mode.value ?? null);
 const selectionLabel = $derived(selectedOption?.label ?? '');
@@ -23,7 +23,7 @@ const core = createSelectCore({
     getDebounceMs: () => debounceMs,
     getCompare: () => compare,
     getSearchable: () => searchable,
-    getCanCreate: () => canCreate,
+    getCanCreate: () => createOptions?.canCreate,
     getGroupHeader: () => groupHeader,
     isPicked: (option) => selectedOption !== null && compare(option.value, selectedOption.value),
     getSelectedOptions: () => (selectedOption ? [selectedOption] : []),
@@ -140,6 +140,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
     listboxId={listboxId}
     optionSnippet={optionSnippet}
     bodySnippet={listbox}
+    createPrefix={createOptions?.prefix}
     on={{ pickRow: core.pickRow, hoverRow: core.setHighlight, dismiss: core.closePopover }} />
 </div>
 

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

@@ -4,7 +4,7 @@
 <script lang="ts" generics="T">import { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
 import { isSelectGroup } from './types';
-const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const fuse = $derived(buildFuseIndex(options));
 const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
 const resolvedValue = $derived.by(() => {
@@ -54,7 +54,7 @@ $effect(() => {
     borderless={borderless}
     searchable={searchable}
     groupHeader={groupHeader}
-    canCreate={canCreate}
+    createOptions={createOptions}
     icon={icon}
     chevronIcon={chevronIcon}
     optionSnippet={optionSnippet}
@@ -87,7 +87,7 @@ $effect(() => {
     borderless={borderless}
     searchable={searchable}
     groupHeader={groupHeader}
-    canCreate={canCreate}
+    createOptions={createOptions}
     icon={icon}
     chevronIcon={chevronIcon}
     optionSnippet={optionSnippet}

package/dist/ui/select/index.d.ts

@@ -9,4 +9,4 @@ export type { MultiselectAsyncInstance } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
 export type { MultiselectTreeInstance } from './cmp.multiselect-tree.svelte';
 export { isSelectGroup } from './types';
-export type { SelectItem, SelectOption, SelectOptionGroup } from './types';
+export type { SelectCreateOptions, SelectItem, SelectOption, SelectOptionGroup } from './types';

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

@@ -13,7 +13,7 @@ import { default as SelectListbox } from './select-listbox.svelte';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
 import { dndzone } from 'svelte-dnd-action';
-const { loadOptions, debounceMs = 400, value, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, selectionMode = 'children-only', selectedDisplay = 'checkmark', canCreate, chipMode = 'inline', reorderable = false, maxVisible = Infinity, showFullItem = false, chipVariant, showChevron = true, hideSelected = false, icon, chevronIcon, optionSnippet, chipSnippet, selectionSnippet, parentSource, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const { loadOptions, debounceMs = 400, value, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, selectionMode = 'children-only', selectedDisplay = 'checkmark', createOptions, chipMode = 'inline', reorderable = false, maxVisible = Infinity, showFullItem = false, chipVariant, showChevron = true, hideSelected = false, icon, chevronIcon, optionSnippet, chipSnippet, selectionSnippet, parentSource, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
 const localization = new MultiselectLocalization();
 const isPicked = (v) => value.some((existing) => compare(existing.value, v));
 const hasValue = $derived(value.length > 0);
@@ -35,7 +35,7 @@ const core = createSelectCore({
     getDebounceMs: () => debounceMs,
     getCompare: () => compare,
     getSearchable: () => searchable,
-    getCanCreate: () => canCreate,
+    getCanCreate: () => createOptions?.canCreate,
     getHideCreateRow: () => showCreateSection,
     getGroupHeader: () => groupHeader,
     getSelectionMode: () => selectionMode,
@@ -265,6 +265,7 @@ const handleDndFinalize = (e) => {
       optionSnippet={optionSnippet}
       headerSnippet={showCreateSection ? createWithParentSection : undefined}
       hideCreateRows={showCreateSection}
+      createPrefix={createOptions?.prefix}
       suppressEmpty={hideSelected}
       on={{ pickRow: core.pickRow, hoverRow: core.setHighlight, dismiss: core.closePopover }} />
   </div>
@@ -307,7 +308,7 @@ Public Multi cmps proxy here:
 - `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),
+DnD reorder, listbox, create-with-parent section (when `createOptions` + groups in items),
 tri-state group headers, race-prevention against in-flight handlers, 600ms spinner gate,
 debounced/Fuse-driven `loadOptions` plumbing through `select-core`.
 

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

@@ -50,7 +50,7 @@ interface $$IsomorphicComponent {
  * - `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),
+ * DnD reorder, listbox, create-with-parent section (when `createOptions` + groups in items),
  * tri-state group headers, race-prevention against in-flight handlers, 600ms spinner gate,
  * debounced/Fuse-driven `loadOptions` plumbing through `select-core`.
  *

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

@@ -13,7 +13,7 @@ export type SelectCoreConfig<T> = {
     getCompare: () => (a: T, b: T) => boolean;
     /** When false, typing never enters filtering mode — the popover is a click/keyboard-only picker. @default true */
     getSearchable?: () => boolean;
-    /** Optional `canCreate` validator — presence enables creatable mode. */
+    /** Optional `createOptions.canCreate` validator — presence enables creatable mode. */
     getCanCreate: () => ((q: string) => boolean) | undefined;
     /** When true, no `kind:'create'` row is emitted (the host renders its own create UI) — keyboard navigation must not reach a row the listbox doesn't show. @default false */
     getHideCreateRow?: () => boolean;

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

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

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

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

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

@@ -6,7 +6,7 @@ import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_16_f
 import IconCheckboxIndeterminate from '@fluentui/svg-icons/icons/checkbox_indeterminate_16_filled.svg?raw';
 import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_16_regular.svg?raw';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
-let { triggerEl, isOpen, rows, highlight, loading = false, listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, suppressEmpty = false, on } = $props();
+let { triggerEl, isOpen, rows, highlight, loading = false, listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, createPrefix, suppressEmpty = false, on } = $props();
 const localization = new SelectListboxLocalization();
 // rows keep their index into the full `rows` array — `highlight` and row ids are core-side indices,
 // so filtering without preserving them shifts every row by one and Enter acts on the wrong row
@@ -149,8 +149,10 @@ $effect(() => {
             onclick={() => on.pickRow(row)}
             onkeydown={() => undefined}
             onmouseenter={() => on.hoverRow(index)}>
-            <span class="select-listbox__row-icon"><Icon src={IconAdd} /></span>
-            <span class="select-listbox__row-label">{localization.createLabel(row.query)}</span>
+            {#if !createPrefix}
+              <span class="select-listbox__row-icon"><Icon src={IconAdd} /></span>
+            {/if}
+            <span class="select-listbox__row-label">{localization.createLabel(row.query, createPrefix)}</span>
           </div>
         {:else if row.kind === 'group-header'}
           {#if row.selectable}

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

@@ -37,6 +37,8 @@ declare function $$render<T>(): {
         }]>;
         /** When true, `kind:'create'` rows are skipped (used when `headerSnippet` already renders the create UI). @default false */
         hideCreateRows?: boolean;
+        /** Text in front of the query on a `kind:'create'` row, replacing the localized default ("Create"). When set, the leading `+` glyph is dropped. */
+        createPrefix?: string;
         /** When true, the panel is not rendered at all if there's nothing to show (no rows, no create, not loading) — suppresses the "No matches" empty state. Used by tag-input style hosts. @default false */
         suppressEmpty?: boolean;
         on: {

package/dist/ui/select/types.d.ts

@@ -47,6 +47,13 @@ export type SelectRowCreate = {
     query: string;
 };
 export type SelectRow<T> = SelectRowOption<T> | SelectRowGroupHeader<T> | SelectRowCreate;
+/** Creatable mode — passing this object to a select enables the create UI. */
+export type SelectCreateOptions = {
+    /** Validates each query — only when it returns true does the create UI appear (and the query isn't a duplicate of an existing label). */
+    canCreate: (query: string) => boolean;
+    /** Replaces the whole localized text in front of the typed query on the create row: `Create "foo"` → `Invite "foo"`, and drops the leading `+` glyph (the label fills the full row width). Not localized by the kit; pass already-translated text. Has no effect on the create-with-parent section, which keeps its own localized wording. */
+    prefix?: string;
+};
 /** Common (data-source-agnostic) prop surface shared by `Singleselect` (sync) and `SingleselectAsync`. */
 export type SingleselectCommonProps<T> = {
     /** Trigger height preset. @default 'md' */
@@ -72,8 +79,8 @@ export type SingleselectCommonProps<T> = {
     groupHeader?: 'static' | 'value';
     /** 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 — only when it returns true does the "Create …" row appear (and isn't a duplicate of an existing label). */
-    canCreate?: (query: string) => boolean;
+    /** Enables creatable mode — a "Create …" row for the current query. See {@link SelectCreateOptions}. */
+    createOptions?: SelectCreateOptions;
     /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
     icon?: IconProp;
     /** Trailing chevron icon override. Same shape as `icon`. */
@@ -156,8 +163,8 @@ export type MultiselectBaseProps<T> = {
      * @default 'checkmark'
      */
     selectedDisplay?: 'checkmark' | 'checkbox' | 'highlight';
-    /** Enables creatable mode. The predicate validates each query — only when it returns true does the create UI appear. When `parentSource` is non-empty, a create-with-parent section replaces the simple "Create …" row. */
-    canCreate?: (query: string) => boolean;
+    /** Enables creatable mode. When `parentSource` is non-empty, a create-with-parent section replaces the simple "Create …" row. See {@link SelectCreateOptions}. */
+    createOptions?: SelectCreateOptions;
     /** Where chips render. `'external'` puts them in a row above the trigger and unlocks `reorderable`. @default 'inline' */
     chipMode?: 'inline' | 'external';
     /** Enables drag-and-drop reorder on the external chip row. Ignored unless `chipMode='external'`. @default false */
@@ -189,7 +196,7 @@ export type MultiselectBaseProps<T> = {
         options: SelectOption<T>[];
     }]>;
     /**
-     * Enables the create-with-parent section (shown above the listbox when `canCreate` gates true).
+     * Enables the create-with-parent section (shown above the listbox when `createOptions.canCreate` gates true).
      * Receives the FULL parent-candidate list independent of current filter — so the parent picker offers
      * every candidate regardless of what's currently visible in the listbox. When undefined or empty, a
      * single "Create …" row is shown instead.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",