@signal9/era-ui 2.8.2 → 2.9.0

package/dist/ai/run-status/run-status.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+	/** Aggregate run lifecycle. `running` pulses; the three active states
+	 *  (queued/running/awaiting) surface the Cancel affordance. */
+	export type RunState = 'idle' | 'queued' | 'running' | 'awaiting' | 'done' | 'error';
+
+	/** Tone for the latest-log line — reuses the era semantic palette. */
+	export type LogTone = 'default' | 'muted' | 'success' | 'warning' | 'destructive';
+
+	export interface RunTools {
+		complete: number;
+		total: number;
+		running?: number;
+		failed?: number;
+	}
+
+	interface StatusStyle {
+		label: string;
+		dot: string;
+		text: string;
+		active: boolean;
+		pulse: boolean;
+	}
+
+	const STATUS: Record<RunState, StatusStyle> = {
+		idle: { label: 'idle', dot: 'bg-muted', text: 'text-muted', active: false, pulse: false },
+		queued: { label: 'queued', dot: 'bg-muted', text: 'text-muted', active: true, pulse: false },
+		running: { label: 'running', dot: 'bg-primary', text: 'text-fg', active: true, pulse: true },
+		awaiting: {
+			label: 'awaiting',
+			dot: 'bg-warning',
+			text: 'text-warning',
+			active: true,
+			pulse: false
+		},
+		done: { label: 'done', dot: 'bg-success', text: 'text-success', active: false, pulse: false },
+		error: {
+			label: 'error',
+			dot: 'bg-destructive',
+			text: 'text-destructive',
+			active: false,
+			pulse: false
+		}
+	};
+
+	const LOG_TONE: Record<LogTone, string> = {
+		default: 'text-fg',
+		muted: 'text-muted',
+		success: 'text-success',
+		warning: 'text-warning',
+		destructive: 'text-destructive'
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import X from '@lucide/svelte/icons/x';
+	import { Badge } from '../../ui/badge/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		status,
+		tools,
+		approvals,
+		agents,
+		latest,
+		oncancel,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		status: RunState;
+		tools?: RunTools;
+		approvals?: number;
+		agents?: number;
+		latest?: { tone: LogTone; text: string };
+		oncancel?: () => void;
+	} = $props();
+
+	const style = $derived(STATUS[status]);
+</script>
+
+<div
+	role="status"
+	aria-live="polite"
+	class={cn(
+		'flex flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow)',
+		className
+	)}
+	{...restProps}
+>
+	<div class="flex h-(--era-h-md) items-center gap-(--era-gap) px-(--era-inset-md)">
+		<!-- leading status dot + label -->
+		<span class="flex items-center gap-(--era-inset-xxs) font-mono text-body {style.text} era-text-trim">
+			<span class={cn('size-1.5 shrink-0 rounded-full', style.dot, style.pulse && 'animate-pulse')}></span>
+			{style.label}
+		</span>
+
+		{#if tools}
+			<Badge>{tools.complete}/{tools.total} tools</Badge>
+			{#if tools.running}<Badge tone="accent">+{tools.running}</Badge>{/if}
+			{#if tools.failed}<Badge tone="destructive">{tools.failed} failed</Badge>{/if}
+		{/if}
+
+		{#if approvals}
+			<Badge tone="warning">{approvals} approval</Badge>
+		{/if}
+
+		{#if agents}
+			<Badge tone="accent">{agents} agents</Badge>
+		{/if}
+
+		<div class="flex-1"></div>
+
+		{#if style.active && oncancel}
+			<Button size="xs" tone="destructive" onclick={() => oncancel?.()}>
+				<X class="size-(--era-h-xs)" aria-hidden="true" />
+				Cancel
+			</Button>
+		{/if}
+	</div>
+
+	{#if latest}
+		<div
+			class={cn(
+				'truncate px-(--era-inset-md) pb-(--era-inset-sm) font-mono text-body era-text-trim',
+				LOG_TONE[latest.tone]
+			)}
+		>
+			{latest.text}
+		</div>
+	{/if}
+</div>

package/dist/ai/run-status/run-status.svelte.d.ts

@@ -0,0 +1,26 @@
+/** Aggregate run lifecycle. `running` pulses; the three active states
+ *  (queued/running/awaiting) surface the Cancel affordance. */
+export type RunState = 'idle' | 'queued' | 'running' | 'awaiting' | 'done' | 'error';
+/** Tone for the latest-log line — reuses the era semantic palette. */
+export type LogTone = 'default' | 'muted' | 'success' | 'warning' | 'destructive';
+export interface RunTools {
+    complete: number;
+    total: number;
+    running?: number;
+    failed?: number;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    status: RunState;
+    tools?: RunTools;
+    approvals?: number;
+    agents?: number;
+    latest?: {
+        tone: LogTone;
+        text: string;
+    };
+    oncancel?: () => void;
+};
+declare const RunStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunStatus = ReturnType<typeof RunStatus>;
+export default RunStatus;

package/dist/ai/runtime-feed/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './runtime-feed-root.svelte';
+export { default as Item, type RuntimeTone, type RuntimeFeedItemData } from './runtime-feed-item.svelte';

package/dist/ai/runtime-feed/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './runtime-feed-root.svelte';
+export { default as Item } from './runtime-feed-item.svelte';

package/dist/ai/runtime-feed/runtime-feed-item.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	/** Tone of a runtime-feed line — maps to a text/dot color. */
+	export type RuntimeTone = 'log' | 'progress' | 'complete' | 'warn' | 'error';
+
+	/** A single line in a RuntimeFeed when driven by the `items` prop. */
+	export interface RuntimeFeedItemData {
+		/** Stable key for the `{#each}`. */
+		id?: string | number;
+		/** Tone color of the dot + line. */
+		tone?: RuntimeTone;
+		/** Optional trailing relative-time / label. */
+		label?: string;
+		/** The line text. */
+		text: string;
+	}
+
+	const TONE: Record<RuntimeTone, string> = {
+		log: 'text-muted',
+		progress: 'text-fg',
+		complete: 'text-success',
+		warn: 'text-warning',
+		error: 'text-destructive'
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		tone = 'log',
+		label,
+		text,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Tone color of the leading dot and the line. */
+		tone?: RuntimeTone;
+		/** Optional trailing relative-time / label. */
+		label?: string;
+		/** Line text (alternative to `children`). */
+		text?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!-- One live line: a tone dot that inherits the row color via bg-current, the
+     truncated message, and an optional trailing timestamp/label. Single-line by
+     design (the tail scrolls, it doesn't wrap) so items-center + era-text-trim
+     keep the dot and text on one optical baseline. -->
+<div
+	class={cn('flex items-center gap-(--era-gap) text-body', TONE[tone], className)}
+	{...restProps}
+>
+	<span class="size-(--era-h-xxs) shrink-0 rounded-full bg-current" aria-hidden="true"></span>
+	<span class="min-w-0 flex-1 truncate era-text-trim">
+		{#if children}{@render children()}{:else}{text}{/if}
+	</span>
+	{#if label}
+		<span class="shrink-0 text-muted tabular-nums era-text-trim">{label}</span>
+	{/if}
+</div>

package/dist/ai/runtime-feed/runtime-feed-item.svelte.d.ts

@@ -0,0 +1,27 @@
+/** Tone of a runtime-feed line — maps to a text/dot color. */
+export type RuntimeTone = 'log' | 'progress' | 'complete' | 'warn' | 'error';
+/** A single line in a RuntimeFeed when driven by the `items` prop. */
+export interface RuntimeFeedItemData {
+    /** Stable key for the `{#each}`. */
+    id?: string | number;
+    /** Tone color of the dot + line. */
+    tone?: RuntimeTone;
+    /** Optional trailing relative-time / label. */
+    label?: string;
+    /** The line text. */
+    text: string;
+}
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Tone color of the leading dot and the line. */
+    tone?: RuntimeTone;
+    /** Optional trailing relative-time / label. */
+    label?: string;
+    /** Line text (alternative to `children`). */
+    text?: string;
+    children?: Snippet;
+};
+declare const RuntimeFeedItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuntimeFeedItem = ReturnType<typeof RuntimeFeedItem>;
+export default RuntimeFeedItem;

package/dist/ai/runtime-feed/runtime-feed-root.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import Item, { type RuntimeFeedItemData } from './runtime-feed-item.svelte';
+
+	let {
+		items,
+		limit,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Drive the feed declaratively; alternatively compose `Item` children. */
+		items?: RuntimeFeedItemData[];
+		/** Cap the tail to the most recent N lines. */
+		limit?: number;
+		children?: Snippet;
+	} = $props();
+
+	// The running-tail feel: keep only the last `limit` lines when capped.
+	const visible = $derived(
+		items && limit !== undefined ? items.slice(-limit) : (items ?? [])
+	);
+</script>
+
+<div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>
+	{#if items}
+		{#each visible as item, i (item.id ?? i)}
+			<Item tone={item.tone} label={item.label} text={item.text} />
+		{/each}
+	{:else}
+		{@render children?.()}
+	{/if}
+</div>

package/dist/ai/runtime-feed/runtime-feed-root.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type RuntimeFeedItemData } from './runtime-feed-item.svelte';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Drive the feed declaratively; alternatively compose `Item` children. */
+    items?: RuntimeFeedItemData[];
+    /** Cap the tail to the most recent N lines. */
+    limit?: number;
+    children?: Snippet;
+};
+declare const RuntimeFeedRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuntimeFeedRoot = ReturnType<typeof RuntimeFeedRoot>;
+export default RuntimeFeedRoot;

package/dist/ai/structured-value/index.d.ts

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

package/dist/ai/structured-value/index.js

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

package/dist/ai/structured-value/structured-value.svelte

@@ -0,0 +1,130 @@
+<script lang="ts" module>
+	/** Beyond this depth the tree stops recursing and shows an ellipsis. */
+	const MAX_DEPTH = 16;
+
+	type Primitive = string | number | boolean | null | undefined;
+
+	function isRecord(input: unknown): input is Record<string, unknown> {
+		return typeof input === 'object' && input !== null && !Array.isArray(input);
+	}
+
+	function isPrimitive(input: unknown): input is Primitive {
+		return (
+			input === null || input === undefined || ['string', 'number', 'boolean'].includes(typeof input)
+		);
+	}
+
+	/** An array is "simple" when every entry is a primitive — rendered inline. */
+	function isSimpleArray(input: unknown[]): boolean {
+		return input.every((entry) => isPrimitive(entry));
+	}
+
+	/** Values that sit on the same line as their key/index rather than nesting. */
+	function isInline(input: unknown): boolean {
+		if (isPrimitive(input)) return true;
+		if (Array.isArray(input)) return input.length === 0 || isSimpleArray(input);
+		if (isRecord(input)) return Object.keys(input).length === 0;
+		return true;
+	}
+
+	function formatPrimitive(input: unknown): string {
+		if (input === null || input === undefined) return 'null';
+		if (typeof input === 'boolean') return input ? 'true' : 'false';
+		return String(input);
+	}
+
+	function summarize(input: unknown[]): string {
+		return input.map(formatPrimitive).join(', ');
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import Self from './structured-value.svelte';
+
+	let {
+		value,
+		depth = 0,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Arbitrary JSON-ish value to render as a key/value tree. */
+		value: unknown;
+		/** Internal recursion counter — leave unset at the call site. */
+		depth?: number;
+	} = $props();
+</script>
+
+{#snippet tag(kind: 'key' | 'index', label: string)}
+	{#if kind === 'index'}
+		<span
+			class="shrink-0 text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase"
+			>{label}</span
+		>
+	{:else}
+		<span class="shrink-0 text-muted era-text-trim">{label}:</span>
+	{/if}
+{/snippet}
+
+{#snippet leaf(v: unknown)}
+	{#if v === null || v === undefined}
+		<span class="min-w-0 truncate text-muted era-text-trim">null</span>
+	{:else if typeof v === 'boolean'}
+		<span class="min-w-0 truncate text-warning era-text-trim">{v ? 'true' : 'false'}</span>
+	{:else if typeof v === 'number'}
+		<span class="min-w-0 truncate text-fg tabular-nums era-text-trim">{v}</span>
+	{:else if typeof v === 'string'}
+		<span class="min-w-0 truncate text-fg era-text-trim" title={v}>{v}</span>
+	{:else if Array.isArray(v)}
+		{#if v.length === 0}
+			<span class="min-w-0 truncate text-muted era-text-trim">empty</span>
+		{:else}
+			<span class="min-w-0 truncate text-fg era-text-trim" title={summarize(v)}>{summarize(v)}</span>
+		{/if}
+	{:else}
+		<span class="min-w-0 truncate text-muted era-text-trim">empty</span>
+	{/if}
+{/snippet}
+
+{#snippet row(kind: 'key' | 'index', label: string, v: unknown)}
+	{#if isInline(v)}
+		<div class="flex min-w-0 items-baseline gap-(--era-gap)">
+			{@render tag(kind, label)}
+			{@render leaf(v)}
+		</div>
+	{:else}
+		<div class="flex min-w-0 flex-col gap-(--era-gap)">
+			{@render tag(kind, label)}
+			<div class="border-l border-divider pl-(--era-inset-md)">
+				<Self value={v} depth={depth + 1} />
+			</div>
+		</div>
+	{/if}
+{/snippet}
+
+<div class={cn('flex min-w-0 flex-col gap-(--era-gap) text-body', className)} {...restProps}>
+	{#if depth > MAX_DEPTH}
+		<span class="text-muted era-text-trim">…</span>
+	{:else if isRecord(value)}
+		{#if Object.keys(value).length === 0}
+			<span class="text-muted era-text-trim">empty</span>
+		{:else}
+			{#each Object.entries(value) as [key, entry] (key)}
+				{@render row('key', key, entry)}
+			{/each}
+		{/if}
+	{:else if Array.isArray(value)}
+		{#if value.length === 0}
+			<span class="text-muted era-text-trim">empty</span>
+		{:else if isSimpleArray(value)}
+			{@render leaf(value)}
+		{:else}
+			{#each value as item, index (index)}
+				{@render row('index', String(index), item)}
+			{/each}
+		{/if}
+	{:else}
+		{@render leaf(value)}
+	{/if}
+</div>

package/dist/ai/structured-value/structured-value.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Arbitrary JSON-ish value to render as a key/value tree. */
+    value: unknown;
+    /** Internal recursion counter — leave unset at the call site. */
+    depth?: number;
+};
+declare const StructuredValue: import("svelte").Component<$$ComponentProps, {}, "">;
+type StructuredValue = ReturnType<typeof StructuredValue>;
+export default StructuredValue;

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

@@ -2,4 +2,7 @@ export { default as Root, type ToolState } from './tool.svelte';
 export { default as Header } from './tool-header.svelte';
 export { default as Input } from './tool-input.svelte';
 export { default as Output } from './tool-output.svelte';
+export { default as Chip } from './tool-chip.svelte';
+export { default as Chips } from './tool-chips.svelte';
+export { default as Exec } from './tool-exec.svelte';
 export { Content } from '../../ui/step/index.js';

package/dist/ai/tool/index.js

@@ -2,4 +2,7 @@ export { default as Root } from './tool.svelte';
 export { default as Header } from './tool-header.svelte';
 export { default as Input } from './tool-input.svelte';
 export { default as Output } from './tool-output.svelte';
+export { default as Chip } from './tool-chip.svelte';
+export { default as Chips } from './tool-chips.svelte';
+export { default as Exec } from './tool-exec.svelte';
 export { Content } from '../../ui/step/index.js';

package/dist/ai/tool/tool-chip.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import Wrench from '@lucide/svelte/icons/wrench';
+	import { cn } from '../../utils/index.js';
+	import type { ToolState } from './tool.svelte';
+
+	let {
+		state: toolState = 'input-streaming',
+		active = false,
+		icon: Icon = Wrench,
+		onclick,
+		children,
+		class: className,
+		...restProps
+	}: {
+		/** AI-SDK tool lifecycle — drives the pulse and the failure dot. */
+		state?: ToolState;
+		/** Selected: this chip owns the shared expansion area. */
+		active?: boolean;
+		/** Leading glyph; defaults to a wrench. */
+		icon?: Component;
+		onclick?: () => void;
+		/** The chip label — the tool name. */
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	// Same mapping tool.svelte uses to drive Step status.
+	const status = $derived(
+		(
+			{
+				'input-streaming': 'pending',
+				'input-available': 'running',
+				'output-available': 'done',
+				'output-error': 'error'
+			} as const
+		)[toolState]
+	);
+</script>
+
+<!-- Compact horizontal tool call: a quiet pill that brightens on hover and
+     seats an active state (bg-hover) when it owns the expansion. While running
+     the icon pulses and the label shimmers — both collapse to static at instant
+     motion for free. A trailing destructive dot marks a failed call. -->
+<button
+	type="button"
+	data-status={status}
+	{onclick}
+	class={cn(
+		'inline-flex h-(--era-h-xxs) min-w-0 max-w-full shrink-0 cursor-pointer era-interactive items-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) text-body text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg era-text-trim',
+		active && 'bg-hover text-fg',
+		className
+	)}
+	{...restProps}
+>
+	<Icon
+		class={cn('size-(--era-h-xs) shrink-0', status === 'running' && 'animate-pulse')}
+		aria-hidden="true"
+	/>
+	<span class={cn('min-w-0 truncate', status === 'running' && 'era-shimmer')}>
+		{@render children?.()}
+	</span>
+	{#if status === 'error'}
+		<span class="size-(--era-gap) shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
+	{/if}
+</button>

package/dist/ai/tool/tool-chip.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+import type { ToolState } from './tool.svelte';
+type $$ComponentProps = {
+    /** AI-SDK tool lifecycle — drives the pulse and the failure dot. */
+    state?: ToolState;
+    /** Selected: this chip owns the shared expansion area. */
+    active?: boolean;
+    /** Leading glyph; defaults to a wrench. */
+    icon?: Component;
+    onclick?: () => void;
+    /** The chip label — the tool name. */
+    children?: Snippet;
+    class?: string;
+};
+declare const ToolChip: Component<$$ComponentProps, {}, "">;
+type ToolChip = ReturnType<typeof ToolChip>;
+export default ToolChip;

package/dist/ai/tool/tool-chips.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		streaming = false,
+		children,
+		expanded,
+		class: className
+	}: {
+		/** Appends a pulsing accent cursor after the last chip while streaming. */
+		streaming?: boolean;
+		/** The chips — a run of `Tool.Chip`s. */
+		children?: Snippet;
+		/** Shared detail area, rendered below the row when a chip is active. */
+		expanded?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<!-- Alternate compact layout to the vertical Step expander: chips wrap in a row,
+     hairline-separated (a faded left rule on each chip after the first — the
+     cursor is excluded), with one shared expansion area below. -->
+<div class={cn('flex min-w-0 flex-col', className)}>
+	<div
+		class="flex flex-wrap items-center gap-(--era-gap) [&>*:not(:first-child):not([data-chips-cursor])]:border-l [&>*:not(:first-child):not([data-chips-cursor])]:border-divider-faded [&>*:not(:first-child):not([data-chips-cursor])]:pl-(--era-gap)"
+	>
+		{@render children?.()}
+		{#if streaming}
+			<span
+				data-chips-cursor
+				class="size-(--era-gap) shrink-0 rounded-full bg-primary"
+				aria-hidden="true"
+			></span>
+		{/if}
+	</div>
+	{#if expanded}
+		<div class="mt-(--era-gap) min-w-0">
+			{@render expanded()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Stream-head cursor pulse — timing derives from the motion axis (6×
+	   --era-duration). At instant the duration is 0s and the dot freezes fully
+	   opaque, so reduced-motion and data-motion="instant" both still it. */
+	[data-chips-cursor] {
+		animation: era-chips-cursor calc(var(--era-duration) * 6) steps(2, start) infinite;
+	}
+	@keyframes era-chips-cursor {
+		50% {
+			opacity: 0;
+		}
+	}
+</style>

package/dist/ai/tool/tool-chips.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Appends a pulsing accent cursor after the last chip while streaming. */
+    streaming?: boolean;
+    /** The chips — a run of `Tool.Chip`s. */
+    children?: Snippet;
+    /** Shared detail area, rendered below the row when a chip is active. */
+    expanded?: Snippet;
+    class?: string;
+};
+declare const ToolChips: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolChips = ReturnType<typeof ToolChips>;
+export default ToolChips;