@streamscloud/kit 0.14.0 → 0.15.1

package/dist/ui/image/cmp.image-stub.svelte

@@ -13,11 +13,11 @@ A placeholder image stub showing a generic image icon, used as a fallback when n
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--image-stub--color` | Icon and border color | `var(--sc-kit--color--bg--images)` |
+| `--sc-kit--image-stub--color` | Icon color | `var(--sc-kit--color--text--on-accent)` |
 -->
 
 <style>.image-stub {
-  --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-kit--color--bg--images));
+  --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-kit--color--text--on-accent));
   width: 100%;
   height: 100%;
   z-index: 2;
@@ -25,6 +25,4 @@ A placeholder image stub showing a generic image icon, used as a fallback when n
   justify-content: center;
   align-items: center;
   color: var(--_image-stub--color);
-  border: 1px solid var(--_image-stub--color);
-  border-radius: 0.25rem;
 }</style>

package/dist/ui/image/cmp.image-stub.svelte.d.ts

@@ -17,7 +17,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--image-stub--color` | Icon and border color | `var(--sc-kit--color--bg--images)` |
+ * | `--sc-kit--image-stub--color` | Icon color | `var(--sc-kit--color--text--on-accent)` |
  */
 declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;

package/dist/ui/input/cmp.input.svelte

@@ -41,6 +41,7 @@ const handleClear = () => {
     handleChange();
     inputEl.focus();
 };
+export const clear = () => handleClear();
 const handlePasswordToggle = () => {
     passwordRevealed = !passwordRevealed;
     inputEl?.focus();
@@ -109,7 +110,8 @@ const focusInput = () => inputEl?.focus();
     oninput={handleInput}
     onchange={handleChange}
     onblur={handleBlur}
-    onfocus={() => on?.focus?.()} />
+    onfocus={() => on?.focus?.()}
+    onkeydown={(event) => on?.keydown?.(event)} />
 
   {#if suffix}
     <span class="input__suffix">{@render suffix()}</span>
@@ -141,7 +143,7 @@ Text input field with leading/trailing icon slots, clear button, emoji picker, a
 focus underline. Discriminated `type` selects native input mode (`text` / `password` / `email` /
 `search` / `url` / `tel`). Set `inert` for display mode (no focus, no animations), `readonly`
 for non-editable but selectable, `error` for the visual + a11y error state. Imperative
-`focus()` / `select()` exposed via `bind:this`.
+`focus()` / `select()` / `clear()` exposed via `bind:this`.
 
 Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
 `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons

package/dist/ui/input/cmp.input.svelte.d.ts

@@ -4,7 +4,7 @@ import type { InputProps } from './types';
  * focus underline. Discriminated `type` selects native input mode (`text` / `password` / `email` /
  * `search` / `url` / `tel`). Set `inert` for display mode (no focus, no animations), `readonly`
  * for non-editable but selectable, `error` for the visual + a11y error state. Imperative
- * `focus()` / `select()` exposed via `bind:this`.
+ * `focus()` / `select()` / `clear()` exposed via `bind:this`.
  *
  * Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
  * `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
@@ -33,6 +33,7 @@ import type { InputProps } from './types';
 declare const Cmp: import("svelte").Component<InputProps, {
     /** Imperative API exposed via `bind:this` on `<Input>`. */ focus: () => void;
     select: () => void;
+    clear: () => void;
 }, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -1,2 +1,8 @@
 export { default as Input } from './cmp.input.svelte';
 export type { InputForwardedProps, InputProps, InputSize, InputType } from './types';
+/** Imperative API exposed via `bind:this={instance}` on `<Input>`. */
+export type InputInstance = {
+    focus: () => void;
+    select: () => void;
+    clear: () => void;
+};

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

@@ -44,6 +44,7 @@ export type InputProps = {
         }) => void;
         blur?: () => void;
         focus?: () => void;
+        keydown?: (event: KeyboardEvent) => void;
     };
     /** Primary icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
     icon?: IconProp;

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte

@@ -2,7 +2,8 @@
 import { CONTROL_ICON_SIZE, scaleUp } from '../icon';
 import { Input } from '../input';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
-const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, on } = $props();
+const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, shortcut = false, clearOnEscape = false, on } = $props();
+let inputRef = $state.raw(undefined);
 let focused = $state(false);
 const expanded = $derived(focused || !!value);
 const collapsedSize = $derived(collapsedIconSize ?? scaleUp(CONTROL_ICON_SIZE[size]));
@@ -10,24 +11,46 @@ const onInput = (v) => {
     on?.input?.(v);
 };
 const onInputDebounced = $derived(debounce > 0 ? Utils.debounce(onInput, debounce) : onInput);
+$effect(() => {
+    if (!shortcut) {
+        return;
+    }
+    const onShortcut = (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+            event.preventDefault();
+            inputRef?.focus();
+            inputRef?.select();
+        }
+    };
+    document.addEventListener('keydown', onShortcut);
+    return () => document.removeEventListener('keydown', onShortcut);
+});
+const handleKeydown = (event) => {
+    if (clearOnEscape && event.key === 'Escape' && !!value) {
+        event.stopPropagation();
+        inputRef?.clear();
+    }
+};
 </script>
 
 <div class="toolbar-search-input toolbar-search-input--{size}" class:toolbar-search-input--expanded={expanded}>
   <Input
+    bind:this={inputRef}
     value={value}
     size={size}
     placeholder={placeholder}
     icon={{ src: IconSearch, color: expanded ? undefined : (collapsedIconColor ?? 'accent'), size: expanded ? undefined : collapsedSize }}
     clearable
     borderless={!expanded}
-    on={{ input: onInputDebounced, change: onInputDebounced, focus: () => (focused = true), blur: () => (focused = false) }} />
+    on={{ input: onInputDebounced, change: onInputDebounced, focus: () => (focused = true), blur: () => (focused = false), keydown: handleKeydown }} />
 </div>
 
 <!--
 @component
 A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
 when empty + unfocused; expands to the full input width when focused or when a value is present.
-Shares Input's size preset so it lines up with other field-shaped controls.
+Shares Input's size preset so it lines up with other field-shaped controls. Opt into `shortcut`
+for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
 
 ### CSS Custom Properties
 | Property | Description | Default |

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte.d.ts

@@ -9,6 +9,10 @@ type Props = {
     size?: 'sm' | 'md' | 'lg';
     /** Debounce delay in ms @default 0 */
     debounce?: number;
+    /** Bind Cmd/Ctrl+K document-wide to focus the input and select its text. Enable on a single instance per view. @default false */
+    shortcut?: boolean;
+    /** Clear the value on Escape while focused (swallowing the keystroke); an already-empty input lets Escape bubble. @default false */
+    clearOnEscape?: boolean;
     on?: {
         input?: (value: string) => void;
     };
@@ -16,7 +20,8 @@ type Props = {
 /**
  * A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
  * when empty + unfocused; expands to the full input width when focused or when a value is present.
- * Shares Input's size preset so it lines up with other field-shaped controls.
+ * Shares Input's size preset so it lines up with other field-shaped controls. Opt into `shortcut`
+ * for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

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

@@ -7,9 +7,8 @@ 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 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), []));
+// Include flat roots, not only groups — else a childless root can't be picked as a create-parent.
+const parentSource = $derived(options.flatMap((item) => (item.value !== undefined ? [{ label: item.label, value: item.value }] : [])));
 const resolvedValue = $derived.by(() => {
     const out = [];
     for (const v of value) {

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

@@ -57,7 +57,7 @@ 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 the current `options` contain groups, the "Create …" UI expands into a section with a parent picker. */
+        /** 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;
         /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
         icon?: IconProp;
@@ -80,7 +80,7 @@ declare function $$render<T>(): {
         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. */
+            /** Fires when the user confirms the create-with-parent section. `parentValue` is the chosen parent root's `value` from the parent dropdown — undefined when no parent was selected. Return a Promise to keep the spinner up. */
             create?: (payload: {
                 query: string;
                 parentValue?: T;

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

@@ -103,8 +103,8 @@ const isExternalChips = $derived(chipMode === 'external');
 const inlineVisible = $derived(isExternalChips || selectionSnippet ? [] : value.slice(0, maxVisible));
 const inlineOverflow = $derived(isExternalChips || selectionSnippet ? 0 : Math.max(0, value.length - maxVisible));
 // Create-with-parent section: shown when canCreate is gated true by core AND the proxy
-// passed a non-empty `parentSource`. The source is the FULL unfiltered group list so the
-// parent picker is stable regardless of which groups currently survive the listbox filter.
+// passed a non-empty `parentSource`. The source is the FULL unfiltered parent-candidate list
+// so the parent picker is stable regardless of which roots currently survive the listbox filter.
 const parentSourceList = $derived(parentSource ?? []);
 const showCreateSection = $derived(core.canShowCreate && parentSourceList.length > 0);
 let selectedParent = $state.raw(null);

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

@@ -156,7 +156,7 @@ 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 options contain groups, a create-with-parent section replaces the simple "Create …" row. */
+    /** 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;
     /** Where chips render. `'external'` puts them in a row above the trigger and unlocks `reorderable`. @default 'inline' */
     chipMode?: 'inline' | 'external';
@@ -190,8 +190,8 @@ export type MultiselectBaseProps<T> = {
     }]>;
     /**
      * Enables the create-with-parent section (shown above the listbox when `canCreate` gates true).
-     * Receives the FULL group list independent of current filter — so the parent picker offers every
-     * group regardless of what's currently visible in the listbox. When undefined or empty, a
+     * 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.
      */
     parentSource?: SelectOption<T>[];
@@ -204,7 +204,7 @@ export type MultiselectBaseProps<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 …". When `parentValue` is present, the user picked it via the create-with-parent section (shown when options contain groups). Return a Promise to keep the spinner up until the consumer finishes. */
+        /** Fires when the user activates "Create …". When `parentValue` is present, the user picked it via the create-with-parent section. Return a Promise to keep the spinner up until the consumer finishes. */
         create?: (payload: {
             query: string;
             parentValue?: T;

package/package.json

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