@signal9/era-ui 4.14.1 → 4.15.1

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/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>
 
@@ -33,25 +42,44 @@
 	data-pane-handle
 	size="md"
 	content="xxs"
+	divider
 	class={cn(
-		// The divider is drawn OUTSIDE the box (0 1px 0), not inset.
+		// 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)].
 		//
-		// 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.
+		// 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.
 		//
-		// 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',
+		// 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}
+		<!-- 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-[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-[inherit]">{@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/dist/ui/sheet/sheet-content.svelte

@@ -9,11 +9,15 @@
 	export const sheetVariants = tv({
 		base: 'fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur',
 		variants: {
+			// The two axes meet at the corners: the SIDE picks which corners are
+			// detached from the screen edge, the HEADER picks their radius. Stated
+			// once each — the side rounds a variable (--sheet-rd) and the header
+			// sets it — instead of the 8-row side x header product it replaces.
 			side: {
-				top: 'inset-x-0 top-0 max-h-[85dvh]',
-				bottom: 'inset-x-0 bottom-0 max-h-[85dvh]',
-				left: 'inset-y-0 left-0 w-[min(20rem,85vw)]',
-				right: 'inset-y-0 right-0 w-[min(20rem,85vw)]'
+				top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)',
+				bottom: 'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--sheet-rd)',
+				left: 'inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--sheet-rd)',
+				right: 'inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--sheet-rd)'
 			},
 			/**
 			 * With a header the sheet is sectioned (the bar flush, the BODY scrolls
@@ -22,18 +26,11 @@
 			 * holding xxs controls, the pane's own corner law. Without one, the
 			 * padded rd-lg surface is unchanged.
 			 */
-			header: { true: '', false: 'gap-(--era-gap) overflow-y-auto p-(--era-pad-md)' }
+			header: {
+				true: '[--sheet-rd:var(--era-rd-md)]',
+				false: '[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)'
+			}
 		},
-		compoundVariants: [
-			{ side: 'top', header: false, class: 'rounded-b-(--era-rd-lg)' },
-			{ side: 'bottom', header: false, class: 'rounded-t-(--era-rd-lg)' },
-			{ side: 'left', header: false, class: 'rounded-r-(--era-rd-lg)' },
-			{ side: 'right', header: false, class: 'rounded-l-(--era-rd-lg)' },
-			{ side: 'top', header: true, class: 'rounded-b-(--era-rd-md)' },
-			{ side: 'bottom', header: true, class: 'rounded-t-(--era-rd-md)' },
-			{ side: 'left', header: true, class: 'rounded-r-(--era-rd-md)' },
-			{ side: 'right', header: true, class: 'rounded-l-(--era-rd-md)' }
-		],
 		defaultVariants: { side: 'bottom', header: false }
 	});
 </script>
@@ -41,6 +38,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
+	import Overlay from '../dialog/dialog-overlay.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -58,7 +56,7 @@
 </script>
 
 <Dialog.Portal>
-	<Dialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<Overlay />
 	<Dialog.Content
 		bind:ref
 		class={cn(sheetVariants({ side, header: header != null }), className)}

package/dist/ui/sheet/sheet-content.svelte.d.ts

@@ -1,10 +1,10 @@
 import { type PartProps } from '../../utils/index.js';
 export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
     side: {
-        top: "inset-x-0 top-0 max-h-[85dvh]";
-        bottom: "inset-x-0 bottom-0 max-h-[85dvh]";
-        left: "inset-y-0 left-0 w-[min(20rem,85vw)]";
-        right: "inset-y-0 right-0 w-[min(20rem,85vw)]";
+        top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
+        bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--sheet-rd)";
+        left: "inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--sheet-rd)";
+        right: "inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--sheet-rd)";
     };
     /**
      * With a header the sheet is sectioned (the bar flush, the BODY scrolls
@@ -14,15 +14,15 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      * padded rd-lg surface is unchanged.
      */
     header: {
-        true: "";
-        false: "gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+        true: "[--sheet-rd:var(--era-rd-md)]";
+        false: "[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
     };
 }, undefined, "fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur", {
     side: {
-        top: "inset-x-0 top-0 max-h-[85dvh]";
-        bottom: "inset-x-0 bottom-0 max-h-[85dvh]";
-        left: "inset-y-0 left-0 w-[min(20rem,85vw)]";
-        right: "inset-y-0 right-0 w-[min(20rem,85vw)]";
+        top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
+        bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--sheet-rd)";
+        left: "inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--sheet-rd)";
+        right: "inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--sheet-rd)";
     };
     /**
      * With a header the sheet is sectioned (the bar flush, the BODY scrolls
@@ -32,15 +32,15 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      * padded rd-lg surface is unchanged.
      */
     header: {
-        true: "";
-        false: "gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+        true: "[--sheet-rd:var(--era-rd-md)]";
+        false: "[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     side: {
-        top: "inset-x-0 top-0 max-h-[85dvh]";
-        bottom: "inset-x-0 bottom-0 max-h-[85dvh]";
-        left: "inset-y-0 left-0 w-[min(20rem,85vw)]";
-        right: "inset-y-0 right-0 w-[min(20rem,85vw)]";
+        top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
+        bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--sheet-rd)";
+        left: "inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--sheet-rd)";
+        right: "inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--sheet-rd)";
     };
     /**
      * With a header the sheet is sectioned (the bar flush, the BODY scrolls
@@ -50,8 +50,8 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      * padded rd-lg surface is unchanged.
      */
     header: {
-        true: "";
-        false: "gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+        true: "[--sheet-rd:var(--era-rd-md)]";
+        false: "[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.14.1",
+	"version": "4.15.1",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -90,12 +90,12 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.1.0",
 		"@eslint/js": "^9.39.2",
-		"@playwright/test": "^1.62.0",
+		"@playwright/test": "^1.62.1",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/exec": "^7.1.0",
 		"@semantic-release/git": "^10.0.1",
 		"@sveltejs/adapter-cloudflare": "^7.2.9",
-		"@sveltejs/kit": "^2.70.1",
+		"@sveltejs/kit": "^2.70.2",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/cli": "^4.3.3",
@@ -103,19 +103,19 @@
 		"@threlte/core": "^8.5.16",
 		"@threlte/extras": "^9.21.0",
 		"@tiptap/core": "^3.29.0",
-		"@tiptap/extension-code-block-lowlight": "^3.29.0",
-		"@tiptap/extension-details": "^3.29.0",
-		"@tiptap/extension-highlight": "^3.29.0",
-		"@tiptap/extension-image": "^3.29.0",
-		"@tiptap/extension-placeholder": "^3.29.0",
-		"@tiptap/extension-table": "^3.29.0",
-		"@tiptap/extension-task-item": "^3.29.0",
-		"@tiptap/extension-task-list": "^3.29.0",
-		"@tiptap/extension-typography": "^3.29.0",
-		"@tiptap/extension-unique-id": "^3.29.0",
+		"@tiptap/extension-code-block-lowlight": "^3.29.2",
+		"@tiptap/extension-details": "^3.29.2",
+		"@tiptap/extension-highlight": "^3.29.2",
+		"@tiptap/extension-image": "^3.29.2",
+		"@tiptap/extension-placeholder": "^3.29.2",
+		"@tiptap/extension-table": "^3.29.2",
+		"@tiptap/extension-task-item": "^3.29.2",
+		"@tiptap/extension-task-list": "^3.29.2",
+		"@tiptap/extension-typography": "^3.29.2",
+		"@tiptap/extension-unique-id": "^3.29.2",
 		"@tiptap/pm": "^3.29.0",
-		"@tiptap/starter-kit": "^3.29.0",
-		"@tiptap/suggestion": "^3.29.0",
+		"@tiptap/starter-kit": "^3.29.2",
+		"@tiptap/suggestion": "^3.29.2",
 		"@types/node": "^24.13.3",
 		"@types/three": "^0.184.1",
 		"@xyflow/svelte": "^1.6.2",
@@ -130,9 +130,9 @@
 		"prettier-plugin-tailwindcss": "^0.7.4",
 		"publint": "^0.3.22",
 		"semantic-release": "^25.0.8",
-		"shiki": "^4.3.1",
+		"shiki": "^4.4.1",
 		"svelte": "^5.56.8",
-		"svelte-check": "^4.7.3",
+		"svelte-check": "^4.7.4",
 		"tailwindcss": "^4.1.18",
 		"three": "^0.184.0",
 		"tiptap-markdown": "^0.9.0",
@@ -140,7 +140,7 @@
 		"typescript-eslint": "^8.65.0",
 		"vite": "^7.3.6",
 		"vite-plugin-devtools-json": "^1.1.0",
-		"wrangler": "^4.114.0"
+		"wrangler": "^4.118.0"
 	},
 	"keywords": [
 		"svelte"
@@ -153,7 +153,7 @@
 		"url": "git+https://github.com/sig-nine/era-ui.git"
 	},
 	"dependencies": {
-		"@internationalized/date": "^3.12.2",
+		"@internationalized/date": "^3.12.3",
 		"@lucide/svelte": "^0.577.0",
 		"@neodrag/svelte": "^3.0.0-next.8",
 		"bits-ui": "^2.18.1",