@streamscloud/kit 0.16.0 → 0.16.2

package/dist/core/repository/map-container.svelte.d.ts

@@ -2,6 +2,7 @@ import type { WithId } from './types';
 export declare class MapContainer<T extends WithId> {
     private _container;
     get items(): T[];
+    has(id: T['id']): boolean;
     add(item: T): void;
     remove(item: T): void;
     set(items: T[]): void;

package/dist/core/repository/map-container.svelte.js

@@ -4,6 +4,9 @@ export class MapContainer {
     get items() {
         return Array.from(this._container.values());
     }
+    has(id) {
+        return this._container.has(id);
+    }
     add(item) {
         this._container.set(item.id, item);
     }

package/dist/core/repository/repository.svelte.js

@@ -16,6 +16,9 @@ class RepositoryInstance {
     get limit() {
         return this._limit;
     }
+    has(id) {
+        return this._container.has(id);
+    }
     add(...items) {
         const itemsToNotify = [];
         for (const item of items) {

package/dist/core/repository/types.d.ts

@@ -4,6 +4,8 @@ export type WithId = {
 export interface Repository<T extends WithId> {
     items: T[];
     limit?: number;
+    /** O(1) membership check by id, backed by the keyed container. */
+    has(id: T['id']): boolean;
     add(...item: T[]): void;
     remove(...item: T[]): void;
     set(...item: T[]): void;

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

@@ -2,10 +2,10 @@
 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, shortcut = false, clearOnEscape = false, on } = $props();
+const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, collapsible = true, shortcut = false, clearOnEscape = false, on } = $props();
 let inputRef = $state.raw(undefined);
 let focused = $state(false);
-const expanded = $derived(focused || !!value);
+const expanded = $derived(!collapsible || focused || !!value);
 const collapsedSize = $derived(collapsedIconSize ?? scaleUp(CONTROL_ICON_SIZE[size]));
 const onInput = (v) => {
     on?.input?.(v);
@@ -47,10 +47,11 @@ const handleKeydown = (event) => {
 
 <!--
 @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. Opt into `shortcut`
-for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
+A search input for toolbars. By default collapses to an icon-only square at the chosen field height
+when empty + unfocused, and expands to the full input width when focused or when a value is present;
+set `collapsible={false}` to keep it always expanded. 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

@@ -7,6 +7,8 @@ type Props = {
     placeholder?: string;
     /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
     size?: 'sm' | 'md' | 'lg';
+    /** Collapse to an icon-only square when empty + unfocused. Set false to keep the input always expanded. @default true */
+    collapsible?: boolean;
     /** 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 */
@@ -18,10 +20,11 @@ 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. Opt into `shortcut`
- * for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
+ * A search input for toolbars. By default collapses to an icon-only square at the chosen field height
+ * when empty + unfocused, and expands to the full input width when focused or when a value is present;
+ * set `collapsible={false}` to keep it always expanded. 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/table/cmp.table.svelte

@@ -238,7 +238,7 @@ const getEditorColumnOrDefault = (column, editMode) => {
           {/snippet}
           {#each model.items as item, itemIndex (item)}
             {@const editMode = model.editingItem?.id === item.id}
-            {@const isSelected = !!model.selection.items.find((x) => x.id === item.id)}
+            {@const isSelected = model.selection.has(item.id)}
             {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
             {@const flushBottom = model.styles?.variant === 'card' && itemIndex === model.items.length - 1}
             {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}

package/dist/ui/table/table-cells/table-checkbox-cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends {id: string}">import { Checkbox } from '../../checkbox';
 let { item, selection } = $props();
-const selected = $derived(!!selection.items.find((x) => x.id === item.id));
+const selected = $derived(selection.has(item.id));
 const disabled = $derived(!selected && !!selection.limit && selection.items.length >= selection.limit);
 const toggle = () => {
     if (selected) {

package/dist/ui/table/table-headers/table-checkbox-header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends {id: string}">import { Checkbox } from '../../checkbox';
 import TableHeader from './table-header.svelte';
 let { column } = $props();
-const allSelected = $derived(!!column.data.items.length && column.data.items.every((x) => !!column.selection.items.find((i) => i.id === x.id)));
+const allSelected = $derived(!!column.data.items.length && column.data.items.every((x) => column.selection.has(x.id)));
 const canSelectAll = $derived(column.data.items.length > 0 && (!column.selection.limit || column.data.items.length <= column.selection.limit));
 const toggleSelectedAll = () => {
     if (allSelected) {

package/package.json

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