@rokkit/ui 1.4.2 → 1.6.0

package/dist/components/Select.svelte

@@ -43,12 +43,7 @@
 	import { Navigator, Trigger } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
-
-	interface SelectIcons {
-		opened?: string
-		closed?: string
-		checked?: string
-	}
+	import type { SelectProps, SelectStateIcons } from '../types/select.js'
 
 	let {
 		items = [],
@@ -63,28 +58,18 @@
 		align = 'start',
 		direction = 'down',
 		maxRows = 8,
-		icons: userIcons = {} as SelectIcons,
+		icons: userIcons = {} as SelectStateIcons,
 		onchange,
 		class: className = '',
-		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		selected?: unknown
-		placeholder?: string
-		size?: string
-		disabled?: boolean
-		filterable?: boolean
-		filterPlaceholder?: string
-		align?: 'start' | 'end'
-		direction?: 'up' | 'down'
-		maxRows?: number
-		icons?: SelectIcons
-		onchange?: (value: unknown, item: unknown) => void
-		class?: string
-		[key: string]: unknown
-	} = $props()
+		itemContent,
+		groupContent,
+		snippets = {}
+	}: SelectProps = $props()
+
+	// What resolveSnippet searches: the per-item named snippets plus the two
+	// defaults it falls back to. Named snippets arrive as a declared `snippets`
+	// prop now, so a misspelled prop name is a type error rather than a no-op.
+	const snippetBag = $derived({ ...snippets, itemContent, groupContent })
 
 	const icons = $derived({
 		...DEFAULT_STATE_ICONS.selector,
@@ -464,7 +449,7 @@
 				{@const proxy = node.proxy}
 				{@const sel = !node.hasChildren && proxy.value === value}
 				{@const content = resolveSnippet(
-					snippets as Record<string, unknown>,
+					snippetBag,
 					proxy,
 					node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
 				)}

package/dist/components/Select.svelte.d.ts

@@ -1,26 +1,4 @@
-interface SelectIcons {
-    opened?: string;
-    closed?: string;
-    checked?: string;
-}
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    selected?: unknown;
-    placeholder?: string;
-    size?: string;
-    disabled?: boolean;
-    filterable?: boolean;
-    filterPlaceholder?: string;
-    align?: 'start' | 'end';
-    direction?: 'up' | 'down';
-    maxRows?: number;
-    icons?: SelectIcons;
-    onchange?: (value: unknown, item: unknown) => void;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "selected">;
+import type { SelectProps } from '../types/select.js';
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "selected">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/Swatch.svelte

@@ -1,34 +1,9 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
 	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree } from '@rokkit/states'
 	import { Navigator } from '@rokkit/actions'
+	import type { SwatchProps } from '../types/swatch.js'
 
-	interface SwatchProps {
-		/** Color options — primitives (hex/name strings) or objects with mapped fields */
-		options?: Array<string | number | Record<string, unknown>>
-		/** Field mapping for object options (value, fill, stroke, …) */
-		fields?: Record<string, string>
-		/** Selected value (bindable). Array when `multiple`. */
-		value?: unknown
-		/** Allow multiple selection */
-		multiple?: boolean
-		/** Swatch shape */
-		shape?: 'square' | 'circle'
-		/** Size variant */
-		size?: 'sm' | 'md' | 'lg'
-		/** Disable the whole group */
-		disabled?: boolean
-		/** Accessible group label */
-		label?: string
-		/** Additional CSS classes */
-		class?: string
-		/** Called when selection changes */
-		onchange?: (value: unknown, item: unknown) => void
-		/** Custom snippet for rendering a swatch (receives proxy + selected) */
-		item?: Snippet<[ProxyItem, boolean]>
-		[key: string]: unknown
-	}
 
 	let {
 		options = [],
@@ -42,7 +17,6 @@
 		class: className = '',
 		onchange,
 		item: itemSnippet,
-		..._rest
 	}: SwatchProps = $props()
 
 	const proxyTree = $derived(new ProxyTree(options, userFields))

package/dist/components/Swatch.svelte.d.ts

@@ -1,30 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { ProxyItem } from '@rokkit/states';
-interface SwatchProps {
-    /** Color options — primitives (hex/name strings) or objects with mapped fields */
-    options?: Array<string | number | Record<string, unknown>>;
-    /** Field mapping for object options (value, fill, stroke, …) */
-    fields?: Record<string, string>;
-    /** Selected value (bindable). Array when `multiple`. */
-    value?: unknown;
-    /** Allow multiple selection */
-    multiple?: boolean;
-    /** Swatch shape */
-    shape?: 'square' | 'circle';
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Disable the whole group */
-    disabled?: boolean;
-    /** Accessible group label */
-    label?: string;
-    /** Additional CSS classes */
-    class?: string;
-    /** Called when selection changes */
-    onchange?: (value: unknown, item: unknown) => void;
-    /** Custom snippet for rendering a swatch (receives proxy + selected) */
-    item?: Snippet<[ProxyItem, boolean]>;
-    [key: string]: unknown;
-}
+import type { SwatchProps } from '../types/swatch.js';
 declare const Swatch: import("svelte").Component<SwatchProps, {}, "value">;
 type Swatch = ReturnType<typeof Swatch>;
 export default Swatch;

package/dist/components/Table.svelte

@@ -23,7 +23,8 @@
 		header: headerSnippet,
 		row: rowSnippet,
 		cell: cellSnippet,
-		empty: emptySnippet
+		empty: emptySnippet,
+		snippets = {}
 	}: TableProps = $props()
 
 	const icons = $derived<TableSortIcons>({ ...defaultTableSortIcons, ...userIcons })
@@ -172,9 +173,15 @@
 							tabindex={isFocused ? 0 : -1}
 						>
 							{#each proxyTable.columns as column (column.name)}
-								{#if cellSnippet}
+								<!-- A column that names a snippet is more specific than the blanket
+									 `cell`, so it wins — the same precedence per-item named snippets
+									 have over `itemContent` elsewhere. Naming one nobody passed falls
+									 through to the default renderer rather than blanking the cell. -->
+								{@const namedCell = column.snippet ? snippets[column.snippet] : undefined}
+								{@const renderCell = namedCell ?? cellSnippet}
+								{#if renderCell}
 									<td data-table-cell data-column={column.name} data-label={column.label ?? column.name} style:text-align={column.align}>
-										{@render cellSnippet(getCellValue(row, column), column, row)}
+										{@render renderCell(getCellValue(row, column), column, row)}
 									</td>
 								{:else}
 									{@const cellIcon = getCellIcon(row, column)}

package/dist/components/Tabs.svelte

@@ -22,6 +22,8 @@
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
 	import { Navigator } from '@rokkit/actions'
 	import { resolveSnippet, ITEM_SNIPPET, DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import type { Snippet } from 'svelte'
+	import type { SelectableItemSnippet, ItemSnippet } from '../types/snippets.js'
 
 	let {
 		options = [],
@@ -40,8 +42,24 @@
 		onselect,
 		onadd,
 		onremove,
-		...snippets
-	}: TabsProps & { labels?: Record<string, string>; [key: string]: unknown } = $props()
+		itemContent,
+		empty,
+		tabPanel,
+		snippets = {}
+	}: TabsProps & {
+		labels?: Record<string, string>
+		// Tabs renders its content as content(proxy, selected).
+		itemContent?: SelectableItemSnippet
+		/** Shown when there are no tabs. */
+		empty?: Snippet<[]>
+		/** Panel body for the active tab. */
+		tabPanel?: ItemSnippet
+		/** Per-item named snippets, keyed by the item's `snippet` field. */
+		snippets?: Record<string, SelectableItemSnippet>
+	} = $props()
+
+	// See the note in List.svelte — named snippets are a declared prop now.
+	const snippetBag = $derived({ ...snippets, itemContent })
 
 	const labels = $derived({ ...messages.tabs, ...userLabels })
 
@@ -135,8 +153,8 @@
 >
 	{#if options.length === 0}
 		<div data-tabs-empty>
-			{#if snippets.empty}
-				{@render snippets.empty()}
+			{#if empty}
+				{@render empty()}
 			{:else}
 				{@render defaultEmpty()}
 			{/if}
@@ -146,7 +164,7 @@
 			{#each wrapper.flatView as node (node.key)}
 				{@const proxy = node.proxy}
 				{@const sel = proxy.value === value}
-				{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
+				{@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
 
 				<button
 					type="button"
@@ -184,8 +202,8 @@
 				id="tab-panel-{node.key}"
 				aria-labelledby="tab-{node.key}"
 			>
-				{#if snippets.tabPanel}
-					{@render snippets.tabPanel(proxy)}
+				{#if tabPanel}
+					{@render tabPanel(proxy)}
 				{:else}
 					{@render defaultPanel(proxy)}
 				{/if}

package/dist/components/Tabs.svelte.d.ts

@@ -17,9 +17,17 @@
      * receives data-panel-active. Navigator ignores panels (no data-path on them).
      */
 import type { TabsProps } from '../types/tabs.js';
+import type { Snippet } from 'svelte';
+import type { SelectableItemSnippet, ItemSnippet } from '../types/snippets.js';
 type $$ComponentProps = TabsProps & {
     labels?: Record<string, string>;
-    [key: string]: unknown;
+    itemContent?: SelectableItemSnippet;
+    /** Shown when there are no tabs. */
+    empty?: Snippet<[]>;
+    /** Panel body for the active tab. */
+    tabPanel?: ItemSnippet;
+    /** Per-item named snippets, keyed by the item's `snippet` field. */
+    snippets?: Record<string, SelectableItemSnippet>;
 };
 declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/components/Toggle.svelte

@@ -4,6 +4,7 @@
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
 	import { Navigator } from '@rokkit/actions'
 	import { resolveSnippet } from '@rokkit/core'
+	import type { SelectableItemSnippet } from '../types/snippets.js'
 
 	let {
 		variant = 'group',
@@ -16,8 +17,17 @@
 		disabled = false,
 		label = messages.toggle.label,
 		class: className = '',
-		...snippets
-	}: ToggleProps & { [key: string]: unknown } = $props()
+		itemContent,
+		snippets = {}
+	}: ToggleProps & {
+		// Toggle renders its content as content(proxy, selected).
+		itemContent?: SelectableItemSnippet
+		/** Per-item named snippets, keyed by the item's `snippet` field. */
+		snippets?: Record<string, SelectableItemSnippet>
+	} = $props()
+
+	// See the note in List.svelte — named snippets are a declared prop now.
+	const snippetBag = $derived({ ...snippets, itemContent })
 
 	// ─── Wrapper ──────────────────────────────────────────────────────────────
 
@@ -71,7 +81,7 @@
 
 {#if variant === 'button'}
 	{@const proxy = nextNode?.proxy}
-	{@const content = proxy ? resolveSnippet(snippets, proxy) : null}
+	{@const content = proxy ? resolveSnippet(snippetBag, proxy) : null}
 	<button
 		type="button"
 		data-toggle
@@ -114,7 +124,7 @@
 		{#each wrapper.flatView as node (node.key)}
 			{@const proxy = node.proxy}
 			{@const sel = proxy.value === value}
-			{@const content = resolveSnippet(snippets, proxy)}
+			{@const content = resolveSnippet(snippetBag, proxy)}
 			<button
 				type="button"
 				data-toggle-option

package/dist/components/Toggle.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { ToggleProps } from '../types/toggle.js';
+import type { SelectableItemSnippet } from '../types/snippets.js';
 type $$ComponentProps = ToggleProps & {
-    [key: string]: unknown;
+    itemContent?: SelectableItemSnippet;
+    /** Per-item named snippets, keyed by the item's `snippet` field. */
+    snippets?: Record<string, SelectableItemSnippet>;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/components/Toolbar.svelte

@@ -27,8 +27,8 @@
 		center,
 		end,
 		children,
-		...snippets
-	}: ToolbarProps & { label?: string; [key: string]: ToolbarItemSnippet | unknown } = $props()
+		snippets = {}
+	}: ToolbarProps & { label?: string } = $props()
 
 	/**
 	 * Create a ProxyItem for the given item

package/dist/components/Toolbar.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { ToolbarProps, ToolbarItemSnippet } from '../types/toolbar.js';
+import type { ToolbarProps } from '../types/toolbar.js';
 type $$ComponentProps = ToolbarProps & {
     label?: string;
-    [key: string]: ToolbarItemSnippet | unknown;
 };
 declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Toolbar = ReturnType<typeof Toolbar>;

package/dist/components/Tree.svelte

@@ -17,6 +17,7 @@
 	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
 	import Connector from './Connector.svelte'
+	import type { TreeProps } from '../types/tree.js'
 
 	let {
 		items = [],
@@ -28,19 +29,15 @@
 		icons: userIcons = {},
 		onselect,
 		class: className = '',
-		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		size?: string
-		lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted'
-		labels?: Record<string, string>
-		icons?: { opened?: string; closed?: string }
-		onselect?: (value: unknown, proxy: ProxyItem) => void
-		class?: string
-		[key: string]: unknown
-	} = $props()
+		itemContent,
+		groupContent,
+		snippets = {}
+	}: TreeProps = $props()
+
+	// What resolveSnippet searches: the per-item named snippets plus the two
+	// defaults it falls back to. Named snippets arrive as a declared `snippets`
+	// prop now, so a misspelled prop name is a type error rather than a no-op.
+	const snippetBag = $derived({ ...snippets, itemContent, groupContent })
 
 	const labels = $derived({ ...messages.tree, ...userLabels })
 
@@ -91,7 +88,7 @@
 	{#each wrapper.flatView as node (node.key)}
 		{@const proxy = node.proxy}
 		{@const isActive = proxy.value === value}
-		{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
+		{@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
 
 		<div
 			data-tree-node

package/dist/components/Tree.svelte.d.ts

@@ -1,31 +1,4 @@
-/**
-     * Tree — Hierarchical data navigation with tree lines and keyboard navigation.
-     *
-     * Architecture:
-     *   LazyWrapper  — owns focusedKey $state + flatView $derived (with lineTypes)
-     *   Navigator    — attaches DOM event handlers, calls wrapper[action](path)
-     *   flatView     — single flat {#each}, connectors rendered from node.lineTypes
-     *
-     * Default item content: icon + label + badge + shortcut (no avatar/description).
-     * Parent nodes hide their icon by default (showIcon=false) so only the
-     * expand/collapse chevron + label are shown, aligning with leaf icon + label.
-     */
-import type { ProxyItem } from '@rokkit/states';
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    size?: string;
-    lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
-    labels?: Record<string, string>;
-    icons?: {
-        opened?: string;
-        closed?: string;
-    };
-    onselect?: (value: unknown, proxy: ProxyItem) => void;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const Tree: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { TreeProps } from '../types/tree.js';
+declare const Tree: import("svelte").Component<TreeProps, {}, "value">;
 type Tree = ReturnType<typeof Tree>;
 export default Tree;

package/dist/components/UploadProgress.svelte

@@ -15,7 +15,6 @@
 	import type { ProxyItem } from '@rokkit/states'
 	import type { UploadProgressProps, UploadItem } from '../types/upload-progress.js'
 	import { messages } from '@rokkit/states'
-	import { ITEM_SNIPPET } from '@rokkit/core'
 	import List from './List.svelte'
 	import Grid from './Grid.svelte'
 	import UploadFileStatus from './UploadFileStatus.svelte'
@@ -33,8 +32,8 @@
 		onclear,
 		labels: userLabels = {} as Record<string, string>,
 		class: className = '',
-		...snippets
-	}: UploadProgressProps & { [key: string]: unknown } = $props()
+		itemContent
+	}: UploadProgressProps = $props()
 
 	// ─── Labels ──────────────────────────────────────────────────────────────
 
@@ -71,7 +70,7 @@
 
 	// ─── Snippet resolution ──────────────────────────────────────────────────
 
-	let itemSnippet = $derived(snippets[ITEM_SNIPPET] as typeof defaultItemContent | undefined)
+	let itemSnippet = $derived(itemContent as typeof defaultItemContent | undefined)
 
 	// ─── Action callbacks (unwrap proxy → raw item) ──────────────────────────
 

package/dist/components/UploadProgress.svelte.d.ts

@@ -1,7 +1,4 @@
 import type { UploadProgressProps } from '../types/upload-progress.js';
-type $$ComponentProps = UploadProgressProps & {
-    [key: string]: unknown;
-};
-declare const UploadProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const UploadProgress: import("svelte").Component<UploadProgressProps, {}, "">;
 type UploadProgress = ReturnType<typeof UploadProgress>;
 export default UploadProgress;

package/dist/components/UploadTarget.svelte

@@ -12,7 +12,6 @@
 	 *   data-dragging       — present when files dragged over
 	 *   data-disabled       — when disabled
 	 */
-	import type { Snippet } from 'svelte'
 	import type { UploadTargetProps } from '../types/upload-target.js'
 	import { messages } from '@rokkit/states'
 	import { matchesAccept } from '../utils/upload.js'
@@ -27,10 +26,9 @@
 		onfiles,
 		onerror,
 		class: className = '',
-		...snippets
-	}: UploadTargetProps & { [key: string]: unknown } = $props()
+		content
+	}: UploadTargetProps = $props()
 
-	const content = $derived(snippets.content as Snippet<[dragging: boolean]> | undefined)
 
 	const resolvedLabels = $derived({
 		...messages.uploadTarget,

package/dist/components/UploadTarget.svelte.d.ts

@@ -1,7 +1,17 @@
+/**
+     * UploadTarget — Drop zone with file validation.
+     *
+     * Accepts drag-and-drop or click-to-browse. Validates files against
+     * accept (MIME/extension) and maxSize constraints via upload-utils.
+     *
+     * Data attributes:
+     *   data-upload-target  — root container / drop zone
+     *   data-upload-icon    — upload icon
+     *   data-upload-button  — browse button
+     *   data-dragging       — present when files dragged over
+     *   data-disabled       — when disabled
+     */
 import type { UploadTargetProps } from '../types/upload-target.js';
-type $$ComponentProps = UploadTargetProps & {
-    [key: string]: unknown;
-};
-declare const UploadTarget: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const UploadTarget: import("svelte").Component<UploadTargetProps, {}, "">;
 type UploadTarget = ReturnType<typeof UploadTarget>;
 export default UploadTarget;

package/dist/types/chat.d.ts

@@ -1,6 +1,16 @@
 import type { Snippet } from 'svelte';
 export type ChatRole = 'user' | 'assistant' | 'system';
 export type ChatStatus = 'streaming' | 'error' | 'done';
+/**
+ * A single message in a chat transcript.
+ *
+ * Also exported as `ChatMessageData`, which is the name consumers should import.
+ * The package entry exports a *component* called `ChatMessage` as well, and
+ * Svelte's generated component types contribute a type of that name — which
+ * shadows this interface, making `ChatMessage<T>` unreachable from outside the
+ * package. The alias is the reachable spelling; renaming either the component or
+ * this interface is a breaking change, so it waits for a major.
+ */
 export interface ChatMessage<T = unknown> {
     id: string;
     role: ChatRole;
@@ -12,6 +22,11 @@ export interface ChatMessage<T = unknown> {
     /** Arbitrary payload (parts/blocks/chart spec/form schema) the consumer's `message` snippet reads. */
     data?: T;
 }
+/**
+ * Reachable alias for {@link ChatMessage} — see the note on that interface for
+ * why the bare name does not survive the package boundary.
+ */
+export type ChatMessageData<T = unknown> = ChatMessage<T>;
 export interface ConversationSummary {
     id: string;
     title: string;

package/dist/types/command-palette.d.ts

@@ -0,0 +1,18 @@
+/**
+ * CommandPalette Component Types
+ *
+ * Overlay command launcher. It owns its own command source and filtering, so
+ * the public surface is just visibility and the search affordance's label.
+ */
+/**
+ * Props for the CommandPalette component.
+ *
+ * `CommandPalette.svelte` annotates its own `$props()` with this interface, so
+ * the two cannot drift.
+ */
+export interface CommandPaletteProps {
+    /** Whether the palette is open (bindable) */
+    open?: boolean;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+}

package/dist/types/command-palette.js

@@ -0,0 +1,7 @@
+/**
+ * CommandPalette Component Types
+ *
+ * Overlay command launcher. It owns its own command source and filtering, so
+ * the public surface is just visibility and the search affordance's label.
+ */
+export {};

package/dist/types/floating-action.d.ts

@@ -85,5 +85,10 @@ export interface FloatingActionProps {
     class?: string;
     /** Custom snippet for rendering action items */
     item?: FloatingActionItemSnippet;
+    /**
+     * Per-item named snippets, selected via the item's `snippet` field. A declared
+     * prop rather than an index signature — see types/snippets.ts for why.
+     */
+    snippets?: Record<string, FloatingActionItemSnippet>;
 }
 export { getSnippet } from './menu.js';

package/dist/types/grid.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Grid Component Types
+ *
+ * Data-driven grid of selectable cards. Same field-mapping and snippet
+ * contract as List — items are wrapped in a `ProxyItem` and rendered through
+ * `itemContent`, with the grid supplying only the track sizing.
+ */
+import type { ProxyItem } from '@rokkit/states';
+import type { ItemSnippets } from './snippets.js';
+/**
+ * Props for the Grid component.
+ *
+ * `Grid.svelte` annotates its own `$props()` with this interface, so the two
+ * cannot drift.
+ */
+export interface GridProps extends ItemSnippets {
+    /** Array of items to render as cells */
+    items?: unknown[];
+    /** Field mapping configuration */
+    fields?: Record<string, string>;
+    /** Selected value (bindable) */
+    value?: unknown;
+    /** Size variant */
+    size?: string;
+    /** Whether the entire grid is disabled */
+    disabled?: boolean;
+    /** Minimum track width, fed to `repeat(auto-fill, minmax(…))` */
+    minSize?: string;
+    /** Gap between cells */
+    gap?: string;
+    /** Accessible name for the grid */
+    label?: string;
+    /** Called when a cell is selected, with the item's `ProxyItem` */
+    onselect?: (value: unknown, proxy: ProxyItem) => void;
+    /** Additional CSS classes */
+    class?: string;
+}

package/dist/types/grid.js

@@ -0,0 +1,8 @@
+/**
+ * Grid Component Types
+ *
+ * Data-driven grid of selectable cards. Same field-mapping and snippet
+ * contract as List — items are wrapped in a `ProxyItem` and rendered through
+ * `itemContent`, with the grid supplying only the track sizing.
+ */
+export {};

package/dist/types/index.d.ts

@@ -46,3 +46,7 @@ export * from './stack.js';
 export * from './stepper.js';
 export * from './tilt.js';
 export * from './chat.js';
+export * from './snippets.js';
+export * from './grid.js';
+export * from './command-palette.js';
+export * from './swatch.js';