@signal9/era-ui 8.0.0 → 9.0.0

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

@@ -6,7 +6,7 @@
 
 <!-- size="xxs", the close-affordance tier (Pane.Close, the chip dismiss): an
      18px hit target whose tier draws the 12px dismiss ink by itself. The <X>
-     used to carry size-(--era-h-xs) — a class the Button variant's [&_svg]
+     used to carry size-(--era-h-icon) — a class the Button variant's [&_svg]
      selector outranks, so it claimed 14px while 10 shipped. -->
 <Button icon size="xxs" aria-label="Close" {onclick}>
 	<X />

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

@@ -4,6 +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)}>
+<div class={cn('min-h-0 flex-1 overflow-auto p-(--era-pad-card)', className)}>
 	{@render children?.()}
 </div>

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

@@ -11,7 +11,7 @@
 
 <div
 	class={cn(
-		'flex h-(--era-h-lg) shrink-0 items-center justify-between gap-(--era-gap) border-b border-divider-faded px-(--era-pad-sm)',
+		'flex h-(--era-h-bar) shrink-0 items-center justify-between gap-(--era-gap) border-b border-divider-faded px-(--era-pad-panel)',
 		className
 	)}
 	{...restProps}

package/dist/ai/artifact/artifact.svelte

@@ -11,7 +11,7 @@
 
 <div
 	class={cn(
-		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
+		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
 		className
 	)}
 	{...restProps}

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

@@ -25,7 +25,7 @@
 	<div class="flex flex-col items-center">
 		<Icon
 			class={cn(
-				'size-(--era-h-xs) shrink-0',
+				'size-(--era-h-icon) shrink-0',
 				status === 'active'
 					? 'text-bright'
 					: status === 'pending'

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

@@ -21,7 +21,7 @@
 
 <Step.Root status={streaming ? 'running' : 'done'} bind:open class={cn(className)}>
 	<Step.Summary>
-		<Brain class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+		<Brain class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 		{label}
 	</Step.Summary>
 	<Step.Content class="bg-transparent p-0 shadow-none">

package/dist/ai/checkpoint.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div class={cn('flex w-full items-center gap-(--era-gap) text-muted', className)}>
-	<Bookmark class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Bookmark class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	<Button variant="link" size="sm" onclick={onRestore}>
 		{#if children}{@render children()}{:else}{label}{/if}
 	</Button>

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

@@ -25,7 +25,7 @@
 			<div
 				class={cn(
 					'flex min-w-0 flex-col gap-(--era-gap)',
-					ctrl.isDirty(key) && 'border-warning border-s-2 ps-(--era-pad-sm)'
+					ctrl.isDirty(key) && 'border-warning border-s-2 ps-(--era-pad-panel)'
 				)}
 			>
 				<span class="text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase"
@@ -46,7 +46,7 @@
 						}}
 						spellcheck={false}
 						class={cn(
-							'min-h-(--era-h-lg) font-mono text-body',
+							'min-h-(--era-h-bar) font-mono text-body',
 							!ctrl.isValid(key) && 'border border-destructive'
 						)}
 					/>

package/dist/ai/confirmation/confirmation.svelte

@@ -19,17 +19,17 @@
 
 <div
 	class={cn(
-		'flex min-w-0 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow)',
+		'flex min-w-0 flex-col gap-(--era-gap) rounded-(--era-rd-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
 		className
 	)}
 >
 	<div class="flex items-center gap-(--era-gap) text-body">
 		{#if approval === 'requested'}
-			<ShieldQuestion class="size-(--era-h-xs) shrink-0 text-warning" aria-hidden="true" />
+			<ShieldQuestion class="size-(--era-h-icon) shrink-0 text-warning" aria-hidden="true" />
 		{:else if approval === 'approved'}
-			<CircleCheck class="size-(--era-h-xs) shrink-0 text-success" aria-hidden="true" />
+			<CircleCheck class="size-(--era-h-icon) shrink-0 text-success" aria-hidden="true" />
 		{:else}
-			<CircleX class="size-(--era-h-xs) shrink-0 text-destructive" aria-hidden="true" />
+			<CircleX class="size-(--era-h-icon) shrink-0 text-destructive" aria-hidden="true" />
 		{/if}
 		<div class="min-w-0 flex-1 text-fg">{@render children?.()}</div>
 	</div>

package/dist/ai/context/context.svelte

@@ -25,7 +25,7 @@
 <Popover.Root>
 	<Popover.Trigger size="sm" class={cn('gap-(--era-gap) tabular-nums', className)}>
 		{Math.round(percent * 100)}%
-		<svg viewBox="0 0 24 24" class="size-(--era-h-xs) -rotate-90" aria-hidden="true">
+		<svg viewBox="0 0 24 24" class="size-(--era-h-icon) -rotate-90" aria-hidden="true">
 			<circle cx="12" cy="12" r="10" fill="none" stroke="var(--color-3)" stroke-width="3" />
 			<circle
 				cx="12"

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

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

package/dist/ai/conversation/conversation-empty-state.svelte

@@ -20,7 +20,7 @@
 
 <div
 	class={cn(
-		'flex flex-1 flex-col items-center justify-center gap-(--era-gap) p-(--era-pad-lg) text-center',
+		'flex flex-1 flex-col items-center justify-center gap-(--era-gap) p-(--era-pad-content) text-center',
 		className
 	)}
 	{...restProps}

package/dist/ai/conversation/conversation-scroll-button.svelte

@@ -11,7 +11,7 @@
 
 {#if !stick.pinned}
 	<div
-		class={cn('absolute bottom-(--era-pad-sm) left-1/2 z-10 -translate-x-1/2', className)}
+		class={cn('absolute bottom-(--era-pad-panel) left-1/2 z-10 -translate-x-1/2', className)}
 		transition:eraFly={{ y: 8 }}
 	>
 		<Button
@@ -21,7 +21,7 @@
 			class="rounded-full shadow-(--era-shadow-lg)"
 			onclick={() => stick.repin()}
 		>
-			<ArrowDown class="size-(--era-h-xs)" />
+			<ArrowDown class="size-(--era-h-icon)" />
 		</Button>
 	</div>
 {/if}

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] era-text-trim-caps leading-none tracking-[0.15em] text-muted uppercase"
+			class="px-(--era-inset-control) text-[0.625rem] era-text-trim-caps leading-none tracking-[0.15em] text-muted uppercase"
 		>
 			{label}
 		</span>

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

@@ -129,7 +129,7 @@
 <div
 	data-active={active || undefined}
 	class={cn(
-		// The trailing buttons are xxs-tier icon buttons: h-xxs box + h-xs glyph =
+		// The trailing buttons are xxs-tier icon buttons: h-pill box + h-icon glyph =
 		// 2px of air around the glyph (xs/icon would hug it flush — density.css:
 		// "xs IS the icon tier"). pr is their concentric inset: a button's rounded
 		// box nests in the row's rd-md corner only when its right gap equals
@@ -144,7 +144,7 @@
 		// a fast pass down the list into a smear of half-lit rows. This row was the
 		// only one that animated. It also picks up the material half of the
 		// highlight the others carry, so hover reads on bevel and glass too.
-		'group/row relative flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) pr-(--era-xxs-inset-md) pl-(--era-inset-md) text-body',
+		'group/row relative flex h-(--era-h-control) items-center gap-(--era-gap) rounded-(--era-rd-control) pr-(--era-pill-inset-control) pl-(--era-inset-control) text-body',
 		active
 			? 'bg-hover text-bright'
 			: 'text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) has-[[data-rail]:hover]:bg-transparent has-[[data-rail]:hover]:shadow-none',
@@ -157,7 +157,7 @@
 	{#if leading}
 		{@render leading()}
 	{:else}
-		<MessageSquare class="size-(--era-h-xs) shrink-0 text-muted" aria-hidden="true" />
+		<MessageSquare class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
 	{/if}
 
 	{#if status}
@@ -208,12 +208,12 @@
 			aria-pressed={starred}
 			onclick={toggleStar}
 		>
-			<Star class={cn('size-(--era-h-xs)', starred && 'fill-warning text-warning')} />
+			<Star class={cn('size-(--era-h-icon)', starred && 'fill-warning text-warning')} />
 		</Button>
 
 		{#if showCancel}
 			<Button icon size="xxs" aria-label="Cancel generation" onclick={() => onCancel?.()}>
-				<X class="size-(--era-h-xs)" />
+				<X class="size-(--era-h-icon)" />
 			</Button>
 		{/if}
 
@@ -226,9 +226,9 @@
 			onclick={onDeleteClick}
 		>
 			{#if armed}
-				<Check class="size-(--era-h-xs)" />
+				<Check class="size-(--era-h-icon)" />
 			{:else}
-				<Trash2 class="size-(--era-h-xs)" />
+				<Trash2 class="size-(--era-h-icon)" />
 			{/if}
 		</Button>
 	</div>

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

@@ -54,9 +54,9 @@
 
 {#snippet head()}
 	{#if info.tone === 'warning'}
-		<TriangleAlert class="size-(--era-h-xs) shrink-0 text-warning" aria-hidden="true" />
+		<TriangleAlert class="size-(--era-h-icon) shrink-0 text-warning" aria-hidden="true" />
 	{:else}
-		<CircleX class="size-(--era-h-xs) shrink-0 text-destructive" aria-hidden="true" />
+		<CircleX class="size-(--era-h-icon) shrink-0 text-destructive" aria-hidden="true" />
 	{/if}
 	<span class="min-w-0 flex-1 truncate text-fg">{summary}</span>
 {/snippet}
@@ -65,7 +65,7 @@
 	bind:open
 	data-tone={info.tone}
 	class={cn(
-		'group/error flex min-w-0 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow)',
+		'group/error flex min-w-0 flex-col gap-(--era-gap) rounded-(--era-rd-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}
@@ -77,7 +77,7 @@
 		>
 			{@render head()}
 			<ChevronDown
-				class="size-(--era-h-xs) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/error:rotate-180"
+				class="size-(--era-h-icon) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/error:rotate-180"
 				aria-hidden="true"
 			/>
 		</Collapsible.Trigger>

package/dist/ai/image.svelte

@@ -14,6 +14,6 @@
 <img
 	src="data:{mediaType};base64,{base64}"
 	{alt}
-	class={cn('max-w-full rounded-(--era-rd-md) shadow-(--era-shadow)', className)}
+	class={cn('max-w-full rounded-(--era-rd-control) shadow-(--era-shadow)', className)}
 	{...restProps}
 />

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

@@ -51,7 +51,7 @@
 						aria-label="Previous source"
 						onclick={() => (index = (index - 1 + sources.length) % sources.length)}
 					>
-						<ChevronLeft class="size-(--era-h-xs)" />
+						<ChevronLeft class="size-(--era-h-icon)" />
 					</Button>
 					<Button
 						icon
@@ -59,7 +59,7 @@
 						aria-label="Next source"
 						onclick={() => (index = (index + 1) % sources.length)}
 					>
-						<ChevronRight class="size-(--era-h-xs)" />
+						<ChevronRight class="size-(--era-h-icon)" />
 					</Button>
 				</div>
 			</div>

package/dist/ai/loader.svelte

@@ -6,6 +6,6 @@
 </script>
 
 <LoaderCircle
-	class={cn('size-(--era-h-xs) animate-spin text-muted', className)}
+	class={cn('size-(--era-h-icon) animate-spin text-muted', className)}
 	aria-label="Loading"
 />

package/dist/ai/message/message-branch-selector.svelte

@@ -13,13 +13,13 @@
 {#if ctrl.total > 1}
 	<ButtonGroup class={cn(className)}>
 		<Button icon size="sm" aria-label="Previous version" onclick={() => ctrl.previous()}>
-			<ChevronLeft class="size-(--era-h-xs)" />
+			<ChevronLeft class="size-(--era-h-icon)" />
 		</Button>
-		<span class="flex items-center px-(--era-inset-sm) text-body text-muted tabular-nums">
+		<span class="flex items-center px-(--era-inset-chip) text-body text-muted tabular-nums">
 			{ctrl.current + 1} of {ctrl.total}
 		</span>
 		<Button icon size="sm" aria-label="Next version" onclick={() => ctrl.next()}>
-			<ChevronRight class="size-(--era-h-xs)" />
+			<ChevronRight class="size-(--era-h-icon)" />
 		</Button>
 	</ButtonGroup>
 {/if}

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

@@ -17,7 +17,7 @@
 <div
 	class={cn(
 		'min-w-0 text-body leading-body text-fg',
-		'group-data-[role=user]/message:max-w-[80%] group-data-[role=user]/message:rounded-(--era-rd-md) group-data-[role=user]/message:bg-(--era-surface-bg-elevated) group-data-[role=user]/message:p-(--era-pad-sm) group-data-[role=user]/message:whitespace-pre-wrap group-data-[role=user]/message:shadow-(--era-shadow)',
+		'group-data-[role=user]/message:max-w-[80%] group-data-[role=user]/message:rounded-(--era-rd-control) group-data-[role=user]/message:bg-(--era-surface-bg-elevated) group-data-[role=user]/message:p-(--era-pad-panel) group-data-[role=user]/message:whitespace-pre-wrap group-data-[role=user]/message:shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

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 era-text-trim text-muted tabular-nums',
+		'flex items-center gap-(--era-inset-chip) font-mono text-body era-text-trim text-muted tabular-nums',
 		className
 	)}
 	{...restProps}
@@ -103,14 +103,14 @@
 					class="inline-flex items-center text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg"
 					aria-label="Context window breakdown"
 				>
-					<Info class="size-(--era-h-xs)" aria-hidden="true" />
+					<Info class="size-(--era-h-icon)" aria-hidden="true" />
 				</Tooltip.Trigger>
 				<Tooltip.Content
-					class="h-auto flex-col items-start gap-(--era-inset-xxs) py-(--era-inset-xxs) whitespace-normal"
+					class="h-auto flex-col items-start gap-(--era-inset-pill) py-(--era-inset-pill) whitespace-normal"
 				>
 					{#each rows as [label, value] (label)}
 						<span
-							class="flex w-full items-center justify-between gap-(--era-inset-md) tabular-nums"
+							class="flex w-full items-center justify-between gap-(--era-inset-control) tabular-nums"
 						>
 							<span class="text-muted">{label}</span>
 							<span>{formatTokens(value)}</span>

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

@@ -43,7 +43,7 @@
 										<img
 											src="https://models.dev/logos/{m.provider}.svg"
 											alt=""
-											class="size-(--era-h-xs) shrink-0 dark:invert"
+											class="size-(--era-h-icon) shrink-0 dark:invert"
 										/>
 									{/if}
 									<span class="truncate">{m.name}</span>

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

@@ -38,14 +38,14 @@
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger class={cn(className)}>
 		Open in chat
-		<ChevronDown class="size-(--era-h-xs)" />
+		<ChevronDown class="size-(--era-h-icon)" />
 	</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" />
+				<ExternalLink class="size-(--era-h-icon) text-muted" />
 				{providers[id].title}
 			</DropdownMenu.Item>
 		{/each}

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

@@ -7,7 +7,7 @@
 </script>
 
 <Collapsible.Content
-	class={cn('flex flex-col gap-(--era-gap) overflow-hidden p-(--era-inset-md)', className)}
+	class={cn('flex flex-col gap-(--era-gap) overflow-hidden p-(--era-inset-control)', className)}
 >
 	{@render children?.()}
 </Collapsible.Content>

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

@@ -13,10 +13,10 @@
 
 <Collapsible.Trigger
 	class={cn(
-		'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)',
+		'flex h-(--era-h-control) w-full era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) 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" />
+	<ChevronsUpDown class="ml-auto size-(--era-h-icon) shrink-0 text-muted" />
 </Collapsible.Trigger>

package/dist/ai/plan/plan.svelte

@@ -15,7 +15,7 @@
 	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)',
+		'group/plan flex flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
 		className
 	)}
 >

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

@@ -8,5 +8,5 @@
 </script>
 
 <Button icon size="default" aria-label={label} onclick={() => attachments.openFileDialog()}>
-	<Plus class="size-(--era-h-xs)" />
+	<Plus class="size-(--era-h-icon)" />
 </Button>

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

@@ -16,15 +16,15 @@
 					<img
 						src={a.previewUrl}
 						alt={a.filename}
-						class="size-(--era-h-lg) rounded-(--era-rd-lg) object-cover shadow-(--era-shadow)"
+						class="size-(--era-h-bar) rounded-(--era-rd-bar) object-cover shadow-(--era-shadow)"
 					/>
 				{:else}
 					<!-- md control geometry, like a Button with an icon: wall inset and
-					     icon gap both --era-inset-md, ink centered by era-text-trim. -->
+					     icon gap both --era-inset-control, 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 era-text-trim text-muted shadow-(--era-shadow)"
+						class="flex h-(--era-h-control) items-center gap-(--era-inset-control) rounded-(--era-rd-control) bg-(--era-surface-bg) px-(--era-inset-control) text-body era-text-trim text-muted shadow-(--era-shadow)"
 					>
-						<Paperclip class="size-(--era-h-xs) shrink-0" />
+						<Paperclip class="size-(--era-h-icon) shrink-0" />
 						<span class="max-w-32 truncate">{a.filename}</span>
 					</div>
 				{/if}
@@ -36,7 +36,7 @@
 					icon
 					size="icon"
 					aria-label="Remove {a.filename}"
-					class="absolute -top-(--era-gap) -right-(--era-gap) opacity-0 shadow-(--era-shadow) group-hover/att:opacity-100 focus-visible:opacity-100 [&_svg]:size-(--era-icon-xxs)"
+					class="absolute -top-(--era-gap) -right-(--era-gap) opacity-0 shadow-(--era-shadow) group-hover/att:opacity-100 focus-visible:opacity-100 [&_svg]:size-(--era-glyph-pill)"
 					onclick={() => attachments.remove(a.id)}
 				>
 					<X />

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

@@ -40,10 +40,10 @@
 	}}
 >
 	{#if status === 'submitted'}
-		<LoaderCircle class="size-(--era-h-xs) animate-spin" />
+		<LoaderCircle class="size-(--era-h-icon) animate-spin" />
 	{:else if status === 'streaming'}
-		<Square class="size-[calc(var(--era-h-xs)*0.75)]" fill="currentColor" />
+		<Square class="size-[calc(var(--era-h-icon)*0.75)]" fill="currentColor" />
 	{:else}
-		<ArrowUp class="size-(--era-h-xs)" />
+		<ArrowUp class="size-(--era-h-icon)" />
 	{/if}
 </Button>

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

@@ -40,10 +40,10 @@
      (only the submit path is gated).
 
      Geometry: the single-line state must measure exactly like an md control
-     (Input = h-md, px-(--era-inset-md), text-body, text-fg) so the toolbar
+     (Input = h-control, px-(--era-inset-control), text-body, text-fg) so the toolbar
      row of md buttons beside it sits on ONE tier with even gaps. Padding
      does the vertical centering here (a textarea can't flex-center), so
-     py = (h-md − 1lh)/2 — exact at every density and any leading. Input's
+     py = (h-control − 1lh)/2 — exact at every density and any leading. Input's
      era-text-trim doesn't apply: it trims the very line box this padding is
      derived from and would top-anchor the text against min-h. -->
 <textarea
@@ -58,7 +58,7 @@
 	onkeydown={onKeydown}
 	onpaste={onPaste}
 	class={cn(
-		'field-sizing-content max-h-48 min-h-(--era-h-md) w-full resize-none bg-transparent px-(--era-inset-md) py-[calc((var(--era-h-md)-1lh)/2)] text-body leading-body text-fg outline-none placeholder:text-muted',
+		'field-sizing-content max-h-48 min-h-(--era-h-control) w-full resize-none bg-transparent px-(--era-inset-control) py-[calc((var(--era-h-control)-1lh)/2)] text-body leading-body text-fg outline-none placeholder:text-muted',
 		className
 	)}
 	{...restProps}></textarea>

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

@@ -90,7 +90,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 era-interactive flex-col rounded-(--era-rd-lg) bg-(--era-field-bg) p-(--era-gap) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-field-highlight) hover:bg-(--era-field-highlight) has-[button:hover]:bg-(--era-field-bg)',
+		'flex w-full era-interactive flex-col rounded-(--era-rd-bar) bg-(--era-field-bg) p-(--era-gap) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-field-highlight) hover:bg-(--era-field-highlight) has-[button:hover]:bg-(--era-field-bg)',
 		className
 	)}
 	{...restProps}

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

@@ -11,7 +11,7 @@
 
 <li
 	class={cn(
-		'flex min-w-0 items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) py-(--era-gap) text-body hover:bg-(--era-highlight)',
+		'flex min-w-0 items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) py-(--era-gap) text-body hover:bg-(--era-highlight)',
 		completed ? 'text-muted line-through' : 'text-fg',
 		className
 	)}

package/dist/ai/queue/queue.svelte

@@ -6,7 +6,7 @@
 
 <ul
 	class={cn(
-		'flex max-h-48 flex-col gap-(--era-gap) overflow-y-auto rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow)',
+		'flex max-h-48 flex-col gap-(--era-gap) overflow-y-auto rounded-(--era-rd-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
 		className
 	)}
 >

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

@@ -11,7 +11,7 @@
 </script>
 
 <Step.Summary>
-	<Brain class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Brain class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	{#if children}
 		{@render children()}
 	{:else if streaming || duration === 0}

package/dist/ai/response/response.svelte

@@ -72,13 +72,13 @@
 	}
 	.era-response :global(blockquote) {
 		border-inline-start: 2px solid var(--color-border);
-		padding-inline-start: var(--era-pad-sm);
+		padding-inline-start: var(--era-pad-panel);
 		color: var(--color-muted);
 	}
 	.era-response :global(code) {
 		font-family: var(--font-mono, monospace);
 		background: var(--color-2);
-		border-radius: var(--era-rd-xxs);
+		border-radius: var(--era-rd-pill);
 		padding-inline: 0.25em;
 	}
 	.era-response :global(strong) {

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

@@ -83,15 +83,15 @@
 	role="status"
 	aria-live="polite"
 	class={cn(
-		'flex flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow)',
+		'flex flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}
 >
-	<div class="flex h-(--era-h-md) items-center gap-(--era-gap) px-(--era-inset-md)">
+	<div class="flex h-(--era-h-control) items-center gap-(--era-gap) px-(--era-inset-control)">
 		<!-- leading status dot + label -->
 		<span
-			class="flex items-center gap-(--era-inset-xxs) font-mono text-body {style.text} era-text-trim"
+			class="flex items-center gap-(--era-inset-pill) 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>
@@ -116,7 +116,7 @@
 
 		{#if style.active && oncancel}
 			<Button size="xs" tone="destructive" onclick={() => oncancel?.()}>
-				<X class="size-(--era-h-xs)" aria-hidden="true" />
+				<X class="size-(--era-h-icon)" aria-hidden="true" />
 				Cancel
 			</Button>
 		{/if}
@@ -125,7 +125,7 @@
 	{#if latest}
 		<div
 			class={cn(
-				'truncate px-(--era-inset-md) pb-(--era-inset-sm) font-mono text-body',
+				'truncate px-(--era-inset-control) pb-(--era-inset-chip) font-mono text-body',
 				LOG_TONE[latest.tone]
 			)}
 		>

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

@@ -55,7 +55,7 @@
 	{...restProps}
 >
 	<!-- size-2, the library's dot size (conversations row, run status, swarm) —
-	     NOT a tier height: h-xxs is the pill tier (18-26px), which rendered this
+	     NOT a tier height: h-pill is the pill tier (18-26px), which rendered this
 	     as a bullet taller than the line it marks. -->
 	<span class="size-2 shrink-0 rounded-full bg-current" aria-hidden="true"></span>
 	<span class="min-w-0 flex-1 truncate">

package/dist/ai/sources/source.svelte

@@ -11,6 +11,6 @@
 	rel="noreferrer"
 	class="flex items-center gap-(--era-gap) text-body text-fg hover:text-bright hover:underline"
 >
-	<BookOpen class="size-(--era-h-xs) shrink-0 text-muted" aria-hidden="true" />
+	<BookOpen class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
 	<span class="truncate">{title ?? href}</span>
 </a>

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

@@ -7,6 +7,6 @@
 </script>
 
 <Step.Summary>
-	<BookMarked class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<BookMarked class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	{#if children}{@render children()}{:else}Used {count} source{count === 1 ? '' : 's'}{/if}
 </Step.Summary>

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

@@ -97,7 +97,7 @@
 	{:else}
 		<div class="flex min-w-0 flex-col gap-(--era-gap)">
 			{@render tag(kind, label)}
-			<div class="border-l border-divider pl-(--era-inset-md)">
+			<div class="border-l border-divider pl-(--era-inset-control)">
 				<Self value={v} depth={depth + 1} />
 			</div>
 		</div>