@rokkit/ui 1.1.18 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.1.18",
+  "version": "1.2.0",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -8,33 +8,34 @@
   },
   "type": "module",
   "svelte": "./src/index.ts",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "svelte": "./src/index.ts",
       "default": "./src/index.ts"
     },
     "./types": {
-      "types": "./src/types/index.ts",
+      "types": "./dist/types/index.d.ts",
       "default": "./src/types/index.ts"
     },
     "./utils/palette": {
-      "types": "./src/utils/palette.ts",
+      "types": "./dist/utils/palette.d.ts",
       "default": "./src/utils/palette.ts"
     },
     "./package.json": "./package.json"
   },
   "files": [
     "src",
+    "dist/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "prepublishOnly": "cp ../../LICENSE .",
+    "prepublishOnly": "cp ../../LICENSE . && bun run build",
     "postpublish": "rm -f LICENSE",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "build": "echo 'No build step needed for source-only package'"
+    "build": "svelte-package -i src -o dist"
   },
   "keywords": [
     "ui",
@@ -44,10 +45,10 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.1.18",
-    "@rokkit/data": "1.1.18",
-    "@rokkit/states": "1.1.18",
-    "@rokkit/actions": "1.1.18",
+    "@rokkit/core": "1.2.0",
+    "@rokkit/data": "1.2.0",
+    "@rokkit/states": "1.2.0",
+    "@rokkit/actions": "1.2.0",
     "marked": "^15.0.0",
     "dompurify": "^3.0.0"
   },
@@ -56,6 +57,8 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "svelte": "^5.53.5",
     "svelte-check": "^4.4.3",
     "typescript": "^5.9.3"

package/src/MarkdownRenderer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { marked } from 'marked'
-	import type { Token, TokensList } from 'marked'
+	import type { Token, Tokens, TokensList } from 'marked'
 	import type { Component, Snippet } from 'svelte'
 	import type { MarkdownPlugin } from './markdown-plugin.js'
 	import DOMPurify from 'dompurify'
@@ -61,7 +61,7 @@
 	 * - { type: 'token', token } — all other tokens
 	 */
 	type Segment =
-		| { type: 'group'; id: string; items: Token[] }
+		| { type: 'group'; id: string; items: Tokens.Code[] }
 		| { type: 'token'; token: Token }
 
 	const segments = $derived.by((): Segment[] => {
@@ -69,10 +69,12 @@
 
 		const result: Segment[] = []
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const groupMap = new Map<string, { type: 'group'; id: string; items: Token[] }>()
+		const groupMap = new Map<string, { type: 'group'; id: string; items: Tokens.Code[] }>()
 
 		for (const token of tokens) {
 			const cfId = getCfGroup(token)
+			// getCfGroup only returns a non-null id for `type: 'code'` tokens,
+			// so a grouped token is always a Code token (carries lang + text).
 			if (cfId) {
 				let group = groupMap.get(cfId)
 				if (!group) {
@@ -80,7 +82,7 @@
 					groupMap.set(cfId, group)
 					result.push(group)
 				}
-				group.items.push(token)
+				group.items.push(token as Tokens.Code)
 			} else {
 				result.push({ type: 'token', token })
 			}

package/src/components/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements'
 	import type { ButtonProps } from '../types/button.js'
 	import { ProxyItem } from '@rokkit/states'
 	import ItemContent from './ItemContent.svelte'
@@ -25,6 +26,11 @@
 	const isIconOnly = $derived(Boolean(icon) && !label && !children)
 	const isDisabled = $derived(disabled || loading)
 
+	// `rest` carries `<button>` attribute types (ButtonProps extends HTMLButtonAttributes);
+	// when rendering the link variant, re-type the passthrough attrs as anchor attrs so the
+	// element-specific event-handler signatures (e.g. onclick targeting HTMLAnchorElement) line up.
+	const anchorRest = $derived(rest as HTMLAnchorAttributes)
+
 	/**
 	 * Create a ProxyItem for default content rendering.
 	 * Constructs a minimal item from button props.
@@ -56,7 +62,7 @@
 		class={className || undefined}
 		aria-label={label}
 		aria-busy={loading || undefined}
-		{...rest}
+		{...anchorRest}
 	>
 		{#if children}
 			{@render children()}

package/src/components/LazyTree.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	// @ts-nocheck
 	/**
 	 * LazyTree — Tree + lazy loading.
 	 *
@@ -20,7 +19,7 @@
 	let {
 		items = [],
 		fields = {},
-		value,
+		value = $bindable(),
 		size = 'md',
 		lineStyle = 'solid',
 		labels: userLabels = {},
@@ -34,7 +33,7 @@
 		items?: unknown[]
 		fields?: Record<string, string>
 		value?: unknown
-		size?: string
+		size?: 'sm' | 'md' | 'lg'
 		lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted'
 		labels?: Record<string, string>
 		icons?: { opened?: string; closed?: string }
@@ -51,7 +50,7 @@
 
 	const proxyTree = $derived(
 		new ProxyTree(items, fields, {
-			createProxy: (raw, f, key, level) =>
+			createProxy: (raw: unknown, f: Record<string, string>, key: string, level: number) =>
 				new LazyProxyItem(
 					raw,
 					f,

package/src/components/List.svelte

@@ -41,7 +41,7 @@
 	let {
 		items = [],
 		fields = {},
-		value,
+		value = $bindable(),
 		size = 'md',
 		disabled = false,
 		collapsible = false,

package/src/components/MultiSelect.svelte

@@ -24,7 +24,6 @@
 	 *   data-select-divider     — divider between groups
 	 *   data-path, data-selected, data-checked, data-disabled, data-open, data-size
 	 */
-	// @ts-nocheck
 	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
 	import { SvelteSet } from 'svelte/reactivity'
@@ -92,9 +91,10 @@
 	// Force groups expanded + disabled (non-navigable labels)
 	const processedItems = $derived(
 		items.map((item) => {
-			const children = item[childrenField]
+			const asRecord = item as Record<string, unknown>
+			const children = asRecord[childrenField]
 			if (Array.isArray(children) && children.length > 0) {
-				return { ...item, expanded: true, disabled: true }
+				return { ...asRecord, expanded: true, disabled: true }
 			}
 			return item
 		})

package/src/components/Pill.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { ProxyItem } from '@rokkit/states'
-	import { keyboard } from '@rokkit/actions'
 	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
 	import type { PillIcons, PillProps } from '../types/pill.js'
 
@@ -19,13 +18,19 @@
 
 	const proxy = $derived(new ProxyItem(value, fields))
 
-	const keyMap = $derived(removable && !disabled ? { remove: ['Delete', 'Backspace'] } : {})
-
 	function handleRemove() {
 		if (!disabled) {
 			onremove?.(value)
 		}
 	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!removable || disabled) return
+		if (event.key === 'Delete' || event.key === 'Backspace') {
+			event.preventDefault()
+			handleRemove()
+		}
+	}
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -33,8 +38,8 @@
 	data-pill
 	data-pill-disabled={disabled || undefined}
 	class={className || undefined}
-	use:keyboard={keyMap}
-	onremove={handleRemove}
+	role={removable && !disabled ? 'button' : undefined}
+	onkeydown={handleKeydown}
 	tabindex={removable && !disabled ? 0 : undefined}
 >
 	{#if content}

package/src/components/Select.svelte

@@ -37,7 +37,6 @@
 	 *   data-align            — dropdown alignment
 	 *   data-direction        — dropdown direction
 	 */
-	// @ts-nocheck
 	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
 	import { SvelteSet } from 'svelte/reactivity'
@@ -139,9 +138,10 @@
 	// Pre-process: force groups expanded + disabled (non-navigable labels)
 	const processedItems = $derived(
 		filteredItems.map((item) => {
-			const children = item[childrenField]
+			const asRecord = item as Record<string, unknown>
+			const children = asRecord[childrenField]
 			if (Array.isArray(children) && children.length > 0) {
-				return { ...item, expanded: true, disabled: true }
+				return { ...asRecord, expanded: true, disabled: true }
 			}
 			return item
 		})

package/src/components/Swatch.svelte

@@ -1,8 +1,35 @@
 <script lang="ts">
-	// @ts-nocheck
-	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import type { Snippet } from 'svelte'
+	import type { ProxyItem } from '@rokkit/states'
+	import { Wrapper, ProxyTree } from '@rokkit/states'
 	import { Navigator } from '@rokkit/actions'
 
+	interface SwatchProps {
+		/** Color options — primitives (hex/name strings) or objects with mapped fields */
+		options?: Array<string | number | Record<string, unknown>>
+		/** Field mapping for object options (value, fill, stroke, …) */
+		fields?: Record<string, string>
+		/** Selected value (bindable). Array when `multiple`. */
+		value?: unknown
+		/** Allow multiple selection */
+		multiple?: boolean
+		/** Swatch shape */
+		shape?: 'square' | 'circle'
+		/** Size variant */
+		size?: 'sm' | 'md' | 'lg'
+		/** Disable the whole group */
+		disabled?: boolean
+		/** Accessible group label */
+		label?: string
+		/** Additional CSS classes */
+		class?: string
+		/** Called when selection changes */
+		onchange?: (value: unknown, item: unknown) => void
+		/** Custom snippet for rendering a swatch (receives proxy + selected) */
+		item?: Snippet<[ProxyItem, boolean]>
+		[key: string]: unknown
+	}
+
 	let {
 		options = [],
 		fields: userFields = {},
@@ -11,12 +38,12 @@
 		shape = 'square',
 		size = 'md',
 		disabled = false,
-		label = messages.swatch?.label ?? 'Select',
+		label = 'Select',
 		class: className = '',
 		onchange,
 		item: itemSnippet,
 		..._rest
-	} = $props()
+	}: SwatchProps = $props()
 
 	const proxyTree = $derived(new ProxyTree(options, userFields))
 	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
@@ -33,12 +60,12 @@
 		wrapper.moveToValue(value)
 	})
 
-	function isSelected(proxy) {
+	function isSelected(proxy: ProxyItem) {
 		if (multiple && Array.isArray(value)) return value.includes(proxy.value)
 		return proxy.value === value
 	}
 
-	function toggleMultiValue(extracted, original) {
+	function toggleMultiValue(extracted: unknown, original: unknown) {
 		const arr = Array.isArray(value) ? [...value] : []
 		const idx = arr.indexOf(extracted)
 		if (idx >= 0) arr.splice(idx, 1)
@@ -47,13 +74,13 @@
 		onchange?.(value, original)
 	}
 
-	function selectSingleValue(extracted, original) {
+	function selectSingleValue(extracted: unknown, original: unknown) {
 		if (extracted === value) return
 		value = extracted
 		onchange?.(extracted, original)
 	}
 
-	function handleSelect(extracted, proxy) {
+	function handleSelect(extracted: unknown, proxy: ProxyItem) {
 		if (proxy.disabled || disabled) return
 		if (multiple) toggleMultiValue(extracted, proxy.original)
 		else selectSingleValue(extracted, proxy.original)

package/src/components/Table.svelte

@@ -129,7 +129,8 @@
 						>
 							<span data-table-header-text>{column.label ?? column.name}</span>
 							{#if column.sortable !== false}
-								{@const sortIcon = icons[column.sorted ?? 'none'] ?? icons.none}
+								{@const sortIcon =
+									icons[(column.sorted ?? 'none') as keyof TableSortIcons] ?? icons.none}
 								<span data-table-sort-icon class={sortIcon} aria-hidden="true"></span>
 							{/if}
 						</th>

package/src/components/Tabs.svelte

@@ -17,7 +17,6 @@
 	 * Tab panels are rendered separately from triggers. Only the active panel
 	 * receives data-panel-active. Navigator ignores panels (no data-path on them).
 	 */
-	// @ts-nocheck
 	import type { TabsProps } from '../types/tabs.js'
 	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
@@ -52,7 +51,7 @@
 	const wrapper = $derived(
 		new Wrapper(proxyTree, {
 			onchange,
-			onselect: (v, proxy) => {
+			onselect: (v: unknown, proxy: ProxyItem) => {
 				value = v
 				onselect?.(v, proxy)
 			}

package/src/components/Toggle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	// @ts-nocheck
 	import type { ToggleProps } from '../types/toggle.js'
+	import type { ProxyItem } from '@rokkit/states'
 	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
 	import { Navigator } from '@rokkit/actions'
 	import { resolveSnippet } from '@rokkit/core'
@@ -43,7 +43,7 @@
 
 	// ─── Selection handler ─────────────────────────────────────────────────────
 
-	function handleSelect(extractedValue, proxy) {
+	function handleSelect(extractedValue: unknown, proxy: ProxyItem) {
 		if (proxy.disabled || disabled) return
 		if (extractedValue !== value) {
 			value = extractedValue

package/src/components/Tree.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	// @ts-nocheck
 	/**
 	 * Tree — Hierarchical data navigation with tree lines and keyboard navigation.
 	 *
@@ -22,7 +21,7 @@
 	let {
 		items = [],
 		fields = {},
-		value,
+		value = $bindable(),
 		size = 'md',
 		lineStyle = 'solid',
 		labels: userLabels = {},

package/src/components/TreeTable.svelte

@@ -177,7 +177,8 @@
 						>
 							<span data-table-header-text>{column.label ?? column.name}</span>
 							{#if column.sortable !== false}
-								{@const sortIcon = icons[column.sorted ?? 'none'] ?? icons.none}
+								{@const sortIcon =
+									icons[(column.sorted ?? 'none') as keyof TableSortIcons] ?? icons.none}
 								<span data-table-sort-icon class={sortIcon} aria-hidden="true"></span>
 							{/if}
 						</th>

package/src/components/UploadTarget.svelte

@@ -12,6 +12,7 @@
 	 *   data-dragging       — present when files dragged over
 	 *   data-disabled       — when disabled
 	 */
+	import type { Snippet } from 'svelte'
 	import type { UploadTargetProps } from '../types/upload-target.js'
 	import { messages } from '@rokkit/states'
 	import { matchesAccept } from '../utils/upload.js'
@@ -29,7 +30,7 @@
 		...snippets
 	}: UploadTargetProps & { [key: string]: unknown } = $props()
 
-	const content = $derived(snippets.content as ((dragging: boolean) => unknown) | undefined)
+	const content = $derived(snippets.content as Snippet<[dragging: boolean]> | undefined)
 
 	const resolvedLabels = $derived({
 		...messages.uploadTarget,

package/src/types/button.ts

@@ -6,6 +6,7 @@
  */
 
 import type { Snippet } from 'svelte'
+import type { HTMLButtonAttributes } from 'svelte/elements'
 
 // =============================================================================
 // Variant & Style Types
@@ -22,9 +23,14 @@ export type ButtonStyle = 'default' | 'outline' | 'ghost' | 'gradient' | 'link'
 // =============================================================================
 
 /**
- * Props for the Button component
+ * Props for the Button component.
+ *
+ * Extends native `<button>` attributes so consumers can pass `aria-*`,
+ * `onclick`, `title`, `name`, `form`, etc. The native `style` and `type`
+ * keys are omitted because this component repurposes `style` (visual
+ * treatment) and narrows `type` to the valid button types.
  */
-export interface ButtonProps {
+export interface ButtonProps extends Omit<HTMLButtonAttributes, 'style' | 'type'> {
 	/** Semantic color variant */
 	variant?: ButtonVariant
 

package/src/types/tabs.ts

@@ -80,11 +80,11 @@ export interface TabsProps {
 	/** Additional CSS classes */
 	class?: string
 
-	/** Called when selection changes */
-	onchange?: (value: unknown, item: TabsItem) => void
+	/** Called when selection changes — receives the value and the tab's ProxyItem */
+	onchange?: (value: unknown, item: ProxyItem) => void
 
-	/** Called when a tab is selected (fires on every click, including same tab) */
-	onselect?: (value: unknown, item: TabsItem) => void
+	/** Called when a tab is selected (fires on every click, including same tab) — receives the value and the tab's ProxyItem */
+	onselect?: (value: unknown, item: ProxyItem) => void
 
 	/** Called when a new tab is requested (editable mode) */
 	onadd?: () => void

package/src/types/toggle.ts

@@ -13,9 +13,10 @@ import type { ProxyItem } from '@rokkit/states'
 // =============================================================================
 
 /**
- * Generic toggle item - can be any object with mapped fields
+ * Generic toggle item — data-driven, so it accepts primitives
+ * (string/number) as well as objects with mapped fields.
  */
-export type ToggleItem = Record<string, unknown>
+export type ToggleItem = string | number | Record<string, unknown>
 
 // =============================================================================
 // Snippet Types