@signal9/era-ui 4.14.0 → 4.15.0

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.0",
+	"version": "4.15.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",