@rokkit/ui 1.4.2 → 1.5.0

package/dist/components/CodeGroup.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	// @ts-nocheck
 	/**
 	 * CodeGroup — multi-file code display with a hierarchical tree picker
 	 * and an optional live preview panel.

package/dist/components/CommandPalette.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { commands, messages } from '@rokkit/states'
 	import { dismissable } from '@rokkit/actions'
+	import type { CommandPaletteProps } from '../types/command-palette.js'
 
 	/** Minimal command shape this palette reads (states' Command typedef isn't exported). */
 	type CommandLike = { id: string; label: string; keywords?: string[] }
 
-	let { open = $bindable(false), placeholder }: { open?: boolean; placeholder?: string } = $props()
+	let { open = $bindable(false), placeholder }: CommandPaletteProps = $props()
 
 	let query = $state('')
 	let activeIndex = $state(0)

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

@@ -1,7 +1,4 @@
-type $$ComponentProps = {
-    open?: boolean;
-    placeholder?: string;
-};
-declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open">;
+import type { CommandPaletteProps } from '../types/command-palette.js';
+declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {}, "open">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;

package/dist/components/Dropdown.svelte

@@ -20,15 +20,10 @@
 	 *   data-align             — panel alignment (start | end)
 	 *   data-direction         — panel direction (down | up)
 	 */
-	// @ts-nocheck
 	import { ProxyTree, Wrapper, messages } from '@rokkit/states'
 	import { Navigator, Trigger } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
-
-	interface DropdownIcons {
-		opened?: string
-		closed?: string
-	}
+	import type { DropdownProps, SelectStateIcons } from '../types/select.js'
 
 	let {
 		items = [],
@@ -41,24 +36,10 @@
 		showArrow = true,
 		align = 'start',
 		direction = 'down',
-		icons: userIcons = {} as DropdownIcons,
+		icons: userIcons = {} as SelectStateIcons,
 		onchange,
 		class: className = ''
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		placeholder?: string
-		icon?: string
-		size?: string
-		disabled?: boolean
-		showArrow?: boolean
-		align?: 'start' | 'end'
-		direction?: 'up' | 'down'
-		icons?: DropdownIcons
-		onchange?: (value: unknown, item: unknown) => void
-		class?: string
-	} = $props()
+	}: DropdownProps = $props()
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
 

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

@@ -1,22 +1,4 @@
-interface DropdownIcons {
-    opened?: string;
-    closed?: string;
-}
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    placeholder?: string;
-    icon?: string;
-    size?: string;
-    disabled?: boolean;
-    showArrow?: boolean;
-    align?: 'start' | 'end';
-    direction?: 'up' | 'down';
-    icons?: DropdownIcons;
-    onchange?: (value: unknown, item: unknown) => void;
-    class?: string;
-};
-declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { DropdownProps } from '../types/select.js';
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "value">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/components/Grid.svelte

@@ -32,6 +32,7 @@
 	import { Navigator } from '@rokkit/actions'
 	import { resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
+	import type { GridProps } from '../types/grid.js'
 
 	let {
 		items = [],
@@ -45,19 +46,7 @@
 		onselect,
 		class: className = '',
 		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		size?: string
-		disabled?: boolean
-		minSize?: string
-		gap?: string
-		label?: string
-		onselect?: (value: unknown, proxy: ProxyItem) => void
-		class?: string
-		[key: string]: unknown
-	} = $props()
+	}: GridProps = $props()
 
 	// ─── Wrapper ──────────────────────────────────────────────────────────────
 

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

@@ -1,45 +1,4 @@
-/**
-     * Grid — Responsive tile grid with Wrapper + Navigator horizontal navigation.
-     *
-     * Architecture:
-     *   Wrapper       — owns focusedKey $state + flatView $derived
-     *   Navigator     — attaches DOM event handlers, calls wrapper[action](path)
-     *                   horizontal orientation (ArrowLeft/ArrowRight navigation)
-     *   flatView loop — single flat {#each} rendering items as grid tiles
-     *
-     * Snippet customization:
-     *   itemContent   — replaces inner content of <button> for each tile
-     *   [named]       — per-item override via item.snippet = 'name'; falls back to itemContent
-     *
-     *   Snippets receive (proxy) only — the <button> wrapper with data-path is
-     *   always rendered by this component, so snippets never need to handle navigation.
-     *
-     * Data attributes on rendered elements:
-     *   data-grid           — root container
-     *   data-grid-item      — each tile button
-     *   data-path           — required by Navigator for click detection + scroll
-     *   data-active         — highlights current value match
-     *   data-disabled       — disabled state
-     *   data-size           — size variant
-     *
-     * CSS custom properties:
-     *   --grid-min-size     — minimum tile width for auto-fill
-     *   --grid-gap          — grid gap
-     */
-import type { ProxyItem } from '@rokkit/states';
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    size?: string;
-    disabled?: boolean;
-    minSize?: string;
-    gap?: string;
-    label?: string;
-    onselect?: (value: unknown, proxy: ProxyItem) => void;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const Grid: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { GridProps } from '../types/grid.js';
+declare const Grid: import("svelte").Component<GridProps, {}, "value">;
 type Grid = ReturnType<typeof Grid>;
 export default Grid;

package/dist/components/LazyTree.svelte

@@ -8,13 +8,13 @@
 	 * Default item content: icon + label + badge + shortcut (no avatar/description).
 	 * Parent nodes hide their icon by default.
 	 */
-	import type { ProxyItem } from '@rokkit/states'
 	import { LazyWrapper, LazyProxyItem, ProxyTree, messages } from '@rokkit/states'
 	import { Navigator } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
 	import Connector from './Connector.svelte'
 	import Button from './Button.svelte'
+	import type { LazyTreeProps } from '../types/tree.js'
 
 	let {
 		items = [],
@@ -29,20 +29,7 @@
 		hasMore = false,
 		class: className = '',
 		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		size?: 'sm' | 'md' | 'lg'
-		lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted'
-		labels?: Record<string, string>
-		icons?: { opened?: string; closed?: string }
-		onselect?: (value: unknown, proxy: ProxyItem) => void
-		onlazyload?: (current?: unknown) => Promise<unknown[]>
-		hasMore?: boolean
-		class?: string
-		[key: string]: unknown
-	} = $props()
+	}: LazyTreeProps = $props()
 
 	const labels = $derived({ ...messages.tree, ...userLabels })
 

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

@@ -1,30 +1,4 @@
-/**
-     * LazyTree — Tree + lazy loading.
-     *
-     * Same as Tree but uses LazyProxyItem via createProxy factory
-     * so nodes with children: true fetch on expand.
-     *
-     * Default item content: icon + label + badge + shortcut (no avatar/description).
-     * Parent nodes hide their icon by default.
-     */
-import type { ProxyItem } from '@rokkit/states';
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    size?: 'sm' | 'md' | 'lg';
-    lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
-    labels?: Record<string, string>;
-    icons?: {
-        opened?: string;
-        closed?: string;
-    };
-    onselect?: (value: unknown, proxy: ProxyItem) => void;
-    onlazyload?: (current?: unknown) => Promise<unknown[]>;
-    hasMore?: boolean;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const LazyTree: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { LazyTreeProps } from '../types/tree.js';
+declare const LazyTree: import("svelte").Component<LazyTreeProps, {}, "value">;
 type LazyTree = ReturnType<typeof LazyTree>;
 export default LazyTree;

package/dist/components/List.svelte

@@ -32,11 +32,7 @@
 	import { Navigator } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
-
-	interface ListIcons {
-		opened?: string
-		closed?: string
-	}
+	import type { ListProps, ListStateIcons } from '../types/list.js'
 
 	let {
 		items = [],
@@ -46,23 +42,11 @@
 		disabled = false,
 		collapsible = false,
 		label = messages.list.label,
-		icons: userIcons = {} as ListIcons,
+		icons: userIcons = {} as ListStateIcons,
 		onselect,
 		class: className = '',
 		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		size?: string
-		disabled?: boolean
-		collapsible?: boolean
-		label?: string
-		icons?: ListIcons
-		onselect?: (value: unknown, proxy: ProxyItem) => void
-		class?: string
-		[key: string]: unknown
-	} = $props()
+	}: ListProps = $props()
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.accordion, ...userIcons })
 

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

@@ -1,49 +1,4 @@
-/**
-     * List — ProxyItem + Wrapper + Navigator implementation.
-     *
-     * Architecture:
-     *   Wrapper       — owns focusedKey $state + flatView $derived
-     *   Navigator     — attaches DOM event handlers, calls wrapper[action](path)
-     *                   owns focus + scrollIntoView after every keyboard action
-     *   flatView loop — single flat {#each}, no nested groups in template
-     *
-     * Snippet customization:
-     *   itemContent   — replaces inner content of <a>/<button> for leaf items
-     *   groupContent  — replaces inner content of group header <button>
-     *   [named]       — per-item override via item.snippet = 'name'; falls back to itemContent
-     *
-     *   Snippets receive (proxy) only — the <a>/<button> wrapper with data-path is
-     *   always rendered by this component, so snippets never need to handle navigation.
-     *
-     * Data attributes on rendered elements:
-     *   data-path              — required by Navigator for click detection + scroll
-     *   data-level             — nesting depth (1=root); theme CSS uses for indentation
-     *   data-accordion-trigger — tells Navigator to dispatch toggle (not select) on click
-     *   data-list-item         — theme hook for leaf items
-     *   data-list-item-icon    — icon span inside leaf items
-     *   data-list-group        — theme hook for group headers
-     *   data-list-group-icon   — icon span inside group headers
-     *   data-active            — highlights current value match
-     *   data-disabled          — disabled state
-     */
-import type { ProxyItem } from '@rokkit/states';
-interface ListIcons {
-    opened?: string;
-    closed?: string;
-}
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    size?: string;
-    disabled?: boolean;
-    collapsible?: boolean;
-    label?: string;
-    icons?: ListIcons;
-    onselect?: (value: unknown, proxy: ProxyItem) => void;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const List: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { ListProps } from '../types/list.js';
+declare const List: import("svelte").Component<ListProps, {}, "value">;
 type List = ReturnType<typeof List>;
 export default List;

package/dist/components/Menu.svelte

@@ -42,17 +42,12 @@
 	 *   data-align              — dropdown alignment
 	 *   data-direction          — dropdown direction
 	 */
-	// @ts-nocheck
 	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
 	import { Navigator, Trigger } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
-
-	interface MenuIcons {
-		opened?: string
-		closed?: string
-	}
+	import type { MenuProps, MenuStateIcons } from '../types/menu.js'
 
 	let {
 		items = [],
@@ -66,27 +61,11 @@
 		showArrow = true,
 		align = 'start',
 		direction = 'down',
-		icons: userIcons = {} as MenuIcons,
+		icons: userIcons = {} as MenuStateIcons,
 		onselect,
 		class: className = '',
 		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown
-		size?: string
-		disabled?: boolean
-		collapsible?: boolean
-		label?: string
-		icon?: string
-		showArrow?: boolean
-		align?: 'start' | 'end'
-		direction?: 'up' | 'down'
-		icons?: MenuIcons
-		onselect?: (value: unknown, proxy: ProxyItem) => void
-		class?: string
-		[key: string]: unknown
-	} = $props()
+	}: MenuProps = $props()
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
 

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

@@ -1,68 +1,4 @@
-/**
-     * Menu — Trigger + dropdown with List-identical content.
-     *
-     * Architecture:
-     *   Trigger      — manages open/close from trigger button (click, Enter, Escape, click-outside)
-     *   Wrapper      — owns focusedKey $state + flatView $derived (cancel/blur overridden to close)
-     *   Navigator    — attaches DOM event handlers on dropdown, calls wrapper[action](path)
-     *   flatView loop — single flat {#each}, same as List
-     *
-     * The dropdown content is identical to List: same flatView loop, same snippet system,
-     * same collapsible groups. The only additions are trigger, alignment, and direction.
-     *
-     * Snippet customization (same as List):
-     *   itemContent   — replaces inner content of <button> for leaf items
-     *   groupContent  — replaces inner content of group header <button>
-     *   [named]       — per-item override via item.snippet = 'name'; falls back to itemContent
-     *
-     * Data attributes on rendered elements:
-     *   data-menu               — root container
-     *   data-menu-trigger       — trigger button
-     *   data-menu-label         — trigger label text
-     *   data-menu-icon          — trigger icon
-     *   data-menu-arrow         — trigger dropdown arrow
-     *   data-menu-dropdown      — dropdown container
-     *   data-menu-item          — leaf items (like data-list-item)
-     *   data-menu-item-icon     — icon span inside leaf items
-     *   data-menu-item-text     — text span inside leaf items
-     *   data-menu-group         — group headers (like data-list-group)
-     *   data-menu-group-icon    — icon span inside group headers
-     *   data-menu-group-text    — text span inside group headers
-     *   data-menu-expand-icon   — expand/collapse chevron in group headers
-     *   data-menu-separator     — separator
-     *   data-menu-spacer        — spacer
-     *   data-path               — required by Navigator for click detection + scroll
-     *   data-level              — nesting depth (1=root)
-     *   data-accordion-trigger  — tells Navigator to dispatch toggle on click
-     *   data-active             — highlights current value match
-     *   data-disabled           — disabled state
-     *   data-open               — dropdown is open
-     *   data-size               — size variant
-     *   data-align              — dropdown alignment
-     *   data-direction          — dropdown direction
-     */
-import type { ProxyItem } from '@rokkit/states';
-interface MenuIcons {
-    opened?: string;
-    closed?: string;
-}
-type $$ComponentProps = {
-    items?: unknown[];
-    fields?: Record<string, string>;
-    value?: unknown;
-    size?: string;
-    disabled?: boolean;
-    collapsible?: boolean;
-    label?: string;
-    icon?: string;
-    showArrow?: boolean;
-    align?: 'start' | 'end';
-    direction?: 'up' | 'down';
-    icons?: MenuIcons;
-    onselect?: (value: unknown, proxy: ProxyItem) => void;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { MenuProps } from '../types/menu.js';
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/MultiSelect.svelte

@@ -30,13 +30,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 MultiSelectIcons {
-		opened?: string
-		closed?: string
-		checked?: string
-		remove?: string
-	}
+	import type { MultiSelectProps, SelectStateIcons } from '../types/select.js'
 
 	let {
 		items = [],
@@ -49,26 +43,11 @@
 		maxDisplay = 3,
 		align = 'start',
 		direction = 'down',
-		icons: userIcons = {} as MultiSelectIcons,
+		icons: userIcons = {} as SelectStateIcons,
 		onchange,
 		class: className = '',
 		...snippets
-	}: {
-		items?: unknown[]
-		fields?: Record<string, string>
-		value?: unknown[]
-		selected?: unknown[]
-		placeholder?: string
-		size?: string
-		disabled?: boolean
-		maxDisplay?: number
-		align?: 'start' | 'end'
-		direction?: 'up' | 'down'
-		icons?: MultiSelectIcons
-		onchange?: (values: unknown[], items: unknown[]) => void
-		class?: string
-		[key: string]: unknown
-	} = $props()
+	}: MultiSelectProps = $props()
 
 	const icons = $derived({
 		...DEFAULT_STATE_ICONS.selector,

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

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

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,11 @@
 		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()
+	}: SelectProps = $props()
 
 	const icons = $derived({
 		...DEFAULT_STATE_ICONS.selector,

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 = [],