@signal9/era-ui 4.14.1 → 4.15.1

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 -->
@@ -1028,6 +1029,7 @@ after the pane's own. Pass Compartments for reactive plugin sets. |
 | `onDragEnd?` | `(data: DragEventData) => void` | — | — |
 | `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
 | `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
+| `center?` | `Snippet` | — | Content centred on the bar itself — Pane.Handle's three-track grid. |
 | `children?` | `Snippet` | — | — |
 
 <!-- end: pane -->

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"
@@ -194,7 +194,7 @@
       "slug": "pane",
       "title": "Pane",
       "summary": "A draggable floating window with a handle bar.",
-      "tokenEstimate": 416,
+      "tokenEstimate": 441,
       "sections": [
         "Import",
         "Props"

package/dist/generated-docs/pane.md

@@ -29,4 +29,5 @@ after the pane's own. Pass Compartments for reactive plugin sets. |
 | `onDragEnd?` | `(data: DragEventData) => void` | — | — |
 | `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
 | `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
+| `center?` | `Snippet` | — | Content centred on the bar itself — Pane.Handle's three-track grid. |
 | `children?` | `Snippet` | — | — |

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

@@ -150,6 +150,14 @@ export interface AppDefinition {
      *  live AppPane too, so a host can swap it as the pane's content
      *  changes. */
     actions?: Snippet;
+    /** Replaces the default icon+title cluster on the LEFT of the title bar.
+     *  Assignable live, like `actions`. */
+    lead?: Snippet;
+    /** Content centred on the title bar itself (a document title, a breadcrumb) —
+     *  rendered in Pane.Handle's three-track grid, so it stays pinned to the true
+     *  centre of the bar however the sides grow. Assignable live. Interactive
+     *  content in it must carry data-pane-control (the bar is the drag zone). */
+    center?: Snippet;
 }
 /** A live pane instance in the registry. */
 export interface AppPane {
@@ -173,6 +181,10 @@ export interface AppPane {
     minimizable: boolean;
     bodyClass?: string;
     actions?: Snippet;
+    /** See AppDefinition — both assignable on the live pane, which is how an
+     *  app claims its own chrome: `pane.center = mySnippet` from the body. */
+    lead?: Snippet;
+    center?: Snippet;
     /** App-specific state, carried verbatim through a snapshot. */
     props?: JsonValue;
 }
@@ -284,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

@@ -183,6 +183,8 @@ export class PaneManager {
             minimizable: app.minimizable ?? true,
             bodyClass: app.bodyClass,
             actions: app.actions,
+            lead: app.lead,
+            center: app.center,
             props: app.props
         };
         this.panes.push(win);
@@ -364,6 +366,8 @@ export class PaneManager {
                 minimizable: app.minimizable ?? true,
                 bodyClass: app.bodyClass,
                 actions: app.actions,
+                lead: app.lead,
+                center: app.center,
                 props: s.props ?? app.props
             });
         }
@@ -444,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/os/pane.svelte

@@ -92,14 +92,21 @@
 	     from the edge against 5px above and below it — read as crowded because it
 	     was. --era-inset-md is (h-md − text)/2, so the label now starts the same
 	     distance in from the edge as it sits from the top. -->
-	<Pane.Handle class="gap-(--era-gap) pl-(--era-inset-md)">
-		{#if pane.icon}
-			{@const Icon = pane.icon}
-			<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+	<Pane.Handle class="gap-(--era-gap) pl-(--era-inset-md)" center={pane.center}>
+		{#if pane.lead}
+			<!-- The app replaced the whole icon+title cluster. Its content lives in
+			     the drag zone like the default one; anything interactive in it
+			     carries data-pane-control itself. -->
+			{@render pane.lead()}
+		{:else}
+			{#if pane.icon}
+				{@const Icon = pane.icon}
+				<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+			{/if}
+			<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
+				>{pane.title}</span
+			>
 		{/if}
-		<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
-			>{pane.title}</span
-		>
 		<!-- Close / minimize / maximize. Deliberately NOT data-pane-control (same as
 		     the raw Pane.Close): a left press-and-HOLD drags the pane — neodrag only
 		     drags the primary button and suppresses the trailing click after a real
@@ -109,7 +116,7 @@
 		     rhythm as the rest of the handle. Like the close button they carry no
 		     data-pane-control, so a press-and-hold anywhere on the bar still drags
 		     the pane and only a clean click activates them. -->
-		<div class="ml-auto flex shrink-0 items-center gap-(--era-gap)">
+		{#snippet trail()}
 			{@render pane.actions?.()}
 			<!-- The macOS traffic lights, one button: red = close at rest, and the
 			     held preview recolours to the action it will commit — yellow for
@@ -158,7 +165,7 @@
 					<X />
 				{/if}
 			</Button>
-		</div>
+		{/snippet}
 	</Pane.Handle>
 
 	<Pane.Content class={pane.bodyClass}>

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);
@@ -454,12 +440,16 @@
 }
 
 /* -------------------------------------------------- */
-/* Signalnine — dark (Tomorrow, measured)             */
+/* Signalnine — dark (Tomorrow bones, amber ink)      */
 /*                                                    */
-/* The classic imageboard dark theme. The accents and   */
-/* the upper scale are Tomorrow Night's own values,     */
-/* converted to OKLCH — comment and foreground land     */
-/* exactly at steps 8 and 11.                           */
+/* The classic imageboard dark theme. The scale keeps   */
+/* Tomorrow Night's lightnesses — comment and           */
+/* foreground still land at steps 8 and 11 — but the    */
+/* BLUE IS GONE: the ramp's cast and the accent are     */
+/* both a cool amber (hue 84, the yellow side of        */
+/* amber), so chrome, links and emphasis share one      */
+/* temperature instead of a blue ramp under yellow      */
+/* accents.                                             */
 /*                                                      */
 /* The DARK END is deliberately deeper than Tomorrow's. */
 /* Its #1d1f21 page read light next to era's other dark */
@@ -474,11 +464,11 @@
 /* the link blue had been placed IN the ramp, which     */
 /* forced the steps under it to swerve to reach it.     */
 /* Tomorrow does not work that way and neither does     */
-/* this now — the ramp is one cool gray from end to     */
-/* end, and the blue, red, green and yellow are ACCENT  */
-/* tokens sitting on top of it. That is what an         */
-/* imageboard actually looks like: gray chrome, colour  */
-/* carried by the text.                                 */
+/* this now — the ramp is one gray from end to end      */
+/* (cast faintly amber, never placed IN the ramp), and  */
+/* the amber, red and green are ACCENT tokens sitting   */
+/* on top of it. That is what an imageboard actually    */
+/* looks like: gray chrome, colour carried by the text. */
 /* -------------------------------------------------- */
 :root[data-theme='signalnine'],
 [data-theme='signalnine'].dark {
@@ -488,18 +478,18 @@
 	 * own #1d1f21 — that read too light beside the other dark themes. Everything
 	 * from step 2 up re-spaces evenly from the new floor to the comment anchor,
 	 * so lowering the page did not leave a cliff between it and the panels. */
-	--color-1: oklch(0.168 0.005 248); /* #0d0f11 */
-	--color-2: oklch(0.225 0.007 258); /* #1a1c1f */
-	--color-3: oklch(0.29 0.01 258); /* #282c30 */
-	--color-4: oklch(0.355 0.011 258); /* #383c42 */
-	--color-5: oklch(0.435 0.011 257);
-	--color-6: oklch(0.515 0.01 256);
-	--color-7: oklch(0.596 0.009 255);
-	--color-8: oklch(0.677 0.006 200); /* #939899  Tomorrow comment */
-	--color-9: oklch(0.73 0.005 190);
-	--color-10: oklch(0.78 0.005 180);
-	--color-11: oklch(0.83 0.004 157); /* #c5c8c6  Tomorrow foreground */
-	--color-12: oklch(0.9 0.004 157);
+	--color-1: oklch(0.168 0.004 84); /* graphite floor, amber-cast */
+	--color-2: oklch(0.225 0.005 84);
+	--color-3: oklch(0.29 0.007 84);
+	--color-4: oklch(0.355 0.008 84);
+	--color-5: oklch(0.435 0.008 84);
+	--color-6: oklch(0.515 0.008 84);
+	--color-7: oklch(0.596 0.007 84);
+	--color-8: oklch(0.677 0.006 84); /* comment grey, warmed */
+	--color-9: oklch(0.73 0.005 84);
+	--color-10: oklch(0.78 0.005 84);
+	--color-11: oklch(0.83 0.005 84); /* foreground, warmed */
+	--color-12: oklch(0.9 0.005 84);
 
 	/* Border sits a step LOWER than the usual 5. Tomorrow's own rules are
 	 * quiet — its border colour is the current-line grey — and at step 5 the
@@ -507,25 +497,25 @@
 	 * page, inside the 1.7–3.2 the other dark themes hold. */
 	--color-border: var(--color-4);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.255 0.009 258);
+	--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 blue every imageboard reader knows. */
-	--color-link: oklch(0.6975 0.0551 244.3); /* #81a2be */
-
-	/* Tomorrow's accents, unmodified. They are pastels, so each takes DARK text
-	 * — the page colour — rather than white. */
-	--color-primary: oklch(0.6975 0.0551 244.3); /* #81a2be  blue */
-	--color-primary-fg: oklch(0.168 0.005 248);
+	/* The link follows the accent — one ink for "this is interactive". */
+	--color-link: var(--color-primary);
+
+	/* A COOL amber: hue 84 — the yellow side of amber, not orange — with the
+	 * pastel restraint of the Tomorrow accents it replaces, so it still takes
+	 * DARK text (the page colour) rather than white. */
+	--color-primary: oklch(0.76 0.115 84); /* cool amber */
+	--color-primary-fg: oklch(0.168 0.004 84);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	--color-destructive: oklch(0.6308 0.1298 21.4); /* #cc6666  red */
-	--color-destructive-fg: oklch(0.168 0.005 248);
+	--color-destructive-fg: oklch(0.168 0.004 84);
 	--color-success: oklch(0.7733 0.1095 113.4); /* #b5bd68  green */
-	--color-success-fg: oklch(0.168 0.005 248);
+	--color-success-fg: oklch(0.168 0.004 84);
 	--color-warning: oklch(0.8462 0.1115 82.9); /* #f0c674  yellow */
-	--color-warning-fg: oklch(0.168 0.005 248);
+	--color-warning-fg: oklch(0.168 0.004 84);
 }
 
 /* Signalnine — light (yahoo.co.jp, measured)         */
@@ -603,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
@@ -646,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/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. -->