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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.149",
+  "version": "1.0.0-next.151",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/MarkdownRenderer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { marked } from 'marked'
-  import type { Token } from 'marked'
+  import type { Token, TokensList } from 'marked'
   import DOMPurify from 'isomorphic-dompurify'
   import type { MarkdownPlugin } from './markdown-plugin.js'
 
@@ -18,8 +18,8 @@
   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)
+    const tokenList = Object.assign([token], { links: (tokens as TokensList).links ?? {} }) as TokensList
+    const raw = marked.parser(tokenList)
     return DOMPurify.sanitize(raw)
   }
 </script>

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>