@widgetic/design-system 0.5.22 → 0.5.24

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

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type PlanTask = {
+    id: string;
+    label: string;
+    status: 'pending' | 'active' | 'done';
+};
+export type PlanCardMessages = {
+    progress: string;
+    showMoreTasks: string;
+    showFewerTasks: string;
+    primaryAction: string;
+    secondaryAction: string;
+};
+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;
+};
+declare const PlanCard: import("svelte").Component<Props, {}, "ref">;
+type PlanCard = ReturnType<typeof PlanCard>;
+export default PlanCard;

package/dist/components/chat/QuestionCard.svelte

@@ -0,0 +1,265 @@
+<!--
+	Figma: Question Card (component set 68:26, page Question Card)
+-->
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button } from '../ui/button';
+	import { cn } from '../../utils.js';
+	import OptionRow from './OptionRow.svelte';
+	import {
+		canSubmitQuestion,
+		formatQuestionStep,
+		isFirstQuestion,
+		isLastQuestion,
+		moveFocusedIndex,
+		optionItemRole,
+		primaryQuestionLabel,
+		selectionRole,
+		toggleOption
+	} from './questionCardLogic.js';
+
+	export type QuestionOption = {
+		id: string;
+		label: string;
+		description?: string;
+	};
+
+	export type QuestionItem = {
+		question: string;
+		options: QuestionOption[];
+		multiple?: boolean;
+	};
+
+	export type QuestionCardMessages = {
+		step: string;
+		back: string;
+		next: string;
+		submit: string;
+		skip: string;
+	};
+
+	const defaultMessages: QuestionCardMessages = {
+		step: 'Question {current} of {total}',
+		back: 'Back',
+		next: 'Next',
+		submit: 'Submit',
+		skip: 'Skip'
+	};
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		/** Overrides the formatted step line when set. */
+		step?: string;
+		question: string;
+		options: QuestionOption[];
+		/** Multi-question flow; when set, `question` / `options` on the root are ignored. */
+		questions?: QuestionItem[];
+		multiple?: boolean;
+		showSkip?: boolean;
+		messages?: Partial<QuestionCardMessages>;
+		onSubmit?: (selectedIds: string[]) => void;
+		onNext?: (selectedIds: string[], questionIndex: number) => void;
+		onBack?: (questionIndex: number) => void;
+		onSkip?: () => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		step,
+		question,
+		options,
+		questions,
+		multiple = false,
+		showSkip = false,
+		messages: messagesProp,
+		onSubmit,
+		onNext,
+		onBack,
+		onSkip,
+		...restProps
+	}: Props = $props();
+
+	const messages = $derived({ ...defaultMessages, ...messagesProp });
+
+	let currentIndex = $state(0);
+	let selectedIds = $state<string[]>([]);
+	let focusedIndex = $state(0);
+	let selectionsByIndex = $state<Record<number, string[]>>({});
+
+	const flowItems = $derived(questions && questions.length > 0 ? questions : null);
+	const questionTotal = $derived(flowItems ? flowItems.length : 1);
+	const activeItem = $derived(
+		flowItems ? flowItems[Math.min(currentIndex, flowItems.length - 1)] : null
+	);
+	const activeQuestion = $derived(activeItem?.question ?? question);
+	const activeOptions = $derived(activeItem?.options ?? options);
+	const activeMultiple = $derived(activeItem?.multiple ?? multiple);
+
+	const stepLabel = $derived(
+		step ?? formatQuestionStep(messages.step, currentIndex + 1, questionTotal)
+	);
+	const onFirst = $derived(isFirstQuestion(currentIndex));
+	const onLast = $derived(isLastQuestion(currentIndex, questionTotal));
+	const primaryLabel = $derived(
+		primaryQuestionLabel(onLast && questionTotal > 1, messages.next, messages.submit)
+	);
+
+	const groupRole = $derived(selectionRole(activeMultiple));
+	const itemRole = $derived(optionItemRole(activeMultiple));
+	const submitEnabled = $derived(canSubmitQuestion(selectedIds));
+
+	function isSelected(id: string): boolean {
+		return selectedIds.includes(id);
+	}
+
+	function persistSelection() {
+		selectionsByIndex = { ...selectionsByIndex, [currentIndex]: [...selectedIds] };
+	}
+
+	function loadSelectionForIndex(index: number) {
+		selectedIds = [...(selectionsByIndex[index] ?? [])];
+		focusedIndex = 0;
+	}
+
+	function selectOption(id: string) {
+		selectedIds = toggleOption(selectedIds, id, activeMultiple);
+	}
+
+	function handleOptionKeydown(event: KeyboardEvent, index: number, id: string) {
+		if (event.key === ' ' || event.key === 'Spacebar') {
+			event.preventDefault();
+			selectOption(id);
+			return;
+		}
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			focusedIndex = moveFocusedIndex(index, 'down', activeOptions.length);
+			focusOptionAt(focusedIndex);
+			return;
+		}
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			focusedIndex = moveFocusedIndex(index, 'up', activeOptions.length);
+			focusOptionAt(focusedIndex);
+			return;
+		}
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			handlePrimary();
+		}
+	}
+
+	function focusOptionAt(index: number) {
+		const el = ref?.querySelector<HTMLButtonElement>(`[data-option-index="${index}"]`);
+		el?.focus();
+	}
+
+	function handlePrimary() {
+		if (!submitEnabled) return;
+		if (onLast) {
+			if (!onSubmit) return;
+			try {
+				onSubmit([...selectedIds]);
+			} catch (error) {
+				console.error(error);
+			}
+			return;
+		}
+		persistSelection();
+		try {
+			onNext?.([...selectedIds], currentIndex);
+		} catch (error) {
+			console.error(error);
+		}
+		currentIndex += 1;
+		loadSelectionForIndex(currentIndex);
+	}
+
+	function handleBack() {
+		if (onFirst) return;
+		persistSelection();
+		try {
+			onBack?.(currentIndex);
+		} catch (error) {
+			console.error(error);
+		}
+		currentIndex -= 1;
+		loadSelectionForIndex(currentIndex);
+	}
+
+	function handleSkip() {
+		if (!onSkip) return;
+		try {
+			onSkip();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	function handleGroupKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Enter' || event.target !== ref) return;
+		event.preventDefault();
+		handlePrimary();
+	}
+</script>
+
+<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 flex-col gap-0.5">
+		<p class="text-caption-medium text-muted-foreground">{stepLabel}</p>
+		<p class="text-body-medium text-foreground">{activeQuestion}</p>
+	</header>
+
+	<div
+		class="flex flex-col gap-1"
+		role={groupRole}
+		aria-label={activeQuestion}
+		onkeydown={handleGroupKeydown}
+	>
+		{#each activeOptions as option, index (option.id)}
+			{@const selected = isSelected(option.id)}
+			<div class="flex flex-col gap-0.5">
+				<OptionRow
+					label={option.label}
+					{selected}
+					selectionMode={itemRole === 'checkbox' ? 'checkbox' : 'radio'}
+					data-option-index={index}
+					tabindex={index === focusedIndex ? 0 : -1}
+					onSelect={() => {
+						focusedIndex = index;
+						selectOption(option.id);
+					}}
+					onkeydown={(event) => handleOptionKeydown(event, index, option.id)}
+				/>
+				{#if option.description}
+					<p class="text-caption text-muted-foreground ps-3">{option.description}</p>
+				{/if}
+			</div>
+		{/each}
+	</div>
+
+	<footer class="flex min-w-0 items-center gap-2">
+		{#if showSkip && onSkip}
+			<Button variant="ghost" size="sm" class="shrink-0" onclick={handleSkip}>
+				{messages.skip}
+			</Button>
+		{/if}
+		{#if !onFirst}
+			<Button variant="ghost" size="sm" class="shrink-0" onclick={handleBack}>
+				{messages.back}
+			</Button>
+		{/if}
+		<span class="min-w-0 flex-1" aria-hidden="true"></span>
+		<Button variant="default" size="sm" disabled={!submitEnabled} onclick={handlePrimary}>
+			{primaryLabel}
+		</Button>
+	</footer>
+</div>

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

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type QuestionOption = {
+    id: string;
+    label: string;
+    description?: string;
+};
+export type QuestionItem = {
+    question: string;
+    options: QuestionOption[];
+    multiple?: boolean;
+};
+export type QuestionCardMessages = {
+    step: string;
+    back: string;
+    next: string;
+    submit: string;
+    skip: string;
+};
+type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    /** Overrides the formatted step line when set. */
+    step?: string;
+    question: string;
+    options: QuestionOption[];
+    /** Multi-question flow; when set, `question` / `options` on the root are ignored. */
+    questions?: QuestionItem[];
+    multiple?: boolean;
+    showSkip?: boolean;
+    messages?: Partial<QuestionCardMessages>;
+    onSubmit?: (selectedIds: string[]) => void;
+    onNext?: (selectedIds: string[], questionIndex: number) => void;
+    onBack?: (questionIndex: number) => void;
+    onSkip?: () => void;
+};
+declare const QuestionCard: import("svelte").Component<Props, {}, "ref">;
+type QuestionCard = ReturnType<typeof QuestionCard>;
+export default QuestionCard;

package/dist/components/chat/ScrollToBottom.svelte

@@ -0,0 +1,51 @@
+<!--
+	Figma: Scroll to Bottom (component set 69:79, node 69:79)
+-->
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type ScrollToBottomProps = HTMLAttributes<HTMLButtonElement> & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		visible?: boolean;
+		label?: string;
+		onScroll?: () => void;
+	};
+</script>
+
+<script lang="ts">
+	import IconArrowDown from '@tabler/icons-svelte/icons/arrow-down';
+	import { cn } from '../../utils.js';
+	import { IconButton } from '../ui/icon-button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		visible = false,
+		label = 'Scroll to latest messages',
+		onScroll,
+		...restProps
+	}: ScrollToBottomProps = $props();
+</script>
+
+<div
+	class={cn(
+		'duration-base pointer-events-none transition-opacity',
+		visible ? 'opacity-100' : 'opacity-0',
+		className
+	)}
+>
+	<IconButton
+		bind:ref
+		variant="outline"
+		{label}
+		class={cn(
+			'border-border bg-background hover:bg-accent pointer-events-auto rounded-full',
+			!visible && 'pointer-events-none'
+		)}
+		onclick={() => onScroll?.()}
+		{...restProps}
+	>
+		<IconArrowDown class="size-4 stroke-[1.333]" aria-hidden="true" />
+	</IconButton>
+</div>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type ScrollToBottomProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    visible?: boolean;
+    label?: string;
+    onScroll?: () => void;
+};
+declare const ScrollToBottom: import("svelte").Component<ScrollToBottomProps, {}, "ref">;
+type ScrollToBottom = ReturnType<typeof ScrollToBottom>;
+export default ScrollToBottom;

package/dist/components/chat/SuggestionCard.svelte

@@ -0,0 +1,79 @@
+<!--
+	Figma: Suggestion Card (component set 48:3, page Suggestion Card)
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import IconChevronRight from '@tabler/icons-svelte/icons/chevron-right';
+	import { cn } from '../../utils.js';
+
+	export type SuggestionCardMessages = {
+		/** Shown when the card is disabled and no custom reason is passed. */
+		unavailable: string;
+	};
+
+	const defaultMessages: SuggestionCardMessages = {
+		unavailable: 'Unavailable'
+	};
+
+	type Props = HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		title: string;
+		description?: string;
+		showDescription?: boolean;
+		disabled?: boolean;
+		messages?: Partial<SuggestionCardMessages>;
+		icon?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		title,
+		description = '',
+		showDescription = false,
+		disabled = false,
+		messages: messagesProp,
+		icon,
+		onclick,
+		type = 'button',
+		...restProps
+	}: Props = $props();
+
+	const messages = $derived({ ...defaultMessages, ...messagesProp });
+</script>
+
+<button
+	bind:this={ref}
+	{type}
+	disabled={disabled || undefined}
+	title={disabled ? messages.unavailable : undefined}
+	class={cn(
+		'group rounded-card border-border bg-card duration-fast flex w-full max-w-full items-center gap-3 border px-4 py-3 text-start transition-colors',
+		'hover:bg-accent focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
+		'disabled:pointer-events-none disabled:opacity-50',
+		className
+	)}
+	{onclick}
+	{...restProps}
+>
+	{#if icon}
+		<span
+			class="text-foreground flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:stroke-[1.333]"
+		>
+			{@render icon()}
+		</span>
+	{/if}
+	<span class="min-w-0 flex-1">
+		<span class="text-body-medium text-foreground block truncate">{title}</span>
+		{#if showDescription && description}
+			<span class="text-caption text-muted-foreground mt-0.5 block truncate">{description}</span>
+		{/if}
+	</span>
+	<IconChevronRight
+		class="text-foreground duration-fast size-4 shrink-0 stroke-[1.333] opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 rtl:-scale-x-100"
+		aria-hidden="true"
+	/>
+</button>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type SuggestionCardMessages = {
+    /** Shown when the card is disabled and no custom reason is passed. */
+    unavailable: string;
+};
+type Props = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    title: string;
+    description?: string;
+    showDescription?: boolean;
+    disabled?: boolean;
+    messages?: Partial<SuggestionCardMessages>;
+    icon?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const SuggestionCard: import("svelte").Component<Props, {}, "ref">;
+type SuggestionCard = ReturnType<typeof SuggestionCard>;
+export default SuggestionCard;

package/dist/components/chat/TaskRow.svelte

@@ -0,0 +1,59 @@
+<!--
+	Figma: Task Row (component set 68:93, node 68:93)
+-->
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type TaskRowStatus = 'pending' | 'active' | 'done';
+
+	export type TaskRowProps = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		label: string;
+		status?: TaskRowStatus;
+	};
+</script>
+
+<script lang="ts">
+	import IconCircle from '@tabler/icons-svelte/icons/circle';
+	import IconCircleCheck from '@tabler/icons-svelte/icons/circle-check';
+	import IconLoader2 from '@tabler/icons-svelte/icons/loader-2';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		label,
+		status = 'pending',
+		...restProps
+	}: TaskRowProps = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('flex w-full max-w-[23.5rem] items-center gap-2 px-1 py-1', className)}
+	{...restProps}
+>
+	<span class="flex size-4 shrink-0 items-center justify-center">
+		{#if status === 'active'}
+			<IconLoader2
+				class="text-foreground size-4 animate-spin stroke-[1.333] motion-reduce:animate-none"
+				aria-hidden="true"
+			/>
+		{:else if status === 'done'}
+			<IconCircleCheck class="text-brand size-4 stroke-[1.333]" aria-hidden="true" />
+		{:else}
+			<IconCircle class="text-muted-foreground size-4 stroke-[1.333]" aria-hidden="true" />
+		{/if}
+	</span>
+	<span
+		class={cn(
+			'text-body min-w-0 flex-1 truncate',
+			status === 'active' || status === 'done'
+				? 'text-body-medium text-foreground'
+				: 'text-muted-foreground'
+		)}
+	>
+		{label}
+	</span>
+</div>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type TaskRowStatus = 'pending' | 'active' | 'done';
+export type TaskRowProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    label: string;
+    status?: TaskRowStatus;
+};
+declare const TaskRow: import("svelte").Component<TaskRowProps, {}, "ref">;
+type TaskRow = ReturnType<typeof TaskRow>;
+export default TaskRow;

package/dist/components/chat/composerLogic.d.ts

@@ -0,0 +1,16 @@
+/** Max auto-grow height for the composer textarea (matches product chat input). */
+export declare const COMPOSER_TEXTAREA_MAX_HEIGHT_PX = 120;
+/** Initial textarea row area height from the Figma Composer default tree. */
+export declare const COMPOSER_TEXTAREA_MIN_HEIGHT_PX = 48;
+/** Whether Enter should submit (Shift+Enter inserts a newline; IME composition must not send). */
+export declare function shouldSendOnKeyDown(key: string, shiftKey: boolean, isComposing: boolean): boolean;
+/** Clamp measured scroll height between min and max for autosize. */
+export declare function clampTextareaHeight(scrollHeight: number, minHeight?: number, maxHeight?: number): number;
+export type CanSendTextOptions = {
+    disabled?: boolean;
+    /** When true, empty trimmed text still cannot send (attachments handled by the component). */
+    allowEmpty?: boolean;
+    maxLength?: number;
+};
+/** Whether the primary send action is allowed (not stop — use `busy` on the component for that). */
+export declare function canSendText(text: string, options?: CanSendTextOptions): boolean;

package/dist/components/chat/composerLogic.js

@@ -0,0 +1,29 @@
+/** Max auto-grow height for the composer textarea (matches product chat input). */
+export const COMPOSER_TEXTAREA_MAX_HEIGHT_PX = 120;
+/** Initial textarea row area height from the Figma Composer default tree. */
+export const COMPOSER_TEXTAREA_MIN_HEIGHT_PX = 48;
+/** Whether Enter should submit (Shift+Enter inserts a newline; IME composition must not send). */
+export function shouldSendOnKeyDown(key, shiftKey, isComposing) {
+    if (isComposing)
+        return false;
+    if (key !== 'Enter')
+        return false;
+    if (shiftKey)
+        return false;
+    return true;
+}
+/** Clamp measured scroll height between min and max for autosize. */
+export function clampTextareaHeight(scrollHeight, minHeight = COMPOSER_TEXTAREA_MIN_HEIGHT_PX, maxHeight = COMPOSER_TEXTAREA_MAX_HEIGHT_PX) {
+    return Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+}
+/** Whether the primary send action is allowed (not stop — use `busy` on the component for that). */
+export function canSendText(text, options = {}) {
+    if (options.disabled)
+        return false;
+    const trimmed = text.trim();
+    if (!options.allowEmpty && trimmed.length === 0)
+        return false;
+    if (options.maxLength != null && trimmed.length > options.maxLength)
+        return false;
+    return true;
+}

package/dist/components/chat/index.d.ts

@@ -0,0 +1,16 @@
+export { default as Composer, type ComposerMessages, type ComposerProps } from './Composer.svelte';
+export { default as Message, type MessageMessages, type MessageProps, type MessageRole } from './Message.svelte';
+export { default as ActivityRow, type ActivityRowProps, type ActivityRowStatus } from './ActivityRow.svelte';
+export { default as OptionRow, type OptionRowProps, type OptionRowSelectionMode } from './OptionRow.svelte';
+export { default as TaskRow, type TaskRowProps, type TaskRowStatus } from './TaskRow.svelte';
+export { default as ScrollToBottom, type ScrollToBottomProps } from './ScrollToBottom.svelte';
+export { canSendText, clampTextareaHeight, COMPOSER_TEXTAREA_MAX_HEIGHT_PX, COMPOSER_TEXTAREA_MIN_HEIGHT_PX, shouldSendOnKeyDown } from './composerLogic.js';
+export { default as ChatHeader } from './ChatHeader.svelte';
+export type { ChatHeaderLayout, ChatHeaderMessages } from './ChatHeader.svelte';
+export { default as PlanCard } from './PlanCard.svelte';
+export type { PlanCardMessages, PlanTask } from './PlanCard.svelte';
+export { default as QuestionCard } from './QuestionCard.svelte';
+export type { QuestionCardMessages, QuestionItem, QuestionOption } from './QuestionCard.svelte';
+export { canSubmitQuestion, formatQuestionStep, isFirstQuestion, isLastQuestion, moveFocusedIndex, optionItemRole, primaryQuestionLabel, selectionRole, toggleOption } from './questionCardLogic.js';
+export { default as SuggestionCard } from './SuggestionCard.svelte';
+export type { SuggestionCardMessages } from './SuggestionCard.svelte';

package/dist/components/chat/index.js

@@ -0,0 +1,16 @@
+// Chat components (composer, messages, plan and question cards) built from the Figma design system.
+// Each component is exported here by the agent that owns src/lib/components/chat.
+// [C1 exports]
+export { default as Composer } from './Composer.svelte';
+export { default as Message } from './Message.svelte';
+export { default as ActivityRow } from './ActivityRow.svelte';
+export { default as OptionRow } from './OptionRow.svelte';
+export { default as TaskRow } from './TaskRow.svelte';
+export { default as ScrollToBottom } from './ScrollToBottom.svelte';
+export { canSendText, clampTextareaHeight, COMPOSER_TEXTAREA_MAX_HEIGHT_PX, COMPOSER_TEXTAREA_MIN_HEIGHT_PX, shouldSendOnKeyDown } from './composerLogic.js';
+// [C2 exports]
+export { default as ChatHeader } from './ChatHeader.svelte';
+export { default as PlanCard } from './PlanCard.svelte';
+export { default as QuestionCard } from './QuestionCard.svelte';
+export { canSubmitQuestion, formatQuestionStep, isFirstQuestion, isLastQuestion, moveFocusedIndex, optionItemRole, primaryQuestionLabel, selectionRole, toggleOption } from './questionCardLogic.js';
+export { default as SuggestionCard } from './SuggestionCard.svelte';

package/dist/components/chat/questionCardLogic.d.ts

@@ -0,0 +1,11 @@
+/** Pure selection and keyboard helpers for QuestionCard. */
+export declare function toggleOption(selected: readonly string[], optionId: string, multiple: boolean): string[];
+export declare function moveFocusedIndex(current: number, direction: 'up' | 'down', count: number): number;
+export declare function canSubmitQuestion(selected: readonly string[]): boolean;
+export declare function selectionRole(multiple: boolean): 'radiogroup' | 'group';
+export declare function optionItemRole(multiple: boolean): 'radio' | 'checkbox';
+/** Format the step line (1-based `current`). */
+export declare function formatQuestionStep(template: string, current: number, total: number): string;
+export declare function isFirstQuestion(index: number): boolean;
+export declare function isLastQuestion(index: number, total: number): boolean;
+export declare function primaryQuestionLabel(isLast: boolean, nextLabel: string, submitLabel: string): string;