zidane-ui 9.1.1 → 9.1.4

package/dist/theme/runtime-icons.d.ts

@@ -0,0 +1,50 @@
+//#region src/theme/runtime-icons.d.ts
+/**
+ * Icon classes named at runtime. An extension names its icons as data (`icon: { gui: 'i-ph-planet' }`
+ * on its definition, a badge, a panel tab), and UnoCSS generates an icon class only when it finds it
+ * in the files it scans: an icon only an extension names has no rule, and draws an empty box.
+ *
+ * `watchRuntimeIcons` watches the page for `i-ph-*` classes that no stylesheet styles and adds their
+ * rule, with the declarations Uno's icon preset writes (the icon's SVG as a mask in `currentColor`,
+ * one em square), in the kit's utilities layer. The collection loads once, the first time a class is
+ * missing: a page whose icons are all built in never loads it. The app hands the loader over (a
+ * dynamic import of `@iconify-json/ph`'s `icons.json`, through `crispPhosphor` from `zidane-ui/uno`),
+ * so the collection stays the app's dependency and lands in a chunk of its own.
+ */
+/** An Iconify collection, as `@iconify-json/<prefix>/icons.json` holds it. */
+interface IconCollection {
+  /** The default width of its icons. */
+  width?: number;
+  /** The default height of its icons. */
+  height?: number;
+  /** Its icons, by name: each one's SVG body. */
+  icons: Readonly<Record<string, {
+    body: string;
+    width?: number;
+    height?: number;
+  }>>;
+  /** Other names of its icons. */
+  aliases?: Readonly<Record<string, {
+    parent: string;
+  }>>;
+}
+/** Options of {@link watchRuntimeIcons}. */
+interface RuntimeIconsOptions {
+  /**
+   * Loads the Phosphor collection (`@iconify-json/ph`'s `icons.json`), transformed as the app's Uno
+   * config transforms it (`crispPhosphor`), so a runtime icon looks like a built one.
+   */
+  loadPhosphor: () => Promise<IconCollection>;
+  /** The element to watch. Default: the document's root element. */
+  root?: Element;
+}
+/**
+ * Draws the `i-ph-*` icon classes no stylesheet styles, as they appear under `root` (see the module
+ * comment). Call it once, at startup.
+ *
+ * @param options - The collection's loader, and the element to watch.
+ * @returns Stops watching. The rules already added stay.
+ */
+declare function watchRuntimeIcons(options: RuntimeIconsOptions): () => void;
+//#endregion
+export { IconCollection, RuntimeIconsOptions, watchRuntimeIcons };

package/dist/theme/runtime-icons.js

@@ -0,0 +1,95 @@
+//#region src/theme/runtime-icons.ts
+const PREFIX = "i-ph-";
+/** An icon class an extension can name. Anything else is never written into a stylesheet. */
+const ICON_CLASS = /^i-ph-[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const SELECTOR = `[class*="${PREFIX}"]`;
+/** Declared first by the kit's prebuilt stylesheets: an app that has them keeps their order. */
+const LAYER = "zidane-ui.utilities";
+/**
+* The rule Uno's icon preset writes for one icon, or null when the collection has no such icon.
+*
+* @param className - The class, such as `i-ph-planet`.
+* @param collection - The Phosphor collection.
+*/
+function runtimeIconRule(className, collection) {
+	if (!ICON_CLASS.test(className)) return null;
+	const name = className.slice(5);
+	const icon = collection.icons[name] ?? collection.icons[collection.aliases?.[name]?.parent ?? ""];
+	if (!icon) return null;
+	return `.${className}{--un-icon:url("data:image/svg+xml;utf8,${`<svg viewBox='0 0 ${icon.width ?? collection.width ?? 16} ${icon.height ?? collection.height ?? 16}' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' >${icon.body}</svg>`.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/\{/g, "%7B").replace(/\}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ")}");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}`;
+}
+/**
+* Draws the `i-ph-*` icon classes no stylesheet styles, as they appear under `root` (see the module
+* comment). Call it once, at startup.
+*
+* @param options - The collection's loader, and the element to watch.
+* @returns Stops watching. The rules already added stay.
+*/
+function watchRuntimeIcons(options) {
+	const root = options.root ?? document.documentElement;
+	const doc = root.ownerDocument;
+	const seen = /* @__PURE__ */ new Set();
+	const missing = /* @__PURE__ */ new Set();
+	let collection = null;
+	let sheet = null;
+	let probe = null;
+	/** Whether a stylesheet styles the class: its own element, so nothing inherited or beside it counts. */
+	const styled = (className) => {
+		if (!probe) {
+			probe = doc.createElement("span");
+			probe.setAttribute("aria-hidden", "true");
+			probe.style.display = "none";
+			doc.body.append(probe);
+		}
+		probe.className = className;
+		return getComputedStyle(probe).getPropertyValue("--un-icon").trim() !== "";
+	};
+	const flush = () => {
+		if (missing.size === 0) return;
+		const names = [...missing];
+		missing.clear();
+		collection ??= options.loadPhosphor().catch(() => null);
+		collection.then((set) => {
+			if (!set) return;
+			const rules = names.flatMap((name) => runtimeIconRule(name, set) ?? []);
+			if (rules.length === 0) return;
+			if (!sheet) {
+				sheet = doc.createElement("style");
+				sheet.dataset.zidaneRuntimeIcons = "";
+				doc.head.append(sheet);
+			}
+			sheet.append(`@layer ${LAYER}{${rules.join("")}}\n`);
+		});
+	};
+	const look = (el) => {
+		for (const className of el.classList) {
+			if (!className.startsWith(PREFIX) || seen.has(className)) continue;
+			seen.add(className);
+			if (ICON_CLASS.test(className) && !styled(className)) missing.add(className);
+		}
+	};
+	const scan = (el) => {
+		look(el);
+		for (const child of el.querySelectorAll(SELECTOR)) look(child);
+	};
+	const observer = new MutationObserver((records) => {
+		for (const record of records) if (record.type === "attributes") look(record.target);
+		else for (const node of record.addedNodes) if (node.nodeType === 1) scan(node);
+		flush();
+	});
+	observer.observe(root, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: ["class"]
+	});
+	scan(root);
+	flush();
+	return () => {
+		observer.disconnect();
+		probe?.remove();
+		probe = null;
+	};
+}
+//#endregion
+export { watchRuntimeIcons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zidane-ui",
-  "version": "9.1.1",
+  "version": "9.1.4",
   "description": "Zidane design system and chat kit: tokens, surface primitives, theme engine, React components, the chat layer (sessions, transcript, composer) and ChatHost adapters.",
   "type": "module",
   "license": "MIT",
@@ -491,10 +491,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/**/*.fixtures.ts",
+    "src/styles/*.css",
     "README.md"
   ],
   "engines": {
@@ -539,7 +536,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "unocss": ">=66.0.0",
-    "zidane": "^9.1.1",
+    "zidane": "^9.1.4",
     "vitest": ">=3"
   },
   "peerDependenciesMeta": {

package/src/styles/primitives.css

@@ -411,7 +411,8 @@
   right: calc(var(--zg-code-pad-x) - 6px);
 }
 /* Revealed controls (CopyButton `reveal`, CodeFrame's Wrap toggle): shown on
-   hover of their group, focused, or just copied. */
+   hover of their group, focused, just copied, pinned (a run's Stop) or with
+   their menu open. */
 .zg-reveal {
   opacity: 0;
   transition:
@@ -420,7 +421,9 @@
 }
 .group:hover .zg-reveal,
 .zg-reveal:focus-visible,
-.zg-reveal[data-copied='true'] {
+.zg-reveal[data-copied='true'],
+.zg-reveal[data-pinned],
+.zg-reveal[aria-expanded='true'] {
   opacity: 1;
 }
 @media (hover: none) {

package/src/styles/transcript.css

@@ -633,3 +633,284 @@ a.zg-badge:hover,
 [data-wheeling] > * {
   pointer-events: none;
 }
+
+/* A codemode script line by line (`CodemodeScript`): a sticky gutter (the
+   state of the line's latest call, then its number) beside the code. Lines the
+   script has not reached are dim; the running one carries the accent and the
+   running sweep; a call that ends washes its line once; a failed line is red,
+   the script's own error under it. A running script past 15 lines scrolls to
+   follow its running line. Motion stops under reduced / off. */
+/* The frame's hairline, drawn again over the lines: the sticky gutter and the
+   tinted lines are opaque, and covered it where they meet the frame's edge. */
+.zg-script-frame::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--zg-hairline);
+  pointer-events: none;
+}
+.zg-script-lines {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-width: 100%;
+  padding-block: 0.5rem;
+  font-family: var(--zg-font-mono);
+  font-size: var(--zg-font-size-code);
+  line-height: 1.5;
+  color: var(--zg-code-fg);
+}
+.zg-code-scroll[data-wrap] .zg-script-lines {
+  width: auto;
+}
+.zg-script-lines[data-follow] {
+  max-height: calc(15 * 1.5em + 1rem);
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+html[data-motion='off'] .zg-script-lines,
+html[data-motion='reduced'] .zg-script-lines {
+  scroll-behavior: auto;
+}
+.zg-script-line {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  background: var(--zg-script-tint, transparent);
+  transition: background-color var(--zg-motion-fade);
+}
+.zg-script-gutter {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  padding-inline: var(--zg-code-pad-x) 0.75rem;
+  background: var(--zg-code-bg);
+  color: var(--zg-text-subtle);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  transition:
+    background-color var(--zg-motion-fade),
+    color var(--zg-motion-fade);
+}
+.zg-script-number {
+  min-width: var(--zg-script-digits, 1ch);
+  text-align: end;
+}
+.zg-script-mark {
+  display: inline-block;
+  flex: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  font-size: 0.75rem;
+}
+.zg-script-code {
+  white-space: pre;
+  padding-inline-end: var(--zg-code-pad-x);
+  transition: opacity var(--zg-motion-fade);
+}
+.zg-code-scroll[data-wrap] .zg-script-code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.zg-script-line[data-state='idle'] .zg-script-code,
+.zg-script-line[data-state='idle'] .zg-script-number {
+  opacity: 0.4;
+}
+/* A line's tint and bar come from its state. The gutter stays opaque (code
+   scrolled sideways passes under it): the tint goes on a layer over its own
+   background, and the bar sits on it, so both stay in place while scrolling. */
+.zg-script-line[data-state='running'] {
+  --zg-script-tint: color-mix(in srgb, var(--zg-accent-wash) 70%, transparent);
+  --zg-script-bar: var(--zg-accent);
+}
+.zg-script-line[data-state='failed'],
+.zg-script-error {
+  --zg-script-tint: color-mix(in srgb, var(--zg-danger-soft) 70%, transparent);
+  --zg-script-bar: var(--zg-danger);
+}
+.zg-script-gutter::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: var(--zg-script-tint, transparent);
+  box-shadow: inset 2px 0 0 var(--zg-script-bar, transparent);
+}
+.zg-script-line[data-state='running'] .zg-script-gutter {
+  color: var(--zg-accent);
+}
+.zg-script-line[data-state='running']::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+      100deg,
+      transparent 30%,
+      color-mix(in srgb, var(--zg-text) 6%, transparent) 50%,
+      transparent 70%
+    )
+    0 0 / 250% 100%;
+  animation: zg-shimmer 1.8s linear infinite;
+}
+.zg-script-line[data-state='done'] .zg-script-mark {
+  color: var(--zg-success);
+  animation: zg-fade-in var(--zg-motion-fade) both;
+}
+.zg-script-line[data-settling],
+.zg-script-line[data-settling] .zg-script-gutter::before {
+  animation: zg-script-settle calc(var(--zg-motion-fade-duration, 200ms) * 4) var(--zg-motion-fade-ease, ease-out) both;
+}
+.zg-script-error .zg-script-code,
+.zg-script-error .zg-script-gutter {
+  color: var(--zg-danger);
+}
+html[data-motion='off'] .zg-script-line::after,
+html[data-motion='reduced'] .zg-script-line::after {
+  animation: none;
+}
+
+@keyframes zg-script-settle {
+  from {
+    background-color: color-mix(in srgb, var(--zg-success-soft) 80%, transparent);
+  }
+}
+
+/* What a command or a tool wrote, in every row: a tool's output, a `!` run, a script's
+   live lines, a block's run. One tone and one metric, so live lines and the saved
+   output that replaces them read the same (no swap from bright to muted). */
+.zg-output {
+  padding: 0.5rem var(--zg-code-pad-x, 12px);
+  font-family: var(--zg-font-mono);
+  font-size: var(--zg-font-size-code);
+  line-height: 1.5;
+  color: var(--zg-text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The last lines a running thing wrote (`LiveOutput`): a script's prints and shell calls, a Run here. */
+.zg-live-output {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin-top: 0.375rem;
+}
+.zg-live-output[data-full] {
+  min-height: calc(var(--zg-live-tail) * 1.5em + 1rem);
+}
+/* A full window: the new line grows in as the oldest shrinks out, on one curve, so the
+   box keeps its height and the lines slide up instead of the box breathing. */
+.zg-live-output > .zg-grow,
+.zg-live-output > .zg-grow[data-shown] {
+  transition:
+    grid-template-rows var(--zg-motion-settle),
+    opacity var(--zg-motion-fade);
+}
+.zg-live-output [data-stream='console'],
+.zg-live-output [data-stream='stderr'] {
+  color: var(--zg-text-subtle);
+}
+
+/* A reply's shell block and its run under it (`RunnableCodeBlock`). */
+.zg-run-block > .zg-code-frame {
+  margin-block: 0;
+}
+.zg-run-panel {
+  margin-top: 0.25rem;
+}
+.zg-run-panel > .zg-live-output {
+  margin-top: 0.125rem;
+}
+.zg-run-output {
+  margin-top: 0.125rem;
+  max-height: calc(20 * 1.5em + 1rem);
+  overflow: auto;
+}
+.zg-run-note {
+  color: var(--zg-text-subtle);
+  font-style: italic;
+}
+.zg-run-terminal {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--zg-text-muted);
+  cursor: pointer;
+}
+.zg-run-terminal:hover {
+  color: var(--zg-text);
+}
+
+/* Terminal colors (`AnsiText`): the 16 base colors on the theme's tokens, the bright
+   ones lifted toward the text color. A span reads them by number; 256-palette and
+   24-bit colors are its own. */
+.zg-ansi {
+  --zg-ansi-0: var(--zg-text-subtle);
+  --zg-ansi-1: var(--zg-danger);
+  --zg-ansi-2: var(--zg-success);
+  --zg-ansi-3: var(--zg-warn);
+  --zg-ansi-4: var(--zg-info);
+  --zg-ansi-5: var(--zg-accent-alt);
+  --zg-ansi-6: color-mix(in srgb, var(--zg-info) 50%, var(--zg-success));
+  --zg-ansi-7: var(--zg-text-muted);
+  --zg-ansi-8: var(--zg-text-subtle);
+  --zg-ansi-9: color-mix(in srgb, var(--zg-ansi-1) 70%, var(--zg-text));
+  --zg-ansi-10: color-mix(in srgb, var(--zg-ansi-2) 70%, var(--zg-text));
+  --zg-ansi-11: color-mix(in srgb, var(--zg-ansi-3) 70%, var(--zg-text));
+  --zg-ansi-12: color-mix(in srgb, var(--zg-ansi-4) 70%, var(--zg-text));
+  --zg-ansi-13: color-mix(in srgb, var(--zg-ansi-5) 70%, var(--zg-text));
+  --zg-ansi-14: color-mix(in srgb, var(--zg-ansi-6) 70%, var(--zg-text));
+  --zg-ansi-15: var(--zg-text);
+}
+
+/* A running script's progress under its row's header: filled to its percent when
+   that is exact, else a band that moves (still under reduced / off motion). */
+.zg-script-bar {
+  position: relative;
+  display: block;
+  height: 2px;
+  margin-top: 0.25rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--zg-track);
+}
+.zg-script-bar::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: var(--zg-script-progress, 0%);
+  border-radius: inherit;
+  background: var(--zg-accent);
+  transition: width var(--zg-motion-settle);
+}
+.zg-script-bar[data-indeterminate]::after {
+  width: 30%;
+  animation: zg-script-band 1.4s ease-in-out infinite;
+}
+html[data-motion='off'] .zg-script-bar[data-indeterminate]::after,
+html[data-motion='reduced'] .zg-script-bar[data-indeterminate]::after {
+  width: 100%;
+  opacity: 0.35;
+  animation: none;
+}
+
+@keyframes zg-script-band {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(340%);
+  }
+}

package/src/adapters/browser-appearance-host.ts

@@ -1,51 +0,0 @@
-/**
- * An `AppearanceHost` (`zidane-ui/appearance/headless`) over the browser's
- * `localStorage`: the web app's. zidane-server keeps no appearance (the
- * protocol leaves themes and preferences client-local), so the preferences
- * and the pre-paint snapshot live in the page's storage, under the keys the
- * desktop app uses, and another tab's change is adopted through the
- * `storage` event. Built-in themes only: the server lists no extension themes.
- */
-import {
-  createStorageAppearancePrefs,
-  createStorageBoot,
-  type AppearanceHost,
-  type AppearanceStorage,
-  type ParseAppearanceOptions,
-} from '../appearance/headless';
-
-/** Options of {@link createBrowserAppearanceHost}. */
-export interface BrowserAppearanceHostOptions extends ParseAppearanceOptions {
-  /** Where the preferences and the snapshot live. Default: `localStorage` (a page without one keeps nothing). */
-  storage?: AppearanceStorage;
-  /** The preferences key. Default: `zg:appearance:v1`. */
-  key?: string;
-  /** The snapshot key. Default: `zg:appearance:boot:v1`. */
-  bootKey?: string;
-  /** Calls `onChange` when another tab changed the preferences. Default: the `storage` event. */
-  watch?: (key: string, onChange: () => void) => () => void;
-}
-
-/** `localStorage`, read at each call: a page without it (or with it disabled) throws, and the stores catch it. */
-const pageStorage: AppearanceStorage = {
-  getItem: (key) => localStorage.getItem(key),
-  setItem: (key, value) => localStorage.setItem(key, value),
-};
-
-/**
- * Creates an {@link AppearanceHost} over the browser's storage: `prefs` and `boot`.
- *
- * @param options - The storage, the keys, how to check code theme ids (`codeThemeTypeOf` from `zidane-ui/appearance`).
- */
-export function createBrowserAppearanceHost(options: BrowserAppearanceHostOptions = {}): AppearanceHost {
-  const { storage = pageStorage, key, bootKey, watch, codeThemeType } = options;
-  return {
-    prefs: createStorageAppearancePrefs({
-      storage,
-      ...(key ? { key } : {}),
-      ...(watch ? { watch } : {}),
-      ...(codeThemeType ? { codeThemeType } : {}),
-    }),
-    boot: createStorageBoot(storage, bootKey),
-  };
-}

package/src/adapters/browser-keybindings-host.ts

@@ -1,48 +0,0 @@
-/**
- * A `KeybindingsHost` (`zidane-ui/keybindings/headless`) over the browser's
- * `localStorage`: the web app's. zidane-server keeps no keybindings (the
- * protocol leaves them client-local, and `~/.zidane/keybindings.json` is the
- * desktop app's), so the overrides live in the page's storage as one JSON map.
- */
-import { createKeybindingOverrides, type KeybindingsHost } from '../keybindings/headless';
-
-/** The key the overrides live under by default. */
-const KEYBINDINGS_KEY = 'zg:keybindings:v1';
-
-/** Options of {@link createBrowserKeybindingsHost}. */
-export interface BrowserKeybindingsHostOptions {
-  /** Where the overrides live. Default: `localStorage` (a page without one keeps none). */
-  storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
-  /** The key. Default: `zg:keybindings:v1`. */
-  key?: string;
-}
-
-const pageStorage: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> = {
-  getItem: (key) => localStorage.getItem(key),
-  setItem: (key, value) => localStorage.setItem(key, value),
-  removeItem: (key) => localStorage.removeItem(key),
-};
-
-/**
- * Creates a {@link KeybindingsHost} over the browser's storage: the overrides and `save`.
- *
- * @param options - The storage and the key.
- */
-export function createBrowserKeybindingsHost(options: BrowserKeybindingsHostOptions = {}): KeybindingsHost {
-  const { storage = pageStorage, key = KEYBINDINGS_KEY } = options;
-  const state = createKeybindingOverrides(async () => {
-    const raw = storage.getItem(key);
-    return raw === null ? undefined : (JSON.parse(raw) as unknown);
-  });
-  return {
-    ...state,
-    async save(overrides) {
-      try {
-        if (Object.keys(overrides).length === 0) storage.removeItem(key);
-        else storage.setItem(key, JSON.stringify(overrides));
-      } finally {
-        await state.refresh();
-      }
-    },
-  };
-}

package/src/adapters/browser-workspace-host.ts

@@ -1,92 +0,0 @@
-/**
- * A `WorkspaceHost` for the web app served by zidane-server. The side
- * panel's layout is a UI preference with no server state: it is kept in the
- * browser (`createStorageLayouts` over `localStorage` by default), one record
- * per scope key, and another tab's write shows through the `storage` event.
- *
- * With `client`, the server's extension panels (`panels`): `panels.list`,
- * `panels.load`, `panels.action` and `panels.watch` / `unwatch` (watched
- * again after a reconnect), `panel:changed` to the watchers, and the catalog
- * re-read on `catalog:changed` (extensions, plugins) and every handshake.
- */
-import type { HostSignal } from 'zidane/ipc';
-import type { ServerClient } from 'zidane/ipc/browser';
-
-import type { WorkspaceHost, WorkspacePanels } from '../workspace/headless/host';
-import { createStorageLayouts, type LayoutStorage, type LayoutStoreOptions } from '../workspace/headless/layouts';
-
-/** Options for {@link createBrowserWorkspaceHost}. */
-export interface BrowserWorkspaceHostOptions extends LayoutStoreOptions {
-  /** Where layouts persist. Default: `localStorage` when there is one, else in memory. */
-  storage?: LayoutStorage;
-  /** The storage key. Default: `zidane-ui:workspace:v1`. */
-  key?: string;
-  /** Hears another tab's writes. Default: the `storage` event on `window`. */
-  listenExternal?: (onExternalWrite: (key: string | null) => void) => () => void;
-  /** The server whose extension panels it offers. Absent, or a server without `panels.list`: none. */
-  client?: ServerClient;
-}
-
-function memoryStorage(): LayoutStorage {
-  const map = new Map<string, string>();
-  return { getItem: (k) => map.get(k) ?? null, setItem: (k, v) => void map.set(k, v) };
-}
-
-function defaultStorage(): LayoutStorage {
-  try {
-    if (typeof localStorage !== 'undefined') return localStorage;
-  } catch {
-    // Storage blocked (privacy mode, sandboxed frame): keep layouts in memory.
-  }
-  return memoryStorage();
-}
-
-/** The server's extension panels. */
-function serverPanels(client: ServerClient): WorkspacePanels {
-  return {
-    list: (cwd) => client.call('panels.list', { cwd }),
-    load: (cwd, panelId, ctx) => client.call('panels.load', { cwd, panelId, ctx }),
-    action: async (cwd, panelId, actionId, payload, ctx) => {
-      const result = await client.call('panels.action', { cwd, panelId, actionId, payload, ctx });
-      return result.ok ? result : { ok: false, error: { code: 'failed', message: result.error } };
-    },
-    watch: (cwd, panelId) => {
-      const watch = () => void client.call('panels.watch', { cwd, panelId }).catch(() => undefined);
-      // A reconnect is a new connection: the server forgot the watch.
-      const offOpen = client.onOpen(watch);
-      watch();
-      return () => {
-        offOpen();
-        void client.call('panels.unwatch', { cwd, panelId }).catch(() => undefined);
-      };
-    },
-    subscribe: (onChange) =>
-      client.onSignal((signal: HostSignal) => {
-        if (signal.kind === 'panel:changed') onChange({ cwd: signal.cwd, panelId: signal.panelId });
-      }),
-    subscribeCatalog: (onChange) => {
-      const offSignal = client.onSignal((signal: HostSignal) => {
-        if (signal.kind === 'catalog:changed' && (signal.catalog === 'extensions' || signal.catalog === 'plugins'))
-          onChange();
-      });
-      const offOpen = client.onOpen(() => onChange());
-      return () => {
-        offSignal();
-        offOpen();
-      };
-    },
-  };
-}
-
-/**
- * Creates the web app's {@link WorkspaceHost}: layouts in browser storage, and the server's extension panels.
- *
- * @param options - The storage, its key, what an unknown scope reads, how other tabs' writes arrive and the server.
- */
-export function createBrowserWorkspaceHost(options: BrowserWorkspaceHostOptions = {}): WorkspaceHost {
-  const { storage = defaultStorage(), client, ...rest } = options;
-  return {
-    layouts: createStorageLayouts({ storage, ...rest }),
-    ...(client?.can('panels.list') ? { panels: serverPanels(client) } : {}),
-  };
-}