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

package/src/components/FloatingAction.svelte

@@ -0,0 +1,334 @@
+<script lang="ts">
+	import type {
+		FloatingActionProps,
+		FloatingActionItem,
+		FloatingActionItemSnippet,
+		FloatingActionItemHandlers,
+		FloatingActionIcons
+	} from '../types/floating-action.js'
+	import { getSnippet } from '../types/floating-action.js'
+	import { ProxyItem } from '@rokkit/states'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	let {
+		items = [],
+		fields: userFields,
+		icons: userIcons = {} as FloatingActionIcons,
+		label = 'Actions',
+		size = 'md',
+		position = 'bottom-right',
+		expand = 'vertical',
+		itemAlign = 'center',
+		disabled = false,
+		open = $bindable(false),
+		backdrop = true,
+		contained = false,
+		onselect,
+		onopen,
+		onclose,
+		class: className = '',
+		item: itemSnippet,
+		...snippets
+	}: FloatingActionProps & { [key: string]: FloatingActionItemSnippet | unknown } = $props()
+
+	const icons = $derived({ add: DEFAULT_STATE_ICONS.action.add, close: DEFAULT_STATE_ICONS.action.close, ...userIcons })
+
+	/**
+	 * Create a ProxyItem for the given item
+	 */
+	function createProxy(item: FloatingActionItem): ProxyItem {
+		return new ProxyItem(item, userFields)
+	}
+
+	let fabRef = $state<HTMLDivElement | null>(null)
+	let focusedIndex = $state(-1)
+
+	// Flatten items for keyboard navigation (excluding disabled)
+	const flatItems = $derived.by(() => {
+		return items
+			.map((item) => ({ proxy: createProxy(item), original: item }))
+			.filter((item) => !item.proxy.disabled)
+	})
+
+	/**
+	 * Toggle the FAB open/closed
+	 */
+	function toggle() {
+		if (disabled) return
+		if (open) {
+			close()
+		} else {
+			openMenu()
+		}
+	}
+
+	/**
+	 * Open the FAB menu
+	 */
+	function openMenu() {
+		if (disabled || open) return
+		open = true
+		focusedIndex = 0
+		onopen?.()
+	}
+
+	/**
+	 * Close the FAB menu
+	 */
+	function close() {
+		if (!open) return
+		open = false
+		focusedIndex = -1
+		onclose?.()
+	}
+
+	/**
+	 * Handle item selection
+	 */
+	function handleItemClick(item: { proxy: ProxyItem; original: FloatingActionItem }) {
+		if (item.proxy.disabled) return
+		onselect?.(item.proxy.value, item.original)
+		close()
+		// Return focus to trigger
+		const trigger = fabRef?.querySelector('[data-fab-trigger]') as HTMLElement | undefined
+		trigger?.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()
+		}
+	}
+
+	/**
+	 * Handle keyboard navigation on trigger
+	 */
+	function handleTriggerKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			toggle()
+		} else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			openMenu()
+		}
+	}
+
+	/**
+	 * 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
+		}
+	}
+
+	/**
+	 * Handle item-specific keyboard events
+	 */
+	function handleItemKeyDown(
+		event: KeyboardEvent,
+		item: { proxy: ProxyItem; original: FloatingActionItem }
+	) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			handleItemClick(item)
+		}
+	}
+
+	/**
+	 * Handle click outside to close
+	 */
+	function handleClickOutside(event: MouseEvent) {
+		if (fabRef && !fabRef.contains(event.target as Node)) {
+			close()
+		}
+	}
+
+	/**
+	 * Handle backdrop click
+	 */
+	function handleBackdropClick() {
+		close()
+	}
+
+	/**
+	 * Create handlers object for custom snippets
+	 */
+	function createHandlers(item: {
+		proxy: ProxyItem
+		original: FloatingActionItem
+	}): FloatingActionItemHandlers {
+		return {
+			onclick: () => handleItemClick(item),
+			onkeydown: (event: KeyboardEvent) => handleItemKeyDown(event, item)
+		}
+	}
+
+	/**
+	 * Resolve which snippet to use for an item
+	 */
+	function resolveItemSnippet(proxy: ProxyItem): FloatingActionItemSnippet | null {
+		const snippetName = proxy.get('snippet')
+		if (snippetName) {
+			const namedSnippet = getSnippet(snippets, snippetName)
+			if (namedSnippet) {
+				return namedSnippet as FloatingActionItemSnippet
+			}
+		}
+		return itemSnippet ?? null
+	}
+
+	/**
+	 * Calculate item animation delay for stagger effect
+	 */
+	function getItemDelay(index: number): string {
+		return `${index * 50}ms`
+	}
+
+	// Set up click outside listener when open
+	$effect(() => {
+		if (open) {
+			document.addEventListener('click', handleClickOutside, true)
+			document.addEventListener('keydown', handleKeyDown)
+			// Focus first item after animation starts
+			requestAnimationFrame(() => {
+				if (flatItems.length > 0) {
+					focusItem(0)
+				}
+			})
+		}
+		return () => {
+			document.removeEventListener('click', handleClickOutside, true)
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	})
+</script>
+
+{#snippet defaultItem(
+	proxy: ProxyItem,
+	handlers: FloatingActionItemHandlers,
+	index: number,
+	total: number
+)}
+	<button
+		type="button"
+		data-fab-item
+		data-fab-index={index}
+		data-disabled={proxy.disabled || undefined}
+		disabled={proxy.disabled || disabled}
+		aria-label={proxy.label}
+		style="--fab-index: {index}; --fab-total: {total}; --fab-delay: {getItemDelay(index)}"
+		onclick={handlers.onclick}
+		onkeydown={handlers.onkeydown}
+	>
+		{#if proxy.get('icon')}
+			<span data-fab-item-icon class={proxy.get('icon')} aria-hidden="true"></span>
+		{/if}
+		{#if proxy.label}
+			<span data-fab-item-label>{proxy.label}</span>
+		{/if}
+	</button>
+{/snippet}
+
+{#snippet renderItem(
+	item: { proxy: ProxyItem; original: FloatingActionItem },
+	index: number,
+	total: number
+)}
+	{@const customSnippet = resolveItemSnippet(item.proxy)}
+	{@const handlers = createHandlers(item)}
+	{#if customSnippet}
+		<div
+			data-fab-item
+			data-fab-item-custom
+			data-fab-index={index}
+			data-disabled={item.proxy.disabled || undefined}
+			style="--fab-index: {index}; --fab-total: {total}; --fab-delay: {getItemDelay(index)}"
+		>
+			<svelte:boundary>
+				{@render customSnippet(item.original, item.proxy.fields, handlers)}
+				{#snippet failed()}
+					{@render defaultItem(item.proxy, handlers, index, total)}
+				{/snippet}
+			</svelte:boundary>
+		</div>
+	{:else}
+		{@render defaultItem(item.proxy, handlers, index, total)}
+	{/if}
+{/snippet}
+
+<div
+	bind:this={fabRef}
+	data-fab
+	data-open={open || undefined}
+	data-size={size}
+	data-position={position}
+	data-expand={expand}
+	data-item-align={itemAlign}
+	data-disabled={disabled || undefined}
+	data-contained={contained || undefined}
+	class={className || undefined}
+>
+	{#if backdrop && open}
+		<div data-fab-backdrop role="presentation" onclick={handleBackdropClick}></div>
+	{/if}
+
+	{#if open}
+		<div data-fab-menu role="menu" aria-label={label}>
+			{#each flatItems as item, index (index)}
+				{@render renderItem(item, index, flatItems.length)}
+			{/each}
+		</div>
+	{/if}
+
+	<button
+		type="button"
+		data-fab-trigger
+		{disabled}
+		aria-label={label}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		onclick={toggle}
+		onkeydown={handleTriggerKeyDown}
+	>
+		<span data-fab-icon class={open ? icons.close : icons.add} aria-hidden="true"></span>
+	</button>
+</div>

package/src/components/FloatingNavigation.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import type { FloatingNavigationProps, FloatingNavigationIcons } from '../types/floating-navigation.js'
+	import { ProxyItem, messages } from '@rokkit/states'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	let {
+		items = [],
+		fields: userFields,
+		icons: userIcons = {} as FloatingNavigationIcons,
+		value = $bindable(),
+		position = 'right',
+		pinned = $bindable(false),
+		observe = true,
+		observerOptions = { rootMargin: '-20% 0px -70% 0px', threshold: 0 },
+		size = 'md',
+		label = messages.current.floatingNav.label,
+		labels: userLabels = {},
+		onselect,
+		onpinchange,
+		item: itemSnippet,
+		class: className = ''
+	}: FloatingNavigationProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.current.floatingNav, ...userLabels })
+
+	const icons = $derived({ pin: DEFAULT_STATE_ICONS.action.pin, unpin: DEFAULT_STATE_ICONS.action.unpin, ...userIcons })
+
+	let navRef = $state<HTMLElement | null>(null)
+	let expanded = $state(false)
+	let focusedIndex = $state(-1)
+
+	const isVertical = $derived(position === 'left' || position === 'right')
+
+	const itemProxies = $derived(
+		items.map((item) => ({
+			proxy: new ProxyItem(item, userFields),
+			original: item
+		}))
+	)
+
+	const activeIndex = $derived(
+		itemProxies.findIndex((item) => item.proxy.value === value)
+	)
+
+	function togglePin() {
+		pinned = !pinned
+		if (!pinned) expanded = false
+		onpinchange?.(pinned)
+	}
+
+	function handleMouseEnter() {
+		if (!pinned) expanded = true
+	}
+
+	function handleMouseLeave() {
+		if (!pinned) expanded = false
+	}
+
+	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)
+		el?.scrollIntoView({ behavior: 'smooth' })
+	}
+
+	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
+		}
+	}
+
+	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()
+		}
+	}
+
+	// IntersectionObserver for active section tracking
+	$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)
+
+		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 el = document.getElementById(targetId)
+			if (el) observer.observe(el)
+		}
+
+		return () => observer.disconnect()
+	})
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<nav
+	bind:this={navRef}
+	data-floating-nav
+	data-position={position}
+	data-expanded={expanded || pinned || undefined}
+	data-pinned={pinned || undefined}
+	data-size={size}
+	aria-label={label}
+	class={className || undefined}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	onkeydown={handleKeyDown}
+>
+	<div data-floating-nav-header>
+		{#if expanded || pinned}
+			<span data-floating-nav-title>{label}</span>
+		{/if}
+		<button
+			type="button"
+			data-floating-nav-pin
+			aria-pressed={pinned}
+			aria-label={pinned ? labels.unpin : labels.pin}
+			onclick={togglePin}
+		>
+			<span data-floating-nav-pin-icon class={pinned ? icons.unpin : icons.pin} aria-hidden="true"></span>
+		</button>
+	</div>
+
+	<div data-floating-nav-items>
+		{#each itemProxies as item, index (item.proxy.value ?? index)}
+			{@const isActive = item.proxy.value === value}
+			{@const isLink = item.proxy.get('href') !== undefined}
+			{#if itemSnippet}
+				{@render itemSnippet(item.original, {
+					text: item.proxy.label,
+					icon: item.proxy.get('icon'),
+					active: isActive
+				})}
+			{:else if isLink}
+				<a
+					data-floating-nav-item
+					data-active={isActive || undefined}
+					href={String(item.original[userFields?.href ?? 'href'] ?? '')}
+					aria-current={isActive ? 'true' : undefined}
+					tabindex={index === 0 ? 0 : -1}
+					style="--fn-index: {index}; --fn-total: {itemProxies.length}"
+					onclick={(e) => {
+						e.preventDefault()
+						handleItemClick(item)
+					}}
+				>
+					{#if item.proxy.get('icon')}
+						<span data-floating-nav-icon class={item.proxy.get('icon')} aria-hidden="true"></span>
+					{/if}
+					<span data-floating-nav-label>{item.proxy.label}</span>
+				</a>
+			{:else}
+				<button
+					type="button"
+					data-floating-nav-item
+					data-active={isActive || undefined}
+					aria-current={isActive ? 'true' : undefined}
+					tabindex={index === 0 ? 0 : -1}
+					style="--fn-index: {index}; --fn-total: {itemProxies.length}"
+					onclick={() => handleItemClick(item)}
+				>
+					{#if item.proxy.get('icon')}
+						<span data-floating-nav-icon class={item.proxy.get('icon')} aria-hidden="true"></span>
+					{/if}
+					<span data-floating-nav-label>{item.proxy.label}</span>
+				</button>
+			{/if}
+		{/each}
+
+		{#if activeIndex >= 0}
+			<span
+				data-floating-nav-indicator
+				style="--fn-active-index: {activeIndex}"
+				aria-hidden="true"
+			></span>
+		{/if}
+	</div>
+</nav>

package/src/components/Grid.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	/**
+	 * Grid — Responsive tile grid with Wrapper + Navigator horizontal navigation.
+	 *
+	 * Architecture:
+	 *   Wrapper       — owns focusedKey $state + flatView $derived
+	 *   Navigator     — attaches DOM event handlers, calls wrapper[action](path)
+	 *                   horizontal orientation (ArrowLeft/ArrowRight navigation)
+	 *   flatView loop — single flat {#each} rendering items as grid tiles
+	 *
+	 * Snippet customization:
+	 *   itemContent   — replaces inner content of <button> for each tile
+	 *   [named]       — per-item override via item.snippet = 'name'; falls back to itemContent
+	 *
+	 *   Snippets receive (proxy) only — the <button> wrapper with data-path is
+	 *   always rendered by this component, so snippets never need to handle navigation.
+	 *
+	 * Data attributes on rendered elements:
+	 *   data-grid           — root container
+	 *   data-grid-item      — each tile button
+	 *   data-path           — required by Navigator for click detection + scroll
+	 *   data-active         — highlights current value match
+	 *   data-disabled       — disabled state
+	 *   data-size           — size variant
+	 *
+	 * CSS custom properties:
+	 *   --grid-min-size     — minimum tile width for auto-fill
+	 *   --grid-gap          — grid gap
+	 */
+	import type { ProxyItem } from '@rokkit/states'
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+	import { resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
+	import ItemContent from './ItemContent.svelte'
+
+	let {
+		items = [],
+		fields = {},
+		value = $bindable(),
+		size = 'md',
+		disabled = false,
+		minSize = '120px',
+		gap = '1rem',
+		label = messages.current.grid.label,
+		onselect,
+		class: className = '',
+		...snippets
+	}: {
+		items?: unknown[]
+		fields?: Record<string, string>
+		value?: unknown
+		size?: string
+		disabled?: boolean
+		minSize?: string
+		gap?: string
+		label?: string
+		onselect?: (value: unknown, proxy: ProxyItem) => void
+		class?: string
+		[key: string]: unknown
+	} = $props()
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	const proxyTree = $derived(new ProxyTree(items, fields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	// ─── Navigator (horizontal) ───────────────────────────────────────────────
+
+	let gridRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!gridRef || disabled) return
+		const dir = getComputedStyle(gridRef).direction || 'ltr'
+		const nav = new Navigator(gridRef, wrapper, { orientation: 'horizontal', dir })
+		return () => nav.destroy()
+	})
+
+	// ─── Sync external value → focused key ────────────────────────────────────
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+
+	// ─── Selection handler ─────────────────────────────────────────────────────
+
+	function handleSelect(extractedValue: unknown, proxy: ProxyItem) {
+		if (proxy.disabled || disabled) return
+		value = extractedValue
+		onselect?.(extractedValue, proxy)
+	}
+</script>
+
+<div
+	bind:this={gridRef}
+	data-grid
+	data-grid-min-size={minSize}
+	data-size={size}
+	data-disabled={disabled || undefined}
+	class={className || undefined}
+	role="grid"
+	aria-label={label}
+	aria-disabled={disabled || undefined}
+	style:--grid-min-size={minSize}
+	style:--grid-gap={gap}
+>
+	{#each wrapper.flatView as node (node.key)}
+		{@const proxy = node.proxy}
+		{@const sel = proxy.value === value}
+		{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, ITEM_SNIPPET)}
+		<button
+			type="button"
+			data-grid-item
+			data-path={node.key}
+			data-active={sel || undefined}
+			data-disabled={proxy.disabled || undefined}
+			role="gridcell"
+			aria-selected={sel}
+			aria-label={proxy.label}
+			disabled={proxy.disabled || disabled}
+		>
+			{#if content}
+				{@render content(proxy)}
+			{:else}
+				<ItemContent {proxy} />
+			{/if}
+		</button>
+	{/each}
+</div>