@rokkit/ui 1.3.1 → 1.3.2

package/dist/components/ChatComposer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ChatComposerProps } from '../types/chat.js';
+declare const ChatComposer: import("svelte").Component<ChatComposerProps, {
+    focus: () => void;
+}, "value">;
+type ChatComposer = ReturnType<typeof ChatComposer>;
+export default ChatComposer;

package/dist/components/ChatHistory.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatHistoryProps } from '../types/chat.js';
+declare const ChatHistory: import("svelte").Component<ChatHistoryProps, {}, "">;
+type ChatHistory = ReturnType<typeof ChatHistory>;
+export default ChatHistory;

package/dist/components/ChatMessage.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatMessageProps } from '../types/chat.js';
+declare const ChatMessage: import("svelte").Component<ChatMessageProps, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/components/ChatShell.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatShellProps } from '../types/chat.js';
+declare const ChatShell: import("svelte").Component<ChatShellProps, {}, "value">;
+type ChatShell = ReturnType<typeof ChatShell>;
+export default ChatShell;

package/dist/components/ChatTimeline.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatTimelineProps } from '../types/chat.js';
+declare const ChatTimeline: import("svelte").Component<ChatTimelineProps, {}, "">;
+type ChatTimeline = ReturnType<typeof ChatTimeline>;
+export default ChatTimeline;

package/dist/components/ItemSwitch.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+     * ItemSwitch — inert switch-shaped renderer for use inside a List / Menu / Tree
+     * item snippet.
+     *
+     * Renders `<ItemContent>` for the label / icon and then a purely visual switch
+     * (span-based, aria-hidden) that reflects the item's boolean state via
+     * `aria-checked`. Because nothing interactive is nested inside the parent
+     * `<button data-list-item>`, the HTML parser leaves the markup intact and the
+     * whole row remains a single click target — clicking the row triggers the
+     * parent's `onselect` flow, which the consumer uses to flip the state.
+     */
+import type { ItemSwitchProps } from '../types/item-switch.js';
+declare const ItemSwitch: import("svelte").Component<ItemSwitchProps, {}, "">;
+type ItemSwitch = ReturnType<typeof ItemSwitch>;
+export default ItemSwitch;

package/dist/components/ItemToggle.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+     * ItemToggle — compact toggle-group renderer for use inside a List / Menu / Tree
+     * item snippet.
+     *
+     * Each option is rendered as `<span role="radio" tabindex="-1">` with its own
+     * click handler. Navigator's `isNestedInteractive` guard defers to these
+     * nested [role="radio"] elements so the row's select flow is NOT triggered
+     * when a user picks an option. Consumers wire the state via `onchange`.
+     *
+     * The wrapping element remains a `<span>` (non-interactive) so it stays legal
+     * inside the parent `<button data-list-item>`.
+     */
+import type { ItemToggleProps } from '../types/item-toggle.js';
+declare const ItemToggle: import("svelte").Component<ItemToggleProps, {}, "">;
+type ItemToggle = ReturnType<typeof ItemToggle>;
+export default ItemToggle;

package/dist/components/index.d.ts

@@ -19,6 +19,8 @@ export { default as Tree } from './Tree.svelte';
 export { default as LazyTree } from './LazyTree.svelte';
 export { default as Connector } from './Connector.svelte';
 export { default as ItemContent } from './ItemContent.svelte';
+export { default as ItemSwitch } from './ItemSwitch.svelte';
+export { default as ItemToggle } from './ItemToggle.svelte';
 export { default as FloatingAction } from './FloatingAction.svelte';
 export { default as PaletteManager } from './PaletteManager.svelte';
 export { default as Tilt } from './Tilt.svelte';
@@ -53,3 +55,8 @@ export { default as Avatar } from './Avatar.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as NavContent } from './NavContent.svelte';
 export { default as ResponsiveGrid } from './ResponsiveGrid.svelte';
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { default as ChatTimeline } from './ChatTimeline.svelte';
+export { default as ChatComposer } from './ChatComposer.svelte';
+export { default as ChatHistory } from './ChatHistory.svelte';
+export { default as ChatShell } from './ChatShell.svelte';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, LockMode, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette } from './components/index.js';
+export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, LockMode, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette, ChatMessage, ChatTimeline, ChatComposer, ChatHistory, ChatShell } from './components/index.js';
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';
 export type { MarkdownPlugin } from './markdown-plugin.js';
 export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js';

package/dist/types/chat.d.ts

@@ -0,0 +1,73 @@
+import type { Snippet } from 'svelte';
+export type ChatRole = 'user' | 'assistant' | 'system';
+export type ChatStatus = 'streaming' | 'error' | 'done';
+export interface ChatMessage<T = unknown> {
+    id: string;
+    role: ChatRole;
+    /** Default body, rendered as markdown by the built-in body snippet. */
+    text?: string;
+    timestamp?: string;
+    /** Drives the optional typing/error affordance; consumer sets it. */
+    status?: ChatStatus;
+    /** Arbitrary payload (parts/blocks/chart spec/form schema) the consumer's `message` snippet reads. */
+    data?: T;
+}
+export interface ConversationSummary {
+    id: string;
+    title: string;
+    timestamp?: string;
+}
+export interface ChatMessageProps {
+    message: ChatMessage;
+    relativeTime?: boolean;
+    body?: Snippet<[ChatMessage]>;
+    avatar?: Snippet<[ChatMessage]>;
+    label?: Snippet<[ChatMessage]>;
+}
+export interface ChatComposerProps {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    busy?: boolean;
+    onsubmit?: (text: string) => void;
+    onchange?: (value: string) => void;
+    suggestions?: Snippet;
+    toolbar?: Snippet;
+    leading?: Snippet;
+}
+export interface ChatHistoryProps {
+    conversations?: ConversationSummary[];
+    activeId?: string | null;
+    relativeTime?: boolean;
+    onselect?: (id: string) => void;
+    onnew?: () => void;
+    ondelete?: (id: string) => void;
+    item?: Snippet<[ConversationSummary]>;
+    empty?: Snippet;
+    header?: Snippet;
+}
+export interface ChatTimelineProps {
+    messages?: ChatMessage[];
+    relativeTime?: boolean;
+    autoscroll?: boolean;
+    message?: Snippet<[ChatMessage]>;
+    empty?: Snippet;
+}
+export interface ChatShellProps {
+    messages?: ChatMessage[];
+    conversations?: ConversationSummary[];
+    activeConversationId?: string | null;
+    value?: string;
+    placeholder?: string;
+    busy?: boolean;
+    onsubmit?: (text: string) => void;
+    onchange?: (value: string) => void;
+    onselectConversation?: (id: string) => void;
+    onnew?: () => void;
+    message?: Snippet<[ChatMessage]>;
+    suggestions?: Snippet;
+    toolbar?: Snippet;
+    leading?: Snippet;
+    historyItem?: Snippet<[ConversationSummary]>;
+    empty?: Snippet;
+}

package/dist/types/index.d.ts

@@ -22,6 +22,8 @@ export * from './upload-file-status.js';
 export * from './upload-progress.js';
 export * from './tooltip.js';
 export * from './item-content.js';
+export * from './item-switch.js';
+export * from './item-toggle.js';
 export * from './status-list.js';
 export * from './alert-list.js';
 export * from './avatar.js';
@@ -43,3 +45,4 @@ export * from './shine.js';
 export * from './stack.js';
 export * from './stepper.js';
 export * from './tilt.js';
+export * from './chat.js';

package/dist/types/item-switch.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ItemSwitch Component Types
+ *
+ * Renders a switch-shaped visual inside a data-driven item snippet
+ * (List / Menu / Tree). The whole row is the interactive target — clicking it
+ * toggles the underlying data through the parent's onselect flow. ItemSwitch
+ * itself renders inert markup (spans + attributes), so it never introduces a
+ * nested interactive element inside the item's `<button>` wrapper.
+ */
+import type { ProxyItem } from '@rokkit/states';
+export interface ItemSwitchProps {
+    /** ProxyItem for the current row. */
+    proxy: ProxyItem;
+    /**
+     * Field on the item that holds the boolean checked state.
+     * @default 'checked'
+     */
+    field?: string;
+    /** Size variant — feeds into `data-switch-size` for theming. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Render the leading avatar / icon (via ItemContent). @default true */
+    showIcon?: boolean;
+    /** Render subtext under the label (via ItemContent). @default true */
+    showSubtext?: boolean;
+    /** Optional class on the wrapper span. */
+    class?: string;
+}

package/dist/types/item-toggle.d.ts

@@ -0,0 +1,45 @@
+/**
+ * ItemToggle Component Types
+ *
+ * Renders a compact toggle-group visual inside a data-driven item snippet.
+ * Options come from the item's data (via `optionsField`). Each option is a
+ * span with `role="radio"` and its own click handler — Navigator defers to
+ * these nested interactives via its isNestedInteractive guard.
+ *
+ * Consumers wire state via `onchange`. ItemToggle does not mutate the item
+ * data directly.
+ */
+import type { ProxyItem } from '@rokkit/states';
+export type ItemToggleOption = string | number | boolean | {
+    label?: string;
+    value?: unknown;
+    icon?: string;
+};
+export interface ItemToggleProps {
+    /** ProxyItem for the current row. */
+    proxy: ProxyItem;
+    /**
+     * Field on the item that holds the currently selected value.
+     * @default 'value'
+     */
+    field?: string;
+    /**
+     * Field on the item that holds the array of options.
+     * @default 'options'
+     */
+    optionsField?: string;
+    /**
+     * Called when the user picks an option. Consumers update the item data.
+     */
+    onchange?: (value: unknown, option: ItemToggleOption, proxy: ProxyItem) => void;
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Render the leading avatar / icon (via ItemContent). @default true */
+    showIcon?: boolean;
+    /** Render subtext under the label (via ItemContent). @default true */
+    showSubtext?: boolean;
+    /** Show textual labels beside the option (falls back to option value). @default true */
+    showLabels?: boolean;
+    /** Optional class on the wrapper span. */
+    class?: string;
+}

package/dist/utils/relative-time.d.ts

@@ -0,0 +1,2 @@
+/** Format an ISO timestamp as a short relative label ("5m ago"), or a clock time when relative=false. */
+export declare function formatRelativeTime(timestamp: string, relative?: boolean): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -45,10 +45,10 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.3.1",
-    "@rokkit/data": "1.3.1",
-    "@rokkit/states": "1.3.1",
-    "@rokkit/actions": "1.3.1",
+    "@rokkit/core": "1.3.2",
+    "@rokkit/data": "1.3.2",
+    "@rokkit/states": "1.3.2",
+    "@rokkit/actions": "1.3.2",
     "marked": "^15.0.0",
     "dompurify": "^3.0.0"
   },

package/src/components/ChatComposer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { ChatComposerProps } from '../types/chat.js'
+
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		disabled = false,
+		busy = false,
+		onsubmit,
+		onchange,
+		suggestions,
+		toolbar,
+		leading
+	}: ChatComposerProps = $props()
+
+	let textarea: HTMLTextAreaElement
+
+	export function focus() {
+		textarea?.focus()
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault()
+			if (!disabled && !busy && value.trim()) onsubmit?.(value)
+		}
+	}
+
+	function handleInput() {
+		onchange?.(value)
+	}
+</script>
+
+<div data-chat-composer data-busy={busy || undefined}>
+	{#if leading}{@render leading()}{/if}
+	{#if suggestions}{@render suggestions()}{/if}
+	<textarea
+		bind:this={textarea}
+		bind:value
+		{placeholder}
+		{disabled}
+		rows="2"
+		data-chat-input
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+	></textarea>
+	{#if toolbar}{@render toolbar()}{/if}
+</div>

package/src/components/ChatHistory.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { formatRelativeTime } from '../utils/relative-time.js'
+	import type { ChatHistoryProps } from '../types/chat.js'
+
+	const {
+		conversations = [],
+		activeId = null,
+		relativeTime = true,
+		onselect,
+		onnew,
+		ondelete,
+		item,
+		empty,
+		header
+	}: ChatHistoryProps = $props()
+</script>
+
+<div data-chat-history>
+	{#if header}{@render header()}{/if}
+	{#if onnew}<button type="button" data-chat-history-new onclick={() => onnew()}>New conversation</button>{/if}
+	{#if conversations.length === 0}
+		{#if empty}{@render empty()}{/if}
+	{:else}
+		{#each conversations as conversation (conversation.id)}
+			{#if item}
+				{@render item(conversation)}
+			{:else}
+				<div data-chat-history-row data-active={conversation.id === activeId || undefined}>
+					<button type="button" data-chat-history-item onclick={() => onselect?.(conversation.id)}>
+						<span data-chat-history-title>{conversation.title}</span>
+						{#if conversation.timestamp}
+							<time data-chat-history-time>{formatRelativeTime(conversation.timestamp, relativeTime)}</time>
+						{/if}
+					</button>
+					{#if ondelete}
+						<button type="button" data-chat-history-delete aria-label="Delete conversation" onclick={() => ondelete(conversation.id)}>×</button>
+					{/if}
+				</div>
+			{/if}
+		{/each}
+	{/if}
+</div>

package/src/components/ChatMessage.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import MarkdownRenderer from '../MarkdownRenderer.svelte'
+	import { formatRelativeTime } from '../utils/relative-time.js'
+	import type { ChatMessageProps } from '../types/chat.js'
+
+	const { message, relativeTime = true, body, avatar, label }: ChatMessageProps = $props()
+</script>
+
+<div data-chat-message data-role={message.role} data-status={message.status || undefined}>
+	{#if avatar}{@render avatar(message)}{/if}
+	<div data-chat-bubble>
+		{#if label}{@render label(message)}{/if}
+		<div data-chat-body>
+			{#if body}
+				{@render body(message)}
+			{:else if message.text}
+				<MarkdownRenderer markdown={message.text} />
+			{/if}
+			{#if message.status === 'streaming'}<span data-chat-caret aria-hidden="true"></span>{/if}
+		</div>
+		{#if message.timestamp}
+			<time data-chat-time datetime={message.timestamp}
+				>{formatRelativeTime(message.timestamp, relativeTime)}</time
+			>
+		{/if}
+	</div>
+</div>

package/src/components/ChatShell.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import ChatTimeline from './ChatTimeline.svelte'
+	import ChatComposer from './ChatComposer.svelte'
+	import ChatHistory from './ChatHistory.svelte'
+	import type { ChatShellProps } from '../types/chat.js'
+
+	let {
+		messages = [],
+		conversations,
+		activeConversationId = null,
+		value = $bindable(''),
+		placeholder,
+		busy = false,
+		onsubmit,
+		onchange,
+		onselectConversation,
+		onnew,
+		message,
+		suggestions,
+		toolbar,
+		leading,
+		historyItem,
+		empty
+	}: ChatShellProps = $props()
+</script>
+
+<div data-chat-shell data-has-history={conversations ? '' : undefined}>
+	{#if conversations}
+		<ChatHistory
+			{conversations}
+			activeId={activeConversationId}
+			onselect={onselectConversation}
+			{onnew}
+			item={historyItem}
+		/>
+	{/if}
+	<div data-chat-main>
+		<ChatTimeline {messages} {message} {empty} />
+		<ChatComposer bind:value {placeholder} {busy} {onsubmit} {onchange} {suggestions} {toolbar} {leading} />
+	</div>
+</div>

package/src/components/ChatTimeline.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import ChatMessage from './ChatMessage.svelte'
+	import type { ChatTimelineProps } from '../types/chat.js'
+
+	let { messages = [], relativeTime = true, autoscroll = true, message, empty }: ChatTimelineProps = $props()
+
+	let container: HTMLElement | undefined = $state()
+
+	// Auto-scroll to the newest content when messages grow or the last message streams.
+	$effect(() => {
+		const last = messages[messages.length - 1]
+		// touch reactive deps so the effect re-runs on append + streaming updates
+		void messages.length
+		void last?.text
+		void last?.status
+		if (autoscroll && container) container.scrollTop = container.scrollHeight
+	})
+</script>
+
+<div bind:this={container} data-chat-timeline>
+	{#if messages.length === 0}
+		{#if empty}{@render empty()}{/if}
+	{:else}
+		{#each messages as msg (msg.id)}
+			{#if message}
+				{@render message(msg)}
+			{:else}
+				<ChatMessage message={msg} {relativeTime} />
+			{/if}
+		{/each}
+	{/if}
+</div>

package/src/components/ItemSwitch.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	/**
+	 * ItemSwitch — inert switch-shaped renderer for use inside a List / Menu / Tree
+	 * item snippet.
+	 *
+	 * Renders `<ItemContent>` for the label / icon and then a purely visual switch
+	 * (span-based, aria-hidden) that reflects the item's boolean state via
+	 * `aria-checked`. Because nothing interactive is nested inside the parent
+	 * `<button data-list-item>`, the HTML parser leaves the markup intact and the
+	 * whole row remains a single click target — clicking the row triggers the
+	 * parent's `onselect` flow, which the consumer uses to flip the state.
+	 */
+	import type { ItemSwitchProps } from '../types/item-switch.js'
+	import ItemContent from './ItemContent.svelte'
+
+	const {
+		proxy,
+		field = 'checked',
+		size = 'md',
+		showIcon = true,
+		showSubtext = true,
+		class: className
+	}: ItemSwitchProps = $props()
+
+	const checked = $derived(Boolean(proxy.get(field)))
+</script>
+
+<ItemContent {proxy} {showIcon} {showSubtext} />
+<span
+	data-item-switch
+	data-switch
+	data-switch-size={size}
+	aria-checked={checked}
+	aria-hidden="true"
+	class={className || undefined}
+>
+	<span data-switch-track>
+		<span data-switch-thumb></span>
+	</span>
+</span>

package/src/components/ItemToggle.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	/**
+	 * ItemToggle — compact toggle-group renderer for use inside a List / Menu / Tree
+	 * item snippet.
+	 *
+	 * Each option is rendered as `<span role="radio" tabindex="-1">` with its own
+	 * click handler. Navigator's `isNestedInteractive` guard defers to these
+	 * nested [role="radio"] elements so the row's select flow is NOT triggered
+	 * when a user picks an option. Consumers wire the state via `onchange`.
+	 *
+	 * The wrapping element remains a `<span>` (non-interactive) so it stays legal
+	 * inside the parent `<button data-list-item>`.
+	 */
+	import type { ItemToggleProps, ItemToggleOption } from '../types/item-toggle.js'
+	import ItemContent from './ItemContent.svelte'
+
+	const {
+		proxy,
+		field = 'value',
+		optionsField = 'options',
+		onchange,
+		size = 'md',
+		showIcon = true,
+		showSubtext = true,
+		showLabels = true,
+		class: className
+	}: ItemToggleProps = $props()
+
+	const options = $derived<ItemToggleOption[]>(
+		Array.isArray(proxy.get(optionsField)) ? (proxy.get(optionsField) as ItemToggleOption[]) : []
+	)
+	const currentValue = $derived(proxy.get(field))
+
+	function extractValue(opt: ItemToggleOption): unknown {
+		if (opt && typeof opt === 'object') {
+			const o = opt as { value?: unknown }
+			return 'value' in o ? o.value : opt
+		}
+		return opt
+	}
+
+	function extractLabel(opt: ItemToggleOption): string {
+		if (opt && typeof opt === 'object') {
+			const o = opt as { label?: string; value?: unknown }
+			if (o.label !== undefined && o.label !== null) return String(o.label)
+			return String(extractValue(opt))
+		}
+		return String(opt)
+	}
+
+	function extractIcon(opt: ItemToggleOption): string | undefined {
+		if (opt && typeof opt === 'object') {
+			const o = opt as { icon?: string }
+			return o.icon
+		}
+		return undefined
+	}
+
+	function handleClick(event: MouseEvent, opt: ItemToggleOption) {
+		event.stopPropagation()
+		const value = extractValue(opt)
+		if (value === currentValue) return
+		onchange?.(value, opt, proxy)
+	}
+</script>
+
+<ItemContent {proxy} {showIcon} {showSubtext} />
+<span
+	data-item-toggle
+	data-item-toggle-size={size}
+	role="radiogroup"
+	class={className || undefined}
+>
+	{#each options as opt (extractValue(opt))}
+		{@const value = extractValue(opt)}
+		{@const label = extractLabel(opt)}
+		{@const icon = extractIcon(opt)}
+		{@const selected = value === currentValue}
+		<span
+			data-item-toggle-option
+			data-selected={selected || undefined}
+			role="radio"
+			tabindex="-1"
+			aria-checked={selected}
+			aria-label={label}
+			onclick={(event) => handleClick(event, opt)}
+			onkeydown={(event) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault()
+					event.stopPropagation()
+					handleClick(event as unknown as MouseEvent, opt)
+				}
+			}}
+		>
+			{#if icon}
+				<span data-item-toggle-icon class={icon} aria-hidden="true"></span>
+			{/if}
+			{#if showLabels}
+				<span data-item-toggle-label>{label}</span>
+			{/if}
+		</span>
+	{/each}
+</span>

package/src/components/index.ts

@@ -20,6 +20,8 @@ export { default as Tree } from './Tree.svelte'
 export { default as LazyTree } from './LazyTree.svelte'
 export { default as Connector } from './Connector.svelte'
 export { default as ItemContent } from './ItemContent.svelte'
+export { default as ItemSwitch } from './ItemSwitch.svelte'
+export { default as ItemToggle } from './ItemToggle.svelte'
 export { default as FloatingAction } from './FloatingAction.svelte'
 export { default as PaletteManager } from './PaletteManager.svelte'
 export { default as Tilt } from './Tilt.svelte'
@@ -54,3 +56,8 @@ export { default as Avatar } from './Avatar.svelte'
 export { default as Tooltip } from './Tooltip.svelte'
 export { default as NavContent } from './NavContent.svelte'
 export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'
+export { default as ChatMessage } from './ChatMessage.svelte'
+export { default as ChatTimeline } from './ChatTimeline.svelte'
+export { default as ChatComposer } from './ChatComposer.svelte'
+export { default as ChatHistory } from './ChatHistory.svelte'
+export { default as ChatShell } from './ChatShell.svelte'

package/src/index.ts

@@ -54,7 +54,12 @@ export {
 	Tooltip,
 	NavContent,
 	ResponsiveGrid,
-	CommandPalette
+	CommandPalette,
+	ChatMessage,
+	ChatTimeline,
+	ChatComposer,
+	ChatHistory,
+	ChatShell
 } from './components/index.js'
 
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte'

package/src/types/chat.ts

@@ -0,0 +1,81 @@
+import type { Snippet } from 'svelte'
+
+export type ChatRole = 'user' | 'assistant' | 'system'
+export type ChatStatus = 'streaming' | 'error' | 'done'
+
+export interface ChatMessage<T = unknown> {
+	id: string
+	role: ChatRole
+	/** Default body, rendered as markdown by the built-in body snippet. */
+	text?: string
+	timestamp?: string
+	/** Drives the optional typing/error affordance; consumer sets it. */
+	status?: ChatStatus
+	/** Arbitrary payload (parts/blocks/chart spec/form schema) the consumer's `message` snippet reads. */
+	data?: T
+}
+
+export interface ConversationSummary {
+	id: string
+	title: string
+	timestamp?: string
+}
+
+export interface ChatMessageProps {
+	message: ChatMessage
+	relativeTime?: boolean
+	body?: Snippet<[ChatMessage]>
+	avatar?: Snippet<[ChatMessage]>
+	label?: Snippet<[ChatMessage]>
+}
+
+export interface ChatComposerProps {
+	value?: string
+	placeholder?: string
+	disabled?: boolean
+	busy?: boolean
+	onsubmit?: (text: string) => void
+	onchange?: (value: string) => void
+	suggestions?: Snippet
+	toolbar?: Snippet
+	leading?: Snippet
+}
+
+export interface ChatHistoryProps {
+	conversations?: ConversationSummary[]
+	activeId?: string | null
+	relativeTime?: boolean
+	onselect?: (id: string) => void
+	onnew?: () => void
+	ondelete?: (id: string) => void
+	item?: Snippet<[ConversationSummary]>
+	empty?: Snippet
+	header?: Snippet
+}
+
+export interface ChatTimelineProps {
+	messages?: ChatMessage[]
+	relativeTime?: boolean
+	autoscroll?: boolean
+	message?: Snippet<[ChatMessage]>
+	empty?: Snippet
+}
+
+export interface ChatShellProps {
+	messages?: ChatMessage[]
+	conversations?: ConversationSummary[]
+	activeConversationId?: string | null
+	value?: string
+	placeholder?: string
+	busy?: boolean
+	onsubmit?: (text: string) => void
+	onchange?: (value: string) => void
+	onselectConversation?: (id: string) => void
+	onnew?: () => void
+	message?: Snippet<[ChatMessage]>
+	suggestions?: Snippet
+	toolbar?: Snippet
+	leading?: Snippet
+	historyItem?: Snippet<[ConversationSummary]>
+	empty?: Snippet
+}

package/src/types/index.ts

@@ -64,6 +64,12 @@ export * from './tooltip.js'
 // ItemContent Types
 export * from './item-content.js'
 
+// ItemSwitch Types
+export * from './item-switch.js'
+
+// ItemToggle Types
+export * from './item-toggle.js'
+
 // StatusList Types
 export * from './status-list.js'
 
@@ -126,3 +132,6 @@ export * from './stepper.js'
 
 // Tilt Types
 export * from './tilt.js'
+
+// Chat Types
+export * from './chat.js'

package/src/types/item-switch.ts

@@ -0,0 +1,34 @@
+/**
+ * ItemSwitch Component Types
+ *
+ * Renders a switch-shaped visual inside a data-driven item snippet
+ * (List / Menu / Tree). The whole row is the interactive target — clicking it
+ * toggles the underlying data through the parent's onselect flow. ItemSwitch
+ * itself renders inert markup (spans + attributes), so it never introduces a
+ * nested interactive element inside the item's `<button>` wrapper.
+ */
+
+import type { ProxyItem } from '@rokkit/states'
+
+export interface ItemSwitchProps {
+	/** ProxyItem for the current row. */
+	proxy: ProxyItem
+
+	/**
+	 * Field on the item that holds the boolean checked state.
+	 * @default 'checked'
+	 */
+	field?: string
+
+	/** Size variant — feeds into `data-switch-size` for theming. */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Render the leading avatar / icon (via ItemContent). @default true */
+	showIcon?: boolean
+
+	/** Render subtext under the label (via ItemContent). @default true */
+	showSubtext?: boolean
+
+	/** Optional class on the wrapper span. */
+	class?: string
+}

package/src/types/item-toggle.ts

@@ -0,0 +1,52 @@
+/**
+ * ItemToggle Component Types
+ *
+ * Renders a compact toggle-group visual inside a data-driven item snippet.
+ * Options come from the item's data (via `optionsField`). Each option is a
+ * span with `role="radio"` and its own click handler — Navigator defers to
+ * these nested interactives via its isNestedInteractive guard.
+ *
+ * Consumers wire state via `onchange`. ItemToggle does not mutate the item
+ * data directly.
+ */
+
+import type { ProxyItem } from '@rokkit/states'
+
+export type ItemToggleOption = string | number | boolean | { label?: string; value?: unknown; icon?: string }
+
+export interface ItemToggleProps {
+	/** ProxyItem for the current row. */
+	proxy: ProxyItem
+
+	/**
+	 * Field on the item that holds the currently selected value.
+	 * @default 'value'
+	 */
+	field?: string
+
+	/**
+	 * Field on the item that holds the array of options.
+	 * @default 'options'
+	 */
+	optionsField?: string
+
+	/**
+	 * Called when the user picks an option. Consumers update the item data.
+	 */
+	onchange?: (value: unknown, option: ItemToggleOption, proxy: ProxyItem) => void
+
+	/** Size variant. */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Render the leading avatar / icon (via ItemContent). @default true */
+	showIcon?: boolean
+
+	/** Render subtext under the label (via ItemContent). @default true */
+	showSubtext?: boolean
+
+	/** Show textual labels beside the option (falls back to option value). @default true */
+	showLabels?: boolean
+
+	/** Optional class on the wrapper span. */
+	class?: string
+}

package/src/utils/relative-time.ts

@@ -0,0 +1,12 @@
+/** Format an ISO timestamp as a short relative label ("5m ago"), or a clock time when relative=false. */
+export function formatRelativeTime(timestamp: string, relative = true): string {
+	const ms = new Date(timestamp).getTime()
+	if (Number.isNaN(ms)) return ''
+	if (!relative) return new Date(ms).toLocaleTimeString()
+	const minutes = Math.round((Date.now() - ms) / 60000)
+	if (minutes < 1) return 'just now'
+	if (minutes < 60) return `${minutes}m ago`
+	const hours = Math.round(minutes / 60)
+	if (hours < 24) return `${hours}h ago`
+	return `${Math.round(hours / 24)}d ago`
+}