@signal9/era-ui 2.1.0 → 2.3.0

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLFormAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import {
+		Attachments,
+		setAttachmentsContext,
+		type PromptMessage
+	} from './attachments.svelte.js';
+
+	let {
+		accept = '',
+		maxFiles,
+		globalDrop = false,
+		clearOnSubmit = true,
+		onSubmit,
+		onError,
+		children,
+		class: className,
+		...restProps
+	}: Omit<HTMLFormAttributes, 'onsubmit'> & {
+		/** Comma-separated accept patterns for attachments (`image/*,application/pdf`). */
+		accept?: string;
+		maxFiles?: number;
+		/** Accept file drops anywhere on the page, not just the form. */
+		globalDrop?: boolean;
+		clearOnSubmit?: boolean;
+		onSubmit?: (message: PromptMessage, event: SubmitEvent) => void | Promise<void>;
+		onError?: (code: 'accept' | 'max_files', file: File) => void;
+		children?: Snippet;
+	} = $props();
+
+	const attachments = setAttachmentsContext(new Attachments());
+	$effect(() => {
+		attachments.accept = accept;
+		attachments.maxFiles = maxFiles ?? Infinity;
+		attachments.onError = onError;
+	});
+
+	let form = $state<HTMLFormElement | null>(null);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		const textarea = form?.querySelector<HTMLTextAreaElement>('textarea[name="message"]');
+		const text = textarea?.value.trim() ?? '';
+		if (!text && attachments.items.length === 0) return;
+		// A throwing onSubmit keeps the draft — retry-friendly.
+		await onSubmit?.({ text, attachments: [...attachments.items] }, e);
+		if (clearOnSubmit) {
+			if (textarea) textarea.value = '';
+			textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+			attachments.clear();
+		}
+	}
+
+	function handleDrop(e: DragEvent) {
+		if (!e.dataTransfer?.files.length) return;
+		e.preventDefault();
+		attachments.add(e.dataTransfer.files);
+	}
+
+	$effect(() => {
+		if (!globalDrop) return;
+		const over = (e: DragEvent) => e.preventDefault();
+		document.addEventListener('dragover', over);
+		document.addEventListener('drop', handleDrop);
+		return () => {
+			document.removeEventListener('dragover', over);
+			document.removeEventListener('drop', handleDrop);
+		};
+	});
+</script>
+
+<form
+	bind:this={form}
+	onsubmit={handleSubmit}
+	ondragover={(e) => e.preventDefault()}
+	ondrop={handleDrop}
+	class={cn(
+		'flex w-full flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) p-(--era-gap) shadow-(--era-shadow-well)',
+		className
+	)}
+	{...restProps}
+>
+	<input
+		bind:this={attachments.fileInput}
+		type="file"
+		{accept}
+		multiple={maxFiles !== 1}
+		hidden
+		onchange={(e) => {
+			const input = e.currentTarget;
+			if (input.files) attachments.add(input.files);
+			input.value = '';
+		}}
+	/>
+	{@render children?.()}
+</form>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { type PromptMessage } from './attachments.svelte.js';
+type $$ComponentProps = Omit<HTMLFormAttributes, 'onsubmit'> & {
+    /** Comma-separated accept patterns for attachments (`image/*,application/pdf`). */
+    accept?: string;
+    maxFiles?: number;
+    /** Accept file drops anywhere on the page, not just the form. */
+    globalDrop?: boolean;
+    clearOnSubmit?: boolean;
+    onSubmit?: (message: PromptMessage, event: SubmitEvent) => void | Promise<void>;
+    onError?: (code: 'accept' | 'max_files', file: File) => void;
+    children?: Snippet;
+};
+declare const PromptInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type PromptInput = ReturnType<typeof PromptInput>;
+export default PromptInput;

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

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

package/dist/ai/queue/index.js

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

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		completed = false,
+		children,
+		class: className
+	}: { completed?: boolean; children?: Snippet; class?: string } = $props();
+</script>
+
+<li
+	class={cn(
+		'flex min-w-0 items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) py-(--era-gap) text-body hover:bg-(--era-highlight)',
+		completed ? 'text-muted line-through' : 'text-fg',
+		className
+	)}
+>
+	<span
+		class={cn(
+			'size-2 shrink-0 rounded-full',
+			completed ? 'bg-success' : 'border border-divider bg-transparent'
+		)}
+	></span>
+	<span class="min-w-0 flex-1 truncate">{@render children?.()}</span>
+</li>

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

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

package/dist/ai/queue/queue.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<ul
+	class={cn(
+		'flex max-h-48 flex-col gap-(--era-gap) overflow-y-auto rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow)',
+		className
+	)}
+>
+	{@render children?.()}
+</ul>

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

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

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

@@ -0,0 +1,3 @@
+export { default as Root } from './reasoning.svelte';
+export { default as Trigger } from './reasoning-trigger.svelte';
+export { Content } from '../../ui/step/index.js';

package/dist/ai/reasoning/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './reasoning.svelte';
+export { default as Trigger } from './reasoning-trigger.svelte';
+export { Content } from '../../ui/step/index.js';

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Brain from '@lucide/svelte/icons/brain';
+	import * as Step from '../../ui/step/index.js';
+
+	let {
+		streaming = false,
+		duration = 0,
+		children
+	}: { streaming?: boolean; duration?: number; children?: Snippet } = $props();
+</script>
+
+<Step.Summary>
+	<Brain class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	{#if children}
+		{@render children()}
+	{:else if streaming || duration === 0}
+		Thinking…
+	{:else}
+		Thought for {duration} second{duration === 1 ? '' : 's'}
+	{/if}
+</Step.Summary>

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

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

package/dist/ai/reasoning/reasoning.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Step from '../../ui/step/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		streaming = false,
+		open = $bindable(false),
+		duration = $bindable(0),
+		children,
+		class: className
+	}: {
+		/** True while thinking tokens arrive. */
+		streaming?: boolean;
+		open?: boolean;
+		/** Seconds spent thinking — measured here, readable via bind. */
+		duration?: number;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	// The ChatGPT reasoning choreography: auto-open when thinking starts,
+	// measure the duration, auto-close 1s after it ends — once, and never if
+	// the user toggled it themselves.
+	let userTouched = false;
+	let autoClosed = false;
+	let startedAt = 0;
+	$effect(() => {
+		if (streaming) {
+			startedAt = Date.now();
+			if (!userTouched) open = true;
+		} else if (startedAt) {
+			duration = Math.max(1, Math.ceil((Date.now() - startedAt) / 1000));
+			if (!userTouched && !autoClosed) {
+				autoClosed = true;
+				const t = setTimeout(() => {
+					if (!userTouched) open = false;
+				}, 1000);
+				return () => clearTimeout(t);
+			}
+		}
+	});
+</script>
+
+<Step.Root
+	status={streaming ? 'running' : 'done'}
+	bind:open
+	onOpenChange={() => (userTouched = true)}
+	class={cn(className)}
+>
+	{@render children?.()}
+</Step.Root>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** True while thinking tokens arrive. */
+    streaming?: boolean;
+    open?: boolean;
+    /** Seconds spent thinking — measured here, readable via bind. */
+    duration?: number;
+    children?: Snippet;
+    class?: string;
+};
+declare const Reasoning: import("svelte").Component<$$ComponentProps, {}, "duration" | "open">;
+type Reasoning = ReturnType<typeof Reasoning>;
+export default Reasoning;

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

@@ -0,0 +1,2 @@
+export { default as Response } from './response.svelte';
+export { repairStreamingMarkdown } from './repair.js';

package/dist/ai/response/index.js

@@ -0,0 +1,2 @@
+export { default as Response } from './response.svelte';
+export { repairStreamingMarkdown } from './repair.js';

package/dist/ai/response/repair.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Mini-remend: repair the incomplete tail of streaming markdown so the parser
+ * never renders half-open syntax (the flash of literal ** mid-stream).
+ * Closes unbalanced code fences, inline code, bold and italic runs on the
+ * LAST line only — earlier lines are already complete blocks.
+ */
+export declare function repairStreamingMarkdown(md: string): string;

package/dist/ai/response/repair.js

@@ -0,0 +1,26 @@
+/**
+ * Mini-remend: repair the incomplete tail of streaming markdown so the parser
+ * never renders half-open syntax (the flash of literal ** mid-stream).
+ * Closes unbalanced code fences, inline code, bold and italic runs on the
+ * LAST line only — earlier lines are already complete blocks.
+ */
+export function repairStreamingMarkdown(md) {
+    let out = md;
+    // Unclosed fenced code block: append a virtual closing fence.
+    const fences = (out.match(/^```/gm) ?? []).length;
+    if (fences % 2 === 1)
+        out += '\n```';
+    else {
+        const tail = out.slice(out.lastIndexOf('\n') + 1);
+        if ((tail.match(/(?<!`)`(?!`)/g) ?? []).length % 2 === 1)
+            out += '`';
+        if ((tail.match(/\*\*/g) ?? []).length % 2 === 1)
+            out += '**';
+        else {
+            const singles = (tail.replace(/\*\*/g, '').match(/\*/g) ?? []).length;
+            if (singles % 2 === 1)
+                out += '*';
+        }
+    }
+    return out;
+}

package/dist/ai/response/response.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { marked, type Token } from 'marked';
+	import DOMPurify from 'dompurify';
+	import { CodeBlock } from '../../ui/code-block/index.js';
+	import { cn } from '../../utils/index.js';
+	import { repairStreamingMarkdown } from './repair.js';
+
+	let {
+		content,
+		streaming = false,
+		class: className
+	}: {
+		/** Markdown source — pass the accumulated text on every stream flush. */
+		content: string;
+		/** Adds the pulsing stream-head cursor and tail repair. */
+		streaming?: boolean;
+		class?: string;
+	} = $props();
+
+	// Re-lex the full source per flush, but render per BLOCK keyed by index —
+	// completed blocks keep their DOM (and their CodeBlock highlights); only
+	// the tail block re-renders as it grows (the streamdown memoization trick).
+	const blocks = $derived.by((): Token[] =>
+		marked.lexer(streaming ? repairStreamingMarkdown(content) : content)
+	);
+
+	function html(token: Token): string {
+		const raw = marked.parser([token] as Token[] & { links: Record<string, unknown> });
+		return typeof window === 'undefined' ? raw : DOMPurify.sanitize(raw);
+	}
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -- parser output is DOMPurify-sanitized -->
+<!-- eslint-disable better-tailwindcss/no-unknown-classes -- era-response* are defined in this component's <style> -->
+<div
+	class={cn(
+		'era-response flex min-w-0 flex-col gap-(--era-gap) text-body leading-relaxed text-fg',
+		streaming && 'era-response-streaming',
+		className
+	)}
+>
+	{#each blocks as block, i (i)}
+		{#if block.type === 'code'}
+			<CodeBlock code={block.text} />
+		{:else if block.type !== 'space'}
+			<div class="era-response-block min-w-0">{@html html(block)}</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	/* Markdown element rhythm, scoped — consumers get prose without a plugin. */
+	.era-response :global(:is(h1, h2, h3, h4)) {
+		color: var(--color-bright);
+		font-weight: 500;
+	}
+	.era-response :global(a) {
+		color: var(--color-primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.era-response :global(ul) {
+		list-style: disc;
+		padding-inline-start: 1.25em;
+	}
+	.era-response :global(ol) {
+		list-style: decimal;
+		padding-inline-start: 1.25em;
+	}
+	.era-response :global(li + li) {
+		margin-top: 0.25em;
+	}
+	.era-response :global(blockquote) {
+		border-inline-start: 2px solid var(--color-border);
+		padding-inline-start: var(--era-pad-sm);
+		color: var(--color-muted);
+	}
+	.era-response :global(code) {
+		font-family: var(--font-mono, monospace);
+		background: var(--color-2);
+		border-radius: var(--era-rd-xxs);
+		padding-inline: 0.25em;
+	}
+	.era-response :global(strong) {
+		color: var(--color-bright);
+	}
+	.era-response :global(table) {
+		border-collapse: collapse;
+	}
+	.era-response :global(:is(th, td)) {
+		border: 1px solid var(--color-border);
+		padding: calc(var(--era-gap) / 2) var(--era-gap);
+		text-align: left;
+	}
+
+	/* Stream-head cursor: a pulsing dot after the last block's last element.
+	   A pseudo-element, so it survives block re-renders without JS placement;
+	   pulse timing derives from the motion axis (static dot at instant). */
+	.era-response-streaming :global(.era-response-block:last-child > :last-child)::after {
+		content: '●';
+		display: inline-block;
+		margin-inline-start: 0.25em;
+		font-size: 0.6em;
+		vertical-align: baseline;
+		animation: era-cursor calc(var(--era-duration) * 6) steps(2, start) infinite;
+	}
+	@keyframes -global-era-cursor {
+		50% {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Markdown source — pass the accumulated text on every stream flush. */
+    content: string;
+    /** Adds the pulsing stream-head cursor and tail repair. */
+    streaming?: boolean;
+    class?: string;
+};
+declare const Response: import("svelte").Component<$$ComponentProps, {}, "">;
+type Response = ReturnType<typeof Response>;
+export default Response;

package/dist/ai/shimmer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../utils/index.js';
+
+	let {
+		as = 'p',
+		children,
+		class: className
+	}: { as?: string; children?: Snippet; class?: string } = $props();
+</script>
+
+<!-- The era-shimmer utility already derives its sweep from the motion axis. -->
+<svelte:element this={as} class={cn('era-shimmer text-body', className)}>
+	{@render children?.()}
+</svelte:element>

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

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

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

@@ -0,0 +1,4 @@
+export { default as Root } from './sources.svelte';
+export { default as Trigger } from './sources-trigger.svelte';
+export { default as Source } from './source.svelte';
+export { Content } from '../../ui/step/index.js';

package/dist/ai/sources/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './sources.svelte';
+export { default as Trigger } from './sources-trigger.svelte';
+export { default as Source } from './source.svelte';
+export { Content } from '../../ui/step/index.js';

package/dist/ai/sources/source.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import BookOpen from '@lucide/svelte/icons/book-open';
+
+	let { href, title }: { href: string; title?: string } = $props();
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -- external source URLs -->
+<a
+	{href}
+	target="_blank"
+	rel="noreferrer"
+	class="flex items-center gap-(--era-gap) text-body text-fg hover:text-bright hover:underline"
+>
+	<BookOpen class="size-(--era-h-xs) shrink-0 text-muted" aria-hidden="true" />
+	<span class="truncate">{title ?? href}</span>
+</a>

package/dist/ai/sources/source.svelte.d.ts

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

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

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

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

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

package/dist/ai/sources/sources.svelte

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

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

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

package/dist/ai/stick-to-bottom.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Attachment } from 'svelte/attachments';
+/**
+ * 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 declare class StickToBottom {
+    #private;
+    /** True while auto-following. Reactive — drive the ↓ button off it. */
+    pinned: boolean;
+    /** Px from the bottom still considered "at bottom" for re-pinning. */
+    threshold: number;
+    /** Attach to the scroll container (`overflow-y-auto`). */
+    viewport: Attachment<HTMLElement>;
+    /** Attach to the content wrapper INSIDE the viewport. */
+    content: Attachment<HTMLElement>;
+    /** Jump the viewport to the bottom (rAF-coalesced; safe to call per token). */
+    scrollToBottom(): void;
+    /** The ↓ button's action: re-pin and go. */
+    repin(): void;
+}