@signal9/era-ui 30.1.2 → 30.1.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [30.1.4](https://github.com/sig-nine/era-ui/compare/v30.1.3...v30.1.4) (2026-08-16)
+
+### Bug Fixes
+
+* **button:** loading no longer changes the control's width ([7931edb](https://github.com/sig-nine/era-ui/commit/7931edbdb7cbcabf496586983836fc8bf1832e42))
+
+## [30.1.3](https://github.com/sig-nine/era-ui/compare/v30.1.2...v30.1.3) (2026-08-16)
+
+### Bug Fixes
+
+* **os:** stop printing a framework warning into consumer consoles ([312e1d5](https://github.com/sig-nine/era-ui/commit/312e1d531f4df19443282917819700b66f37ccfe))
+
 ## [30.1.2](https://github.com/sig-nine/era-ui/compare/v30.1.1...v30.1.2) (2026-08-16)
 
 ### Bug Fixes

package/dist/os/desktop.svelte

@@ -162,9 +162,21 @@
 	<div class="absolute inset-0 isolate">
 		<!-- Only the active workspace paints; other workspaces' panes keep
 		     their state untouched and simply aren't in the tree. Keyed by id, so
-		     switching back remounts them exactly where they were. -->
-		{#each pm.activePanes as pane (pane.id)}
-			<Pane {pane} />
+		     switching back remounts them exactly where they were.
+
+		     ITERATING pm.panes AND FILTERING HERE, rather than iterating the
+		     `activePanes` derived, is what makes `bind:` below legal: a pane's
+		     geometry is written by Pane.Root through two bindings, and Svelte's
+		     ownership check wants that declared the whole way up — but you cannot
+		     bind to an item of a DERIVED array. `pm.panes[i]` is the same object
+		     the derived would have yielded, in the same order (activePanes is a
+		     pure filter), and the {#if} unmounts exactly what the filter excluded.
+		     Without this the shell logged ownership_invalid_binding twice per
+		     pane into every consumer's dev console. -->
+		{#each pm.panes as pane, i (pane.id)}
+			{#if pane.workspaceId === pm.activeWorkspaceId}
+				<Pane bind:pane={pm.panes[i]} />
+			{/if}
 		{/each}
 	</div>
 	{@render children?.()}

package/dist/os/pane.svelte

@@ -8,7 +8,16 @@
 	import { cn } from '../utils/index.js';
 	import { getPaneManager, type AppPane } from './pane-manager.svelte.js';
 
-	let { pane }: { pane: AppPane } = $props();
+	// $bindable, though nothing here ever reassigns it. Pane.Root takes
+	// `position` and `size` with bind:, which WRITES to pane.pos / pane.size —
+	// state this component does not own. Svelte's dev-mode ownership check
+	// followed that write up the tree, found no declared binding, and logged
+	// ownership_invalid_binding on every pane mount: era's own shell printing
+	// two framework warnings per load into every consumer's dev console.
+	// Declaring the binding here and using it in desktop.svelte is Svelte's own
+	// remedy for the message; it costs nothing at runtime and says out loud
+	// what the component has always done.
+	let { pane = $bindable() }: { pane: AppPane } = $props();
 
 	const pm = getPaneManager();
 	const focused = $derived(pm.focusedId === pane.id);

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

@@ -3,6 +3,6 @@ import { type AppPane } from './pane-manager.svelte.js';
 type $$ComponentProps = {
     pane: AppPane;
 };
-declare const Pane: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Pane: import("svelte").Component<$$ComponentProps, {}, "pane">;
 type Pane = ReturnType<typeof Pane>;
 export default Pane;

package/dist/ui/button/button.svelte

@@ -28,9 +28,25 @@
 		active?: boolean;
 		icon?: boolean;
 		/**
-		 * When true, disables the button, sets `aria-busy`, and prepends a
-		 * spinner. The existing label stays rendered so focus, click targets,
-		 * and screen-reader accessible names don't change shape mid-flight.
+		 * In flight: disables the button, sets `aria-busy`, and puts a spinner
+		 * over the label.
+		 *
+		 * THE GEOMETRY DOES NOT MOVE. That is the requirement, not a detail. A
+		 * button is loading because it was just CLICKED, so anything `loading`
+		 * changes about the box moves the page under the pointer that is still
+		 * on it — and a spinner PREPENDED to the label (what this used to do)
+		 * costs an icon's width plus a gap, measured on a wrapping header row
+		 * that reflowed everything beside it. A consumer hit exactly that and
+		 * stopped using the prop, hand-rolling `disabled` + `aria-busy`
+		 * instead, which is the report that produced this note.
+		 *
+		 * So the spinner is absolutely positioned and takes no part in the
+		 * flex layout, and the label goes to `opacity-0` rather than being
+		 * unmounted: the box that holds the width stays, and the text stays in
+		 * the accessibility tree as the button's accessible name.
+		 *
+		 * The visible label is therefore HIDDEN in flight — the one thing this
+		 * trades away, and the reason `loadingLabel` exists.
 		 */
 		loading?: boolean;
 		/** Screen-reader-only label announced while `loading` is true. */
@@ -109,7 +125,15 @@
 	aria-busy={loading || undefined}
 	data-state={active ? 'on' : undefined}
 	data-size={size}
-	class={cn(buttonVariants({ variant, tone, size, icon, active }), className)}
+	class={cn(
+		buttonVariants({ variant, tone, size, icon, active }),
+		// Positioned only while loading — the spinner overlay below needs a
+		// containing block, and giving EVERY button one would change paint order
+		// against its non-positioned neighbours for a state most of them never
+		// enter.
+		loading && 'relative',
+		className
+	)}
 	{...restProps}
 >
 	<!--
@@ -142,6 +166,13 @@
 		data-button-content
 		class={cn(
 			'inline-flex items-center justify-center [gap:inherit]',
+			// THE LABEL KEEPS ITS BOX AND LOSES ITS INK. opacity, not `hidden` or
+			// `invisible`: the box has to stay (it is what holds the width) and the
+			// text has to stay in the accessibility tree (it is the button's
+			// accessible name, and a control that loses its name mid-flight is worse
+			// than one that shifts). See the `loading` prop for why the spinner
+			// cannot simply sit beside it.
+			loading && 'opacity-0',
 			// A link is running text, so its wrapper flows inline and takes NO ink
 			// centring. era-label-ink blockifies the box and trims it to the
 			// typographic band — right for a label in a fixed-height control, and
@@ -151,10 +182,6 @@
 			variant === 'link' ? 'inline' : 'not-has-[svg]:era-label-ink'
 		)}
 	>
-		{#if loading}
-			<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
-			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
-		{/if}
 		<!-- The label box exists ONLY when `lead`/`trail` are used. Rendering it
 		     unconditionally changed the DOM for every legacy call site: a
 		     `display:contents` span has no box, and the geometry audits walk real
@@ -171,4 +198,15 @@
 			{@render children?.()}
 		{/if}
 	</span>
+	<!--
+		The spinner is OUT OF FLOW, which is the whole point. Absolutely positioned
+		children take no part in flex layout, so the button's width, height, gap and
+		min-w are the same in flight as at rest.
+	-->
+	{#if loading}
+		<span class="absolute inset-0 flex items-center justify-center">
+			<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
+		</span>
+		{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
+	{/if}
 </Button.Root>

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

@@ -7,9 +7,25 @@ type $$ComponentProps = Button.RootProps & {
     active?: boolean;
     icon?: boolean;
     /**
-     * When true, disables the button, sets `aria-busy`, and prepends a
-     * spinner. The existing label stays rendered so focus, click targets,
-     * and screen-reader accessible names don't change shape mid-flight.
+     * In flight: disables the button, sets `aria-busy`, and puts a spinner
+     * over the label.
+     *
+     * THE GEOMETRY DOES NOT MOVE. That is the requirement, not a detail. A
+     * button is loading because it was just CLICKED, so anything `loading`
+     * changes about the box moves the page under the pointer that is still
+     * on it — and a spinner PREPENDED to the label (what this used to do)
+     * costs an icon's width plus a gap, measured on a wrapping header row
+     * that reflowed everything beside it. A consumer hit exactly that and
+     * stopped using the prop, hand-rolling `disabled` + `aria-busy`
+     * instead, which is the report that produced this note.
+     *
+     * So the spinner is absolutely positioned and takes no part in the
+     * flex layout, and the label goes to `opacity-0` rather than being
+     * unmounted: the box that holds the width stays, and the text stays in
+     * the accessibility tree as the button's accessible name.
+     *
+     * The visible label is therefore HIDDEN in flight — the one thing this
+     * trades away, and the reason `loadingLabel` exists.
      */
     loading?: boolean;
     /** Screen-reader-only label announced while `loading` is true. */

package/package.json

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