@signal9/era-ui 4.9.1 → 4.9.3

package/dist/os/pane.svelte

@@ -72,7 +72,15 @@
 		pane.state === 'minimized' && 'hidden'
 	)}
 >
-	<Pane.Handle class="gap-(--era-gap)">
+	<!-- Asymmetric on purpose, the same way a Conversations row is: the TRAILING
+	     side holds xxs buttons, so it keeps the handle's own concentric wall
+	     (--era-xxs-inset-md, 3/5/7/11) and their corners nest in the pane's; the
+	     LEADING side holds a bare glyph and a label, which have no corner to nest,
+	     so they sit at the text inset instead. At the wall the glyph's ink was 3px
+	     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" />
@@ -95,22 +103,23 @@
 			     held preview recolours to the action it will commit — yellow for
 			     minimize, green for maximize — so the tone and glyph agree on what
 			     the release does. -->
-			<!-- size="xxs" is the handle's content tier (see Pane.Handle), and it also
-			     sets the glyph: the xxs button draws icon-xxs, which is what this
-			     button used to force with a hand-written [&_svg] class. Same size as
-			     Pane.Close, so the two close affordances match.
+			<!-- size="xxs" is the handle's content tier (see Pane.Handle), and the glyph
+			     is h-xs for the same reason Pane.Close's is — the two close
+			     affordances have to be the same weight, and a chrome close button has
+			     to read at a glance.
 
 			     The ONE exception stays a sub-tier down: the maximize bracket's
-			     silhouette fills its whole box, so beside the x and − strokes it reads
-			     bulkier at the same nominal size. icon-xs is exactly 2px under
-			     icon-xxs at every density. It has to be written as [&_svg]: because
-			     that is the selector the variant uses — a plain size-* on the <svg>
+			     silhouette fills its whole box, so beside the × and − strokes it reads
+			     bulkier at the same nominal size. icon-xxs is exactly 2px under h-xs at
+			     every density — the same step this pair has always had, now spelled in
+			     named tokens on both sides. It has to be written as [&_svg]: because
+			     that is the selector the variant uses; a plain size-* on the <svg>
 			     loses to it. -->
 			<Button
 				icon
 				size="xxs"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
-				class={armed === 'maximize' ? '[&_svg]:size-(--era-icon-xs)' : undefined}
+				class={armed === 'maximize' ? '[&_svg]:size-(--era-icon-xxs)' : '[&_svg]:size-(--era-h-xs)'}
 				aria-label="Close (right-click minimizes, middle-click maximizes)"
 				onclick={() => pm.close(pane.id)}
 				oncontextmenu={(e: MouseEvent) => e.preventDefault()}

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

@@ -2,6 +2,7 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { Button } from '../button';
 	import X from '@lucide/svelte/icons/x';
+	import { cn } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -20,19 +21,28 @@
      not the other way round.
 
      xxs rather than the tighter `icon` size, which is what the handle's tier
-     asks for — and it also gets the glyph right for free. A close button is the
-     one control in the chrome you must be able to hit and read at a glance, and
-     half of a Lucide glyph's box is padding inside its own viewBox, so `icon`'s
-     10px rendered about 5px of actual ink; this tier draws icon-xxs (12px at
-     dense), which is what the old hand-written [&_svg] override existed to
-     force. One tier declaration now says both things. -->
+     asks for. The GLYPH then steps up to the icon tier itself (h-xs — 14/16/18/22)
+     rather than taking the xxs sub-tier's sp+4: a close button is the one control
+     in the chrome you must be able to hit and read at a glance, and half of a
+     Lucide glyph's box is padding inside its own viewBox, so the sub-tier rendered
+     visibly lighter than the reference app's (13px at dense, with Lucide's default
+     2px stroke against era's 1.75).
+
+     h-xs in an h-xxs box is a 2px pad — the same pad density.css derives for a
+     glyph in an xs box, so this is the documented step, not an exception to it.
+     It is also an INTEGER pad at every mode, where mirroring 13-in-18 exactly
+     would put the glyph on a half pixel at dense and blur a 1.75px stroke.
+
+     Written as [&_svg]: because that is the selector Button's icon variant uses —
+     a bare size-* on the <X> loses to it, which is why an earlier class there had
+     no effect at all. -->
 <Button
 	bind:ref
 	icon
 	size="xxs"
 	tone="destructive"
 	aria-label="Close"
-	class={className}
+	class={cn('[&_svg]:size-(--era-h-xs)', className)}
 	{...restProps}
 >
 	<X />

package/package.json

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