@signal9/era-ui 3.16.0 → 3.17.1

package/dist/apps/notes/editor/bubble-toolbar.svelte

@@ -23,10 +23,16 @@
 
 <!-- md with xxs buttons, matching the app's other bars. It was sm + size="icon"
      — a 22px bar of 14px buttons around 10px glyphs, the smallest combination in
-     the ladder, which is why the formatting controls read as unhittable. -->
+     the ladder, which is why the formatting controls read as unhittable.
+
+     The border is a deliberate exception to "shadow, not border" (design rule 7):
+     this panel floats over the DOCUMENT, not over chrome, so on a light theme its
+     elevated fill sits on a page of nearly the same value and the shadow alone
+     leaves no discernible edge. border-divider-faded is the token'd hairline, so
+     it still tracks the surface rather than being a drawn-on line. -->
 <Bar
 	size="md"
-	class="w-max gap-(--era-xxs-inset-md) bg-elevated px-(--era-xxs-inset-md) shadow-lg glass-blur"
+	class="w-max gap-(--era-xxs-inset-md) border border-divider-faded bg-elevated px-(--era-xxs-inset-md) shadow-lg glass-blur"
 >
 	{#each items as item (item.mark)}
 		{@const Icon = item.icon}

package/dist/os/index.d.ts

@@ -1,4 +1,6 @@
-export { WindowManager, getWindowManager, setWindowManagerContext, type Point, type Size, type Rect, type Insets, type Frame, type AppDefinition, type AppWindow, type AppComponent, type AppProps, type WindowState, type JsonValue, type WindowSnapshot, type WorkspaceSnapshot, SNAPSHOT_VERSION, readSnapshot, type SnapZone, type Workspace } from './wm.svelte.js';
+export { WindowManager, getWindowManager, setWindowManagerContext, type Point, type Size, type Rect, type Insets, type Frame, type AppDefinition, type AppWindow, type AppComponent, type AppProps, type WindowState, type JsonValue, type WindowSnapshot, type WorkspaceSnapshot, SNAPSHOT_VERSION, readSnapshot } from './wm.svelte.js';
+export { persistWorkspace, loadWorkspace, saveWorkspace, clearWorkspace, WORKSPACE_STORAGE_KEY } from './workspace-storage.svelte.js';
+export { type SnapZone, type Workspace } from './wm.svelte.js';
 export { NotificationService, getNotifications, setNotificationContext, type AppNotification, type NotifyOptions, type NotificationAction, type NotificationTone } from './notifications.svelte.js';
 export { LAYER } from './layers.js';
 export { default as Desktop } from './desktop.svelte';

package/dist/os/index.js

@@ -3,6 +3,8 @@
 // components that render them: Desktop host, Window, Taskbar (with its
 // built-in command bar), Toaster, NotificationCenter.
 export { WindowManager, getWindowManager, setWindowManagerContext, SNAPSHOT_VERSION, readSnapshot } from './wm.svelte.js';
+export { persistWorkspace, loadWorkspace, saveWorkspace, clearWorkspace, WORKSPACE_STORAGE_KEY } from './workspace-storage.svelte.js';
+export {} from './wm.svelte.js';
 export { NotificationService, getNotifications, setNotificationContext } from './notifications.svelte.js';
 export { LAYER } from './layers.js';
 export { default as Desktop } from './desktop.svelte';

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

@@ -0,0 +1,32 @@
+import { type WindowManager } from './wm.svelte.js';
+export declare const WORKSPACE_STORAGE_KEY = "era-ui:workspace";
+/**
+ * Read a saved snapshot and apply it. Returns whether anything was restored.
+ *
+ * Prefers this tab's own layout (sessionStorage) and falls back to the shared
+ * 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;
+/** Write the current desktop to both stores. Returns false if neither accepted it. */
+export declare function saveWorkspace(wm: WindowManager, key?: string): boolean;
+/** Forget the layout — this tab's and the shared seed. */
+export declare function clearWorkspace(key?: string): void;
+/**
+ * Restore on setup, then save whenever the desktop changes.
+ *
+ * Call from a component's script (it registers an `$effect`, so it needs a
+ * 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,
+ * 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?: {
+    key?: string;
+    debounce?: number;
+}): {
+    restored: boolean;
+};

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

@@ -0,0 +1,174 @@
+/**
+ * Persisting the desktop across reloads.
+ *
+ * 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
+ * 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.
+ *
+ * So the live layout lives in sessionStorage, which is scoped to a single tab and
+ * survives reload. localStorage keeps a copy purely as the SEED for a tab that
+ * has no layout of its own yet.
+ *
+ *   sessionStorage   this tab's layout. Authoritative while the tab is open,
+ *                    isolated from every other tab, gone when it closes.
+ *   localStorage     the most recently saved layout, read only when a tab starts
+ *                    with an empty sessionStorage — i.e. a brand-new tab, so a
+ *                    fresh one opens on your last arrangement instead of nothing.
+ *
+ * Two tabs therefore cannot clobber each other. They still race on the seed, but
+ * a lost race there only changes what a FUTURE new tab starts from — never what
+ * any open tab is showing.
+ *
+ * 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
+ *     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
+ *     one writer, which is how real single-writer coordination is done
+ *     (RxDB, Yjs providers). It fixes the clobber by making the other tabs
+ *     read-only, which is worse than isolation for symmetric tabs: whichever you
+ *     opened second silently stops remembering anything.
+ *   CRDT / merge — vast machinery for a value no one is collaborating on.
+ *
+ * WHY localStorage AND NOT SOMETHING NEWER
+ * ----------------------------------------
+ * 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
+ * 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
+ * ~300-byte layout is neither.
+ *
+ * The genuinely modern piece IS adopted: navigator.storage.persist() asks the
+ * browser to exempt this origin from eviction under storage pressure. Requested
+ * once, non-blocking, and a refusal is harmless.
+ */
+import { untrack } from 'svelte';
+import { readSnapshot } from './wm.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() {
+    const out = [];
+    try {
+        if (typeof sessionStorage !== 'undefined')
+            out.push(sessionStorage);
+    }
+    catch {
+        /* storage disabled */
+    }
+    try {
+        if (typeof localStorage !== 'undefined')
+            out.push(localStorage);
+    }
+    catch {
+        /* private mode */
+    }
+    return out;
+}
+/**
+ * Read a saved snapshot and apply it. Returns whether anything was restored.
+ *
+ * Prefers this tab's own layout (sessionStorage) and falls back to the shared
+ * 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) {
+    for (const store of stores()) {
+        let raw = null;
+        try {
+            raw = store.getItem(key);
+        }
+        catch {
+            continue;
+        }
+        if (!raw)
+            continue;
+        // readSnapshot is the gate: this string is untrusted (hand-edited, stale, or
+        // written by a newer version), so it is validated rather than cast.
+        const snapshot = readSnapshot(raw);
+        if (!snapshot)
+            continue;
+        wm.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());
+    let ok = false;
+    for (const store of stores()) {
+        try {
+            store.setItem(key, json);
+            ok = true;
+        }
+        catch {
+            // Quota exceeded or private mode. A layout is convenience state, so this
+            // stays silent — unlike the Notes store, where a failed save loses
+            // writing and the user has to be told.
+        }
+    }
+    return ok;
+}
+/** Forget the layout — this tab's and the shared seed. */
+export function clearWorkspace(key = WORKSPACE_STORAGE_KEY) {
+    for (const store of stores()) {
+        try {
+            store.removeItem(key);
+        }
+        catch {
+            /* nothing to do — the goal was for it to be gone */
+        }
+    }
+}
+/**
+ * Restore on setup, then save whenever the desktop changes.
+ *
+ * Call from a component's script (it registers an `$effect`, so it needs a
+ * 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,
+ * 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 = {}) {
+    const key = options.key ?? WORKSPACE_STORAGE_KEY;
+    const wait = options.debounce ?? 400;
+    const restored = loadWorkspace(wm, 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) => {
+            void w.pos.x;
+            void w.pos.y;
+            void w.size?.width;
+            void w.size?.height;
+            void w.state;
+            void w.z;
+            void w.title;
+            void w.workspaceId;
+            void w.props;
+        });
+        void wm.workspaces.length;
+        void wm.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));
+        }, wait);
+        return () => clearTimeout(timer);
+    });
+    return { restored };
+}

package/package.json

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