@rokkit/ui 1.0.0-next.127 → 1.0.0-next.129

package/src/components/Stepper.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import { messages } from '@rokkit/states'
 
 	interface StepperStep {
 		/** Step label (shown below circle) */
@@ -15,8 +17,8 @@
 	}
 
 	interface StepperIcons {
-		/** Icon class for completed state (default: i-lucide:check) */
-		completed?: string
+		/** Icon class for check/completed state */
+		check?: string
 	}
 
 	interface StepperProps {
@@ -41,7 +43,7 @@
 	}
 
 	const defaultIcons: StepperIcons = {
-		completed: 'i-lucide:check'
+		check: DEFAULT_STATE_ICONS.action.check
 	}
 
 	let {
@@ -50,11 +52,12 @@
 		currentStage = $bindable(0),
 		linear = false,
 		orientation = 'horizontal',
+		label = messages.current.stepper.label,
 		icons: userIcons,
 		onclick,
 		content,
 		class: className = ''
-	}: StepperProps = $props()
+	}: StepperProps & { label?: string } = $props()
 
 	const icons = $derived<StepperIcons>({ ...defaultIcons, ...userIcons })
 
@@ -105,7 +108,7 @@
 	data-orientation={orientation}
 	class={className || undefined}
 	role="group"
-	aria-label="Progress"
+	aria-label={label}
 >
 	{#each steps as step, index (index)}
 		<!-- Connector line before step (except first) -->
@@ -133,7 +136,7 @@
 				onclick={() => handleStepClick(index)}
 			>
 				{#if step.completed}
-					<span class={icons.completed} aria-hidden="true"></span>
+					<span data-stepper-check-icon class={icons.check} aria-hidden="true"></span>
 				{:else}
 					{step.label ?? index + 1}
 				{/if}

package/src/components/Switch.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SwitchProps, SwitchItem } from '../types/switch.js'
-	import { ItemProxy } from '../types/item-proxy.js'
+	import { ProxyItem } from '@rokkit/states'
 
 	const DEFAULT_OPTIONS: [SwitchItem, SwitchItem] = [false, true]
 
@@ -15,15 +15,15 @@
 		class: className = ''
 	}: SwitchProps = $props()
 
-	let offProxy = $derived(new ItemProxy(options[0] as Record<string, unknown>, userFields))
-	let onProxy = $derived(new ItemProxy(options[1] as Record<string, unknown>, userFields))
-	let isChecked = $derived(value === onProxy.itemValue)
+	let offProxy = $derived(new ProxyItem(options[0], userFields))
+	let onProxy = $derived(new ProxyItem(options[1], userFields))
+	let isChecked = $derived(value === onProxy.value)
 	let currentProxy = $derived(isChecked ? onProxy : offProxy)
 
 	function toggle() {
 		if (disabled) return
 		const next = isChecked ? offProxy : onProxy
-		const nextValue = next.itemValue
+		const nextValue = next.value
 		value = nextValue
 		onchange?.(nextValue, next.original as SwitchItem)
 	}
@@ -55,8 +55,8 @@
 	data-switch-size={size}
 	data-switch-disabled={disabled || undefined}
 	aria-checked={isChecked}
-	aria-label={currentProxy.text || undefined}
-	title={currentProxy.description ?? currentProxy.text ?? undefined}
+	aria-label={currentProxy.label || undefined}
+	title={currentProxy.get('subtext') ?? currentProxy.label ?? undefined}
 	{disabled}
 	class={className || undefined}
 	onclick={toggle}
@@ -64,12 +64,12 @@
 >
 	<span data-switch-track>
 		<span data-switch-thumb>
-			{#if currentProxy.icon}
-				<span data-switch-icon class={currentProxy.icon} aria-hidden="true"></span>
+			{#if currentProxy.get('icon')}
+				<span data-switch-icon class={currentProxy.get('icon')} aria-hidden="true"></span>
 			{/if}
 		</span>
 	</span>
-	{#if showLabels && currentProxy.text}
-		<span data-switch-label>{currentProxy.text}</span>
+	{#if showLabels && currentProxy.label}
+		<span data-switch-label>{currentProxy.label}</span>
 	{/if}
 </button>

package/src/components/Table.svelte

@@ -206,7 +206,6 @@
 							data-path={entry.key}
 							data-selected={isSelected || undefined}
 							data-focused={isFocused || undefined}
-							role="row"
 							aria-selected={isSelected}
 							aria-rowindex={rowIndex + 1}
 							tabindex={isFocused ? 0 : -1}

package/src/components/Tabs.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
-	import type { TabsProps, TabsItem, TabsItemHandlers } from '../types/tabs.js'
-	import { ItemProxy } from '../types/item-proxy.js'
-	import { ListController } from '@rokkit/states'
-	import { navigator } from '@rokkit/actions'
-	import { untrack } from 'svelte'
+	/**
+	 * Tabs — Wrapper + Navigator + ProxyItem 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} for tab triggers
+	 *
+	 * Snippet customization:
+	 *   itemContent   — replaces inner content of <button> for tab triggers
+	 *   tabPanel      — replaces panel content
+	 *   [named]       — per-item override via item.snippet = 'name'; falls back to itemContent
+	 *   empty         — rendered when no options
+	 *
+	 * Tab panels are rendered separately from triggers. Only the active panel
+	 * receives data-panel-active. Navigator ignores panels (no data-path on them).
+	 */
+	// @ts-nocheck
+	import type { TabsProps } from '../types/tabs.js'
+	import type { ProxyItem } from '@rokkit/states'
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+	import { resolveSnippet, ITEM_SNIPPET, DEFAULT_STATE_ICONS } from '@rokkit/core'
 
 	let {
 		options = [],
-		fields: userFields,
+		fields: userFields = {},
 		value = $bindable(),
 		orientation = 'horizontal',
 		position = 'before',
@@ -16,177 +35,72 @@
 		editable = false,
 		placeholder = 'Select a tab to view its content.',
 		disabled = false,
+		labels: userLabels = {},
 		class: className = '',
 		onchange,
 		onselect,
 		onadd,
 		onremove,
-		tabItem: tabItemSnippet,
-		tabPanel: tabPanelSnippet,
-		empty: emptySnippet
-	}: TabsProps = $props()
+		...snippets
+	}: TabsProps & { labels?: Record<string, string>; [key: string]: unknown } = $props()
 
-	/** Content field name from user fields or default */
-	const contentField = $derived((userFields as Record<string, string> | undefined)?.content ?? 'content')
+	const labels = $derived({ ...messages.current.tabs, ...userLabels })
 
-	let controller = untrack(() => new ListController(options, value, userFields))
-	let containerRef: HTMLElement | null = $state(null)
-	let lastSyncedValue: unknown = value
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
 
-	$effect(() => {
-		controller.update(options)
-	})
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(new Wrapper(proxyTree, {	onchange, onselect }))
 
-	// Sync controller focus when value changes externally
-	$effect(() => {
-		if (value !== lastSyncedValue) {
-			lastSyncedValue = value
-			controller.moveToValue(value)
-		}
-	})
+	// ─── Navigator ────────────────────────────────────────────────────────────
+
+	let containerRef = $state<HTMLElement | null>(null)
 
-	// Focus the tab matching controller.focusedKey on navigator move events
 	$effect(() => {
 		if (!containerRef) return
-		const el = containerRef
-
-		function handleAction(event: Event) {
-			const detail = (event as CustomEvent).detail
-
-			if (detail.name === 'move') {
-				const key = controller.focusedKey
-				if (key) {
-					const target = el.querySelector(`[data-path="${key}"]`) as HTMLElement | null
-					if (target && target !== document.activeElement) {
-						target.focus()
-					}
-				}
-			}
-
-			if (detail.name === 'select') {
-				handleSelectAction()
-			}
-		}
-
-		el.addEventListener('action', handleAction)
-		return () => el.removeEventListener('action', handleAction)
+		const nav = new Navigator(containerRef, wrapper, { orientation })
+		return () => nav.destroy()
 	})
 
-	/**
-	 * Create an ItemProxy for the given item
-	 */
-	function createProxy(item: TabsItem): ItemProxy {
-		return new ItemProxy(item, userFields)
-	}
-
-	/**
-	 * Check if an item is currently selected
-	 */
-	function isSelected(proxy: ItemProxy): boolean {
-		return proxy.itemValue === value
-	}
+	// ─── Sync external value → focused key ────────────────────────────────────
 
-	/**
-	 * Handle tab selection via navigator select action
-	 */
-	function handleSelectAction() {
-		const key = controller.focusedKey
-		if (!key) return
-
-		const proxy = controller.lookup.get(key)
-		if (!proxy) return
-
-		const itemProxy = createProxy(proxy.value)
-		selectTab(itemProxy)
-	}
-
-	/**
-	 * Select a tab by its proxy
-	 */
-	function selectTab(proxy: ItemProxy) {
-		if (proxy.disabled || disabled) return
-		const itemValue = proxy.itemValue
-		if (itemValue !== value) {
-			value = itemValue
-			lastSyncedValue = itemValue
-			controller.moveToValue(itemValue)
-			onchange?.(itemValue, proxy.original as TabsItem)
-		}
-		onselect?.(itemValue, proxy.original as TabsItem)
-	}
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
 
-	/**
-	 * Handle keyboard events on individual tabs (Enter/Space)
-	 */
-	function handleKeyDown(event: KeyboardEvent, proxy: ItemProxy) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault()
-			selectTab(proxy)
-		}
-	}
-
-	/**
-	 * Create handlers object for custom snippets
-	 */
-	function createHandlers(proxy: ItemProxy): TabsItemHandlers {
-		return {
-			onclick: () => selectTab(proxy),
-			onkeydown: (event: KeyboardEvent) => handleKeyDown(event, proxy)
-		}
-	}
+	// ─── Editable handlers ────────────────────────────────────────────────────
 
 	function handleAdd() {
 		onadd?.()
 	}
 
-	function handleRemove(proxy: ItemProxy) {
-		onremove?.(proxy.itemValue)
-	}
-
-	/**
-	 * Get the panel content for a tab item
-	 */
-	function getContent(item: TabsItem): unknown {
-		return item[contentField]
+	function handleRemove(proxy: ProxyItem) {
+		onremove?.(proxy.value)
 	}
 </script>
 
-{#snippet defaultTabItem(proxy: ItemProxy, handlers: TabsItemHandlers, selected: boolean, key: string)}
-	<button
-		type="button"
-		data-tabs-trigger
-		data-path={key}
-		data-selected={selected || undefined}
-		data-disabled={proxy.disabled || undefined}
-		role="tab"
-		aria-selected={selected}
-		aria-label={proxy.label}
-		disabled={proxy.disabled || disabled}
-		onkeydown={handlers.onkeydown}
-	>
-		{#if proxy.icon}
-			<span data-tabs-icon class={proxy.icon} aria-hidden="true"></span>
-		{/if}
-		<span data-tabs-label>{proxy.text}</span>
-		{#if editable}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<span
-				data-tabs-remove
-				role="button"
-				tabindex="-1"
-				aria-label="Remove tab"
-				onclick={(e) => { e.stopPropagation(); handleRemove(proxy) }}
-				onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); handleRemove(proxy) } }}
-			>
-				<span class="i-lucide:x" aria-hidden="true"></span>
-			</span>
-		{/if}
-	</button>
+{#snippet defaultTabContent(proxy: ProxyItem)}
+	{#if proxy.get('icon')}
+		<span data-tabs-icon class={proxy.get('icon')} aria-hidden="true"></span>
+	{/if}
+	<span data-tabs-label>{proxy.label}</span>
+	{#if editable}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<span
+			data-tabs-remove
+			role="button"
+			tabindex="-1"
+			aria-label={labels.remove}
+			onclick={(e) => { e.stopPropagation(); handleRemove(proxy) }}
+			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); handleRemove(proxy) } }}
+		>
+			<span class={DEFAULT_STATE_ICONS.action.close} aria-hidden="true"></span>
+		</span>
+	{/if}
 {/snippet}
 
-{#snippet defaultPanel(item: TabsItem)}
+{#snippet defaultPanel(proxy: ProxyItem)}
 	<div data-tabs-content>
-		{getContent(item)}
+		{proxy.get('content')}
 	</div>
 {/snippet}
 
@@ -204,35 +118,45 @@
 	data-disabled={disabled || undefined}
 	class={className || undefined}
 	aria-label={name}
-	use:navigator={{ wrapper: controller, orientation }}
 >
 	{#if options.length === 0}
 		<div data-tabs-empty>
-			{#if emptySnippet}
-				{@render emptySnippet()}
+			{#if snippets.empty}
+				{@render snippets.empty()}
 			{:else}
 				{@render defaultEmpty()}
 			{/if}
 		</div>
 	{:else}
 		<div data-tabs-list role="tablist" aria-orientation={orientation}>
-			{#each options as option, index (index)}
-				{@const proxy = createProxy(option)}
-				{@const selected = isSelected(proxy)}
-				{@const handlers = createHandlers(proxy)}
-				{@const key = String(index)}
+			{#each wrapper.flatView as node (node.key)}
+				{@const proxy = node.proxy}
+				{@const sel = proxy.value === value}
+				{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
 
-				{#if tabItemSnippet}
-					{@render tabItemSnippet(option, userFields ?? {}, handlers, selected)}
-				{:else}
-					{@render defaultTabItem(proxy, handlers, selected, key)}
-				{/if}
+				<button
+					type="button"
+					data-tabs-trigger
+					data-path={node.key}
+					data-selected={sel || undefined}
+					data-disabled={proxy.disabled || undefined}
+					role="tab"
+					aria-selected={sel}
+					aria-label={proxy.get('label') || proxy.label}
+					disabled={proxy.disabled || disabled}
+				>
+					{#if content}
+						{@render content(proxy, sel)}
+					{:else}
+						{@render defaultTabContent(proxy)}
+					{/if}
+				</button>
 			{/each}
 			{#if editable}
 				<button
 					type="button"
 					data-tabs-add
-					aria-label="Add tab"
+					aria-label={labels.add}
 					onclick={handleAdd}
 				>
 					<span class="i-lucide:plus" aria-hidden="true"></span>
@@ -240,21 +164,21 @@
 			{/if}
 		</div>
 
-		{#each options as option, index (index)}
-			{@const proxy = createProxy(option)}
-			{@const active = isSelected(proxy)}
+		{#each wrapper.flatView as node (node.key)}
+			{@const proxy = node.proxy}
+			{@const active = proxy.value === value}
 
 			<div
 				data-tabs-panel
 				data-panel-active={active || undefined}
 				role="tabpanel"
-				id="tab-panel-{index}"
-				aria-labelledby="tab-{index}"
+				id="tab-panel-{node.key}"
+				aria-labelledby="tab-{node.key}"
 			>
-				{#if tabPanelSnippet}
-					{@render tabPanelSnippet(option, userFields ?? {})}
+				{#if snippets.tabPanel}
+					{@render snippets.tabPanel(proxy)}
 				{:else}
-					{@render defaultPanel(option)}
+					{@render defaultPanel(proxy)}
 				{/if}
 			</div>
 		{/each}

package/src/components/Timeline.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { TimelineProps } from '../types/timeline.js'
 	import { defaultTimelineFields, defaultTimelineIcons } from '../types/timeline.js'
-	import { ItemProxy } from '../types/item-proxy.js'
+	import { ProxyItem } from '@rokkit/states'
 
 	let {
 		items = [],
@@ -17,10 +17,10 @@
 
 <div data-timeline class={className || undefined} role="list">
 	{#each items as item, index (index)}
-		{@const proxy = new ItemProxy(item, fields)}
-		{@const text = proxy.text}
-		{@const icon = proxy.icon}
-		{@const description = proxy.description}
+		{@const proxy = new ProxyItem(item, fields)}
+		{@const text = proxy.label}
+		{@const icon = proxy.get('icon')}
+		{@const description = proxy.get('subtext')}
 		{@const completed = Boolean(item.completed)}
 		{@const active = Boolean(item.active)}