@rokkit/ui 1.0.0-next.98 → 1.0.1

package/src/components/FloatingNavigation.svelte

@@ -0,0 +1,256 @@
+<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.floatingNav.label,
+		labels: userLabels = {},
+		onselect,
+		onpinchange,
+		item: itemSnippet,
+		class: className = ''
+	}: FloatingNavigationProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.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 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)
+		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) {
+		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
+		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
+		}
+	}
+
+	// IntersectionObserver for active section tracking
+	$effect(() => {
+		if (!observe || itemProxies.length === 0) return
+
+		const observer = new IntersectionObserver(handleIntersection, observerOptions)
+
+		for (const item of itemProxies) {
+			const targetId = resolveTargetId(item)
+			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.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>

package/src/components/ItemContent.svelte

@@ -0,0 +1,25 @@
+<script>
+	const { proxy, showIcon = true, showSubtext = true } = $props()
+</script>
+
+{#if showIcon}
+	{#if proxy.get('avatar')}
+		<img data-item-avatar src={proxy.get('avatar')} alt={proxy.get('tooltip') ?? proxy.label} />
+	{:else if proxy.get('icon')}
+		<span data-item-icon class={proxy.get('icon')} aria-hidden="true"></span>
+	{/if}
+{/if}
+{#if proxy.label || (showSubtext && proxy.get('subtext'))}
+	<span data-item-text>
+		<span data-item-label>{proxy.label}</span>
+		{#if showSubtext && proxy.get('subtext')}
+			<span data-item-description>{proxy.get('subtext')}</span>
+		{/if}
+	</span>
+{/if}
+{#if proxy.get('badge')}
+	<span data-item-badge>{proxy.get('badge')}</span>
+{/if}
+{#if proxy.get('shortcut')}
+	<kbd data-item-shortcut>{proxy.get('shortcut')}</kbd>
+{/if}

package/src/components/LazyTree.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	// @ts-nocheck
+	/**
+	 * LazyTree — Tree + lazy loading.
+	 *
+	 * Same as Tree but uses LazyProxyItem via createProxy factory
+	 * so nodes with children: true fetch on expand.
+	 *
+	 * Default item content: icon + label + badge + shortcut (no avatar/description).
+	 * Parent nodes hide their icon by default.
+	 */
+	import type { ProxyItem } from '@rokkit/states'
+	import { LazyWrapper, LazyProxyItem, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+	import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
+	import ItemContent from './ItemContent.svelte'
+	import Connector from './Connector.svelte'
+	import Button from './Button.svelte'
+
+	let {
+		items = [],
+		fields = {},
+		value,
+		size = 'md',
+		lineStyle = 'solid',
+		labels: userLabels = {},
+		icons: userIcons = {},
+		onselect,
+		onlazyload,
+		hasMore = false,
+		class: className = '',
+		...snippets
+	}: {
+		items?: unknown[]
+		fields?: Record<string, string>
+		value?: unknown
+		size?: string
+		lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted'
+		labels?: Record<string, string>
+		icons?: { opened?: string; closed?: string }
+		onselect?: (value: unknown, proxy: ProxyItem) => void
+		onlazyload?: (current?: unknown) => Promise<unknown[]>
+		hasMore?: boolean
+		class?: string
+		[key: string]: unknown
+	} = $props()
+
+	const labels = $derived({ ...messages.tree, ...userLabels })
+
+	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
+
+	const proxyTree = $derived(
+		new ProxyTree(items, fields, {
+			createProxy: (raw, f, key, level) =>
+				new LazyProxyItem(
+					raw,
+					f,
+					key,
+					level,
+					onlazyload ? (_value, rawItem) => onlazyload(rawItem) : null
+				)
+		})
+	)
+	const wrapper = $derived(new LazyWrapper(proxyTree, { onselect, onlazyload }))
+
+	let treeRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!treeRef) return
+		const dir = getComputedStyle(treeRef).direction || 'ltr'
+		const nav = new Navigator(treeRef, wrapper, { collapsible: true, dir })
+		return () => nav.destroy()
+	})
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+</script>
+
+<div
+	bind:this={treeRef}
+	data-tree
+	data-size={size}
+	data-line-style={lineStyle}
+	class={className || undefined}
+	role="tree"
+	tabindex="0"
+	aria-label={labels.label}
+>
+	{#each wrapper.flatView as node (node.key)}
+		{@const proxy = node.proxy}
+		{@const isActive = proxy.value === value}
+		{@const isLoading = proxy.loading}
+		{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
+
+		<div
+			data-tree-node
+			data-tree-path={node.key}
+			data-tree-level={node.level - 1}
+			data-tree-has-children={node.isExpandable || undefined}
+			data-tree-loading={isLoading || undefined}
+			data-active={isActive || undefined}
+			role="treeitem"
+			aria-expanded={node.isExpandable ? proxy.expanded : undefined}
+			aria-selected={isActive}
+			aria-busy={isLoading || undefined}
+			aria-level={node.level}
+		>
+			<div data-tree-node-row>
+				{#each node.lineTypes as lineType, lineIndex (lineIndex)}
+					{#if lineType === 'icon'}
+						<button
+							type="button"
+							data-tree-toggle-btn
+							onclick={() => wrapper.toggle(node.key)}
+							aria-label={isLoading
+								? labels.loading
+								: proxy.expanded
+									? labels.collapse
+									: labels.expand}
+							tabindex={-1}
+						>
+							{#if isLoading}
+								<span data-tree-spinner aria-hidden="true"></span>
+							{:else}
+								<span class={proxy.expanded ? icons.opened : icons.closed} aria-hidden="true"
+								></span>
+							{/if}
+						</button>
+					{:else}
+						<Connector type={lineType} />
+					{/if}
+				{/each}
+
+				{#if proxy.get('href')}
+					<a
+						href={proxy.get('href')}
+						data-tree-item-content
+						data-path={node.key}
+						data-active={isActive || undefined}
+						aria-label={proxy.label}
+						aria-current={isActive ? 'page' : undefined}
+					>
+						{#if content}
+							{@render content(proxy)}
+						{:else}
+							<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
+						{/if}
+					</a>
+				{:else}
+					<button
+						type="button"
+						data-tree-item-content
+						data-path={node.key}
+						data-active={isActive || undefined}
+						aria-label={proxy.label}
+					>
+						{#if content}
+							{@render content(proxy)}
+						{:else}
+							<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	{/each}
+	{#if hasMore}
+		<Button label={labels.loadMore} style="ghost" {size} onclick={() => wrapper.loadMore()} />
+	{/if}
+</div>