@signal9/era-ui 30.8.0 → 31.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [31.0.0](https://github.com/sig-nine/era-ui/compare/v30.8.0...v31.0.0) (2026-08-21)
+
+### ⚠ BREAKING CHANGES
+
+* **geometry:** Bounded chrome now uses tier-* utilities; rounded-row and --era-container-rd are removed. Bar content no longer accepts tier and must name the actual inner tier when overriding its canonical default. Corner-mode changes now snap because intermediate radius scaling is not concentric.
+
+### Bug Fixes
+
+* **card:** sink content with the bevel press ([7dbc709](https://github.com/sig-nine/era-ui/commit/7dbc709ff723c645cc92e586f98fb4c9218c8c1c))
+
+### Code Refactoring
+
+* **geometry:** make tier concentricity structural ([e3d2c70](https://github.com/sig-nine/era-ui/commit/e3d2c7012039fb130163a1f4cfc39b745df07261))
+
 ## [30.8.0](https://github.com/sig-nine/era-ui/compare/v30.7.0...v30.8.0) (2026-08-16)
 
 ### Features

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

@@ -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-control items-center gap-gutter rounded-control pr-pill-inset-control pl-inset-control text-body',
+		'group/row relative flex tier-control items-center gap-gutter pr-pill-inset-control pl-inset-control text-body',
 		active
 			? 'bg-hover text-bright'
 			: 'text-fg hover:bg-highlight hover:shadow-highlight has-[[data-rail]:hover]:bg-transparent has-[[data-rail]:hover]:shadow-none',

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

@@ -13,7 +13,7 @@
 
 <Collapsible.Trigger
 	class={cn(
-		'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',
+		'flex tier-control w-full era-interactive cursor-pointer items-center gap-gutter px-inset-control text-body text-bright hover:bg-highlight',
 		className
 	)}
 >

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

@@ -13,16 +13,12 @@
 			<div class="group/att relative">
 				{#if a.previewUrl}
 					<!-- Density-scaled lg-tier tile with its own tier's radius. -->
-					<img
-						src={a.previewUrl}
-						alt={a.filename}
-						class="size-bar rounded-bar object-cover shadow-sm"
-					/>
+					<img src={a.previewUrl} alt={a.filename} class="tier-bar w-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-control items-center gap-inset-control rounded-control bg-well px-inset-control text-body leading-none text-muted shadow-sm"
+						class="flex tier-control items-center gap-inset-control bg-well px-inset-control text-body leading-none text-muted shadow-sm"
 					>
 						<Paperclip class="size-icon shrink-0" />
 						<span class="max-w-32 truncate">{a.filename}</span>

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

@@ -160,7 +160,7 @@
 	     highlight instantly so a fast pass down the tree doesn't smear. -->
 	<div
 		class={cn(
-			'flex h-control items-center gap-gutter rounded-control pl-inset-control text-body leading-none',
+			'flex tier-control items-center gap-gutter 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-highlight hover:shadow-highlight',

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

@@ -26,7 +26,7 @@
 -->
 <Collapsible.Trigger
 	class={cn(
-		'group/todo flex h-control w-full era-interactive cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body hover:bg-highlight',
+		'group/todo flex tier-control w-full era-interactive cursor-pointer items-center gap-gutter px-inset-control text-body hover:bg-highlight',
 		className
 	)}
 >

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

@@ -74,7 +74,7 @@
 	data-status={status}
 	aria-current={status === 'in_progress' ? 'step' : undefined}
 	class={cn(
-		'flex h-control items-center gap-inset-control rounded-control px-inset-control text-body',
+		'flex tier-control items-center gap-inset-control px-inset-control text-body',
 		tone.text,
 		className
 	)}

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

@@ -47,7 +47,7 @@
 	data-status={status}
 	{onclick}
 	class={cn(
-		'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',
+		'inline-flex tier-pill max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-gutter 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
 	)}

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

@@ -16,7 +16,7 @@
 </script>
 
 <div class={cn('flex min-h-0 flex-col overflow-hidden rounded-bar bg-well shadow-lg', className)}>
-	<Bar size="control" class="shrink-0 gap-gutter rounded-none">
+	<Bar size="control" topology="docked" class="shrink-0 gap-gutter rounded-none">
 		<Button icon size="chip" aria-label="Reload" onclick={() => (nonce += 1)}>
 			<RotateCw class="size-icon" />
 		</Button>

package/dist/dev/audit/audits/wall-is-isotropic.js

@@ -11,7 +11,7 @@ import { TOL, flexChildren, isHorizontalFlex, paintsChrome, tiers } from './_hel
  * A bar that pads 4px horizontally, gaps 4px horizontally, and centres its
  * children to 1px vertically passes BOTH — the first sees 4 against 4, the
  * second sees equal top and bottom padding — and is visibly wrong. Two shipped
- * this way. Bar's content="tier" used one token for all three sizes on the
+ * this way. Bar's old implicit content tier used one token for all three sizes on the
  * reasoning that chip⊃icon, control⊃chip and bar⊃control all equal sp/2, which
  * is true for two of them (chip is the rung that is not a clean sp multiple, so
  * the difference cancels for the pairs that span it and survives for the pair

package/dist/docs/css-utilities.js

@@ -225,7 +225,7 @@ export function parseUtilities(sources) {
         .flatMap(([file, source]) => [...parseFile(file, source), ...parseTheme(file, source)]);
 }
 const INTRO = [
-    "era's styling API is pure class names — write `h-control rounded-control px-gutter shadow`,",
+    "era's styling API is pure class names — write `tier-control px-gutter shadow`,",
     'never the `h-(--era-h-control)` var-class spelling. Everything below rides along',
     'with the stylesheet and needs no import:',
     '',
@@ -234,7 +234,7 @@ const INTRO = [
     '```',
     '',
     '```svelte',
-    '<button class="h-control rounded-control px-inset-control shadow text-body">era styled</button>',
+    '<button class="tier-control px-inset-control shadow text-body">era styled</button>',
     '```',
     '',
     'Alongside the `@utility` classes referenced below, era registers named theme',
@@ -244,6 +244,7 @@ const INTRO = [
     '',
     '| Stock-looking class | What it resolves to |',
     '|---|---|',
+    '| `tier-icon/pill/chip/control/bar` | indivisible bounded height + concentric radius |',
     '| `rounded-icon/pill/chip/control/bar` | the concentric radius ladder (collapses on `data-corners="square"`) |',
     '| `rounded-menu-item` | menu-row radius, concentric inside a `rounded-control` panel |',
     '| `shadow` / `shadow-lg` | resting control edge / floating panel chrome, per surface |',
@@ -269,10 +270,13 @@ const INTRO = [
     '`inset-*` and concentric `*-inset-*` insets, `glyph-*`) are registered as a',
     'Tailwind spacing scale, so every prefix derives automatically: `p-`, `px-`,',
     '`pt-`, `mt-`, `gap-`, `gap-x-`, `inset-`, `translate-`, and the rest. The TIER',
-    'names (`icon`, `pill`, `chip`, `control`, `bar`) are heights, not spacing, so',
+    'names (`icon`, `pill`, `chip`, `control`, `bar`) are dimensions, not spacing, so',
     'they are registered per prefix instead — `h-`, `w-`, `min-h-`, `min-w-` and',
     '`size-` — and the two vocabularies deliberately share no word. Putting a tier',
     'in the spacing scale would silently make `px-control` mean 24px of padding.',
+    'For chrome, use `tier-T`, which binds `h-T` and `rounded-T`; use the separate',
+    'dimension/radius names only for width, minimums, unbounded surfaces, or',
+    'asymmetric/docked corners.',
     '',
     'The var form (`h-(--era-h-control)`) still works and is the escape hatch for a',
     'token with no registered name — `--era-sp`, the press-sink offsets, anything',