@rokkit/ui 1.0.0-next.107 → 1.0.0-next.109

package/dist/index.d.ts

@@ -22,7 +22,6 @@ export { default as Toggle } from "./Toggle.svelte";
 export { default as Switch } from "./Switch.svelte";
 export { default as List } from "./List.svelte";
 export { default as Accordion } from "./Accordion.svelte";
-export { default as NestedList } from "./NestedList.svelte";
 export { default as Tree } from "./Tree.svelte";
 export { default as Tabs } from "./Tabs.svelte";
 export { default as Select } from "./Select.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.107",
+  "version": "1.0.0-next.109",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -32,6 +32,8 @@
     "@rokkit/actions": "latest",
     "@rokkit/core": "latest",
     "@rokkit/states": "latest",
+    "@rokkit/data": "latest",
+    "@rokkit/input": "latest",
     "d3-scale": "^4.0.2",
     "date-fns": "^4.1.0",
     "ramda": "^0.30.1"

package/src/Accordion.svelte

@@ -1,11 +1,20 @@
 <script>
 	import { equals } from 'ramda'
-	import { createEmitter, noop, getKeyFromPath, getSnippet } from '@rokkit/core'
-	import { NestedProxy } from '@rokkit/states'
+	import {
+		createEmitter,
+		noop,
+		getKeyFromPath,
+		getSnippet,
+		defaultFields,
+		hasChildren
+	} from '@rokkit/core'
+	import { NestedController } from '@rokkit/states'
 	import { navigator } from '@rokkit/actions'
 	import Summary from './Summary.svelte'
 	import Item from './Item.svelte'
+	import ListBody from './ListBody.svelte'
 
+	const eventNames = ['collapse', 'change', 'expand', 'click', 'select', 'move']
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [class]
@@ -27,47 +36,45 @@
 		header = null,
 		footer = null,
 		empty = null,
-		stub = null,
-		extra,
-		...events
+		oncollapse,
+		onexpand,
+		onchange,
+		onselect,
+		onmove,
+		...snippets
 	} = $props()
 
 	let emitter = $derived(
-		createEmitter(events, ['collapse', 'change', 'expand', 'click', 'select', 'move'])
+		createEmitter({ oncollapse, onexpand, onchange, onselect, onmove }, eventNames)
 	)
-	let wrapper = new NestedProxy(items, value, fields, { events, multiselect, autoCloseSiblings })
+	function handleAction(event) {
+		const { name, data } = event.detail
+
+		if (has(name, emitter)) {
+			value = data.value
+			selected = data.selected
+			emitter[name](data)
+		}
+	}
+
+	let wrapper = new NestedController(items, value, fields, {
+		multiselect,
+		autoCloseSiblings
+	})
+	let derivedFields = $derived({ ...defaultFields, ...fields })
 </script>
 
-{#snippet listItems(nodes, onchange = noop)}
-	{#each nodes as node}
-		{@const template = getSnippet(extra, node.get('component')) ?? stub}
-		{@const path = getKeyFromPath(node.path)}
-		{@const props = node.get('props') || {}}
-		<rk-list-item
-			role="option"
-			data-path={path}
-			aria-selected={node.selected}
-			aria-current={node.focused}
-		>
-			{#if template}
-				{@render template(node, props, onchange)}
-			{:else}
-				<Item value={node.value} fields={node.fields} />
-			{/if}
-		</rk-list-item>
-	{/each}
-{/snippet}
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <rk-accordion
 	class={classes}
 	tabindex="0"
-	use:navigator={{ wrapper }}
+	use:navigator={{ wrapper, nested: true }}
 	onactivate={() => (value = wrapper.value)}
 >
 	{#if header}
 		<rk-header>{@render header()}</rk-header>
 	{/if}
-	{#if wrapper.nodes.length === 0}
+	{#if items.length === 0}
 		<rk-list-item role="presentation">
 			{#if empty}
 				{@render empty()}
@@ -76,22 +83,31 @@
 			{/if}
 		</rk-list-item>
 	{/if}
-	{#each wrapper.nodes as node, index}
+	{#each items as item, index (index)}
+		{@const key = `${index}`}
+		{@const expanded = item[derivedFields.expanded]}
 		<div
 			class="flex flex-col"
-			class:is-expanded={node.expanded}
-			class:is-selected={node.selected}
+			class:is-expanded={expanded}
+			class:is-selected={wrapper.selectedKeys.has(key)}
 			data-path={index}
 		>
 			<Summary
-				bind:value={wrapper.nodes[index].value}
-				fields={node.fields}
-				expanded={node.expanded}
-				hasChildren={node.hasChildren()}
+				bind:value={items[index]}
+				{fields}
+				{expanded}
+				hasChildren={hasChildren(item, derivedFields)}
 			/>
-			{#if node.expanded}
+			{#if expanded}
 				<rk-list role="listbox" tabindex="-1">
-					{@render listItems(node.children, events.change)}
+					<ListBody
+						bind:items={items[fields.children]}
+						bind:value
+						fields={fields.fields ?? fields}
+						{selected}
+						onchange={emitter.change}
+						{snippets}
+					/>
 				</rk-list>
 			{/if}
 		</div>

package/src/BreadCrumbs.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <rk-crumbs class={classes}>
-	{#each items as item, index}
+	{#each items as item, index (index)}
 		{#if index > 0}
 			<span>
 				{#if separator.length === 1}

package/src/Calendar.svelte

@@ -60,14 +60,14 @@
 	</month-year>
 	<cal-body class="flex w-full cursor-pointer flex-col p-1">
 		<days-of-week class="grid grid-cols-7">
-			{#each weekdays as day, index}
+			{#each weekdays as day, index (index)}
 				<p class:weekend={index % 6 === 0}>
 					{day.slice(0, 1)}
 				</p>
 			{/each}
 		</days-of-week>
 		<days-of-month class="grid grid-cols-7 grid-rows-5">
-			{#each days as { day, offset, date, weekend }}
+			{#each days as { day, offset, date, weekend } (date)}
 				{@const start = offset > 0 ? offset : 'auto'}
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<day-of-month

package/src/Carousel.svelte

@@ -33,7 +33,7 @@
 			<p>{value.text}</p>
 		</slide>
 		<dot-nav role="radiogroup">
-			{#each items as item, index}
+			{#each items as item, index (index)}
 				<dot
 					role="radio"
 					aria-checked={currentIndex === index}

package/src/FieldLayout.svelte

@@ -23,7 +23,7 @@
 	<error> Invalid schema. Expected schema to include an 'elements' array. </error>
 {:else}
 	<Wrapper {...wrapperProps}>
-		{#each schema.elements as item}
+		{#each schema.elements as item, index (index)}
 			{@const elementPath = item.key ? [...path, item.key] : path}
 			{@const props = { ...item.props, path: elementPath }}
 			{@const nested = Array.isArray(item.elements) && item.elements.length > 0}

package/src/Icon.svelte

@@ -63,6 +63,7 @@
 	onclick={handleClick}
 	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
 	data-state={state}
+	data-tag="icon"
 	tabindex={validatedTabindex}
 	onmouseenter={emitter.mouseenter}
 	onnmouseleave={emitter.nmouseleave}

package/src/Link.svelte

@@ -12,8 +12,8 @@
 
 	/** @type {Props} */
 	let { class: classes = '', value, mapping = new FieldMapper(), href = '#', ...rest } = $props()
-	let url = $derived(mapping.getAttribute(value, 'url') ?? href)
-	let props = $derived({ ...mapping.getAttribute(value, 'props'), ...rest })
+	let url = $derived(mapping.get('url', value, href))
+	let props = $derived({ ...mapping.get('props', value, {}), ...rest })
 </script>
 
 <a href={url} class={classes} {...props}>

package/src/List.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { createEmitter, noop, getKeyFromPath, getSnippet } from '@rokkit/core'
+	import { createEmitter } from '@rokkit/core'
 	import { navigator } from '@rokkit/actions'
-	import Item from './Item.svelte'
-	import { ListProxy } from '@rokkit/states'
+	import ListBody from './ListBody.svelte'
+	import { ListController } from '@rokkit/states'
 	import { omit, has } from 'ramda'
 
 	/**
@@ -30,21 +30,26 @@
 		header,
 		footer,
 		empty,
-		stub,
-		...events
+		onselect,
+		onchange,
+		onmove,
+		...snippets
 	} = $props()
 
+	let selected = $state([])
+
 	function handleAction(event) {
-		value = wrapper.currentNode.value
-		console.log(event.detail)
-		if (has(event.detail.eventName, emitter)) {
-			emitter[event.detail.eventName](event.detail.data)
+		const { name, data } = event.detail
+
+		if (has(name, emitter)) {
+			value = data.value
+			selected = data.selected
+			emitter[name](data)
 		}
 	}
 
-	let emitter = createEmitter(events, ['select', 'change', 'move'])
-	let extra = omit(['onselect', 'onchange', 'onmove'], events)
-	let wrapper = new ListProxy(items, value, fields, { multiSelect })
+	let emitter = createEmitter({ onchange, onmove, onselect }, ['select', 'change', 'move'])
+	let wrapper = new ListController(items, value, fields, { multiSelect })
 </script>
 
 <rk-list
@@ -59,30 +64,22 @@
 		<rk-header>{@render header()}</rk-header>
 	{/if}
 	<rk-body>
-		{#if wrapper.nodes.length === 0}
+		{#if items.length === 0}
 			{#if empty}
 				{@render empty()}
 			{:else}
 				<rk-message>No items found.</rk-message>
 			{/if}
 		{:else}
-			{#each wrapper.nodes as node}
-				{@const template = getSnippet(extra, node.get('component')) ?? stub}
-				{@const path = getKeyFromPath(node.path)}
-				{@const props = node.get('props') || {}}
-				<rk-list-item
-					role="option"
-					data-path={path}
-					aria-selected={node.selected}
-					aria-current={node.focused}
-				>
-					{#if template}
-						{@render template(node, props, emitter.change)}
-					{:else}
-						<Item value={node.value} fields={node.fields} />
-					{/if}
-				</rk-list-item>
-			{/each}
+			<ListBody
+				bind:items
+				bind:value
+				{fields}
+				selectedKeys={wrapper.selectedKeys}
+				focusedKey={wrapper.focusedKey}
+				onchange={emitter.change}
+				{snippets}
+			/>
 		{/if}
 	</rk-body>
 	{#if footer}

package/src/ListBody.svelte

@@ -0,0 +1,42 @@
+<script>
+	import { getKeyFromPath, FieldMapper, getSnippet } from '@rokkit/core'
+	import Item from './Item.svelte'
+	import { equals } from 'ramda'
+
+	let {
+		items = $bindable([]),
+		value = null,
+		fields,
+		path = [],
+		onchange = () => {},
+		selectedKeys = new SvelteSet(),
+		focusedKey = null,
+		snippets = {}
+	} = $props()
+	let fm = $derived.by(() => {
+		return new FieldMapper(fields)
+	})
+</script>
+
+{#each items as item, index (index)}
+	{@const template = getSnippet(snippets, fm.get('snippet', item, 'stub'))}
+	{@const pathKey = getKeyFromPath([...path, index])}
+	{@const props = fm.get('props', item) || {}}
+	<rk-list-item
+		role="option"
+		data-path={pathKey}
+		aria-selected={selectedKeys.has(pathKey)}
+		aria-current={focusedKey === pathKey}
+	>
+		<svelte:boundary>
+			{#if template}
+				{@render template(item, props, onchange)}
+				{#snippet failed()}
+					<Item value={item} {fields} />
+				{/snippet}
+			{:else}
+				<Item value={item} {fields} />
+			{/if}
+		</svelte:boundary>
+	</rk-list-item>
+{/each}

package/src/MultiSelect.svelte

@@ -36,7 +36,7 @@
 >
 	{#if value.length > 0}
 		<items class="flex flex-wrap">
-			{#each value as item}
+			{#each value as item, index (index)}
 				<Item value={item} {fields} {using} removable on:remove={handleRemove} class="pill" />
 			{/each}
 		</items>

package/src/NestedList.svelte

@@ -1,33 +1,77 @@
 <script>
-	import { defaultStateIcons, getLineTypes } from '@rokkit/core'
+	import { SvelteSet } from 'svelte/reactivity'
+	import {
+		defaultStateIcons,
+		getLineTypes,
+		getKeyFromPath,
+		getNestedFields,
+		hasChildren
+	} from '@rokkit/core'
 	import Node from './Node.svelte'
 	import NestedList from './NestedList.svelte'
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {Array<NodeProxy>} [items]
-	 * @property {import('./types').ConnectionType[]} [types]
-	 * @property {any} [value]
-	 * @property {import('./types').NodeStateIcons} icons
+	 * @property {Array<NodeProxy>}                   [items=[]]
+	 * @property {any}                                [value=null]
+	 * @property {import('./types').FieldMapping}     fields
+	 * @property {number[]}                           [path=[]]
+	 * @property {import('./types').NodeStateIcons}   icons
+	 * @property {import('./types').ConnectionType[]} [types=[]]
+	 * @property {string}                             [focusedKey]
+	 * @property {SvelteSet}                          [selectedKeys]
 	 */
 
 	/** @type {Props} */
-	let { items = $bindable([]), types = [], value = $bindable(null), icons = {} } = $props()
+	let {
+		items = $bindable([]),
+		value = $bindable(null),
+		fields,
+		path = [],
+		icons = {},
+		types = [],
+		focusedKey,
+		selectedKeys = new SvelteSet(),
+		stub,
+		snippets
+	} = $props()
 
 	const stateIcons = $derived({ ...defaultStateIcons.node, ...icons })
+	const childFields = $derived(getNestedFields(fields))
+	// $inspect(childFields, items[0], expandedKeys)
 </script>
 
 <rk-nested-list role="tree">
-	{#each items as item, index}
-		{@const hasChildren = item.hasChildren()}
+	{#each items as item, index (index)}
+		{@const nodePath = [...path, index]}
+		{@const key = getKeyFromPath(nodePath)}
+		{@const expanded = item[fields.expanded]}
 		{@const nodeType = index === items.length - 1 ? 'last' : 'child'}
-		{@const connectors = getLineTypes(hasChildren, types, nodeType)}
+		{@const connectors = getLineTypes(hasChildren(item, fields), types, nodeType)}
 
-		<Node value={items[index]} types={connectors} {stateIcons}>
-			{#if items[index].expanded}
-				<!-- <div role="treeitem" aria-selected={false}> -->
-				<NestedList items={item.children} {value} icons={stateIcons} types={connectors} />
-				<!-- </div> -->
+		<Node
+			value={item}
+			{fields}
+			{stateIcons}
+			types={connectors}
+			focused={focusedKey === key}
+			selected={selectedKeys.has(key)}
+			{expanded}
+			path={nodePath}
+			{stub}
+			{snippets}
+		>
+			{#if hasChildren(item, fields) && expanded}
+				<NestedList
+					items={item[fields.children]}
+					{value}
+					fields={childFields}
+					path={nodePath}
+					icons={stateIcons}
+					types={connectors}
+					{focusedKey}
+					{selectedKeys}
+				/>
 			{/if}
 		</Node>
 	{/each}

package/src/NestedPaginator.svelte

@@ -1,6 +1,8 @@
 <script>
 	import { defaultFields, flattenNestedList } from '@rokkit/core'
-	import { Item, BreadCrumbs } from '@rokkit/molecules'
+	import Item from './Item.svelte'
+	import BreadCrumbs from './BreadCrumbs.svelte'
+	import Icon from './Icon.svelte'
 	// import { flattenNestedList } from './lib/nested'
 	import { createEventDispatcher } from 'svelte'
 
@@ -47,13 +49,15 @@
 
 	$: flatList = flattenNestedList(items, fields)
 	$: fields = { ...defaultFields, ...(fields ?? {}) }
-	$: using = { default: Item, ...(using ?? {}) }
 </script>
 
 <pages>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class="arrow-left cursor-pointer" on:click={() => handleNav('previous')} />
+	<Icon
+		name="arrow-left"
+		class="cursor-pointer"
+		label="Previous"
+		onclick={() => handleNav('previous')}
+	/>
 	<BreadCrumbs items={trail} {fields} {using} />
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class="arrow-right cursor-pointer" on:click={() => handleNav('next')} />
+	<Icon name="arrow-right" class="cursor-pointer" onclick={() => handleNav('next')} label="Next" />
 </pages>

package/src/Node.svelte

@@ -5,44 +5,54 @@
 	import Item from './Item.svelte'
 
 	/**
-	 * @typedef {Object} Props
-	 * @property {any} value
-	 * @property {any} [types]
+	 * @typedef {Object}                            Props
+	 * @property {any}                              value
+	 * @property {import('./types').FieldMapping}   fields
+	 * @property {any}                              [types]
 	 * @property {import('./types').NodeStateIcons} [stateIcons]
+	 * @property {number[]}                         [path=[]]
+	 * @property {boolean}                          [focused=false]
+	 * @property {boolean}                          [selected=false]
+	 * @property {boolean}                          [expanded=false]
+	 * @property {Function}                         [children]
+	 * @property {Function}                         [stub=null]
+	 * @property {Object<string, Function>}         [snippets={}]
 	 */
 
 	/** @type {Props} */
 	let {
-		value = $bindable(),
+		value = $bindable(null),
+		fields,
 		types = [],
 		stateIcons = defaultStateIcons.node,
-		stub = null,
+		path = [],
+		focused = false,
+		selected = false,
+		expanded = false,
 		children,
-		...extra
+		stub = null,
+		snippets = {}
 	} = $props()
 
+	let stateName = $derived(expanded ? 'opened' : 'closed')
 	let icons = $derived({ ...defaultStateIcons.node, ...stateIcons })
-	let stateName = $derived(value.expanded ? 'opened' : 'closed')
 	let state = $derived(
-		value.expanded
-			? { icon: icons.opened, label: 'collapse' }
-			: { icon: icons.closed, label: 'expand' }
+		expanded ? { icon: icons.opened, label: 'collapse' } : { icon: icons.closed, label: 'expand' }
 	)
 
-	const template = getSnippet(value.get('component'), extra) ?? stub
-	// $inspect(value.focused, value.expanded, value.selected, value.get('text'))
+	const template = getSnippet(value[fields.snippet], snippets, stub)
 </script>
 
 <rk-node
-	aria-current={value.focused}
-	aria-selected={value.selected}
-	aria-expanded={value.expanded}
+	aria-current={focused}
+	aria-selected={selected}
+	aria-expanded={expanded}
 	role="treeitem"
-	data-path={getKeyFromPath(value.path)}
-	data-depth={value.path.length}
+	data-path={getKeyFromPath(path)}
+	data-depth={path.length}
 >
 	<div class="flex flex-row items-center">
-		{#each types as type}
+		{#each types as type, index (index)}
 			{#if type === 'icon'}
 				<Icon name={state.icon} label={state.label} state={stateName} class="w-4" size="small" />
 			{:else}
@@ -50,11 +60,16 @@
 			{/if}
 		{/each}
 		<rk-item>
-			{#if template}
+			<svelte:boundary>
+				<!-- {#if template} -->
 				{@render template(value)}
-			{:else}
-				<Item value={value.value} fields={value.fields} />
-			{/if}
+				{#snippet failed()}
+					<Item {value} {fields} />
+				{/snippet}
+				<!-- {:else}
+					<Item {value} {fields} />
+				{/if} -->
+			</svelte:boundary>
 		</rk-item>
 	</div>
 	{@render children?.()}

package/src/PageNavigator.svelte

@@ -41,7 +41,7 @@
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<nav-pages class="grid grid-cols-3 select-none {className}" tabindex="0">
+<nav-pages class="grid select-none grid-cols-3 {className}" tabindex="0">
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<span
 		class="flex cursor-pointer items-center"
@@ -59,7 +59,7 @@
 	</span>
 	<span class="flex items-center justify-center">
 		<block class="flex items-center">
-			{#each items as item, index}
+			{#each items as item, index (index)}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<pg
 					class:numbers

package/src/ProgressDots.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <span class="progress flex items-center gap-2" class:empty={count === 0}>
-	{#each steps as step}
+	{#each steps as step, index (index)}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<dot
 			class="step flex h-3 w-3 rounded-full border-2 border-neutral-100 bg-neutral-300"

package/src/RadioGroup.svelte

@@ -37,9 +37,10 @@
 	class="flex cursor-pointer select-none flex-col {className}"
 	class:disabled={readOnly}
 >
-	{#each options as item}
-		{@const itemValue = mapping.getValue(item)}
-		{@const label = mapping.getText(item)}
+	{#each options as item, index (index)}
+		{@const label = mapping.get('text', item)}
+		{@const itemValue = mapping.get('value', item, label)}
+
 		{@const state = equals(itemValue, value) ? 'on' : 'off'}
 
 		<label class="flex {flexDirection} items-center gap-2">

package/src/RangeMinMax.svelte

@@ -104,7 +104,7 @@
 		</rk-range-track>
 
 		<rk-ticks style:--count={tickItems.length - 1}>
-			{#each tickItems as { value, label }}
+			{#each tickItems as { value, label }, index (index)}
 				<RangeTick {label} {value} on:click={handleClick} />
 			{/each}
 		</rk-ticks>

package/src/Rating.svelte

@@ -76,7 +76,7 @@
 	{#if name}
 		<input {name} hidden type="number" bind:value min={0} {max} readOnly={disabled} />
 	{/if}
-	{#each stars as selected, index}
+	{#each stars as selected, index (index)}
 		{@const stateIcon = selected ? stateIcons.filled : stateIcons.empty}
 		{@const label = [placeholder, index + 1, 'out of', max].join(' ')}
 		<Icon

package/src/ResponsiveGrid.svelte

@@ -63,9 +63,9 @@
 	class="overflow-hidden {className}"
 	bind:clientWidth={width}
 >
-	{#each items as item, index}
+	{#each items as item, index (index)}
 		{@const segmentClass = 'col-' + (index + 1)}
-		{@const props = mapping.getAttribute(item, 'props')}
+		{@const props = mapping.get('props', item, {})}
 		{@const Template = item[mapping.fields.component]}
 		{#if small && equals(index, activeIndex)}
 			<rk-segment

package/src/SlidingColumns.svelte

@@ -34,7 +34,7 @@
 	class="relative grid h-full w-full overflow-hidden"
 	bind:clientWidth={width}
 >
-	{#each columns as column, index}
+	{#each columns as column, index (index)}
 		{#if index === activeIndex}
 			<rk-segment
 				class="slide absolute h-full w-full {column}"

package/src/Stepper.svelte

@@ -21,11 +21,11 @@
 </script>
 
 <div
-	class="stepper w-full flex flex-col items-center gap-3 border rounded p-8 shadow"
+	class="stepper flex w-full flex-col items-center gap-3 rounded border p-8 shadow"
 	style:--count={data.length}
 >
 	<row>
-		{#each data as { text, completed, active, steps }, stage}
+		{#each data as { text, completed, active, steps }, stage (stage)}
 			<div class="flex flex-col items-center justify-center first:col-start-2">
 				<Stage {text} {completed} {active} on:click={() => handleClick({ stage })} />
 			</div>
@@ -42,10 +42,10 @@
 		{/each}
 	</row>
 	<row>
-		{#each data as { label }, stage}
+		{#each data as { label }, stage (stage)}
 			{#if label}
 				<p
-					class="col-span-3 w-full flex justify-center font-medium leading-loose text-center text-neutral-800"
+					class="col-span-3 flex w-full justify-center text-center font-medium leading-loose text-neutral-800"
 					class:pending={stage > currentStage}
 				>
 					{label}
@@ -57,10 +57,10 @@
 
 <style lang="postcss">
 	.stepper row {
-		@apply w-full grid;
+		@apply grid w-full;
 		grid-template-columns: repeat(var(--count), 2fr 6fr 2fr);
 	}
 	.pending {
-		@apply text-neutral-500 font-light;
+		@apply font-light text-neutral-500;
 	}
 </style>

package/src/Summary.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { defaultMapping } from './constants'
 	import Item from './Item.svelte'
 	/**
 	 * @typedef {Object} Props

package/src/Switch.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { equals } from 'ramda'
-	import { noop } from '@rokkit/core'
+	import { noop, getSnippet, FieldMapper } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
 	import { defaultMapping } from './constants'
 
@@ -19,10 +19,12 @@
 		class: classes = '',
 		value = $bindable(),
 		options = [false, true],
-		mapping = defaultMapping,
+		fields,
 		compact = false,
 		disabled = false,
-		onchange = noop
+		onchange = noop,
+		stub,
+		...extra
 	} = $props()
 
 	let cursor = $state([])
@@ -50,6 +52,7 @@
 		prev: ['ArrowLeft', 'ArrowUp']
 	}
 	let useComponent = $derived(!options.every((item) => [false, true].includes(item)))
+	let mapper = new FieldMapper(fields)
 </script>
 
 {#if !Array.isArray(options) || options.length < 2}
@@ -72,13 +75,13 @@
 		onclick={handleClick}
 	>
 		{#each options as item, index (item)}
-			{@const Template = useComponent ? mapping.getComponent(item) : null}
+			{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
 			<rk-item class="relative" role="option" aria-selected={equals(item, value)} data-path={index}>
 				{#if equals(item, value)}
 					<rk-indicator class="absolute bottom-0 left-0 right-0 top-0"></rk-indicator>
 				{/if}
 				{#if Template}
-					<Template value={item} {mapping} />
+					<Template value={item} {fields} />
 				{/if}
 			</rk-item>
 		{/each}

package/src/TableCell.svelte

@@ -31,13 +31,13 @@
 		path = null
 	} = $props()
 
-	const Template = $derived(mapping.getComponent(value))
+	const Template = $derived(mapping.get('component', value))
 </script>
 
 <td class={classes}>
 	<rk-cell>
 		{#if path}
-			{#each levels.slice(0, -1) as _}
+			{#each levels.slice(0, -1) as level (level)}
 				<Connector type="empty" />
 			{/each}
 			{#if isParent}

package/src/Tabs.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { defaultFields, defaultStateIcons, noop, getSnippet } from '@rokkit/core'
-	import { ListProxy } from '@rokkit/states'
+	import { defaultFields, defaultStateIcons, noop, getSnippet, FieldMapper } from '@rokkit/core'
+	import { ListController } from '@rokkit/states'
 	import { navigator } from '@rokkit/actions'
 	import Icon from './Icon.svelte'
 	import Item from './Item.svelte'
@@ -34,8 +34,6 @@
 		...extra
 	} = $props()
 
-	let cursor = $state([])
-
 	function handleRemove(event) {
 		if (typeof event.detail === Object) {
 			event.detail[fields.isDeleted] = true
@@ -56,8 +54,9 @@
 		onselect({ item: value, indices: cursor })
 	}
 	let stateIcons = $derived({ ...defaultStateIcons.action, ...icons })
-	let filtered = $derived(options.filter((item) => !item[fields.isDeleted]))
-	let wrapper = new ListProxy(options, value, fields)
+	let filtered = $derived(options.filter((item) => !item[fields.deleted]))
+	let wrapper = $derived(new ListController(options, value, fields))
+	let mapper = new FieldMapper(fields)
 </script>
 
 <rk-tabs
@@ -67,15 +66,19 @@
 	class:justify-end={align === 'right'}
 	tabindex="0"
 	role="listbox"
-	use:navigator={{ wrapper }}
+	use:navigator={{ wrapper, horizontal: true }}
 	onaction={handleNav}
 	onremove={handleRemove}
 	onadd={handleAdd}
 >
-	{#each wrapper.nodes as item, index}
-		{@const Template = getSnippet(extra, item.get('component')) ?? stub}
+	{#each filtered as item, index (index)}
+		{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
 		<rk-tab>
-			<Template value={item} {mapping} />
+			{#if Template}
+				<Template value={item} {fields} />
+			{:else}
+				<Item value={item} {fields} />
+			{/if}
 			{#if editable}
 				<Icon
 					name="remove"

package/src/Toggle.svelte

@@ -1,8 +1,7 @@
 <script>
-	import { FieldMapper, noop } from '@rokkit/core'
+	// import { FieldMapper, noop } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
 	import Item from './Item.svelte'
-	import { defaultMapping } from './constants'
 
 	/**
 	 * @typedef {Object} Props
@@ -17,8 +16,9 @@
 		class: classes = '',
 		value = $bindable(null),
 		options = [false, true],
-		mapping = defaultMapping,
-		onchange = noop
+		fields,
+		label = 'toggle',
+		onchange
 	} = $props()
 
 	const keyMappings = {
@@ -37,7 +37,7 @@
 		}
 
 		value = options[nextIndex]
-		onchange(value)
+		onchange?.(value)
 	}
 </script>
 
@@ -47,8 +47,8 @@
 		onnext={() => toggle()}
 		onprev={() => toggle(-1)}
 		onclick={() => toggle()}
-		aria-label={mapping.getLabel(value)}
+		aria-label={label}
 	>
-		<Item {value} {mapping} />
+		<Item {value} {fields} />
 	</button>
 </rk-toggle>

package/src/Tree.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { createEmitter } from '@rokkit/core'
+	import { createEmitter, defaultFields } from '@rokkit/core'
 	import { navigator } from '@rokkit/actions'
 	import NestedList from './NestedList.svelte'
-	import { NestedProxy } from '@rokkit/states'
+	import { NestedController } from '@rokkit/states'
 	import { omit, has } from 'ramda'
 	/**
 	 * @typedef {Object} Props
@@ -13,6 +13,10 @@
 	 * @property {import('./types').NodeStateIcons|Object} [icons]
 	 * @property {boolean} [autoCloseSiblings=false]
 	 * @property {boolean} [multiselect=false]
+	 * @property {Function} [header]
+	 * @property {Function} [footer]
+	 * @property {Function} [empty]
+	 * @property {Function} [stub]
 	 */
 
 	/** @type {Props & { [key: string]: any }} */
@@ -24,37 +28,52 @@
 		icons = {},
 		autoCloseSiblings = false,
 		multiselect = false,
-		keys = null,
 		header,
 		footer,
 		empty,
+		stub,
 		...events
 	} = $props()
 
-	let emitter = createEmitter(events, ['select', 'move', 'collapse', 'expand'])
-	let wrapper = new NestedProxy(items, value, fields, { autoCloseSiblings, multiselect })
+	let emitter = createEmitter(events, ['select', 'move', 'toggle'])
+	let wrapper = new NestedController(items, value, fields, { autoCloseSiblings, multiselect })
+	let snippets = omit(['onselect', 'onmove', 'ontoggle'], events)
+	let derivedFields = $derived({ ...defaultFields, ...fields })
 
 	function handleAction(event) {
-		const { eventName, data } = event.detail
-		if (eventName === 'select') value = wrapper.currentNode?.value
-
-		if (has([eventName], emitter)) emitter[eventName](data)
+		const { name, data } = event.detail
+		if (name === 'select') value = data.value
+		if (has([name], emitter)) emitter[name](data)
 	}
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-tree tabindex="0" class={classes} use:navigator={{ wrapper }} onaction={handleAction}>
+<rk-tree
+	tabindex="0"
+	class={classes}
+	use:navigator={{ wrapper, nested: true }}
+	onaction={handleAction}
+>
 	{#if header}
 		<rk-header>{@render header()}</rk-header>
 	{/if}
-	{#if wrapper.nodes.length === 0}
+	{#if items.length === 0}
 		{#if empty}
 			{@render empty()}
 		{:else}
 			<div class="m-auto p-4 text-center text-gray-500">No data available</div>
 		{/if}
 	{/if}
-	<NestedList items={wrapper.nodes} {value} {icons} />
+	<NestedList
+		{items}
+		fields={derivedFields}
+		{value}
+		{icons}
+		focusedKey={wrapper.currentKey}
+		selectedKeys={wrapper.selectedKeys}
+		{stub}
+		{snippets}
+	/>
 	{#if footer}
 		<rk-footer>{@render footer()}</rk-footer>
 	{/if}

package/src/TreeTable.svelte

@@ -120,21 +120,21 @@
 	<table class:striped>
 		<thead>
 			<tr>
-				{#each columns as col}
+				{#each columns as col (col.key)}
 					<th>{col.label ?? col.key}</th>
 				{/each}
 			</tr>
 		</thead>
 		<tbody>
-			{#each visible as item, index}
+			{#each visible as item, index (index)}
 				<tr
 					class:cursor-pointer={!item._isParent}
 					aria-current={currentItem === item}
 					onclick={stopPropagation((e) => handleItemClick(e, item))}
 				>
-					{#each columns as col, index}
+					{#each columns as col, index (index)}
 						{@const value = { ...pick(['icon'], col), ...item }}
-						{@const SvelteComponent = mapping.getComponent(item)}
+						{@const SvelteComponent = mapping.get('component', item)}
 						<td>
 							<cell>
 								{#if multiselect && index === 0}
@@ -147,7 +147,7 @@
 									<!-- {/if} -->
 								{:else}
 									{#if col.path}
-										{#each item._levels.slice(0, -1) as _}
+										{#each item._levels.slice(0, -1) as _, index (index)}
 											<Connector type="empty" />
 										{/each}
 										{#if item._isParent}

package/src/ValidationReport.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <rk-status-report class={classes}>
-	{#each items as { text, status }}
+	{#each items as { text, status }, index (index)}
 		<rk-message class={status}>
 			<Icon name={icons[status]} />
 			<p>{text}</p>

package/src/index.js

@@ -25,7 +25,6 @@ export { default as Toggle } from './Toggle.svelte'
 export { default as Switch } from './Switch.svelte'
 export { default as List } from './List.svelte'
 export { default as Accordion } from './Accordion.svelte'
-export { default as NestedList } from './NestedList.svelte'
 export { default as Tree } from './Tree.svelte'
 export { default as Tabs } from './Tabs.svelte'
 export { default as Select } from './Select.svelte'

package/src/lib/tree.js

@@ -13,7 +13,7 @@ export function addRootNode(items, root = '/', mapping = defaultMapping) {
 		return [
 			{
 				[mapping.fields.text]: root,
-				[mapping.fields.isOpen]: true,
+				[mapping.fields.expanded]: true,
 				[mapping.fields.children]: items
 			}
 		]

package/src/wrappers/Category.svelte

@@ -1,13 +1,12 @@
 <script>
 	import { getContext } from 'svelte'
-	import { defaultFields, FieldMapper } from '@rokkit/core'
 
 	const registry = getContext('registry')
 
 	let {
 		class: className = '',
 		options = [],
-		fields = defaultFields,
+		fields,
 		navigator = 'tabs',
 		type = 'vertical',
 		category = null,
@@ -19,7 +18,9 @@
 </script>
 
 <section class={className}>
-	<Template {options} {fields} bind:value={category} {...restProps} />
+	{#if Template}
+		<Template {options} {fields} bind:value={category} {...restProps} />
+	{/if}
 	<field-layout class={type}>
 		{@render children?.()}
 	</field-layout>