@rokkit/ui 1.0.0-next.151 → 1.0.0-next.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.151",
+  "version": "1.0.0-next.153",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "@rokkit/states": "latest",
     "@rokkit/actions": "latest",
     "marked": "^15.0.0",
-    "isomorphic-dompurify": "^2.0.0"
+    "dompurify": "^3.0.0"
   },
   "peerDependencies": {
     "shiki": "^3.23.0",

package/src/MarkdownRenderer.svelte

@@ -1,43 +1,112 @@
 <script lang="ts">
-  import { marked } from 'marked'
-  import type { Token, TokensList } from 'marked'
-  import DOMPurify from 'isomorphic-dompurify'
-  import type { MarkdownPlugin } from './markdown-plugin.js'
+	import { marked } from 'marked'
+	import type { Token, TokensList } from 'marked'
+	import type { Component, Snippet } from 'svelte'
+	import type { MarkdownPlugin } from './markdown-plugin.js'
 
-  interface Props {
-    markdown: string
-    plugins?: MarkdownPlugin[]
-  }
+	interface Props {
+		markdown: string
+		plugins?: MarkdownPlugin[]
+		/** Optional wrapper component (e.g. CrossFilter from @rokkit/chart) for grouping
+		 *  co-labelled plot blocks. When provided, plot code blocks whose JSON contains a
+		 *  `crossfilter` field with the same value are wrapped in a shared instance. */
+		crossfilterWrapper?: Component<{ children?: Snippet }>
+	}
 
-  let { markdown, plugins = [] }: Props = $props()
+	let { markdown, plugins = [], crossfilterWrapper }: Props = $props()
 
-  const pluginMap = $derived(
-    Object.fromEntries(plugins.map((p) => [p.language.toLowerCase(), p.component]))
-  )
+	let purify: { sanitize: (s: string) => string } | null = $state(null)
+	$effect(() => {
+		import('dompurify').then((m) => {
+			purify = m.default
+		})
+	})
 
-  const tokens = $derived(marked.lexer(markdown))
+	const pluginMap = $derived(
+		Object.fromEntries(plugins.map((p) => [p.language.toLowerCase(), p.component]))
+	)
 
-  function tokenToSafeHtml(token: Token): string {
-    const tokenList = Object.assign([token], { links: (tokens as TokensList).links ?? {} }) as TokensList
-    const raw = marked.parser(tokenList)
-    return DOMPurify.sanitize(raw)
-  }
+	const tokens = $derived(marked.lexer(markdown))
+
+	function tokenToSafeHtml(token: Token): string {
+		const tokenList = Object.assign([token], {
+			links: (tokens as TokensList).links ?? {}
+		}) as TokensList
+		const raw = marked.parser(tokenList)
+		return purify ? purify.sanitize(raw) : raw
+	}
+
+	/** Extract crossfilter group ID from a code token's text, or null if absent/invalid. */
+	function getCfGroup(token: Token): string | null {
+		if (token.type !== 'code') return null
+		const lang = (token.lang ?? '').toLowerCase()
+		if (!pluginMap[lang]) return null
+		try {
+			const spec = JSON.parse(token.text)
+			return typeof spec?.crossfilter === 'string' ? spec.crossfilter : null
+		} catch {
+			return null
+		}
+	}
+
+	/**
+	 * When crossfilterWrapper is provided, pre-pass tokens into segments:
+	 * - { type: 'group', id, tokens[] } — plot tokens sharing a crossfilter ID
+	 * - { type: 'token', token } — all other tokens
+	 */
+	type Segment =
+		| { type: 'group'; id: string; items: Token[] }
+		| { type: 'token'; token: Token }
+
+	const segments = $derived.by((): Segment[] => {
+		if (!crossfilterWrapper) return tokens.map((t) => ({ type: 'token', token: t }))
+
+		const result: Segment[] = []
+		const groupMap = new Map<string, { type: 'group'; id: string; items: Token[] }>()
+
+		for (const token of tokens) {
+			const cfId = getCfGroup(token)
+			if (cfId) {
+				let group = groupMap.get(cfId)
+				if (!group) {
+					group = { type: 'group', id: cfId, items: [] }
+					groupMap.set(cfId, group)
+					result.push(group)
+				}
+				group.items.push(token)
+			} else {
+				result.push({ type: 'token', token })
+			}
+		}
+		return result
+	})
 </script>
 
 <div class="markdown-renderer" data-markdown>
-  {#each tokens as token, i (i)}
-    {#if token.type === 'code'}
-      {@const lang = (token.lang ?? '').toLowerCase()}
-      {@const Plugin = pluginMap[lang]}
-      {#if Plugin}
-        <Plugin code={token.text} />
-      {:else}
-        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-        {@html tokenToSafeHtml(token)}
-      {/if}
-    {:else}
-      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      {@html tokenToSafeHtml(token)}
-    {/if}
-  {/each}
+	{#each segments as seg (seg.type === 'group' ? `cf-${  seg.id}` : segments.indexOf(seg))}
+		{#if seg.type === 'group'}
+			{@const Wrapper = crossfilterWrapper}
+			<Wrapper>
+				{#each seg.items as token, i (i)}
+					{@const Plugin = pluginMap[(token.lang ?? '').toLowerCase()]}
+					{#if Plugin}<Plugin code={token.text} />{/if}
+				{/each}
+			</Wrapper>
+		{:else}
+			{@const token = seg.token}
+			{#if token.type === 'code'}
+				{@const lang = (token.lang ?? '').toLowerCase()}
+				{@const Plugin = pluginMap[lang]}
+				{#if Plugin}
+					<Plugin code={token.text} />
+				{:else}
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html tokenToSafeHtml(token)}
+				{/if}
+			{:else}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				{@html tokenToSafeHtml(token)}
+			{/if}
+		{/if}
+	{/each}
 </div>

package/src/components/AlertList.svelte

@@ -23,7 +23,7 @@
 
 	// Portal to document.body so position:fixed is relative to the viewport,
 	// not clipped by any overflow:auto ancestor (e.g. the docs main column).
-	 
+
 	function mountPortal(node: HTMLElement) {
 		document.body.appendChild(node)
 		return { destroy: () => node.remove() }

package/src/components/Avatar.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	interface AvatarProps {
+		/** Image source URL */
+		src?: string
+		/** Alt text for the image */
+		alt?: string
+		/** Explicit initials to display as fallback */
+		initials?: string
+		/** Full name — auto-derives initials if initials prop not provided */
+		name?: string
+		/** Size variant */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		/** Online presence status */
+		status?: 'online' | 'offline' | 'away' | 'busy'
+		/** Shape variant */
+		shape?: 'circle' | 'square'
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const {
+		src,
+		alt,
+		initials,
+		name,
+		size = 'md',
+		status,
+		shape = 'circle',
+		class: className = ''
+	}: AvatarProps = $props()
+
+	/** Derive initials from name if explicit initials not provided */
+	const resolvedInitials = $derived.by(() => {
+		if (initials) return initials
+		if (!name) return '?'
+		const parts = name.trim().split(/\s+/)
+		if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+		return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+	})
+
+	const altText = $derived(alt ?? name ?? 'Avatar')
+
+	let imgError = $state(false)
+
+	function handleImgError() {
+		imgError = true
+	}
+</script>
+
+<div
+	data-avatar
+	data-size={size}
+	data-shape={shape}
+	data-status={status || undefined}
+	class={className || undefined}
+	role="img"
+	aria-label={altText}
+>
+	{#if src && !imgError}
+		<img src={src} alt={altText} data-avatar-img onerror={handleImgError} />
+	{:else}
+		<span data-avatar-initials aria-hidden="true">{resolvedInitials}</span>
+	{/if}
+
+	{#if status}
+		<span data-avatar-status data-status={status} aria-label={status}></span>
+	{/if}
+</div>

package/src/components/Badge.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface BadgeProps {
+		/** Numeric count to display */
+		count?: number
+		/** Maximum count before showing "max+" (default: 99) */
+		max?: number
+		/** Visual variant */
+		variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
+		/** Show as a small dot without content */
+		dot?: boolean
+		/** Content to wrap — when provided, badge positions absolutely over the child */
+		children?: Snippet
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const {
+		count,
+		max = 99,
+		variant = 'default',
+		dot = false,
+		children,
+		class: className = ''
+	}: BadgeProps = $props()
+
+	const displayText = $derived.by(() => {
+		if (dot) return undefined
+		if (count === undefined) return undefined
+		return count > max ? `${max}+` : String(count)
+	})
+</script>
+
+{#if children}
+	<div data-badge-wrapper class={className || undefined}>
+		{@render children()}
+		<span
+			data-badge
+			data-variant={variant}
+			data-dot={dot || undefined}
+			aria-label={displayText ? `${displayText} notifications` : undefined}
+		>
+			{#if displayText}{displayText}{/if}
+		</span>
+	</div>
+{:else}
+	<span
+		data-badge
+		data-variant={variant}
+		data-dot={dot || undefined}
+		class={className || undefined}
+		aria-label={displayText ? `${displayText} notifications` : undefined}
+	>
+		{#if displayText}{displayText}{/if}
+	</span>
+{/if}

package/src/components/BreadCrumbs.svelte

@@ -25,7 +25,7 @@
 	const {
 		items = [],
 		fields,
-		label = messages.current.breadcrumbs.label,
+		label = messages.breadcrumbs.label,
 		icons: userIcons = {} as BreadCrumbsIcons,
 		onclick,
 		crumb,

package/src/components/Card.svelte

@@ -18,7 +18,15 @@
 		children?: Snippet
 	}
 
-	const { href, onclick, variant = 'default', class: className = '', header, footer, children }: CardProps = $props()
+	const {
+		href,
+		onclick,
+		variant = 'default',
+		class: className = '',
+		header,
+		footer,
+		children
+	}: CardProps = $props()
 </script>
 
 {#snippet cardContent()}
@@ -46,7 +54,14 @@
 		{@render cardContent()}
 	</a>
 {:else if onclick}
-	<button type="button" data-card data-card-interactive data-variant={variant} class={className || undefined} {onclick}>
+	<button
+		type="button"
+		data-card
+		data-card-interactive
+		data-variant={variant}
+		class={className || undefined}
+		{onclick}
+	>
 		{@render cardContent()}
 	</button>
 {:else}

package/src/components/Carousel.svelte

@@ -43,7 +43,7 @@
 		children
 	}: CarouselProps & { labels?: Record<string, string> } = $props()
 
-	const labels = $derived({ ...messages.current.carousel, ...userLabels })
+	const labels = $derived({ ...messages.carousel, ...userLabels })
 
 	let hovered = $state(false)
 

package/src/components/Code.svelte

@@ -15,7 +15,7 @@
 		class: className = ''
 	}: CodeProps & { labels?: Record<string, string> } = $props()
 
-	const labels = $derived({ ...messages.current.code, ...userLabels })
+	const labels = $derived({ ...messages.code, ...userLabels })
 
 	// Merge icons with defaults
 	const icons = $derived<CodeStateIcons>({ ...defaultCodeStateIcons, ...userIcons })

package/src/components/Divider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface DividerProps {
+		/** Orientation of the divider */
+		orientation?: 'horizontal' | 'vertical'
+		/** Optional label text displayed in the center */
+		label?: string
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const { orientation = 'horizontal', label, class: className = '' }: DividerProps = $props()
+</script>
+
+<div
+	data-divider
+	data-orientation={orientation}
+	class={className || undefined}
+	role="separator"
+	aria-orientation={orientation}
+>
+	{#if label}
+		<span data-divider-label>{label}</span>
+	{/if}
+</div>

package/src/components/Dropdown.svelte

@@ -21,7 +21,7 @@
 	 *   data-direction         — panel direction (down | up)
 	 */
 	// @ts-nocheck
-	import { ProxyTree, Wrapper } from '@rokkit/states'
+	import { ProxyTree, Wrapper, messages } from '@rokkit/states'
 	import { Navigator, Trigger } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
 
@@ -34,7 +34,7 @@
 		items = [],
 		fields = {},
 		value = $bindable(),
-		placeholder = 'Select...',
+		placeholder = messages.select,
 		icon,
 		size = 'md',
 		disabled = false,

package/src/components/FloatingNavigation.svelte

@@ -16,7 +16,7 @@
 		observe = true,
 		observerOptions = { rootMargin: '-20% 0px -70% 0px', threshold: 0 },
 		size = 'md',
-		label = messages.current.floatingNav.label,
+		label = messages.floatingNav.label,
 		labels: userLabels = {},
 		onselect,
 		onpinchange,
@@ -24,7 +24,7 @@
 		class: className = ''
 	}: FloatingNavigationProps & { labels?: Record<string, string> } = $props()
 
-	const labels = $derived({ ...messages.current.floatingNav, ...userLabels })
+	const labels = $derived({ ...messages.floatingNav, ...userLabels })
 
 	const icons = $derived({
 		pin: DEFAULT_STATE_ICONS.action.pin,

package/src/components/Grid.svelte

@@ -41,7 +41,7 @@
 		disabled = false,
 		minSize = '120px',
 		gap = '1rem',
-		label = messages.current.grid.label,
+		label = messages.grid.label,
 		onselect,
 		class: className = '',
 		...snippets

package/src/components/LazyTree.svelte

@@ -45,7 +45,7 @@
 		[key: string]: unknown
 	} = $props()
 
-	const labels = $derived({ ...messages.current.tree, ...userLabels })
+	const labels = $derived({ ...messages.tree, ...userLabels })
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
 

package/src/components/List.svelte

@@ -45,7 +45,7 @@
 		size = 'md',
 		disabled = false,
 		collapsible = false,
-		label = messages.current.list.label,
+		label = messages.list.label,
 		icons: userIcons = {} as ListIcons,
 		onselect,
 		class: className = '',
@@ -102,14 +102,15 @@
 	function expandAncestorGroups(activeKey: string | null) {
 		for (const [key, proxy] of wrapper.lookup) {
 			if (!proxy.hasChildren) continue
-			proxy.expanded =
-				activeKey !== null &&
-				(activeKey === key || activeKey.startsWith(`${key  }-`))
+			proxy.expanded = activeKey !== null && (activeKey === key || activeKey.startsWith(`${key}-`))
 		}
 	}
 
 	function syncExpandedGroups() {
-		if (!collapsible) { expandAllGroups(); return }
+		if (!collapsible) {
+			expandAllGroups()
+			return
+		}
 		expandAncestorGroups(findActiveKey())
 	}
 

package/src/components/Menu.svelte

@@ -61,7 +61,7 @@
 		size = 'md',
 		disabled = false,
 		collapsible = false,
-		label = messages.current.menu.label,
+		label = messages.menu.label,
 		icon,
 		showArrow = true,
 		align = 'start',

package/src/components/Message.svelte

@@ -70,8 +70,6 @@
 	{/if}
 
 	{#if dismissible}
-		<button type="button" data-message-dismiss aria-label="Dismiss" onclick={ondismiss}
-			>×</button
-		>
+		<button type="button" data-message-dismiss aria-label="Dismiss" onclick={ondismiss}>×</button>
 	{/if}
 </div>

package/src/components/MultiSelect.svelte

@@ -26,7 +26,7 @@
 	 */
 	// @ts-nocheck
 	import type { ProxyItem } from '@rokkit/states'
-	import { Wrapper, ProxyTree } from '@rokkit/states'
+	import { Wrapper, ProxyTree, messages } 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'
@@ -44,7 +44,7 @@
 		fields = {},
 		value = $bindable<unknown[]>([]),
 		selected = $bindable<unknown[]>([]),
-		placeholder = 'Select...',
+		placeholder = messages.select,
 		size = 'md',
 		disabled = false,
 		maxDisplay = 3,

package/src/components/Range.svelte

@@ -20,7 +20,7 @@
 		class: className = ''
 	}: RangeProps & { labels?: Record<string, string> } = $props()
 
-	const labels = $derived({ ...messages.current.range, ...userLabels })
+	const labels = $derived({ ...messages.range, ...userLabels })
 
 	// ─── Pixel state ────────────────────────────────────────────────
 	let trackWidth = $state(0)

package/src/components/Rating.svelte

@@ -27,7 +27,7 @@
 		value = $bindable(0),
 		max = 5,
 		disabled = false,
-		label = messages.current.rating.label,
+		label = messages.rating.label,
 		icons: userIcons = {} as RatingIcons,
 		onchange,
 		class: className = ''

package/src/components/SearchFilter.svelte

@@ -16,8 +16,8 @@
 	}: SearchFilterProps & { labels?: Record<string, string> } = $props()
 
 	const labels = $derived({
-		clear: messages.current.search_.clear,
-		remove: messages.current.filter.remove,
+		clear: messages.search_.clear,
+		remove: messages.filter.remove,
 		...userLabels
 	})
 

package/src/components/Select.svelte

@@ -39,7 +39,7 @@
 	 */
 	// @ts-nocheck
 	import type { ProxyItem } from '@rokkit/states'
-	import { Wrapper, ProxyTree } from '@rokkit/states'
+	import { Wrapper, ProxyTree, messages } 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'
@@ -56,7 +56,7 @@
 		fields = {},
 		value = $bindable(),
 		selected = $bindable<unknown>(null),
-		placeholder = 'Select...',
+		placeholder = messages.select,
 		size = 'md',
 		disabled = false,
 		filterable = false,

package/src/components/Stack.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface StackProps {
+		/** Layout direction */
+		direction?: 'vertical' | 'horizontal'
+		/** Gap size between children */
+		gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		/** Cross-axis alignment */
+		align?: 'start' | 'center' | 'end' | 'stretch'
+		/** Main-axis justification */
+		justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+		/** Stack children */
+		children: Snippet
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const {
+		direction = 'vertical',
+		gap = 'md',
+		align,
+		justify,
+		children,
+		class: className = ''
+	}: StackProps = $props()
+</script>
+
+<div
+	data-stack
+	data-direction={direction}
+	data-gap={gap}
+	data-align={align || undefined}
+	data-justify={justify || undefined}
+	class={className || undefined}
+>
+	{@render children()}
+</div>

package/src/components/Stepper.svelte

@@ -52,7 +52,7 @@
 		currentStage = $bindable(0),
 		linear = false,
 		orientation = 'horizontal',
-		label = messages.current.stepper.label,
+		label = messages.stepper.label,
 		icons: userIcons,
 		onclick,
 		content,

package/src/components/Swatch.svelte

@@ -11,7 +11,7 @@
 		shape = 'square',
 		size = 'md',
 		disabled = false,
-		label = messages.current.swatch?.label ?? 'Select',
+		label = messages.swatch?.label ?? 'Select',
 		class: className = '',
 		onchange,
 		item: itemSnippet,

package/src/components/Table.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { TableProps, TableColumn, TableSortIcons } from '../types/table.js'
 	import { defaultTableSortIcons } from '../types/table.js'
-	import { TableController } from '@rokkit/states'
+	import { TableController, messages } from '@rokkit/states'
 	import { navigator } from '@rokkit/actions'
 	import { untrack } from 'svelte'
 
@@ -9,9 +9,12 @@
 		data = [],
 		columns: userColumns,
 		value,
+		values = $bindable<unknown[]>([]),
+		selectable = 'single' as 'single' | 'multi' | false,
 		caption,
 		size = 'md',
 		striped = false,
+		responsive = false,
 		disabled = false,
 		fields: userFields,
 		onselect,
@@ -33,9 +36,17 @@
 			new TableController(data, {
 				columns: userColumns,
 				fields: userFields,
-				value
+				value,
+				multiselect: selectable === 'multi'
 			})
 	)
+
+	// Sync values binding from controller selection in multi-select mode
+	$effect(() => {
+		if (selectable === 'multi') {
+			values = controller.selected.slice()
+		}
+	})
 	let tableRef = $state<HTMLElement | null>(null)
 
 	// Sync data changes to controller
@@ -60,7 +71,7 @@
 		const target = el.querySelector(`[data-path="${key}"]`) as HTMLElement | null
 		if (target && target !== document.activeElement) {
 			target.focus()
-			target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+			target.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })
 		}
 	}
 
@@ -91,15 +102,15 @@
 	}
 
 	function handleSelectAction() {
+		if (selectable === false || disabled) return
+
 		const key = controller.focusedKey
 		if (!key) return
 
 		const proxy = controller.lookup.get(key)
 		if (!proxy) return
 
-		if (!disabled) {
-			onselect?.(proxy.value, proxy.value as Record<string, unknown>)
-		}
+		onselect?.(proxy.value, proxy.value as Record<string, unknown>)
 	}
 
 	// ─── Sort ───────────────────────────────────────────────────────
@@ -136,12 +147,14 @@
 	bind:this={tableRef}
 	data-table
 	data-size={size}
+	data-selectable={selectable || undefined}
 	data-disabled={disabled || undefined}
+	data-table-responsive={responsive || undefined}
 	class={className || undefined}
 	onfocusin={handleFocusIn}
 	use:navigator={{ wrapper: controller, orientation: 'vertical' }}
 >
-	<table role="grid" aria-label={caption} data-striped={striped || undefined}>
+	<table role="grid" aria-label={caption} data-table-striped={striped || undefined}>
 		{#if caption}
 			<caption data-table-caption>{caption}</caption>
 		{/if}
@@ -188,7 +201,7 @@
 					</tr>
 				{:else}
 					<tr data-table-empty-row>
-						<td data-table-empty colspan={controller.columns.length}> No data </td>
+						<td data-table-empty colspan={controller.columns.length}>{messages.table.empty}</td>
 					</tr>
 				{/if}
 			{:else}
@@ -210,12 +223,12 @@
 						>
 							{#each controller.columns as column (column.name)}
 								{#if cellSnippet}
-									<td data-table-cell data-column={column.name} style:text-align={column.align}>
+									<td data-table-cell data-column={column.name} data-label={column.label ?? column.name} style:text-align={column.align}>
 										{@render cellSnippet(getCellValue(row, column), column, row)}
 									</td>
 								{:else}
 									{@const cellIcon = getCellIcon(row, column)}
-									<td data-table-cell data-column={column.name} style:text-align={column.align}>
+									<td data-table-cell data-column={column.name} data-label={column.label ?? column.name} style:text-align={column.align}>
 										{#if cellIcon}
 											<span data-cell-icon class={cellIcon} aria-hidden="true"></span>
 										{/if}

package/src/components/Tabs.svelte

@@ -33,7 +33,7 @@
 		align = 'start',
 		name = 'tabs',
 		editable = false,
-		placeholder = 'Select a tab to view its content.',
+		placeholder = messages.tabs.placeholder,
 		disabled = false,
 		labels: userLabels = {},
 		class: className = '',
@@ -44,7 +44,7 @@
 		...snippets
 	}: TabsProps & { labels?: Record<string, string>; [key: string]: unknown } = $props()
 
-	const labels = $derived({ ...messages.current.tabs, ...userLabels })
+	const labels = $derived({ ...messages.tabs, ...userLabels })
 
 	// ─── Wrapper ──────────────────────────────────────────────────────────────
 

package/src/components/Toggle.svelte

@@ -13,7 +13,7 @@
 		showLabels = true,
 		size = 'md',
 		disabled = false,
-		label = messages.current.toggle.label,
+		label = messages.toggle.label,
 		class: className = '',
 		...snippets
 	}: ToggleProps & { [key: string]: unknown } = $props()

package/src/components/Toolbar.svelte

@@ -22,7 +22,7 @@
 		compact = false,
 		showDividers = true,
 		disabled = false,
-		label = messages.current.toolbar.label,
+		label = messages.toolbar.label,
 		onclick,
 		class: className = '',
 		item: itemSnippet,

package/src/components/Tree.svelte

@@ -43,7 +43,7 @@
 		[key: string]: unknown
 	} = $props()
 
-	const labels = $derived({ ...messages.current.tree, ...userLabels })
+	const labels = $derived({ ...messages.tree, ...userLabels })
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
 

package/src/components/UploadFileStatus.svelte

@@ -31,7 +31,7 @@
 		icons: userIcons = {} as Record<string, string>
 	}: UploadFileStatusProps = $props()
 
-	const labels = $derived({ ...messages.current.uploadProgress, ...userLabels })
+	const labels = $derived({ ...messages.uploadProgress, ...userLabels })
 	const icons = $derived({
 		cancel: DEFAULT_STATE_ICONS.action.cancel,
 		retry: DEFAULT_STATE_ICONS.action.retry,

package/src/components/UploadProgress.svelte

@@ -38,7 +38,7 @@
 
 	// ─── Labels ──────────────────────────────────────────────────────────────
 
-	const labels = $derived({ ...messages.current.uploadProgress, ...userLabels })
+	const labels = $derived({ ...messages.uploadProgress, ...userLabels })
 
 	// ─── Field resolution ────────────────────────────────────────────────────
 	// Pass upload-specific field mappings through to List/Grid so ProxyItem

package/src/components/UploadTarget.svelte

@@ -31,7 +31,7 @@
 	const content = $derived(snippets.content as ((dragging: boolean) => unknown) | undefined)
 
 	const resolvedLabels = $derived({
-		...messages.current.uploadTarget,
+		...messages.uploadTarget,
 		...labels
 	})
 

package/src/components/index.ts

@@ -41,3 +41,7 @@ export { default as FloatingNavigation } from './FloatingNavigation.svelte'
 export { default as StatusList } from './StatusList.svelte'
 export { default as Message } from './Message.svelte'
 export { default as AlertList } from './AlertList.svelte'
+export { default as Divider } from './Divider.svelte'
+export { default as Stack } from './Stack.svelte'
+export { default as Badge } from './Badge.svelte'
+export { default as Avatar } from './Avatar.svelte'

package/src/index.ts

@@ -40,7 +40,11 @@ export {
 	UploadProgress,
 	StatusList,
 	Message,
-	AlertList
+	AlertList,
+	Divider,
+	Stack,
+	Badge,
+	Avatar
 } from './components/index.js'
 
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte'

package/src/markdown-plugin.ts

@@ -5,8 +5,8 @@ import type { Component } from 'svelte'
  * The component receives { code: string } as props.
  */
 export interface MarkdownPlugin {
-  /** Fenced code block language to match (e.g. 'plot', 'table', 'sparkline') */
-  language: string
-  /** Svelte component to render the block. Receives { code: string } */
-  component: Component<{ code: string }>
+	/** Fenced code block language to match (e.g. 'plot', 'table', 'sparkline') */
+	language: string
+	/** Svelte component to render the block. Receives { code: string } */
+	component: Component<{ code: string }>
 }

package/src/types/table.ts

@@ -166,9 +166,15 @@ export interface TableProps {
 	/** Column definitions (auto-derived from data if not provided) */
 	columns?: TableColumn[]
 
-	/** Currently selected row value */
+	/** Currently selected row value (single-select) */
 	value?: unknown
 
+	/** Currently selected row values (multi-select, bindable) */
+	values?: unknown[]
+
+	/** Selection mode: 'single' (default), 'multi', or false (no selection) */
+	selectable?: 'single' | 'multi' | false
+
 	/** Table caption for accessibility */
 	caption?: string
 
@@ -178,6 +184,9 @@ export interface TableProps {
 	/** Enable alternating row colors */
 	striped?: boolean
 
+	/** Enable responsive card layout on mobile (< 640px) */
+	responsive?: boolean
+
 	/** Whether the entire table is disabled */
 	disabled?: boolean
 

package/src/types/toggle.ts

@@ -57,7 +57,7 @@ export interface ToggleProps {
 	/** Whether the entire toggle is disabled */
 	disabled?: boolean
 
-	/** Accessible label for the radiogroup. Default: messages.current.toggle.label */
+	/** Accessible label for the radiogroup. Default: messages.toggle.label */
 	label?: string
 
 	/** Additional CSS classes */

package/src/types/upload-file-status.ts

@@ -37,7 +37,7 @@ export interface UploadFileStatusProps {
 	/** Called when remove is clicked */
 	onremove?: (proxy: ProxyItem) => void
 
-	/** Label overrides merged with messages.current.uploadProgress */
+	/** Label overrides merged with messages.uploadProgress */
 	labels?: Record<string, string>
 
 	/** Icon class overrides for action buttons (cancel, retry, remove) */

package/src/types/upload-progress.ts

@@ -100,7 +100,7 @@ export interface UploadProgressProps {
 	/** Called when clear all is clicked */
 	onclear?: () => void
 
-	/** Label overrides merged with messages.current.uploadProgress */
+	/** Label overrides merged with messages.uploadProgress */
 	labels?: Record<string, string>
 
 	/** Additional CSS classes */

package/src/types/upload-target.ts

@@ -51,7 +51,7 @@ export interface UploadTargetProps {
 	/** Disable the drop zone */
 	disabled?: boolean
 
-	/** Label overrides merged with messages.current.uploadTarget */
+	/** Label overrides merged with messages.uploadTarget */
 	labels?: Record<string, string>
 
 	/** Called with validated files after drop or browse */