@signal9/era-ui 2.1.0 → 2.3.0

package/dist/ai/stick-to-bottom.svelte.js

@@ -0,0 +1,133 @@
+/**
+ * The stick-to-bottom contract, distilled from the reference implementations
+ * (use-stick-to-bottom, open-webui, vercel/ai-elements):
+ *
+ * - auto-follow content growth while pinned to the bottom;
+ * - ANY user-initiated upward intent breaks the pin instantly (wheel up,
+ *   touch drag, PageUp/ArrowUp/Home, or a scroll event that moved up and
+ *   wasn't ours);
+ * - scrolling back to within `threshold` px of the bottom re-pins;
+ * - content growth is watched with a ResizeObserver on the CONTENT (scroll
+ *   events alone miss it — images, code blocks, expanding steps), and the
+ *   scroll events a resize provokes are guarded so a reflow never reads as
+ *   the user scrolling away;
+ * - an active text selection inside the viewport suspends following (never
+ *   yank text out from under a selecting user);
+ * - scrolling is a direct scrollTop write on the container, coalesced through
+ *   rAF — never scrollIntoView (it scrolls ancestors too).
+ *
+ * CSS `overflow-anchor` and `column-reverse` are deliberately not used: no
+ * Safari support for the former; reversed DOM order breaks screen readers,
+ * selection, and `role="log"` semantics for the latter.
+ */
+export class StickToBottom {
+    /** True while auto-following. Reactive — drive the ↓ button off it. */
+    pinned = $state(true);
+    /** Px from the bottom still considered "at bottom" for re-pinning. */
+    threshold = 70;
+    #el = null;
+    #lastTop = 0;
+    #programmatic = 0;
+    #resizeGuard = 0;
+    #raf = 0;
+    /** Attach to the scroll container (`overflow-y-auto`). */
+    viewport = (el) => {
+        this.#el = el;
+        this.#lastTop = el.scrollTop;
+        const unpin = () => (this.pinned = false);
+        const onWheel = (e) => {
+            if (e.deltaY < 0)
+                unpin();
+        };
+        const onTouchMove = () => {
+            // A touch drag is user intent; if it lands near the bottom the
+            // scroll handler re-pins right after.
+            if (!this.#nearBottom())
+                unpin();
+        };
+        const onKeyDown = (e) => {
+            if (e.key === 'PageUp' || e.key === 'ArrowUp' || e.key === 'Home')
+                unpin();
+        };
+        const onScroll = () => {
+            const top = el.scrollTop;
+            const wasOurs = this.#programmatic > 0 || this.#resizeGuard > 0;
+            if (!wasOurs) {
+                if (top < this.#lastTop - 1)
+                    unpin();
+                else if (this.#nearBottom())
+                    this.pinned = true;
+            }
+            this.#lastTop = top;
+        };
+        const onScrollEnd = () => {
+            this.#programmatic = 0;
+        };
+        el.addEventListener('wheel', onWheel, { passive: true });
+        el.addEventListener('touchmove', onTouchMove, { passive: true });
+        el.addEventListener('keydown', onKeyDown);
+        el.addEventListener('scroll', onScroll, { passive: true });
+        el.addEventListener('scrollend', onScrollEnd);
+        return () => {
+            el.removeEventListener('wheel', onWheel);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('keydown', onKeyDown);
+            el.removeEventListener('scroll', onScroll);
+            el.removeEventListener('scrollend', onScrollEnd);
+            if (this.#el === el)
+                this.#el = null;
+        };
+    };
+    /** Attach to the content wrapper INSIDE the viewport. */
+    content = (el) => {
+        const ro = new ResizeObserver(() => {
+            if (!this.#el)
+                return;
+            // Guard the scroll events this resize provokes for two frames so a
+            // code-block reflow never reads as the user scrolling away.
+            this.#resizeGuard++;
+            if (this.pinned && !this.#selecting())
+                this.scrollToBottom();
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                this.#resizeGuard = Math.max(0, this.#resizeGuard - 1);
+            }));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    };
+    #nearBottom() {
+        const el = this.#el;
+        if (!el)
+            return true;
+        return el.scrollHeight - el.scrollTop - el.clientHeight <= this.threshold;
+    }
+    #selecting() {
+        if (typeof window === 'undefined')
+            return false;
+        const sel = window.getSelection();
+        return !!sel && !sel.isCollapsed && this.#el?.contains(sel.anchorNode) === true;
+    }
+    /** Jump the viewport to the bottom (rAF-coalesced; safe to call per token). */
+    scrollToBottom() {
+        if (this.#raf)
+            return;
+        this.#raf = requestAnimationFrame(() => {
+            this.#raf = 0;
+            const el = this.#el;
+            if (!el)
+                return;
+            this.#programmatic++;
+            el.scrollTop = el.scrollHeight;
+            // scrollend clears the flag; the double-rAF is the fallback for
+            // browsers that don't fire it.
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                this.#programmatic = Math.max(0, this.#programmatic - 1);
+            }));
+        });
+    }
+    /** The ↓ button's action: re-pin and go. */
+    repin() {
+        this.pinned = true;
+        this.scrollToBottom();
+    }
+}

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

@@ -0,0 +1,2 @@
+export { default as Root } from './suggestions.svelte';
+export { default as Suggestion } from './suggestion.svelte';

package/dist/ai/suggestion/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './suggestions.svelte';
+export { default as Suggestion } from './suggestion.svelte';

package/dist/ai/suggestion/suggestion.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		suggestion,
+		onSelect,
+		children,
+		class: className
+	}: {
+		suggestion: string;
+		onSelect?: (suggestion: string) => void;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<Button
+	size="sm"
+	class={cn('shrink-0 rounded-full', className)}
+	onclick={() => onSelect?.(suggestion)}
+>
+	{#if children}{@render children()}{:else}{suggestion}{/if}
+</Button>

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

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

package/dist/ai/suggestion/suggestions.svelte

@@ -0,0 +1,18 @@
+<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('scrollbar-none flex w-full flex-nowrap items-center gap-(--era-gap) overflow-x-auto', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ai/suggestion/suggestions.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 Suggestions: import("svelte").Component<$$ComponentProps, {}, "">;
+type Suggestions = ReturnType<typeof Suggestions>;
+export default Suggestions;

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;