@streamscloud/kit 0.15.0 → 0.15.1

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/package.json

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