@rokkit/ui 1.0.0-next.121 → 1.0.0-next.123

package/src/Tabs.svelte

@@ -1,96 +1,176 @@
 <script>
-	import { defaultFields, defaultStateIcons, noop, getSnippet, FieldMapper } from '@rokkit/core'
-	import { ListController } from '@rokkit/states'
+	import { createEmitter, getKeyFromPath, defaultStateIcons } from '@rokkit/core'
 	import { navigator } from '@rokkit/actions'
+	import { ListController } from '@rokkit/states'
+	import { Proxy } from '@rokkit/states'
+	import { has, equals, pick } from 'ramda'
 	import Icon from './Icon.svelte'
-	import Item from './Item.svelte'
 
 	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [options]
-	 * @property {import('@rokkit/core').FieldMapping} [fields]
-	 * @property {any} [value]
-	 * @property {boolean} [below]
-	 * @property {string} [align]
-	 * @property {boolean} [editable]
-	 * @property {any} [icons]
+	 * @typedef {Object} FieldMapping
+	 * @property {string} [id] - Field to use for item ID
+	 * @property {string} [label] - Field to use for item label/text
+	 * @property {string} [value] - Field to use for item value
+	 * @property {string} [content] - Field to use for tab content
+	 */
+
+	/**
+	 * @typedef {Object} TabProps
+	 * @property {string}                   [class]       - Additional CSS class names
+	 * @property {string}                   [name]        - Name for accessibility
+	 * @property {any[]}                    [options]       - Array of tab options to display
+	 * @property {FieldMapping}             [fields]      - Field mappings for extracting data
+	 * @property {'horizontal'|'vertical'}  [orientation] - Orientation of the tab bar
+	 * @property {'before' | 'after' }      [position]    - Position of the tab bar
+	 * @property {'start'|'center'|'end'}   [align]       - Alignment of the tab bar
+	 * @property {any}                      [value]       - Selected tab value (bindable)
+	 * @property {number}                   [tabindex]    - Tab index for keyboard navigation
+	 * @property {boolean}                  [editable]    - Whether tabs can be added/removed
+	 * @property {string}                   [placeholder] - Placeholder text for input field
+	 * @property {import('svelte').Snippet} [tabItem]       - Snippet for rendering tab headers
+	 * @property {import('svelte').Snippet} [tabPanel]    - Snippet for rendering tab content
+	 * @property {import('svelte').Snippet} [empty]       - Snippet for rendering empty state
+	 * @property {Function}                 [onselect]    - Callback when tab is selected
+	 * @property {Function}                 [onchange]    - Callback when tab changes
+	 * @property {Function}                 [onmove]      - Callback when focus moves
+	 * @property {Function}                 [onadd]       - Callback when tab is added
+	 * @property {Function}                 [onremove]    - Callback when tab is removed
 	 */
 
-	/** @type {Props} */
+	/** @type {TabProps} */
 	let {
-		class: className = '',
+		class: classes = '',
+		name = 'tabs',
 		options = $bindable([]),
-		value = $bindable(null),
-		icons = $bindable(defaultStateIcons.action),
-		fields = defaultFields,
-		below = false,
-		align = 'left',
+		fields = {},
+		value = $bindable(),
+		orientation = 'horizontal',
+		align = 'start',
+		position = 'before',
+		tabindex = 0,
 		editable = false,
-		onremove = noop,
-		onadd = noop,
-		onselect = noop,
-		stub,
-		...extra
+		tabItem,
+		tabPanel,
+		empty,
+		placeholder = 'Select a tab to view its content.',
+		icons,
+		onselect,
+		onchange,
+		onmove,
+		onadd,
+		onremove,
+		...restProps
 	} = $props()
 
-	function handleRemove(event) {
-		if (typeof event.detail === Object) {
-			event.detail[fields.isDeleted] = true
-		} else {
-			options = options.filter((i) => i !== event.detail)
-		}
+	/** @type {Proxy[]} */
+	let proxyItems = $derived(options.map((item) => new Proxy(item, fields)))
+	let tabItemSnippet = $derived(tabItem ?? defaultItem)
+	let tabPanelSnippet = $derived(tabPanel ?? defaultPanel)
+	let emptyMessage = $derived(empty ?? defaultEmpty)
+
+	function handleAction(event) {
+		const { name, data } = event.detail
 
-		onremove({ item: event.detail })
+		if (has(name, emitter)) {
+			value = data.value
+			emitter[name](data)
+		}
 	}
-	function handleAdd(event) {
-		event.stopPropagation()
-		onadd()
+
+	function handleAdd() {
+		onadd?.()
 	}
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
 
-		onselect({ item: value, indices: cursor })
+	function handleRemove(item) {
+		onremove?.(item)
 	}
-	let stateIcons = $derived({ ...defaultStateIcons.action, ...icons })
-	let filtered = $derived(options.filter((item) => !item[fields.deleted]))
-	let wrapper = $derived(new ListController(options, value, fields))
-	let mapper = new FieldMapper(fields)
+	let tabIcons = $derived({ ...pick(['add', 'close'], defaultStateIcons.action), ...icons })
+	let emitter = createEmitter({ onchange, onmove, onselect }, ['select', 'change', 'move'])
+	let wrapper = new ListController(options, value, fields)
+
+	$effect(() => wrapper.update(options))
 </script>
 
-<rk-tabs
-	class="flex w-full {className}"
-	class:is-below={below}
-	class:justify-center={align === 'center'}
-	class:justify-end={align === 'right'}
-	tabindex="0"
-	role="listbox"
-	use:navigator={{ wrapper, horizontal: true }}
-	onaction={handleNav}
-	onremove={handleRemove}
-	onadd={handleAdd}
+{#snippet defaultItem(item)}
+	{item.get('text') || item.get('label') || item.get('name')}
+{/snippet}
+
+{#snippet defaultPanel(item)}
+	<div data-tabs-content>
+		{item.get('content')}
+	</div>
+{/snippet}
+
+{#snippet defaultEmpty()}
+	No tabs available.
+{/snippet}
+
+<div
+	{...restProps}
+	data-tabs-root
+	data-orientation={orientation}
+	data-position={position}
+	data-align={align}
+	class={classes}
+	role="tablist"
+	aria-label={name}
+	use:navigator={{ wrapper, orientation }}
+	{tabindex}
+	onaction={handleAction}
 >
-	{#each filtered as item, index (index)}
-		{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
-		<rk-tab>
-			{#if Template}
-				<Template value={item} {fields} />
-			{:else}
-				<Item value={item} {fields} />
-			{/if}
-			{#if editable}
-				<Icon
-					name="remove"
-					role="button"
-					label="Delete Tab"
-					size="small"
-					onclick={() => handleRemove(item)}
-				/>
-			{/if}
-		</rk-tab>
-	{/each}
-	{#if editable}
-		<Icon name="add" role="button" label="Add Tab" size="small" onclick={handleAdd} />
+	{#if proxyItems.length === 0}
+		<div data-tabs-empty>
+			{@render emptyMessage()}
+		</div>
+	{:else if wrapper.focusedKey === null && value === null}
+		<div data-tabs-placeholder>
+			{placeholder}
+		</div>
 	{/if}
-</rk-tabs>
+	<div data-tabs-list>
+		{#each proxyItems as item, index (index)}
+			{@const key = getKeyFromPath([index])}
+			{@const isSelected = equals(item.value, value)}
+			{@const isFocused = wrapper.focusedKey === key}
+			<button
+				data-tabs-trigger
+				data-path={getKeyFromPath([index])}
+				role="tab"
+				aria-selected={isSelected}
+				aria-controls="tab-panel-{index}"
+				class:selected={isSelected}
+				class:focused={isFocused}
+				tabindex="0"
+				id={`tab-${index}`}
+			>
+				{@render tabItemSnippet(item)}
+				{#if editable}
+					<Icon
+						data-icon-remove
+						name={tabIcons.close}
+						role="button"
+						onclick={() => handleRemove(item.value)}
+					/>
+				{/if}
+			</button>
+		{/each}
+		{#if editable}
+			<Icon data-icon-add name={tabIcons.add} role="button" onclick={handleAdd} />
+		{/if}
+	</div>
+
+	<!-- Tab Panels -->
+	{#each proxyItems as item, index (index)}
+		{@const isVisible = equals(item.value, value)}
+
+		<div
+			data-tabs-panel
+			role="tabpanel"
+			id="tab-panel-{index}"
+			aria-labelledby="tab-{index}"
+			data-panel-active={isVisible}
+		>
+			{@render tabPanelSnippet(item)}
+		</div>
+	{/each}
+</div>

package/src/Toggle.svelte

@@ -18,6 +18,7 @@
 		options = [false, true],
 		fields,
 		disabled = false,
+		square = false,
 		label = 'toggle',
 		onchange
 	} = $props()
@@ -44,7 +45,7 @@
 	}
 </script>
 
-<div data-toggle-root data-disabled={disabled} class={classes}>
+<div data-toggle-root data-disabled={disabled} data-square={square} class={classes}>
 	<button
 		use:keyboard={keyMappings}
 		onnext={() => toggle()}

package/src/ToggleThemeMode.svelte

@@ -3,17 +3,21 @@
 	import { vibe } from '@rokkit/states'
 	import Toggle from './Toggle.svelte'
 
-	let { icons = defaultStateIcons.mode, labels = ['Light Mode', 'Dark Mode'] } = $props()
+	let {
+		icons = defaultStateIcons.mode,
+		labels = ['Light Mode', 'Dark Mode'],
+		square = false
+	} = $props()
 
 	const options = $state([
 		{ label: labels[0], value: 'light', icon: icons.light },
 		{ label: labels[1], value: 'dark', icon: icons.dark }
 	])
-	let value = $state(options.find((x) => x.value === vibe.mode))
+	let value = $derived(options.find((x) => x.value === vibe.mode))
 
 	function update(e) {
 		vibe.mode = e.value
 	}
 </script>
 
-<Toggle bind:value {options} onchange={update} />
+<Toggle {value} {options} onchange={update} {square} />

package/src/index.js

@@ -39,14 +39,10 @@ export { default as Overlay } from './Overlay.svelte'
 export { default as Message } from './Message.svelte'
 export { default as SlidingColumns } from './SlidingColumns.svelte'
 
-export { default as InputField } from './input/InputField.svelte'
-export { default as Form } from './Form.svelte'
-export { default as FieldLayout } from './FieldLayout.svelte'
-export { default as DataEditor } from './DataEditor.svelte'
-export { default as NestedEditor } from './NestedEditor.svelte'
 export { default as Stepper } from './Stepper.svelte'
 export { default as ProgressDots } from './ProgressDots.svelte'
 
 export { default as Card } from './Card.svelte'
 export { default as Shine } from './Shine.svelte'
 export { default as Tilt } from './Tilt.svelte'
+export { default as GraphPaper } from './GraphPaper.svelte'

package/src/tree/List.spec.svelte.js

@@ -0,0 +1,84 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { cleanup, render, fireEvent } from '@testing-library/svelte'
+import List from './List.svelte'
+
+const fields = {
+	children: 'children',
+	expanded: 'expanded',
+	text: 'text'
+}
+
+function makeTreeData() {
+	return [
+		{
+			text: 'Root 1',
+			expanded: true,
+			children: [
+				{ text: 'Child 1.1', expanded: false, children: [] },
+				{ text: 'Child 1.2', expanded: false, children: [] }
+			]
+		},
+		{
+			text: 'Root 2',
+			expanded: false,
+			children: [{ text: 'Child 2.1', expanded: false, children: [] }]
+		}
+	]
+}
+
+describe('List.svelte', () => {
+	beforeEach(() => cleanup())
+
+	it('renders all root nodes', () => {
+		const items = makeTreeData()
+		const { container, getByText } = render(List, { props: { items, fields } })
+		expect(getByText('Root 1')).toBeTruthy()
+		expect(getByText('Root 2')).toBeTruthy()
+		expect(container).toMatchSnapshot()
+	})
+
+	it('renders children when expanded', () => {
+		const items = makeTreeData()
+		const { container, getByText } = render(List, { props: { items, fields } })
+		expect(getByText('Child 1.1')).toBeTruthy()
+		expect(getByText('Child 1.2')).toBeTruthy()
+		// Child 2.1 should not be rendered because Root 2 is not expanded
+		expect(() => getByText('Child 2.1')).toThrow()
+		expect(container).toMatchSnapshot()
+	})
+
+	it('renders leaf and branch data attributes', () => {
+		const items = makeTreeData()
+		const { container } = render(List, { props: { items, fields } })
+		const nodes = container.querySelectorAll('[data-tree-node]')
+		expect(nodes.length).toBeGreaterThan(0)
+		// At least one branch and one leaf
+		const branch = container.querySelector('[data-tree-branch]')
+		const leaf = container.querySelector('[data-tree-leaf]')
+		expect(branch).toBeTruthy()
+		expect(leaf).toBeTruthy()
+		expect(container).toMatchSnapshot()
+	})
+
+	it('passes focused and selected props', () => {
+		const items = makeTreeData()
+		const selectedKeys = new Set(['0'])
+		const { container } = render(List, {
+			props: { items, fields, focusedKey: '0', selectedKeys }
+		})
+		const focusedNode = container.querySelector('[data-tree-node][aria-current="true"]')
+		const selectedNode = container.querySelector('[data-tree-node][aria-selected="true"]')
+		expect(focusedNode).toBeTruthy()
+		expect(selectedNode).toBeTruthy()
+		expect(container).toMatchSnapshot()
+	})
+
+	it('renders nested lists recursively', () => {
+		const items = makeTreeData()
+		const { container } = render(List, { props: { items, fields } })
+		// Should have nested data-tree-list elements
+		const lists = container.querySelectorAll('[data-tree-list]')
+		expect(lists.length).toBeGreaterThan(1)
+		expect(container).toMatchSnapshot()
+	})
+})

package/src/tree/List.svelte

@@ -0,0 +1,78 @@
+<script>
+	import Node from './Node.svelte'
+	import List from './List.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {Array<any>} items
+	 * @property {any} value
+	 * @property {Object} fields
+	 * @property {Array<number>} [path]
+	 * @property {Object} icons
+	 * @property {Array<string>} [types]
+	 * @property {string} [focusedKey]
+	 * @property {Set<string>} [selectedKeys]
+	 * @property {Function} [stub]
+	 * @property {Object<string, Function>} [snippets]
+	 */
+
+	/** @type {Props} */
+	let {
+		items = $bindable([]),
+		value = $bindable(null),
+		fields,
+		path = [],
+		icons = {},
+		types = [],
+		focusedKey,
+		selectedKeys = new Set(),
+		stub,
+		snippets
+	} = $props()
+
+	// Helper to check if a node has children
+	function hasChildren(node, fields) {
+		return Array.isArray(node?.[fields.children]) && node[fields.children].length > 0
+	}
+
+	// Helper to get key from path
+	function getKeyFromPath(path) {
+		return path.join('-')
+	}
+</script>
+
+<div data-tree-list role="group">
+	{#each items as item, index (index)}
+		{@const nodePath = [...path, index]}
+		{@const key = getKeyFromPath(nodePath)}
+		{@const expanded = item[fields.expanded]}
+		{@const isBranch = hasChildren(item, fields)}
+		<Node
+			value={item}
+			{fields}
+			{icons}
+			{types}
+			focused={focusedKey === key}
+			selected={selectedKeys.has(key)}
+			{expanded}
+			path={nodePath}
+			{stub}
+			{snippets}
+		>
+			{#if isBranch && expanded}
+				<List
+					items={item[fields.children]}
+					{value}
+					{fields}
+					path={nodePath}
+					{icons}
+					{types}
+					{focusedKey}
+					{selectedKeys}
+					{stub}
+					{snippets}
+				/>
+			{/if}
+		</Node>
+	{/each}
+</div>

package/src/tree/Node.spec.svelte.js

@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { cleanup, render, fireEvent } from '@testing-library/svelte'
+import Node from './Node.svelte'
+
+describe('Node.svelte', () => {
+	const fields = {
+		text: 'label',
+		children: 'children',
+		expanded: 'expanded',
+		snippet: 'snippet'
+	}
+
+	const baseNode = {
+		label: 'Root Node',
+		expanded: false,
+		children: []
+	}
+
+	beforeEach(() => cleanup())
+
+	it('renders node with label', () => {
+		const { container, getByText } = render(Node, {
+			props: {
+				value: baseNode,
+				fields,
+				path: [0],
+				focused: false,
+				selected: false,
+				expanded: false
+			}
+		})
+		const contentEl = container.querySelector('[data-tree-content]')
+		expect(contentEl).not.toBeNull()
+		expect(contentEl.textContent).toContain('Root Node')
+		expect(container).toMatchSnapshot()
+	})
+
+	it('sets data-tree-leaf for leaf node', () => {
+		const { container } = render(Node, {
+			props: {
+				value: baseNode,
+				fields,
+				path: [0]
+			}
+		})
+		const nodeDiv = container.querySelector('[data-tree-node]')
+		expect(nodeDiv.getAttribute('data-tree-leaf')).toBe('true')
+		expect(nodeDiv.getAttribute('data-tree-branch')).toBeNull()
+		expect(container).toMatchSnapshot()
+	})
+
+	it('sets data-tree-branch for branch node', () => {
+		const branchNode = {
+			label: 'Branch Node',
+			expanded: true,
+			children: [{ label: 'Child', expanded: false, children: [] }]
+		}
+		const { container } = render(Node, {
+			props: {
+				value: branchNode,
+				fields,
+				path: [0]
+			}
+		})
+		const nodeDiv = container.querySelector('[data-tree-node]')
+		expect(nodeDiv.getAttribute('data-tree-branch')).toBe('true')
+		expect(nodeDiv.getAttribute('data-tree-leaf')).toBeNull()
+		expect(container).toMatchSnapshot()
+	})
+
+	it('sets aria attributes correctly', () => {
+		const { container } = render(Node, {
+			props: {
+				value: baseNode,
+				fields,
+				path: [0],
+				focused: true,
+				selected: true,
+				expanded: true
+			}
+		})
+		const nodeDiv = container.querySelector('[data-tree-node]')
+		expect(nodeDiv.getAttribute('aria-current')).toBe('true')
+		expect(nodeDiv.getAttribute('aria-selected')).toBe('true')
+		expect(nodeDiv.getAttribute('aria-expanded')).toBe('true')
+		expect(container).toMatchSnapshot()
+	})
+
+	// it('renders custom snippet if provided', () => {
+	// 	const snippet = (node) => `<span>Custom: ${node.label}</span>`
+	// 	const { container, getByText } = render(Node, {
+	// 		props: {
+	// 			value: baseNode,
+	// 			fields,
+	// 			path: [0],
+	// 			snippets: { [baseNode.snippet]: snippet }
+	// 		}
+	// 	})
+	// 	const contentEl = container.querySelector('[data-tree-content]')
+	// 	expect(contentEl).not.toBeNull()
+	// 	expect(contentEl.textContent).toContain('Custom: Root Node')
+	// 	expect(container).toMatchSnapshot()
+	// })
+})

package/src/tree/Node.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { defaultStateIcons, getKeyFromPath, getSnippet } from '@rokkit/core'
+  import Icon from '../Icon.svelte'
+  import Connector from '../Connector.svelte'
+  import Item from '../Item.svelte'
+
+  /**
+   * @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
+   * @property {boolean} selected
+   * @property {boolean} expanded
+   * @property {Function} children
+   * @property {Function} stub
+   * @property {Object<string, Function>} snippets
+   */
+
+  /** @type {Props} */
+  let {
+    value = $bindable(null),
+    fields,
+    types = [],
+    stateIcons = defaultStateIcons.node,
+    path = [],
+    focused = false,
+    selected = false,
+    expanded = false,
+    children,
+    stub = null,
+    snippets = {}
+  } = $props()
+
+  let stateName = $derived(expanded ? 'opened' : 'closed')
+  let icons = $derived({ ...defaultStateIcons.node, ...stateIcons })
+  let state = $derived(
+    expanded ? { icon: icons.opened, label: 'collapse' } : { icon: icons.closed, label: 'expand' }
+  )
+
+  const template = getSnippet(value[fields.snippet], snippets, stub)
+  const isLeaf = !value?.[fields.children] || value[fields.children]?.length === 0
+</script>
+
+<div
+  data-tree-node
+  data-tree-leaf={isLeaf ? true : undefined}
+  data-tree-branch={!isLeaf ? true : undefined}
+  aria-current={focused}
+  aria-selected={selected}
+  aria-expanded={expanded}
+  role="treeitem"
+  data-path={getKeyFromPath(path)}
+  data-depth={path.length}
+  tabindex="-1"
+  class="flex flex-row items-center"
+>
+  {#each types as type, index (index)}
+    {#if type === 'icon'}
+      <Icon name={state.icon} label={state.label} state={stateName} class="w-4" size="small" />
+    {:else}
+      <Connector {type} />
+    {/if}
+  {/each}
+  <div data-tree-content>
+    <svelte:boundary>
+      {#if template}
+        {@render template(value)}
+        {#snippet failed()}
+          <Item {value} {fields} />
+        {/snippet}
+      {:else}
+        <Item {value} {fields} />
+      {/if}
+    </svelte:boundary>
+  </div>
+  {@render children?.()}
+</div>