@signal9/era-ui 2.22.0 → 2.23.0

package/dist/ai/artifact/artifact-actions.svelte

@@ -4,4 +4,6 @@
 	let { children, class: className }: { children?: Snippet; class?: string } = $props();
 </script>
 
-<div class={cn('flex shrink-0 items-center gap-(--era-gap)', className)}>{@render children?.()}</div>
+<div class={cn('flex shrink-0 items-center gap-(--era-gap)', className)}>
+	{@render children?.()}
+</div>

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

@@ -4,4 +4,6 @@
 	let { children, class: className }: { children?: Snippet; class?: string } = $props();
 </script>
 
-<div class={cn('min-h-0 flex-1 overflow-auto p-(--era-pad-md)', className)}>{@render children?.()}</div>
+<div class={cn('min-h-0 flex-1 overflow-auto p-(--era-pad-md)', className)}>
+	{@render children?.()}
+</div>

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

@@ -2,7 +2,11 @@
 	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();
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
 <div

package/dist/ai/artifact/artifact.svelte

@@ -2,7 +2,11 @@
 	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();
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
 <div

package/dist/ai/chain-of-thought/chain-of-thought-step.svelte

@@ -26,7 +26,11 @@
 		<Icon
 			class={cn(
 				'size-(--era-h-xs) shrink-0',
-				status === 'active' ? 'text-bright' : status === 'pending' ? 'text-muted opacity-50' : 'text-muted'
+				status === 'active'
+					? 'text-bright'
+					: status === 'pending'
+						? 'text-muted opacity-50'
+						: 'text-muted'
 			)}
 			aria-hidden="true"
 		/>

package/dist/ai/chain-of-thought/chain-of-thought.svelte

@@ -15,7 +15,7 @@
 		streaming?: boolean;
 		label?: string;
 		children?: Snippet;
-	class?: string;
+		class?: string;
 	} = $props();
 </script>
 

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

@@ -4,10 +4,8 @@
 	import { Switch } from '../../ui/switch/index.js';
 	import { ApprovalController, getApprovalContext } from './approval.svelte.js';
 
-	let {
-		controller,
-		class: className
-	}: { controller?: ApprovalController; class?: string } = $props();
+	let { controller, class: className }: { controller?: ApprovalController; class?: string } =
+		$props();
 
 	const ctrl = $derived(controller ?? getApprovalContext());
 
@@ -27,10 +25,12 @@
 			<div
 				class={cn(
 					'flex min-w-0 flex-col gap-(--era-gap)',
-					ctrl.isDirty(key) && 'border-s-2 border-warning ps-(--era-pad-sm)'
+					ctrl.isDirty(key) && 'border-warning border-s-2 ps-(--era-pad-sm)'
 				)}
 			>
-				<span class="text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase">{key}</span>
+				<span class="text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase"
+					>{key}</span
+				>
 
 				{#if kind === 'boolean'}
 					<Switch
@@ -51,7 +51,7 @@
 						)}
 					/>
 					{#if !ctrl.isValid(key)}
-						<span class="text-body text-destructive era-text-trim">Invalid JSON</span>
+						<span class="text-body era-text-trim text-destructive">Invalid JSON</span>
 					{/if}
 				{:else}
 					<Input

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

@@ -24,7 +24,10 @@
 >
 	<div
 		{@attach stick.content}
-		class={cn('mx-auto flex w-full max-w-2xl flex-col gap-(--era-pad-lg) p-(--era-pad-md)', className)}
+		class={cn(
+			'mx-auto flex w-full max-w-2xl flex-col gap-(--era-pad-lg) p-(--era-pad-md)',
+			className
+		)}
 		{...restProps}
 	>
 		{@render children?.()}

package/dist/ai/conversations/conversations-group.svelte

@@ -19,7 +19,7 @@
 <div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>
 	{#if label}
 		<span
-			class="px-(--era-inset-md) text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase era-text-trim-caps"
+			class="px-(--era-inset-md) text-[0.625rem] era-text-trim-caps leading-none tracking-[0.15em] text-muted uppercase"
 		>
 			{label}
 		</span>

package/dist/ai/conversations/conversations.svelte.js

@@ -46,7 +46,11 @@ export function bucketConversations(items, now) {
     const newestFirst = (a, b) => b.updatedAt - a.updatedAt;
     const groups = [];
     if (starred.length > 0) {
-        groups.push({ bucket: 'starred', label: BUCKET_LABELS.starred, items: starred.sort(newestFirst) });
+        groups.push({
+            bucket: 'starred',
+            label: BUCKET_LABELS.starred,
+            items: starred.sort(newestFirst)
+        });
     }
     for (const bucket of AGE_ORDER) {
         if (byAge[bucket].length > 0) {

package/dist/ai/error-panel/error-panel.svelte

@@ -73,7 +73,7 @@
 	{#if showDetail}
 		<!-- The whole summary row toggles the raw detail; quiet until hovered. -->
 		<Collapsible.Trigger
-			class="flex w-full min-w-0 cursor-pointer items-center gap-(--era-gap) text-body text-muted era-interactive"
+			class="flex w-full min-w-0 era-interactive cursor-pointer items-center gap-(--era-gap) text-body text-muted"
 		>
 			{@render head()}
 			<ChevronDown

package/dist/ai/inline-citation/inline-citation.svelte

@@ -36,28 +36,45 @@
 		target="_blank"
 		rel="noreferrer"
 	>
-		<Badge class="ml-1">{host(sources[0]?.href ?? '')}{sources.length > 1 ? ` +${sources.length - 1}` : ''}</Badge>
+		<Badge class="ml-1"
+			>{host(sources[0]?.href ?? '')}{sources.length > 1 ? ` +${sources.length - 1}` : ''}</Badge
+		>
 	</LinkPreview.Trigger>
 	<LinkPreview.Content class="flex w-72 flex-col gap-(--era-gap)">
 		{#if sources.length > 1}
 			<div class="flex items-center justify-between">
 				<span class="text-body text-muted tabular-nums">{index + 1} of {sources.length}</span>
 				<div class="flex gap-(--era-gap)">
-					<Button icon size="icon" aria-label="Previous source" onclick={() => (index = (index - 1 + sources.length) % sources.length)}>
+					<Button
+						icon
+						size="icon"
+						aria-label="Previous source"
+						onclick={() => (index = (index - 1 + sources.length) % sources.length)}
+					>
 						<ChevronLeft class="size-(--era-h-xs)" />
 					</Button>
-					<Button icon size="icon" aria-label="Next source" onclick={() => (index = (index + 1) % sources.length)}>
+					<Button
+						icon
+						size="icon"
+						aria-label="Next source"
+						onclick={() => (index = (index + 1) % sources.length)}
+					>
 						<ChevronRight class="size-(--era-h-xs)" />
 					</Button>
 				</div>
 			</div>
 		{/if}
 		{#if active}
-			<a href={active.href} target="_blank" rel="noreferrer" class="truncate text-body text-primary hover:underline">
+			<a
+				href={active.href}
+				target="_blank"
+				rel="noreferrer"
+				class="truncate text-body text-primary hover:underline"
+			>
 				{active.title ?? active.href}
 			</a>
 			{#if active.quote}
-				<blockquote class="border-s-2 border-divider-faded ps-(--era-gap) text-body text-muted">
+				<blockquote class="border-divider-faded border-s-2 ps-(--era-gap) text-body text-muted">
 					{active.quote}
 				</blockquote>
 			{/if}

package/dist/ai/loader.svelte

@@ -5,4 +5,7 @@
 	let { class: className }: { class?: string } = $props();
 </script>
 
-<LoaderCircle class={cn('size-(--era-h-xs) animate-spin text-muted', className)} aria-label="Loading" />
+<LoaderCircle
+	class={cn('size-(--era-h-xs) animate-spin text-muted', className)}
+	aria-label="Loading"
+/>

package/dist/ai/message/message-usage.svelte

@@ -84,7 +84,7 @@
 
 <div
 	class={cn(
-		'flex items-center gap-(--era-inset-sm) font-mono text-body tabular-nums text-muted era-text-trim',
+		'flex items-center gap-(--era-inset-sm) font-mono text-body era-text-trim text-muted tabular-nums',
 		className
 	)}
 	{...restProps}
@@ -109,7 +109,9 @@
 					class="h-auto flex-col items-start gap-(--era-inset-xxs) py-(--era-inset-xxs) whitespace-normal"
 				>
 					{#each rows as [label, value] (label)}
-						<span class="flex w-full items-center justify-between gap-(--era-inset-md) tabular-nums">
+						<span
+							class="flex w-full items-center justify-between gap-(--era-inset-md) tabular-nums"
+						>
 							<span class="text-muted">{label}</span>
 							<span>{formatTokens(value)}</span>
 						</span>

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

@@ -1,10 +1,22 @@
 <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 })}` },
+		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;

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

@@ -13,7 +13,7 @@
 
 <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)',
+		'flex h-(--era-h-md) w-full era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-bright hover:bg-(--era-highlight)',
 		className
 	)}
 >

package/dist/ai/project.js

@@ -29,7 +29,11 @@ export function projectMessages(messages) {
         const flushRow = () => {
             if (row.length === 0)
                 return;
-            blocks.push({ type: 'tool-row', key: `${message.id}:tools:${row[0].toolCallId}`, tools: row });
+            blocks.push({
+                type: 'tool-row',
+                key: `${message.id}:tools:${row[0].toolCallId}`,
+                tools: row
+            });
             row = [];
         };
         for (const [i, part] of message.parts.entries()) {
@@ -42,7 +46,11 @@ export function projectMessages(messages) {
                 case 'reasoning':
                     flushRow();
                     if (part.text)
-                        blocks.push({ type: 'reasoning', key: `${message.id}:reasoning:${i}`, text: part.text });
+                        blocks.push({
+                            type: 'reasoning',
+                            key: `${message.id}:reasoning:${i}`,
+                            text: part.text
+                        });
                     break;
                 case 'tool-call': {
                     if (seenTools.has(part.toolCallId))

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

@@ -22,7 +22,7 @@
 					<!-- md control geometry, like a Button with an icon: wall inset and
 					     icon gap both --era-inset-md, ink centered by era-text-trim. -->
 					<div
-						class="flex h-(--era-h-md) items-center gap-(--era-inset-md) rounded-(--era-rd-md) bg-(--era-surface-bg) px-(--era-inset-md) text-body text-muted shadow-(--era-shadow) era-text-trim"
+						class="flex h-(--era-h-md) items-center gap-(--era-inset-md) rounded-(--era-rd-md) bg-(--era-surface-bg) px-(--era-inset-md) text-body era-text-trim text-muted shadow-(--era-shadow)"
 					>
 						<Paperclip class="size-(--era-h-xs) shrink-0" />
 						<span class="max-w-32 truncate">{a.filename}</span>

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

@@ -2,11 +2,7 @@
 	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';
+	import { Attachments, setAttachmentsContext, type PromptMessage } from './attachments.svelte.js';
 
 	let {
 		accept = '',
@@ -88,7 +84,7 @@
 		// base fill while a button inside is hovered, so the highlight lands on the
 		// button, not the bar. (General rule for any highlighting container with
 		// interactive children.)
-		'flex w-full flex-col era-interactive rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) p-(--era-gap) text-body text-fg shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) has-[button:hover]:bg-(--era-surface-bg-elevated)',
+		'flex w-full era-interactive flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) p-(--era-gap) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) has-[button:hover]:bg-(--era-surface-bg-elevated)',
 		className
 	)}
 	{...restProps}

package/dist/ai/run-status/run-status.svelte

@@ -90,8 +90,11 @@
 >
 	<div class="flex h-(--era-h-md) items-center gap-(--era-gap) px-(--era-inset-md)">
 		<!-- leading status dot + label -->
-		<span class="flex items-center gap-(--era-inset-xxs) font-mono text-body {style.text} era-text-trim">
-			<span class={cn('size-1.5 shrink-0 rounded-full', style.dot, style.pulse && 'animate-pulse')}></span>
+		<span
+			class="flex items-center gap-(--era-inset-xxs) font-mono text-body {style.text} era-text-trim"
+		>
+			<span class={cn('size-1.5 shrink-0 rounded-full', style.dot, style.pulse && 'animate-pulse')}
+			></span>
 			{style.label}
 		</span>
 

package/dist/ai/runtime-feed/runtime-feed-item.svelte

@@ -59,6 +59,6 @@
 		{#if children}{@render children()}{:else}{text}{/if}
 	</span>
 	{#if label}
-		<span class="shrink-0 text-muted tabular-nums era-text-trim">{label}</span>
+		<span class="shrink-0 era-text-trim text-muted tabular-nums">{label}</span>
 	{/if}
 </div>

package/dist/ai/runtime-feed/runtime-feed-root.svelte

@@ -19,9 +19,7 @@
 	} = $props();
 
 	// The running-tail feel: keep only the last `limit` lines when capped.
-	const visible = $derived(
-		items && limit !== undefined ? items.slice(-limit) : (items ?? [])
-	);
+	const visible = $derived(items && limit !== undefined ? items.slice(-limit) : (items ?? []));
 </script>
 
 <div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>

package/dist/ai/structured-value/structured-value.svelte

@@ -10,7 +10,9 @@
 
 	function isPrimitive(input: unknown): input is Primitive {
 		return (
-			input === null || input === undefined || ['string', 'number', 'boolean'].includes(typeof input)
+			input === null ||
+			input === undefined ||
+			['string', 'number', 'boolean'].includes(typeof input)
 		);
 	}
 
@@ -58,12 +60,11 @@
 
 {#snippet tag(kind: 'key' | 'index', label: string)}
 	{#if kind === 'index'}
-		<span
-			class="shrink-0 text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase"
+		<span class="shrink-0 text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase"
 			>{label}</span
 		>
 	{:else}
-		<span class="shrink-0 text-muted era-text-trim">{label}:</span>
+		<span class="shrink-0 era-text-trim text-muted">{label}:</span>
 	{/if}
 {/snippet}
 
@@ -105,10 +106,10 @@
 
 <div class={cn('flex min-w-0 flex-col gap-(--era-gap) text-body', className)} {...restProps}>
 	{#if depth > MAX_DEPTH}
-		<span class="text-muted era-text-trim">…</span>
+		<span class="era-text-trim text-muted">…</span>
 	{:else if isRecord(value)}
 		{#if Object.keys(value).length === 0}
-			<span class="text-muted era-text-trim">empty</span>
+			<span class="era-text-trim text-muted">empty</span>
 		{:else}
 			{#each Object.entries(value) as [key, entry] (key)}
 				{@render row('key', key, entry)}
@@ -116,7 +117,7 @@
 		{/if}
 	{:else if Array.isArray(value)}
 		{#if value.length === 0}
-			<span class="text-muted era-text-trim">empty</span>
+			<span class="era-text-trim text-muted">empty</span>
 		{:else if isSimpleArray(value)}
 			{@render leaf(value)}
 		{:else}

package/dist/ai/suggestion/suggestions.svelte

@@ -11,7 +11,10 @@
 </script>
 
 <div
-	class={cn('scrollbar-none flex w-full flex-nowrap items-center gap-(--era-gap) overflow-x-auto', className)}
+	class={cn(
+		'scrollbar-none flex w-full flex-nowrap items-center gap-(--era-gap) overflow-x-auto',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -8,7 +8,10 @@
 
 <!-- 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)}
+	class={cn(
+		'border-divider-faded border-s-2 bg-transparent p-0 ps-(--era-pad-sm) shadow-none',
+		className
+	)}
 >
 	{@render children?.()}
 </Step.Content>

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

@@ -47,7 +47,7 @@
 	data-status={status}
 	{onclick}
 	class={cn(
-		'inline-flex h-(--era-h-xxs) min-w-0 max-w-full shrink-0 cursor-pointer era-interactive items-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) text-body text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg era-text-trim',
+		'inline-flex h-(--era-h-xxs) max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg',
 		active && 'bg-hover text-fg',
 		className
 	)}

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

@@ -23,9 +23,7 @@
 	{#if command || failed}
 		<div class="flex min-w-0 items-center gap-(--era-gap)">
 			{#if command}
-				<code class="min-w-0 flex-1 truncate font-mono text-body text-muted"
-					>{command}</code
-				>
+				<code class="min-w-0 flex-1 truncate font-mono text-body text-muted">{command}</code>
 			{/if}
 			{#if failed}
 				<Badge tone="destructive" class="ml-auto shrink-0">exit {exitCode}</Badge>

package/dist/ai/tool/tool.svelte

@@ -1,10 +1,7 @@
 <script lang="ts" module>
 	/** AI-SDK tool part lifecycle. */
 	export type ToolState =
-		| 'input-streaming'
-		| 'input-available'
-		| 'output-available'
-		| 'output-error';
+		'input-streaming' | 'input-available' | 'output-available' | 'output-error';
 </script>
 
 <script lang="ts">

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

@@ -21,7 +21,7 @@
 		className
 	)}
 >
-	<Bar size="md" class="shrink-0 rounded-none gap-(--era-gap)">
+	<Bar size="md" class="shrink-0 gap-(--era-gap) rounded-none">
 		<Button icon size="sm" aria-label="Reload" onclick={() => (nonce += 1)}>
 			<RotateCw class="size-(--era-h-xs)" />
 		</Button>

package/dist/ai/workflow/node.svelte

@@ -18,7 +18,9 @@
 >
 	<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">
+		<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}

package/dist/dev/axis-signature.d.ts

@@ -0,0 +1,17 @@
+/** What one component looks like, on the axes, at one setting. */
+export interface AxisSignature {
+    slug: string;
+    /** Unique non-zero transition/animation durations in the subtree, in ms. */
+    durations: number[];
+    /** Names of running keyframe animations (a spinner is allowed to keep spinning). */
+    animations: string[];
+    /** Unique painted box-shadows — the surface system's whole output. */
+    shadows: string[];
+    /** The font actually resolved for the component's text. */
+    fontFamily: string;
+    /** Elements whose text is being cut off — the font-swap failure mode. */
+    clipped: string[];
+    /** Interactive controls, for the hover-state sweep the harness drives. */
+    controls: number;
+}
+export declare function captureSignatures(root?: ParentNode): AxisSignature[];

package/dist/dev/axis-signature.js

@@ -0,0 +1,87 @@
+/*
+ * Axis signatures — the fingerprint a component leaves at one axis setting.
+ *
+ * Every audit in ./audit answers a question about a SINGLE render: is this gap
+ * even, is this radius concentric, does this panel have a shadow. But the most
+ * important promises era makes are about the axes themselves, and they are
+ * comparative:
+ *
+ *   MOTION   does this component actually respond to instant / normal / extra —
+ *            freezing at one, moving at the next, and moving MORE at the third?
+ *   SURFACE  does its chrome actually change between flat / glass / bevel /
+ *            cartoon, or does it render the same rectangle on all four?
+ *   FONT     does it survive mono / sans / serif without clipping its own text?
+ *
+ * None of those can be answered by looking at one DOM. A component that hardcodes
+ * `duration-150` looks perfectly correct at data-motion="normal" — it is only
+ * wrong RELATIVE to the other two levels, where it fails to change. So the check
+ * has to be: render at each level, fingerprint what should have moved, and diff.
+ *
+ * This module captures the fingerprint. The comparison lives in the harness that
+ * drives the renders (tests/visual/axis-conformance.spec.ts), because only it can
+ * visit more than one axis at a time.
+ */
+const num = (v) => v
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => (s.endsWith('ms') ? parseFloat(s) : parseFloat(s) * 1000))
+    .filter((n) => !Number.isNaN(n) && n > 0);
+const uniq = (xs) => [...new Set(xs)];
+/**
+ * Is this element's text being cut off by its own box?
+ *
+ * The font axis is the one that breaks silently: a serif or sans face is WIDER
+ * than the mono default at the same size, so a label that fits in mono can
+ * overflow its control in serif — and because the control clips, the text simply
+ * disappears rather than reflowing. Nothing in a single-font render can predict
+ * that; you have to swap the font and look.
+ */
+function isClipped(el) {
+    const s = getComputedStyle(el);
+    if (!/hidden|clip/.test(s.overflowX))
+        return false;
+    if (!el.textContent?.trim())
+        return false;
+    // A visually-hidden element (sr-only) is a 1px box with its overflow clipped —
+    // that IS the technique, not a defect. It reports a wildly overflowing
+    // scrollWidth by construction (the calendar's screen-reader heading measured
+    // 144px of text in a 1px box), so exclude the degenerate boxes.
+    if (el.clientWidth <= 1 || el.clientHeight <= 1)
+        return false;
+    // 1px of slack: sub-pixel text metrics routinely round a hair over.
+    return el.scrollWidth > el.clientWidth + 1;
+}
+export function captureSignatures(root = document) {
+    const out = [];
+    for (const host of root.querySelectorAll('[data-specimen]')) {
+        const slug = host.getAttribute('data-specimen') ?? '';
+        const durations = [];
+        const animations = [];
+        const shadows = [];
+        const clipped = [];
+        let controls = 0;
+        for (const el of host.querySelectorAll('*')) {
+            const s = getComputedStyle(el);
+            durations.push(...num(s.transitionDuration), ...num(s.animationDuration));
+            if (s.animationName && s.animationName !== 'none')
+                animations.push(s.animationName);
+            if (s.boxShadow && s.boxShadow !== 'none')
+                shadows.push(s.boxShadow);
+            if (isClipped(el))
+                clipped.push(`${el.tagName.toLowerCase()}"${el.textContent?.trim().slice(0, 24)}"`);
+            if (el.matches('button, input, [role="switch"], [role="checkbox"], a[href]'))
+                controls++;
+        }
+        out.push({
+            slug,
+            durations: uniq(durations).sort((a, b) => a - b),
+            animations: uniq(animations).sort(),
+            shadows: uniq(shadows).sort(),
+            fontFamily: getComputedStyle(host).fontFamily,
+            clipped: uniq(clipped),
+            controls
+        });
+    }
+    return out;
+}

package/dist/dev/index.d.ts

@@ -1,3 +1,4 @@
 export * from './audit/index.js';
 export * from './measure.js';
+export * from './axis-signature.js';
 export { default as AuditOverlay } from './audit-overlay.svelte';

package/dist/dev/index.js

@@ -1,3 +1,4 @@
 export * from './audit/index.js';
 export * from './measure.js';
+export * from './axis-signature.js';
 export { default as AuditOverlay } from './audit-overlay.svelte';

package/dist/os/window.svelte

@@ -101,7 +101,7 @@
 					// mouse events, so the browser's autoscroll never engages.
 					if (e.button === 1) e.preventDefault();
 					armed =
-							e.button === 2 && win.minimizable ? 'minimize' : e.button === 1 ? 'maximize' : null;
+						e.button === 2 && win.minimizable ? 'minimize' : e.button === 1 ? 'maximize' : null;
 				}}
 				onpointerup={(e: PointerEvent) => {
 					if (e.button === 2 && armed === 'minimize') wm.minimize(win.id);

package/dist/styles/typography.css

@@ -14,7 +14,15 @@
 
 [data-font='mono'],
 [data-font='mono'] * {
-	font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace) !important;
+	font-family: var(
+		--font-mono,
+		ui-monospace,
+		'SF Mono',
+		Menlo,
+		Consolas,
+		'Liberation Mono',
+		monospace
+	) !important;
 }
 
 [data-font='sans'],

package/dist/ui/button/button.svelte

@@ -38,10 +38,20 @@
 	const effectiveDisabled = $derived(disabled || loading);
 </script>
 
+<!--
+	`active` is the latched state — a held-down key. Every OTHER latched control in
+	the library (Toggle, Tabs, ToggleGroup, Switch) announces that with
+	data-state="on"; Button expressed it through classes alone, so nothing could
+	SEE it: not a consumer styling off the state, not a test, not an audit. The
+	hover sweep is what surfaced this — a latched button correctly shows no hover
+	delta (it must keep its pressed face), but with no attribute to read, that is
+	indistinguishable from a control with no hover state at all.
+-->
 <Button.Root
 	bind:ref
 	disabled={effectiveDisabled}
 	aria-busy={loading || undefined}
+	data-state={active ? 'on' : undefined}
 	class={cn(buttonVariants({ variant, tone, size, icon, active }), className)}
 	{...restProps}
 >

package/dist/ui/card/card.svelte

@@ -93,7 +93,9 @@
 {#snippet body()}
 	{#if sectioned}
 		{#if header}
-			<div class="border-b border-divider-faded px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md) text-bright">
+			<div
+				class="border-b border-divider-faded px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md) text-bright"
+			>
 				{@render header()}
 			</div>
 		{/if}

package/dist/ui/command/command-input.svelte

@@ -20,7 +20,7 @@
 	{@const Icon = icon}
 	<div
 		class={cn(
-			'flex h-(--era-h-md) w-full era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) era-text-trim',
+			'flex h-(--era-h-md) w-full era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body era-text-trim text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight)',
 			className
 		)}
 	>

package/dist/ui/command/command-item.svelte

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-hover era-text-trim',
+		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body era-text-trim text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-hover',
 		className
 	)}
 	{...restProps}

package/dist/ui/command/command-link-item.svelte

@@ -8,7 +8,7 @@
 <Command.LinkItem
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-fg no-underline outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-hover era-text-trim',
+		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body era-text-trim text-fg no-underline outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-hover',
 		className
 	)}
 	{...restProps}

package/dist/ui/command-bar/command-bar.svelte

@@ -214,7 +214,7 @@
 			role="listbox"
 			tabindex="-1"
 			aria-label="Commands"
-			class="glass-blur absolute top-full left-0 z-50 max-h-64 w-full overflow-x-hidden overflow-y-auto bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg)"
+			class="absolute top-full left-0 z-50 max-h-64 w-full overflow-x-hidden overflow-y-auto bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur"
 			onmousedown={(e) => e.preventDefault()}
 		>
 			{#if !filtered.length}
@@ -234,7 +234,7 @@
 						tabindex={-1}
 						aria-selected={i === selectedIndex}
 						class={cn(
-							'flex h-(--era-h-md) cursor-default era-text-trim items-center gap-(--era-gap) px-(--era-inset-md) text-body whitespace-nowrap',
+							'flex h-(--era-h-md) cursor-default items-center gap-(--era-gap) px-(--era-inset-md) text-body era-text-trim whitespace-nowrap',
 							i === selectedIndex ? 'bg-3 text-bright' : 'text-fg'
 						)}
 						onclick={() => choose(item)}

package/dist/ui/copy-button/copy-button.svelte

@@ -92,6 +92,8 @@
 	<span class="relative block size-(--era-h-xs) shrink-0">
 		<IdleIcon class={cn(iconBase, status === 'idle' ? iconIn : iconOut)} />
 		<SuccessIcon class={cn(iconBase, 'text-success', status === 'success' ? iconIn : iconOut)} />
-		<FailureIcon class={cn(iconBase, 'text-destructive', status === 'failure' ? iconIn : iconOut)} />
+		<FailureIcon
+			class={cn(iconBase, 'text-destructive', status === 'failure' ? iconIn : iconOut)}
+		/>
 	</span>
 </Button>

package/dist/ui/input/input.svelte

@@ -16,7 +16,7 @@
 	bind:this={ref}
 	bind:value
 	class={cn(
-		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight) era-text-trim',
+		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body era-text-trim text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}

package/dist/ui/kv/kv.svelte

@@ -21,7 +21,7 @@
 <span
 	bind:this={ref}
 	class={cn(
-		'inline-flex h-(--era-h-xxs) items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body leading-none shadow-(--era-shadow) era-text-trim',
+		'inline-flex h-(--era-h-xxs) items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body era-text-trim leading-none shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/pane/pane-close.svelte

@@ -18,6 +18,14 @@
      movement and suppresses the trailing click after a real drag). Its natural
      rd-xs is what the PANE's corner radius conforms to (rd-sm — see Pane.Root),
      not the other way round. -->
-<Button bind:ref icon size="icon" tone="destructive" aria-label="Close" class={className} {...restProps}>
+<Button
+	bind:ref
+	icon
+	size="icon"
+	tone="destructive"
+	aria-label="Close"
+	class={className}
+	{...restProps}
+>
 	<X class="size-(--era-h-xs)" />
 </Button>

package/dist/ui/select/select-trigger.svelte

@@ -14,7 +14,7 @@
 <Select.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed) era-text-trim',
+		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body era-text-trim text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}

package/dist/ui/step/step-summary.svelte

@@ -26,7 +26,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full min-w-0 cursor-pointer era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg era-text-trim',
+		'flex h-(--era-h-md) w-full min-w-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg',
 		className
 	)}
 	{...restProps}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "2.22.0",
+	"version": "2.23.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",

package/skill/SKILL.md

@@ -34,13 +34,13 @@ to ~13px, silently shrinking every rem-derived token).
 
 ## The tier ladder
 
-| Tier  | Height token   | Radius token    | Use for                              |
-| ----- | -------------- | --------------- | ------------------------------------ |
-| `xs`  | `--era-h-xs`   | `--era-rd-xs`   | icons (THE icon size), switch thumbs |
-| `xxs` | `--era-h-xxs`  | `--era-rd-xxs`  | pills nested inside md (badge/chip in a button) |
-| `sm`  | `--era-h-sm`   | `--era-rd-sm`   | standalone pills, switch tracks, KV  |
-| `md`  | `--era-h-md`   | `--era-rd-md`   | buttons, inputs, selects, triggers   |
-| `lg`  | `--era-h-lg`   | `--era-rd-lg`   | bars, containers, dialog headers     |
+| Tier  | Height token  | Radius token   | Use for                                         |
+| ----- | ------------- | -------------- | ----------------------------------------------- |
+| `xs`  | `--era-h-xs`  | `--era-rd-xs`  | icons (THE icon size), switch thumbs            |
+| `xxs` | `--era-h-xxs` | `--era-rd-xxs` | pills nested inside md (badge/chip in a button) |
+| `sm`  | `--era-h-sm`  | `--era-rd-sm`  | standalone pills, switch tracks, KV             |
+| `md`  | `--era-h-md`  | `--era-rd-md`  | buttons, inputs, selects, triggers              |
+| `lg`  | `--era-h-lg`  | `--era-rd-lg`  | bars, containers, dialog headers                |
 
 Usage: `h-(--era-h-md)`, `rounded-(--era-rd-md)`, icons `size-(--era-h-xs)`.
 Always the paren shorthand — never `h-[var(--era-h-md)]`.
@@ -119,8 +119,8 @@ motion-axis-aware for free.
 
 ```svelte
 <script lang="ts">
-  import { Button, Badge, OS, AI } from '@sig-nine/era-ui';
-  import * as Select from '@sig-nine/era-ui'; // namespaced parts: Select.Root…
+	import { Button, Badge, OS, AI } from '@sig-nine/era-ui';
+	import * as Select from '@sig-nine/era-ui'; // namespaced parts: Select.Root…
 </script>
 ```