@signal9/era-ui 10.0.0 → 11.0.0

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

@@ -8,7 +8,7 @@
 </script>
 
 {#if attachments.items.length}
-	<div class="flex flex-wrap gap-(--era-gap) pb-(--era-gap)">
+	<div class="flex flex-wrap gap-gutter pb-gutter">
 		{#each attachments.items as a (a.id)}
 			<div class="group/att relative">
 				{#if a.previewUrl}
@@ -16,15 +16,15 @@
 					<img
 						src={a.previewUrl}
 						alt={a.filename}
-						class="size-(--era-h-bar) rounded-(--era-rd-bar) object-cover shadow-(--era-shadow)"
+						class="size-bar rounded-bar object-cover shadow-sm"
 					/>
 				{:else}
 					<!-- md control geometry, like a Button with an icon: wall inset and
 					     icon gap both --era-inset-control, ink centered by era-text-trim. -->
 					<div
-						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)"
+						class="flex h-control items-center gap-inset-control rounded-control bg-well px-inset-control text-body leading-none text-muted shadow-sm"
 					>
-						<Paperclip class="size-(--era-h-icon) shrink-0" />
+						<Paperclip class="size-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-glyph-pill)"
+					class="absolute -top-(--era-gap) -right-(--era-gap) opacity-0 shadow-sm group-hover/att:opacity-100 focus-visible:opacity-100 [&_svg]:size-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-icon) animate-spin" />
+		<LoaderCircle class="size-icon animate-spin" />
 	{:else if status === 'streaming'}
 		<Square class="size-[calc(var(--era-h-icon)*0.75)]" fill="currentColor" />
 	{:else}
-		<ArrowUp class="size-(--era-h-icon)" />
+		<ArrowUp class="size-icon" />
 	{/if}
 </Button>

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

@@ -40,7 +40,7 @@
      (only the submit path is gated).
 
      Geometry: the single-line state must measure exactly like an md control
-     (Input = h-control, px-(--era-inset-control), text-body, text-fg) so the toolbar
+     (Input = h-control, px-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-control − 1lh)/2 — exact at every density and any leading. Input's
@@ -58,7 +58,7 @@
 	onkeydown={onKeydown}
 	onpaste={onPaste}
 	class={cn(
-		'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',
+		'field-sizing-content max-h-48 min-h-control w-full resize-none bg-transparent px-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-toolbar.svelte

@@ -10,6 +10,6 @@
 	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
-<div class={cn('flex items-end justify-between gap-(--era-gap)', className)} {...restProps}>
+<div class={cn('flex items-end justify-between gap-gutter', className)} {...restProps}>
 	{@render children?.()}
 </div>

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-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)',
+		'flex w-full era-interactive flex-col rounded-bar bg-field p-gutter text-body text-fg shadow-well focus-within:bg-field-highlight hover:bg-field-highlight has-[button:hover]:bg-field',
 		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-control) px-(--era-inset-control) py-(--era-gap) text-body hover:bg-(--era-highlight)',
+		'flex min-w-0 items-center gap-gutter rounded-control px-inset-control py-gutter text-body hover:bg-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-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
+		'flex max-h-48 flex-col gap-gutter overflow-y-auto rounded-bar bg-well p-panel shadow-sm',
 		className
 	)}
 >

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

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

package/dist/ai/response/response.svelte

@@ -34,7 +34,7 @@
 <!-- eslint-disable better-tailwindcss/no-unknown-classes -- era-response* are defined in this component's <style> -->
 <div
 	class={cn(
-		'era-response flex min-w-0 flex-col gap-(--era-gap) text-body leading-body text-fg',
+		'era-response flex min-w-0 flex-col gap-gutter text-body leading-body text-fg',
 		streaming && 'era-response-streaming',
 		className
 	)}

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

@@ -82,20 +82,16 @@
 <div
 	role="status"
 	aria-live="polite"
-	class={cn(
-		'flex flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow)',
-		className
-	)}
+	class={cn('flex flex-col rounded-bar bg-well shadow-sm', className)}
 	{...restProps}
 >
-	<div class="flex h-(--era-h-control) items-center gap-(--era-gap) px-(--era-inset-control)">
+	<div class="flex h-control items-center gap-gutter px-inset-control">
 		<!-- leading status dot + label -->
-		<span
-			class="flex items-center gap-(--era-inset-pill) font-mono text-body {style.text} era-text-trim"
-		>
+		<span class="flex items-center gap-inset-pill font-mono text-body {style.text} leading-none">
 			<span class={cn('size-1.5 shrink-0 rounded-full', style.dot, style.pulse && 'animate-pulse')}
 			></span>
-			{style.label}
+			<!-- Own box, so the trim applies — see Role for the anonymous-item rule. -->
+			<span class="era-text-trim">{style.label}</span>
 		</span>
 
 		{#if tools}
@@ -116,7 +112,7 @@
 
 		{#if style.active && oncancel}
 			<Button size="icon" tone="destructive" onclick={() => oncancel?.()}>
-				<X class="size-(--era-h-icon)" aria-hidden="true" />
+				<X class="size-icon" aria-hidden="true" />
 				Cancel
 			</Button>
 		{/if}
@@ -125,7 +121,7 @@
 	{#if latest}
 		<div
 			class={cn(
-				'truncate px-(--era-inset-control) pb-(--era-inset-chip) font-mono text-body',
+				'truncate px-inset-control pb-inset-chip font-mono text-body',
 				LOG_TONE[latest.tone]
 			)}
 		>

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

@@ -50,10 +50,7 @@
      truncated message, and an optional trailing timestamp/label. Single-line by
      design (the tail scrolls, it doesn't wrap) so items-center + era-text-trim
      keep the dot and text on one optical baseline. -->
-<div
-	class={cn('flex items-center gap-(--era-gap) text-body', TONE[tone], className)}
-	{...restProps}
->
+<div class={cn('flex items-center gap-gutter text-body', TONE[tone], className)} {...restProps}>
 	<!-- size-2, the library's dot size (conversations row, run status, swarm) —
 	     NOT a tier height: h-pill is the pill tier (18-26px), which rendered this
 	     as a bullet taller than the line it marks. -->

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

@@ -22,7 +22,7 @@
 	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}>
+<div class={cn('flex min-w-0 flex-col gap-gutter', className)} {...restProps}>
 	{#if items}
 		{#each visible as item, i (item.id ?? i)}
 			<Item tone={item.tone} label={item.label} text={item.text} />

package/dist/ai/sources/source.svelte

@@ -9,8 +9,8 @@
 	{href}
 	target="_blank"
 	rel="noreferrer"
-	class="flex items-center gap-(--era-gap) text-body text-fg hover:text-bright hover:underline"
+	class="flex items-center gap-gutter text-body text-fg hover:text-bright hover:underline"
 >
-	<BookOpen class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
+	<BookOpen class="size-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-icon) shrink-0" aria-hidden="true" />
+	<BookMarked class="size-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

@@ -90,21 +90,21 @@
 
 {#snippet row(kind: 'key' | 'index', label: string, v: unknown)}
 	{#if isInline(v)}
-		<div class="flex min-w-0 items-baseline gap-(--era-gap)">
+		<div class="flex min-w-0 items-baseline gap-gutter">
 			{@render tag(kind, label)}
 			{@render leaf(v)}
 		</div>
 	{:else}
-		<div class="flex min-w-0 flex-col gap-(--era-gap)">
+		<div class="flex min-w-0 flex-col gap-gutter">
 			{@render tag(kind, label)}
-			<div class="border-l border-divider pl-(--era-inset-control)">
+			<div class="border-l border-divider pl-inset-control">
 				<Self value={v} depth={depth + 1} />
 			</div>
 		</div>
 	{/if}
 {/snippet}
 
-<div class={cn('flex min-w-0 flex-col gap-(--era-gap) text-body', className)} {...restProps}>
+<div class={cn('flex min-w-0 flex-col gap-gutter text-body', className)} {...restProps}>
 	{#if depth > MAX_DEPTH}
 		<span class="era-text-trim text-muted">…</span>
 	{:else if isRecord(value)}

package/dist/ai/suggestion/suggestion.svelte

@@ -22,7 +22,7 @@
      full-round — touch mode alone pills the ladder. -->
 <Button
 	size="chip"
-	class={cn('shrink-0 px-(--era-chip-px)', className)}
+	class={cn('shrink-0 px-chip', className)}
 	onclick={() => onSelect?.(suggestion)}
 >
 	{#if children}{@render children()}{:else}{suggestion}{/if}

package/dist/ai/suggestion/suggestions.svelte

@@ -12,7 +12,7 @@
 
 <div
 	class={cn(
-		'scrollbar-none flex w-full flex-nowrap items-center gap-(--era-gap) overflow-x-auto',
+		'scrollbar-none flex w-full flex-nowrap items-center gap-gutter overflow-x-auto',
 		className
 	)}
 	{...restProps}

package/dist/ai/swarm/swarm-agent.svelte

@@ -55,13 +55,13 @@
 	tone="well"
 	data-status={agent.status}
 	class={cn(
-		'flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)',
+		'flex min-w-0 flex-col gap-gutter p-panel',
 		agent.status === 'failed' && 'outline -outline-offset-1 outline-destructive/60',
 		className
 	)}
 	{...restProps}
 >
-	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+	<div class="flex min-w-0 items-center gap-gutter text-body leading-none">
 		<Dot status={agent.status} />
 		<Role role={agent.role ?? 'worker'} label={agent.label} class="min-w-0" />
 		{#if agent.key}
@@ -85,7 +85,7 @@
 	{@render children?.(agent)}
 
 	{#if agent.sandbox || elapsed != null}
-		<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim text-muted">
+		<div class="flex min-w-0 items-center gap-gutter text-body leading-none text-muted">
 			{#if agent.sandbox}
 				<Sandbox sandbox={agent.sandbox} label />
 			{/if}

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

@@ -40,10 +40,10 @@
 <Card
 	tone="well"
 	data-kind={artifact.kind}
-	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)', className)}
+	class={cn('flex min-w-0 flex-col gap-gutter p-panel', className)}
 	{...restProps}
 >
-	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+	<div class="flex min-w-0 items-center gap-gutter text-body leading-none">
 		<span class="shrink-0 font-mono text-[0.625rem] tracking-[0.15em] text-muted uppercase">
 			{artifact.kind}
 		</span>

package/dist/ai/swarm/swarm-barrier.svelte

@@ -37,11 +37,11 @@
      and 3/5 answers it where "open" does not. -->
 <div
 	data-status={state.status}
-	class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)}
+	class={cn('flex min-w-0 flex-col gap-gutter', className)}
 	{...restProps}
 >
-	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
-		<GitMerge class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
+	<div class="flex min-w-0 items-center gap-gutter text-body leading-none">
+		<GitMerge class="size-icon shrink-0 text-muted" aria-hidden="true" />
 		<span class="min-w-0 flex-1 truncate text-fg">{barrier.title}</span>
 		{#if barrier.key}
 			<span class="shrink-0 font-mono text-body text-muted">#{barrier.key}</span>

package/dist/ai/swarm/swarm-barriers.svelte

@@ -26,10 +26,7 @@
      when a swarm declares no gates, which most do not. -->
 {#if barriers.length > 0}
 	<div
-		class={cn(
-			'flex min-w-0 flex-col gap-(--era-pad-panel) border-t border-divider-faded p-(--era-pad-panel)',
-			className
-		)}
+		class={cn('flex min-w-0 flex-col gap-panel border-t border-divider-faded p-panel', className)}
 		{...restProps}
 	>
 		{#each barriers as barrier (barrier.id)}

package/dist/ai/swarm/swarm-counts.svelte

@@ -31,7 +31,7 @@
 <!-- Live tally. Each badge appears only while its number is non-zero, so the
      strip shrinks as a run lands instead of trailing a row of zeroes — and the
      one that matters (failures) is never hidden behind the ones that don't. -->
-<div class={cn('flex shrink-0 items-center gap-(--era-gap)', className)} {...restProps}>
+<div class={cn('flex shrink-0 items-center gap-gutter', className)} {...restProps}>
 	{#if quiet}
 		<Badge>{tally.total} agents</Badge>
 	{:else}
@@ -42,7 +42,7 @@
 	{/if}
 	{#if tally.sandboxes > 0}
 		<Badge>
-			<Box class="size-(--era-h-icon)" aria-hidden="true" />
+			<Box class="size-icon" aria-hidden="true" />
 			{tally.sandboxes}
 		</Badge>
 	{/if}

package/dist/ai/swarm/swarm-footer.svelte

@@ -50,14 +50,15 @@
 
 <div
 	class={cn(
-		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-control) font-mono text-body era-text-trim',
+		'flex h-control shrink-0 items-center gap-gutter border-t border-divider-faded px-inset-control font-mono text-body leading-none',
 		className
 	)}
 	{...restProps}
 >
-	<span class={cn('flex shrink-0 items-center gap-(--era-gap)', tone.class)}>
+	<span class={cn('flex shrink-0 items-center gap-gutter', tone.class)}>
 		<Dot status={tone.status} label={tone.label} class={tone.pulse ? 'animate-pulse' : undefined} />
-		{tone.label}
+		<!-- Own box, so the trim applies — see Role for the anonymous-item rule. -->
+		<span class="era-text-trim">{tone.label}</span>
 	</span>
 	<!-- Always rendered, empty when there is nothing to say: the span is also the
 	     spacer that pushes the watermark to the trailing edge. -->

package/dist/ai/swarm/swarm-grid.svelte

@@ -34,13 +34,13 @@
      grow with the density axis instead of staying dense-sized in touch mode. -->
 <div
 	class={cn(
-		'grid min-w-0 grid-cols-[repeat(auto-fill,minmax(calc(var(--era-h-bar)*6),1fr))] gap-(--era-gap) p-(--era-gap)',
+		'grid min-w-0 grid-cols-[repeat(auto-fill,minmax(calc(var(--era-h-bar)*6),1fr))] gap-gutter p-gutter',
 		className
 	)}
 	{...restProps}
 >
 	{#if nodes.length === 0}
-		<div class="px-(--era-inset-control) py-(--era-gap) text-body text-muted">
+		<div class="px-inset-control py-gutter text-body text-muted">
 			{#if empty}{@render empty()}{:else}No agents yet.{/if}
 		</div>
 	{:else}

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

@@ -43,7 +43,7 @@
      the end of a sentence you can hover for, never the count of what failed. -->
 <div
 	class={cn(
-		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) px-(--era-inset-control) text-body era-text-trim',
+		'flex h-control shrink-0 items-center gap-gutter px-inset-control text-body leading-none',
 		className
 	)}
 	{...restProps}
@@ -55,7 +55,7 @@
 	     group to the edge, so there is no empty-title branch to keep in sync. -->
 	<span class="min-w-0 flex-1 truncate text-bright">{title ?? ''}</span>
 	{#if children}
-		<div class="flex shrink-0 items-center gap-(--era-gap)">
+		<div class="flex shrink-0 items-center gap-gutter">
 			{@render children()}
 		</div>
 	{/if}

package/dist/ai/swarm/swarm-node.svelte

@@ -160,12 +160,10 @@
 	     highlight instantly so a fast pass down the tree doesn't smear. -->
 	<div
 		class={cn(
-			'flex h-(--era-h-control) items-center gap-(--era-gap) rounded-(--era-rd-control) pl-(--era-inset-control) text-body era-text-trim',
-			hasActions ? 'pr-(--era-pill-inset-control)' : 'pr-(--era-inset-control)',
+			'flex h-control items-center gap-gutter rounded-control pl-inset-control text-body leading-none',
+			hasActions ? 'pr-pill-inset-control' : 'pr-inset-control',
 			(hasChildren || hasDetail) && 'cursor-pointer',
-			active
-				? 'bg-hover text-bright'
-				: 'text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow)',
+			active ? 'bg-hover text-bright' : 'text-fg hover:bg-highlight hover:shadow-highlight',
 			// Scoped to the DIRECT parent, not the group: every node in the tree is
 			// a group/node, and a named group matches ANY ancestor — focusing a
 			// parent row was outlining every visible child row. `:focus-visible > &`
@@ -183,14 +181,14 @@
 			     single source of truth, without the ancestry. -->
 			<ChevronRight
 				class={cn(
-					'size-(--era-h-icon) shrink-0 text-muted transition-transform duration-(--era-duration) ease-(--era-ease)',
+					'size-icon shrink-0 text-muted transition-transform duration-base ease-base',
 					open && 'rotate-90'
 				)}
 				aria-hidden="true"
 			/>
 		{:else}
 			<!-- Keeps every row's dot on the same column, expandable or not. -->
-			<span class="size-(--era-h-icon) shrink-0" aria-hidden="true"></span>
+			<span class="size-icon shrink-0" aria-hidden="true"></span>
 		{/if}
 
 		<Dot status={agent.status} />
@@ -225,7 +223,7 @@
 					event.stopPropagation();
 					toggleDetail();
 				}}
-				class="shrink-0 era-interactive cursor-pointer rounded-(--era-rd-pill) px-(--era-pill-px) font-mono text-body era-text-trim text-muted hover:bg-(--era-highlight) hover:text-fg data-[state=open]:bg-hover data-[state=open]:text-fg"
+				class="shrink-0 era-interactive cursor-pointer rounded-pill px-pill font-mono text-body era-text-trim text-muted hover:bg-highlight hover:text-fg data-[state=open]:bg-hover data-[state=open]:text-fg"
 			>
 				{detailLabel}
 			</button>
@@ -263,7 +261,7 @@
 		<Collapsible.Root bind:open={detailOpen}>
 			<Collapsible.Content class="era-collapse">
 				<div
-					class="min-w-0 pr-(--era-inset-control) pb-(--era-gap) pl-[calc(var(--era-inset-control)+var(--era-h-icon)+var(--era-gap))]"
+					class="min-w-0 pr-inset-control pb-gutter pl-[calc(var(--era-inset-control)+var(--era-h-icon)+var(--era-gap))]"
 				>
 					{@render detail?.(agent)}
 				</div>

package/dist/ai/swarm/swarm-role.svelte

@@ -53,12 +53,15 @@
 	data-role={role}
 	title={name}
 	class={cn(
-		'inline-flex shrink-0 items-center gap-(--era-gap) font-mono text-[0.625rem] era-text-trim-caps tracking-[0.15em] uppercase',
+		'inline-flex shrink-0 items-center gap-gutter font-mono text-[0.625rem] leading-none tracking-[0.15em] uppercase',
 		role === 'orchestrator' ? 'text-fg' : 'text-muted',
 		className
 	)}
 	{...restProps}
 >
-	<Icon class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
-	{name}
+	<Icon class="size-icon shrink-0" aria-hidden="true" />
+	<!-- The name gets its OWN box so the caps trim has something to trim. Left on
+	     the flex row it was inert: bare text in a flex container is an anonymous
+	     item, which no non-inherited property reaches. -->
+	<span class="era-text-trim-caps">{name}</span>
 </span>

package/dist/ai/swarm/swarm-root.svelte

@@ -51,10 +51,7 @@
      swarm reads as a region of it, not a card floating above it. -->
 <div
 	bind:this={ref}
-	class={cn(
-		'flex min-w-0 flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow)',
-		className
-	)}
+	class={cn('flex min-w-0 flex-col rounded-bar bg-well shadow-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/ai/swarm/swarm-sandbox.svelte

@@ -49,7 +49,7 @@
      indicator for both hides exactly the state you opened a console to find. -->
 <span
 	class={cn(
-		'flex min-w-0 shrink-0 items-center gap-(--era-gap) font-mono',
+		'flex min-w-0 shrink-0 items-center gap-gutter font-mono',
 		SANDBOX_TONE[sandbox.status],
 		className
 	)}
@@ -57,17 +57,14 @@
 >
 	<!-- busy: the box PULSES rather than gaining a second glyph — "a command is
 	     streaming through this VM" is motion, and motion is what says it. -->
-	<Box
-		class={cn('size-(--era-h-icon) shrink-0', sandbox.busy && 'animate-pulse')}
-		aria-hidden="true"
-	/>
+	<Box class={cn('size-icon shrink-0', sandbox.busy && 'animate-pulse')} aria-hidden="true" />
 	{#if sandbox.checkpoint}
 		<!-- A paused VM kept as a restore point — the camera badge, as the
 		     reference console draws it. -->
-		<Camera class="size-(--era-glyph-pill) shrink-0" aria-hidden="true" />
+		<Camera class="size-glyph-pill shrink-0" aria-hidden="true" />
 	{:else if forkOf}
 		<!-- Live-forked from a parent VM; the lineage is in the title. -->
-		<GitBranch class="size-(--era-glyph-pill) shrink-0" aria-hidden="true" />
+		<GitBranch class="size-glyph-pill shrink-0" aria-hidden="true" />
 	{/if}
 	{#if label}<span class="truncate">{sandbox.status}</span>{/if}
 </span>

package/dist/ai/swarm/swarm-tree.svelte

@@ -181,11 +181,11 @@
 	aria-label="Swarm agents"
 	{onkeydown}
 	{onfocusin}
-	class={cn('@container min-w-0 py-(--era-gap)', className)}
+	class={cn('@container min-w-0 py-gutter', className)}
 	{...restProps}
 >
 	{#if rows.length === 0}
-		<div class="px-(--era-inset-control) py-(--era-gap) text-body text-muted">
+		<div class="px-inset-control py-gutter text-body text-muted">
 			{#if empty}{@render empty()}{:else}No agents yet.{/if}
 		</div>
 	{:else}

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

@@ -8,10 +8,7 @@
 
 <!-- The task log rail: items hang off a left border, terminal-trace style. -->
 <Step.Content
-	class={cn(
-		'border-divider-faded border-s-2 bg-transparent p-0 ps-(--era-pad-panel) shadow-none',
-		className
-	)}
+	class={cn('border-divider-faded border-s-2 bg-transparent p-0 ps-panel shadow-none', className)}
 >
 	{@render children?.()}
 </Step.Content>

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

@@ -7,6 +7,6 @@
 </script>
 
 <Step.Summary>
-	<Search class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
+	<Search class="size-icon shrink-0" aria-hidden="true" />
 	{#if children}{@render children()}{:else}{title}{/if}
 </Step.Summary>

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

@@ -47,20 +47,20 @@
 	data-status={status}
 	{onclick}
 	class={cn(
-		'inline-flex h-(--era-h-pill) max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg',
+		'inline-flex h-pill max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-gutter rounded-pill px-pill text-body leading-none text-muted transition-colors duration-base ease-base hover:bg-highlight hover:text-fg',
 		active && 'bg-fill text-fg',
 		className
 	)}
 	{...restProps}
 >
 	<Icon
-		class={cn('size-(--era-h-icon) shrink-0', status === 'running' && 'animate-pulse')}
+		class={cn('size-icon shrink-0', status === 'running' && 'animate-pulse')}
 		aria-hidden="true"
 	/>
 	<span class={cn('min-w-0 truncate', status === 'running' && 'era-shimmer')}>
 		{@render children?.()}
 	</span>
 	{#if status === 'error'}
-		<span class="size-(--era-gap) shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
+		<span class="size-gutter shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
 	{/if}
 </button>

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

@@ -23,19 +23,19 @@
      cursor is excluded), with one shared expansion area below. -->
 <div class={cn('flex min-w-0 flex-col', className)}>
 	<div
-		class="flex flex-wrap items-center gap-(--era-gap) [&>*:not(:first-child):not([data-chips-cursor])]:border-l [&>*:not(:first-child):not([data-chips-cursor])]:border-divider-faded [&>*:not(:first-child):not([data-chips-cursor])]:pl-(--era-gap)"
+		class="flex flex-wrap items-center gap-gutter [&>*:not(:first-child):not([data-chips-cursor])]:border-l [&>*:not(:first-child):not([data-chips-cursor])]:border-divider-faded [&>*:not(:first-child):not([data-chips-cursor])]:pl-gutter"
 	>
 		{@render children?.()}
 		{#if streaming}
 			<span
 				data-chips-cursor
-				class="size-(--era-gap) shrink-0 rounded-full bg-primary"
+				class="size-gutter shrink-0 rounded-full bg-primary"
 				aria-hidden="true"
 			></span>
 		{/if}
 	</div>
 	{#if expanded}
-		<div class="mt-(--era-gap) min-w-0">
+		<div class="mt-gutter min-w-0">
 			{@render expanded()}
 		</div>
 	{/if}