@signal9/era-ui 10.1.0 → 12.0.0

package/dist/ai/actions/actions.svelte

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

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

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

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

@@ -6,7 +6,7 @@
 
 <!-- size="pill", 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-icon) — a class the Button variant's [&_svg]
+     used to carry size-icon — a class the Button variant's [&_svg]
      selector outranks, so it claimed 14px while 10 shipped. -->
 <Button icon size="pill" 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-card)', className)}>
+<div class={cn('min-h-0 flex-1 overflow-auto p-card', className)}>
 	{@render children?.()}
 </div>

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

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

package/dist/ai/artifact/artifact.svelte

@@ -10,10 +10,7 @@
 </script>
 
 <div
-	class={cn(
-		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
-		className
-	)}
+	class={cn('flex min-h-0 flex-col overflow-hidden rounded-bar bg-well shadow-lg', className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -21,11 +21,11 @@
 
 <!-- One reasoning step on the rail: icon column with a connector line, label
      colored by status (active steps read brighter). -->
-<div class="flex min-w-0 gap-(--era-gap)">
+<div class="flex min-w-0 gap-gutter">
 	<div class="flex flex-col items-center">
 		<Icon
 			class={cn(
-				'size-(--era-h-icon) shrink-0',
+				'size-icon shrink-0',
 				status === 'active'
 					? 'text-bright'
 					: status === 'pending'
@@ -36,7 +36,7 @@
 		/>
 		<span class="w-px flex-1 bg-divider-faded"></span>
 	</div>
-	<div class="flex min-w-0 flex-col gap-1 pb-(--era-gap)">
+	<div class="flex min-w-0 flex-col gap-1 pb-gutter">
 		<span class={cn('text-body', status === 'active' ? 'text-bright' : 'text-fg')}>{label}</span>
 		{#if description}<span class="text-body text-muted">{description}</span>{/if}
 	</div>

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-icon) shrink-0" aria-hidden="true" />
+		<Brain class="size-icon shrink-0" aria-hidden="true" />
 		{label}
 	</Step.Summary>
 	<Step.Content class="bg-transparent p-0 shadow-none">

package/dist/ai/checkpoint.svelte

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

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

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

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

@@ -16,7 +16,7 @@
 	const jsonText = $state<Record<string, string>>({});
 </script>
 
-<div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)}>
+<div class={cn('flex min-w-0 flex-col gap-gutter', className)}>
 	{#if ctrl.entries.length === 0}
 		<span class="text-body text-muted">No arguments</span>
 	{:else}
@@ -24,8 +24,8 @@
 			{@const kind = ctrl.kindOf(key)}
 			<div
 				class={cn(
-					'flex min-w-0 flex-col gap-(--era-gap)',
-					ctrl.isDirty(key) && 'border-warning border-s-2 ps-(--era-pad-panel)'
+					'flex min-w-0 flex-col gap-gutter',
+					ctrl.isDirty(key) && 'border-warning border-s-2 ps-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-bar) font-mono text-body',
+							'min-h-bar font-mono text-body',
 							!ctrl.isValid(key) && 'border border-destructive'
 						)}
 					/>

package/dist/ai/confirmation/confirmation.svelte

@@ -18,18 +18,15 @@
 </script>
 
 <div
-	class={cn(
-		'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
-	)}
+	class={cn('flex min-w-0 flex-col gap-gutter rounded-bar bg-well p-panel shadow-sm', className)}
 >
-	<div class="flex items-center gap-(--era-gap) text-body">
+	<div class="flex items-center gap-gutter text-body">
 		{#if approval === 'requested'}
-			<ShieldQuestion class="size-(--era-h-icon) shrink-0 text-warning" aria-hidden="true" />
+			<ShieldQuestion class="size-icon shrink-0 text-warning" aria-hidden="true" />
 		{:else if approval === 'approved'}
-			<CircleCheck class="size-(--era-h-icon) shrink-0 text-success" aria-hidden="true" />
+			<CircleCheck class="size-icon shrink-0 text-success" aria-hidden="true" />
 		{:else}
-			<CircleX class="size-(--era-h-icon) shrink-0 text-destructive" aria-hidden="true" />
+			<CircleX class="size-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

@@ -23,9 +23,9 @@
 </script>
 
 <Popover.Root>
-	<Popover.Trigger size="chip" class={cn('gap-(--era-gap) tabular-nums', className)}>
+	<Popover.Trigger size="chip" class={cn('gap-gutter tabular-nums', className)}>
 		{Math.round(percent * 100)}%
-		<svg viewBox="0 0 24 24" class="size-(--era-h-icon) -rotate-90" aria-hidden="true">
+		<svg viewBox="0 0 24 24" class="size-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"
@@ -40,7 +40,7 @@
 			/>
 		</svg>
 	</Popover.Trigger>
-	<Popover.Content align="end" class="flex w-56 flex-col gap-(--era-gap)">
+	<Popover.Content align="end" class="flex w-56 flex-col gap-gutter">
 		{#if modelId}<p class="text-body text-muted">{modelId}</p>{/if}
 		<KV key="used" value={fmt.format(usedTokens)} />
 		<KV key="max" value={fmt.format(maxTokens)} />

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

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

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-content) text-center',
+		'flex flex-1 flex-col items-center justify-center gap-gutter p-content text-center',
 		className
 	)}
 	{...restProps}

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

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

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

@@ -16,10 +16,10 @@
 </script>
 
 <!-- A time-bucket section: the step-section label idiom over its stack of rows. -->
-<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 label}
 		<span
-			class="px-(--era-inset-control) text-[0.625rem] era-text-trim-caps leading-none tracking-[0.15em] text-muted uppercase"
+			class="px-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

@@ -144,10 +144,10 @@
 		// 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-control) items-center gap-(--era-gap) rounded-(--era-rd-control) pr-(--era-pill-inset-control) pl-(--era-inset-control) text-body',
+		'group/row relative flex h-control items-center gap-gutter rounded-control pr-pill-inset-control pl-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',
+			: 'text-fg hover:bg-highlight hover:shadow-highlight has-[[data-rail]:hover]:bg-transparent has-[[data-rail]:hover]:shadow-none',
 		className
 	)}
 	onmouseleave={disarm}
@@ -157,7 +157,7 @@
 	{#if leading}
 		{@render leading()}
 	{:else}
-		<MessageSquare class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
+		<MessageSquare class="size-icon shrink-0 text-muted" aria-hidden="true" />
 	{/if}
 
 	{#if status}
@@ -199,7 +199,7 @@
 	     button, which should keep the row highlighted. -->
 	<div
 		data-rail
-		class="flex shrink-0 items-center gap-(--era-gap) opacity-0 group-hover/row:opacity-100 focus-within:opacity-100"
+		class="flex shrink-0 items-center gap-gutter opacity-0 group-hover/row:opacity-100 focus-within:opacity-100"
 	>
 		<Button
 			icon
@@ -208,12 +208,12 @@
 			aria-pressed={starred}
 			onclick={toggleStar}
 		>
-			<Star class={cn('size-(--era-h-icon)', starred && 'fill-warning text-warning')} />
+			<Star class={cn('size-icon', starred && 'fill-warning text-warning')} />
 		</Button>
 
 		{#if showCancel}
 			<Button icon size="pill" aria-label="Cancel generation" onclick={() => onCancel?.()}>
-				<X class="size-(--era-h-icon)" />
+				<X class="size-icon" />
 			</Button>
 		{/if}
 
@@ -226,9 +226,9 @@
 			onclick={onDeleteClick}
 		>
 			{#if armed}
-				<Check class="size-(--era-h-icon)" />
+				<Check class="size-icon" />
 			{:else}
-				<Trash2 class="size-(--era-h-icon)" />
+				<Trash2 class="size-icon" />
 			{/if}
 		</Button>
 	</div>

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

@@ -17,11 +17,11 @@
 
 <!-- The rail: a sticky header slot over a chromeless scroll column. min-h-0 lets
      the list shrink inside a flex parent so only the list scrolls, not the page. -->
-<div class={cn('flex min-h-0 flex-col gap-(--era-gap)', className)} {...restProps}>
+<div class={cn('flex min-h-0 flex-col gap-gutter', className)} {...restProps}>
 	{#if header}
 		<div class="shrink-0">{@render header()}</div>
 	{/if}
-	<div class="scrollbar-none flex min-h-0 flex-1 flex-col gap-(--era-gap) overflow-y-auto">
+	<div class="scrollbar-none flex min-h-0 flex-1 flex-col gap-gutter overflow-y-auto">
 		{@render children?.()}
 	</div>
 </div>

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

@@ -54,9 +54,9 @@
 
 {#snippet head()}
 	{#if info.tone === 'warning'}
-		<TriangleAlert class="size-(--era-h-icon) shrink-0 text-warning" aria-hidden="true" />
+		<TriangleAlert class="size-icon shrink-0 text-warning" aria-hidden="true" />
 	{:else}
-		<CircleX class="size-(--era-h-icon) shrink-0 text-destructive" aria-hidden="true" />
+		<CircleX class="size-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-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
+		'group/error flex min-w-0 flex-col gap-gutter rounded-bar bg-well p-panel shadow-sm',
 		className
 	)}
 	{...restProps}
@@ -73,16 +73,16 @@
 	{#if showDetail}
 		<!-- The whole summary row toggles the raw detail; quiet until hovered. -->
 		<Collapsible.Trigger
-			class="flex w-full min-w-0 era-interactive cursor-pointer items-center gap-(--era-gap) text-body text-muted"
+			class="flex w-full min-w-0 era-interactive cursor-pointer items-center gap-gutter text-body text-muted"
 		>
 			{@render head()}
 			<ChevronDown
-				class="size-(--era-h-icon) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/error:rotate-180"
+				class="size-icon shrink-0 transition-transform duration-base ease-base group-data-[state=open]/error:rotate-180"
 				aria-hidden="true"
 			/>
 		</Collapsible.Trigger>
 	{:else}
-		<div class="flex min-w-0 items-center gap-(--era-gap) text-body">
+		<div class="flex min-w-0 items-center gap-gutter text-body">
 			{@render head()}
 		</div>
 	{/if}
@@ -93,7 +93,7 @@
 
 	{#if showDetail}
 		<Collapsible.Content class="era-collapse">
-			<div class="pt-(--era-gap)">
+			<div class="pt-gutter">
 				<CodeBlock code={rawDetail} />
 			</div>
 		</Collapsible.Content>

package/dist/ai/image.svelte

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

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

@@ -40,18 +40,18 @@
 			>{host(sources[0]?.href ?? '')}{sources.length > 1 ? ` +${sources.length - 1}` : ''}</Badge
 		>
 	</LinkPreview.Trigger>
-	<LinkPreview.Content class="flex w-72 flex-col gap-(--era-gap)">
+	<LinkPreview.Content class="flex w-72 flex-col gap-gutter">
 		{#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)">
+				<div class="flex gap-gutter">
 					<Button
 						icon
 						size="icon"
 						aria-label="Previous source"
 						onclick={() => (index = (index - 1 + sources.length) % sources.length)}
 					>
-						<ChevronLeft class="size-(--era-h-icon)" />
+						<ChevronLeft class="size-icon" />
 					</Button>
 					<Button
 						icon
@@ -59,7 +59,7 @@
 						aria-label="Next source"
 						onclick={() => (index = (index + 1) % sources.length)}
 					>
-						<ChevronRight class="size-(--era-h-icon)" />
+						<ChevronRight class="size-icon" />
 					</Button>
 				</div>
 			</div>
@@ -74,7 +74,7 @@
 				{active.title ?? active.href}
 			</a>
 			{#if active.quote}
-				<blockquote class="border-divider-faded border-s-2 ps-(--era-gap) text-body text-muted">
+				<blockquote class="border-divider-faded border-s-2 ps-gutter text-body text-muted">
 					{active.quote}
 				</blockquote>
 			{/if}

package/dist/ai/loader.svelte

@@ -5,7 +5,4 @@
 	let { class: className }: { class?: string } = $props();
 </script>
 
-<LoaderCircle
-	class={cn('size-(--era-h-icon) animate-spin text-muted', className)}
-	aria-label="Loading"
-/>
+<LoaderCircle class={cn('size-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="chip" aria-label="Previous version" onclick={() => ctrl.previous()}>
-			<ChevronLeft class="size-(--era-h-icon)" />
+			<ChevronLeft class="size-icon" />
 		</Button>
-		<span class="flex items-center px-(--era-inset-chip) text-body text-muted tabular-nums">
+		<span class="flex items-center px-inset-chip text-body text-muted tabular-nums">
 			{ctrl.current + 1} of {ctrl.total}
 		</span>
 		<Button icon size="chip" aria-label="Next version" onclick={() => ctrl.next()}>
-			<ChevronRight class="size-(--era-h-icon)" />
+			<ChevronRight class="size-icon" />
 		</Button>
 	</ButtonGroup>
 {/if}

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

@@ -20,6 +20,6 @@
 	});
 </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}>
 	{@render children?.()}
 </div>

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-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)',
+		'group-data-[role=user]/message:max-w-[80%] group-data-[role=user]/message:rounded-control group-data-[role=user]/message:bg-elevated group-data-[role=user]/message:p-panel group-data-[role=user]/message:whitespace-pre-wrap group-data-[role=user]/message:shadow-sm',
 		className
 	)}
 	{...restProps}

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

@@ -14,7 +14,7 @@
      hovered (the convention), always reachable by keyboard focus. -->
 <div
 	class={cn(
-		'flex items-center gap-(--era-gap) opacity-0 transition-opacity duration-(--era-duration) ease-(--era-ease) group-hover/message:opacity-100 focus-within:opacity-100',
+		'flex items-center gap-gutter opacity-0 transition-opacity duration-base ease-base group-hover/message:opacity-100 focus-within:opacity-100',
 		className
 	)}
 	{...restProps}

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

@@ -84,7 +84,7 @@
 
 <div
 	class={cn(
-		'flex items-center gap-(--era-inset-chip) font-mono text-body leading-none text-muted tabular-nums',
+		'flex items-center gap-inset-chip font-mono text-body leading-none text-muted tabular-nums',
 		className
 	)}
 	{...restProps}
@@ -100,18 +100,16 @@
 		<Tooltip.Provider delayDuration={150}>
 			<Tooltip.Root>
 				<Tooltip.Trigger
-					class="inline-flex items-center text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg"
+					class="inline-flex items-center text-muted transition-colors duration-base ease-base hover:text-fg"
 					aria-label="Context window breakdown"
 				>
-					<Info class="size-(--era-h-icon)" aria-hidden="true" />
+					<Info class="size-icon" aria-hidden="true" />
 				</Tooltip.Trigger>
 				<Tooltip.Content
-					class="h-auto flex-col items-start gap-(--era-inset-pill) py-(--era-inset-pill) whitespace-normal"
+					class="h-auto flex-col items-start gap-inset-pill py-inset-pill whitespace-normal"
 				>
 					{#each rows as [label, value] (label)}
-						<span
-							class="flex w-full items-center justify-between gap-(--era-inset-control) tabular-nums"
-						>
+						<span class="flex w-full items-center justify-between gap-inset-control tabular-nums">
 							<span class="text-muted">{label}</span>
 							<span>{formatTokens(value)}</span>
 						</span>

package/dist/ai/message/message.svelte

@@ -17,7 +17,7 @@
 <div
 	data-role={from}
 	class={cn(
-		'group/message flex w-full min-w-0 flex-col gap-(--era-gap)',
+		'group/message flex w-full min-w-0 flex-col gap-gutter',
 		from === 'user' && 'items-end',
 		className
 	)}

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

@@ -21,7 +21,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Content class={cn('max-w-md p-(--era-gap)', className)}>
+	<Dialog.Content class={cn('max-w-md p-gutter', className)}>
 		<Command.Root bare>
 			<Command.Input icon={Search} placeholder="Search models…" autofocus />
 			<Command.List>
@@ -43,7 +43,7 @@
 										<img
 											src="https://models.dev/logos/{m.provider}.svg"
 											alt=""
-											class="size-(--era-h-icon) shrink-0 dark:invert"
+											class="size-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-icon)" />
+		<ChevronDown class="size-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-icon) text-muted" />
+				<ExternalLink class="size-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-control)', className)}
+	class={cn('flex flex-col gap-gutter overflow-hidden p-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-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)',
+		'flex h-control w-full era-interactive cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body text-bright hover:bg-highlight',
 		className
 	)}
 >
 	{#if children}{@render children()}{:else}<span class="truncate font-medium">{title}</span>{/if}
-	<ChevronsUpDown class="ml-auto size-(--era-h-icon) shrink-0 text-muted" />
+	<ChevronsUpDown class="ml-auto size-icon shrink-0 text-muted" />
 </Collapsible.Trigger>

package/dist/ai/plan/plan.svelte

@@ -14,10 +14,7 @@
 <Collapsible.Root
 	bind:open
 	data-streaming={streaming || undefined}
-	class={cn(
-		'group/plan flex flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow)',
-		className
-	)}
+	class={cn('group/plan flex flex-col rounded-bar bg-well p-panel shadow-sm', className)}
 >
 	{@render children?.()}
 </Collapsible.Root>

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

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