zidane-ui 9.0.4 → 9.1.3

package/src/styles/transcript.css

@@ -276,6 +276,54 @@ html[data-motion='reduced'] .zg-arc::after {
   color: var(--zg-text);
 }
 
+/* Mermaid diagrams (MermaidDiagram, drawn by Pele). Pele's SVG reads these
+   variables, so a theme switch repaints it with no redraw. The depth grammar
+   holds: the diagram sits on the code panel's tone, its nodes are raised
+   chips, its subgraphs trays; lines and borders are the text's quieter tones;
+   charts and categories take the status colors. */
+.zg-diagram {
+  --pele-bg: var(--zg-code-bg);
+  --pele-fg: var(--zg-text);
+  --pele-muted: var(--zg-text-muted);
+  --pele-line: var(--zg-text-muted);
+  --pele-surface: var(--zg-raised);
+  --pele-surface-alt: var(--zg-tray);
+  --pele-border: var(--zg-border);
+  --pele-accent: var(--zg-accent);
+  --pele-critical: var(--zg-danger);
+  --pele-error: var(--zg-danger);
+  --pele-font: var(--zg-font-chat);
+  --pele-font-mono: var(--zg-font-mono);
+  --pele-radius: var(--zg-radius-sm);
+  /* Pele's own hue order (blue, orange, green, red, …): neighbors stay apart in every theme. */
+  --pele-series-1: var(--zg-accent);
+  --pele-series-2: var(--zg-warn);
+  --pele-series-3: var(--zg-success);
+  --pele-series-4: var(--zg-danger);
+  --pele-series-5: var(--zg-model);
+  --pele-series-6: var(--zg-info);
+  --pele-series-7: var(--zg-accent-alt);
+  --pele-series-8: var(--zg-money);
+}
+/* The measured text: Pele sizes labels from the canvas's font. */
+.zg-diagram-canvas {
+  font-family: var(--zg-font-chat);
+  font-size: var(--zg-font-size-chat);
+  line-height: 1.4;
+  color: var(--zg-text);
+}
+.zg-diagram-canvas > svg {
+  display: block;
+  margin-inline: auto;
+}
+/* Zoomed in: the drawing pans under the pointer. */
+.zg-diagram-canvas[data-zoomed] {
+  cursor: grab;
+}
+.zg-diagram-canvas[data-zoomed]:active {
+  cursor: grabbing;
+}
+
 .zg-md > *:first-child {
   margin-top: 0;
 }
@@ -585,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/styles/workspace.css

@@ -30,9 +30,50 @@
   width: var(--zg-side-panel-w);
   /* Clip everything except the handle on the inner (left) edge. */
   clip-path: inset(0 0 0 -8px);
+  transition:
+    width var(--zg-panel-ms) var(--zg-panel-ease),
+    clip-path var(--zg-panel-ms) var(--zg-panel-ease);
+}
+
+/* Full screen (`SidePanel`'s `expanded`): the aside keeps its width in the row (nothing
+   beside it reflows), its clip opens to the parent at once (`data-full`), and the sheet,
+   pinned to the outer edge, grows to the parent's width on the panel clock
+   (`data-expanded`): its content flows to each new width, the way a window resize does.
+   Leaving, it shrinks back the same way before the clip closes. */
+.zg-side-panel[data-full] {
+  z-index: 30;
+  clip-path: inset(0 0 0 calc(var(--zg-side-panel-w) - var(--zg-side-panel-full-w, var(--zg-side-panel-w))));
   transition: width var(--zg-panel-ms) var(--zg-panel-ease);
 }
 
+.zg-side-panel[data-full] .zg-side-panel-sheet {
+  left: auto;
+  right: 0;
+  transition:
+    opacity var(--zg-motion-fade),
+    width var(--zg-panel-ms) var(--zg-panel-ease);
+}
+
+.zg-side-panel[data-expanded] .zg-side-panel-sheet {
+  width: var(--zg-side-panel-full-w, var(--zg-side-panel-w));
+}
+
+/* A strip with something drawn over its end (`PanelStrip`'s `endInset`): its padding, plus that room. */
+.zg-panel-strip-end {
+  padding-right: calc(0.5rem + var(--zg-strip-end-inset));
+}
+
+/* The corner (`PanelCorner`): pop out and full screen fade in left of the toggle while the panel shows. */
+.zg-panel-corner-extra {
+  transition: opacity var(--zg-motion-fade);
+}
+
+.zg-panel-corner-extra-hidden {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--zg-motion-fade-out);
+}
+
 .zg-side-panel[data-collapsed='true'] {
   width: 0;
 }
@@ -60,3 +101,20 @@
 .zg-resizing-browser webview {
   pointer-events: none;
 }
+
+/* Panel data that changes in place (another project, another range) moves instead of jumping (PanelItems.tsx):
+   heat cells re-tint, bars and meters glide, a changed number fades in. On the motion tokens: none at motion off. */
+.zg-panel-heatmap rect {
+  transition: fill var(--zg-motion-fade);
+}
+.zg-panel-bars rect {
+  transition:
+    y var(--zg-motion-settle),
+    height var(--zg-motion-settle);
+}
+.zg-panel-meter {
+  transition: width var(--zg-motion-settle);
+}
+.zg-panel-value {
+  animation: zg-fade-in var(--zg-motion-fade) both;
+}

package/dist/chat/composer/use-hud.d.ts

@@ -1,16 +0,0 @@
-import { ComposerHudBadge, ComposerHudStatus } from "../headless/composer/host-chrome.js";
-//#region src/chat/composer/use-hud.d.ts
-/**
- * The extensions' statuses scoped to `sessionId`.
- *
- * @param sessionId - The session, `null` for none.
- */
-declare function useHudStatuses(sessionId: string | null): readonly ComposerHudStatus[];
-/**
- * The extension badges of `sessionId`'s composer.
- *
- * @param sessionId - The session, `null` for none.
- */
-declare function useHudBadges(sessionId: string | null): readonly ComposerHudBadge[];
-//#endregion
-export { useHudBadges, useHudStatuses };

package/dist/chat/composer/use-hud.js

@@ -1,36 +0,0 @@
-import { useComposerHost } from "./ComposerHostProvider.js";
-import { hudStoreOf } from "../headless/composer/hud.js";
-import { useSyncExternalStore } from "react";
-//#region src/chat/composer/use-hud.ts
-/**
-* What extensions show with a session (`ComposerHost.hud`): its statuses and
-* its composer badges. A session's lists keep their identity until its own
-* entries change, so the badge strip re-renders only for its session.
-*/
-const NO_STATUSES = [];
-const NO_BADGES = [];
-const noSubscribe = () => () => void 0;
-/**
-* The extensions' statuses scoped to `sessionId`.
-*
-* @param sessionId - The session, `null` for none.
-*/
-function useHudStatuses(sessionId) {
-	const hud = useComposerHost().hud;
-	const store = hud ? hudStoreOf(hud) : null;
-	const get = () => store ? store.statuses(sessionId) : NO_STATUSES;
-	return useSyncExternalStore(store ? store.subscribe : noSubscribe, get, get);
-}
-/**
-* The extension badges of `sessionId`'s composer.
-*
-* @param sessionId - The session, `null` for none.
-*/
-function useHudBadges(sessionId) {
-	const hud = useComposerHost().hud;
-	const store = hud ? hudStoreOf(hud) : null;
-	const get = () => store ? store.badges(sessionId) : NO_BADGES;
-	return useSyncExternalStore(store ? store.subscribe : noSubscribe, get, get);
-}
-//#endregion
-export { useHudBadges, useHudStatuses };

package/dist/chat/headless/composer/hud.d.ts

@@ -1,25 +0,0 @@
-import { ComposerHud, ComposerHudBadge, ComposerHudStatus } from "./host-chrome.js";
-//#region src/chat/headless/composer/hud.d.ts
-/** The strip's snapshot, read per session. */
-interface HudStore {
-  /** Registers a listener called after the snapshot changes (the first one starts following the host). Returns the unsubscribe. */
-  subscribe(listener: () => void): () => void;
-  /** The statuses scoped to `sessionId`. */
-  statuses(sessionId: string | null): readonly ComposerHudStatus[];
-  /** The extension badges of `sessionId`'s composer. */
-  badges(sessionId: string | null): readonly ComposerHudBadge[];
-}
-/**
- * Creates the strip's store over a host's `hud`.
- *
- * @param hud - Where snapshots come from.
- */
-declare function createHudStore(hud: ComposerHud): HudStore;
-/**
- * The one {@link HudStore} of a host's `hud`, made on first use.
- *
- * @param hud - The host's member.
- */
-declare function hudStoreOf(hud: ComposerHud): HudStore;
-//#endregion
-export { HudStore, createHudStore, hudStoreOf };

package/dist/chat/headless/composer/hud.js

@@ -1,66 +0,0 @@
-//#region src/chat/headless/composer/hud.ts
-const NO_STATUSES = [];
-const NO_BADGES = [];
-/** `fresh` keyed like `previous`, reusing a session's previous list when it did not change. */
-function keep(previous, fresh, same) {
-	const lists = fresh && typeof fresh === "object" ? fresh : {};
-	const out = {};
-	for (const [key, list] of Object.entries(lists)) {
-		if (!Array.isArray(list)) continue;
-		const before = previous[key];
-		out[key] = before && same(before, list) ? before : list;
-	}
-	return out;
-}
-function sameStatuses(a, b) {
-	return a.length === b.length && a.every((s, i) => s.extension === b[i].extension && s.text === b[i].text && s.loader === b[i].loader);
-}
-function sameBadges(a, b) {
-	return a.length === b.length && a.every((badge, i) => JSON.stringify(badge) === JSON.stringify(b[i]));
-}
-/**
-* Creates the strip's store over a host's `hud`.
-*
-* @param hud - Where snapshots come from.
-*/
-function createHudStore(hud) {
-	let sessions = {};
-	let badges = {};
-	let wired = false;
-	const listeners = /* @__PURE__ */ new Set();
-	const set = (next) => {
-		sessions = keep(sessions, next?.sessions, sameStatuses);
-		badges = keep(badges, next?.badges, sameBadges);
-		for (const listener of listeners) listener();
-	};
-	const wire = () => {
-		if (wired) return;
-		wired = true;
-		hud.onState(set);
-		hud.get?.().then(set, () => void 0);
-	};
-	return {
-		subscribe(listener) {
-			wire();
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		},
-		statuses: (sessionId) => sessionId ? sessions[sessionId] ?? NO_STATUSES : NO_STATUSES,
-		badges: (sessionId) => sessionId ? badges[sessionId] ?? NO_BADGES : NO_BADGES
-	};
-}
-const stores = /* @__PURE__ */ new WeakMap();
-/**
-* The one {@link HudStore} of a host's `hud`, made on first use.
-*
-* @param hud - The host's member.
-*/
-function hudStoreOf(hud) {
-	let store = stores.get(hud);
-	if (!store) stores.set(hud, store = createHudStore(hud));
-	return store;
-}
-//#endregion
-export { createHudStore, hudStoreOf };

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();
-      }
-    },
-  };
-}