@signal9/era-ui 30.7.0 → 31.0.0

package/dist/ui/toggle-group/toggle-group-root.svelte.d.ts

@@ -1,17 +1,17 @@
 export declare const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined, "inline-flex items-center", {
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined>>;
 import { ToggleGroup } from 'bits-ui';

package/dist/ui/tooltip/tooltip-content.svelte

@@ -19,7 +19,7 @@
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
-			'z-overlay inline-flex h-pill items-center gap-gutter rounded-pill bg-elevated px-inset-pill text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur has-[svg]:gap-inset-pill',
+			'z-overlay inline-flex tier-pill items-center gap-gutter bg-elevated px-inset-pill text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur has-[svg]:gap-inset-pill',
 			className
 		)}
 		{sideOffset}

package/dist/ui/tree/tree-item.svelte

@@ -54,7 +54,7 @@
 	data-depth={item.depth}
 	style="padding-left: calc(var(--spacing-gutter) + {item.depth} * var(--era-h-control) / 2)"
 	class={cn(
-		'flex h-control era-interactive cursor-default items-center gap-gutter rounded-control pr-icon-inset-control text-body',
+		'flex tier-control era-interactive cursor-default items-center gap-gutter pr-icon-inset-control text-body',
 		'hover:bg-highlight focus:outline-none focus-visible:bg-highlight',
 		selected ? 'bg-fill text-bright' : 'text-fg',
 		item.node.disabled && 'pointer-events-none opacity-50',

package/dist/ui/video-player/video-player.svelte

@@ -1058,7 +1058,7 @@
 						-->
 						<span
 							aria-hidden="true"
-							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-pill -translate-x-1/2 items-center gap-gutter rounded-pill bg-elevated px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur"
+							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex tier-pill -translate-x-1/2 items-center gap-gutter bg-elevated px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur"
 						>
 							<span class="tabular-nums">{hoverTimeLabel}</span>
 							{#if hoverChapter}

package/dist/utils/tw-merge-config.d.ts

@@ -5,6 +5,9 @@ export declare const SPACING: string[];
 export declare const twMergeConfig: {
     extend: {
         classGroups: {
+            'era-tier': {
+                tier: string[];
+            }[];
             'backdrop-blur': string[];
             'font-size': {
                 text: string[];

package/dist/utils/tw-merge-config.js

@@ -42,6 +42,7 @@ export const SPACING = [
     'pill-inset-bar',
     'chip-inset-control',
     'chip-inset-bar',
+    'control-inset-bar',
     'glyph-icon',
     'glyph-pill'
 ];
@@ -122,6 +123,9 @@ export const twMergeConfig = {
         classGroups: {
             ...spacingGroups,
             ...radiusGroups,
+            // A tier utility owns height and radius as one indivisible geometry choice.
+            // The last tier-* supplied by a consumer must replace the component default.
+            'era-tier': [{ tier: TIERS }],
             // glass-blur sets backdrop-filter, so it conflicts with backdrop-blur.
             'backdrop-blur': ['glass-blur'],
             // Registered font sizes — without this they read as colours.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "30.7.0",
+	"version": "31.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -25,8 +25,8 @@
 		"check:classes": "node --experimental-strip-types scripts/check-classes.ts",
 		"check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge",
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run check:geometry && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run check:geometry",
 		"test": "npm run test:visual",
 		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
 		"check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
@@ -35,6 +35,7 @@
 		"check:install": "node --experimental-strip-types scripts/check-install.ts",
 		"check:reachable": "node --experimental-strip-types scripts/check-reachable.ts",
 		"check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts",
+		"check:geometry": "node --experimental-strip-types scripts/check-geometry.ts",
 		"verify:published": "node scripts/verify-published.mjs"
 	},
 	"files": [

package/skill/SKILL.md

@@ -20,11 +20,11 @@ whole system re-derives per element, so any `data-*` axis override on any
 subtree just works.
 
 **Write named classes, not var classes.** Era's public styling API is pure
-Tailwind-looking utilities: `h-control rounded-control px-gutter shadow`, never
+Tailwind-looking utilities: `tier-control px-gutter shadow`, never
 `h-(--era-h-control)`-style var spellings. Where Tailwind already names the concept
 era overloads it (bare `shadow` is the
 surface chrome, `transition-colors` rides the motion axis); where it doesn't,
-era registers its own (`h-control`, `gap-gutter`, `p-card`). The `--era-*` custom
+era registers its own (`tier-control`, `gap-gutter`, `p-card`). The `--era-*` custom
 properties remain public as the escape hatch for the few things without a
 name — noted inline below — but reaching for one when a named class exists is
 a review finding.
@@ -64,13 +64,13 @@ Named for the ROLE each rung plays, never for its size — a scale whose names
 can invert is a scale nobody reads correctly (this library once shipped an
 `xxs` that was bigger than its `xs`).
 
-| Tier      | Height      | Square         | Radius            | Use for                              |
-| --------- | ----------- | -------------- | ----------------- | ------------------------------------ |
-| `icon`    | `h-icon`    | `size-icon`    | `rounded-icon`    | a lucide glyph, switch thumbs        |
-| `pill`    | `h-pill`    | `size-pill`    | `rounded-pill`    | a badge/chip nested INSIDE a control |
-| `chip`    | `h-chip`    | `size-chip`    | `rounded-chip`    | standalone pills, switch tracks, KV  |
-| `control` | `h-control` | `size-control` | `rounded-control` | buttons, inputs, selects, triggers   |
-| `bar`     | `h-bar`     | `size-bar`     | `rounded-bar`     | bars, containers, dialog headers     |
+| Tier      | Geometry       | Width/min-width helpers      | Use for                              |
+| --------- | -------------- | ---------------------------- | ------------------------------------ |
+| `icon`    | `tier-icon`    | `w-icon`, `min-w-icon`       | a lucide glyph, switch thumbs        |
+| `pill`    | `tier-pill`    | `w-pill`, `min-w-pill`       | a badge/chip nested INSIDE a control |
+| `chip`    | `tier-chip`    | `w-chip`, `min-w-chip`       | standalone pills, switch tracks, KV  |
+| `control` | `tier-control` | `w-control`, `min-w-control` | buttons, inputs, selects, triggers   |
+| `bar`     | `tier-bar`     | `w-bar`, `min-w-bar`         | bars and bounded headers             |
 
 `min-h-*`, `min-w-*` and `w-*` exist across the same rungs. There is no escape
 hatch here any more: `min-w-control` is a real class, because role names collide
@@ -86,20 +86,20 @@ corners axis.
    must equal the gap between the children, on every side. `gap-gutter`
    (= sp/2) is the universal inter-element gap, and `p-gutter` (+ `px-`/`py-`)
    is the matching gutter a scrollable list or rail owes its rows.
-2. **Concentricity** — `rd-T − rd-U = (h-T − h-U)/2` for every tier pair. So:
-   give EVERY element the radius of its OWN height tier, center children with
-   the matching concentric inset, and nested corners share a center of
-   curvature automatically. The concentric insets are advanced enough to stay
+2. **Concentricity** — `rd-T − rd-U = (h-T − h-U)/2` for every tier pair.
+   `tier-T` binds height and radius so they cannot drift. A bounded container
+   names the ACTUAL inner tier and owns the matching inset; nested corners then
+   share a center automatically. The concentric insets are advanced enough to stay
    token-form, and each is named for the pair it centres:
    `--era-icon-inset-chip` (an icon inside a chip, = sp/2),
    `--era-icon-inset-pill`, `--era-pill-inset-control`, `--era-pill-inset-chip`,
    `--era-icon-inset-control`, `--era-icon-inset-bar`, `--era-chip-inset-control`,
    `--era-chip-inset-bar`.
 
-**The trap**: a container's radius follows its corner REGION's tier, never its
-overall bulk. A large panel whose corners are formed by a chip-tier handle bar
-is `rounded-chip`, however big the panel. Choosing radius by visual importance
-is the #1 way concentricity breaks.
+**The boundary**: an unbounded surface has no height tier. Its exposed corner is
+either optical or derives OUTWARD from a declared corner-bearing child. Never
+derive a bounded row's radius inward from an ancestor; that makes the row's
+relationship with its own badge or chip depend on unrelated outer chrome.
 
 ## Padding: geometric vs optical