@rokkit/ui 1.5.0 → 1.6.0

package/dist/components/FloatingAction.svelte

@@ -28,8 +28,8 @@
 		onclose,
 		class: className = '',
 		item: itemSnippet,
-		...snippets
-	}: FloatingActionProps & { [key: string]: FloatingActionItemSnippet | unknown } = $props()
+		snippets = {}
+	}: FloatingActionProps = $props()
 
 	const icons = $derived({
 		add: DEFAULT_STATE_ICONS.action.add,

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

@@ -1,7 +1,4 @@
-import type { FloatingActionProps, FloatingActionItemSnippet } from '../types/floating-action.js';
-type $$ComponentProps = FloatingActionProps & {
-    [key: string]: FloatingActionItemSnippet | unknown;
-};
-declare const FloatingAction: import("svelte").Component<$$ComponentProps, {}, "open">;
+import type { FloatingActionProps } from '../types/floating-action.js';
+declare const FloatingAction: import("svelte").Component<FloatingActionProps, {}, "open">;
 type FloatingAction = ReturnType<typeof FloatingAction>;
 export default FloatingAction;

package/dist/components/Grid.svelte

@@ -45,9 +45,16 @@
 		label = messages.grid.label,
 		onselect,
 		class: className = '',
-		...snippets
+		itemContent,
+		groupContent,
+		snippets = {}
 	}: GridProps = $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 })
+
 	// ─── Wrapper ──────────────────────────────────────────────────────────────
 
 	const proxyTree = $derived(new ProxyTree(items, fields))
@@ -95,7 +102,7 @@
 	{#each wrapper.flatView as node (node.key)}
 		{@const proxy = node.proxy}
 		{@const sel = proxy.value === value}
-		{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, ITEM_SNIPPET)}
+		{@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
 		<button
 			type="button"
 			data-grid-item

package/dist/components/LazyTree.svelte

@@ -28,9 +28,16 @@
 		onlazyload,
 		hasMore = false,
 		class: className = '',
-		...snippets
+		itemContent,
+		groupContent,
+		snippets = {}
 	}: LazyTreeProps = $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 })
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
@@ -77,7 +84,7 @@
 		{@const proxy = node.proxy}
 		{@const isActive = proxy.value === value}
 		{@const isLoading = proxy.loading}
-		{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
+		{@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
 
 		<div
 			data-tree-node

package/dist/components/List.svelte

@@ -45,9 +45,16 @@
 		icons: userIcons = {} as ListStateIcons,
 		onselect,
 		class: className = '',
-		...snippets
+		itemContent,
+		groupContent,
+		snippets = {}
 	}: ListProps = $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.accordion, ...userIcons })
 
 	/**
@@ -168,7 +175,7 @@
 		{@const proxy = node.proxy}
 		{@const isActive = proxy.value === value}
 		{@const content = resolveSnippet(
-			snippets as Record<string, unknown>,
+			snippetBag,
 			proxy,
 			node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
 		)}

package/dist/components/Menu.svelte

@@ -64,9 +64,16 @@
 		icons: userIcons = {} as MenuStateIcons,
 		onselect,
 		class: className = '',
-		...snippets
+		itemContent,
+		groupContent,
+		snippets = {}
 	}: MenuProps = $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, ...userIcons })
 
 	// ─── Dropdown state ───────────────────────────────────────────────────────
@@ -198,7 +205,7 @@
 				{@const proxy = node.proxy}
 				{@const isActive = proxy.value === value}
 				{@const content = resolveSnippet(
-					snippets as Record<string, unknown>,
+					snippetBag,
 					proxy,
 					node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
 				)}

package/dist/components/MultiSelect.svelte

@@ -46,9 +46,16 @@
 		icons: userIcons = {} as SelectStateIcons,
 		onchange,
 		class: className = '',
-		...snippets
+		itemContent,
+		groupContent,
+		snippets = {}
 	}: MultiSelectProps = $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,
 		...DEFAULT_STATE_ICONS.checkbox,
@@ -296,7 +303,7 @@
 				{@const proxy = node.proxy}
 				{@const sel = !node.hasChildren && isItemSelected(proxy.value)}
 				{@const content = resolveSnippet(
-					snippets as Record<string, unknown>,
+					snippetBag,
 					proxy,
 					node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
 				)}

package/dist/components/Select.svelte

@@ -61,9 +61,16 @@
 		icons: userIcons = {} as SelectStateIcons,
 		onchange,
 		class: className = '',
-		...snippets
+		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,
 		...DEFAULT_STATE_ICONS.checkbox,
@@ -442,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/Swatch.svelte

@@ -17,7 +17,6 @@
 		class: className = '',
 		onchange,
 		item: itemSnippet,
-		..._rest
 	}: SwatchProps = $props()
 
 	const proxyTree = $derived(new ProxyTree(options, userFields))

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,7 +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 { SelectableItemSnippet } from '../types/snippets.js'
+	import type { Snippet } from 'svelte'
+	import type { SelectableItemSnippet, ItemSnippet } from '../types/snippets.js'
 
 	let {
 		options = [],
@@ -41,14 +42,25 @@
 		onselect,
 		onadd,
 		onremove,
-		...snippets
+		itemContent,
+		empty,
+		tabPanel,
+		snippets = {}
 	}: TabsProps & {
 		labels?: Record<string, string>
 		// Tabs renders its content as content(proxy, selected).
 		itemContent?: SelectableItemSnippet
-		[key: string]: unknown
+		/** 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 })
 
 	// ─── Wrapper ──────────────────────────────────────────────────────────────
@@ -141,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}
@@ -152,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"
@@ -190,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,11 +17,17 @@
      * receives data-panel-active. Navigator ignores panels (no data-path on them).
      */
 import type { TabsProps } from '../types/tabs.js';
-import type { SelectableItemSnippet } from '../types/snippets.js';
+import type { Snippet } from 'svelte';
+import type { SelectableItemSnippet, ItemSnippet } from '../types/snippets.js';
 type $$ComponentProps = TabsProps & {
     labels?: Record<string, string>;
     itemContent?: SelectableItemSnippet;
-    [key: string]: unknown;
+    /** 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

@@ -17,13 +17,18 @@
 		disabled = false,
 		label = messages.toggle.label,
 		class: className = '',
-		...snippets
+		itemContent,
+		snippets = {}
 	}: ToggleProps & {
 		// Toggle renders its content as content(proxy, selected).
 		itemContent?: SelectableItemSnippet
-		[key: string]: unknown
+		/** 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 ──────────────────────────────────────────────────────────────
 
 	const proxyTree = $derived(new ProxyTree(options, userFields))
@@ -76,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
@@ -119,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

@@ -2,7 +2,8 @@ import type { ToggleProps } from '../types/toggle.js';
 import type { SelectableItemSnippet } from '../types/snippets.js';
 type $$ComponentProps = ToggleProps & {
     itemContent?: SelectableItemSnippet;
-    [key: string]: unknown;
+    /** 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

@@ -29,9 +29,16 @@
 		icons: userIcons = {},
 		onselect,
 		class: className = '',
-		...snippets
+		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 })
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
@@ -81,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/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/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/snippets.d.ts

@@ -41,15 +41,24 @@ export type SelectableItemSnippet = Snippet<[ProxyItem, boolean]>;
  * let { items = [], ...snippets }: { items?: unknown[] } & ItemSnippets = $props()
  * ```
  */
-export interface ItemSnippets {
+export interface ItemSnippets<S = ItemSnippet> {
     /** Inner content for a leaf item. */
-    itemContent?: ItemSnippet;
+    itemContent?: S;
     /** Inner content for a group/parent item. Falls back to `itemContent`. */
-    groupContent?: ItemSnippet;
+    groupContent?: S;
     /**
-     * Per-item named snippets, selected via the item's `snippet` field. Kept as
-     * `unknown` rather than `ItemSnippet` because this signature also has to
-     * admit every other prop the component spreads through.
+     * Per-item named snippets, selected via the item's `snippet` field:
+     *
+     * ```svelte
+     * {#snippet pinned(proxy)}…{/snippet}
+     * <List items={[{ label: 'A', snippet: 'pinned' }]} snippets={{ pinned }} />
+     * ```
+     *
+     * A declared prop rather than an index signature. An index signature would
+     * have to admit every other prop too — TypeScript requires each declared
+     * member to conform to it — which forced it to `unknown` and silently
+     * accepted any misspelled prop name (`itemcontnt`, `onSelect`) on every
+     * component that used it.
      */
-    [key: string]: unknown;
+    snippets?: Record<string, S>;
 }

package/dist/types/swatch.d.ts

@@ -36,6 +36,4 @@ export interface SwatchProps {
     onchange?: (value: unknown, item: unknown) => void;
     /** Custom snippet for rendering a swatch (receives proxy + selected) */
     item?: Snippet<[ProxyItem, boolean]>;
-    /** Remaining props are spread through */
-    [key: string]: unknown;
 }

package/dist/types/table.d.ts

@@ -143,6 +143,11 @@ export interface TableProps {
     row?: TableRowSnippet;
     /** Custom cell snippet */
     cell?: TableCellSnippet;
+    /**
+     * Per-column named snippets, selected via a column's `snippet` field. Takes
+     * precedence over `cell` for the columns that name one.
+     */
+    snippets?: Record<string, TableCellSnippet>;
     /** Empty state snippet */
     empty?: TableEmptySnippet;
 }

package/dist/types/toolbar.d.ts

@@ -85,6 +85,11 @@ export interface ToolbarProps {
     class?: string;
     /** Custom snippet for rendering toolbar items */
     item?: ToolbarItemSnippet;
+    /**
+     * 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, ToolbarItemSnippet>;
     /** Slot for start section content */
     start?: import('svelte').Snippet;
     /** Slot for center section content */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -45,10 +45,10 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.5.0",
-    "@rokkit/data": "1.5.0",
-    "@rokkit/states": "1.5.0",
-    "@rokkit/actions": "1.5.0",
+    "@rokkit/core": "1.6.0",
+    "@rokkit/data": "1.6.0",
+    "@rokkit/states": "1.6.0",
+    "@rokkit/actions": "1.6.0",
     "marked": "^15.0.0",
     "dompurify": "^3.4.13"
   },