@streamscloud/kit 0.25.2 → 0.27.0

package/dist/ui/page-layout/cmp.page-layout.svelte

@@ -1,7 +1,9 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import LayoutControlButton from './layout-control-button.svelte';
 import { PageLayoutLocalization } from './page-layout-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import IconWindow from '@fluentui/svg-icons/icons/window_20_regular.svg?raw';
-const { children, title, actions, windowToggleActive = false, scrollable = false, on } = $props();
+import IconWindowMultiple from '@fluentui/svg-icons/icons/window_multiple_20_regular.svg?raw';
+const { children, title, actions, navigationToggle, editorControls, scrollable = false } = $props();
 const localization = new PageLayoutLocalization();
 </script>
 
@@ -18,16 +20,29 @@ const localization = new PageLayoutLocalization();
       {#if actions}
         {@render actions()}
       {/if}
-      {#if on?.windowToggle}
-        <button
-          type="button"
-          class="page-layout__window-toggle"
-          class:page-layout__window-toggle--active={windowToggleActive}
-          onclick={on.windowToggle}
-          aria-label={localization.toggleNavigation}
-          aria-pressed={windowToggleActive}>
-          <Icon src={IconWindow} />
-        </button>
+      {#if navigationToggle || editorControls}
+        <div class="page-layout__controls">
+          {#if navigationToggle}
+            <LayoutControlButton
+              icon={IconWindow}
+              label={localization.toggleNavigation}
+              variant="flat"
+              active={navigationToggle.active}
+              on={{ click: navigationToggle.onClick }} />
+          {/if}
+          {#if editorControls}
+            <LayoutControlButton
+              icon={IconWindowMultiple}
+              label={localization.togglePanels}
+              active={editorControls.panelsToggle.active}
+              on={{ click: editorControls.panelsToggle.onClick }} />
+            <LayoutControlButton
+              icon={IconDismiss}
+              label={localization.close}
+              active={editorControls.close.active}
+              on={{ click: editorControls.close.onClick }} />
+          {/if}
+        </div>
       {/if}
     </div>
   </div>
@@ -38,12 +53,14 @@ const localization = new PageLayoutLocalization();
 
 <!--
 @component
-PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
-window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional
+group of chrome buttons) above a flex-column body that typically contains a `PagePanels` row.
 
-Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
-whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
-the whole page scroll as one document with sticky panel headers.
+`navigationToggle` surfaces the app-navigation button as a bare glyph; `editorControls` is the fixed
+editor pair — panels toggle + close, both required so an editor never ships half the preset, drawn as
+outlined squares. Every entry takes `{ active?, onClick }`, and the group renders in the order
+navigation → panels → close. Set `scrollable` to let the whole page scroll as one document with
+sticky panel headers.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -86,27 +103,10 @@ the whole page scroll as one document with sticky panel headers.
   align-items: center;
   gap: 1rem;
 }
-.page-layout__window-toggle {
-  --sc-kit--icon--size: 1.125rem;
-  display: inline-flex;
+.page-layout__controls {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: var(--sc-kit--radius--sm);
-  color: var(--sc-kit--color--text--muted);
-  cursor: pointer;
-}
-.page-layout__window-toggle:hover {
-  background: var(--sc-kit--color--bg--hover);
-  color: var(--sc-kit--color--text--primary);
-}
-.page-layout__window-toggle--active {
-  background: var(--sc-kit--color--bg--active);
-  color: var(--sc-kit--color--text--primary);
+  gap: var(--sc-kit--space--2);
 }
 .page-layout__body {
   flex: 1;

package/dist/ui/page-layout/cmp.page-layout.svelte.d.ts

@@ -1,23 +1,24 @@
+import type { EditorControls, PageLayoutAction } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
     title?: string | Snippet;
     actions?: Snippet;
-    /** Visual + ARIA state for the window-toggle button. Set `true` when the navigation it controls is hidden / collapsed — the button gets `aria-pressed` and an active background. @default false */
-    windowToggleActive?: boolean;
+    /** Hides / shows the host app's own navigation. When set, a bare glyph button is rendered in the header's control group. */
+    navigationToggle?: PageLayoutAction;
+    /** Editor chrome — the fixed panels-toggle + close pair. Set it to render both buttons; omit it entirely for a non-editor page. */
+    editorControls?: EditorControls;
     scrollable?: boolean;
-    on?: {
-        /** When set, a window-toggle button is rendered at the right edge of the header. */
-        windowToggle?: () => void;
-    };
 };
 /**
- * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
- * window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+ * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional
+ * group of chrome buttons) above a flex-column body that typically contains a `PagePanels` row.
  *
- * Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
- * whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
- * the whole page scroll as one document with sticky panel headers.
+ * `navigationToggle` surfaces the app-navigation button as a bare glyph; `editorControls` is the fixed
+ * editor pair — panels toggle + close, both required so an editor never ships half the preset, drawn as
+ * outlined squares. Every entry takes `{ active?, onClick }`, and the group renders in the order
+ * navigation → panels → close. Set `scrollable` to let the whole page scroll as one document with
+ * sticky panel headers.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/page-layout/index.d.ts

@@ -5,4 +5,4 @@ export { default as PagePanels } from './cmp.page-panels.svelte';
 export { default as PanelCollapseButton } from './cmp.panel-collapse-button.svelte';
 export { default as PanelContent } from './cmp.panel-content.svelte';
 export { PanelEntry, PanelState } from './panel-state.svelte';
-export type { PanelBorder, PanelResizingSettings } from './types';
+export type { EditorControls, PageLayoutAction, PanelBorder, PanelResizingSettings } from './types';

package/dist/ui/page-layout/layout-control-button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { Icon } from '../icon';
+const { icon, label, variant = 'outlined', active, on } = $props();
+</script>
+
+<button
+  type="button"
+  class="layout-control-button layout-control-button--{variant}"
+  class:layout-control-button--active={active}
+  aria-label={label}
+  aria-pressed={active}
+  onclick={on.click}>
+  <Icon src={icon} size={variant === 'flat' ? 'control-xl' : 'control-md'} />
+</button>
+
+<!--
+@component
+Folder-internal chrome button for the `PageLayout` header. Two variants: `flat` for the
+app-navigation toggle and `outlined` for the editor pair. Rendered by `PageLayout`; not exported.
+-->
+<style>.layout-control-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_lcb--size);
+  block-size: var(--_lcb--size);
+  padding: 0;
+  color: var(--_lcb--color);
+  background: var(--_lcb--background);
+  border: 1px solid var(--_lcb--border-color);
+  border-radius: var(--_lcb--border-radius);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.layout-control-button--outlined {
+  --_lcb--size: var(--sc-kit--field--height--md);
+  --_lcb--border-radius: var(--sc-kit--field--border-radius--md);
+  --_lcb--color: var(--sc-kit--color--text--primary);
+  --_lcb--color-hover: var(--sc-kit--color--text--primary);
+  --_lcb--color-active: var(--sc-kit--color--text--primary);
+  --_lcb--background: var(--sc-kit--color--bg--panel);
+  --_lcb--background-hover: var(--sc-kit--color--bg--hover);
+  --_lcb--background-active: var(--sc-kit--color--bg--active);
+  --_lcb--border-color: var(--sc-kit--color--border);
+  --_lcb--border-color-active: var(--sc-kit--color--border--strong);
+}
+.layout-control-button--flat {
+  --_lcb--size: 1.75rem;
+  --_lcb--border-radius: var(--sc-kit--radius--sm);
+  --_lcb--color: var(--sc-kit--color--text--muted);
+  --_lcb--color-hover: var(--sc-kit--color--text--primary);
+  --_lcb--color-active: var(--sc-kit--color--text--primary);
+  --_lcb--background: transparent;
+  --_lcb--background-hover: var(--sc-kit--color--bg--hover);
+  --_lcb--background-active: var(--sc-kit--color--bg--active);
+  --_lcb--border-color: transparent;
+  --_lcb--border-color-active: transparent;
+}
+.layout-control-button:hover {
+  color: var(--_lcb--color-hover);
+  background: var(--_lcb--background-hover);
+}
+.layout-control-button:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.layout-control-button--active {
+  color: var(--_lcb--color-active);
+  background: var(--_lcb--background-active);
+  border-color: var(--_lcb--border-color-active);
+}</style>

package/dist/ui/page-layout/layout-control-button.svelte.d.ts

@@ -0,0 +1,19 @@
+type Props = {
+    /** Glyph — a string SVG source. */
+    icon: string;
+    label: string;
+    /** `flat` = bare 20px glyph in a 28px hit area (app-navigation toggle); `outlined` = 32px bordered square with a 16px glyph (editor chrome). @default 'outlined' */
+    variant?: 'outlined' | 'flat';
+    /** Toggle state. Leave undefined for a plain action button so no `aria-pressed` is emitted. */
+    active?: boolean;
+    on: {
+        click: () => void;
+    };
+};
+/**
+ * Folder-internal chrome button for the `PageLayout` header. Two variants: `flat` for the
+ * app-navigation toggle and `outlined` for the editor pair. Rendered by `PageLayout`; not exported.
+ */
+declare const LayoutControlButton: import("svelte").Component<Props, {}, "">;
+type LayoutControlButton = ReturnType<typeof LayoutControlButton>;
+export default LayoutControlButton;

package/dist/ui/page-layout/page-layout-localization.d.ts

@@ -2,4 +2,6 @@ export declare class PageLayoutLocalization {
     get resizePanel(): string;
     get togglePanel(): string;
     get toggleNavigation(): string;
+    get togglePanels(): string;
+    get close(): string;
 }

package/dist/ui/page-layout/page-layout-localization.js

@@ -11,6 +11,14 @@ const loc = {
     toggleNavigation: {
         en: 'Toggle navigation',
         no: 'Veksle navigasjon'
+    },
+    togglePanels: {
+        en: 'Toggle panels',
+        no: 'Veksle paneler'
+    },
+    close: {
+        en: 'Close',
+        no: 'Lukk'
     }
 };
 export class PageLayoutLocalization {
@@ -23,4 +31,10 @@ export class PageLayoutLocalization {
     get toggleNavigation() {
         return loc.toggleNavigation[AppLocale.current];
     }
+    get togglePanels() {
+        return loc.togglePanels[AppLocale.current];
+    }
+    get close() {
+        return loc.close[AppLocale.current];
+    }
 }

package/dist/ui/page-layout/types.d.ts

@@ -17,3 +17,16 @@ export type PanelResizingSettings = {
     maxWidth?: number;
 };
 export type PanelBorder = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Config for one `PageLayout` header chrome button. Set `active` only for toggles — it drives both
+ * `aria-pressed` and the pressed background, and is omitted entirely for plain action buttons.
+ */
+export type PageLayoutAction = {
+    active?: boolean;
+    onClick: () => void;
+};
+/** Editor chrome — a fixed pair, so an editor never ships half of it. */
+export type EditorControls = {
+    panelsToggle: PageLayoutAction;
+    close: PageLayoutAction;
+};

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.27.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",