@rokkit/ui 1.4.0 → 1.4.1

package/dist/components/CodeGroup.svelte

@@ -92,31 +92,45 @@
 	// carrying the original path as its id. Folder nodes get their icon
 	// from the Tree's default state (it owns folder open/closed via its
 	// own icons prop); file leaves get the per-extension semantic icon.
-	const tree = $derived.by(() => {
-		const root: unknown[] = []
-		const lookup: Record<string, Record<string, unknown>> = {}
-		for (const f of files) {
-			const parts = f.path.split('/').filter(Boolean)
-			let parentChildren = root
-			let acc = ''
-			for (let i = 0; i < parts.length; i++) {
-				const part = parts[i]
-				const isLeaf = i === parts.length - 1
-				acc = acc ? `${acc}/${part}` : part
-				let node = lookup[acc]
-				if (!node) {
-					node = {
-						id: acc,
-						name: part,
-						icon: isLeaf ? iconForFile(f) : undefined,
-						children: isLeaf ? undefined : []
-					}
-					lookup[acc] = node
-					parentChildren.push(node)
-				}
-				if (!isLeaf) parentChildren = node.children as unknown[]
+	const makeNode = (id: string, name: string, isLeaf: boolean, icon?: string) => ({
+		id,
+		name,
+		icon,
+		children: isLeaf ? undefined : []
+	})
+
+	/**
+	 * Insert one file's path into the tree, creating any missing folder nodes on
+	 * the way down. `lookup` is prototype-less: a path segment literally named
+	 * `constructor` or `toString` would otherwise find an inherited value and be
+	 * treated as an already-created node.
+	 */
+	function insertPath(
+		f: (typeof files)[number],
+		root: unknown[],
+		lookup: Record<string, Record<string, unknown>>
+	) {
+		const parts = f.path.split('/').filter(Boolean)
+		let parentChildren = root
+		let acc = ''
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i]
+			const isLeaf = i === parts.length - 1
+			acc = acc ? `${acc}/${part}` : part
+			let node = lookup[acc]
+			if (!node) {
+				node = makeNode(acc, part, isLeaf, isLeaf ? iconForFile(f) : undefined)
+				lookup[acc] = node
+				parentChildren.push(node)
 			}
+			if (!isLeaf) parentChildren = node.children as unknown[]
 		}
+	}
+
+	const tree = $derived.by(() => {
+		const root: unknown[] = []
+		const lookup: Record<string, Record<string, unknown>> = Object.create(null)
+		for (const f of files) insertPath(f, root, lookup)
 		return root
 	})
 

package/dist/components/List.svelte

@@ -66,11 +66,46 @@
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.accordion, ...userIcons })
 
+	/**
+	 * The outbound half of `value`. It is two-way: inbound it decides `data-active`
+	 * and which group is expanded; outbound a selection publishes the new value.
+	 * This is the only place `value` is written.
+	 *
+	 * Three deliberate details:
+	 *
+	 * - `proxy.disabled` bails, matching Select. A disabled row is unreachable by
+	 *   pointer (base CSS sets `pointer-events: none`) but not by the keyboard.
+	 *
+	 * - The write is skipped when nothing changed. `onselect` fires on EVERY
+	 *   activation, re-activating the already-active row included, and writing
+	 *   unconditionally would invalidate `value` for every consumer and re-run both
+	 *   effects below — including `syncExpandedGroups`, which would collapse any
+	 *   group the user had opened by hand — for no actual change.
+	 *
+	 * - The write lands BEFORE the consumer's callback, so a consumer reading the
+	 *   bound variable inside `onselect` sees the new value, and a consumer that
+	 *   assigns its own (transformed, or reverted) value writes last and wins. That
+	 *   ordering is what keeps existing `onselect={(v) => (mine = v)}` code behaving
+	 *   exactly as it did before `value` became two-way.
+	 *
+	 * No feedback loop: this runs from a DOM event, never from an effect, so writing
+	 * a prop here cannot re-enter the effects that read it. `moveToValue` then
+	 * re-syncs to the value it already holds and settles.
+	 *
+	 * Persisting the write needs `bind:value` — assigning a non-bound `$bindable`
+	 * updates only the local fallback, same as every other Svelte component.
+	 */
+	function handleSelect(next: unknown, proxy: ProxyItem) {
+		if (proxy.disabled) return
+		if (next !== value) value = next
+		onselect?.(next, proxy)
+	}
+
 	// Single source of truth.
 	// Navigator calls wrapper[action](path) → focusedKey / proxy.expanded updates →
 	// flatView $derived re-computes → Svelte re-renders the changed nodes.
 	const proxyTree = $derived(new ProxyTree(items, fields))
-	const wrapper = $derived(new Wrapper(proxyTree, { onselect, collapsible }))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect, collapsible }))
 
 	let listRef = $state<HTMLElement | null>(null)
 
@@ -117,6 +152,9 @@
 	$effect(syncExpandedGroups)
 
 	// ─── Sync external value → focused key ────────────────────────────────────
+	// The inbound half of the two-way `value`. Safe against the outbound write in
+	// handleSelect: moveToValue only assigns focusedKey/selectedValue, neither of
+	// which this effect reads, so a selection settles in one pass.
 
 	$effect(() => {
 		wrapper.moveToValue(value)

package/dist/components/Select.svelte

@@ -209,39 +209,50 @@
 
 	// ─── Trigger action ───────────────────────────────────────────────────────
 
+	/** Bring `el` into view inside the dropdown only — never scroll an ancestor. */
+	function scrollIntoDropdown(el: HTMLElement) {
+		if (!dropdownRef) return
+		const top = el.offsetTop
+		const bottom = top + el.offsetHeight
+		if (top < dropdownRef.scrollTop) {
+			dropdownRef.scrollTop = top
+		} else if (bottom > dropdownRef.scrollTop + dropdownRef.clientHeight) {
+			dropdownRef.scrollTop = bottom - dropdownRef.clientHeight
+		}
+	}
+
+	/**
+	 * Move DOM focus to the wrapper's focused item so subsequent keydown events
+	 * fire inside the dropdown, where Navigator is listening. preventScroll plus
+	 * the dropdown-only scroll above keeps ancestor containers still.
+	 */
+	function focusFocusedItem() {
+		if (!dropdownRef) return
+		const key = wrapper.focusedKey
+		if (!key) return
+		const el = dropdownRef.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+		if (!el) return
+		el.focus({ preventScroll: true })
+		scrollIntoDropdown(el)
+	}
+
+	/** Where focus lands once the dropdown is open: the filter box, or the current item. */
+	function handleOpened() {
+		if (filterable) {
+			filterInputRef?.focus()
+			return
+		}
+		focusSelectedOrFirst()
+		requestAnimationFrame(focusFocusedItem)
+	}
+
 	$effect(() => {
 		if (!triggerRef || !selectRef || disabled) return
 		const t = new Trigger(triggerRef, selectRef, {
 			isOpen: () => isOpen,
 			onopen: () => {
 				isOpen = true
-				requestAnimationFrame(() => {
-					if (filterable) {
-						filterInputRef?.focus()
-						return
-					}
-					focusSelectedOrFirst()
-					// Move DOM focus to the wrapper's focused item so subsequent
-					// keydown events fire inside the dropdown (Navigator is
-					// listening there). preventScroll + dropdown-only scroll
-					// to avoid moving ancestor containers.
-					requestAnimationFrame(() => {
-						if (!dropdownRef) return
-						const key = wrapper.focusedKey
-						if (!key) return
-						const el = dropdownRef.querySelector(`[data-path="${key}"]`) as HTMLElement | null
-						if (el) {
-							el.focus({ preventScroll: true })
-							const top = el.offsetTop
-							const bottom = top + el.offsetHeight
-							if (top < dropdownRef.scrollTop) {
-								dropdownRef.scrollTop = top
-							} else if (bottom > dropdownRef.scrollTop + dropdownRef.clientHeight) {
-								dropdownRef.scrollTop = bottom - dropdownRef.clientHeight
-							}
-						}
-					})
-				})
+				requestAnimationFrame(handleOpened)
 			},
 			onclose: () => {
 				isOpen = false

package/dist/components/Tree.svelte

@@ -46,8 +46,23 @@
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
 
+	/**
+	 * The outbound half of `value` — see List's handleSelect for the full
+	 * reasoning; the contract is identical. Skips disabled nodes, skips a write
+	 * that wouldn't change anything, and writes before notifying so a consumer's
+	 * own assignment in `onselect` still wins.
+	 *
+	 * Runs from a DOM event rather than an effect, so writing the prop here cannot
+	 * re-enter the moveToValue effect below.
+	 */
+	function handleSelect(next: unknown, proxy: ProxyItem) {
+		if (proxy.disabled) return
+		if (next !== value) value = next
+		onselect?.(next, proxy)
+	}
+
 	const proxyTree = $derived(new ProxyTree(items, fields))
-	const wrapper = $derived(new LazyWrapper(proxyTree, { onselect }))
+	const wrapper = $derived(new LazyWrapper(proxyTree, { onselect: handleSelect }))
 
 	let treeRef = $state<HTMLElement | null>(null)
 

package/package.json

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