@signal9/era-ui 2.2.0 → 2.3.0

package/dist/ai/actions/action.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ComponentProps } from 'svelte';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		tooltip,
+		label,
+		children,
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		/** Hover hint; also the accessible name when `label` is omitted. */
+		tooltip?: string;
+		label?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+{#snippet button()}
+	<Button icon size="icon" aria-label={label ?? tooltip} class={cn(className)} {...restProps}>
+		{@render children?.()}
+	</Button>
+{/snippet}
+
+{#if tooltip}
+	<Tooltip.Provider delayDuration={150}>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				{#snippet child({ props })}
+					<span {...props}>{@render button()}</span>
+				{/snippet}
+			</Tooltip.Trigger>
+			<Tooltip.Content>{tooltip}</Tooltip.Content>
+		</Tooltip.Root>
+	</Tooltip.Provider>
+{:else}
+	{@render button()}
+{/if}

package/dist/ai/actions/action.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { ComponentProps } from 'svelte';
+import { Button } from '../../ui/button/index.js';
+type $$ComponentProps = ComponentProps<typeof Button> & {
+    /** Hover hint; also the accessible name when `label` is omitted. */
+    tooltip?: string;
+    label?: string;
+    children?: Snippet;
+};
+declare const Action: import("svelte").Component<$$ComponentProps, {}, "">;
+type Action = ReturnType<typeof Action>;
+export default Action;

package/dist/ai/actions/actions.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div class={cn('flex items-center gap-(--era-gap)', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/ai/actions/actions.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const Actions: import("svelte").Component<$$ComponentProps, {}, "">;
+type Actions = ReturnType<typeof Actions>;
+export default Actions;

package/dist/ai/actions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './actions.svelte';
+export { default as Action } from './action.svelte';

package/dist/ai/actions/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './actions.svelte';
+export { default as Action } from './action.svelte';

package/dist/ai/artifact/artifact-actions.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<div class={cn('flex shrink-0 items-center gap-(--era-gap)', className)}>{@render children?.()}</div>

package/dist/ai/artifact/artifact-actions.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const ArtifactActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArtifactActions = ReturnType<typeof ArtifactActions>;
+export default ArtifactActions;

package/dist/ai/artifact/artifact-close.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import X from '@lucide/svelte/icons/x';
+	import { Button } from '../../ui/button/index.js';
+	let { onclick }: { onclick?: (e: MouseEvent) => void } = $props();
+</script>
+
+<Button icon size="icon" aria-label="Close" {onclick}>
+	<X class="size-(--era-h-xs)" />
+</Button>

package/dist/ai/artifact/artifact-close.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onclick?: (e: MouseEvent) => void;
+};
+declare const ArtifactClose: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArtifactClose = ReturnType<typeof ArtifactClose>;
+export default ArtifactClose;

package/dist/ai/artifact/artifact-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<div class={cn('min-h-0 flex-1 overflow-auto p-(--era-pad-md)', className)}>{@render children?.()}</div>

package/dist/ai/artifact/artifact-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const ArtifactContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArtifactContent = ReturnType<typeof ArtifactContent>;
+export default ArtifactContent;

package/dist/ai/artifact/artifact-description.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<p class={cn('truncate text-body text-muted', className)}>{@render children?.()}</p>

package/dist/ai/artifact/artifact-description.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const ArtifactDescription: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArtifactDescription = ReturnType<typeof ArtifactDescription>;
+export default ArtifactDescription;

package/dist/ai/artifact/artifact-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div
+	class={cn(
+		'flex h-(--era-h-lg) shrink-0 items-center justify-between gap-(--era-gap) border-b border-divider-faded px-(--era-pad-sm)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ai/artifact/artifact-header.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const ArtifactHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArtifactHeader = ReturnType<typeof ArtifactHeader>;
+export default ArtifactHeader;

package/dist/ai/artifact/artifact-title.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<p class={cn('truncate text-body font-medium text-bright', className)}>{@render children?.()}</p>

package/dist/ai/artifact/artifact-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const ArtifactTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArtifactTitle = ReturnType<typeof ArtifactTitle>;
+export default ArtifactTitle;

package/dist/ai/artifact/artifact.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div
+	class={cn(
+		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ai/artifact/artifact.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const Artifact: import("svelte").Component<$$ComponentProps, {}, "">;
+type Artifact = ReturnType<typeof Artifact>;
+export default Artifact;

package/dist/ai/artifact/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './artifact.svelte';
+export { default as Header } from './artifact-header.svelte';
+export { default as Title } from './artifact-title.svelte';
+export { default as Description } from './artifact-description.svelte';
+export { default as Actions } from './artifact-actions.svelte';
+export { default as Content } from './artifact-content.svelte';
+export { default as Close } from './artifact-close.svelte';
+export { Action } from '../actions/index.js';

package/dist/ai/artifact/index.js

@@ -0,0 +1,8 @@
+export { default as Root } from './artifact.svelte';
+export { default as Header } from './artifact-header.svelte';
+export { default as Title } from './artifact-title.svelte';
+export { default as Description } from './artifact-description.svelte';
+export { default as Actions } from './artifact-actions.svelte';
+export { default as Content } from './artifact-content.svelte';
+export { default as Close } from './artifact-close.svelte';
+export { Action } from '../actions/index.js';

package/dist/ai/chain-of-thought/chain-of-thought-step.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
+	import Dot from '@lucide/svelte/icons/dot';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		label,
+		description,
+		status = 'complete',
+		icon
+	}: {
+		label: string;
+		description?: string;
+		status?: 'complete' | 'active' | 'pending';
+		icon?: Component<IconProps>;
+	} = $props();
+
+	const Icon = $derived(icon ?? Dot);
+</script>
+
+<!-- One reasoning step on the rail: icon column with a connector line, label
+     colored by status (active steps read brighter). -->
+<div class="flex min-w-0 gap-(--era-gap)">
+	<div class="flex flex-col items-center">
+		<Icon
+			class={cn(
+				'size-(--era-h-xs) shrink-0',
+				status === 'active' ? 'text-bright' : status === 'pending' ? 'text-muted opacity-50' : 'text-muted'
+			)}
+			aria-hidden="true"
+		/>
+		<span class="w-px flex-1 bg-divider-faded"></span>
+	</div>
+	<div class="flex min-w-0 flex-col gap-1 pb-(--era-gap)">
+		<span class={cn('text-body', status === 'active' ? 'text-bright' : 'text-fg')}>{label}</span>
+		{#if description}<span class="text-body text-muted">{description}</span>{/if}
+	</div>
+</div>

package/dist/ai/chain-of-thought/chain-of-thought-step.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+type $$ComponentProps = {
+    label: string;
+    description?: string;
+    status?: 'complete' | 'active' | 'pending';
+    icon?: Component<IconProps>;
+};
+declare const ChainOfThoughtStep: Component<$$ComponentProps, {}, "">;
+type ChainOfThoughtStep = ReturnType<typeof ChainOfThoughtStep>;
+export default ChainOfThoughtStep;

package/dist/ai/chain-of-thought/chain-of-thought.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Brain from '@lucide/svelte/icons/brain';
+	import * as Step from '../../ui/step/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		open = $bindable(false),
+		streaming = false,
+		label = 'Chain of thought',
+		children,
+		class: className
+	}: {
+		open?: boolean;
+		streaming?: boolean;
+		label?: string;
+		children?: Snippet;
+	class?: string;
+	} = $props();
+</script>
+
+<Step.Root status={streaming ? 'running' : 'done'} bind:open class={cn(className)}>
+	<Step.Summary>
+		<Brain class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+		{label}
+	</Step.Summary>
+	<Step.Content class="bg-transparent p-0 shadow-none">
+		<div class="flex flex-col">{@render children?.()}</div>
+	</Step.Content>
+</Step.Root>

package/dist/ai/chain-of-thought/chain-of-thought.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    streaming?: boolean;
+    label?: string;
+    children?: Snippet;
+    class?: string;
+};
+declare const ChainOfThought: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ChainOfThought = ReturnType<typeof ChainOfThought>;
+export default ChainOfThought;

package/dist/ai/chain-of-thought/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from './chain-of-thought.svelte';
+export { default as CoTStep } from './chain-of-thought-step.svelte';
+export { Content, Summary } from '../../ui/step/index.js';

package/dist/ai/chain-of-thought/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './chain-of-thought.svelte';
+export { default as CoTStep } from './chain-of-thought-step.svelte';
+export { Content, Summary } from '../../ui/step/index.js';

package/dist/ai/checkpoint.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Bookmark from '@lucide/svelte/icons/bookmark';
+	import { Button } from '../ui/button/index.js';
+	import { Separator } from '../ui/separator/index.js';
+	import { cn } from '../utils/index.js';
+
+	let {
+		label = 'Restore checkpoint',
+		onRestore,
+		children,
+		class: className
+	}: {
+		label?: string;
+		onRestore?: () => void;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class={cn('flex w-full items-center gap-(--era-gap) text-muted', className)}>
+	<Bookmark class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Button variant="link" size="sm" onclick={onRestore}>
+		{#if children}{@render children()}{:else}{label}{/if}
+	</Button>
+	<Separator class="flex-1" />
+</div>

package/dist/ai/checkpoint.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label?: string;
+    onRestore?: () => void;
+    children?: Snippet;
+    class?: string;
+};
+declare const Checkpoint: import("svelte").Component<$$ComponentProps, {}, "">;
+type Checkpoint = ReturnType<typeof Checkpoint>;
+export default Checkpoint;

package/dist/ai/confirmation/confirmation-actions.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<div class={cn('flex items-center justify-end gap-(--era-gap)', className)}>
+	{@render children?.()}
+</div>

package/dist/ai/confirmation/confirmation-actions.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const ConfirmationActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConfirmationActions = ReturnType<typeof ConfirmationActions>;
+export default ConfirmationActions;

package/dist/ai/confirmation/confirmation.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	/** Where an approval-gated tool call stands. */
+	export type ApprovalState = 'requested' | 'approved' | 'rejected';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ShieldQuestion from '@lucide/svelte/icons/shield-question';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		state: approval = 'requested',
+		children,
+		class: className
+	}: { state?: ApprovalState; children?: Snippet; class?: string } = $props();
+</script>
+
+<div
+	class={cn(
+		'flex min-w-0 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow)',
+		className
+	)}
+>
+	<div class="flex items-center gap-(--era-gap) text-body">
+		{#if approval === 'requested'}
+			<ShieldQuestion class="size-(--era-h-xs) shrink-0 text-warning" aria-hidden="true" />
+		{:else if approval === 'approved'}
+			<CircleCheck class="size-(--era-h-xs) shrink-0 text-success" aria-hidden="true" />
+		{:else}
+			<CircleX class="size-(--era-h-xs) shrink-0 text-destructive" aria-hidden="true" />
+		{/if}
+		<div class="min-w-0 flex-1 text-fg">{@render children?.()}</div>
+	</div>
+</div>

package/dist/ai/confirmation/confirmation.svelte.d.ts

@@ -0,0 +1,11 @@
+/** Where an approval-gated tool call stands. */
+export type ApprovalState = 'requested' | 'approved' | 'rejected';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    state?: ApprovalState;
+    children?: Snippet;
+    class?: string;
+};
+declare const Confirmation: import("svelte").Component<$$ComponentProps, {}, "">;
+type Confirmation = ReturnType<typeof Confirmation>;
+export default Confirmation;

package/dist/ai/confirmation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root, type ApprovalState } from './confirmation.svelte';
+export { default as Actions } from './confirmation-actions.svelte';

package/dist/ai/confirmation/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './confirmation.svelte';
+export { default as Actions } from './confirmation-actions.svelte';

package/dist/ai/context/context.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import * as Popover from '../../ui/popover/index.js';
+	import { KV } from '../../ui/kv/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		usedTokens,
+		maxTokens,
+		modelId,
+		class: className
+	}: {
+		usedTokens: number;
+		maxTokens: number;
+		modelId?: string;
+		class?: string;
+	} = $props();
+
+	const percent = $derived(maxTokens ? usedTokens / maxTokens : 0);
+	const fmt = new Intl.NumberFormat(undefined, { notation: 'compact' });
+	// Donut gauge geometry (r=10 viewBox ring).
+	const C = 2 * Math.PI * 10;
+	const offset = $derived(C * (1 - Math.min(percent, 1)));
+</script>
+
+<Popover.Root>
+	<Popover.Trigger size="sm" class={cn('gap-(--era-gap) tabular-nums', className)}>
+		{Math.round(percent * 100)}%
+		<svg viewBox="0 0 24 24" class="size-(--era-h-xs) -rotate-90" aria-hidden="true">
+			<circle cx="12" cy="12" r="10" fill="none" stroke="var(--color-3)" stroke-width="3" />
+			<circle
+				cx="12"
+				cy="12"
+				r="10"
+				fill="none"
+				stroke="var(--color-primary)"
+				stroke-width="3"
+				stroke-dasharray={C}
+				stroke-dashoffset={offset}
+				stroke-linecap="round"
+			/>
+		</svg>
+	</Popover.Trigger>
+	<Popover.Content align="end" class="flex w-56 flex-col gap-(--era-gap)">
+		{#if modelId}<p class="text-body text-muted">{modelId}</p>{/if}
+		<KV key="used" value={fmt.format(usedTokens)} />
+		<KV key="max" value={fmt.format(maxTokens)} />
+		<KV key="left" value={fmt.format(Math.max(0, maxTokens - usedTokens))} />
+	</Popover.Content>
+</Popover.Root>

package/dist/ai/context/context.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    usedTokens: number;
+    maxTokens: number;
+    modelId?: string;
+    class?: string;
+};
+declare const Context: import("svelte").Component<$$ComponentProps, {}, "">;
+type Context = ReturnType<typeof Context>;
+export default Context;

package/dist/ai/context/index.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './context.svelte';

package/dist/ai/context/index.js

@@ -0,0 +1 @@
+export { default as Root } from './context.svelte';

package/dist/ai/conversation/context.d.ts

@@ -0,0 +1,3 @@
+import type { StickToBottom } from '../stick-to-bottom.svelte.js';
+export declare function setConversationContext(stick: StickToBottom): StickToBottom;
+export declare function getConversationContext(): StickToBottom;

package/dist/ai/conversation/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('era-ai-conversation');
+export function setConversationContext(stick) {
+    setContext(KEY, stick);
+    return stick;
+}
+export function getConversationContext() {
+    const ctx = getContext(KEY);
+    if (!ctx)
+        throw new Error('Conversation parts must be used inside <Conversation.Root>.');
+    return ctx;
+}

package/dist/ai/conversation/conversation-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { getConversationContext } from './context.js';
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+
+	const stick = getConversationContext();
+</script>
+
+<!-- The scroll container + content column, both wired to the stick-to-bottom
+     engine (see stick-to-bottom.svelte.ts for the full contract). Normal DOM
+     order, role="log" — new messages are announced politely. -->
+<div
+	{@attach stick.viewport}
+	role="log"
+	aria-live="polite"
+	class="h-full min-h-0 flex-1 overflow-y-auto overscroll-contain [overflow-anchor:none]"
+>
+	<div
+		{@attach stick.content}
+		class={cn('mx-auto flex w-full max-w-2xl flex-col gap-(--era-pad-lg) p-(--era-pad-md)', className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</div>

package/dist/ai/conversation/conversation-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const ConversationContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConversationContent = ReturnType<typeof ConversationContent>;
+export default ConversationContent;

package/dist/ai/conversation/conversation-empty-state.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		title = 'No messages yet',
+		description = 'Start the conversation below.',
+		icon,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		title?: string;
+		description?: string;
+		icon?: Snippet;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		'flex flex-1 flex-col items-center justify-center gap-(--era-gap) p-(--era-pad-lg) text-center',
+		className
+	)}
+	{...restProps}
+>
+	{@render icon?.()}
+	<p class="text-body font-medium text-bright">{title}</p>
+	<p class="max-w-sm text-body text-muted">{description}</p>
+	{@render children?.()}
+</div>