@signal9/era-ui 3.17.1 → 4.1.0

package/dist/os/workspace-storage.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type WindowManager } from './wm.svelte.js';
+import { type PaneManager } from './pane-manager.svelte.js';
 export declare const WORKSPACE_STORAGE_KEY = "era-ui:workspace";
 /**
  * Read a saved snapshot and apply it. Returns whether anything was restored.
@@ -7,9 +7,9 @@ export declare const WORKSPACE_STORAGE_KEY = "era-ui:workspace";
  * seed (localStorage), so a reload is exact and a brand-new tab still opens on
  * your most recent arrangement.
  */
-export declare function loadWorkspace(wm: WindowManager, key?: string): boolean;
+export declare function loadWorkspace(pm: PaneManager, key?: string): boolean;
 /** Write the current desktop to both stores. Returns false if neither accepted it. */
-export declare function saveWorkspace(wm: WindowManager, key?: string): boolean;
+export declare function saveWorkspace(pm: PaneManager, key?: string): boolean;
 /** Forget the layout — this tab's and the shared seed. */
 export declare function clearWorkspace(key?: string): void;
 /**
@@ -19,12 +19,12 @@ export declare function clearWorkspace(key?: string): void;
  * component context). The load is synchronous and happens immediately, before
  * the first paint.
  *
- * Writes are debounced: dragging a window mutates `pos` on every pointer move,
+ * Writes are debounced: dragging a pane mutates `pos` on every pointer move,
  * and serialising the whole desktop per frame would be pointless work. The
  * trailing write always lands because the effect's teardown flushes a pending
  * timer.
  */
-export declare function persistWorkspace(wm: WindowManager, options?: {
+export declare function persistWorkspace(pm: PaneManager, options?: {
     key?: string;
     debounce?: number;
 }): {

package/dist/os/workspace-storage.svelte.js

@@ -3,7 +3,7 @@
  *
  * WHERE IT IS STORED, AND WHY IT IS TWO PLACES
  * --------------------------------------------
- * A window layout is VIEW state, not document state — the same kind of thing as
+ * A pane layout is VIEW state, not document state — the same kind of thing as
  * scroll position. Nobody expects scrolling one tab to scroll another, and the
  * same holds here: two tabs of the same app are two workspaces, not two views of
  * one workspace. That observation decides the whole design.
@@ -25,7 +25,7 @@
  * The alternatives, and why not:
  *
  *   `storage` event / BroadcastChannel — mirror every tab to one shared layout.
- *     Both work, and both are wrong HERE: dragging a window in one tab would move
+ *     Both work, and both are wrong HERE: dragging a pane in one tab would move
  *     it in the other. That is the correct design for a synced setting (theme,
  *     auth), not for a workspace.
  *   Web Locks leader election — `navigator.locks.request()` held forever elects
@@ -40,7 +40,7 @@
  * The payload is a few kB of JSON that must be read BEFORE the first paint, which
  * rules out every modern alternative, because they are all async: IndexedDB,
  * OPFS, and Storage Buckets alike would paint an empty desktop and pop the
- * windows in a frame later. Synchronous access is the feature here, not the
+ * panes in a frame later. Synchronous access is the feature here, not the
  * compromise. Their real strengths do not apply either — OPFS is for large or
  * binary files with read/write handles, and Storage Buckets exists for per-bucket
  * eviction policy across several competing stores (and is Chromium-only). One
@@ -51,7 +51,7 @@
  * once, non-blocking, and a refusal is harmless.
  */
 import { untrack } from 'svelte';
-import { readSnapshot } from './wm.svelte.js';
+import { readSnapshot } from './pane-manager.svelte.js';
 export const WORKSPACE_STORAGE_KEY = 'era-ui:workspace';
 /** Both stores, newest-first: this tab's own layout, then the new-tab seed. */
 function stores() {
@@ -79,7 +79,7 @@ function stores() {
  * seed (localStorage), so a reload is exact and a brand-new tab still opens on
  * your most recent arrangement.
  */
-export function loadWorkspace(wm, key = WORKSPACE_STORAGE_KEY) {
+export function loadWorkspace(pm, key = WORKSPACE_STORAGE_KEY) {
     for (const store of stores()) {
         let raw = null;
         try {
@@ -95,14 +95,14 @@ export function loadWorkspace(wm, key = WORKSPACE_STORAGE_KEY) {
         const snapshot = readSnapshot(raw);
         if (!snapshot)
             continue;
-        wm.applySnapshot(snapshot);
+        pm.applySnapshot(snapshot);
         return true;
     }
     return false;
 }
 /** Write the current desktop to both stores. Returns false if neither accepted it. */
-export function saveWorkspace(wm, key = WORKSPACE_STORAGE_KEY) {
-    const json = JSON.stringify(wm.snapshot());
+export function saveWorkspace(pm, key = WORKSPACE_STORAGE_KEY) {
+    const json = JSON.stringify(pm.snapshot());
     let ok = false;
     for (const store of stores()) {
         try {
@@ -135,22 +135,22 @@ export function clearWorkspace(key = WORKSPACE_STORAGE_KEY) {
  * component context). The load is synchronous and happens immediately, before
  * the first paint.
  *
- * Writes are debounced: dragging a window mutates `pos` on every pointer move,
+ * Writes are debounced: dragging a pane mutates `pos` on every pointer move,
  * and serialising the whole desktop per frame would be pointless work. The
  * trailing write always lands because the effect's teardown flushes a pending
  * timer.
  */
-export function persistWorkspace(wm, options = {}) {
+export function persistWorkspace(pm, options = {}) {
     const key = options.key ?? WORKSPACE_STORAGE_KEY;
     const wait = options.debounce ?? 400;
-    const restored = loadWorkspace(wm, key);
+    const restored = loadWorkspace(pm, key);
     // Fire-and-forget: a refusal (or an engine without the API) just leaves the
     // default best-effort behaviour.
     void navigator?.storage?.persist?.().catch(() => { });
     $effect(() => {
         // Touch what a snapshot is made of, so the effect re-runs when any of it
         // changes. Reading these is the subscription.
-        wm.windows.forEach((w) => {
+        pm.panes.forEach((w) => {
             void w.pos.x;
             void w.pos.y;
             void w.size?.width;
@@ -161,12 +161,12 @@ export function persistWorkspace(wm, options = {}) {
             void w.workspaceId;
             void w.props;
         });
-        void wm.workspaces.length;
-        void wm.activeWorkspaceId;
+        void pm.workspaces.length;
+        void pm.activeWorkspaceId;
         const timer = setTimeout(() => {
             // untrack: snapshot() reads the same state this effect depends on, and
             // re-reading it inside would re-subscribe on every write.
-            untrack(() => saveWorkspace(wm, key));
+            untrack(() => saveWorkspace(pm, key));
         }, wait);
         return () => clearTimeout(timer);
     });

package/dist/styles/surfaces/base.css

@@ -28,6 +28,7 @@
  * ==============
  *
  * --era-surface-bg / -elevated   surface fills (resting / raised tier)
+ * --era-field-bg                 the RECESSED tier — a text field's resting fill
  * --era-shadow / --era-shadow-lg   resting edge chrome (controls / floating)
  * --era-shadow-well              recessed container (inputs, tracks, checks)
  * --era-shadow-pressed           a control's :active or latched face
@@ -64,6 +65,27 @@
 	/* Same-element default: tracks --era-surface-bg unless a surface splits
 	 * the tiers (glass is the only one that does). */
 	--era-surface-bg-elevated: var(--era-surface-bg);
+	/* The third fill tier, and the one that was missing. A field is RECESSED, so
+	 * it was reaching for -elevated (the RAISED tier) and relying on
+	 * --era-shadow-well to sell the depth — which works on a surface that has
+	 * shadows and does nothing at all on flat. Measured before this token
+	 * existed: a resting input sat at 1.06:1 against its backdrop on flat and
+	 * bevel dark, and at 1.00:1 on glass light. Invisible until you touched it.
+	 *
+	 * Expressed as a perceptual STEP from the page toward the text, not as a
+	 * scale index, and that distinction is the whole reason this reads evenly.
+	 * The 12-step scale is not symmetric about its ends: --color-3 sits ΔL 0.09
+	 * from the page in dark but ΔL 0.21 in light, so the same token that looked
+	 * right on a dark page rendered a heavy grey slab on a light one. Mixing a
+	 * fixed 16% of the foreground into the page gives ΔL ≈ 0.11 in BOTH modes —
+	 * one expression, no light-dark() branch, and it stays correct if the scale
+	 * is ever retuned.
+	 *
+	 * Toward the TEXT rather than "darker": in light mode a well genuinely is
+	 * darker, but on a dark page nothing can be, so depth is carried by
+	 * separation rather than by shade. Mixing toward the foreground gets both
+	 * directions for free. */
+	--era-field-bg: color-mix(in oklch, var(--color-1) 84%, var(--color-fg));
 	--era-shadow: none;
 	--era-shadow-lg: none;
 	--era-shadow-well: var(--era-shadow);

package/dist/styles/surfaces/glass.css

@@ -33,6 +33,17 @@
 		color-mix(in oklch, var(--color-3) 85%, transparent)
 	);
 
+	/* The same perceptual step the base defines, held at 72% so the frost still
+	 * reads through it — the material is the point. Restated rather than
+	 * inherited because a surface cannot reference the token it is overriding.
+	 * Light mode is why a field needs its own value here at all: at the panel's
+	 * own opacity it measured 1.00:1 against its backdrop, i.e. exactly nothing. */
+	--era-field-bg: color-mix(
+		in oklch,
+		color-mix(in oklch, var(--color-1) 84%, var(--color-fg)) 72%,
+		transparent
+	);
+
 	--era-shadow:
 		inset 1.5px 1.5px 0 -1px
 			light-dark(

package/dist/ui/combobox/combobox-input.svelte

@@ -8,7 +8,7 @@
 <Combobox.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight) data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight) data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}

package/dist/ui/command/command-input.svelte

@@ -20,7 +20,7 @@
 	{@const Icon = icon}
 	<div
 		class={cn(
-			'flex h-(--era-h-md) w-full era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body era-text-trim text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight)',
+			'flex h-(--era-h-md) w-full era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body era-text-trim text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight)',
 			className
 		)}
 	>
@@ -37,7 +37,7 @@
 		bind:ref
 		bind:value
 		class={cn(
-			'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
+			'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
 			className
 		)}
 		{...restProps}

package/dist/ui/date-field/date-field-input.svelte

@@ -8,7 +8,7 @@
 <DateField.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-picker/date-picker-input.svelte

@@ -8,7 +8,7 @@
 <DatePicker.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) ps-(--era-inset-md) pe-(--era-px-md) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) ps-(--era-inset-md) pe-(--era-px-md) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-field/date-range-field-input.svelte

@@ -12,7 +12,7 @@
 <DateRangeField.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-picker/date-range-picker-input.svelte

@@ -12,7 +12,7 @@
 <DateRangePicker.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) items-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) ps-(--era-inset-md) pe-(--era-px-md) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		'flex h-(--era-h-md) items-center rounded-(--era-rd-md) bg-(--era-field-bg) ps-(--era-inset-md) pe-(--era-px-md) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/input/input.svelte

@@ -21,7 +21,7 @@
 			 */
 			bare: {
 				false:
-					'h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)',
+					'h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)',
 				// h-full, NOT the md tier: a bare input's container IS the field, so it
 				// takes that container's height. Keeping h-md here made a bare input
 				// inside an h-md Bar overflow it by the bar's border — a −0.5px gap,

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

@@ -15,7 +15,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
         true: "h-full bg-transparent px-0 shadow-none";
     };
 }, undefined, "flex w-full era-interactive text-body text-fg", {
@@ -27,7 +27,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
         true: "h-full bg-transparent px-0 shadow-none";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
@@ -39,7 +39,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
         true: "h-full bg-transparent px-0 shadow-none";
     };
 }, undefined>>;

package/dist/ui/input/textarea.svelte

@@ -16,7 +16,7 @@
 	bind:this={ref}
 	bind:value
 	class={cn(
-		'flex min-h-(--era-h-md) w-full era-interactive resize-y rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) py-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
+		'flex min-h-(--era-h-md) w-full era-interactive resize-y rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) py-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}

package/dist/ui/pane/pane.svelte

@@ -7,7 +7,7 @@
 	import Handle from './pane-handle.svelte';
 	import Content from './pane-content.svelte';
 	import Close from './pane-close.svelte';
-	import AppWindow from '@lucide/svelte/icons/app-window';
+	import AppPane from '@lucide/svelte/icons/app-window';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 		size = $bindable(null),
 		resizable = false,
 		title,
-		icon = AppWindow,
+		icon = AppPane,
 		disabled = false,
 		plugins = [],
 		onDragStart,

package/dist/ui/time-field/time-field-input.svelte

@@ -8,7 +8,7 @@
 <TimeField.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-range-field/time-range-field-input.svelte

@@ -12,7 +12,7 @@
 <TimeRangeField.Input
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/video-player/video-player.svelte

@@ -791,7 +791,7 @@
 
 	const playLabel = $derived(ended ? 'Replay' : paused ? 'Play' : 'Pause');
 	const muteLabel = $derived(mutedState || volumeState === 0 ? 'Unmute' : 'Mute');
-	// Prefer seekable.end when smaller than duration (HLS live windows); fall
+	// Prefer seekable.end when smaller than duration (HLS live panes); fall
 	// back to duration for VOD where the engine may report seekable === duration.
 	const timeMax = $derived(
 		seekableEnd > 0 && seekableEnd < (duration || Infinity)

package/package.json

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

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

@@ -1,7 +0,0 @@
-import { type AppWindow } from './wm.svelte.js';
-type $$ComponentProps = {
-    window: AppWindow;
-};
-declare const Window: import("svelte").Component<$$ComponentProps, {}, "">;
-type Window = ReturnType<typeof Window>;
-export default Window;