@rokkit/ui 1.0.0-next.137 → 1.0.0-next.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.137",
+  "version": "1.0.0-next.139",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/components/Carousel.svelte

@@ -88,7 +88,6 @@
 	})
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	data-carousel

package/src/components/FloatingAction.svelte

@@ -98,18 +98,24 @@
 		trigger?.focus()
 	}
 
+	/**
+	 * Move DOM focus to the menu item at the given index
+	 */
+	function focusDomItem(index: number) {
+		const menu = fabRef?.querySelector('[data-fab-menu]')
+		if (!menu) return
+		const menuItems = menu.querySelectorAll('[data-fab-item]:not([data-disabled])')
+		const menuItem = menuItems[index] as HTMLElement | undefined
+		menuItem?.focus()
+	}
+
 	/**
 	 * Focus an item by index
 	 */
 	function focusItem(index: number) {
 		if (index < 0 || index >= flatItems.length) return
 		focusedIndex = index
-		const menu = fabRef?.querySelector('[data-fab-menu]')
-		if (menu) {
-			const menuItems = menu.querySelectorAll('[data-fab-item]:not([data-disabled])')
-			const menuItem = menuItems[index] as HTMLElement | undefined
-			menuItem?.focus()
-		}
+		focusDomItem(index)
 	}
 
 	/**
@@ -125,42 +131,65 @@
 		}
 	}
 
+	/**
+	 * Close menu and return focus to trigger
+	 */
+	function closeAndFocusTrigger() {
+		close()
+		const trigger = fabRef?.querySelector('[data-fab-trigger]') as HTMLElement | undefined
+		trigger?.focus()
+	}
+
+	/**
+	 * Activate the currently focused item
+	 */
+	function activateFocusedItem() {
+		if (focusedIndex >= 0 && focusedIndex < flatItems.length) {
+			handleItemClick(flatItems[focusedIndex])
+		}
+	}
+
+	function wrapNext(current: number, last: number): number {
+		return current < last ? current + 1 : 0
+	}
+
+	function wrapPrev(current: number, last: number): number {
+		return current > 0 ? current - 1 : last
+	}
+
+	function nextFabIndex(key: string, current: number, last: number): number {
+		if (key === 'ArrowDown') return wrapNext(current, last)
+		if (key === 'ArrowUp') return wrapPrev(current, last)
+		if (key === 'Home') return 0
+		if (key === 'End') return last
+		return -1
+	}
+
+	function handleFabNavMove(event: KeyboardEvent): boolean {
+		const last = flatItems.length - 1
+		const next = nextFabIndex(event.key, focusedIndex, last)
+		if (next === -1) return false
+		focusItem(next)
+		return true
+	}
+
+	function isActivateKey(key: string): boolean {
+		return key === 'Enter' || key === ' '
+	}
+
 	/**
 	 * Handle keyboard navigation when menu is open
 	 */
 	function handleKeyDown(event: KeyboardEvent) {
 		if (!open) return
-
-		switch (event.key) {
-			case 'Escape':
-				event.preventDefault()
-				close()
-				const trigger = fabRef?.querySelector('[data-fab-trigger]') as HTMLElement | undefined
-				trigger?.focus()
-				break
-			case 'ArrowDown':
-				event.preventDefault()
-				focusItem(focusedIndex < flatItems.length - 1 ? focusedIndex + 1 : 0)
-				break
-			case 'ArrowUp':
-				event.preventDefault()
-				focusItem(focusedIndex > 0 ? focusedIndex - 1 : flatItems.length - 1)
-				break
-			case 'Home':
-				event.preventDefault()
-				focusItem(0)
-				break
-			case 'End':
-				event.preventDefault()
-				focusItem(flatItems.length - 1)
-				break
-			case 'Enter':
-			case ' ':
-				event.preventDefault()
-				if (focusedIndex >= 0 && focusedIndex < flatItems.length) {
-					handleItemClick(flatItems[focusedIndex])
-				}
-				break
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			closeAndFocusTrigger()
+		} else if (isActivateKey(event.key)) {
+			event.preventDefault()
+			activateFocusedItem()
+		} else if (handleFabNavMove(event)) {
+			event.preventDefault()
 		}
 	}
 

package/src/components/FloatingNavigation.svelte

@@ -61,65 +61,95 @@
 		if (!pinned) expanded = false
 	}
 
+	function getItemHref(item: { proxy: ProxyItem; original: Record<string, unknown> }): string {
+		if (item.proxy.get('href') === undefined) return ''
+		return String(item.original[userFields?.href ?? 'href'] ?? '')
+	}
+
+	function resolveTargetId(item: { proxy: ProxyItem; original: Record<string, unknown> }): string {
+		const href = getItemHref(item)
+		return href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
+	}
+
 	function handleItemClick(item: { proxy: ProxyItem; original: Record<string, unknown> }) {
 		value = item.proxy.value
 		onselect?.(item.proxy.value, item.original)
-
-		// Smooth scroll to target section
-		const href =
-			item.proxy.get('href') !== undefined
-				? String(item.original[userFields?.href ?? 'href'] ?? '')
-				: ''
-		const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
-		const el = document.getElementById(targetId)
+		const el = document.getElementById(resolveTargetId(item))
 		el?.scrollIntoView({ behavior: 'smooth' })
 	}
 
+	function activateFocusedItem() {
+		if (focusedIndex >= 0 && focusedIndex < itemProxies.length) {
+			handleItemClick(itemProxies[focusedIndex])
+		}
+	}
+
+	const nextKey = $derived(isVertical ? 'ArrowDown' : 'ArrowRight')
+	const prevKey = $derived(isVertical ? 'ArrowUp' : 'ArrowLeft')
+
+	function wrapNext(current: number, last: number): number {
+		return current < last ? current + 1 : 0
+	}
+
+	function wrapPrev(current: number, last: number): number {
+		return current > 0 ? current - 1 : last
+	}
+
+	function getNextNavIndex(key: string, current: number, last: number): number {
+		if (key === nextKey) return wrapNext(current, last)
+		if (key === prevKey) return wrapPrev(current, last)
+		if (key === 'Home') return 0
+		if (key === 'End') return last
+		return -1
+	}
+
+	function handleNavMove(event: KeyboardEvent): boolean {
+		const last = itemProxies.length - 1
+		const next = getNextNavIndex(event.key, focusedIndex, last)
+		if (next === -1) return false
+		focusItem(next)
+		return true
+	}
+
+	function isActivateKey(key: string): boolean {
+		return key === 'Enter' || key === ' '
+	}
+
 	function handleKeyDown(event: KeyboardEvent) {
-		const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight'
-		const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft'
-
-		switch (event.key) {
-			case nextKey:
-				event.preventDefault()
-				focusItem(focusedIndex < itemProxies.length - 1 ? focusedIndex + 1 : 0)
-				break
-			case prevKey:
-				event.preventDefault()
-				focusItem(focusedIndex > 0 ? focusedIndex - 1 : itemProxies.length - 1)
-				break
-			case 'Home':
-				event.preventDefault()
-				focusItem(0)
-				break
-			case 'End':
-				event.preventDefault()
-				focusItem(itemProxies.length - 1)
-				break
-			case 'Enter':
-			case ' ':
-				event.preventDefault()
-				if (focusedIndex >= 0 && focusedIndex < itemProxies.length) {
-					handleItemClick(itemProxies[focusedIndex])
-				}
-				break
-			case 'Escape':
-				if (!pinned) {
-					event.preventDefault()
-					expanded = false
-				}
-				break
+		if (isActivateKey(event.key)) {
+			event.preventDefault()
+			activateFocusedItem()
+		} else if (event.key === 'Escape' && !pinned) {
+			event.preventDefault()
+			expanded = false
+		} else if (handleNavMove(event)) {
+			event.preventDefault()
 		}
 	}
 
+	function focusDomItem(index: number) {
+		const itemsContainer = navRef?.querySelector('[data-floating-nav-items]')
+		if (!itemsContainer) return
+		const navItems = itemsContainer.querySelectorAll('[data-floating-nav-item]')
+		const item = navItems[index] as HTMLElement | undefined
+		item?.focus()
+	}
+
 	function focusItem(index: number) {
 		if (index < 0 || index >= itemProxies.length) return
 		focusedIndex = index
-		const itemsContainer = navRef?.querySelector('[data-floating-nav-items]')
-		if (itemsContainer) {
-			const navItems = itemsContainer.querySelectorAll('[data-floating-nav-item]')
-			const item = navItems[index] as HTMLElement | undefined
-			item?.focus()
+		focusDomItem(index)
+	}
+
+	function matchesEntryId(item: { proxy: ProxyItem; original: Record<string, unknown> }, id: string): boolean {
+		return resolveTargetId(item) === id
+	}
+
+	function handleIntersection(entries: IntersectionObserverEntry[]) {
+		for (const entry of entries) {
+			if (!entry.isIntersecting) continue
+			const match = itemProxies.find((item) => matchesEntryId(item, entry.target.id))
+			if (match) value = match.proxy.value
 		}
 	}
 
@@ -127,30 +157,10 @@
 	$effect(() => {
 		if (!observe || itemProxies.length === 0) return
 
-		const observer = new IntersectionObserver((entries) => {
-			for (const entry of entries) {
-				if (entry.isIntersecting) {
-					const match = itemProxies.find((item) => {
-						const href =
-							item.proxy.get('href') !== undefined
-								? String(item.original[userFields?.href ?? 'href'] ?? '')
-								: ''
-						const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
-						return targetId === entry.target.id
-					})
-					if (match) {
-						value = match.proxy.value
-					}
-				}
-			}
-		}, observerOptions)
+		const observer = new IntersectionObserver(handleIntersection, observerOptions)
 
 		for (const item of itemProxies) {
-			const href =
-				item.proxy.get('href') !== undefined
-					? String(item.original[userFields?.href ?? 'href'] ?? '')
-					: ''
-			const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
+			const targetId = resolveTargetId(item)
 			const el = document.getElementById(targetId)
 			if (el) observer.observe(el)
 		}

package/src/components/LazyTree.svelte

@@ -57,7 +57,7 @@
 					f,
 					key,
 					level,
-					onlazyload ? async (_value, rawItem) => onlazyload(rawItem) : null
+					onlazyload ? (_value, rawItem) => onlazyload(rawItem) : null
 				)
 		})
 	)
@@ -77,7 +77,6 @@
 	})
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={treeRef}
 	data-tree

package/src/components/List.svelte

@@ -99,7 +99,6 @@
 	{/if}
 {/snippet}
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <nav
 	bind:this={listRef}
 	data-list

package/src/components/Menu.svelte

@@ -214,7 +214,6 @@
 	</button>
 
 	{#if isOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div bind:this={dropdownRef} data-menu-dropdown role="menu" aria-orientation="vertical">
 			{#each wrapper.flatView as node (node.key)}
 				{@const proxy = node.proxy}

package/src/components/MultiSelect.svelte

@@ -27,6 +27,7 @@
 	// @ts-nocheck
 	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree } from '@rokkit/states'
+	import { SvelteSet } from 'svelte/reactivity'
 	import { Navigator, Trigger } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
 	import ItemContent from './ItemContent.svelte'
@@ -133,65 +134,52 @@
 		return (value ?? []).some((v) => v === extractedValue)
 	}
 
-	function toggleItemSelection(extractedValue: unknown) {
-		const currentValues = value ?? []
-		const alreadySelected = currentValues.some((v) => v === extractedValue)
-
-		let newValues: unknown[]
-		let newItems: unknown[]
-
-		if (alreadySelected) {
-			newValues = currentValues.filter((v) => v !== extractedValue)
-			// Rebuild selected items from remaining values
-			newItems = []
-			for (const [, proxy] of wrapper.lookup) {
-				if (!proxy.hasChildren && newValues.some((v) => v === proxy.value)) {
-					newItems.push(proxy.original)
-				}
-			}
-		} else {
-			newValues = [...currentValues, extractedValue]
-			// Rebuild selected items from lookup to include all values
-			newItems = []
-			for (const [, proxy] of wrapper.lookup) {
-				if (!proxy.hasChildren && newValues.some((v) => v === proxy.value)) {
-					newItems.push(proxy.original)
-				}
-			}
+	function buildSelectedItems(newValues: unknown[]): unknown[] {
+		const result: unknown[] = []
+		for (const [, proxy] of wrapper.lookup) {
+			if (isLeafWithValue(proxy, newValues)) result.push(proxy.original)
 		}
+		return result
+	}
 
+	function applySelection(newValues: unknown[]) {
+		const newItems = buildSelectedItems(newValues)
 		value = newValues
 		selected = newItems
 		onchange?.(newValues, newItems)
 	}
 
-	function removeTag(extractedValue: unknown) {
+	function toggleItemSelection(extractedValue: unknown) {
 		const currentValues = value ?? []
-		const newValues = currentValues.filter((v) => v !== extractedValue)
-		const newItems: unknown[] = []
-		for (const [, proxy] of wrapper.lookup) {
-			if (!proxy.hasChildren && newValues.some((v) => v === proxy.value)) {
-				newItems.push(proxy.original)
-			}
-		}
-		value = newValues
-		selected = newItems
-		onchange?.(newValues, newItems)
+		const alreadySelected = currentValues.some((v) => v === extractedValue)
+		const newValues = alreadySelected
+			? currentValues.filter((v) => v !== extractedValue)
+			: [...currentValues, extractedValue]
+		applySelection(newValues)
+	}
+
+	function removeTag(extractedValue: unknown) {
+		const newValues = (value ?? []).filter((v) => v !== extractedValue)
+		applySelection(newValues)
 	}
 
 	// ─── Selected items for tags display ──────────────────────────────────────
 
-	const selectedProxies = $derived.by(() => {
+	function isLeafWithValue(proxy: ProxyItem, vals: unknown[]): boolean {
+		return !proxy.hasChildren && vals.some((v) => v === proxy.value)
+	}
+
+	function computeSelectedProxies(): ProxyItem[] {
 		const vals = value ?? []
 		if (vals.length === 0) return []
 		const result: ProxyItem[] = []
 		for (const [, proxy] of wrapper.lookup) {
-			if (!proxy.hasChildren && vals.some((v) => v === proxy.value)) {
-				result.push(proxy)
-			}
+			if (isLeafWithValue(proxy, vals)) result.push(proxy)
 		}
 		return result
-	})
+	}
+
+	const selectedProxies = $derived.by(computeSelectedProxies)
 
 	// ─── Trigger action ───────────────────────────────────────────────────────
 
@@ -236,7 +224,7 @@
 	// ─── Helpers ──────────────────────────────────────────────────────────────
 
 	const groupDividers = $derived.by(() => {
-		const set = new Set<string>()
+		const set = new SvelteSet<string>()
 		let foundFirst = false
 		for (const node of wrapper.flatView) {
 			if (node.hasChildren) {
@@ -318,7 +306,6 @@
 	</button>
 
 	{#if isOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			bind:this={dropdownRef}
 			data-select-dropdown

package/src/components/Range.svelte

@@ -81,22 +81,18 @@
 		slidingUpper = true
 	}
 
+	function panUpperBy(dx: number) {
+		const currentPx = inverseLerp(rangeMode ? upper : value, min, max) * trackWidth
+		const minPx = rangeMode ? inverseLerp(lower, min, max) * trackWidth : 0
+		const newPx = clamp(currentPx + dx, minPx, trackWidth)
+		const snapped = snapToStep(clamp(pixelToValue(newPx), rangeMode ? lower : min, max))
+		if (rangeMode) upper = snapped
+		else value = snapped
+	}
+
 	function handleUpperPanMove(event: CustomEvent) {
 		if (disabled || trackWidth === 0) return
-		const dx = event.detail.dx as number
-		const currentPx = inverseLerp(rangeMode ? upper : value, min, max) * trackWidth
-		const newPx = clamp(
-			currentPx + dx,
-			rangeMode ? inverseLerp(lower, min, max) * trackWidth : 0,
-			trackWidth
-		)
-		const raw = pixelToValue(newPx)
-		const snapped = snapToStep(clamp(raw, rangeMode ? lower : min, max))
-		if (rangeMode) {
-			upper = snapped
-		} else {
-			value = snapped
-		}
+		panUpperBy(event.detail.dx as number)
 		fireChange()
 	}
 
@@ -111,41 +107,37 @@
 		fireChange()
 	}
 
-	function handleUpperKeyDown(event: KeyboardEvent) {
-		if (disabled) return
+	function nudgeUpper(delta: number) {
 		const increment = step > 0 ? step : (max - min) / 10
+		if (rangeMode) upper = clamp(snapToStep(upper + delta * increment), lower, max)
+		else value = clamp(snapToStep(value + delta * increment), min, max)
+	}
 
-		if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
-			event.preventDefault()
-			if (rangeMode) {
-				upper = clamp(snapToStep(upper + increment), lower, max)
-			} else {
-				value = clamp(snapToStep(value + increment), min, max)
-			}
-			fireChange()
-		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
-			event.preventDefault()
-			if (rangeMode) {
-				upper = clamp(snapToStep(upper - increment), lower, max)
-			} else {
-				value = clamp(snapToStep(value - increment), min, max)
-			}
-			fireChange()
-		} else if (event.key === 'Home') {
-			event.preventDefault()
-			if (rangeMode) {
-				upper = lower
-			} else {
-				value = min
-			}
-			fireChange()
-		} else if (event.key === 'End') {
+	function jumpUpper(toEnd: boolean) {
+		if (rangeMode) upper = toEnd ? max : lower
+		else value = toEnd ? max : min
+	}
+
+	function isIncreaseKey(key: string): boolean {
+		return key === 'ArrowRight' || key === 'ArrowUp'
+	}
+
+	function isDecreaseKey(key: string): boolean {
+		return key === 'ArrowLeft' || key === 'ArrowDown'
+	}
+
+	function applyUpperKey(key: string): boolean {
+		if (isIncreaseKey(key)) { nudgeUpper(1); return true }
+		if (isDecreaseKey(key)) { nudgeUpper(-1); return true }
+		if (key === 'Home') { jumpUpper(false); return true }
+		if (key === 'End') { jumpUpper(true); return true }
+		return false
+	}
+
+	function handleUpperKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		if (applyUpperKey(event.key)) {
 			event.preventDefault()
-			if (rangeMode) {
-				upper = max
-			} else {
-				value = max
-			}
 			fireChange()
 		}
 	}
@@ -175,25 +167,23 @@
 		fireChange()
 	}
 
-	function handleLowerKeyDown(event: KeyboardEvent) {
-		if (disabled) return
+	function nudgeLower(delta: number) {
 		const increment = step > 0 ? step : (max - min) / 10
+		lower = clamp(snapToStep(lower + delta * increment), min, upper)
+	}
 
-		if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
-			event.preventDefault()
-			lower = clamp(snapToStep(lower + increment), min, upper)
-			fireChange()
-		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
-			event.preventDefault()
-			lower = clamp(snapToStep(lower - increment), min, upper)
-			fireChange()
-		} else if (event.key === 'Home') {
-			event.preventDefault()
-			lower = min
-			fireChange()
-		} else if (event.key === 'End') {
+	function applyLowerKey(key: string): boolean {
+		if (isIncreaseKey(key)) { nudgeLower(1); return true }
+		if (isDecreaseKey(key)) { nudgeLower(-1); return true }
+		if (key === 'Home') { lower = min; return true }
+		if (key === 'End') { lower = upper; return true }
+		return false
+	}
+
+	function handleLowerKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		if (applyLowerKey(event.key)) {
 			event.preventDefault()
-			lower = upper
 			fireChange()
 		}
 	}

package/src/components/Rating.svelte

@@ -45,31 +45,41 @@
 		onchange?.(newValue)
 	}
 
+	function setRating(newValue: number) {
+		value = newValue
+		onchange?.(newValue)
+	}
+
+	function tryDigitKey(key: string): boolean {
+		const digit = parseInt(key, 10)
+		if (isNaN(digit) || digit < 0 || digit > max) return false
+		setRating(digit)
+		return true
+	}
+
+	function isIncreaseKey(key: string): boolean {
+		return key === 'ArrowRight' || key === 'ArrowUp'
+	}
+
+	function isDecreaseKey(key: string): boolean {
+		return key === 'ArrowLeft' || key === 'ArrowDown'
+	}
+
 	function handleKeyDown(event: KeyboardEvent) {
 		if (disabled) return
 
-		if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+		if (isIncreaseKey(event.key)) {
+			event.preventDefault()
+			setRating(Math.min(value + 1, max))
+		} else if (isDecreaseKey(event.key)) {
 			event.preventDefault()
-			const newValue = Math.min(value + 1, max)
-			value = newValue
-			onchange?.(newValue)
-		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+			setRating(Math.max(value - 1, 0))
+		} else if (tryDigitKey(event.key)) {
 			event.preventDefault()
-			const newValue = Math.max(value - 1, 0)
-			value = newValue
-			onchange?.(newValue)
-		} else {
-			const digit = parseInt(event.key, 10)
-			if (!isNaN(digit) && digit >= 0 && digit <= max) {
-				event.preventDefault()
-				value = digit
-				onchange?.(digit)
-			}
 		}
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	data-rating
 	data-rating-disabled={disabled || undefined}

package/src/components/SearchFilter.svelte

@@ -68,7 +68,7 @@
 
 	{#if filters.length > 0}
 		<div data-search-tags>
-			{#each filters as filter, i}
+			{#each filters as filter, i (i)}
 				{#if tagSnippet}
 					{@render tagSnippet(filter, () => removeFilter(i))}
 				{:else}