@rokkit/ui 1.0.0-next.136 → 1.0.0-next.138

package/src/components/Select.svelte

@@ -40,6 +40,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'
@@ -105,27 +106,33 @@
 	const textField = $derived(fields?.label || 'label')
 	const childrenField = $derived(fields?.children || 'children')
 
+	function childMatchesQuery(child: unknown, query: string): boolean {
+		return String((child as Record<string, unknown>)[textField] ?? '').toLowerCase().includes(query)
+	}
+
+	function filterGroupChildren(
+		asRecord: Record<string, unknown>,
+		query: string
+	): unknown | null {
+		const children = asRecord[childrenField] as unknown[]
+		const matching = children.filter((child: unknown) => childMatchesQuery(child, query))
+		return matching.length > 0 ? { ...asRecord, [childrenField]: matching } : null
+	}
+
+	function filterItem(item: unknown, query: string): unknown | null {
+		const asRecord = item as Record<string, unknown>
+		const children = asRecord[childrenField]
+		if (Array.isArray(children) && children.length > 0) {
+			return filterGroupChildren(asRecord, query)
+		}
+		const text = String(asRecord[textField] ?? '').toLowerCase()
+		return text.includes(query) ? item : null
+	}
+
 	const filteredItems = $derived.by(() => {
 		if (!filterable || !filterQuery) return items
 		const query = filterQuery.toLowerCase()
-		return items
-			.map((item) => {
-				const children = item[childrenField]
-				if (Array.isArray(children) && children.length > 0) {
-					const matching = children.filter((child) =>
-						String(child[textField] ?? '')
-							.toLowerCase()
-							.includes(query)
-					)
-					return matching.length > 0 ? { ...item, [childrenField]: matching } : null
-				}
-				return String(item[textField] ?? '')
-					.toLowerCase()
-					.includes(query)
-					? item
-					: null
-			})
-			.filter(Boolean)
+		return items.map((item) => filterItem(item, query)).filter(Boolean)
 	})
 
 	// Pre-process: force groups expanded + disabled (non-navigable labels)
@@ -176,13 +183,23 @@
 
 	// ─── Selected proxy for trigger display ───────────────────────────────────
 
-	const selectedProxy = $derived.by(() => {
-		if (value === undefined || value === null) return null
+	function isValueUnset(): boolean {
+		return value === undefined || value === null
+	}
+
+	function isMatchingLeaf(proxy: ProxyItem): boolean {
+		return !proxy.hasChildren && proxy.value === value
+	}
+
+	function findSelectedProxy(): ProxyItem | null {
+		if (isValueUnset()) return null
 		for (const [, proxy] of wrapper.lookup) {
-			if (!proxy.hasChildren && proxy.value === value) return proxy
+			if (isMatchingLeaf(proxy)) return proxy
 		}
 		return null
-	})
+	}
+
+	const selectedProxy = $derived.by(findSelectedProxy)
 
 	// Sync selected raw item
 	$effect(() => {
@@ -214,15 +231,18 @@
 		return () => t.destroy()
 	})
 
-	function focusSelectedOrFirst() {
-		if (value !== undefined && value !== null) {
-			for (const node of wrapper.flatView) {
-				if (!node.proxy.disabled && node.proxy.value === value) {
-					wrapper.moveTo(node.key)
-					return
-				}
+	function moveToSelectedValue(): boolean {
+		for (const node of wrapper.flatView) {
+			if (!node.proxy.disabled && node.proxy.value === value) {
+				wrapper.moveTo(node.key)
+				return true
 			}
 		}
+		return false
+	}
+
+	function focusSelectedOrFirst() {
+		if (value !== undefined && value !== null && moveToSelectedValue()) return
 		wrapper.first(null)
 	}
 
@@ -250,36 +270,38 @@
 
 	// ─── Filter keyboard (native listener, fires before Navigator) ───────────
 
+	function selectFocused() {
+		if (wrapper.focusedKey) wrapper.select(null)
+	}
+
+	function handleFilterKeyDown(event: KeyboardEvent) {
+		if (event.key === 'ArrowDown') {
+			event.preventDefault()
+			event.stopPropagation()
+			wrapper.first(null)
+		} else if (event.key === 'Escape' && filterQuery) {
+			event.preventDefault()
+			event.stopPropagation()
+			filterQuery = ''
+		} else if (event.key === 'Enter') {
+			event.preventDefault()
+			event.stopPropagation()
+			selectFocused()
+		}
+	}
+
 	$effect(() => {
 		if (!isOpen || !filterable || !filterInputRef) return
 		const el = filterInputRef
-		const handler = (event: KeyboardEvent) => {
-			if (event.key === 'ArrowDown') {
-				event.preventDefault()
-				event.stopPropagation()
-				wrapper.first(null)
-			} else if (event.key === 'Escape') {
-				if (filterQuery) {
-					event.preventDefault()
-					event.stopPropagation()
-					filterQuery = ''
-				}
-				// Empty filter: let event bubble to Navigator/Trigger for close
-			} else if (event.key === 'Enter') {
-				event.preventDefault()
-				event.stopPropagation()
-				if (wrapper.focusedKey) wrapper.select(null)
-			}
-		}
-		el.addEventListener('keydown', handler)
-		return () => el.removeEventListener('keydown', handler)
+		el.addEventListener('keydown', handleFilterKeyDown)
+		return () => el.removeEventListener('keydown', handleFilterKeyDown)
 	})
 
 	// ─── Helpers ──────────────────────────────────────────────────────────────
 
 	/** Set of group keys that need a divider before them (not the first group) */
 	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) {
@@ -334,11 +356,9 @@
 	</button>
 
 	{#if isOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div bind:this={dropdownRef} data-select-dropdown role="listbox" aria-orientation="vertical">
 			{#if filterable}
 				<div data-select-filter>
-					<!-- svelte-ignore a11y_autofocus -->
 					<input
 						bind:this={filterInputRef}
 						type="text"

package/src/components/Switch.svelte

@@ -28,22 +28,18 @@
 		onchange?.(nextValue, next.original as SwitchItem)
 	}
 
+	function shouldToggle(key: string): boolean {
+		if (key === ' ' || key === 'Enter') return true
+		if (key === 'ArrowRight') return !isChecked
+		if (key === 'ArrowLeft') return isChecked
+		return false
+	}
+
 	function handleKeyDown(event: KeyboardEvent) {
 		if (disabled) return
-		switch (event.key) {
-			case ' ':
-			case 'Enter':
-				event.preventDefault()
-				toggle()
-				break
-			case 'ArrowRight':
-				event.preventDefault()
-				if (!isChecked) toggle()
-				break
-			case 'ArrowLeft':
-				event.preventDefault()
-				if (isChecked) toggle()
-				break
+		if (shouldToggle(event.key)) {
+			event.preventDefault()
+			toggle()
 		}
 	}
 </script>

package/src/components/Table.svelte

@@ -56,27 +56,25 @@
 
 	// ─── Focus management ───────────────────────────────────────────
 
+	function focusByKey(el: HTMLElement, key: string) {
+		const target = el.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+		if (target && target !== document.activeElement) {
+			target.focus()
+			target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+		}
+	}
+
 	$effect(() => {
 		if (!tableRef) return
 		const el = tableRef
 
 		function onAction(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()
-						target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-					}
-				}
-			}
-
-			if (detail.name === 'select') {
-				handleSelectAction()
+				if (key) focusByKey(el, key)
 			}
+			if (detail.name === 'select') handleSelectAction()
 		}
 
 		el.addEventListener('action', onAction)
@@ -134,7 +132,6 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={tableRef}
 	data-table

package/src/components/Tabs.svelte

@@ -92,7 +92,6 @@
 	{/if}
 	<span data-tabs-label>{proxy.label}</span>
 	{#if editable}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<span
 			data-tabs-remove
 			role="button"
@@ -125,7 +124,6 @@
 	No tabs available.
 {/snippet}
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={containerRef}
 	data-tabs

package/src/components/Toolbar.svelte

@@ -8,6 +8,7 @@
 	import { getSnippet } from '../types/menu.js'
 	import { ProxyItem, messages } from '@rokkit/states'
 	import { ListController } from '@rokkit/states'
+	import { SvelteMap } from 'svelte/reactivity'
 	import { navigator } from '@rokkit/actions'
 	import { untrack } from 'svelte'
 
@@ -51,7 +52,7 @@
 
 	/** Map from item → its data-path key (index within interactive items) */
 	const itemPathMap = $derived.by(() => {
-		const map = new Map<unknown, string>()
+		const map = new SvelteMap<unknown, string>()
 		let idx = 0
 		for (const item of items) {
 			if (isInteractive(item)) {
@@ -94,6 +95,11 @@
 		return () => el.removeEventListener('focusin', onFocusIn)
 	})
 
+	function focusKeyedItem(el: HTMLElement, key: string) {
+		const target = el.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+		if (target && target !== document.activeElement) target.focus()
+	}
+
 	// Focus the item matching controller.focusedKey on navigator action events
 	$effect(() => {
 		if (!containerRef) return
@@ -101,20 +107,11 @@
 
 		function onAction(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()
+				if (key) focusKeyedItem(el, key)
 			}
+			if (detail.name === 'select') handleSelectAction()
 		}
 
 		el.addEventListener('action', onAction)
@@ -250,7 +247,6 @@
 	{/if}
 {/snippet}
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={containerRef}
 	data-toolbar

package/src/components/Tree.svelte

@@ -64,7 +64,6 @@
 	})
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={treeRef}
 	data-tree

package/src/components/UploadTarget.svelte

@@ -38,22 +38,21 @@
 	let inputRef = $state<HTMLInputElement | null>(null)
 	let dragging = $state(false)
 
-	function handleFiles(fileList: FileList | File[]) {
-		const files = Array.from(fileList)
-		const valid: File[] = []
+	function validateFile(file: File): 'type' | 'size' | null {
+		if (accept && !matchesAccept(file, accept)) return 'type'
+		if (file.size > maxSize) return 'size'
+		return null
+	}
 
-		for (const file of files) {
-			if (accept && !matchesAccept(file, accept)) {
-				onerror?.({ file, reason: 'type' })
-				continue
-			}
-			if (file.size > maxSize) {
-				onerror?.({ file, reason: 'size' })
-				continue
-			}
-			valid.push(file)
-		}
+	function processFile(file: File, valid: File[]) {
+		const reason = validateFile(file)
+		if (reason) onerror?.({ file, reason })
+		else valid.push(file)
+	}
 
+	function handleFiles(fileList: FileList | File[]) {
+		const valid: File[] = []
+		for (const file of Array.from(fileList)) processFile(file, valid)
 		if (valid.length > 0) onfiles?.(valid)
 	}
 
@@ -86,7 +85,6 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	data-upload-target
 	data-disabled={disabled || undefined}

package/src/utils/palette.ts

@@ -83,38 +83,45 @@ export function rgbToHex(rgb: RGB): string {
 /**
  * Convert RGB to HSL
  */
+interface NormalizedRGB { r: number; g: number; b: number }
+
+function computeHue(norm: NormalizedRGB, max: number, d: number): number {
+	const { r, g, b } = norm
+	if (max === r) return ((g - b) / d + (g < b ? 6 : 0)) / 6
+	if (max === g) return ((b - r) / d + 2) / 6
+	return ((r - g) / d + 4) / 6
+}
+
 export function rgbToHsl(rgb: RGB): HSL {
-	const r = rgb.r / 255
-	const g = rgb.g / 255
-	const b = rgb.b / 255
+	const norm: NormalizedRGB = { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255 }
 
-	const max = Math.max(r, g, b)
-	const min = Math.min(r, g, b)
+	const max = Math.max(norm.r, norm.g, norm.b)
+	const min = Math.min(norm.r, norm.g, norm.b)
 	const l = (max + min) / 2
 
-	if (max === min) {
-		return { h: 0, s: 0, l: l * 100 }
-	}
+	if (max === min) return { h: 0, s: 0, l: l * 100 }
 
 	const d = max - min
 	const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-
-	let h = 0
-	switch (max) {
-		case r:
-			h = ((g - b) / d + (g < b ? 6 : 0)) / 6
-			break
-		case g:
-			h = ((b - r) / d + 2) / 6
-			break
-		case b:
-			h = ((r - g) / d + 4) / 6
-			break
-	}
+	const h = computeHue(norm, max, d)
 
 	return { h: h * 360, s: s * 100, l: l * 100 }
 }
 
+function normalizeT(t: number): number {
+	if (t < 0) return t + 1
+	if (t > 1) return t - 1
+	return t
+}
+
+function hue2rgb(p: number, q: number, t: number): number {
+	const tt = normalizeT(t)
+	if (tt < 1 / 6) return p + (q - p) * 6 * tt
+	if (tt < 1 / 2) return q
+	if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6
+	return p
+}
+
 /**
  * Convert HSL to RGB
  */
@@ -128,15 +135,6 @@ export function hslToRgb(hsl: HSL): RGB {
 		return { r: val, g: val, b: val }
 	}
 
-	const hue2rgb = (p: number, q: number, t: number) => {
-		if (t < 0) t += 1
-		if (t > 1) t -= 1
-		if (t < 1 / 6) return p + (q - p) * 6 * t
-		if (t < 1 / 2) return q
-		if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
-		return p
-	}
-
 	const q = l < 0.5 ? l * (1 + s) : l + s - l * s
 	const p = 2 * l - q
 
@@ -546,39 +544,24 @@ export function applyPalette(
 	}
 }
 
+const DEFAULT_PALETTE_ROLES: ColorRole[] = [
+	'primary', 'secondary', 'accent', 'surface', 'success', 'warning', 'danger', 'info'
+]
+
+const ALL_SHADE_KEYS: ShadeKey[] = [
+	'50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'
+]
+
 /**
  * Remove custom palette CSS variables (reset to theme defaults)
  */
 export function resetPalette(
-	roles: ColorRole[] = [
-		'primary',
-		'secondary',
-		'accent',
-		'surface',
-		'success',
-		'warning',
-		'danger',
-		'info'
-	],
+	roles: ColorRole[] = DEFAULT_PALETTE_ROLES,
 	element: HTMLElement = document.documentElement
 ): void {
-	const shadeKeys: ShadeKey[] = [
-		'50',
-		'100',
-		'200',
-		'300',
-		'400',
-		'500',
-		'600',
-		'700',
-		'800',
-		'900',
-		'950'
-	]
-
 	for (const role of roles) {
 		element.style.removeProperty(`--color-${role}`)
-		for (const shade of shadeKeys) {
+		for (const shade of ALL_SHADE_KEYS) {
 			element.style.removeProperty(`--color-${role}-${shade}`)
 		}
 	}

package/src/utils/shiki.ts

@@ -70,36 +70,28 @@ export interface HighlightOptions {
  * @param options - Highlighting options
  * @returns The highlighted code as HTML
  */
+function resolveTheme(themeOption: string | undefined): BundledTheme {
+	if (themeOption === 'light') return 'github-light'
+	if (themeOption === 'dark' || !themeOption) return 'github-dark'
+	return themeOption as BundledTheme
+}
+
+function isValidCode(code: unknown): code is string {
+	return Boolean(code) && typeof code === 'string'
+}
+
 export async function highlightCode(code: string, options: HighlightOptions = {}): Promise<string> {
-	if (!code || typeof code !== 'string') {
-		throw new Error('Invalid code provided for highlighting')
-	}
+	if (!isValidCode(code)) throw new Error('Invalid code provided for highlighting')
 
 	const hl = await initializeHighlighter()
-	const lang = (options.lang || 'text') as BundledLanguage
-	let theme: BundledTheme = 'github-dark'
-
-	if (options.theme === 'light') {
-		theme = 'github-light'
-	} else if (options.theme === 'dark') {
-		theme = 'github-dark'
-	} else if (options.theme) {
-		theme = options.theme
-	}
-
-	// Check if language is supported, fallback to text
+	const lang = (options.lang ?? 'text') as BundledLanguage
+	const theme = resolveTheme(options.theme)
 	const loadedLangs = hl.getLoadedLanguages()
 	const effectiveLang = loadedLangs.includes(lang) ? lang : 'text'
 
-	return (
-		hl
-			.codeToHtml(code, {
-				lang: effectiveLang,
-				theme
-			})
-			// Remove inline styles from pre tag to allow CSS theming
-			.replace(/(<pre[^>]+) style="[^"]*"/, '$1')
-	)
+	return hl
+		.codeToHtml(code, { lang: effectiveLang, theme })
+		.replace(/(<pre[^>]+) style="[^"]*"/, '$1')
 }
 
 /**