@signal9/era-ui 7.0.0 → 9.0.0

package/dist/ai/suggestion/suggestion.svelte

@@ -16,13 +16,13 @@
 	} = $props();
 </script>
 
-<!-- A standalone pill is the sm tier: h-sm + rd-sm come from the Button
+<!-- A standalone pill is the sm tier: h-chip + rd-sm come from the Button
      variant; the sides take Chip's glyph-advance padding (pill-sm, ~2× the
      vertical inset) so the words breathe. Era pills are rd-sm, not
      full-round — touch mode alone pills the ladder. -->
 <Button
 	size="sm"
-	class={cn('shrink-0 px-(--era-pill-sm)', className)}
+	class={cn('shrink-0 px-(--era-chip-px)', className)}
 	onclick={() => onSelect?.(suggestion)}
 >
 	{#if children}{@render children()}{:else}{suggestion}{/if}

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

@@ -55,7 +55,7 @@
 	tone="well"
 	data-status={agent.status}
 	class={cn(
-		'flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-sm)',
+		'flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)',
 		agent.status === 'failed' && 'outline -outline-offset-1 outline-destructive/60',
 		className
 	)}

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

@@ -40,7 +40,7 @@
 <Card
 	tone="well"
 	data-kind={artifact.kind}
-	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-sm)', className)}
+	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)', className)}
 	{...restProps}
 >
 	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">

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

@@ -41,7 +41,7 @@
 	{...restProps}
 >
 	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
-		<GitMerge class="size-(--era-h-xs) shrink-0 text-muted" aria-hidden="true" />
+		<GitMerge class="size-(--era-h-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

@@ -27,7 +27,7 @@
 {#if barriers.length > 0}
 	<div
 		class={cn(
-			'flex min-w-0 flex-col gap-(--era-pad-sm) border-t border-divider-faded p-(--era-pad-sm)',
+			'flex min-w-0 flex-col gap-(--era-pad-panel) border-t border-divider-faded p-(--era-pad-panel)',
 			className
 		)}
 		{...restProps}

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

@@ -42,7 +42,7 @@
 	{/if}
 	{#if tally.sandboxes > 0}
 		<Badge>
-			<Box class="size-(--era-h-xs)" aria-hidden="true" />
+			<Box class="size-(--era-h-icon)" aria-hidden="true" />
 			{tally.sandboxes}
 		</Badge>
 	{/if}

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

@@ -50,7 +50,7 @@
 
 <div
 	class={cn(
-		'flex h-(--era-h-md) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-md) font-mono text-body era-text-trim',
+		'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',
 		className
 	)}
 	{...restProps}

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-lg)*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-(--era-gap) p-(--era-gap)',
 		className
 	)}
 	{...restProps}
 >
 	{#if nodes.length === 0}
-		<div class="px-(--era-inset-md) py-(--era-gap) text-body text-muted">
+		<div class="px-(--era-inset-control) py-(--era-gap) 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-md) shrink-0 items-center gap-(--era-gap) px-(--era-inset-md) text-body era-text-trim',
+		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) px-(--era-inset-control) text-body era-text-trim',
 		className
 	)}
 	{...restProps}

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

@@ -160,8 +160,8 @@
 	     highlight instantly so a fast pass down the tree doesn't smear. -->
 	<div
 		class={cn(
-			'flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) pl-(--era-inset-md) text-body era-text-trim',
-			hasActions ? 'pr-(--era-xxs-inset-md)' : 'pr-(--era-inset-md)',
+			'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)',
 			(hasChildren || hasDetail) && 'cursor-pointer',
 			active
 				? 'bg-hover text-bright'
@@ -183,14 +183,14 @@
 			     single source of truth, without the ancestry. -->
 			<ChevronRight
 				class={cn(
-					'size-(--era-h-xs) shrink-0 text-muted transition-transform duration-(--era-duration) ease-(--era-ease)',
+					'size-(--era-h-icon) shrink-0 text-muted transition-transform duration-(--era-duration) ease-(--era-ease)',
 					open && 'rotate-90'
 				)}
 				aria-hidden="true"
 			/>
 		{:else}
 			<!-- Keeps every row's dot on the same column, expandable or not. -->
-			<span class="size-(--era-h-xs) shrink-0" aria-hidden="true"></span>
+			<span class="size-(--era-h-icon) shrink-0" aria-hidden="true"></span>
 		{/if}
 
 		<Dot status={agent.status} />
@@ -225,7 +225,7 @@
 					event.stopPropagation();
 					toggleDetail();
 				}}
-				class="shrink-0 era-interactive cursor-pointer rounded-(--era-rd-xxs) px-(--era-pill-xxs) 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-(--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"
 			>
 				{detailLabel}
 			</button>
@@ -263,7 +263,7 @@
 		<Collapsible.Root bind:open={detailOpen}>
 			<Collapsible.Content class="era-collapse">
 				<div
-					class="min-w-0 pr-(--era-inset-md) pb-(--era-gap) pl-[calc(var(--era-inset-md)+var(--era-h-xs)+var(--era-gap))]"
+					class="min-w-0 pr-(--era-inset-control) pb-(--era-gap) pl-[calc(var(--era-inset-control)+var(--era-h-icon)+var(--era-gap))]"
 				>
 					{@render detail?.(agent)}
 				</div>
@@ -277,7 +277,7 @@
 			     straight down from the parent's own arrow into its children. -->
 			<div
 				role="group"
-				class="ml-[calc(var(--era-inset-md)+var(--era-h-xs)/2)] border-l border-divider-faded"
+				class="ml-[calc(var(--era-inset-control)+var(--era-h-icon)/2)] border-l border-divider-faded"
 			>
 				{@render children?.()}
 			</div>

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

@@ -59,6 +59,6 @@
 	)}
 	{...restProps}
 >
-	<Icon class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Icon class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	{name}
 </span>

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

@@ -52,7 +52,7 @@
 <div
 	bind:this={ref}
 	class={cn(
-		'flex min-w-0 flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow)',
+		'flex min-w-0 flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

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

@@ -58,16 +58,16 @@
 	<!-- 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-xs) shrink-0', sandbox.busy && 'animate-pulse')}
+		class={cn('size-(--era-h-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-icon-xxs) shrink-0" aria-hidden="true" />
+		<Camera class="size-(--era-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-icon-xxs) shrink-0" aria-hidden="true" />
+		<GitBranch class="size-(--era-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

@@ -185,7 +185,7 @@
 	{...restProps}
 >
 	{#if rows.length === 0}
-		<div class="px-(--era-inset-md) py-(--era-gap) text-body text-muted">
+		<div class="px-(--era-inset-control) py-(--era-gap) text-body text-muted">
 			{#if empty}{@render empty()}{:else}No agents yet.{/if}
 		</div>
 	{:else}

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

@@ -9,7 +9,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-sm) shadow-none',
+		'border-divider-faded border-s-2 bg-transparent p-0 ps-(--era-pad-panel) shadow-none',
 		className
 	)}
 >

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

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

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

@@ -47,14 +47,14 @@
 	data-status={status}
 	{onclick}
 	class={cn(
-		'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',
+		'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',
 		active && 'bg-fill text-fg',
 		className
 	)}
 	{...restProps}
 >
 	<Icon
-		class={cn('size-(--era-h-xs) shrink-0', status === 'running' && 'animate-pulse')}
+		class={cn('size-(--era-h-icon) shrink-0', status === 'running' && 'animate-pulse')}
 		aria-hidden="true"
 	/>
 	<span class={cn('min-w-0 truncate', status === 'running' && 'era-shimmer')}>

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

@@ -19,7 +19,7 @@
 	const failed = $derived(exitCode !== undefined && exitCode !== 0);
 </script>
 
-<div class="flex min-w-0 flex-col gap-(--era-pad-sm)">
+<div class="flex min-w-0 flex-col gap-(--era-pad-panel)">
 	{#if command || failed}
 		<div class="flex min-w-0 items-center gap-(--era-gap)">
 			{#if command}
@@ -39,14 +39,14 @@
 	{#if stdout}
 		<Step.Section label="stdout">
 			<pre
-				class="min-w-0 overflow-x-auto rounded-(--era-rd-md) bg-(--era-field-bg) p-(--era-pad-sm) font-mono text-body whitespace-pre-wrap text-muted shadow-(--era-shadow-well)">{stdout}</pre>
+				class="min-w-0 overflow-x-auto rounded-(--era-rd-control) bg-(--era-field-bg) p-(--era-pad-panel) font-mono text-body whitespace-pre-wrap text-muted shadow-(--era-shadow-well)">{stdout}</pre>
 		</Step.Section>
 	{/if}
 
 	{#if stderr}
 		<Step.Section label="stderr">
 			<pre
-				class="min-w-0 overflow-x-auto rounded-(--era-rd-md) bg-(--era-field-bg) p-(--era-pad-sm) font-mono text-body whitespace-pre-wrap text-destructive shadow-(--era-shadow-well)">{stderr}</pre>
+				class="min-w-0 overflow-x-auto rounded-(--era-rd-control) bg-(--era-field-bg) p-(--era-pad-panel) font-mono text-body whitespace-pre-wrap text-destructive shadow-(--era-shadow-well)">{stderr}</pre>
 		</Step.Section>
 	{/if}
 </div>

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

@@ -14,7 +14,7 @@
 </script>
 
 <Step.Summary>
-	<Wrench class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Wrench class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	<span class="truncate text-fg">{type}</span>
 	{@render children?.()}
 </Step.Summary>

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

@@ -17,17 +17,17 @@
 
 <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
 	)}
 >
 	<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)" />
+			<RotateCw class="size-(--era-h-icon)" />
 		</Button>
 		<Input
 			bind:value={draft}
-			class="h-(--era-h-sm) flex-1"
+			class="h-(--era-h-chip) flex-1"
 			placeholder="https://…"
 			onkeydown={(e: KeyboardEvent) => {
 				if (e.key === 'Enter') {

package/dist/ai/workflow/canvas.svelte

@@ -12,7 +12,7 @@
 
 <!-- Thin era skin over Svelte Flow — the graph engine is xyflow's. This file
      lives on its own subpath so the dependency stays opt-in. -->
-<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-lg) shadow-(--era-shadow)">
+<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-bar) shadow-(--era-shadow)">
 	<Background bgColor="var(--color-1)" />
 	<Controls />
 	{@render children?.()}

package/dist/ai/workflow/node.svelte

@@ -12,18 +12,18 @@
 
 <div
 	class={cn(
-		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
+		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
 		className
 	)}
 >
 	<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"
+			class="flex h-(--era-h-control) items-center border-b border-divider-faded px-(--era-inset-control) font-medium text-bright"
 		>
 			{title}
 		</div>
 	{/if}
-	<div class="p-(--era-inset-md) text-fg">{@render children?.()}</div>
+	<div class="p-(--era-inset-control) text-fg">{@render children?.()}</div>
 	<Handle type="source" position={Position.Right} />
 </div>

package/dist/apps/llm-shell/llm-shell.svelte

@@ -116,7 +116,7 @@
 		<AI.Conversations.Root>
 			{#snippet header()}
 				<Button class="w-full justify-start" onclick={() => onNewChat?.()}>
-					<Plus class="size-xs" aria-hidden="true" />
+					<Plus class="size-icon" aria-hidden="true" />
 					New chat
 				</Button>
 			{/snippet}
@@ -143,7 +143,7 @@
 	<!-- Thread -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if runStatus !== 'idle'}
-			<div class="shrink-0 border-b border-divider px-(--era-pad-md) py-gutter">
+			<div class="shrink-0 border-b border-divider px-(--era-pad-card) py-gutter">
 				<AI.RunStatus.Root
 					status={runStatus}
 					tools={{
@@ -174,7 +174,7 @@
 					{:else}
 						<AI.Conversation.EmptyState title={emptyTitle} description={emptyDescription}>
 							{#snippet icon()}
-								<Sparkles class="size-md text-muted" />
+								<Sparkles class="size-control text-muted" />
 							{/snippet}
 						</AI.Conversation.EmptyState>
 					{/if}
@@ -187,7 +187,7 @@
 			<AI.Conversation.ScrollButton />
 		</AI.Conversation.Root>
 
-		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-md) pt-0">
+		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-card) pt-0">
 			{#if active && active.messages.length === 0 && suggestions.length > 0}
 				<div class="pb-(--era-gap)">
 					<AI.Suggestions.Root>
@@ -265,7 +265,7 @@
 			{#snippet expanded()}
 				{@const tool = block.tools.find((t) => t.id === openChip)}
 				{#if tool}
-					<Card tone="well" class="flex min-w-0 flex-col gap-(--era-pad-sm) p-(--era-pad-sm)">
+					<Card tone="well" class="flex min-w-0 flex-col gap-(--era-pad-panel) p-(--era-pad-panel)">
 						<AI.Tool.Input input={tool.input} />
 						<AI.Tool.Output output={tool.output} />
 					</Card>
@@ -314,10 +314,10 @@
 		{#if !block.streaming && block.text}
 			<AI.Message.Toolbar>
 				<AI.Actions.Action tooltip="Copy" onclick={() => copyText(block.text)}>
-					<Copy class="size-xs" />
+					<Copy class="size-icon" />
 				</AI.Actions.Action>
 				<AI.Actions.Action tooltip="Regenerate" onclick={() => copyText(block.text)}>
-					<RotateCcw class="size-xs" />
+					<RotateCcw class="size-icon" />
 				</AI.Actions.Action>
 			</AI.Message.Toolbar>
 			{#if block.usage}

package/dist/apps/notes/editor/slash-menu.svelte

@@ -44,16 +44,18 @@
 
 <!-- Rows carry shrink-0 deliberately. This is a flex COLUMN with a capped
      height, so without it flex compresses the children to fit rather than
-     letting the panel scroll: 12 items in an 8-row box rendered every h-md row
+     letting the panel scroll: 12 items in an 8-row box rendered every h-control row
      at 16px against 14px text, which read as a menu with no padding at all.
      overflow-y-auto never engaged, because the content had already been
      squashed to fit. -->
 <div
 	bind:this={list}
-	class="scrollbar-none flex max-h-[calc(var(--era-h-md)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-md bg-elevated p-menu shadow-lg glass-blur"
+	class="scrollbar-none flex max-h-[calc(var(--era-h-control)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-control bg-elevated p-menu shadow-lg glass-blur"
 >
 	{#if items.length === 0}
-		<div class="flex h-md shrink-0 items-center px-inset-md text-body era-text-trim text-muted">
+		<div
+			class="flex h-control shrink-0 items-center px-inset-control text-body era-text-trim text-muted"
+		>
 			No commands
 		</div>
 	{:else}
@@ -61,7 +63,7 @@
 			{@const Icon = item.icon}
 			<button
 				type="button"
-				class="flex h-md w-full shrink-0 cursor-pointer items-center gap-gutter rounded-item px-inset-md text-left text-body era-text-trim text-fg {i ===
+				class="flex h-control w-full shrink-0 cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-left text-body era-text-trim text-fg {i ===
 				selected
 					? 'bg-highlight shadow-highlight'
 					: ''}"
@@ -73,7 +75,7 @@
 					onSelect(i);
 				}}
 			>
-				<Icon class="size-xs shrink-0" />
+				<Icon class="size-icon shrink-0" />
 				<span class="flex-1">{item.title}</span>
 				<span class="shrink-0 text-muted">{item.description}</span>
 			</button>