@signal9/era-ui 2.2.0 → 2.3.0

package/dist/ai/model-selector/model-selector.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import * as Dialog from '../../ui/dialog/index.js';
+	import * as Command from '../../ui/command/index.js';
+	import Search from '@lucide/svelte/icons/search';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		open = $bindable(false),
+		models,
+		value = $bindable(''),
+		onSelect,
+		class: className
+	}: {
+		open?: boolean;
+		/** `provider` keys models.dev logo slugs (e.g. `openai`, `anthropic`). */
+		models: { id: string; name: string; provider?: string }[];
+		value?: string;
+		onSelect?: (id: string) => void;
+		class?: string;
+	} = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class={cn('max-w-md p-(--era-gap)', className)}>
+		<Command.Root bare>
+			<Command.Input icon={Search} placeholder="Search models…" autofocus />
+			<Command.List>
+				<Command.Viewport>
+					<Command.Empty>No models found.</Command.Empty>
+					<Command.Group>
+						<Command.GroupItems>
+							{#each models as m (m.id)}
+								<Command.Item
+									value={m.id}
+									keywords={[m.name, m.provider ?? '']}
+									onSelect={() => {
+										value = m.id;
+										onSelect?.(m.id);
+										open = false;
+									}}
+								>
+									{#if m.provider}
+										<img
+											src="https://models.dev/logos/{m.provider}.svg"
+											alt=""
+											class="size-(--era-h-xs) shrink-0 dark:invert"
+										/>
+									{/if}
+									<span class="truncate">{m.name}</span>
+									{#if value === m.id}
+										<span class="ml-auto text-body text-muted">current</span>
+									{/if}
+								</Command.Item>
+							{/each}
+						</Command.GroupItems>
+					</Command.Group>
+				</Command.Viewport>
+			</Command.List>
+		</Command.Root>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/ai/model-selector/model-selector.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    open?: boolean;
+    /** `provider` keys models.dev logo slugs (e.g. `openai`, `anthropic`). */
+    models: {
+        id: string;
+        name: string;
+        provider?: string;
+    }[];
+    value?: string;
+    onSelect?: (id: string) => void;
+    class?: string;
+};
+declare const ModelSelector: import("svelte").Component<$$ComponentProps, {}, "value" | "open">;
+type ModelSelector = ReturnType<typeof ModelSelector>;
+export default ModelSelector;

package/dist/ai/open-in-chat/index.d.ts

@@ -0,0 +1 @@
+export { default as Root, providers } from './open-in-chat.svelte';

package/dist/ai/open-in-chat/index.js

@@ -0,0 +1 @@
+export { default as Root, providers } from './open-in-chat.svelte';

package/dist/ai/open-in-chat/open-in-chat.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	/** Deep-link builders for "continue this prompt elsewhere". */
+	export const providers = {
+		chatgpt: { title: 'ChatGPT', url: (q: string) => `https://chatgpt.com/?${new URLSearchParams({ q })}` },
+		claude: { title: 'Claude', url: (q: string) => `https://claude.ai/new?${new URLSearchParams({ q })}` },
+		t3: { title: 'T3 Chat', url: (q: string) => `https://t3.chat/new?${new URLSearchParams({ q })}` },
+		scira: { title: 'Scira', url: (q: string) => `https://scira.ai/?${new URLSearchParams({ q })}` },
+		v0: { title: 'v0', url: (q: string) => `https://v0.dev/chat?${new URLSearchParams({ q })}` }
+	} as const;
+	export type ProviderId = keyof typeof providers;
+</script>
+
+<script lang="ts">
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		query,
+		include = Object.keys(providers) as ProviderId[],
+		class: className
+	}: { query: string; include?: ProviderId[]; class?: string } = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger class={cn(className)}>
+		Open in chat
+		<ChevronDown class="size-(--era-h-xs)" />
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="start">
+		{#each include as id (id)}
+			<DropdownMenu.Item
+				onSelect={() => window.open(providers[id].url(query), '_blank', 'noreferrer')}
+			>
+				<ExternalLink class="size-(--era-h-xs) text-muted" />
+				{providers[id].title}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/ai/open-in-chat/open-in-chat.svelte.d.ts

@@ -0,0 +1,32 @@
+/** Deep-link builders for "continue this prompt elsewhere". */
+export declare const providers: {
+    readonly chatgpt: {
+        readonly title: "ChatGPT";
+        readonly url: (q: string) => string;
+    };
+    readonly claude: {
+        readonly title: "Claude";
+        readonly url: (q: string) => string;
+    };
+    readonly t3: {
+        readonly title: "T3 Chat";
+        readonly url: (q: string) => string;
+    };
+    readonly scira: {
+        readonly title: "Scira";
+        readonly url: (q: string) => string;
+    };
+    readonly v0: {
+        readonly title: "v0";
+        readonly url: (q: string) => string;
+    };
+};
+export type ProviderId = keyof typeof providers;
+type $$ComponentProps = {
+    query: string;
+    include?: ProviderId[];
+    class?: string;
+};
+declare const OpenInChat: import("svelte").Component<$$ComponentProps, {}, "">;
+type OpenInChat = ReturnType<typeof OpenInChat>;
+export default OpenInChat;

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

@@ -0,0 +1,3 @@
+export { default as Root } from './plan.svelte';
+export { default as Header } from './plan-header.svelte';
+export { default as Content } from './plan-content.svelte';

package/dist/ai/plan/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './plan.svelte';
+export { default as Header } from './plan-header.svelte';
+export { default as Content } from './plan-content.svelte';

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+</script>
+
+<Collapsible.Content
+	class={cn('flex flex-col gap-(--era-gap) overflow-hidden p-(--era-inset-md)', className)}
+>
+	{@render children?.()}
+</Collapsible.Content>

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

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		title,
+		children,
+		class: className
+	}: { title?: string; children?: Snippet; class?: string } = $props();
+</script>
+
+<Collapsible.Trigger
+	class={cn(
+		'flex h-(--era-h-md) w-full cursor-pointer era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-bright hover:bg-(--era-highlight)',
+		className
+	)}
+>
+	{#if children}{@render children()}{:else}<span class="truncate font-medium">{title}</span>{/if}
+	<ChevronsUpDown class="ml-auto size-(--era-h-xs) shrink-0 text-muted" />
+</Collapsible.Trigger>

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

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

package/dist/ai/plan/plan.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		open = $bindable(true),
+		streaming = false,
+		children,
+		class: className
+	}: { open?: boolean; streaming?: boolean; children?: Snippet; class?: string } = $props();
+</script>
+
+<Collapsible.Root
+	bind:open
+	data-streaming={streaming || undefined}
+	class={cn(
+		'group/plan flex flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow)',
+		className
+	)}
+>
+	{@render children?.()}
+</Collapsible.Root>

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

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

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

@@ -0,0 +1,27 @@
+export interface PromptAttachment {
+    id: string;
+    file: File;
+    filename: string;
+    mediaType: string;
+    previewUrl?: string;
+}
+export interface PromptMessage {
+    text: string;
+    attachments: PromptAttachment[];
+}
+export type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+/** The composer's attachment basket — add/remove with object-URL hygiene. */
+export declare class Attachments {
+    #private;
+    items: PromptAttachment[];
+    accept: string;
+    maxFiles: number;
+    fileInput: HTMLInputElement | null;
+    onError?: (code: 'accept' | 'max_files', file: File) => void;
+    add(files: Iterable<File>): void;
+    remove(id: string): void;
+    clear(): void;
+    openFileDialog(): void;
+}
+export declare function setAttachmentsContext(ctx: Attachments): Attachments;
+export declare function getAttachmentsContext(): Attachments;

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

@@ -0,0 +1,60 @@
+import { getContext, setContext } from 'svelte';
+/** The composer's attachment basket — add/remove with object-URL hygiene. */
+export class Attachments {
+    items = $state([]);
+    accept = '';
+    maxFiles = Infinity;
+    fileInput = null;
+    onError;
+    add(files) {
+        for (const file of files) {
+            if (this.items.length >= this.maxFiles) {
+                this.onError?.('max_files', file);
+                break;
+            }
+            if (this.accept && !this.#matches(file)) {
+                this.onError?.('accept', file);
+                continue;
+            }
+            this.items.push({
+                id: crypto.randomUUID(),
+                file,
+                filename: file.name,
+                mediaType: file.type,
+                previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined
+            });
+        }
+    }
+    remove(id) {
+        const item = this.items.find((a) => a.id === id);
+        if (item?.previewUrl)
+            URL.revokeObjectURL(item.previewUrl);
+        this.items = this.items.filter((a) => a.id !== id);
+    }
+    clear() {
+        for (const a of this.items)
+            if (a.previewUrl)
+                URL.revokeObjectURL(a.previewUrl);
+        this.items = [];
+    }
+    openFileDialog() {
+        this.fileInput?.click();
+    }
+    #matches(file) {
+        return this.accept.split(',').some((pattern) => {
+            const p = pattern.trim();
+            return p.endsWith('/*') ? file.type.startsWith(p.slice(0, -1)) : file.type === p;
+        });
+    }
+}
+const KEY = Symbol('era-ai-attachments');
+export function setAttachmentsContext(ctx) {
+    setContext(KEY, ctx);
+    return ctx;
+}
+export function getAttachmentsContext() {
+    const ctx = getContext(KEY);
+    if (!ctx)
+        throw new Error('PromptInput parts must be used inside <PromptInput.Root>.');
+    return ctx;
+}

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

@@ -0,0 +1,7 @@
+export { default as Root } from './prompt-input.svelte';
+export { default as Textarea } from './prompt-input-textarea.svelte';
+export { default as Submit } from './prompt-input-submit.svelte';
+export { default as Toolbar } from './prompt-input-toolbar.svelte';
+export { default as Attachments } from './prompt-input-attachments.svelte';
+export { default as AddAttachments } from './prompt-input-add-attachments.svelte';
+export { Attachments as AttachmentsStore, getAttachmentsContext, setAttachmentsContext, type PromptAttachment, type PromptMessage, type ChatStatus } from './attachments.svelte.js';

package/dist/ai/prompt-input/index.js

@@ -0,0 +1,7 @@
+export { default as Root } from './prompt-input.svelte';
+export { default as Textarea } from './prompt-input-textarea.svelte';
+export { default as Submit } from './prompt-input-submit.svelte';
+export { default as Toolbar } from './prompt-input-toolbar.svelte';
+export { default as Attachments } from './prompt-input-attachments.svelte';
+export { default as AddAttachments } from './prompt-input-add-attachments.svelte';
+export { Attachments as AttachmentsStore, getAttachmentsContext, setAttachmentsContext } from './attachments.svelte.js';

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import Plus from '@lucide/svelte/icons/plus';
+	import { Button } from '../../ui/button/index.js';
+	import { getAttachmentsContext } from './attachments.svelte.js';
+
+	let { label = 'Add attachments' }: { label?: string } = $props();
+	const attachments = getAttachmentsContext();
+</script>
+
+<Button icon size="default" aria-label={label} onclick={() => attachments.openFileDialog()}>
+	<Plus class="size-(--era-h-xs)" />
+</Button>

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

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

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import X from '@lucide/svelte/icons/x';
+	import Paperclip from '@lucide/svelte/icons/paperclip';
+	import { Button } from '../../ui/button/index.js';
+	import { getAttachmentsContext } from './attachments.svelte.js';
+
+	const attachments = getAttachmentsContext();
+</script>
+
+{#if attachments.items.length}
+	<div class="flex flex-wrap gap-(--era-gap) pb-(--era-gap)">
+		{#each attachments.items as a (a.id)}
+			<div class="group/att relative">
+				{#if a.previewUrl}
+					<img
+						src={a.previewUrl}
+						alt={a.filename}
+						class="size-16 rounded-(--era-rd-sm) object-cover shadow-(--era-shadow)"
+					/>
+				{:else}
+					<div
+						class="flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg) px-(--era-inset-md) text-body text-muted shadow-(--era-shadow)"
+					>
+						<Paperclip class="size-(--era-h-xs) shrink-0" />
+						<span class="max-w-32 truncate">{a.filename}</span>
+					</div>
+				{/if}
+				<Button
+					icon
+					size="icon"
+					aria-label="Remove {a.filename}"
+					class="absolute -top-1 -right-1 rounded-full opacity-0 shadow-(--era-shadow) group-hover/att:opacity-100 focus-visible:opacity-100"
+					onclick={() => attachments.remove(a.id)}
+				>
+					<X class="size-[calc(var(--era-h-xs)-4px)]" />
+				</Button>
+			</div>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PromptInputAttachments: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PromptInputAttachments = InstanceType<typeof PromptInputAttachments>;
+export default PromptInputAttachments;

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import ArrowUp from '@lucide/svelte/icons/arrow-up';
+	import Square from '@lucide/svelte/icons/square';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../utils/index.js';
+	import type { ChatStatus } from './attachments.svelte.js';
+
+	let {
+		status = 'ready',
+		disabled = false,
+		onStop,
+		class: className
+	}: {
+		status?: ChatStatus;
+		disabled?: boolean;
+		onStop?: () => void;
+		class?: string;
+	} = $props();
+
+	const generating = $derived(status === 'submitted' || status === 'streaming');
+</script>
+
+<!-- One button, morphing by stream state: send → (spinner) → stop. While
+     generating it becomes type=button so pressing it stops instead of
+     resubmitting. -->
+<Button
+	icon
+	size="default"
+	tone={generating ? 'default' : 'accent'}
+	type={generating ? 'button' : 'submit'}
+	aria-label={generating ? 'Stop' : 'Send'}
+	disabled={disabled && !generating}
+	class={cn('shrink-0 self-end', className)}
+	onclick={(e: MouseEvent) => {
+		if (generating) {
+			e.preventDefault();
+			onStop?.();
+		}
+	}}
+>
+	{#if status === 'submitted'}
+		<LoaderCircle class="size-(--era-h-xs) animate-spin" />
+	{:else if status === 'streaming'}
+		<Square class="size-[calc(var(--era-h-xs)-4px)]" fill="currentColor" />
+	{:else}
+		<ArrowUp class="size-(--era-h-xs)" />
+	{/if}
+</Button>

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

@@ -0,0 +1,10 @@
+import type { ChatStatus } from './attachments.svelte.js';
+type $$ComponentProps = {
+    status?: ChatStatus;
+    disabled?: boolean;
+    onStop?: () => void;
+    class?: string;
+};
+declare const PromptInputSubmit: import("svelte").Component<$$ComponentProps, {}, "">;
+type PromptInputSubmit = ReturnType<typeof PromptInputSubmit>;
+export default PromptInputSubmit;

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { getAttachmentsContext } from './attachments.svelte.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		placeholder = 'Message…',
+		class: className,
+		...restProps
+	}: HTMLTextareaAttributes & { ref?: HTMLTextAreaElement | null } = $props();
+
+	const attachments = getAttachmentsContext();
+
+	function onKeydown(e: KeyboardEvent) {
+		// Enter submits, Shift+Enter breaks the line — and NEVER submit while
+		// the user is composing CJK input (both checks: the event flag and the
+		// composition events, per the reference implementations).
+		if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+			e.preventDefault();
+			(e.currentTarget as HTMLTextAreaElement).form?.requestSubmit();
+		}
+	}
+
+	function onPaste(e: ClipboardEvent) {
+		const files = [...(e.clipboardData?.items ?? [])]
+			.filter((i) => i.kind === 'file')
+			.map((i) => i.getAsFile())
+			.filter((f): f is File => !!f);
+		if (files.length) {
+			e.preventDefault();
+			attachments.add(files);
+		}
+	}
+</script>
+
+<!-- field-sizing auto-grows the textarea with its content up to max-h, then
+     it scrolls internally; the composer stays typing-enabled during streaming
+     (only the submit path is gated). -->
+<textarea
+	bind:this={ref}
+	bind:value
+	name="message"
+	rows="1"
+	{placeholder}
+	autocapitalize="off"
+	autocomplete="off"
+	spellcheck="false"
+	onkeydown={onKeydown}
+	onpaste={onPaste}
+	class={cn(
+		'field-sizing-content max-h-48 w-full resize-none bg-transparent p-(--era-inset-sm) text-body leading-relaxed text-bright outline-none placeholder:text-muted',
+		className
+	)}
+	{...restProps}
+></textarea>

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

@@ -0,0 +1,7 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLTextareaAttributes & {
+    ref?: HTMLTextAreaElement | null;
+};
+declare const PromptInputTextarea: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type PromptInputTextarea = ReturnType<typeof PromptInputTextarea>;
+export default PromptInputTextarea;

package/dist/ai/prompt-input/prompt-input-toolbar.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-end justify-between gap-(--era-gap)', className)} {...restProps}>
+	{@render children?.()}
+</div>

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