@rokkit/ui 1.0.0-next.147 → 1.0.0-next.150

package/package.json

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

package/src/MarkdownRenderer.svelte

@@ -0,0 +1,43 @@
+<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'
+
+  interface Props {
+    markdown: string
+    plugins?: MarkdownPlugin[]
+  }
+
+  let { markdown, plugins = [] }: Props = $props()
+
+  const pluginMap = $derived(
+    Object.fromEntries(plugins.map((p) => [p.language.toLowerCase(), p.component]))
+  )
+
+  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 DOMPurify.sanitize(raw)
+  }
+</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}
+</div>

package/src/components/AlertList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte'
 	import { SvelteSet } from 'svelte/reactivity'
 	import { alerts } from '@rokkit/states'
 	import Message from './Message.svelte'
@@ -18,17 +19,15 @@
 
 	const { position = 'top-right', class: className = '' }: AlertListProps = $props()
 
-	let el: HTMLElement | undefined = $state()
 	const dismissing = new SvelteSet<string>()
 
 	// 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).
-	$effect(() => {
-		if (!el) return
-
-		document.body.appendChild(el)
-		return () => el?.remove()
-	})
+	 
+	function mountPortal(node: HTMLElement) {
+		document.body.appendChild(node)
+		return { destroy: () => node.remove() }
+	}
 
 	function startDismiss(id: string) {
 		dismissing.add(id)
@@ -42,7 +41,7 @@
 	}
 </script>
 
-<div bind:this={el} data-alert-list data-position={position} class={className || undefined}>
+<div use:mountPortal data-alert-list data-position={position} class={className || undefined}>
 	{#each alerts.current as alert (alert.id)}
 		<div
 			data-dismissing={dismissing.has(alert.id) || undefined}
@@ -52,7 +51,7 @@
 				type={alert.type as 'error' | 'info' | 'success' | 'warning'}
 				text={alert.text}
 				dismissible={alert.dismissible}
-				actions={alert.actions as any}
+				actions={alert.actions as Snippet}
 				ondismiss={() => startDismiss(alert.id)}
 			/>
 		</div>

package/src/components/List.svelte

@@ -82,14 +82,38 @@
 		return () => nav.destroy()
 	})
 
-	// Expand all groups on mount and when items change.
-	// collapsible=false: groups are fixed section headers — must always show children.
-	// collapsible=true: groups start expanded; user can collapse individual groups.
-	$effect(() => {
+	// Expand groups based on collapsible mode and active value.
+	// collapsible=false: groups are fixed section headers — always expanded.
+	// collapsible=true: only expand the ancestor group of the active value;
+	//   all other groups start collapsed (user can toggle them).
+	function expandAllGroups() {
 		for (const [, proxy] of wrapper.lookup) {
 			if (proxy.hasChildren) proxy.expanded = true
 		}
-	})
+	}
+
+	function findActiveKey(): string | null {
+		for (const [key, proxy] of wrapper.lookup) {
+			if (proxy.value === value) return key
+		}
+		return null
+	}
+
+	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  }-`))
+		}
+	}
+
+	function syncExpandedGroups() {
+		if (!collapsible) { expandAllGroups(); return }
+		expandAncestorGroups(findActiveKey())
+	}
+
+	$effect(syncExpandedGroups)
 
 	// ─── Sync external value → focused key ────────────────────────────────────
 

package/src/components/Swatch.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+
+	let {
+		options = [],
+		fields: userFields = {},
+		value = $bindable(),
+		multiple = false,
+		shape = 'square',
+		size = 'md',
+		disabled = false,
+		label = messages.current.swatch?.label ?? 'Select',
+		class: className = '',
+		onchange,
+		item: itemSnippet,
+		..._rest
+	} = $props()
+
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	let containerRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!containerRef) return
+		const nav = new Navigator(containerRef, wrapper, { orientation: 'horizontal' })
+		return () => nav.destroy()
+	})
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+
+	function isSelected(proxy) {
+		if (multiple && Array.isArray(value)) return value.includes(proxy.value)
+		return proxy.value === value
+	}
+
+	function toggleMultiValue(extracted, original) {
+		const arr = Array.isArray(value) ? [...value] : []
+		const idx = arr.indexOf(extracted)
+		if (idx >= 0) arr.splice(idx, 1)
+		else arr.push(extracted)
+		value = arr
+		onchange?.(value, original)
+	}
+
+	function selectSingleValue(extracted, original) {
+		if (extracted === value) return
+		value = extracted
+		onchange?.(extracted, original)
+	}
+
+	function handleSelect(extracted, proxy) {
+		if (proxy.disabled || disabled) return
+		if (multiple) toggleMultiValue(extracted, proxy.original)
+		else selectSingleValue(extracted, proxy.original)
+	}
+</script>
+
+<div
+	bind:this={containerRef}
+	data-swatch
+	data-swatch-size={size}
+	data-swatch-shape={shape}
+	data-swatch-disabled={disabled || undefined}
+	data-swatch-multiple={multiple || undefined}
+	role={multiple ? 'group' : 'radiogroup'}
+	aria-label={label}
+	aria-disabled={disabled || undefined}
+	class={className || undefined}
+>
+	{#each wrapper.flatView as node (node.key)}
+		{@const proxy = node.proxy}
+		{@const sel = isSelected(proxy)}
+		{@const fill = proxy.get(userFields.fill ?? 'fill')}
+		{@const stroke = proxy.get(userFields.stroke ?? 'stroke')}
+		<button
+			type="button"
+			data-swatch-item
+			data-path={node.key}
+			data-selected={sel || undefined}
+			data-disabled={proxy.disabled || undefined}
+			role={multiple ? 'checkbox' : 'radio'}
+			aria-checked={sel}
+			aria-label={proxy.label}
+			title={proxy.label}
+			disabled={proxy.disabled || disabled}
+			style={fill ? `--swatch-fill:${fill};--swatch-stroke:${stroke ?? fill}` : undefined}
+		>
+			{#if itemSnippet}
+				{@render itemSnippet(proxy, sel)}
+			{:else if shape === 'circle'}
+				<span data-swatch-circle></span>
+			{:else}
+				<span data-swatch-square></span>
+			{/if}
+		</button>
+	{/each}
+</div>

package/src/components/index.ts

@@ -10,6 +10,7 @@ export { default as Toolbar } from './Toolbar.svelte'
 export { default as ToolbarGroup } from './ToolbarGroup.svelte'
 export { default as Tabs } from './Tabs.svelte'
 export { default as Toggle } from './Toggle.svelte'
+export { default as Swatch } from './Swatch.svelte'
 export { default as List } from './List.svelte'
 export { default as Tree } from './Tree.svelte'
 export { default as LazyTree } from './LazyTree.svelte'

package/src/index.ts

@@ -11,6 +11,7 @@ export {
 	ToolbarGroup,
 	Tabs,
 	Toggle,
+	Swatch,
 	List,
 	Tree,
 	LazyTree,
@@ -42,6 +43,9 @@ export {
 	AlertList
 } from './components/index.js'
 
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte'
+export type { MarkdownPlugin } from './markdown-plugin.js'
+
 // Utilities
 export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js'
 export * from './utils/palette.js'

package/src/markdown-plugin.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte'
+
+/**
+ * A plugin that renders a fenced code block as a Svelte component.
+ * 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 }>
+}

package/src/types/button.ts

@@ -12,7 +12,7 @@ import type { Snippet } from 'svelte'
 // =============================================================================
 
 /** Semantic color variant */
-export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger'
+export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'accent' | 'danger'
 
 /** Visual style treatment */
 export type ButtonStyle = 'default' | 'outline' | 'ghost' | 'gradient' | 'link'