ompchamber 3.2.0 → 3.3.0

package/src/client/components/workspace/terminal-panel/KeyBar.tsx

@@ -0,0 +1,194 @@
+import { Check, ClipboardCopy, ClipboardPaste } from 'lucide-preact';
+import { useState } from 'preact/hooks';
+import {
+  TERMINAL_KEYS,
+  TERMINAL_SYMBOLS,
+  type TerminalKeyId,
+  type TerminalModifier,
+  type TerminalModifiers,
+} from '@/shared/lib/workspace/terminal/keys';
+
+interface TerminalKeyBarProps {
+  /** Latched modifiers — a tap arms one, and the next key consumes it. */
+  modifiers: TerminalModifiers;
+  onToggleModifier: (modifier: TerminalModifier) => void;
+  onKey: (id: TerminalKeyId) => void;
+  /** Cmd+C in a terminal: copy the selection. Resolves false when there was none. */
+  onCopy: () => Promise<boolean>;
+  /** Cmd+V in a terminal: paste into the shell. Resolves false on a denied clipboard. */
+  onPaste: () => Promise<boolean>;
+  /** The shell is not running; a key would be sent into nothing. */
+  disabled?: boolean;
+}
+
+const MODIFIERS: readonly { modifier: TerminalModifier; label: string; name: string }[] = [
+  { modifier: 'ctrl', label: 'Ctrl', name: 'Ctrl — applies to the next key' },
+  { modifier: 'alt', label: 'Alt', name: 'Alt / meta — applies to the next key' },
+];
+
+const KEY_CLASS =
+  'flex items-center justify-center h-8 min-w-8 px-1.5 rounded border font-mono transition-colors ' +
+  'cursor-pointer select-none disabled:opacity-40 disabled:cursor-default ' +
+  'text-[11px] @[420px]:h-9 @[420px]:min-w-10 @[420px]:text-xs';
+
+const IDLE_CLASS = 'bg-canvas text-ink/80 border-ink/15 hover:text-ink hover:bg-ink/5 active:bg-ink/10';
+const ARMED_CLASS = 'bg-ink text-canvas border-ink';
+
+/**
+ * The keys a phone's soft keyboard does not have.
+ *
+ * Every button sends raw bytes into the live PTY, so what the shell sees is
+ * identical to a physical keypress (the encoding, and the three rules it obeys,
+ * are in `keys.ts`). Ctrl and Alt are LATCHES rather than keys: tapping one arms
+ * it, and the next thing you send — a button here or a letter typed on the soft
+ * keyboard — carries it, which is the only way a phone reaches Ctrl+C, Ctrl+R
+ * or Alt+B.
+ *
+ * **Copy and Paste stand in for Cmd+C / Cmd+V**, which is what those chords mean
+ * in a terminal and the one thing a phone genuinely cannot do: it has no
+ * selection to right-click and no paste without a long-press the terminal canvas
+ * does not offer. There is no raw Cmd button because xterm discards `metaKey`
+ * on every key but Cmd+A (`if (ev.metaKey) break;`, which routes Cmd+A to
+ * select-all) — a Cmd button would send nothing, while the Cmd chords the user
+ * does have keep working untouched. Copy reports when there was no selection
+ * rather than flashing a check for a clipboard it did not fill.
+ *
+ * `pointerdown` is swallowed so tapping a key never moves focus out of xterm's
+ * hidden textarea: blurring it closes the OS keyboard, and a key bar that makes
+ * the keyboard disappear is worse than no key bar.
+ *
+ * Wrapping, not horizontal scrolling. The diff toolbar taught that a
+ * `no-scrollbar` overflow hides actions with nothing on screen to say so
+ * (measured: 361px of content in a 296px box, the last action entirely
+ * outside); a narrow panel here gets three rows of keys instead, and the
+ * container query grows them back on a wide one. The container is this bar's
+ * own root, so the breakpoints follow the PANEL — 320px on a desktop is the
+ * same problem as 320px on a phone.
+ */
+export function TerminalKeyBar({
+  modifiers,
+  onToggleModifier,
+  onKey,
+  onCopy,
+  onPaste,
+  disabled,
+}: TerminalKeyBarProps) {
+  const [symbols, setSymbols] = useState(false);
+  const [feedback, setFeedback] = useState<'copied' | 'empty' | 'pasteFailed' | null>(null);
+  const latched = modifiers.ctrl || modifiers.alt;
+
+  const flash = (next: typeof feedback) => {
+    setFeedback(next);
+    setTimeout(() => setFeedback((current) => (current === next ? null : current)), 1500);
+  };
+
+  const handleCopy = async () => {
+    flash((await onCopy()) ? 'copied' : 'empty');
+  };
+
+  const handlePaste = async () => {
+    if (!(await onPaste())) flash('pasteFailed');
+  };
+
+  return (
+    <div
+      className="@container flex flex-col gap-1 px-2 py-1.5 border-t border-ink/10 bg-paper flex-shrink-0"
+      onPointerDown={(event) => event.preventDefault()}
+    >
+      {/* Action row: the two latches, the Cmd pair, and the layer switch. */}
+      <div className="flex flex-wrap items-center gap-1">
+        {MODIFIERS.map(({ modifier, label, name }) => (
+          <button
+            key={modifier}
+            type="button"
+            onClick={() => onToggleModifier(modifier)}
+            aria-pressed={modifiers[modifier]}
+            title={name}
+            aria-label={name}
+            className={`${KEY_CLASS} ${modifiers[modifier] ? ARMED_CLASS : IDLE_CLASS}`}
+          >
+            {label}
+          </button>
+        ))}
+
+        {/* A latch is armed, so say so: an invisible Ctrl turns the next tap into
+            a signal the user never asked for. */}
+        {latched && (
+          <span className="text-[10px] font-mono text-ink/50 px-0.5 whitespace-nowrap" aria-hidden>
+            next
+          </span>
+        )}
+
+        <span className="w-px h-5 bg-ink/15 flex-shrink-0" aria-hidden />
+
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={disabled}
+          title={feedback === 'empty' ? 'Nothing selected' : 'Copy selection'}
+          aria-label="Copy selection"
+          className={`${KEY_CLASS} ${
+            feedback === 'empty'
+              ? 'bg-warning/10 text-warning border-warning/30'
+              : IDLE_CLASS
+          }`}
+        >
+          {feedback === 'copied' ? <Check size={13} /> : <ClipboardCopy size={13} />}
+          {/* Labelled, not icon-only: `ClipboardCopy` and `ClipboardPaste` are
+              the same 13px clipboard silhouette at a glance, so on a phone the
+              pair read as two identical buttons — the one thing a key bar must
+              never be. The label is what makes them tell themselves apart. */}
+          <span className="pl-1">Copy</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={handlePaste}
+          disabled={disabled}
+          title={feedback === 'pasteFailed' ? 'Clipboard unavailable' : 'Paste into the shell'}
+          aria-label="Paste into the shell"
+          className={`${KEY_CLASS} ${
+            feedback === 'pasteFailed'
+              ? 'bg-error/10 text-error border-error/30'
+              : IDLE_CLASS
+          }`}
+        >
+          <ClipboardPaste size={13} />
+          <span className="pl-1">Paste</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setSymbols((previous) => !previous)}
+          aria-pressed={symbols}
+          title={symbols ? 'Show control keys' : 'Show symbols'}
+          aria-label={symbols ? 'Show control keys' : 'Show symbols'}
+          className={`${KEY_CLASS} ml-auto ${symbols ? ARMED_CLASS : IDLE_CLASS}`}
+        >
+          {/* `123` / `ABC`, the labels every phone keyboard already uses for its
+              own symbol layer. An icon here was a metaphor the user had to
+              decode; the convention needs no decoding. */}
+          {symbols ? 'ABC' : '123'}
+        </button>
+      </div>
+
+      {/* Key row: the same set swaps in place, the way a phone keyboard's own
+          layer key works — two sets stacked would cost the canvas twice. */}
+      <div className="flex flex-wrap items-center gap-1">
+        {(symbols ? TERMINAL_SYMBOLS : TERMINAL_KEYS).map((def) => (
+          <button
+            key={def.id}
+            type="button"
+            disabled={disabled}
+            onClick={() => onKey(def.id)}
+            title={def.name}
+            aria-label={def.name}
+            className={`${KEY_CLASS} ${IDLE_CLASS}`}
+          >
+            {def.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/terminal-panel/RealtimeXtermView.tsx

@@ -17,6 +17,21 @@ export interface RealtimeXtermHandle {
   /** Drop the buffer and reset the cursor — used when the shell is replaced. */
   reset: () => void;
   focus: () => void;
+  /**
+   * The shell's DECCKM state, read at the moment a key bar button is pressed.
+   * A full-screen app (vim, less) sets it and then expects the SS3 spelling of
+   * the arrows, so the encoding cannot be decided once at mount.
+   */
+  applicationCursorKeys: () => boolean;
+  /** The current selection, empty when nothing is selected. */
+  getSelection: () => string;
+  /**
+   * Feed text in as a paste. Goes through xterm's own `paste`, which is what
+   * wraps it in the bracketed-paste markers when the shell asked for them —
+   * writing the bytes directly would make a multi-line paste execute line by
+   * line in an editor that expects one block.
+   */
+  paste: (text: string) => void;
 }
 
 interface RealtimeXtermViewProps {
@@ -76,6 +91,15 @@ export const RealtimeXtermView = forwardRef<RealtimeXtermHandle, RealtimeXtermVi
       focus() {
         mountRef.current?.term.focus();
       },
+      applicationCursorKeys() {
+        return mountRef.current?.term.modes.applicationCursorKeysMode ?? false;
+      },
+      getSelection() {
+        return mountRef.current?.term.getSelection() ?? '';
+      },
+      paste(text: string) {
+        mountRef.current?.term.paste(text);
+      },
     }), []);
 
     const scrollToBottom = useCallback(() => {

package/src/client/components/workspace/terminal-panel/index.tsx

@@ -1,10 +1,22 @@
-import { useCallback, useRef } from 'preact/hooks';
+import { useCallback, useRef, useState } from 'preact/hooks';
 import { useTerminal } from '@/client/hooks/workspace/terminal';
 import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useTheme } from '@/client/hooks/ui/theme';
+import { useTouchDevice } from '@/client/hooks/ui/touch-device';
+import { useKeyboardInset } from '@/client/hooks/ui/keyboard-inset';
+import { copyToClipboard, readClipboardText } from '@/client/hooks/ui/clipboard';
 import { TerminalHeader } from '@/client/components/workspace/terminal-panel/Header';
 import { TerminalQuickActions } from '@/client/components/workspace/terminal-panel/QuickActions';
+import { TerminalKeyBar } from '@/client/components/workspace/terminal-panel/KeyBar';
 import { RealtimeXtermView, type RealtimeXtermHandle } from '@/client/components/workspace/terminal-panel/RealtimeXtermView';
+import {
+  NO_MODIFIERS,
+  applyModifiers,
+  resolveKeySequence,
+  type TerminalKeyId,
+  type TerminalModifier,
+  type TerminalModifiers,
+} from '@/shared/lib/workspace/terminal/keys';
 
 interface TerminalPanelProps {
   className?: string;
@@ -18,9 +30,22 @@ const encoder = new TextEncoder();
 export function TerminalPanel({ className = '', enabled = true, rootPath, showHeader = true }: TerminalPanelProps) {
   const xtermRef = useRef<RealtimeXtermHandle>(null);
   const { isDark } = useTheme();
+  // Only a device without a physical keyboard gets the key bar: on a desktop
+  // every one of those keys is already under the user's fingers, and a strip of
+  // them would cost the canvas height for nothing.
+  const isTouchDevice = useTouchDevice();
+  // The inset is measured from the panel's OWN bottom edge, so it can never
+  // double-count a keyboard the container already shrank for.
+  const rootRef = useRef<HTMLDivElement>(null);
+  const keyboardInset = useKeyboardInset(rootRef);
+  const [modifiers, setModifiers] = useState<TerminalModifiers>(NO_MODIFIERS);
   const { activeRepo, setActiveRepo } = useRepoScope(rootPath, 'terminal.activeRepo');
   const { repos, scanning: reposScanning, rescan: rescanRepos } = useRepoList(rootPath, enabled);
   const gridRef = useRef<{ cols: number; rows: number } | null>(null);
+  // The latch is read inside `handleInput`, which xterm calls outside React's
+  // render — a ref is what makes it the value at the keystroke, not at mount.
+  const modifiersRef = useRef(modifiers);
+  modifiersRef.current = modifiers;
 
   const handleOutput = useCallback((bytes: Uint8Array) => {
     xtermRef.current?.write(bytes);
@@ -70,10 +95,59 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
 
   // Keystrokes arrive as text; `onBinary` payloads are latin-1 bytes and must
   // not be UTF-8 encoded on the way out.
+  //
+  // A latched modifier is folded in here, on the way out, because that is the
+  // only place a soft keyboard's letters pass through — Ctrl+C on a phone is a
+  // tap on `Ctrl` and then the `c` the OS keyboard produces.
   const handleInput = useCallback((data: string) => {
-    input(encoder.encode(data));
+    const latched = modifiersRef.current;
+    const armed = latched.ctrl || latched.alt;
+    const encoded = applyModifiers(data, latched);
+    // Only a single typed character consumes the latch. A paste, a mouse report
+    // or a focus event arrives on this same event and must leave the armed
+    // modifier alone, or the tap that armed it is silently spent on a no-op.
+    if (armed && data.length === 1) setModifiers(NO_MODIFIERS);
+    input(encoder.encode(encoded));
   }, [input]);
 
+  const handleToggleModifier = useCallback((modifier: TerminalModifier) => {
+    setModifiers((previous) => ({ ...previous, [modifier]: !previous[modifier] }));
+    xtermRef.current?.focus();
+  }, []);
+
+  const handleKey = useCallback((id: TerminalKeyId) => {
+    const sequence = resolveKeySequence(id, {
+      applicationCursorKeys: xtermRef.current?.applicationCursorKeys() ?? false,
+      modifiers: modifiersRef.current,
+    });
+    if (!sequence) return;
+    input(encoder.encode(sequence));
+    setModifiers(NO_MODIFIERS);
+    // Keep the OS keyboard where it was; a key bar tap must not dismiss it.
+    xtermRef.current?.focus();
+  }, [input]);
+
+  /**
+   * Cmd+C / Cmd+V, the two chords a terminal actually has — a phone can neither
+   * select on the canvas nor reach its own clipboard from there. Copy reports
+   * whether it had anything to copy so the bar can say "nothing selected"
+   * instead of flashing success over an untouched clipboard.
+   */
+  const handleCopy = useCallback(async () => {
+    const selection = xtermRef.current?.getSelection() ?? '';
+    if (!selection) return false;
+    return copyToClipboard(selection);
+  }, []);
+
+  const handlePaste = useCallback(async () => {
+    const text = await readClipboardText();
+    if (text === null || text.length === 0) return false;
+    // Through xterm's own paste, so a bracketed-paste shell gets its markers.
+    xtermRef.current?.paste(text);
+    xtermRef.current?.focus();
+    return true;
+  }, []);
+
   const handleBinaryInput = useCallback((data: string) => {
     const bytes = new Uint8Array(data.length);
     for (let i = 0; i < data.length; i += 1) bytes[i] = data.charCodeAt(i) & 0xff;
@@ -98,7 +172,17 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
   }
 
   return (
-    <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}>
+    <div
+      ref={rootRef}
+      className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}
+      // The soft keyboard covers the bottom of the visual viewport without
+      // shrinking the layout one, so the key bar would sit behind the keys the
+      // user is typing on. Lifting by the panel's actual overlap with the
+      // visible area keeps the bar — and the shell's own grid, which the fit
+      // observer re-measures — above the keyboard, and lifts nothing at all
+      // when the container already ends above it.
+      style={keyboardInset > 0 ? { paddingBottom: keyboardInset } : undefined}
+    >
       {showHeader && (
         <TerminalHeader
           status={status}
@@ -135,6 +219,17 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
           onGridChange={handleGridChange}
         />
       </div>
+
+      {isTouchDevice && (
+        <TerminalKeyBar
+          modifiers={modifiers}
+          onToggleModifier={handleToggleModifier}
+          onKey={handleKey}
+          onCopy={handleCopy}
+          onPaste={handlePaste}
+          disabled={status !== 'running'}
+        />
+      )}
     </div>
   );
 }

package/src/client/components/workspace/terminal-panel/mount.ts

@@ -34,6 +34,7 @@ import type { FitAddon } from '@xterm/addon-fit';
 import type { WebglAddon } from '@xterm/addon-webgl';
 import {
   getXtermTheme,
+  NERD_SYMBOLS_FAMILY,
   XTERM_FONT_FAMILY,
   safePatchFitAddon,
   safePatchRenderService,
@@ -127,6 +128,11 @@ export async function mountXterm(
   const fitAddon = new FitAddonClass() as FitAddon;
   term.loadAddon(fitAddon);
 
+  // The bundled Nerd Font symbols face may still be in flight (a phone has no
+  // Nerd Font of its own). See the helper for why the atlas has to be dropped
+  // once it lands.
+  const stopNerdFaceWatch = refreshAtlasWhenNerdFaceLoads(term);
+
   term.attachCustomKeyEventHandler((event: globalThis.KeyboardEvent) => handleKeyNavigation(term, event));
 
   const disposables = [
@@ -228,6 +234,7 @@ export async function mountXterm(
     dispose() {
       if (frame !== null) cancelAnimationFrame(frame);
       clearTimeout(fitTimer ?? undefined);
+      stopNerdFaceWatch();
       touch();
       for (const disposable of disposables) disposable.dispose();
       resizeObserver.disconnect();
@@ -241,6 +248,46 @@ export async function mountXterm(
   };
 }
 
+/**
+ * Re-rasterize the terminal once the bundled symbols face has loaded.
+ *
+ * xterm has no `document.fonts` listener: it rasterizes a glyph the first time
+ * it draws it and keeps the result in a texture atlas, so a PUA glyph written
+ * before the face arrived stays whatever the fallback painted — a tofu box —
+ * for the life of the buffer. The browser does re-lay-out DOM text when a face
+ * lands late (verified on the DOM renderer), but xterm's canvas does not get
+ * that for free.
+ *
+ * `loadingdone` naming our own family is exactly the signal that this machine
+ * had no Nerd Font of its own: the face is declared last in the stack and its
+ * `unicode-range` covers only PUA, so a device with an installed Nerd Font
+ * never fetches it (verified: zero requests with a local family present). That
+ * makes this a no-op on the developer's laptop and the fix on a phone.
+ *
+ * `clearTextureAtlas()` drops the atlas and forces a full refresh, which is
+ * what re-rasterizes the glyphs. It is a public API on `Terminal`, and the
+ * atlas is small enough that a full refresh is cheap — this runs at most once
+ * per page load.
+ *
+ * Returns a disposer.
+ */
+function refreshAtlasWhenNerdFaceLoads(term: Terminal): () => void {
+  if (typeof document === 'undefined' || !document.fonts) return () => {};
+
+  const onLoadingDone = (event: FontFaceSetLoadEvent) => {
+    const loaded = [...event.fontfaces].some((face) => face.family.replace(/['"]/g, '') === NERD_SYMBOLS_FAMILY);
+    if (!loaded) return;
+    try {
+      term.clearTextureAtlas();
+    } catch {
+      // A disposed terminal has no render service; nothing to refresh.
+    }
+  };
+
+  document.fonts.addEventListener('loadingdone', onLoadingDone);
+  return () => document.fonts.removeEventListener('loadingdone', onLoadingDone);
+}
+
 /** Shift+PageUp/Home/End scroll the viewport instead of reaching the shell. */
 function handleKeyNavigation(term: Terminal, event: globalThis.KeyboardEvent): boolean {
   if (event.type !== 'keydown' || !event.shiftKey) return true;

package/src/client/data/theme/terminal.ts

@@ -60,14 +60,21 @@ export function getXtermTheme(themeId: string) {
  * Material Design icons) that **no** coding webfont contains — `@fontsource/
  * fira-code`'s latin subset maps 226 codepoints and not one of them is above
  * U+FFFF — so without a face that supplies them the browser paints a hollow
- * tofu box for every prompt segment. The names below cover the Nerd Font
- * families a user is most likely to have installed (plus the *fontconfig*
- * symbol faces on Linux); a face that is absent is simply skipped by the
- * normal fallback chain, so listing many costs nothing.
+ * tofu box for every prompt segment.
  *
- * This is the same shape OpenChamber ships (`TERMINAL_GLYPH_FALLBACKS` in its
- * `ghostty/surface.ts`), which additionally bundles `SymbolsNerdFontMono` as a
- * webfont so the coverage never depends on the machine.
+ * The entries before the last one name the Nerd Font families a user is most
+ * likely to have installed (plus the *fontconfig* symbol faces on Linux); a
+ * face that is absent is simply skipped by the normal fallback chain, so
+ * listing many costs nothing.
+ *
+ * `'OMPChamber Nerd Symbols'` is the one the chamber bundles itself
+ * (`src/shared/lib/fonts/nerd-symbols.css`), and it is deliberately LAST: a
+ * machine that already has a Nerd Font renders from it and never fetches these
+ * bytes, while a phone — which has none — falls through to it instead of
+ * painting tofu. Verified: with the bundled face last and a local Nerd Font
+ * ahead of it, laying out a PUA glyph issued zero font requests; with no local
+ * family present, the face is fetched and all of the prompt's codepoints
+ * render.
  *
  * Only glyphs the text face lacks reach these entries, so Latin metrics are
  * untouched — verified: `A`/`m`/`W` keep identical advance and ink.
@@ -78,7 +85,17 @@ export const XTERM_GLYPH_FALLBACKS =
   "'MesloLGM Nerd Font', 'CaskaydiaCove Nerd Font', 'SauceCodePro Nerd Font', " +
   "'Symbols Nerd Font Mono', 'Symbols Nerd Font', 'PowerlineSymbols'";
 
-export const XTERM_FONT_FAMILY = `'Fira Code', ${XTERM_GLYPH_FALLBACKS}, Menlo, Monaco, 'Courier New', monospace`;
+/**
+ * The bundled symbols face, kept separate so `mount.ts` can await it by name.
+ *
+ * It must stay last in the stack (see above) and its family name must match the
+ * `@font-face` in `nerd-symbols.css` — the two are one contract, which is why
+ * the name is a constant rather than a literal in each file.
+ */
+export const NERD_SYMBOLS_FAMILY = 'OMPChamber Nerd Symbols';
+
+export const XTERM_FONT_FAMILY =
+  `'Fira Code', ${XTERM_GLYPH_FALLBACKS}, '${NERD_SYMBOLS_FAMILY}', Menlo, Monaco, 'Courier New', monospace`;
 
 /** xterm's private render service, read only to size-check before fitting. */
 export interface XtermCore {

package/src/client/hooks/editor/font.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor font setting, and how a live change reaches an open editor.
+ *
+ * The setting is visual, so it has to apply to the editor the user is looking
+ * at — not on the next reload. That rules out reading it once from the
+ * bootstrap payload the way `keybindingSend` is read: `appSettings` is a prop
+ * captured at boot, so a settings change would not reach an already-mounted
+ * editor. The theme solved the same problem with a window event, and this
+ * follows it: the picker writes the setting AND announces it, and the editor
+ * subscribes.
+ *
+ * The stored value is the family name. `editorFontStack` puts it in front of
+ * the shared stack, so a face the device lacks falls through to the bundled
+ * Fira Code instead of replacing it — which is why the picker can offer faces
+ * the app does not ship.
+ */
+
+import { useEffect, useState } from 'preact/hooks';
+import { readChamberSetting } from '@/shared/lib/settings/client';
+import {
+  EDITOR_DEFAULT_FONT_FAMILY,
+  editorFontStack,
+} from '@/shared/lib/code/editor/typography';
+
+/** Broadcast on every editor-font write. Detail is the new family name. */
+export const EDITOR_FONT_CHANGED_EVENT = 'omp:editor-font-changed';
+
+/** The family currently stored, falling back to the shipped default. */
+export function currentEditorFont(): string {
+  if (typeof window === 'undefined') return EDITOR_DEFAULT_FONT_FAMILY;
+  return readChamberSetting<string>('editorFont') ?? EDITOR_DEFAULT_FONT_FAMILY;
+}
+
+/** The stored family and the stack it resolves to, kept in step with writes. */
+export function useEditorFontStack(): string {
+  const [family, setFamily] = useState<string>(currentEditorFont);
+
+  useEffect(() => {
+    const onChange = (event: Event) => {
+      const detail = (event as CustomEvent<string>).detail;
+      setFamily(detail || currentEditorFont());
+    };
+    window.addEventListener(EDITOR_FONT_CHANGED_EVENT, onChange);
+    return () => window.removeEventListener(EDITOR_FONT_CHANGED_EVENT, onChange);
+  }, []);
+
+  return editorFontStack(family);
+}

package/src/client/hooks/ui/clipboard.ts

@@ -31,3 +31,20 @@ export async function copyToClipboard(text: string): Promise<boolean> {
     return false;
   }
 }
+
+/**
+ * Read text from the clipboard, or null when the browser refused.
+ *
+ * There is no fallback, and there cannot be one: `execCommand('paste')` is
+ * blocked by every browser and `navigator.clipboard.readText` needs a secure
+ * context plus a permission the user grants once — so a denial is reported
+ * rather than papered over with an empty paste.
+ */
+export async function readClipboardText(): Promise<string | null> {
+  try {
+    if (!navigator.clipboard || !window.isSecureContext) return null;
+    return await navigator.clipboard.readText();
+  } catch {
+    return null;
+  }
+}

package/src/client/hooks/ui/keyboard-inset.test.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The keyboard-inset arithmetic.
+ *
+ * The failure this file exists for is an OVER-lift: computing the keyboard's
+ * height from `innerHeight - visualHeight` and applying it to a panel that does
+ * not reach the screen's bottom edge (a drawer with safe-area padding, a
+ * container a browser already shrank) lifts by the keyboard's height PLUS the
+ * gap the panel never had. Deriving the lift from the panel's own overlap makes
+ * every one of those cases zero.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { resolveKeyboardInset } from '@/client/hooks/ui/keyboard-inset';
+
+describe('resolveKeyboardInset', () => {
+  test('a panel that clears the visible bottom is not lifted', () => {
+    // Keyboard open, panel already above it: nothing to do.
+    expect(resolveKeyboardInset(500, 508)).toBe(0);
+    expect(resolveKeyboardInset(508, 508)).toBe(0);
+  });
+
+  test('a collapsed URL bar is not a keyboard', () => {
+    expect(resolveKeyboardInset(844, 780)).toBe(0);
+    expect(resolveKeyboardInset(844, 765)).toBe(0);
+  });
+
+  test('the lift is the overlap, not the keyboard height', () => {
+    // Panel bottom at 844, visible bottom at 508 -> 336px covered.
+    expect(resolveKeyboardInset(844, 508)).toBe(336);
+    // The same keyboard over a panel that ends 20px higher lifts 20px less,
+    // which is exactly the over-lift the height-difference form produced.
+    expect(resolveKeyboardInset(824, 508)).toBe(316);
+    expect(resolveKeyboardInset(508, 508)).toBe(0);
+  });
+
+  test('a nonsense visible bottom lifts nothing', () => {
+    expect(resolveKeyboardInset(844, 0)).toBe(0);
+    expect(resolveKeyboardInset(844, -100)).toBe(0);
+  });
+});