@rokkit/ui 1.0.0-next.125 → 1.0.0-next.128

package/src/components/Select.svelte

@@ -0,0 +1,396 @@
+<script lang="ts">
+	/**
+	 * Select — Trigger + dropdown with List-style flatView content.
+	 *
+	 * Architecture:
+	 *   Trigger      — manages open/close (click, Enter, Escape, click-outside)
+	 *   Wrapper      — owns focusedKey $state + flatView $derived
+	 *   Navigator    — attaches DOM event handlers on dropdown
+	 *   flatView loop — single flat {#each}, groups rendered as non-interactive labels
+	 *
+	 * Groups are pre-processed with expanded:true (always show children) and
+	 * disabled:true (excluded from keyboard navigation). Group labels have no
+	 * data-path so Navigator ignores them entirely.
+	 *
+	 * Data attributes:
+	 *   data-select           — root container
+	 *   data-select-trigger   — trigger button
+	 *   data-select-value     — selected value display area
+	 *   data-select-value-text — selected item text
+	 *   data-select-value-icon — selected item icon
+	 *   data-select-placeholder — placeholder text
+	 *   data-select-arrow     — dropdown arrow icon
+	 *   data-select-dropdown  — dropdown container
+	 *   data-select-filter    — filter input wrapper
+	 *   data-select-filter-input — filter text input
+	 *   data-select-option    — leaf option items
+	 *   data-select-group-label — group header label (non-interactive)
+	 *   data-select-group-icon — icon inside group label
+	 *   data-select-divider   — divider between groups
+	 *   data-select-check     — check icon on selected item
+	 *   data-select-empty     — no results message
+	 *   data-path             — required by Navigator
+	 *   data-selected         — selected state
+	 *   data-disabled         — disabled state
+	 *   data-open             — dropdown is open
+	 *   data-size             — size variant
+	 *   data-align            — dropdown alignment
+	 *   data-direction        — dropdown direction
+	 */
+	// @ts-nocheck
+	import type { ProxyItem } from '@rokkit/states'
+	import { Wrapper, ProxyTree } from '@rokkit/states'
+	import { Navigator, Trigger } from '@rokkit/actions'
+	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
+	import ItemContent from './ItemContent.svelte'
+
+	interface SelectIcons {
+		opened?: string
+		closed?: string
+		checked?: string
+	}
+
+	let {
+		items = [],
+		fields = {},
+		value = $bindable(),
+		selected = $bindable<unknown>(null),
+		placeholder = 'Select...',
+		size = 'md',
+		disabled = false,
+		filterable = false,
+		filterPlaceholder = 'Search...',
+		align = 'start',
+		direction = 'down',
+		icons: userIcons = {} as SelectIcons,
+		onchange,
+		class: className = '',
+		...snippets
+	}: {
+		items?: unknown[]
+		fields?: Record<string, string>
+		value?: unknown
+		selected?: unknown
+		placeholder?: string
+		size?: string
+		disabled?: boolean
+		filterable?: boolean
+		filterPlaceholder?: string
+		align?: 'start' | 'end'
+		direction?: 'up' | 'down'
+		icons?: SelectIcons
+		onchange?: (value: unknown, item: unknown) => void
+		class?: string
+		[key: string]: unknown
+	} = $props()
+
+	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...DEFAULT_STATE_ICONS.checkbox, ...userIcons })
+
+	// ─── Dropdown state ───────────────────────────────────────────────────────
+
+	let isOpen = $state(false)
+	let selectRef = $state<HTMLElement | null>(null)
+	let triggerRef = $state<HTMLElement | null>(null)
+	let dropdownRef = $state<HTMLElement | null>(null)
+
+	// ─── Filter ───────────────────────────────────────────────────────────────
+
+	let filterQuery = $state('')
+	let filterInputRef = $state<HTMLInputElement | null>(null)
+
+	const textField = $derived(fields?.text || 'text')
+	const childrenField = $derived(fields?.children || 'children')
+
+	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)
+	})
+
+	// Pre-process: force groups expanded + disabled (non-navigable labels)
+	const processedItems = $derived(
+		filteredItems.map((item) => {
+			const children = item[childrenField]
+			if (Array.isArray(children) && children.length > 0) {
+				return { ...item, expanded: true, disabled: true }
+			}
+			return item
+		})
+	)
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	function handleSelect(extractedValue: unknown, proxy: ProxyItem) {
+		if (proxy.disabled) return
+		value = extractedValue
+		selected = proxy.original
+		onchange?.(extractedValue, proxy.original)
+		isOpen = false
+		filterQuery = ''
+		triggerRef?.focus()
+	}
+
+	const proxyTree = $derived(new ProxyTree(processedItems, fields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	// Override cancel/blur to close dropdown
+	$effect(() => {
+		const w = wrapper
+		w.cancel = () => {
+			isOpen = false
+			filterQuery = ''
+			triggerRef?.focus()
+		}
+		w.blur = () => {
+			isOpen = false
+			filterQuery = ''
+		}
+	})
+
+	// When wrapper recreates while open, focus first item
+	$effect(() => {
+		const _w = wrapper
+		if (isOpen && !filterable) _w.first(null)
+	})
+
+	// ─── Selected proxy for trigger display ───────────────────────────────────
+
+	const selectedProxy = $derived.by(() => {
+		if (value === undefined || value === null) return null
+		for (const [, proxy] of wrapper.lookup) {
+			if (!proxy.hasChildren && proxy.value === value) return proxy
+		}
+		return null
+	})
+
+	// Sync selected raw item
+	$effect(() => {
+		selected = selectedProxy?.original ?? null
+	})
+
+	// ─── Trigger action ───────────────────────────────────────────────────────
+
+	$effect(() => {
+		if (!triggerRef || !selectRef || disabled) return
+		const t = new Trigger(triggerRef, selectRef, {
+			isOpen: () => isOpen,
+			onopen: () => {
+				isOpen = true
+				requestAnimationFrame(() => {
+					if (filterable) {
+						filterInputRef?.focus()
+					} else {
+						focusSelectedOrFirst()
+					}
+				})
+			},
+			onclose: () => {
+				isOpen = false
+				filterQuery = ''
+			},
+			onlast: () => requestAnimationFrame(() => wrapper.last(null))
+		})
+		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
+				}
+			}
+		}
+		wrapper.first(null)
+	}
+
+	// ─── Navigator on dropdown ────────────────────────────────────────────────
+
+	$effect(() => {
+		if (!isOpen || !dropdownRef) return
+		const dir = getComputedStyle(dropdownRef).direction || 'ltr'
+		const nav = new Navigator(dropdownRef, wrapper, { dir })
+		return () => nav.destroy()
+	})
+
+	// DOM focus sync
+	$effect(() => {
+		const key = wrapper.focusedKey
+		if (!isOpen || !dropdownRef || !key) return
+		requestAnimationFrame(() => {
+			const target = dropdownRef?.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+			if (target && target !== document.activeElement) {
+				target.focus()
+				target.scrollIntoView?.({ block: 'nearest' })
+			}
+		})
+	})
+
+	// ─── Filter keyboard (native listener, fires before Navigator) ───────────
+
+	$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)
+	})
+
+	// ─── Helpers ──────────────────────────────────────────────────────────────
+
+	/** Set of group keys that need a divider before them (not the first group) */
+	const groupDividers = $derived.by(() => {
+		const set = new Set<string>()
+		let foundFirst = false
+		for (const node of wrapper.flatView) {
+			if (node.hasChildren) {
+				if (foundFirst) set.add(node.key)
+				foundFirst = true
+			}
+		}
+		return set
+	})
+</script>
+
+{#snippet defaultOptionContent(proxy: ProxyItem)}
+	<ItemContent {proxy} />
+{/snippet}
+
+{#snippet defaultGroupContent(proxy: ProxyItem)}
+	{#if proxy.get('icon')}
+		<span data-select-group-icon class={proxy.get('icon')} aria-hidden="true"></span>
+	{/if}
+	<span>{proxy.label}</span>
+{/snippet}
+
+<div
+	bind:this={selectRef}
+	data-select
+	data-open={isOpen || undefined}
+	data-size={size}
+	data-disabled={disabled || undefined}
+	data-align={align}
+	data-direction={direction}
+	class={className || undefined}
+>
+	<button
+		bind:this={triggerRef}
+		type="button"
+		data-select-trigger
+		{disabled}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+	>
+		<span data-select-value>
+			{#if selectedProxy}
+				{#if selectedProxy.get('icon')}
+					<span data-select-value-icon class={selectedProxy.get('icon')} aria-hidden="true"></span>
+				{/if}
+				<span data-select-value-text>{selectedProxy.label}</span>
+			{:else}
+				<span data-select-placeholder>{placeholder}</span>
+			{/if}
+		</span>
+		<span data-select-arrow class={isOpen ? icons.opened : icons.closed} aria-hidden="true"></span>
+	</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"
+						data-select-filter-input
+						placeholder={filterPlaceholder}
+						bind:value={filterQuery}
+					/>
+				</div>
+			{/if}
+
+			{#each wrapper.flatView as node (node.key)}
+				{@const proxy = node.proxy}
+				{@const sel = !node.hasChildren && proxy.value === value}
+				{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET)}
+
+				{#if node.type === 'separator'}
+					<hr data-select-separator />
+				{:else if node.hasChildren}
+					{#if groupDividers.has(node.key)}
+						<div data-select-divider></div>
+					{/if}
+					<div data-select-group-label role="presentation">
+						{#if content}
+							{@render content(proxy)}
+						{:else}
+							{@render defaultGroupContent(proxy)}
+						{/if}
+					</div>
+				{:else}
+					<button
+						type="button"
+						title={proxy.get('tooltip')}
+						data-select-option
+						data-path={node.key}
+						data-level={node.level}
+						data-selected={sel || undefined}
+						data-disabled={proxy.disabled || undefined}
+						role="option"
+						aria-selected={sel}
+						disabled={proxy.disabled || disabled}
+						tabindex="-1"
+					>
+						{#if content}
+							{@render content(proxy)}
+						{:else}
+							{@render defaultOptionContent(proxy)}
+						{/if}
+						{#if sel}
+							<span data-select-check class={icons.checked} aria-hidden="true"></span>
+						{/if}
+					</button>
+				{/if}
+			{/each}
+
+			{#if filterable && filterQuery && filteredItems.length === 0}
+				<div data-select-empty>No results</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/src/{Shine.svelte → components/Shine.svelte}

@@ -1,34 +1,43 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte'
 	import { id } from '@rokkit/core'
-	// import { clsx } from 'clsx'
 
-	let {
+	interface ShineProps {
+		/** Light color (default: 'rgb(var(--primary-500))') */
+		color?: string
+		/** Light source distance/height — controls spread (default: 300) */
+		radius?: number
+		/** Gaussian blur depth (default: 1) */
+		depth?: number
+		/** Height of the surface for the light filter (default: 2) */
+		surfaceScale?: number
+		/** The bigger the value the bigger the reflection (default: 0.75) */
+		specularConstant?: number
+		/** Controls focus for the light source — bigger = brighter (default: 120) */
+		specularExponent?: number
+		/** Additional CSS class */
+		class?: string
+		children?: Snippet
+	}
+
+	const {
 		color = 'rgb(var(--primary-500))',
 		radius = 300,
-		/** Depth of effect */
 		depth = 1,
-		/** Represents the height of the surface for a light filter primitive */
 		surfaceScale = 2,
-		/** The bigger the value the bigger the reflection */
 		specularConstant = 0.75,
-		/** controls the focus for the light source. The bigger the value the brighter the light */
 		specularExponent = 120,
-		children,
-		...restProps
-	} = $props()
+		class: className = '',
+		children
+	}: ShineProps = $props()
 
 	const filterId = id('filter')
 
 	let mouse = $state({ x: 0, y: 0 })
 	let wrapperBox = $state({ left: 0, top: 0 })
-	/** @type {HTMLDivElement|null} */
-	let wrapperEl = null
+	let wrapperEl: HTMLDivElement | null = $state(null)
 
-	/**
-	 *
-	 * @param {PointerEvent} e
-	 */
-	function onPointerMove(e) {
+	function onPointerMove(e: PointerEvent) {
 		wrapperBox = wrapperEl?.getBoundingClientRect() ?? { left: 0, top: 0 }
 		mouse = { x: e.clientX, y: e.clientY }
 	}
@@ -40,7 +49,7 @@
 
 <svelte:window onpointermove={onPointerMove} onscroll={onScroll} />
 
-<svg data-shine-filter class="pointer-events-none fixed inset-0">
+<svg data-shine-filter>
 	<filter id={filterId} color-interpolation-filters="sRGB">
 		<feGaussianBlur in="SourceAlpha" stdDeviation={depth} />
 
@@ -69,10 +78,9 @@
 </svg>
 
 <div
-	data-shine-root
+	data-shine
 	style:filter="url(#{filterId})"
-	{...restProps}
-	class="inline-block"
+	class={className || undefined}
 	bind:this={wrapperEl}
 >
 	{@render children?.()}

package/src/components/Stepper.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import { messages } from '@rokkit/states'
+
+	interface StepperStep {
+		/** Step label (shown below circle) */
+		text: string
+		/** Short text inside circle (default: step number) */
+		label?: string
+		/** Step is finished (shows checkmark) */
+		completed?: boolean
+		/** Step cannot be navigated to */
+		disabled?: boolean
+		/** Number of sub-stages within this step (default: 1) */
+		stages?: number
+	}
+
+	interface StepperIcons {
+		/** Icon class for check/completed state */
+		check?: string
+	}
+
+	interface StepperProps {
+		/** Array of step definitions */
+		steps?: StepperStep[]
+		/** Current step index (bindable) */
+		current?: number
+		/** Current sub-stage within step (bindable, 0-based) */
+		currentStage?: number
+		/** Only allow clicking completed steps + first incomplete */
+		linear?: boolean
+		/** Layout orientation */
+		orientation?: 'horizontal' | 'vertical'
+		/** Custom icons */
+		icons?: StepperIcons
+		/** Callback when a step or dot is clicked */
+		onclick?: (step: number, stage?: number) => void
+		/** Content snippet rendered below the stepper */
+		content?: Snippet<[StepperStep, number]>
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const defaultIcons: StepperIcons = {
+		check: DEFAULT_STATE_ICONS.action.check
+	}
+
+	let {
+		steps = [],
+		current = $bindable(0),
+		currentStage = $bindable(0),
+		linear = false,
+		orientation = 'horizontal',
+		label = messages.current.stepper.label,
+		icons: userIcons,
+		onclick,
+		content,
+		class: className = ''
+	}: StepperProps & { label?: string } = $props()
+
+	const icons = $derived<StepperIcons>({ ...defaultIcons, ...userIcons })
+
+	/**
+	 * Whether a step can be clicked
+	 */
+	function isClickable(index: number): boolean {
+		const step = steps[index]
+		if (step.disabled) return false
+		if (!linear) return true
+		// Linear mode: allow completed steps and the first incomplete step
+		if (step.completed) return true
+		// First incomplete step = first step where index >= first non-completed
+		const firstIncomplete = steps.findIndex((s) => !s.completed)
+		return index === firstIncomplete
+	}
+
+	/**
+	 * Whether the connector line before step N should look "completed"
+	 */
+	function isConnectorCompleted(index: number): boolean {
+		return index > 0 && Boolean(steps[index - 1]?.completed)
+	}
+
+	/**
+	 * Handle step circle click
+	 */
+	function handleStepClick(index: number) {
+		if (!isClickable(index)) return
+		current = index
+		currentStage = 0
+		onclick?.(index)
+	}
+
+	/**
+	 * Handle sub-stage dot click
+	 */
+	function handleDotClick(stepIndex: number, stageIndex: number) {
+		if (!isClickable(stepIndex)) return
+		current = stepIndex
+		currentStage = stageIndex
+		onclick?.(stepIndex, stageIndex)
+	}
+</script>
+
+<div
+	data-stepper
+	data-orientation={orientation}
+	class={className || undefined}
+	role="group"
+	aria-label={label}
+>
+	{#each steps as step, index (index)}
+		<!-- Connector line before step (except first) -->
+		{#if index > 0}
+			<div
+				data-stepper-connector
+				data-completed={isConnectorCompleted(index) || undefined}
+				aria-hidden="true"
+			></div>
+		{/if}
+
+		<!-- Step -->
+		<div
+			data-stepper-step
+			data-completed={step.completed || undefined}
+			data-active={index === current || undefined}
+			data-disabled={step.disabled || undefined}
+		>
+			<button
+				type="button"
+				data-stepper-circle
+				disabled={!isClickable(index)}
+				aria-label="{step.text}{step.completed ? ' (completed)' : ''}"
+				aria-current={index === current ? 'step' : undefined}
+				onclick={() => handleStepClick(index)}
+			>
+				{#if step.completed}
+					<span data-stepper-check-icon class={icons.check} aria-hidden="true"></span>
+				{:else}
+					{step.label ?? index + 1}
+				{/if}
+			</button>
+
+			<span data-stepper-label>{step.text}</span>
+
+			<!-- Sub-stage dots -->
+			{#if step.stages && step.stages > 1}
+				<div data-stepper-dots aria-label="Sub-stages for {step.text}">
+					{#each Array(step.stages) as _, stageIndex (stageIndex)}
+						<button
+							type="button"
+							data-stepper-dot
+							data-active={index === current && stageIndex === currentStage || undefined}
+							data-completed={step.completed || (index === current && stageIndex < currentStage) || undefined}
+							disabled={!isClickable(index)}
+							aria-label="Stage {stageIndex + 1}"
+							onclick={() => handleDotClick(index, stageIndex)}
+						></button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/each}
+
+	<!-- Content area -->
+	{#if content && steps[current]}
+		<div data-stepper-content>
+			{@render content(steps[current], current)}
+		</div>
+	{/if}
+</div>