@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/chat/Composer.svelte

@@ -0,0 +1,172 @@
+<!--
+	Figma: Composer (component set 65:31, node 65:31)
+-->
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type ComposerMessages = {
+		send: string;
+		stop: string;
+		attach: string;
+		characterLimit: string;
+	};
+
+	export type ComposerProps = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		value?: string;
+		placeholder?: string;
+		busy?: boolean;
+		disabled?: boolean;
+		maxLength?: number;
+		allowEmpty?: boolean;
+		messages?: Partial<ComposerMessages>;
+		onSend?: (text: string) => void;
+		onStop?: () => void;
+		leading?: Snippet;
+		trailing?: Snippet;
+		attachments?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import IconPlayerStop from '@tabler/icons-svelte/icons/player-stop';
+	import IconSend from '@tabler/icons-svelte/icons/send';
+	import { cn } from '../../utils.js';
+	import { IconButton } from '../ui/icon-button/index.js';
+	import { canSendText, clampTextareaHeight, shouldSendOnKeyDown } from './composerLogic.js';
+
+	const defaultMessages: ComposerMessages = {
+		send: 'Send message',
+		stop: 'Stop generating',
+		attach: 'Add attachment',
+		characterLimit: 'Message is too long'
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		placeholder = 'Type your message…',
+		busy = $bindable(false),
+		disabled = false,
+		maxLength,
+		allowEmpty = false,
+		messages: messagesProp,
+		onSend,
+		onStop,
+		leading,
+		trailing,
+		attachments,
+		...restProps
+	}: ComposerProps = $props();
+
+	const messages = $derived({ ...defaultMessages, ...messagesProp });
+
+	let textareaRef = $state<HTMLTextAreaElement | null>(null);
+	let isComposing = $state(false);
+
+	const sendEnabled = $derived(
+		busy ? !disabled : canSendText(value, { disabled, allowEmpty, maxLength })
+	);
+
+	const overLimit = $derived(maxLength != null && value.trim().length > maxLength);
+
+	function autosize() {
+		const el = textareaRef;
+		if (!el) return;
+		el.style.height = 'auto';
+		el.style.height = `${clampTextareaHeight(el.scrollHeight)}px`;
+	}
+
+	function handleSend() {
+		if (busy) {
+			if (!disabled) onStop?.();
+			return;
+		}
+		if (!sendEnabled || overLimit) return;
+		const text = value.trim();
+		if (!allowEmpty && text.length === 0) return;
+		try {
+			onSend?.(text);
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.isComposing || isComposing) {
+			if (event.key === 'Enter') event.preventDefault();
+			return;
+		}
+		if (!shouldSendOnKeyDown(event.key, event.shiftKey, false)) return;
+		event.preventDefault();
+		handleSend();
+	}
+
+	$effect(() => {
+		value;
+		queueMicrotask(autosize);
+	});
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		'max-w-content rounded-card border-input bg-background flex w-full flex-col gap-2 border p-3',
+		disabled && 'pointer-events-none opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{#if attachments}
+		<div class="flex flex-wrap gap-1.5 overflow-hidden">{@render attachments()}</div>
+	{/if}
+
+	<div class="min-h-12 w-full px-1 pt-1">
+		<textarea
+			bind:this={textareaRef}
+			bind:value
+			class="text-body text-foreground placeholder:text-muted-foreground block w-full resize-none overflow-y-auto border-0 bg-transparent outline-hidden focus-visible:outline-hidden disabled:cursor-not-allowed"
+			style="min-height: 3rem; max-height: 7.5rem;"
+			{placeholder}
+			{disabled}
+			aria-invalid={overLimit ? true : undefined}
+			oninput={autosize}
+			onkeydown={handleKeyDown}
+			oncompositionstart={() => {
+				isComposing = true;
+			}}
+			oncompositionend={() => {
+				isComposing = false;
+			}}
+		></textarea>
+		{#if overLimit}
+			<p class="text-caption text-destructive mt-1" role="status">{messages.characterLimit}</p>
+		{/if}
+	</div>
+
+	<div class="flex items-center gap-2">
+		<div class="flex min-w-0 flex-1 items-center gap-1">
+			{#if leading}
+				{@render leading()}
+			{/if}
+		</div>
+		{#if trailing}
+			{@render trailing()}
+		{/if}
+		<IconButton
+			variant="primary"
+			label={busy ? messages.stop : messages.send}
+			disabled={!sendEnabled}
+			onclick={handleSend}
+		>
+			{#if busy}
+				<IconPlayerStop class="size-4 stroke-[1.333]" aria-hidden="true" />
+			{:else}
+				<IconSend class="size-4 stroke-[1.333]" aria-hidden="true" />
+			{/if}
+		</IconButton>
+	</div>
+</div>

package/dist/components/chat/Composer.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type ComposerMessages = {
+    send: string;
+    stop: string;
+    attach: string;
+    characterLimit: string;
+};
+export type ComposerProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    value?: string;
+    placeholder?: string;
+    busy?: boolean;
+    disabled?: boolean;
+    maxLength?: number;
+    allowEmpty?: boolean;
+    messages?: Partial<ComposerMessages>;
+    onSend?: (text: string) => void;
+    onStop?: () => void;
+    leading?: Snippet;
+    trailing?: Snippet;
+    attachments?: Snippet;
+};
+declare const Composer: import("svelte").Component<ComposerProps, {}, "ref" | "value" | "busy">;
+type Composer = ReturnType<typeof Composer>;
+export default Composer;

package/dist/components/chat/Message.svelte

@@ -0,0 +1,158 @@
+<!--
+	Figma: Message (component set 67:4, node 67:4)
+-->
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type MessageRole = 'user' | 'assistant';
+
+	export type MessageMessages = {
+		copy: string;
+		regenerate: string;
+		restoreCheckpoint: string;
+		streaming: string;
+		error: string;
+	};
+
+	export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		role?: MessageRole;
+		streaming?: boolean;
+		error?: boolean;
+		errorText?: string;
+		showActions?: boolean;
+		messages?: Partial<MessageMessages>;
+		onCopy?: () => void;
+		onRegenerate?: () => void;
+		onRestoreCheckpoint?: () => void;
+		actions?: Snippet;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import IconCopy from '@tabler/icons-svelte/icons/copy';
+	import IconRefresh from '@tabler/icons-svelte/icons/refresh';
+	import IconRestore from '@tabler/icons-svelte/icons/history';
+	import { cn } from '../../utils.js';
+	import { Button } from '../ui/button/index.js';
+	import { IconButton } from '../ui/icon-button/index.js';
+
+	const defaultMessages: MessageMessages = {
+		copy: 'Copy message',
+		regenerate: 'Regenerate response',
+		restoreCheckpoint: 'Restore checkpoint',
+		streaming: 'Assistant is typing',
+		error: 'Something went wrong'
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		role = 'user',
+		streaming = false,
+		error = false,
+		errorText,
+		showActions = false,
+		messages: messagesProp,
+		onCopy,
+		onRegenerate,
+		onRestoreCheckpoint,
+		actions,
+		children,
+		...restProps
+	}: MessageProps = $props();
+
+	const messages = $derived({ ...defaultMessages, ...messagesProp });
+	const isUser = $derived(role === 'user');
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		'group flex w-full max-w-[25.5rem] flex-col gap-1',
+		isUser ? 'ms-auto items-end' : 'items-start',
+		className
+	)}
+	{...restProps}
+>
+	{#if isUser}
+		<div
+			class={cn(
+				'rounded-card bg-muted text-body text-foreground max-w-full px-3 py-2 text-start',
+				error && 'border-destructive border'
+			)}
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+		<div
+			class={cn(
+				'duration-fast flex min-h-8 items-center gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none',
+				showActions && 'opacity-100'
+			)}
+		>
+			{#if onRestoreCheckpoint}
+				<Button variant="ghost" size="sm" onclick={onRestoreCheckpoint}>
+					<IconRestore class="size-4 stroke-[1.333]" aria-hidden="true" />
+					{messages.restoreCheckpoint}
+				</Button>
+			{/if}
+			{#if onCopy}
+				<IconButton variant="ghost" label={messages.copy} onclick={onCopy}>
+					<IconCopy class="size-4 stroke-[1.333]" aria-hidden="true" />
+				</IconButton>
+			{/if}
+			{#if actions}
+				{@render actions()}
+			{/if}
+		</div>
+	{:else}
+		<div
+			class={cn('text-body text-foreground w-full', error && 'text-destructive')}
+			aria-live={streaming ? 'polite' : undefined}
+			aria-busy={streaming ? true : undefined}
+		>
+			{#if error}
+				<p class="text-body-medium">{errorText ?? messages.error}</p>
+			{:else if children}
+				{@render children()}
+			{/if}
+			{#if streaming}
+				<span class="sr-only">{messages.streaming}</span>
+				<span class="text-muted-foreground mt-2 inline-flex items-center gap-1" aria-hidden="true">
+					<span class="bg-muted-foreground size-1.5 rounded-full motion-safe:animate-pulse"></span>
+					<span
+						class="bg-muted-foreground size-1.5 rounded-full motion-safe:animate-pulse motion-safe:[animation-delay:120ms]"
+					></span>
+					<span
+						class="bg-muted-foreground size-1.5 rounded-full motion-safe:animate-pulse motion-safe:[animation-delay:240ms]"
+					></span>
+				</span>
+			{/if}
+		</div>
+		<div
+			class={cn(
+				'duration-fast flex min-h-8 items-center gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none',
+				showActions && 'opacity-100'
+			)}
+		>
+			{#if onCopy}
+				<IconButton variant="ghost" label={messages.copy} onclick={onCopy}>
+					<IconCopy class="size-4 stroke-[1.333]" aria-hidden="true" />
+				</IconButton>
+			{/if}
+			{#if onRegenerate}
+				<IconButton variant="ghost" label={messages.regenerate} onclick={onRegenerate}>
+					<IconRefresh class="size-4 stroke-[1.333]" aria-hidden="true" />
+				</IconButton>
+			{/if}
+			{#if actions}
+				{@render actions()}
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/chat/Message.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type MessageRole = 'user' | 'assistant';
+export type MessageMessages = {
+    copy: string;
+    regenerate: string;
+    restoreCheckpoint: string;
+    streaming: string;
+    error: string;
+};
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    role?: MessageRole;
+    streaming?: boolean;
+    error?: boolean;
+    errorText?: string;
+    showActions?: boolean;
+    messages?: Partial<MessageMessages>;
+    onCopy?: () => void;
+    onRegenerate?: () => void;
+    onRestoreCheckpoint?: () => void;
+    actions?: Snippet;
+    children?: Snippet;
+};
+declare const Message: import("svelte").Component<MessageProps, {}, "ref">;
+type Message = ReturnType<typeof Message>;
+export default Message;

package/dist/components/chat/OptionRow.svelte

@@ -0,0 +1,59 @@
+<!--
+	Figma: Option Row (component set 68:4, node 68:4)
+-->
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type OptionRowSelectionMode = 'radio' | 'checkbox';
+
+	export type OptionRowProps = HTMLAttributes<HTMLButtonElement> & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		label: string;
+		selected?: boolean;
+		disabled?: boolean;
+		selectionMode?: OptionRowSelectionMode;
+		onSelect?: () => void;
+	};
+</script>
+
+<script lang="ts">
+	import IconCheck from '@tabler/icons-svelte/icons/check';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		label,
+		selected = false,
+		disabled = false,
+		selectionMode = 'radio',
+		onSelect,
+		...restProps
+	}: OptionRowProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role={selectionMode === 'radio' ? 'radio' : 'checkbox'}
+	aria-checked={selected}
+	{disabled}
+	class={cn(
+		'border-border duration-fast hover:bg-accent focus-visible:ring-ring focus-visible:ring-offset-background flex h-9 w-full items-center gap-2 rounded-lg border px-3 py-2 text-start transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+		selected && 'border-primary bg-accent',
+		className
+	)}
+	onclick={() => onSelect?.()}
+	{...restProps}
+>
+	<!-- Figma: the label comes first and fills the row; the check sits after it and exists only when selected -->
+	<span class={cn('text-body min-w-0 flex-1 truncate', selected && 'text-body-medium')}>
+		{label}
+	</span>
+	{#if selected}
+		<span class="text-foreground flex size-4 shrink-0 items-center justify-center" aria-hidden="true">
+			<IconCheck class="size-4 stroke-[1.333]" />
+		</span>
+	{/if}
+</button>

package/dist/components/chat/OptionRow.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type OptionRowSelectionMode = 'radio' | 'checkbox';
+export type OptionRowProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    selectionMode?: OptionRowSelectionMode;
+    onSelect?: () => void;
+};
+declare const OptionRow: import("svelte").Component<OptionRowProps, {}, "ref">;
+type OptionRow = ReturnType<typeof OptionRow>;
+export default OptionRow;

package/dist/components/chat/PlanCard.svelte

@@ -0,0 +1,220 @@
+<!--
+	Figma: Plan Card (component set 68:107, page Plan Card)
+-->
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import IconChevronDown from '@tabler/icons-svelte/icons/chevron-down';
+	import IconCircle from '@tabler/icons-svelte/icons/circle';
+	import IconCircleCheck from '@tabler/icons-svelte/icons/circle-check';
+	import IconListCheck from '@tabler/icons-svelte/icons/list-check';
+	import IconLoader2 from '@tabler/icons-svelte/icons/loader-2';
+	import { Badge } from '../ui/badge';
+	import { Button } from '../ui/button';
+	import * as Collapsible from '../ui/collapsible';
+	import { cn } from '../../utils.js';
+
+	export type PlanTask = {
+		id: string;
+		label: string;
+		status: 'pending' | 'active' | 'done';
+	};
+
+	export type PlanCardMessages = {
+		progress: string;
+		showMoreTasks: string;
+		showFewerTasks: string;
+		primaryAction: string;
+		secondaryAction: string;
+	};
+
+	const defaultMessages: PlanCardMessages = {
+		progress: '{current} of {total}',
+		showMoreTasks: 'Show {count} more tasks',
+		showFewerTasks: 'Show fewer tasks',
+		primaryAction: 'Build',
+		secondaryAction: 'Edit plan'
+	};
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		title: string;
+		tasks: PlanTask[];
+		/** Shown in the header badge; defaults from active task index and task count. */
+		progressCurrent?: number;
+		progressTotal?: number;
+		/** Tasks shown before the collapsible section. */
+		visibleTaskCount?: number;
+		messages?: Partial<PlanCardMessages>;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+		headerIcon?: Snippet;
+		primaryAction?: Snippet;
+		secondaryAction?: Snippet;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		title,
+		tasks,
+		progressCurrent,
+		progressTotal,
+		visibleTaskCount = 3,
+		messages: messagesProp,
+		onPrimary,
+		onSecondary,
+		headerIcon,
+		primaryAction,
+		secondaryAction,
+		...restProps
+	}: Props = $props();
+
+	const messages = $derived({ ...defaultMessages, ...messagesProp });
+
+	let expanded = $state(false);
+
+	const activeIndex = $derived(tasks.findIndex((t) => t.status === 'active'));
+	const resolvedProgressCurrent = $derived(
+		progressCurrent ?? (activeIndex >= 0 ? activeIndex + 1 : tasks.length > 0 ? 1 : 0)
+	);
+	const resolvedProgressTotal = $derived(progressTotal ?? tasks.length);
+	const progressLabel = $derived(
+		messages.progress
+			.replace('{current}', String(resolvedProgressCurrent))
+			.replace('{total}', String(resolvedProgressTotal))
+			.replace('{completed}', String(resolvedProgressCurrent))
+	);
+
+	const showFooter = $derived(
+		Boolean(onPrimary || onSecondary || primaryAction || secondaryAction)
+	);
+
+	const visibleTasks = $derived(tasks.slice(0, visibleTaskCount));
+	const hiddenTasks = $derived(tasks.slice(visibleTaskCount));
+	const hiddenCount = $derived(hiddenTasks.length);
+
+	const showMoreLabel = $derived(
+		expanded
+			? messages.showFewerTasks
+			: messages.showMoreTasks.replace('{count}', String(hiddenCount))
+	);
+
+	function taskIcon(status: PlanTask['status']) {
+		if (status === 'done') return IconCircleCheck;
+		if (status === 'active') return IconLoader2;
+		return IconCircle;
+	}
+
+	function handlePrimary() {
+		if (!onPrimary) return;
+		try {
+			onPrimary();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	function handleSecondary() {
+		if (!onSecondary) return;
+		try {
+			onSecondary();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+</script>
+
+{#snippet taskRow(task: PlanTask)}
+	{@const Icon = taskIcon(task.status)}
+	<div class="flex min-h-7 items-center gap-2 px-0 py-1">
+		<Icon
+			class={cn(
+				'size-4 shrink-0 stroke-[1.333]',
+				task.status === 'active' && 'animate-spin motion-reduce:animate-none',
+				task.status === 'done' ? 'text-muted-foreground' : 'text-foreground'
+			)}
+			aria-hidden="true"
+		/>
+		<span
+			class={cn(
+				'text-body min-w-0 flex-1 truncate',
+				task.status === 'pending' && 'text-muted-foreground',
+				task.status === 'active' && 'text-body-medium text-foreground',
+				task.status === 'done' && 'text-muted-foreground line-through'
+			)}
+		>
+			{task.label}
+		</span>
+	</div>
+{/snippet}
+
+<div
+	bind:this={ref}
+	class={cn(
+		'rounded-card border-border bg-background flex w-full max-w-full flex-col gap-3 border p-4',
+		className
+	)}
+	{...restProps}
+>
+	<header class="flex min-w-0 items-center gap-2">
+		<span class="text-foreground flex size-4 shrink-0 items-center justify-center">
+			{#if headerIcon}
+				{@render headerIcon()}
+			{:else}
+				<IconListCheck class="size-4 stroke-[1.333]" aria-hidden="true" />
+			{/if}
+		</span>
+		<h3 class="text-body-medium text-foreground min-w-0 flex-1 truncate">{title}</h3>
+		<Badge variant="default" class="shrink-0">{progressLabel}</Badge>
+	</header>
+
+	<div class="flex flex-col">
+		{#each visibleTasks as task (task.id)}
+			{@render taskRow(task)}
+		{/each}
+
+		{#if hiddenCount > 0}
+			<Collapsible.Root bind:open={expanded}>
+				<Collapsible.Trigger
+					class="text-label text-foreground duration-fast hover:bg-accent focus-visible:ring-ring focus-visible:ring-offset-background mt-1 inline-flex h-8 items-center gap-1 rounded-lg px-2 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+				>
+					{showMoreLabel}
+					<IconChevronDown
+						class={cn(
+							'duration-base size-4 stroke-[1.333] transition-transform motion-reduce:transition-none',
+							expanded && 'rotate-180'
+						)}
+						aria-hidden="true"
+					/>
+				</Collapsible.Trigger>
+				<Collapsible.Content class="flex flex-col overflow-hidden motion-reduce:transition-none">
+					{#each hiddenTasks as task (task.id)}
+						{@render taskRow(task)}
+					{/each}
+				</Collapsible.Content>
+			</Collapsible.Root>
+		{/if}
+	</div>
+
+	{#if showFooter}
+		<footer class="flex flex-wrap items-center gap-2 pt-1">
+			{#if secondaryAction}
+				{@render secondaryAction()}
+			{:else if onSecondary}
+				<Button variant="outline" size="sm" class="shrink-0" onclick={handleSecondary}>
+					{messages.secondaryAction}
+				</Button>
+			{/if}
+			<span class="min-w-0 flex-1" aria-hidden="true"></span>
+			{#if primaryAction}
+				{@render primaryAction()}
+			{:else if onPrimary}
+				<Button variant="default" size="sm" class="shrink-0" onclick={handlePrimary}>
+					{messages.primaryAction}
+				</Button>
+			{/if}
+		</footer>
+	{/if}
+</div>