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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.147",
+  "version": "1.0.0-next.149",
   "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 } 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 any).links ?? {} })
+    const raw = marked.parser(tokenList as any)
+    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/List.svelte

@@ -82,12 +82,30 @@
 		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.
+	// 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).
 	$effect(() => {
-		for (const [, proxy] of wrapper.lookup) {
-			if (proxy.hasChildren) proxy.expanded = true
+		if (!collapsible) {
+			for (const [, proxy] of wrapper.lookup) {
+				if (proxy.hasChildren) proxy.expanded = true
+			}
+		} else {
+			let activeKey: string | null = null
+			for (const [key, proxy] of wrapper.lookup) {
+				if (proxy.value === value) {
+					activeKey = key
+					break
+				}
+			}
+			for (const [key, proxy] of wrapper.lookup) {
+				if (proxy.hasChildren) {
+					proxy.expanded =
+						activeKey !== null &&
+						(activeKey === key || activeKey.startsWith(`${key  }-`))
+				}
+			}
 		}
 	})
 

package/src/components/Swatch.svelte

@@ -0,0 +1,96 @@
+<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 handleSelect(extracted, proxy) {
+		if (proxy.disabled || disabled) return
+		if (multiple) {
+			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, proxy.original)
+		} else if (extracted !== value) {
+			value = extracted
+			onchange?.(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'