@rokkit/ui 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -22,7 +22,8 @@
     "./utils/palette": {
       "types": "./src/utils/palette.ts",
       "default": "./src/utils/palette.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "src",
@@ -43,10 +44,10 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.0.4",
-    "@rokkit/data": "1.0.4",
-    "@rokkit/states": "1.0.4",
-    "@rokkit/actions": "1.0.4",
+    "@rokkit/core": "1.1.0",
+    "@rokkit/data": "1.1.0",
+    "@rokkit/states": "1.1.0",
+    "@rokkit/actions": "1.1.0",
     "marked": "^15.0.0",
     "dompurify": "^3.0.0"
   },

package/src/MarkdownRenderer.svelte

@@ -22,12 +22,24 @@
 
 	const tokens = $derived(marked.lexer(markdown))
 
+	// DOMPurify ships as a fully-initialised object in browser environments and
+	// as a factory function on the server (it needs to be bound to a DOM window
+	// — usually jsdom — before .sanitize is available). To stay SSR-safe without
+	// pulling jsdom into every consumer's build, fall back to a pass-through
+	// when .sanitize is unavailable. Consumers rendering untrusted markdown in
+	// SSR contexts should pre-sanitize before passing it to this component;
+	// post-hydration the client runs the real sanitiser regardless.
+	const sanitize: (raw: string) => string =
+		typeof DOMPurify?.sanitize === 'function'
+			? (raw) => DOMPurify.sanitize(raw) as string
+			: (raw) => raw
+
 	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)
+		return sanitize(raw)
 	}
 
 	/** Extract crossfilter group ID from a code token's text, or null if absent/invalid. */

package/src/components/AlertList.svelte

@@ -2,21 +2,9 @@
 	import type { Snippet } from 'svelte'
 	import { SvelteSet } from 'svelte/reactivity'
 	import { alerts } from '@rokkit/states'
+	import type { AlertListProps } from '../types/alert-list.js'
 	import Message from './Message.svelte'
 
-	interface AlertListProps {
-		/** Screen position for the toast stack */
-		position?:
-			| 'top-right'
-			| 'top-center'
-			| 'top-left'
-			| 'bottom-right'
-			| 'bottom-center'
-			| 'bottom-left'
-		/** Additional CSS class */
-		class?: string
-	}
-
 	const { position = 'top-right', class: className = '' }: AlertListProps = $props()
 
 	const dismissing = new SvelteSet<string>()

package/src/components/Avatar.svelte

@@ -1,22 +1,5 @@
 <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
-	}
+	import type { AvatarProps } from '../types/avatar.js'
 
 	const {
 		src,

package/src/components/Badge.svelte

@@ -1,20 +1,5 @@
 <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
-	}
+	import type { BadgeProps } from '../types/badge.js'
 
 	const {
 		count,

package/src/components/BreadCrumbs.svelte

@@ -1,26 +1,7 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
 	import { ProxyItem, messages } from '@rokkit/states'
 	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
-
-	interface BreadCrumbsIcons {
-		separator?: string
-	}
-
-	interface BreadCrumbsProps {
-		/** Array of breadcrumb items */
-		items?: unknown[]
-		/** Custom field mappings */
-		fields?: Record<string, string>
-		/** Custom icons */
-		icons?: BreadCrumbsIcons
-		/** Callback when a breadcrumb is clicked */
-		onclick?: (value: unknown, item: unknown) => void
-		/** Custom snippet for rendering each crumb */
-		crumb?: Snippet<[ProxyItem, boolean]>
-		/** Additional CSS class */
-		class?: string
-	}
+	import type { BreadCrumbsIcons, BreadCrumbsProps } from '../types/breadcrumbs.js'
 
 	const {
 		items = [],
@@ -30,7 +11,7 @@
 		onclick,
 		crumb,
 		class: className = ''
-	}: BreadCrumbsProps & { label?: string } = $props()
+	}: BreadCrumbsProps = $props()
 
 	const icons = $derived({ separator: DEFAULT_STATE_ICONS.navigate.right, ...userIcons })
 

package/src/components/Card.svelte

@@ -1,22 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
-
-	interface CardProps {
-		/** Optional href to render as a link */
-		href?: string
-		/** Click handler (only applies when no href) */
-		onclick?: () => void
-		/** Visual variant */
-		variant?: 'default' | 'primary' | 'secondary' | 'tertiary'
-		/** Additional CSS class */
-		class?: string
-		/** Card header snippet */
-		header?: Snippet
-		/** Card footer snippet */
-		footer?: Snippet
-		/** Card body content */
-		children?: Snippet
-	}
+	import type { CardProps } from '../types/card.js'
 
 	const {
 		href,

package/src/components/Carousel.svelte

@@ -1,32 +1,7 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
 	import { swipeable, keyboard } from '@rokkit/actions'
 	import { messages } from '@rokkit/states'
-
-	interface CarouselProps {
-		/** Number of slides (required when using children snippet) */
-		count?: number
-		/** Current slide index (bindable) */
-		current?: number
-		/** Auto-advance slides */
-		autoplay?: boolean
-		/** Autoplay interval in milliseconds (default: 5000) */
-		interval?: number
-		/** Wrap around at ends (default: true) */
-		loop?: boolean
-		/** Show navigation dots (default: true) */
-		showDots?: boolean
-		/** Show prev/next arrow buttons (default: true) */
-		showArrows?: boolean
-		/** Transition effect (default: 'slide') */
-		transition?: 'slide' | 'fade' | 'none'
-		/** Additional CSS class */
-		class?: string
-		/** Slide content — receives (index, current) */
-		slide?: Snippet<[number, number]>
-		/** Children snippet (alternative to slide) */
-		children?: Snippet
-	}
+	import type { CarouselProps } from '../types/carousel.js'
 
 	let {
 		count = 0,
@@ -41,7 +16,7 @@
 		class: className = '',
 		slide,
 		children
-	}: CarouselProps & { labels?: Record<string, string> } = $props()
+	}: CarouselProps = $props()
 
 	const labels = $derived({ ...messages.carousel, ...userLabels })
 

package/src/components/CodeBlock.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	/**
+	 * CodeBlock — code with chrome.
+	 *
+	 * Wraps a Shiki-highlighted code body in a Frame whose header carries
+	 * the filename + language chip + optional action buttons (copy /
+	 * download). Adding the chrome on top of the same Frame primitive
+	 * the rest of the app uses keeps the visual rhythm consistent.
+	 *
+	 * Action buttons are opt-in: dev surfaces enable them per instance,
+	 * end-user surfaces default to plain.
+	 *
+	 * For a plain unstyled code surface (no chrome), use the lower-level
+	 * `<Code/>` component instead.
+	 */
+	import { onMount } from 'svelte'
+	import { highlightCode } from '../utils/shiki.js'
+	import type { CodeBlockProps } from '../types/code.js'
+	import Frame from './Frame.svelte'
+
+	const {
+		code,
+		language = 'text',
+		filename = '',
+		height,
+		theme = 'auto',
+		allowCopy = false,
+		allowDownload = false,
+		actions
+	}: CodeBlockProps = $props()
+
+	// Track body data-mode so the Shiki theme follows light/dark changes.
+	let bodyMode = $state<'light' | 'dark'>('dark')
+	onMount(() => {
+		const sync = () => {
+			const m = document.body?.dataset.mode
+			bodyMode = m === 'light' ? 'light' : 'dark'
+		}
+		sync()
+		const observer = new MutationObserver(sync)
+		observer.observe(document.body, { attributes: true, attributeFilter: ['data-mode'] })
+		return () => observer.disconnect()
+	})
+	const effectiveTheme = $derived(theme === 'auto' ? bodyMode : theme)
+
+	// Store Shiki output in $state. Using a $derived Promise here would have
+	// {#await} reset to pending on every reactivity tick (each $derived call
+	// produces a new Promise reference). Fall back to a plain <pre> while
+	// Shiki initialises and on error.
+	let highlighted = $state<string | null>(null)
+	$effect(() => {
+		const c = code
+		const l = language
+		const t = effectiveTheme
+		let cancelled = false
+		highlightCode(c, { lang: l, theme: t })
+			.then((html) => {
+				if (!cancelled) highlighted = html
+			})
+			.catch(() => {
+				if (!cancelled) highlighted = null
+			})
+		return () => { cancelled = true }
+	})
+
+	const hasHeader = $derived(Boolean(filename || language || allowCopy || allowDownload || actions))
+
+	let copied = $state(false)
+	async function copyCode() {
+		try {
+			await navigator.clipboard.writeText(code)
+			copied = true
+			setTimeout(() => (copied = false), 1500)
+		} catch {
+			// Silent fail — clipboard API may require https or user gesture
+		}
+	}
+
+	function downloadCode() {
+		const blob = new Blob([code], { type: 'text/plain' })
+		const url = URL.createObjectURL(blob)
+		const a = document.createElement('a')
+		a.href = url
+		a.download = filename || `code.${language || 'txt'}`
+		a.click()
+		URL.revokeObjectURL(url)
+	}
+</script>
+
+<div data-code-block style:max-height={height || undefined}>
+	<Frame flush>
+		{#snippet header()}
+			{#if hasHeader}
+				<div data-code-block-header>
+					<div data-code-block-title>
+						<span data-code-block-icon class="view-code" aria-hidden="true"></span>
+						{#if filename}<span data-code-block-filename>{filename}</span>{/if}
+						{#if language}<span data-code-block-lang>{language}</span>{/if}
+					</div>
+					{#if allowCopy || allowDownload || actions}
+						<div data-code-block-actions>
+							{#if allowCopy}
+								<button type="button" onclick={copyCode} title="Copy code">
+									<span class={copied ? 'action-check' : 'action-copy'} aria-hidden="true"></span>
+									<span>{copied ? 'Copied' : 'Copy'}</span>
+								</button>
+							{/if}
+							{#if allowDownload}
+								<button type="button" onclick={downloadCode} title="Download as file">
+									<span class="action-download" aria-hidden="true"></span>
+									<span>.{language || 'txt'}</span>
+								</button>
+							{/if}
+							{#if actions}
+								{@render actions()}
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/snippet}
+
+		{#if highlighted}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<div data-code-block-body>{@html highlighted}</div>
+		{:else}
+			<pre data-code-block-body><code>{code}</code></pre>
+		{/if}
+	</Frame>
+</div>