zidane-ui 9.0.4 → 9.1.3

package/src/app/ModalProvider.tsx

@@ -1,711 +0,0 @@
-/**
- * The app's modal layer: a single-slot overlay paired with a `useModal()` hook.
- *
- * Single-slot contract: only one modal is open at a time; opening a
- * second modal replaces the first; `Escape` or scrim click closes the
- * active modal. An app's keyboard handler can call `modal.isOpen`
- * to suppress global shortcuts while a modal owns input.
- *
- * Two presentations share the slot: `dialog` (scrim + centred panel, the
- * default) and `screen` (a full-window layer, used by Settings). Both count
- * as "open" for every guard, both mark the background inert, both close on
- * Escape, so a surface can switch presentation without touching callers.
- *
- * The modal body is rendered inline (not in a Portal): there are no overflow
- * boundaries to escape, and theme tokens reach it naturally.
- *
- * Per-modal `aria-labelledby` is wired via the `MODAL_TITLE_ID` contract
- * exported below: every modal content shell sets `id={MODAL_TITLE_ID}` on
- * its title element, and the scrim references it back via `aria-labelledby`.
- *
- * One stacked layer sits above the slot (`openLayer`): a short dialog such
- * as a confirm that must not replace the surface it was asked from (Settings,
- * session details). Esc, a scrim click and closing the slot all dismiss it.
- *
- * Window chrome: a desktop app whose window draws native controls over the
- * page (macOS traffic lights) passes `chromeInset`, the band `ScreenShell`
- * keeps clear, in device-independent pixels (divided by `--zg-zoom` when the
- * app sets it).
- */
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-
-import { AnimatePresence, motion, useIsPresent } from 'motion/react';
-import { useAppearanceState } from '../appearance/AppearanceProvider';
-import { buttonClass } from '../components/button';
-import { ErrorBoundary, ErrorDetails, type ErrorFallbackProps } from '../components/ErrorBoundary';
-import { IconButton } from '../components/IconButton';
-import { Keycap } from '../components/Keycap';
-import { useLabels } from '../labels';
-import { useWithFade } from '../motion/springs';
-
-/**
- * Stable id contract — every `<ModalShell>` stamps this id onto its
- * title `<h2>` so the scrim can reference it via `aria-labelledby`.
- * Only one modal is open at a time, so a static id is collision-free.
- */
-export const MODAL_TITLE_ID = 'zg-modal-title';
-
-/** How the slot presents its surface: a centred dialog over a scrim, or the whole window. */
-export type ModalVariant = 'dialog' | 'screen';
-
-/** Options of {@link ModalContextValue.openLayer}. */
-export interface LayerOptions {
-  /** Called when the layer is dismissed from outside (Esc, scrim, slot closed, replaced). */
-  onDismiss: () => void;
-  /** Id of the layer's own title element. */
-  labelledBy: string;
-}
-
-/** Options of {@link ModalContextValue.open}. */
-export interface ModalOpenOptions {
-  /** `dialog` (default) or `screen`. */
-  variant?: ModalVariant;
-  /** Names the surface, so it can tell "still mine" ({@link ModalContextValue.activeId}) and close only itself. */
-  id?: string;
-  /**
-   * The dialog scrim: `blur` (default) frosts the window behind a dialog you
-   * stay in; `dim` only darkens it, for a quick surface (the palette) that
-   * comes and goes with a key and must never cost a frame.
-   */
-  scrim?: ModalScrimKind;
-}
-
-/** The dialog scrim: `blur` frosts the window behind, `dim` only darkens it. */
-export type ModalScrimKind = 'blur' | 'dim';
-
-interface ModalSlot {
-  node: ReactNode;
-  variant: ModalVariant;
-  id: string | null;
-  scrim: ModalScrimKind;
-}
-
-/** What {@link useModal} returns. */
-export interface ModalContextValue {
-  /** A slot surface or a stacked layer is up. */
-  isOpen: boolean;
-  /**
-   * Whose surface fills the slot. Callers that pass `id` on `open` can tell
-   * "still mine" from "replaced by another modal" without relying on an
-   * unmount, which StrictMode simulates in development.
-   */
-  activeId: string | null;
-  /** Show `node` in the slot, replacing what is there. */
-  open: (node: ReactNode, options?: ModalOpenOptions) => void;
-  /** Close the slot; with `id`, only while that surface still owns it (a self-close). */
-  close: (id?: string) => void;
-  /** What Esc and a scrim click call instead of `close` (a shell registers its `onClose`); `null` clears it. */
-  setDismissHandler: (handler: (() => void) | null) => void;
-  /** Shows `node` above the current slot without replacing it. */
-  openLayer: (node: ReactNode, options: LayerOptions) => void;
-  /** Removes the layer without calling its `onDismiss`. */
-  closeLayer: () => void;
-}
-
-const ModalContext = createContext<ModalContextValue | null>(null);
-
-/** The band native window chrome covers, in device-independent pixels. */
-export interface ModalChromeInset {
-  /** Height of the top band (the traffic lights' row). */
-  top: number;
-  /** Width kept clear at the start of that band; 0 for none. */
-  leading: number;
-}
-
-const NO_CHROME: ModalChromeInset = { top: 44, leading: 0 };
-const ChromeContext = createContext<ModalChromeInset>(NO_CHROME);
-
-/** A length in device-independent pixels, constant on screen under page zoom (`--zg-zoom`, 1 without it). */
-const chromePx = (dip: number) => `calc(${dip}px / var(--zg-zoom, 1))`;
-
-/** Props for {@link ModalProvider}. */
-export interface ModalProviderProps {
-  /** Native window chrome over the page; absent: a 44px band with nothing to keep clear. */
-  chromeInset?: ModalChromeInset;
-  /** The app: inert while a modal is open. */
-  children: ReactNode;
-}
-
-/**
- * Holds the modal slot and its stacked layer, and renders them above `children` (see the top of this file).
- *
- * @param props - The `children` and an optional `chromeInset`.
- */
-export function ModalProvider({ chromeInset = NO_CHROME, children }: ModalProviderProps) {
-  const [slot, setSlot] = useState<ModalSlot | null>(null);
-  const content = slot?.node ?? null;
-  const dismissHandlerRef = useRef<(() => void) | null>(null);
-  const [layer, setLayer] = useState<({ node: ReactNode } & LayerOptions) | null>(null);
-  // Kept in step by every setter below (each assigns it before `setLayer`).
-  const layerRef = useRef(layer);
-  const dismissLayer = useCallback(() => {
-    const current = layerRef.current;
-    if (current) {
-      layerRef.current = null;
-      setLayer(null);
-      current.onDismiss();
-    }
-  }, []);
-  const openLayer = useCallback(
-    (node: ReactNode, options: LayerOptions) => {
-      dismissLayer();
-      const next = { node, ...options };
-      layerRef.current = next;
-      setLayer(next);
-    },
-    [dismissLayer],
-  );
-  const closeLayer = useCallback(() => {
-    layerRef.current = null;
-    setLayer(null);
-  }, []);
-
-  /*
-   * Exit presence is motion's (`AnimatePresence` below): a closed surface
-   * stays mounted while it animates out (`data-state="closing"`), then goes.
-   * Surfaces are keyed by variant, so opening anything while one is leaving
-   * takes the slot back in place.
-   */
-  const slotRef = useRef(slot);
-  // The committed slot, for `close` to tell a stale self-close (read in callbacks only).
-  // eslint-disable-next-line react-hooks/refs
-  slotRef.current = slot;
-  const open = useCallback(
-    (node: ReactNode, options?: ModalOpenOptions) => {
-      dismissLayer();
-      setSlot({
-        node,
-        variant: options?.variant ?? 'dialog',
-        id: options?.id ?? null,
-        scrim: options?.scrim ?? 'blur',
-      });
-    },
-    [dismissLayer],
-  );
-  const close = useCallback(
-    (id?: unknown) => {
-      // A surface closing ITSELF names its id: once another modal has taken the
-      // slot (its leaving copy is still animating out), that close is stale.
-      // Only a string counts: `onClose={modal.close}` hands an event here.
-      if (typeof id === 'string' && slotRef.current?.id !== id) return;
-      dismissLayer();
-      setSlot(null);
-    },
-    [dismissLayer],
-  );
-  const setDismissHandler = useCallback((handler: (() => void) | null) => {
-    dismissHandlerRef.current = handler;
-  }, []);
-  const dismiss = useCallback(() => {
-    if (dismissHandlerRef.current) {
-      dismissHandlerRef.current();
-      return;
-    }
-
-    close();
-  }, [close]);
-
-  /*
-   * Global Esc handler — captured at the document level so the active
-   * modal always gets first dibs on Escape regardless of which element
-   * currently has focus.
-   */
-  useEffect(() => {
-    if (!content && !layer) {
-      return;
-    }
-
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        if (layerRef.current) {
-          dismissLayer();
-          return;
-        }
-        dismiss();
-      }
-    };
-    document.addEventListener('keydown', onKey);
-
-    return () => document.removeEventListener('keydown', onKey);
-  }, [content, layer, dismiss, dismissLayer]);
-
-  const isOpen = content !== null || layer !== null;
-  /*
-   * Inert restyles the whole background (Chromium recomputes every element's
-   * style under it), so it lands a frame after the modal paints instead of
-   * in that frame. Focus is in the modal by then; the scrim takes the pointer.
-   */
-  const [backgroundInert, setBackgroundInert] = useState(false);
-  useEffect(() => {
-    if (!isOpen) return undefined;
-    let live = true;
-    requestAnimationFrame(() => requestAnimationFrame(() => live && setBackgroundInert(true)));
-    return () => {
-      live = false;
-      setBackgroundInert(false);
-    };
-  }, [isOpen]);
-
-  const value = useMemo<ModalContextValue>(
-    () => ({ isOpen, activeId: slot?.id ?? null, open, close, setDismissHandler, openLayer, closeLayer }),
-    [isOpen, slot?.id, open, close, setDismissHandler, openLayer, closeLayer],
-  );
-
-  return (
-    <ChromeContext.Provider value={chromeInset}>
-      <ModalContext.Provider value={value}>
-        {/*
-         * `inert` while a modal is open — the ROOT gate for every background
-         * input path. Window-level keydown handlers gate themselves on
-         * `modal.isOpen`, but that can't stop NATIVE activation: focus stays
-         * on (or Tabs to) background buttons behind the scrim, where
-         * Enter/Space click them directly (e.g. a sidebar session row —
-         * switching the conversation under an open Settings modal). Inert
-         * removes the whole background subtree from focus/click/tab order in
-         * one place instead of per-widget gates. `display: contents` keeps
-         * the wrapper out of layout.
-         *
-         * ENGINE DEPENDENCY: `inert` on a `display: contents` element has
-         * had inconsistent Chromium/WebKit behavior historically. The
-         * settings.test.ts e2e regression ("conversations don't switch
-         * while Settings is open") is the CANARY — if an Electron upgrade
-         * breaks it, move `inert` onto a real block wrapper instead.
-         * Side effect, accepted: background text selection is disabled
-         * while any modal (incl. ask_user interactions) is open.
-         */}
-        <div className="contents" inert={isOpen && backgroundInert}>
-          {children}
-        </div>
-        <AnimatePresence>
-          {slot?.variant === 'dialog' && (
-            <ModalScrim key="dialog" covered={layer !== null} kind={slot.scrim} onDismiss={dismiss}>
-              <ErrorBoundary
-                region="Dialog"
-                resetKey={slot.node}
-                fallback={(props) => <ModalCrash {...props} onClose={close} />}
-              >
-                {slot.node}
-              </ErrorBoundary>
-            </ModalScrim>
-          )}
-          {slot?.variant === 'screen' && (
-            <ModalScreen key="screen" covered={layer !== null}>
-              <ErrorBoundary
-                region="Screen"
-                resetKey={slot.node}
-                fallback={(props) => (
-                  <div className="flex w-full h-full items-center justify-center">
-                    <ModalCrash {...props} onClose={close} />
-                  </div>
-                )}
-              >
-                {slot.node}
-              </ErrorBoundary>
-            </ModalScreen>
-          )}
-        </AnimatePresence>
-        <AnimatePresence>
-          {layer && (
-            <ModalScrim key="layer" onDismiss={dismissLayer} labelledBy={layer.labelledBy}>
-              <ErrorBoundary
-                region="Dialog"
-                resetKey={layer.node}
-                fallback={(props) => <ModalCrash {...props} onClose={dismissLayer} titleId={layer.labelledBy} />}
-              >
-                {layer.node}
-              </ErrorBoundary>
-            </ModalScrim>
-          )}
-        </AnimatePresence>
-      </ModalContext.Provider>
-    </ChromeContext.Provider>
-  );
-}
-
-/**
- * A modal that threw: the same panel and Esc / scrim / close, with the
- * message, so the user is never left with a scrim over nothing. Not
- * `ModalShell`: that one takes the slot's dismiss handler, which belongs to
- * the slot even when the crash is in the stacked layer.
- */
-function ModalCrash({
-  error,
-  componentStack,
-  reset,
-  onClose,
-  titleId = MODAL_TITLE_ID,
-}: ErrorFallbackProps & { onClose: () => void; titleId?: string }) {
-  const labels = useLabels();
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- keeps a press inside the panel from the scrim
-    <div
-      role="alert"
-      data-zg-error-boundary="modal"
-      className="zg-modal-panel zg-float w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col overflow-hidden"
-      onMouseDown={(event) => event.stopPropagation()}
-    >
-      <header className="flex items-start gap-2 px-5 py-3.5 border-b border-[var(--zg-hairline)]">
-        <h2 id={titleId} className="flex-1 min-w-0 self-center text-sm font-semibold text-[var(--zg-text)] m-0">
-          {labels.modalFailed}
-        </h2>
-        <IconButton icon="i-ph-x" label={labels.close} size="lg" onClick={onClose} className="-mr-2" />
-      </header>
-      <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 text-zg-label text-[var(--zg-text-muted)]">
-        <ErrorDetails error={error} componentStack={componentStack} />
-      </div>
-      <footer className="shrink-0 flex justify-end gap-2 px-5 py-3 bg-[var(--zg-tray)]">
-        <button type="button" className={buttonClass({ size: 'sm' })} onClick={reset}>
-          {labels.errorTryAgain}
-        </button>
-        <button type="button" className={buttonClass({ size: 'sm', variant: 'primary' })} onClick={onClose}>
-          {labels.close}
-        </button>
-      </footer>
-    </div>
-  );
-}
-
-/** The modal layer, or `null` outside a {@link ModalProvider} (a component that can do without it). */
-export function useOptionalModal(): ModalContextValue | null {
-  return useContext(ModalContext);
-}
-
-/** The modal layer of the nearest {@link ModalProvider}; throws outside one. */
-export function useModal(): ModalContextValue {
-  const ctx = useContext(ModalContext);
-
-  if (!ctx) {
-    throw new Error('useModal must be used within ModalProvider');
-  }
-
-  return ctx;
-}
-
-/*
- * ---------------------------------------------------------------------------
- * Presentational helpers — Scrim + ModalShell
- * ---------------------------------------------------------------------------
- */
-
-/*
- * Enter is CSS on the shared curves (the scrim fades on `fade`, the screen
- * moves on `panel` and the caller's `.zg-modal-panel` on `pop`, each fading on
- * `fade`): the opening frame runs no animation JS, so opening stays within a
- * frame. Exit is motion's: AnimatePresence keeps the surface mounted (inert,
- * `data-state="closing"`) while it leaves on `exit` + `fade-out`; with motion
- * off both are instant.
- */
-function ModalScrim({
-  onDismiss,
-  covered = false,
-  kind = 'blur',
-  labelledBy = MODAL_TITLE_ID,
-  children,
-}: {
-  onDismiss: () => void;
-  kind?: ModalScrimKind;
-  /** A stacked layer is open above; this one waits, inert. */
-  covered?: boolean;
-  labelledBy?: string;
-  children: ReactNode;
-}) {
-  const closing = !useIsPresent();
-  const exit = useWithFade('exit');
-  return (
-    <motion.div
-      // Enter is CSS (`zg-fade-in` on `fade`): no JS on the opening frame.
-      initial={false}
-      exit={{ opacity: 0, transition: exit }}
-      className="zg-modal-scrim"
-      data-scrim={kind}
-      data-state={closing ? 'closing' : 'open'}
-      inert={closing || covered}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={labelledBy}
-      onMouseDown={(event) => {
-        /*
-         * Click on the backdrop only — clicks inside the modal body shouldn't
-         * dismiss. Compare currentTarget so child clicks (which bubble up)
-         * don't accidentally trigger close.
-         */
-        if (event.target === event.currentTarget) {
-          onDismiss();
-        }
-      }}
-    >
-      {children}
-    </motion.div>
-  );
-}
-
-/**
- * Full-window layer for the `screen` variant. No scrim, no click-outside:
- * the surface IS the window until Escape / its own back button closes it.
- */
-function ModalScreen({ covered = false, children }: { covered?: boolean; children: ReactNode }) {
-  const closing = !useIsPresent();
-  const exit = useWithFade('exit');
-  return (
-    <motion.div
-      // Enter is CSS (`zg-screen-in` on `panel` + `zg-fade-in`); motion owns the exit.
-      initial={false}
-      exit={{ opacity: 0, scale: 0.99, transition: exit }}
-      className="zg-modal-screen"
-      data-state={closing ? 'closing' : 'open'}
-      inert={closing || covered}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={MODAL_TITLE_ID}
-    >
-      {children}
-    </motion.div>
-  );
-}
-
-/** Props for {@link ModalShell}. */
-export interface ModalShellProps {
-  /** Plain string for most modals; a ReactNode lets a modal animate its own
-      heading content (Settings crossfades the active tab's label in place). */
-  title: ReactNode;
-  /** A line under the title. */
-  description?: ReactNode;
-  /** The close button and Esc. */
-  onClose: () => void;
-
-  /**
-   * Optional back-navigation handler. When set, the header renders a
-   * chevron-left button to the left of the title. Used by the surfaces
-   * Settings opens (Safelist, the Claude Code import) so the sub-modal can
-   * return to Settings instead of dead-ending on close. `onClose` is still
-   * called for the X button and Esc.
-   */
-  onBack?: () => void;
-
-  /** Optional element rendered in the bottom-right corner (e.g. primary action). */
-  footer?: ReactNode;
-  /** The body. */
-  children: ReactNode;
-
-  /**
-   * Size preset, by panel width: `medium` 560px for forms / pickers;
-   * `large` 760px for content-rich surfaces (the model picker, the
-   * safelist); `xlarge` 920px for diff-heavy modals (the file-edit review, `chat/composer/ApprovalDock.tsx`);
-   * `xxlarge` 1040px for workspace-style surfaces with their own internal
-   * navigation. It also raises the height cap from 85vh to 88vh. Every
-   * preset is clamped by `max-w-[92vw]` on narrower windows.
-   */
-  size?: 'medium' | 'large' | 'xlarge' | 'xxlarge';
-
-  /**
-   * When false, the shell body clips instead of scrolling and the child
-   * owns its scroll containers. For modals with an internal fixed rail +
-   * scrolling panel (Settings): a scrolling shell body would drag the rail
-   * along whenever the content outgrows the viewport. Default true.
-   */
-  scrollBody?: boolean;
-  /** Extra classes on the panel. */
-  className?: string;
-  /** Inline styles on the panel. */
-  style?: CSSProperties;
-}
-
-const SIZE_CLS: Record<NonNullable<ModalShellProps['size']>, string> = {
-  medium: 'w-[560px] max-h-[85vh]',
-  large: 'w-[760px] max-h-[85vh]',
-  xlarge: 'w-[920px] max-h-[85vh]',
-  xxlarge: 'w-[1040px] max-h-[88vh]',
-};
-
-/**
- * Standard modal shell — title row + body + optional footer. Every modal in
- * the app uses this so spacing, borders, and the close-X stay consistent.
- *
- * @param props - The title, body, footer, size and close handlers.
- */
-export function ModalShell({
-  title,
-  description,
-  onClose,
-  onBack,
-  footer,
-  children,
-  size = 'medium',
-  scrollBody = true,
-  className,
-  style,
-}: ModalShellProps) {
-  const sizeCls = SIZE_CLS[size];
-  const modal = useModal();
-  const labels = useLabels();
-
-  useEffect(() => {
-    modal.setDismissHandler(onClose);
-
-    return () => {
-      modal.setDismissHandler(null);
-    };
-  }, [modal, onClose]);
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- keeps a press inside the panel from the scrim
-    <div
-      className={`zg-modal-panel zg-float ${sizeCls} max-w-[92vw] flex flex-col overflow-hidden${className ? ` ${className}` : ''}`}
-      style={style}
-      onMouseDown={(e) => e.stopPropagation()}
-    >
-      <header className="flex items-start gap-2 px-5 py-3.5 border-b border-[var(--zg-hairline)]">
-        {onBack && (
-          <IconButton icon="i-ph-caret-left" label={labels.modalBack} size="lg" onClick={onBack} className="-ml-2" />
-        )}
-        <div className="flex-1 min-w-0 self-center">
-          <h2 id={MODAL_TITLE_ID} className="text-sm font-semibold text-[var(--zg-text)] m-0 zg-balance">
-            {title}
-          </h2>
-          {description && <p className="text-xs text-[var(--zg-text-muted)] mt-0.5 m-0 zg-pretty">{description}</p>}
-        </div>
-        <IconButton icon="i-ph-x" label={labels.close} size="lg" onClick={onClose} className="-mr-2" />
-      </header>
-      <div className={`flex-1 min-h-0 px-5 py-4 ${scrollBody ? 'overflow-y-auto' : 'overflow-hidden flex flex-col'}`}>
-        {children}
-      </div>
-      {footer && <footer className="shrink-0 px-5 py-3 bg-[var(--zg-tray)]">{footer}</footer>}
-    </div>
-  );
-}
-
-/*
- * ---------------------------------------------------------------------------
- * ScreenShell: layout for the `screen` variant
- * ---------------------------------------------------------------------------
- */
-
-/** Props for {@link ScreenShell}. */
-export interface ScreenShellProps {
-  /** Heading for the main column (stamped with MODAL_TITLE_ID). */
-  title: ReactNode;
-  /** A line under the heading. */
-  description?: ReactNode;
-  /** Label for the back affordance in the left column, e.g. "Settings". */
-  screenLabel: string;
-  /** The back button and Esc. */
-  onClose: () => void;
-  /** Left column: `search` shares the title row; `nav` fills the rest. */
-  aside: { search?: ReactNode; nav: ReactNode };
-  /** Pinned to the bottom of the left column. */
-  asideFooter?: ReactNode;
-  /** Right-aligned controls on the main header row. */
-  headerActions?: ReactNode;
-  /** The main column's body. */
-  children: ReactNode;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Two-column full-window shell mirroring the chat layout: a sidebar-width
- * left column on the tray tone (traffic-light spacer, back button,
- * then whatever navigation the surface provides) and a main column with a
- * heading row over the content. Escape and the back button both call
- * `onClose`.
- *
- * @param props - The heading, the left column, the body and `onClose`.
- */
-export function ScreenShell({
-  title,
-  description,
-  screenLabel,
-  onClose,
-  aside,
-  asideFooter,
-  headerActions,
-  children,
-  className,
-  style,
-}: ScreenShellProps) {
-  const modal = useModal();
-  const labels = useLabels();
-  const chrome = useContext(ChromeContext);
-  // Mirrors the chat sidebar's (user-resized) width so the two columns line up.
-  const { sidebarWidth } = useAppearanceState();
-
-  useEffect(() => {
-    modal.setDismissHandler(onClose);
-    return () => {
-      modal.setDismissHandler(null);
-    };
-  }, [modal, onClose]);
-
-  return (
-    <div className={`flex w-full h-full min-h-0${className ? ` ${className}` : ''}`} style={style}>
-      <aside
-        className="zg-screen-aside shrink-0 flex flex-col h-full bg-[var(--zg-tray)]"
-        style={{ width: sidebarWidth }}
-      >
-        {/* Row 1: the window-chrome band (`chromeInset`). Back + label sit right after
-            what it keeps clear (the desktop app's traffic lights). */}
-        <div className="zg-drag shrink-0 flex items-center pr-2" style={{ height: chromePx(chrome.top) }}>
-          {chrome.leading > 0 && <span aria-hidden className="shrink-0" style={{ width: chromePx(chrome.leading) }} />}
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label={labels.screenBack(screenLabel)}
-            className="zg-no-drag zg-menu-row zg-press-subtle !w-auto h-7 !min-h-0 !gap-1 !pl-1 !pr-1.5 font-medium"
-          >
-            <span className="i-ph-caret-left text-sm text-[var(--zg-text-muted)]" aria-hidden />
-            <span className="truncate">{screenLabel}</span>
-            <Keycap className="ml-1.5">{labels.screenBackKey}</Keycap>
-          </button>
-        </div>
-        {/* Row 2: shares its height with the main title row so the search
-            field and the section title sit on one line. The tray tone is the
-            divider on this side, so no rule. */}
-        <div className="zg-screen-toprow shrink-0 flex items-center px-3">
-          <div className="w-full">{aside.search}</div>
-        </div>
-        <div className="flex-1 min-h-0 flex flex-col px-2 pt-3">{aside.nav}</div>
-        {asideFooter && <div className="shrink-0 px-2 pb-2">{asideFooter}</div>}
-      </aside>
-
-      <section className="flex-1 min-w-0 min-h-0 flex flex-col">
-        {/* One header block spanning both aside rows (lights band + search
-            row); the title sits at the bottom so it lines up with the search
-            field and the shared rule, with the drag band above it. */}
-        <header
-          className="zg-drag zg-screen-header shrink-0 flex items-end gap-3 px-6 pb-3 border-b border-[var(--zg-hairline)]"
-          style={{ height: `calc(${chrome.top}px / var(--zg-zoom, 1) + 56px)` }}
-        >
-          {/* Header spans the full width; only the body content is measured. */}
-          <div className="flex-1 min-w-0 flex items-end gap-3">
-            <div className="flex-1 min-w-0">
-              <h2
-                id={MODAL_TITLE_ID}
-                className="text-sm font-semibold leading-tight text-[var(--zg-text)] m-0 zg-balance"
-              >
-                {title}
-              </h2>
-              {description && (
-                <p className="text-xs leading-tight text-[var(--zg-text-muted)] mt-0.5 m-0 truncate">{description}</p>
-              )}
-            </div>
-            {headerActions && <div className="zg-no-drag flex items-center gap-2 shrink-0 pb-0.5">{headerActions}</div>}
-          </div>
-        </header>
-        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">{children}</div>
-      </section>
-    </div>
-  );
-}