@signal9/era-ui 2.2.0 → 2.4.0

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

@@ -0,0 +1,5 @@
+export { default as Root } from './task.svelte';
+export { default as Trigger } from './task-trigger.svelte';
+export { default as Content } from './task-content.svelte';
+export { default as Item } from './task-item.svelte';
+export { default as ItemFile } from './task-item-file.svelte';

package/dist/ai/task/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './task.svelte';
+export { default as Trigger } from './task-trigger.svelte';
+export { default as Content } from './task-content.svelte';
+export { default as Item } from './task-item.svelte';
+export { default as ItemFile } from './task-item-file.svelte';

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Step from '../../ui/step/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<!-- The task log rail: items hang off a left border, terminal-trace style. -->
+<Step.Content
+	class={cn('border-s-2 border-divider-faded bg-transparent p-0 ps-(--era-pad-sm) shadow-none', className)}
+>
+	{@render children?.()}
+</Step.Content>

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

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

package/dist/ai/task/task-item-file.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Chip } from '../../ui/chip/index.js';
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<Chip>{@render children?.()}</Chip>

package/dist/ai/task/task-item-file.svelte.d.ts

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

package/dist/ai/task/task-item.svelte

@@ -0,0 +1,8 @@
+<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-w-0 text-body text-muted', className)}>{@render children?.()}</div>

package/dist/ai/task/task-item.svelte.d.ts

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

package/dist/ai/task/task-trigger.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Search from '@lucide/svelte/icons/search';
+	import * as Step from '../../ui/step/index.js';
+
+	let { title, children }: { title?: string; children?: Snippet } = $props();
+</script>
+
+<Step.Summary>
+	<Search class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	{#if children}{@render children()}{:else}{title}{/if}
+</Step.Summary>

package/dist/ai/task/task-trigger.svelte.d.ts

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

package/dist/ai/task/task.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { StepStatus } from '../../ui/step/index.js';
+	import * as Step from '../../ui/step/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		open = $bindable(true),
+		status = 'done',
+		children,
+		class: className
+	}: { open?: boolean; status?: StepStatus; children?: Snippet; class?: string } = $props();
+</script>
+
+<Step.Root {status} bind:open class={cn(className)}>
+	{@render children?.()}
+</Step.Root>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { StepStatus } from '../../ui/step/index.js';
+type $$ComponentProps = {
+    open?: boolean;
+    status?: StepStatus;
+    children?: Snippet;
+    class?: string;
+};
+declare const Task: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Task = ReturnType<typeof Task>;
+export default Task;

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

@@ -0,0 +1,5 @@
+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 { Content } from '../../ui/step/index.js';

package/dist/ai/tool/index.js

@@ -0,0 +1,5 @@
+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 { Content } from '../../ui/step/index.js';

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Wrench from '@lucide/svelte/icons/wrench';
+	import * as Step from '../../ui/step/index.js';
+
+	let {
+		type,
+		children
+	}: {
+		/** The tool name, e.g. `search_flights`. */
+		type: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<Step.Summary>
+	<Wrench class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<span class="truncate text-fg">{type}</span>
+	{@render children?.()}
+</Step.Summary>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** The tool name, e.g. `search_flights`. */
+    type: string;
+    children?: Snippet;
+};
+declare const ToolHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolHeader = ReturnType<typeof ToolHeader>;
+export default ToolHeader;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as Step from '../../ui/step/index.js';
+	import { CodeBlock } from '../../ui/code-block/index.js';
+
+	let { input }: { input: unknown } = $props();
+</script>
+
+<Step.Section label="input">
+	<CodeBlock code={JSON.stringify(input, null, 2)} />
+</Step.Section>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    input: unknown;
+};
+declare const ToolInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolInput = ReturnType<typeof ToolInput>;
+export default ToolInput;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Step from '../../ui/step/index.js';
+	import { CodeBlock } from '../../ui/code-block/index.js';
+
+	let { output, errorText }: { output?: unknown; errorText?: string } = $props();
+</script>
+
+{#if errorText}
+	<Step.Section label="error">
+		<p class="text-body text-destructive">{errorText}</p>
+	</Step.Section>
+{:else if output !== undefined}
+	<Step.Section label="output">
+		{#if typeof output === 'string'}
+			<p class="text-body whitespace-pre-wrap text-muted">{output}</p>
+		{:else}
+			<CodeBlock code={JSON.stringify(output, null, 2)} />
+		{/if}
+	</Step.Section>
+{/if}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    output?: unknown;
+    errorText?: string;
+};
+declare const ToolOutput: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolOutput = ReturnType<typeof ToolOutput>;
+export default ToolOutput;

package/dist/ai/tool/tool.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	/** AI-SDK tool part lifecycle. */
+	export type ToolState =
+		| 'input-streaming'
+		| 'input-available'
+		| 'output-available'
+		| 'output-error';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Step from '../../ui/step/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		state: toolState = 'input-streaming',
+		open = $bindable(false),
+		children,
+		class: className
+	}: {
+		state?: ToolState;
+		open?: boolean;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	const status = $derived(
+		(
+			{
+				'input-streaming': 'pending',
+				'input-available': 'running',
+				'output-available': 'done',
+				'output-error': 'error'
+			} as const
+		)[toolState]
+	);
+</script>
+
+<Step.Root {status} bind:open class={cn(className)}>
+	{@render children?.()}
+</Step.Root>

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

@@ -0,0 +1,12 @@
+/** AI-SDK tool part lifecycle. */
+export type ToolState = 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    state?: ToolState;
+    open?: boolean;
+    children?: Snippet;
+    class?: string;
+};
+declare const Tool: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Tool = ReturnType<typeof Tool>;
+export default Tool;

package/dist/ai/web-preview/index.d.ts

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

package/dist/ai/web-preview/index.js

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

package/dist/ai/web-preview/web-preview.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import RotateCw from '@lucide/svelte/icons/rotate-cw';
+	import { Bar } from '../../ui/bar/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		url = $bindable(''),
+		onUrlChange,
+		class: className
+	}: { url?: string; onUrlChange?: (url: string) => void; class?: string } = $props();
+
+	let draft = $derived(url);
+	let nonce = $state(0);
+</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
+	)}
+>
+	<Bar size="md" class="shrink-0 rounded-none gap-(--era-gap)">
+		<Button icon size="sm" aria-label="Reload" onclick={() => (nonce += 1)}>
+			<RotateCw class="size-(--era-h-xs)" />
+		</Button>
+		<Input
+			bind:value={draft}
+			class="h-(--era-h-sm) flex-1"
+			placeholder="https://…"
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') {
+					url = draft;
+					onUrlChange?.(url);
+				}
+			}}
+		/>
+	</Bar>
+	{#key nonce}
+		<iframe
+			src={url}
+			title="Web preview"
+			sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+			class="min-h-0 w-full flex-1 border-0 bg-white"
+		></iframe>
+	{/key}
+</div>

package/dist/ai/web-preview/web-preview.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    url?: string;
+    onUrlChange?: (url: string) => void;
+    class?: string;
+};
+declare const WebPreview: import("svelte").Component<$$ComponentProps, {}, "url">;
+type WebPreview = ReturnType<typeof WebPreview>;
+export default WebPreview;

package/dist/ai/workflow/canvas.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { SvelteFlow, Background, Controls, type Node, type Edge } from '@xyflow/svelte';
+	import '@xyflow/svelte/dist/style.css';
+
+	let {
+		nodes = $bindable([]),
+		edges = $bindable([]),
+		children
+	}: { nodes?: Node[]; edges?: Edge[]; children?: Snippet } = $props();
+</script>
+
+<!-- Thin era skin over Svelte Flow — the graph engine is xyflow's. This file
+     lives on its own subpath so the dependency stays opt-in. -->
+<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-lg) shadow-(--era-shadow)">
+	<Background bgColor="var(--color-1)" />
+	<Controls />
+	{@render children?.()}
+</SvelteFlow>

package/dist/ai/workflow/canvas.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type Node, type Edge } from '@xyflow/svelte';
+import '@xyflow/svelte/dist/style.css';
+type $$ComponentProps = {
+    nodes?: Node[];
+    edges?: Edge[];
+    children?: Snippet;
+};
+declare const Canvas: import("svelte").Component<$$ComponentProps, {}, "nodes" | "edges">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;

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

@@ -0,0 +1,2 @@
+export { default as Canvas } from './canvas.svelte';
+export { default as Node } from './node.svelte';

package/dist/ai/workflow/index.js

@@ -0,0 +1,2 @@
+export { default as Canvas } from './canvas.svelte';
+export { default as Node } from './node.svelte';

package/dist/ai/workflow/node.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Handle, Position } from '@xyflow/svelte';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		title,
+		children,
+		class: className
+	}: { title?: string; children?: Snippet; class?: string } = $props();
+</script>
+
+<div
+	class={cn(
+		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
+		className
+	)}
+>
+	<Handle type="target" position={Position.Left} />
+	{#if title}
+		<div class="flex h-(--era-h-md) items-center border-b border-divider-faded px-(--era-inset-md) font-medium text-bright">
+			{title}
+		</div>
+	{/if}
+	<div class="p-(--era-inset-md) text-fg">{@render children?.()}</div>
+	<Handle type="source" position={Position.Right} />
+</div>

package/dist/ai/workflow/node.svelte.d.ts

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