@signal9/era-ui 4.15.0 → 4.15.2

package/dist/generated-docs/llms-full.txt

@@ -915,6 +915,7 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | `content?` | `'tier' \| 'xxs'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
 stay concentric to them. `tier` (default) is one tier smaller; `xxs` is
 the compact pairing (xxs pills/fields in an sm or md bar). |
+| `divider?` | `boolean` | `false` | The flush cap-a-panel chrome: outset divider below, bottom rd-md. |
 | `children?` | `Snippet` | — | — |
 
 <!-- end: bar -->

package/dist/generated-docs/manifest.json

@@ -159,7 +159,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 181,
+      "tokenEstimate": 207,
       "sections": [
         "Import",
         "Props"

package/dist/os/index.d.ts

@@ -1,4 +1,4 @@
-export { PaneManager, getPaneManager, setPaneManagerContext, type Point, type Size, type Rect, type Insets, type Frame, type AppDefinition, type AppPane, type AppComponent, type AppProps, type PaneState, type JsonValue, type PaneSnapshot, type WorkspaceSnapshot, SNAPSHOT_VERSION, readSnapshot } from './pane-manager.svelte.js';
+export { PaneManager, getPaneManager, tryGetPaneManager, setPaneManagerContext, type Point, type Size, type Rect, type Insets, type Frame, type AppDefinition, type AppPane, type AppComponent, type AppProps, type PaneState, type JsonValue, type PaneSnapshot, type WorkspaceSnapshot, SNAPSHOT_VERSION, readSnapshot } from './pane-manager.svelte.js';
 export { persistWorkspace, loadWorkspace, saveWorkspace, clearWorkspace, WORKSPACE_STORAGE_KEY } from './workspace-storage.svelte.js';
 export { type SnapZone, type Workspace } from './pane-manager.svelte.js';
 export { NotificationService, getNotifications, setNotificationContext, type AppNotification, type NotifyOptions, type NotificationAction, type NotificationTone } from './notifications.svelte.js';

package/dist/os/index.js

@@ -2,7 +2,7 @@
 // Two stores (pane manager + notifications) shared via context, and the
 // components that render them: Desktop host, Pane, Taskbar (with its
 // built-in command bar), Toaster, NotificationCenter.
-export { PaneManager, getPaneManager, setPaneManagerContext, SNAPSHOT_VERSION, readSnapshot } from './pane-manager.svelte.js';
+export { PaneManager, getPaneManager, tryGetPaneManager, setPaneManagerContext, SNAPSHOT_VERSION, readSnapshot } from './pane-manager.svelte.js';
 export { persistWorkspace, loadWorkspace, saveWorkspace, clearWorkspace, WORKSPACE_STORAGE_KEY } from './workspace-storage.svelte.js';
 export {} from './pane-manager.svelte.js';
 export { NotificationService, getNotifications, setNotificationContext } from './notifications.svelte.js';

package/dist/os/pane-manager.svelte.d.ts

@@ -296,3 +296,7 @@ export declare class PaneManager {
 }
 export declare function setPaneManagerContext(pm: PaneManager): PaneManager;
 export declare function getPaneManager(): PaneManager;
+/** The optional form, for content that renders both inside and outside a
+ *  Desktop (a docs route under ?bare, a component demoed standalone):
+ *  undefined instead of a throw when no shell is up. */
+export declare function tryGetPaneManager(): PaneManager | undefined;

package/dist/os/pane-manager.svelte.js

@@ -448,3 +448,9 @@ export function getPaneManager() {
         throw new Error('getPaneManager() must be used inside a <Desktop>.');
     return pm;
 }
+/** The optional form, for content that renders both inside and outside a
+ *  Desktop (a docs route under ?bare, a component demoed standalone):
+ *  undefined instead of a throw when no shell is up. */
+export function tryGetPaneManager() {
+    return getContext(PM_KEY);
+}

package/dist/styles/themes.css

@@ -49,54 +49,8 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.25 0 none);
 	--color-fg: var(--color-11);
-	/* EMPHASIS INK IS TINTED BY THE THEME, not pinned to the top of the ramp.
-	 *
-	 * Step 12 is the ramp's extreme, and at the extreme a neutral ramp has run out
-	 * of colour — so `bright` came out pure white on the dark themes and pure
-	 * black on signalnine light. That is the one place a themed UI should NOT go
-	 * achromatic: bright is the emphasis ink (headings, titles, the sentence you
-	 * are meant to read first), so it is the text carrying the most identity and
-	 * it was carrying none.
-	 *
-	 * It now takes 12% of --color-primary — the theme's own accent, which is also
-	 * what the accent picker writes, so choosing an accent tints the emphasis text
-	 * with it live. 12% is a cast, not a colour: it moves lightness by ~0.02 (the
-	 * default dark page keeps 11.6:1) and lands chroma near 0.013, which reads as
-	 * "warm white" or "blue-black" rather than as a coloured heading.
-	 *
-	 * A theme whose accent IS neutral (the default) is unchanged by construction —
-	 * there is no hue to lend — which is the correct behaviour rather than an
-	 * exception.
-	 *
-	 * The achromatic step 12s are written with hue `none` rather than hue 0, and
-	 * that is load-bearing: hue 0 is a REAL hue (red), so oklch interpolation
-	 * walks it round to the accent's the short way and a black-plus-blue mix came
-	 * out magenta (signalnine light's #000 landed on hue 349). `none` marks the
-	 * hue as powerless — which it is at chroma 0 — so the mix adopts the accent's
-	 * hue instead of travelling to it. The colours themselves are unchanged
-	 * everywhere else: at chroma 0 the hue paints nothing. */
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-	/* Muted is body copy, not a de-emphasis wash — the /text page sets whole
-	 * paragraphs in it — so it does NOT sit flat on step 10: it leans 40% of the
-	 * way to --color-bright. Step 10 alone read as "greyed out" at paragraph
-	 * length (7.80:1 on the default dark page); the lean lands it at 10.43:1, and
-	 * the ordering muted < fg < bright still holds by a clear margin (0.80 / 0.86
-	 * / 0.93 in dark), so the mixed-tone case — muted prose beside a bright
-	 * literal — keeps all three of its levels.
-	 *
-	 * It aims at BRIGHT rather than fg on purpose: fg is the ink of controls and
-	 * labels, bright is the ink of the sentence you are meant to read, and body
-	 * copy belongs with the second one. It also means muted inherits the theme's
-	 * tint through bright, so prose is never a neutral grey on a themed page.
-	 *
-	 * The lean is toward a TOKEN rather than a fixed lightness so it mirrors
-	 * correctly in light mode (muted DARKENS toward bright) and keeps each theme's
-	 * own hue family — the tinted scales interpolate between two steps of their
-	 * own ramp, never toward neutral.
-	 *
-	 * signalnine sets its muted by hand from measured source colours and is
-	 * deliberately exempt. */
-	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
+	/* --color-bright / --color-muted: declared once for every theme — see the
+	 * shared rule right after this block. */
 	/* Inline link ink. Declared once here and inherited by every theme —
 	 * var(--color-bright) resolves in the element's own context, so a theme only
 	 * names this if it wants links to differ from emphasis text (signalnine
@@ -142,6 +96,54 @@
 	--color-warning-fg: oklch(0.162 0 none);
 }
 
+/* -------------------------------------------------- */
+/* Emphasis + body ink — one law for every theme      */
+/* -------------------------------------------------- */
+/* Declared ONCE and inherited, exactly like --color-link below in the base
+ * block: every theme selector targets the same elements (:root / a .dark or
+ * .light subtree), and the mixes reference tokens that resolve against THAT
+ * element's own ramp and accent — so each theme gets its own result from one
+ * formula, and a new theme cannot forget the law by not copying it.
+ *
+ * EMPHASIS INK IS TINTED BY THE THEME, not pinned to the top of the ramp.
+ * Step 12 is the ramp's extreme, and at the extreme a neutral ramp has run
+ * out of colour — bright used to come out pure white on the dark themes and
+ * literally #000 on signalnine light. That is the one place a themed UI
+ * should NOT go achromatic: bright is the emphasis ink (headings, titles,
+ * the sentence you are meant to read first), so it is the text carrying the
+ * most identity and it was carrying none. It takes 12% of --color-primary —
+ * the theme's own accent, and the property the accent picker writes, so
+ * choosing an accent tints the emphasis text live. 12% is a cast, not a
+ * colour: lightness moves ~0.02 (the default dark page keeps 11.6:1) and
+ * chroma lands near 0.013 — "warm white" / "blue-black", never a coloured
+ * heading. A theme whose accent IS neutral is unchanged by construction.
+ *
+ * The achromatic ramp steps are written with hue `none` rather than hue 0,
+ * and that is load-bearing here: hue 0 is a REAL hue (red), so oklch
+ * interpolation walks it toward the accent's hue the short way — #000 mixed
+ * with a CTA blue came out magenta. `none` marks the hue powerless (which it
+ * is at chroma 0), so the mix ADOPTS the accent's hue instead of travelling
+ * to it.
+ *
+ * MUTED IS BODY COPY, not a de-emphasis wash — the /text page sets whole
+ * paragraphs in it — so it does not sit flat on step 10: it leans 40% of the
+ * way to bright (10.43:1 on the default dark page; step 10 alone read as
+ * "greyed out" at paragraph length). It aims at BRIGHT rather than fg on
+ * purpose: fg is the ink of controls and labels, bright is the ink of the
+ * sentence you are meant to read, and body copy belongs with the second one
+ * — which also hands muted the theme's tint. The ordering muted < fg <
+ * bright holds by a clear margin (0.80 / 0.86 / 0.93 in dark).
+ *
+ * signalnine overrides muted only (measured source colours — Tomorrow's
+ * comment grey, yahoo's #5c7eb8): the single deliberate exception, and it
+ * wins on specificity, not on order. */
+:root,
+.dark,
+.light {
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
+}
+
 /* -------------------------------------------------- */
 /* Light theme (reversed scale)                       */
 /* -------------------------------------------------- */
@@ -166,8 +168,6 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.8 0 none);
 		--color-fg: var(--color-11);
-		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-		--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 		/* Accent tokens */
 		--color-primary: var(--color-fg);
@@ -205,8 +205,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.8 0 none);
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	/* Accent tokens */
 	--color-primary: var(--color-fg);
@@ -249,8 +247,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.252 0.024 56);
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	/* Warm sandstone primary + unexpected turquoise support. */
 	--color-primary: oklch(0.74 0.108 68);
@@ -293,8 +289,6 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.81 0.022 73);
 		--color-fg: var(--color-11);
-		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-		--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 		--color-primary: oklch(0.515 0.16 38);
 		--color-primary-fg: oklch(0.96 0.014 78);
@@ -328,8 +322,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.81 0.022 73);
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	--color-primary: oklch(0.515 0.16 38);
 	--color-primary-fg: oklch(0.96 0.014 78);
@@ -366,8 +358,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	--color-primary: oklch(0.8 0.034 54);
 	--color-primary-fg: var(--color-1);
@@ -404,8 +394,6 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.88 0.016 72);
 		--color-fg: var(--color-11);
-		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-		--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 		--color-primary: oklch(0.55 0.12 58);
 		--color-primary-fg: oklch(0.97 0.008 80);
@@ -439,8 +427,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.88 0.016 72);
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
-	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	--color-primary: oklch(0.55 0.12 58);
 	--color-primary-fg: oklch(0.97 0.008 80);
@@ -513,7 +499,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.255 0.006 84);
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 	/* Tomorrow's comment grey, which is what it uses for de-emphasised text. */
 	--color-muted: var(--color-8);
 	/* The link follows the accent — one ink for "this is interactive". */
@@ -608,7 +593,6 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
 		--color-fg: var(--color-11);
-		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 		--color-muted: var(--color-7);
 		--color-link: var(--color-10);
 		/* Cards read --era-surface-bg, which the surface contract defines as
@@ -651,7 +635,6 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
 	--color-fg: var(--color-11);
-	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 	--color-muted: var(--color-7);
 	--color-link: var(--color-10);
 	/* Cards read --era-surface-bg, which the surface contract defines as

package/dist/ui/bar/bar.svelte

@@ -34,6 +34,28 @@
 			content: {
 				tier: 'gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)',
 				xxs: ''
+			},
+			/**
+			 * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
+			 * an app's own section bars. One variant because the law kept getting
+			 * restated by hand at every site:
+			 *
+			 * - shrink-0: the bar holds its tier height in a flex column.
+			 * - The divider is drawn OUTSIDE the box (0 1px 0, never inset). An
+			 *   inset shadow paints over the bar's last pixel row, which belongs to
+			 *   the content's own bottom gap — a centred 18px control in a 24px bar
+			 *   has 3px above and 3 below, and the inset line ate one of the three.
+			 *   Outset costs no layout and puts the line on the boundary between
+			 *   the bar and what's beneath it.
+			 * - Corners: the TOP defers to the panel's own radius (transparent bar,
+			 *   rounded surface behind), the BOTTOM rounds to rd-md so the divider
+			 *   curves up at the ends and the bar reads as a long pill. A square
+			 *   in-app bar (Notes) passes `rounded-none` and tailwind-merge drops
+			 *   both. Collapses to flat in square mode like every radius.
+			 */
+			divider: {
+				true: 'shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]',
+				false: ''
 			}
 		},
 		compoundVariants: [
@@ -45,7 +67,7 @@
 			// token because nothing pairs a page header with pill-tier controls.)
 			{ size: 'sm', content: 'xxs', class: 'gap-(--era-xxs-inset-sm) px-(--era-xxs-inset-sm)' }
 		],
-		defaultVariants: { size: 'lg', content: 'tier' }
+		defaultVariants: { size: 'lg', content: 'tier', divider: false }
 	});
 </script>
 
@@ -57,6 +79,7 @@
 		ref = $bindable(null),
 		size = 'lg',
 		content = 'tier',
+		divider = false,
 		children,
 		class: className,
 		...restProps
@@ -70,10 +93,12 @@
 		 * the compact pairing (xxs pills/fields in an sm or md bar).
 		 */
 		content?: 'tier' | 'xxs';
+		/** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */
+		divider?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(barVariants({ size, content }), className)} {...restProps}>
+<div bind:this={ref} class={cn(barVariants({ size, content, divider }), className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/ui/bar/bar.svelte.d.ts

@@ -22,6 +22,28 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
         xxs: "";
     };
+    /**
+     * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
+     * an app's own section bars. One variant because the law kept getting
+     * restated by hand at every site:
+     *
+     * - shrink-0: the bar holds its tier height in a flex column.
+     * - The divider is drawn OUTSIDE the box (0 1px 0, never inset). An
+     *   inset shadow paints over the bar's last pixel row, which belongs to
+     *   the content's own bottom gap — a centred 18px control in a 24px bar
+     *   has 3px above and 3 below, and the inset line ate one of the three.
+     *   Outset costs no layout and puts the line on the boundary between
+     *   the bar and what's beneath it.
+     * - Corners: the TOP defers to the panel's own radius (transparent bar,
+     *   rounded surface behind), the BOTTOM rounds to rd-md so the divider
+     *   curves up at the ends and the bar reads as a long pill. A square
+     *   in-app bar (Notes) passes `rounded-none` and tailwind-merge drops
+     *   both. Collapses to flat in square mode like every radius.
+     */
+    divider: {
+        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        false: "";
+    };
 }, undefined, "flex items-center era-text-trim", {
     size: {
         sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
@@ -46,6 +68,28 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
         xxs: "";
     };
+    /**
+     * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
+     * an app's own section bars. One variant because the law kept getting
+     * restated by hand at every site:
+     *
+     * - shrink-0: the bar holds its tier height in a flex column.
+     * - The divider is drawn OUTSIDE the box (0 1px 0, never inset). An
+     *   inset shadow paints over the bar's last pixel row, which belongs to
+     *   the content's own bottom gap — a centred 18px control in a 24px bar
+     *   has 3px above and 3 below, and the inset line ate one of the three.
+     *   Outset costs no layout and puts the line on the boundary between
+     *   the bar and what's beneath it.
+     * - Corners: the TOP defers to the panel's own radius (transparent bar,
+     *   rounded surface behind), the BOTTOM rounds to rd-md so the divider
+     *   curves up at the ends and the bar reads as a long pill. A square
+     *   in-app bar (Notes) passes `rounded-none` and tailwind-merge drops
+     *   both. Collapses to flat in square mode like every radius.
+     */
+    divider: {
+        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        false: "";
+    };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
@@ -70,6 +114,28 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
         xxs: "";
     };
+    /**
+     * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
+     * an app's own section bars. One variant because the law kept getting
+     * restated by hand at every site:
+     *
+     * - shrink-0: the bar holds its tier height in a flex column.
+     * - The divider is drawn OUTSIDE the box (0 1px 0, never inset). An
+     *   inset shadow paints over the bar's last pixel row, which belongs to
+     *   the content's own bottom gap — a centred 18px control in a 24px bar
+     *   has 3px above and 3 below, and the inset line ate one of the three.
+     *   Outset costs no layout and puts the line on the boundary between
+     *   the bar and what's beneath it.
+     * - Corners: the TOP defers to the panel's own radius (transparent bar,
+     *   rounded surface behind), the BOTTOM rounds to rd-md so the divider
+     *   curves up at the ends and the bar reads as a long pill. A square
+     *   in-app bar (Notes) passes `rounded-none` and tailwind-merge drops
+     *   both. Collapses to flat in square mode like every radius.
+     */
+    divider: {
+        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        false: "";
+    };
 }, undefined>>;
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
@@ -83,6 +149,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
      * the compact pairing (xxs pills/fields in an sm or md bar).
      */
     content?: 'tier' | 'xxs';
+    /** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */
+    divider?: boolean;
     children?: Snippet;
 };
 declare const Bar: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/ui/context-menu/context-menu-content.svelte

@@ -15,16 +15,13 @@
 	<ContextMenu.Content
 		bind:ref
 		align="start"
-		// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
-		// to 0 on flat, so a menu there sat its rows flush against its own edges —
-		// the highlight ran edge to edge and the panel read as a list with no frame.
-		// The gutter is --era-gap, the same distance that separates the rows from
-		// each other, so a row sits an even gap from every edge (the pattern the
-		// conversations rail already documents). It is >= the panel inset at every
-		// density, so glass and bevel keep the frame protection the inset exists
-		// for.
+		// p-(--era-panel-inset), SURFACE-owned on purpose: 0 on flat — rows run the
+		// panel's full width, flush, and the first row sits directly under the
+		// anchor bar (the reference terminal look) — while glass and bevel keep the
+		// 2px frame that stops a full-width highlight from breaking their chrome.
+		// A fixed gutter was tried here and rejected: it padded flat menus too.
 		class={cn(
-			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
+	import Overlay from './dialog-overlay.svelte';
 	import { cn, type PartProps } from '../../utils/index.js';
 
 	let {
@@ -22,7 +23,7 @@
 </script>
 
 <Dialog.Portal>
-	<Dialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<Overlay />
 	<!-- border-divider: the pane's hairline-edge law. A floating panel must be
 	     separable from what's behind it, and on the flat surface shadow-lg
 	     collapses to none — without the hairline the whole edge was a tone step. -->

package/dist/ui/dialog/dialog-header.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { Dialog } from 'bits-ui';
 	import X from '@lucide/svelte/icons/x';
 	import { Bar } from '../bar';
-	import { Button } from '../button';
 	import { cn } from '../../utils/index.js';
+	import Close from './dialog-close.svelte';
 
 	let {
 		dismissable = true,
@@ -18,39 +17,25 @@
 	} = $props();
 </script>
 
-<!-- The pane handle's chrome, verbatim, for an overlay's top bar — one grammar
-     for every floating panel's header so a dialog and a pane read as the same
-     kind of surface:
+<!-- The pane handle's chrome — by reference, not by copy: Bar's `divider`
+     variant IS the cap law (outset divider, rd-md corners), shared with
+     Pane.Handle. What this part adds:
 
-       · an md bar holding xxs controls, walls and gap --era-xxs-inset-md
-       · the divider drawn OUTSIDE the box (an inset one eats a pixel of every
-         child's bottom gap — see Pane.Handle)
        · the leading side at --era-inset-md: a title has no corner to nest, so
          it takes the text inset, the same asymmetry the pane and the
          Conversations row document
-       · the × is the dismiss family's: an xxs Button whose tier default IS the
-         12px ink, destructive like Pane.Close
+       · the × is the dismiss family's: an xxs `Dialog.Close` whose tier
+         default IS the 12px ink, destructive like Pane.Close
 
      Rendered flush by Dialog.Content / Sheet.Content when passed as their
      `header` snippet, so the bar spans the panel edge to edge and the panel's
      radius follows this corner region (rd-md — the same law that sizes the
      pane's own corners). -->
-<Bar
-	size="md"
-	content="xxs"
-	class={cn(
-		'shrink-0 rounded-t-none rounded-b-(--era-rd-md) pl-(--era-inset-md) [box-shadow:0_1px_0_var(--color-divider-faded)] select-none',
-		className
-	)}
->
+<Bar size="md" content="xxs" divider class={cn('pl-(--era-inset-md) select-none', className)}>
 	{@render children?.()}
 	{#if dismissable}
-		<Dialog.Close>
-			{#snippet child({ props })}
-				<Button icon size="xxs" tone="destructive" aria-label="Close" class="ml-auto" {...props}>
-					<X />
-				</Button>
-			{/snippet}
-		</Dialog.Close>
+		<Close icon size="xxs" tone="destructive" aria-label="Close" class="ml-auto">
+			<X />
+		</Close>
 	{/if}
 </Bar>

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -15,16 +15,13 @@
 	<DropdownMenu.Content
 		bind:ref
 		align="start"
-		// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
-		// to 0 on flat, so a menu there sat its rows flush against its own edges —
-		// the highlight ran edge to edge and the panel read as a list with no frame.
-		// The gutter is --era-gap, the same distance that separates the rows from
-		// each other, so a row sits an even gap from every edge (the pattern the
-		// conversations rail already documents). It is >= the panel inset at every
-		// density, so glass and bevel keep the frame protection the inset exists
-		// for.
+		// p-(--era-panel-inset), SURFACE-owned on purpose: 0 on flat — rows run the
+		// panel's full width, flush, and the first row sits directly under the
+		// anchor bar (the reference terminal look) — while glass and bevel keep the
+		// 2px frame that stops a full-width highlight from breaking their chrome.
+		// A fixed gutter was tried here and rejected: it padded flat menus too.
 		class={cn(
-			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 			className
 		)}
 		{sideOffset}

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

@@ -15,16 +15,13 @@
 	<Menubar.Content
 		bind:ref
 		align="start"
-		// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
-		// to 0 on flat, so a menu there sat its rows flush against its own edges —
-		// the highlight ran edge to edge and the panel read as a list with no frame.
-		// The gutter is --era-gap, the same distance that separates the rows from
-		// each other, so a row sits an even gap from every edge (the pattern the
-		// conversations rail already documents). It is >= the panel inset at every
-		// density, so glass and bevel keep the frame protection the inset exists
-		// for.
+		// p-(--era-panel-inset), SURFACE-owned on purpose: 0 on flat — rows run the
+		// panel's full width, flush, and the first row sits directly under the
+		// anchor bar (the reference terminal look) — while glass and bevel keep the
+		// 2px frame that stops a full-width highlight from breaking their chrome.
+		// A fixed gutter was tried here and rejected: it padded flat menus too.
 		class={cn(
-			'z-50 w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+			'z-50 w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 			className
 		)}
 		{sideOffset}

package/dist/ui/pane/pane-handle.svelte

@@ -42,22 +42,12 @@
 	data-pane-handle
 	size="md"
 	content="xxs"
+	divider
 	class={cn(
-		// The divider is drawn OUTSIDE the box (0 1px 0), not inset.
-		//
-		// An inset shadow paints over the last pixel row INSIDE the bar, which is a
-		// row belonging to the content's own gap: a centred 18px control in a 24px
-		// bar has 3px above and 3px below, and the inset line ate one of the three
-		// below it. Every child of the bar therefore read 3px on top and right but
-		// 2px on the bottom — even by the box, visibly tight to the eye, which
-		// measures to the LINE.
-		//
-		// Outset costs no layout (so the bar keeps its full 24px content box and the
-		// concentric 3px walls) and puts the line where it belongs: the boundary
-		// between the bar and the content beneath it, rather than a pixel of the
-		// bar itself. It still follows the bottom radius, so the divider curves up
-		// at the ends exactly as before.
-		'shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)] select-none',
+		// The cap chrome (outset divider, rd-md bottom corners) is Bar's `divider`
+		// variant — the law and its full rationale live there, shared with
+		// Dialog.Header and any app's own section bars.
+		'select-none',
 		// THE CENTRE LAW — [minmax(0,1fr) minmax(0,auto) minmax(0,1fr)].
 		//
 		// A centred title must be centred on the BAR, not on whatever space the
@@ -77,16 +67,19 @@
 	{...restProps}
 >
 	{#if center}
-		<div class="flex min-w-0 items-center gap-(--era-gap)">{@render children?.()}</div>
+		<!-- gap-[inherit] on every cluster: whatever gap the Bar resolved — its
+		     content pairing, or a caller's override (the os pane sets --era-gap) —
+		     is also the rhythm INSIDE each cluster, so the two can never drift. -->
+		<div class="flex min-w-0 items-center gap-[inherit]">{@render children?.()}</div>
 		<!-- Anything interactive dropped in here (an editable title, a picker)
 		     carries data-pane-control itself: the bar is the drag zone, and only
 		     the control can know that a press on it means caret, not drag. -->
-		<div class="flex min-w-0 items-center justify-center gap-(--era-gap)">{@render center()}</div>
-		<div class="flex min-w-0 items-center justify-end gap-(--era-gap)">{@render trail?.()}</div>
+		<div class="flex min-w-0 items-center justify-center gap-[inherit]">{@render center()}</div>
+		<div class="flex min-w-0 items-center justify-end gap-[inherit]">{@render trail?.()}</div>
 	{:else}
 		{@render children?.()}
 		{#if trail}
-			<div class="ml-auto flex shrink-0 items-center gap-(--era-gap)">{@render trail()}</div>
+			<div class="ml-auto flex shrink-0 items-center gap-[inherit]">{@render trail()}</div>
 		{/if}
 	{/if}
 </Bar>