@signal9/era-ui 34.3.0 → 34.4.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [34.4.1](https://github.com/sig-nine/era-ui/compare/v34.4.0...v34.4.1) (2026-08-26)
+
+### Bug Fixes
+
+* **bevel:** unify compact keycap travel ([7ca2e28](https://github.com/sig-nine/era-ui/commit/7ca2e2874a6bbe6e6f6a0aff811462bdab40aad6))
+
+## [34.4.0](https://github.com/sig-nine/era-ui/compare/v34.3.0...v34.4.0) (2026-08-25)
+
+### Features
+
+* add Navi execution primitives ([540c97b](https://github.com/sig-nine/era-ui/commit/540c97bc0a4f45b106dd7bb4228810d2f17c9db6))
+
 ## [34.3.0](https://github.com/sig-nine/era-ui/compare/v34.2.9...v34.3.0) (2026-08-25)
 
 ### Features

package/dist/ai/code-mode/code-mode.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Badge } from '../../ui/badge/index.js';
+	import { Bar } from '../../ui/bar/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { CodeBlock } from '../../ui/code-block/index.js';
+	import * as Tabs from '../../ui/tabs/index.js';
+	import { cn } from '../../utils/index.js';
+	import * as RunStatus from '../run-status/index.js';
+	import * as StructuredValue from '../structured-value/index.js';
+	import type {
+		CodeModeCallState,
+		CodeModeExternalCall,
+		CodeModeExecution,
+		CodeModeLog,
+		CodeModeView
+	} from './types.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement>, CodeModeExecution {
+		ref?: HTMLDivElement | null;
+		activeView?: CodeModeView;
+		label?: string;
+		oncancel?: () => void;
+		call?: Snippet<[CodeModeExternalCall]>;
+		resultView?: Snippet<[unknown]>;
+		empty?: Snippet<[CodeModeView]>;
+	}
+
+	let {
+		ref = $bindable(null),
+		status,
+		source,
+		language = 'javascript',
+		logs = [],
+		externalCalls = [],
+		result,
+		error,
+		activeView = $bindable('source'),
+		label = 'Code Mode execution',
+		oncancel,
+		call,
+		resultView,
+		empty,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const latest = $derived(logs.at(-1));
+	const completedCalls = $derived(
+		externalCalls.filter((externalCall) => externalCall.state === 'complete').length
+	);
+	const failedCalls = $derived(
+		externalCalls.filter((externalCall) => externalCall.state === 'failed').length
+	);
+
+	const callTone: Record<CodeModeCallState, 'default' | 'accent' | 'success' | 'destructive'> = {
+		queued: 'default',
+		running: 'accent',
+		complete: 'success',
+		failed: 'destructive',
+		cancelled: 'default'
+	};
+
+	function logClass(log: CodeModeLog): string {
+		return (
+			{
+				default: 'text-fg',
+				muted: 'text-muted',
+				success: 'text-success',
+				warning: 'text-warning',
+				destructive: 'text-destructive'
+			} as const
+		)[log.tone ?? 'default'];
+	}
+</script>
+
+<div
+	bind:this={ref}
+	aria-label={label}
+	class={cn(
+		'flex min-h-0 min-w-0 flex-col overflow-hidden rounded-bar bg-well shadow-well',
+		className
+	)}
+	{...restProps}
+>
+	<RunStatus.Root
+		{status}
+		tools={externalCalls.length
+			? {
+					complete: completedCalls,
+					total: externalCalls.length,
+					running: externalCalls.filter((externalCall) => externalCall.state === 'running').length,
+					failed: failedCalls
+				}
+			: undefined}
+		latest={latest ? { tone: latest.tone ?? 'default', text: latest.text } : undefined}
+		{oncancel}
+		class="rounded-b-none shadow-none"
+	/>
+
+	<Tabs.Root bind:value={activeView} class="flex min-h-0 flex-1 flex-col">
+		<Tabs.List>
+			<Bar size="control" content="chip" divider class="overflow-x-auto rounded-none">
+				{#each ['source', 'console', 'calls', 'result'] as view (view)}
+					<Tabs.Trigger value={view}>
+						{#snippet child({ props })}
+							<Button
+								{...props}
+								size="chip"
+								class="data-[state=active]:bg-highlight data-[state=active]:text-bright"
+							>
+								{view}{view === 'console' && logs.length ? ` ${logs.length}` : ''}{view ===
+									'calls' && externalCalls.length
+									? ` ${externalCalls.length}`
+									: ''}
+							</Button>
+						{/snippet}
+					</Tabs.Trigger>
+				{/each}
+			</Bar>
+		</Tabs.List>
+
+		<Tabs.Content value="source" class="min-h-0 overflow-auto p-panel">
+			{#if source}
+				<CodeBlock code={source} data-language={language} />
+			{:else if empty}
+				{@render empty('source')}
+			{:else}
+				<p class="text-body text-muted">No source</p>
+			{/if}
+		</Tabs.Content>
+
+		<Tabs.Content value="console" class="min-h-0 overflow-auto p-panel">
+			{#if logs.length}
+				<div role="log" aria-live="polite" class="flex min-w-0 flex-col font-mono text-body">
+					{#each logs as log (log.id)}
+						<div class={cn('min-h-control whitespace-pre-wrap', logClass(log))}>{log.text}</div>
+					{/each}
+				</div>
+			{:else if empty}
+				{@render empty('console')}
+			{:else}
+				<p class="text-body text-muted">No console output</p>
+			{/if}
+		</Tabs.Content>
+
+		<Tabs.Content value="calls" class="min-h-0 overflow-auto p-panel">
+			{#if externalCalls.length}
+				<div class="flex min-w-0 flex-col gap-panel">
+					{#each externalCalls as externalCall (externalCall.id)}
+						{#if call}
+							{@render call(externalCall)}
+						{:else}
+							<article
+								class="flex min-w-0 flex-col gap-gutter border-b border-divider-faded pb-panel"
+							>
+								<header class="flex h-control items-center gap-gutter">
+									<code class="min-w-0 flex-1 truncate text-bright">{externalCall.tool}</code>
+									{#if externalCall.durationMs !== undefined}
+										<span class="text-muted tabular-nums">{externalCall.durationMs}ms</span>
+									{/if}
+									<Badge tone={callTone[externalCall.state]}>{externalCall.state}</Badge>
+								</header>
+								{#if externalCall.input !== undefined}
+									<StructuredValue.Root value={externalCall.input} />
+								{/if}
+								{#if externalCall.output !== undefined}
+									<StructuredValue.Root value={externalCall.output} />
+								{/if}
+								{#if externalCall.error}
+									<p class="text-body text-destructive">{externalCall.error}</p>
+								{/if}
+							</article>
+						{/if}
+					{/each}
+				</div>
+			{:else if empty}
+				{@render empty('calls')}
+			{:else}
+				<p class="text-body text-muted">No external calls</p>
+			{/if}
+		</Tabs.Content>
+
+		<Tabs.Content value="result" class="min-h-0 overflow-auto p-panel">
+			{#if error}
+				<p class="font-mono text-body whitespace-pre-wrap text-destructive">{error}</p>
+			{:else if result !== undefined}
+				{#if resultView}
+					{@render resultView(result)}
+				{:else}
+					<StructuredValue.Root value={result} />
+				{/if}
+			{:else if empty}
+				{@render empty('result')}
+			{:else}
+				<p class="text-body text-muted">No result yet</p>
+			{/if}
+		</Tabs.Content>
+	</Tabs.Root>
+</div>

package/dist/ai/code-mode/code-mode.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CodeModeExternalCall, CodeModeExecution, CodeModeView } from './types.js';
+interface Props extends HTMLAttributes<HTMLDivElement>, CodeModeExecution {
+    ref?: HTMLDivElement | null;
+    activeView?: CodeModeView;
+    label?: string;
+    oncancel?: () => void;
+    call?: Snippet<[CodeModeExternalCall]>;
+    resultView?: Snippet<[unknown]>;
+    empty?: Snippet<[CodeModeView]>;
+}
+declare const CodeMode: import("svelte").Component<Props, {}, "ref" | "activeView">;
+type CodeMode = ReturnType<typeof CodeMode>;
+export default CodeMode;

package/dist/ai/code-mode/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './code-mode.svelte';
+export type { CodeModeCallState, CodeModeExecution, CodeModeExternalCall, CodeModeLog, CodeModeView } from './types.js';

package/dist/ai/code-mode/index.js

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

package/dist/ai/code-mode/types.d.ts

@@ -0,0 +1,26 @@
+import type { LogTone, RunState } from '../run-status/index.js';
+export type CodeModeView = 'source' | 'console' | 'calls' | 'result';
+export interface CodeModeLog {
+    id: string | number;
+    text: string;
+    tone?: LogTone;
+}
+export type CodeModeCallState = 'queued' | 'running' | 'complete' | 'failed' | 'cancelled';
+export interface CodeModeExternalCall {
+    id: string;
+    tool: string;
+    state: CodeModeCallState;
+    input?: unknown;
+    output?: unknown;
+    error?: string;
+    durationMs?: number;
+}
+export interface CodeModeExecution {
+    status: RunState;
+    source: string;
+    language?: string;
+    logs?: readonly CodeModeLog[];
+    externalCalls?: readonly CodeModeExternalCall[];
+    result?: unknown;
+    error?: string;
+}

package/dist/ai/code-mode/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ai/confirmation/batch.d.ts

@@ -0,0 +1,21 @@
+import type { ApprovalController } from './approval.svelte.js';
+export interface ApprovalScope {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface BatchedApprovalRequest {
+    id: string;
+    title: string;
+    description?: string;
+    capability?: string;
+    /** Omit to permit every scope offered by the enclosing panel. */
+    scopeIds?: readonly string[];
+    controller: ApprovalController;
+}
+export interface BatchedApprovalDecision {
+    decision: 'approved' | 'denied';
+    scopeId: string;
+    requestIds: string[];
+    overrides: Record<string, Record<string, unknown>>;
+}

package/dist/ai/confirmation/batch.js

@@ -0,0 +1 @@
+export {};

package/dist/ai/confirmation/confirmation-batch.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { SvelteSet } from 'svelte/reactivity';
+	import * as Checkbox from '../../ui/checkbox/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { Label } from '../../ui/label/index.js';
+	import { cn } from '../../utils/index.js';
+	import Args from './confirmation-args.svelte';
+	import type { ApprovalScope, BatchedApprovalDecision, BatchedApprovalRequest } from './batch.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		ref?: HTMLDivElement | null;
+		requests: readonly BatchedApprovalRequest[];
+		scopes: readonly ApprovalScope[];
+		selectedIds?: string[];
+		scopeId?: string | null;
+		label?: string;
+		busy?: boolean;
+		onapprove?: (decision: BatchedApprovalDecision) => void | Promise<void>;
+		ondeny?: (decision: BatchedApprovalDecision) => void | Promise<void>;
+		ondecision?: (decision: BatchedApprovalDecision) => void | Promise<void>;
+	}
+
+	let {
+		ref = $bindable(null),
+		requests,
+		scopes,
+		selectedIds = $bindable([]),
+		scopeId = $bindable(null),
+		label = 'Requested actions',
+		busy = false,
+		onapprove,
+		ondeny,
+		ondecision,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const selected = $derived(new SvelteSet(selectedIds));
+	const selectedRequests = $derived(requests.filter((request) => selected.has(request.id)));
+	const allowedScopes = $derived(
+		scopes.filter((scope) =>
+			selectedRequests.every((request) => !request.scopeIds || request.scopeIds.includes(scope.id))
+		)
+	);
+	const effectiveScopeId = $derived(
+		allowedScopes.some((scope) => scope.id === scopeId) ? scopeId : (allowedScopes[0]?.id ?? null)
+	);
+	const allSelected = $derived(requests.length > 0 && selectedRequests.length === requests.length);
+	const someSelected = $derived(selectedRequests.length > 0 && !allSelected);
+	const canDecide = $derived(selectedRequests.length > 0 && effectiveScopeId !== null);
+	const canApprove = $derived(
+		selectedRequests.length > 0 &&
+			effectiveScopeId !== null &&
+			selectedRequests.every((request) => request.controller.valid)
+	);
+
+	function toggleRequest(requestId: string, checked: boolean): void {
+		const next = new SvelteSet(selectedIds);
+		if (checked) next.add(requestId);
+		else next.delete(requestId);
+		selectedIds = [...next];
+	}
+
+	function toggleAll(checked: boolean): void {
+		selectedIds = checked ? requests.map((request) => request.id) : [];
+	}
+
+	function chooseScope(nextScopeId: string): void {
+		scopeId = nextScopeId;
+	}
+
+	function decision(kind: BatchedApprovalDecision['decision']): BatchedApprovalDecision | null {
+		if (!canDecide || (kind === 'approved' && !canApprove) || !effectiveScopeId) return null;
+		return {
+			decision: kind,
+			scopeId: effectiveScopeId,
+			requestIds: selectedRequests.map((request) => request.id),
+			overrides: Object.fromEntries(
+				selectedRequests.map((request) => [request.id, request.controller.diff()])
+			)
+		};
+	}
+
+	async function submit(kind: BatchedApprovalDecision['decision']): Promise<void> {
+		const payload = decision(kind);
+		if (!payload) return;
+		await ondecision?.(payload);
+		if (kind === 'approved') await onapprove?.(payload);
+		else await ondeny?.(payload);
+	}
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('flex min-w-0 flex-col gap-panel rounded-bar bg-well p-panel shadow-well', className)}
+	{...restProps}
+>
+	<fieldset disabled={busy} class="flex min-w-0 flex-col gap-panel">
+		<legend class="sr-only">{label}</legend>
+		<div class="flex h-control items-center gap-gutter border-b border-divider-faded">
+			<Label
+				class="flex min-w-0 flex-1 cursor-pointer items-center gap-gutter font-medium text-bright"
+			>
+				<Checkbox.Root
+					checked={allSelected}
+					indeterminate={someSelected}
+					onCheckedChange={toggleAll}
+					aria-label="Select all actions"
+				/>
+				<span class="min-w-0 flex-1 truncate">{label}</span>
+			</Label>
+			<span class="text-body text-muted tabular-nums"
+				>{selectedRequests.length}/{requests.length}</span
+			>
+		</div>
+
+		<div class="flex min-w-0 flex-col gap-panel">
+			{#each requests as request (request.id)}
+				<article
+					class={cn(
+						'flex min-w-0 flex-col gap-gutter border-b border-divider-faded pb-panel',
+						selected.has(request.id) && 'bg-highlight px-panel'
+					)}
+				>
+					<Label class="flex min-h-control cursor-pointer items-center gap-gutter">
+						<Checkbox.Root
+							checked={selected.has(request.id)}
+							onCheckedChange={(checked) => toggleRequest(request.id, checked)}
+							aria-label={`Select ${request.title}`}
+						/>
+						<span class="flex min-w-0 flex-1 flex-col gap-inset-pill">
+							<span class="truncate font-medium text-bright">{request.title}</span>
+							{#if request.description}
+								<span class="text-body text-muted">{request.description}</span>
+							{/if}
+						</span>
+						{#if request.capability}
+							<code class="shrink-0 text-body text-muted">{request.capability}</code>
+						{/if}
+					</Label>
+					{#if selected.has(request.id)}
+						<Args
+							controller={request.controller}
+							class="ps-[calc(var(--era-h-icon)+var(--era-gap))]"
+						/>
+					{/if}
+				</article>
+			{/each}
+		</div>
+
+		<div class="flex min-w-0 flex-col gap-gutter">
+			<span class="text-body text-muted">Approval scope</span>
+			<div role="radiogroup" aria-label="Approval scope" class="flex flex-wrap gap-gutter">
+				{#each scopes as scope (scope.id)}
+					{@const allowed = allowedScopes.some((candidate) => candidate.id === scope.id)}
+					<Button
+						type="button"
+						size="chip"
+						role="radio"
+						aria-checked={scope.id === effectiveScopeId}
+						active={scope.id === effectiveScopeId}
+						disabled={!allowed}
+						title={scope.description}
+						onclick={() => chooseScope(scope.id)}
+					>
+						{scope.label}
+					</Button>
+				{/each}
+			</div>
+		</div>
+
+		<div class="flex flex-wrap items-center justify-end gap-gutter">
+			<Button
+				type="button"
+				tone="destructive"
+				disabled={!canDecide}
+				{busy}
+				onclick={() => void submit('denied')}>Deny selected</Button
+			>
+			<Button
+				type="button"
+				tone="success"
+				disabled={!canApprove}
+				{busy}
+				onclick={() => void submit('approved')}>Approve selected</Button
+			>
+		</div>
+	</fieldset>
+</div>

package/dist/ai/confirmation/confirmation-batch.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ApprovalScope, BatchedApprovalDecision, BatchedApprovalRequest } from './batch.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    ref?: HTMLDivElement | null;
+    requests: readonly BatchedApprovalRequest[];
+    scopes: readonly ApprovalScope[];
+    selectedIds?: string[];
+    scopeId?: string | null;
+    label?: string;
+    busy?: boolean;
+    onapprove?: (decision: BatchedApprovalDecision) => void | Promise<void>;
+    ondeny?: (decision: BatchedApprovalDecision) => void | Promise<void>;
+    ondecision?: (decision: BatchedApprovalDecision) => void | Promise<void>;
+}
+declare const ConfirmationBatch: import("svelte").Component<Props, {}, "ref" | "selectedIds" | "scopeId">;
+type ConfirmationBatch = ReturnType<typeof ConfirmationBatch>;
+export default ConfirmationBatch;

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

@@ -1,4 +1,6 @@
 export { default as Root, type ApprovalState } from './confirmation.svelte';
 export { default as Actions } from './confirmation-actions.svelte';
 export { default as Args } from './confirmation-args.svelte';
+export { default as Batch } from './confirmation-batch.svelte';
+export type { ApprovalScope, BatchedApprovalDecision, BatchedApprovalRequest } from './batch.js';
 export { ApprovalController, setApprovalContext, getApprovalContext, type FieldKind } from './approval.svelte.js';

package/dist/ai/confirmation/index.js

@@ -1,4 +1,5 @@
 export { default as Root } from './confirmation.svelte';
 export { default as Actions } from './confirmation-actions.svelte';
 export { default as Args } from './confirmation-args.svelte';
+export { default as Batch } from './confirmation-batch.svelte';
 export { ApprovalController, setApprovalContext, getApprovalContext } from './approval.svelte.js';

package/dist/ai/index.d.ts

@@ -19,6 +19,7 @@ export * as RuntimeFeed from './runtime-feed/index.js';
 export * as ErrorPanel from './error-panel/index.js';
 export * as RunStatus from './run-status/index.js';
 export * as Swarm from './swarm/index.js';
+export * as CodeMode from './code-mode/index.js';
 export { Response, repairStreamingMarkdown } from './response/index.js';
 export { default as ContextGauge } from './context/context.svelte';
 export { default as ModelSelector } from './model-selector/model-selector.svelte';

package/dist/ai/index.js

@@ -24,6 +24,7 @@ export * as RuntimeFeed from './runtime-feed/index.js';
 export * as ErrorPanel from './error-panel/index.js';
 export * as RunStatus from './run-status/index.js';
 export * as Swarm from './swarm/index.js';
+export * as CodeMode from './code-mode/index.js';
 export { Response, repairStreamingMarkdown } from './response/index.js';
 export { default as ContextGauge } from './context/context.svelte';
 export { default as ModelSelector } from './model-selector/model-selector.svelte';