@signal9/era-ui 2.21.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/audit/audits/_helpers.d.ts

@@ -27,3 +27,22 @@ export declare function siblingGap(a: HTMLElement, b: HTMLElement): number;
 export declare function wallGap(container: HTMLElement, first: HTMLElement): number;
 export declare function isFlex(style: CSSStyleDeclaration): boolean;
 export declare function isHorizontalFlex(style: CSSStyleDeclaration): boolean;
+export declare function tokenPx(el: HTMLElement, name: string): number;
+/** The five tier heights, in px, in the element's density context. */
+export declare function tiers(el: HTMLElement): {
+    name: string;
+    px: number;
+}[];
+/**
+ * Does this element paint chrome of its own — a fill, a border, or a shadow?
+ *
+ * The distinction decides whether a geometry rule is OBSERVABLE. A radius on a
+ * box that paints nothing is invisible, so holding it to the concentricity or
+ * single-glyph rules reports a defect nobody can see (the ":" literal in a time
+ * field is exactly this: a bare text span that happens to carry a radius).
+ */
+export declare function paintsChrome(el: HTMLElement): boolean;
+/** The motion axis's own duration, in ms, as the element sees it (0 at data-motion="instant"). */
+export declare function eraDurationMs(el: HTMLElement): number;
+/** Parse a computed time list ("0.15s, 0s") to ms. */
+export declare function timesMs(value: string): number[];

package/dist/dev/audit/audits/_helpers.js

@@ -46,3 +46,71 @@ export function isFlex(style) {
 export function isHorizontalFlex(style) {
     return isFlex(style) && !style.flexDirection.startsWith('column');
 }
+/**
+ * Resolve an --era-* length token to px, in the element's own context.
+ *
+ * Every tier token is a calc() over --era-sp, and a computed custom property
+ * keeps its calc() UNEVALUATED — getComputedStyle hands back the expression, not
+ * a number. The only way to learn what a tier is actually worth is to make the
+ * browser lay something out at that height and measure it.
+ *
+ * Context matters: density can be scoped (a pinned-dense Pane handle inside a
+ * spacious page), so the probe is appended to the element's own density host,
+ * never to <html>. The cache is keyed by the host's --era-sp, so it invalidates
+ * itself the moment the density axis flips.
+ */
+const tokenCache = new WeakMap();
+export function tokenPx(el, name) {
+    const host = (el.closest('[data-mode]') ?? document.documentElement);
+    const sp = getComputedStyle(host).getPropertyValue('--era-sp').trim();
+    const key = `${name}@${sp}`;
+    let cache = tokenCache.get(host);
+    if (!cache)
+        tokenCache.set(host, (cache = new Map()));
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const probe = document.createElement('div');
+    probe.style.cssText = `position:absolute;visibility:hidden;height:var(${name})`;
+    host.appendChild(probe);
+    const px = probe.getBoundingClientRect().height;
+    probe.remove();
+    cache.set(key, px);
+    return px;
+}
+/** The five tier heights, in px, in the element's density context. */
+export function tiers(el) {
+    return ['--era-h-xs', '--era-h-xxs', '--era-h-sm', '--era-h-md', '--era-h-lg'].map((name) => ({
+        name,
+        px: tokenPx(el, name)
+    }));
+}
+/**
+ * Does this element paint chrome of its own — a fill, a border, or a shadow?
+ *
+ * The distinction decides whether a geometry rule is OBSERVABLE. A radius on a
+ * box that paints nothing is invisible, so holding it to the concentricity or
+ * single-glyph rules reports a defect nobody can see (the ":" literal in a time
+ * field is exactly this: a bare text span that happens to carry a radius).
+ */
+export function paintsChrome(el) {
+    const s = getComputedStyle(el);
+    const transparentBg = s.backgroundColor === 'transparent' || /,\s*0\)$/.test(s.backgroundColor);
+    return !transparentBg || s.boxShadow !== 'none' || parseFloat(s.borderTopWidth) > 0;
+}
+/** The motion axis's own duration, in ms, as the element sees it (0 at data-motion="instant"). */
+export function eraDurationMs(el) {
+    const raw = getComputedStyle(el).getPropertyValue('--era-duration').trim();
+    if (!raw)
+        return 0;
+    return raw.endsWith('ms') ? parseFloat(raw) : parseFloat(raw) * 1000;
+}
+/** Parse a computed time list ("0.15s, 0s") to ms. */
+export function timesMs(value) {
+    return value
+        .split(',')
+        .map((v) => v.trim())
+        .filter(Boolean)
+        .map((v) => (v.endsWith('ms') ? parseFloat(v) : parseFloat(v) * 1000))
+        .filter((n) => !Number.isNaN(n));
+}

package/dist/dev/audit/audits/collapsed-text-trim.d.ts

@@ -0,0 +1,2 @@
+import type { Audit } from '../types.js';
+export declare const collapsedTextTrim: Audit;