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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.148",
+  "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

@@ -86,28 +86,34 @@
 	// 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(() => {
-		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  }-`))
-				}
-			}
+	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

@@ -38,19 +38,25 @@
 		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) {
-			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)
-		}
+		if (multiple) toggleMultiValue(extracted, proxy.original)
+		else selectSingleValue(extracted, proxy.original)
 	}
 </script>
 

package/src/index.ts

@@ -43,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 }>
+}