@signal9/era-ui 4.14.1 → 4.15.0

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

@@ -1028,6 +1028,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

@@ -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/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;
 }

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
             });
         }

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

@@ -454,12 +454,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 +478,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 +492,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 +511,26 @@
 	 * 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)         */

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

@@ -7,11 +7,20 @@
 	let {
 		ref = $bindable(null),
 		children,
+		center,
+		trail,
 		class: className,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		ref?: HTMLDivElement | null;
 		children?: Snippet;
+		/** Content centred on the BAR itself (a document title, a breadcrumb).
+		 *  Presence switches the handle to its three-track grid — see below. */
+		center?: Snippet;
+		/** Trailing cluster. With `center` it is the grid's third track; without,
+		 *  it renders as the familiar ml-auto cluster. The close/window controls
+		 *  belong here, always LAST — extra trailing content goes before them. */
+		trail?: Snippet;
 	} = $props();
 </script>
 
@@ -49,9 +58,35 @@
 		// 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 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
+		// sides happened to leave (a flex-1 spacer centres on the leftovers, so the
+		// title drifts every time the lead or trail grows — the reference terminal
+		// app has exactly that drift). Equal fr tracks pin the middle to the true
+		// centre no matter how unequal the sides are; when a side outgrows its
+		// share it TRUNCATES (minmax 0) instead of shoving the title, and only when
+		// both sides are exhausted does the centre itself start to yield. Nothing
+		// ever overlaps and nothing ever jumps.
+		//
+		// Grid only when centred content exists: the flex flow is the right model
+		// for every other handle, and children/trail render in it untouched.
+		center && 'grid grid-cols-[minmax(0,1fr)_minmax(0,auto)_minmax(0,1fr)]',
 		className
 	)}
 	{...restProps}
 >
-	{@render children?.()}
+	{#if center}
+		<div class="flex min-w-0 items-center gap-(--era-gap)">{@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>
+	{:else}
+		{@render children?.()}
+		{#if trail}
+			<div class="ml-auto flex shrink-0 items-center gap-(--era-gap)">{@render trail()}</div>
+		{/if}
+	{/if}
 </Bar>

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

@@ -3,6 +3,13 @@ import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     children?: Snippet;
+    /** Content centred on the BAR itself (a document title, a breadcrumb).
+     *  Presence switches the handle to its three-track grid — see below. */
+    center?: Snippet;
+    /** Trailing cluster. With `center` it is the grid's third track; without,
+     *  it renders as the familiar ml-auto cluster. The close/window controls
+     *  belong here, always LAST — extra trailing content goes before them. */
+    trail?: Snippet;
 };
 declare const PaneHandle: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PaneHandle = ReturnType<typeof PaneHandle>;

package/dist/ui/pane/pane.svelte

@@ -23,6 +23,7 @@
 		onDragEnd,
 		onClose,
 		header,
+		center,
 		children,
 		class: className,
 		...restProps
@@ -51,6 +52,8 @@
 		onClose?: () => void;
 		/** Extra handle-bar content, rendered after the title. */
 		header?: Snippet;
+		/** Content centred on the bar itself — Pane.Handle's three-track grid. */
+		center?: Snippet;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -58,6 +61,11 @@
 <!-- The ergonomic single-component pane: a titled handle + body, composed from
      the same Pane.Root / Handle / Content / Close parts you can assemble by hand
      for richer layouts (e.g. tabs in the handle — see Pane.Tabs). -->
+<!-- Declared OUTSIDE <Root> — a snippet that is a direct child of a component
+     becomes one of its props, and Root has no `closeTrail`. -->
+{#snippet closeTrail()}
+	<Close onclick={onClose} />
+{/snippet}
 <Root
 	bind:ref
 	bind:position
@@ -71,11 +79,13 @@
 	class={className}
 	{...restProps}
 >
-	<Handle>
+	<!-- The close cluster rides the `trail` slot, so it lands in the grid's third
+	     track when `center` is present and in the ml-auto cluster when it isn't —
+	     one close button, correct in both geometries. -->
+	<Handle {center} trail={onClose ? closeTrail : undefined}>
 		{#if icon}{@const Icon = icon}<Icon class="size-(--era-h-xs) shrink-0 text-muted" />{/if}
 		{#if title}<span class="text-body text-bright">{title}</span>{/if}
 		{@render header?.()}
-		{#if onClose}<Close onclick={onClose} class="ml-auto" />{/if}
 	</Handle>
 	{#if children}
 		<Content>

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

@@ -33,6 +33,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     onClose?: () => void;
     /** Extra handle-bar content, rendered after the title. */
     header?: Snippet;
+    /** Content centred on the bar itself — Pane.Handle's three-track grid. */
+    center?: Snippet;
     children?: Snippet;
 };
 declare const Pane: Component<$$ComponentProps, {}, "position" | "size" | "ref">;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.14.1",
+	"version": "4.15.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",