zidane-ui 9.0.4 → 9.1.3

package/src/files/FilesTab.tsx

@@ -1,441 +0,0 @@
-/**
- * Files tab: an editor-style split. One side is the workspace tree
- * (`TreeColumn`), the other the open files (`EditorColumn`); which side is
- * an appearance setting. Data lives in `useWorkspace` (listing, git
- * status, changed paths) and `useOpenFiles` (tabs, contents, per-scope
- * persistence); this component only composes them and owns the tree
- * toggles. It works from a folder (`filesRootOf(scope)`): bound to a
- * session, on the new-chat draft, or on a project alone.
- *
- * "Add to chat" and review comments need a chat receiving the scope
- * (`chat`); without one (a popped-out panels window) they are shown
- * disabled.
- *
- * With a host that has `entries`, the tree creates, renames, moves, copies
- * and deletes files and folders and takes drops from the file manager
- * (`useEntryActions`); `fileActions={false}` leaves that out, `readOnly`
- * leaves it out and makes the files uneditable too.
- *
- * A tree row opens here whatever the app's "open in" setting says (the user
- * is already in the panel); ⌘/Ctrl-click goes to `onOpenExternal`.
- * Hand-overs from elsewhere (chips, artifact rows) arrive as
- * `revealRequest`: a file opens a tab too, a folder is selected and
- * expanded in the tree.
- */
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { useReadable } from '../chat/headless/store';
-import { useAppearanceState } from '../appearance/AppearanceProvider';
-import type { FileTreeControl } from '../code/editor/FileTree';
-import { IconToggle } from '../components/IconToggle';
-import { PanelEmpty } from '../components/PanelEmpty';
-import { RowActionsMenu } from '../components/RowActionsMenu';
-import { usePanelVisible } from '../workspace/panel-visibility';
-import { EditorColumn, newFilePaths } from './EditorColumn';
-import { fileActionItems, type FileActionTarget } from './file-actions';
-import { useFilesHost } from './FilesProvider';
-import type { FilesScope, TextMatchOptions } from './headless/host';
-import { nameMatches } from './headless/name-match';
-import {
-  createMemoryFilesLayout,
-  filesRootOf,
-  filesScopeKey,
-  steppedIndex,
-  type FilesChatTarget,
-  type FilesLayoutStore,
-} from './headless/view';
-import { SearchPanel, type SearchLine } from './SearchPanel';
-import {
-  FilesChatContext,
-  useNoEdits,
-  useNoKeyScope,
-  type FilesKeyScopeHook,
-  type SessionEditsHook,
-} from './tab-hooks';
-import { TreeColumn, TREE_WIDTH } from './TreeColumn';
-import { useEntryActions } from './useEntryActions';
-import { useFilesLabels } from './useFilesLabels';
-import { useOpenFiles } from './useOpenFiles';
-import { useLspConfigSync } from './useLsp';
-import { filterChanged, useWorkspace } from './useWorkspace';
-
-/** A position to reveal once a handed-over file opens (a terminal link's `src/app.ts:12:5`), 1-based. */
-export interface FilesRevealPosition {
-  /** 1-based line. */
-  line: number;
-  /** 1-based column. */
-  column: number;
-}
-
-/** Props for {@link FilesTab}. */
-export interface FilesTabProps {
-  /** The folder the tab works from, optionally bound to a session (its edits mark changed files). */
-  scope: FilesScope;
-  /** Where the scope's layout lives (open tabs, the active file, the tree toggles and width). Default: in memory, per mount. */
-  layout?: FilesLayoutStore;
-  /** The chat "Add to chat" and review comments go to (`null`: shown disabled). */
-  chat?: FilesChatTarget | null;
-  /** The bound session's edit events (a hook). Without it, changed files come from git status alone. */
-  useEdits?: SessionEditsHook;
-  /** Registers the tab's next / previous / close / find keys (a hook). */
-  useKeyScope?: FilesKeyScopeHook;
-  /** An absolute path handed over from elsewhere (a folder ends with `/`): opened, or revealed in the tree. */
-  revealRequest?: string | null;
-  /** The tab took `revealRequest`: the app clears it. */
-  onRevealTaken?: () => void;
-  /** The position to reveal in a handed-over file, taken once. */
-  takeRevealPosition?: (absolutePath: string) => FilesRevealPosition | null;
-  /** ⌘/Ctrl-click on a tree row: open the absolute path outside the panel. Resolves false to open it here instead. */
-  onOpenExternal?: (absolutePath: string) => Promise<boolean>;
-  /** A file tab's glyph (a stable function). Default: the file's icon. */
-  renderTabGlyph?: (path: string) => ReactNode;
-  /** Nothing changes: no saves, no file actions. Default: false. */
-  readOnly?: boolean;
-  /** The tree's file actions (new file and folder, rename, move, copy, delete, drops), when the host has them. Default: true. */
-  fileActions?: boolean;
-  /** Classes on the root. */
-  className?: string;
-  /** Styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * The Files tab: the workspace tree beside the open files (viewer, editor, working-tree diff), search in files,
- * find, diagnostics and language-server findings, over the {@link FilesProvider}'s host.
- *
- * @param props - The scope, the app's layout store, chat target, hooks and hand-overs.
- */
-export function FilesTab({
-  scope,
-  layout: layoutStore,
-  chat = null,
-  useEdits = useNoEdits,
-  useKeyScope = useNoKeyScope,
-  revealRequest = null,
-  onRevealTaken,
-  takeRevealPosition,
-  onOpenExternal,
-  renderTabGlyph,
-  readOnly = false,
-  fileActions = true,
-  className,
-  style,
-}: FilesTabProps) {
-  const host = useFilesHost();
-  const labels = useFilesLabels();
-  // A sandbox session's files are addressed by its virtual root (the host routes it there).
-  const cwd = filesRootOf(scope) || null;
-  const key = filesScopeKey(scope);
-  const [ownLayout] = useState(createMemoryFilesLayout);
-  const layoutOf = layoutStore ?? ownLayout;
-  const visible = usePanelVisible();
-  const { filesTreeSide } = useAppearanceState();
-  const layout = useReadable(layoutOf);
-
-  // Tree toggles (persisted per scope through useOpenFiles).
-  const [showIgnored, setShowIgnored] = useState(layout.filesShowIgnored);
-  const [treeOpen, setTreeOpen] = useState(layout.filesTreeOpen);
-  const [changedOnly, setChangedOnly] = useState(layout.filesChangedOnly);
-  const prefs = useMemo(
-    () => ({ filesShowIgnored: showIgnored, filesTreeOpen: treeOpen, filesChangedOnly: changedOnly }),
-    [showIgnored, treeOpen, changedOnly],
-  );
-  const [selected, setSelected] = useState<string | null>(layout.filesActive);
-  const treeControl = useRef<FileTreeControl | null>(null);
-
-  useLspConfigSync();
-  const workspace = useWorkspace(scope, showIgnored, visible, useEdits);
-  const files = useOpenFiles(scope, layout, layoutOf, prefs, {
-    onToolResult: workspace.onToolResult,
-    edits: workspace.edits,
-    status: workspace.status,
-    visible,
-  });
-  // The tree is created once per scope's Files tab: read when it mounts.
-  const openPaths = useMemo(() => files.open.map((f) => f.path), [files.open]);
-
-  // ⌥⌘← / ⌥⌘→ walk the open files, ctrl+w closes the active one (`tab-scopes`).
-  const rootRef = useRef<HTMLDivElement>(null);
-  // ⌘F: the file on screen finds in itself (CodeViewer / DiffFileViewer).
-  const [findAsk, setFindAsk] = useState(0);
-  // ⌘⇧F: search across files, in place of the tree.
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [searchAsk, setSearchAsk] = useState(0);
-  useKeyScope(rootRef, {
-    step: (direction) => {
-      const paths = files.open.map((f) => f.path);
-      const next = steppedIndex(files.activePath ? paths.indexOf(files.activePath) : -1, paths.length, direction);
-      if (next < 0) return false;
-      files.setActivePath(paths[next]!);
-      return true;
-    },
-    close: () => {
-      if (!files.activePath) return false;
-      files.close(files.activePath);
-      return true;
-    },
-    find: (mode) => {
-      if (mode === 'files') {
-        setSearchOpen(true);
-        setSearchAsk((n) => n + 1);
-        setTreeOpen(true);
-        return true;
-      }
-      if (!files.activePath) return false;
-      setFindAsk((n) => n + 1);
-      return true;
-    },
-  });
-
-  const actions = useEntryActions({
-    cwd,
-    entries: readOnly || !fileActions ? undefined : host.entries,
-    tree: treeControl,
-    files,
-    refresh: workspace.refresh,
-    selected,
-    labels,
-  });
-
-  // Context menu on tree rows (with the entry actions) and file tabs.
-  const [menu, setMenu] = useState<{
-    target: FileActionTarget;
-    at: { x: number; y: number };
-    tree: boolean;
-  } | null>(null);
-  const openTreeMenu = useCallback(
-    (target: Omit<FileActionTarget, 'cwd'>, at: { x: number; y: number }) => {
-      if (cwd) setMenu({ target: { cwd, ...target }, at, tree: true });
-    },
-    [cwd],
-  );
-  const openMenu = useCallback(
-    (target: Omit<FileActionTarget, 'cwd'>, at: { x: number; y: number }) => {
-      if (cwd) setMenu({ target: { cwd, ...target }, at, tree: false });
-    },
-    [cwd],
-  );
-
-  const showFile = files.show;
-  const show = useCallback(
-    (path: string) => {
-      showFile(path);
-      setSelected(path);
-    },
-    [showFile],
-  );
-  const activate = useCallback(
-    async (path: string, event: { metaKey: boolean; ctrlKey: boolean }) => {
-      if (!cwd) return;
-      if ((event.metaKey || event.ctrlKey) && onOpenExternal && (await onOpenExternal(`${cwd}/${path}`))) return;
-      show(path);
-    },
-    [cwd, show, onOpenExternal],
-  );
-  const toggleTree = useCallback(() => setTreeOpen((v) => !v), []);
-  const toggleChanged = useCallback(() => setChangedOnly((v) => !v), []);
-  const toggleIgnored = useCallback(() => setShowIgnored((v) => !v), []);
-  const { refresh: refreshWorkspace } = workspace;
-  const { reloadAll } = files;
-  const onRefresh = useCallback(() => {
-    if (!cwd) return;
-    host.diagnostics?.invalidate(cwd).catch(() => undefined);
-    void refreshWorkspace();
-    reloadAll();
-  }, [host, cwd, refreshWorkspace, reloadAll]);
-  const revealInTree = useCallback((path: string) => {
-    setTreeOpen(true);
-    treeControl.current?.reveal(path);
-  }, []);
-  // A file the editor showed by itself (stepping through media): the tree's row follows, the tree left as it is.
-  const selectInTree = useCallback((path: string) => {
-    setSelected(path);
-    treeControl.current?.reveal(path);
-  }, []);
-
-  // Hand-over from a chip / artifact row / terminal link: a file (with a position to reveal), or a folder (`…/`).
-  const [revealAt, setRevealAt] = useState<{ path: string; line: number; column: number; nonce: number } | null>(null);
-  const [folderAsk, setFolderAsk] = useState<{ abs: string; rel: string } | null>(null);
-  useEffect(() => {
-    const req = revealRequest;
-    if (!req || !cwd) return;
-    onRevealTaken?.();
-    const rel = relativeTo(req, cwd);
-    const at = takeRevealPosition?.(req) ?? null;
-    if (rel === null) return;
-    if (req.endsWith('/')) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- follows a new input once, as the desktop app measured it
-      setTreeOpen(true);
-      setSearchOpen(false);
-      setFolderAsk({ abs: req, rel: rel.replace(/\/$/, '') });
-      return;
-    }
-    if (!rel) return;
-    show(rel);
-    if (at) setRevealAt((r) => ({ path: rel, ...at, nonce: (r?.nonce ?? 0) + 1 }));
-    // The app's callbacks are not inputs: only a new request acts.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [revealRequest, cwd, show]);
-  // Once the tree has rows (a tab the request just mounted has none yet). A folder
-  // it doesn't list (gitignored, with ignored files hidden) goes to Finder instead.
-  useEffect(() => {
-    if (!folderAsk || !workspace.entries || !treeControl.current) return;
-    setFolderAsk(null);
-    if (folderAsk.rel && !treeControl.current.reveal(folderAsk.rel) && host.system) {
-      void host.system.revealPath(folderAsk.abs).catch(() => false);
-    }
-  }, [host, folderAsk, workspace.entries, treeOpen]);
-
-  const statusPaths = useMemo(() => new Set(workspace.status.map((s) => s.path)), [workspace.status]);
-  const hasChanges = useCallback((path: string) => statusPaths.has(path), [statusPaths]);
-  const newPaths = useMemo(() => newFilePaths(workspace.status), [workspace.status]);
-  const isNewFile = useCallback((path: string) => newPaths.has(path), [newPaths]);
-  const entries = useMemo(
-    () =>
-      workspace.entries && changedOnly ? filterChanged(workspace.entries, workspace.changedPaths) : workspace.entries,
-    [workspace.entries, workspace.changedPaths, changedOnly],
-  );
-
-  const filePaths = useMemo(
-    () => (workspace.entries ?? []).filter((e) => e.kind === 'file' && !e.ignored).map((e) => e.path),
-    [workspace.entries],
-  );
-  const searchNames = useCallback(
-    (query: string, opts: TextMatchOptions) => nameMatches(filePaths, query, opts),
-    [filePaths],
-  );
-  const searchContents = useCallback(
-    (query: string, opts: TextMatchOptions) =>
-      cwd && host.search
-        ? host.search(cwd, query, { ...opts, searchId: `files:${key}` })
-        : Promise.resolve({ matches: [], capped: false, engine: 'none' as const }),
-    [host, cwd, key],
-  );
-  const openSearchLine = useCallback(
-    (m: SearchLine) => {
-      show(m.path);
-      setRevealAt((r) => ({
-        path: m.path,
-        line: m.line,
-        column: (m.ranges[0]?.start ?? 0) + 1,
-        nonce: (r?.nonce ?? 0) + 1,
-      }));
-    },
-    [show],
-  );
-  const closeSearch = useCallback(() => setSearchOpen(false), []);
-
-  if (!cwd)
-    return (
-      <PanelEmpty
-        icon="i-ph-folder-dashed"
-        title={scope.session ? labels.filesSessionNoFolder : labels.filesNoFolder}
-        className={className}
-      />
-    );
-
-  return (
-    <FilesChatContext.Provider value={chat}>
-      <div
-        ref={rootRef}
-        className={`relative flex-1 min-h-0 flex ${filesTreeSide === 'right' ? 'flex-row-reverse' : 'flex-row'}${className ? ` ${className}` : ''}`}
-        style={style}
-      >
-        {/* Tree toggle pinned to the panel edge on the tree's side: it overlays
-          the search row when the tree is open and the tab strip when hidden,
-          so it never changes spot. */}
-        <div
-          className={`absolute top-0 h-9 flex items-center z-10 ${filesTreeSide === 'right' ? 'right-1.5' : 'left-1.5'}`}
-        >
-          <IconToggle
-            active={false}
-            onClick={toggleTree}
-            // Phosphor draws the pane on the left; mirror it for a right-hand tree. Filled while shown.
-            icon={`${treeOpen ? 'i-ph-sidebar-simple-fill' : 'i-ph-sidebar-simple'}${filesTreeSide === 'right' ? ' -scale-x-100' : ''}`}
-            label={treeOpen ? labels.filesHideTree : labels.filesShowTree}
-          />
-        </div>
-        <TreeColumn
-          layout={layoutOf}
-          cwd={cwd}
-          scopeKey={key}
-          side={filesTreeSide}
-          open={treeOpen}
-          width={layout.filesTreeWidth ?? TREE_WIDTH.default}
-          controlRef={treeControl}
-          entries={entries}
-          gitStatus={workspace.status}
-          selectedPath={selected}
-          onSelect={setSelected}
-          onOpen={activate}
-          onContextMenu={openTreeMenu}
-          {...(actions.editing ? { editing: actions.editing } : {})}
-          {...(actions.newEntry ? { onNewEntry: actions.newEntry } : {})}
-          onTreeKeyDown={actions.onTreeKeyDown}
-          notice={actions.notice}
-          onDismissNotice={actions.dismissNotice}
-          changedOnly={changedOnly}
-          changedCount={workspace.changedPaths.size}
-          onToggleChanged={toggleChanged}
-          showIgnored={showIgnored}
-          onToggleIgnored={toggleIgnored}
-          onRefresh={onRefresh}
-          openPaths={openPaths}
-          search={
-            searchOpen ? (
-              <SearchPanel
-                label={labels.filesSearchInFiles}
-                asked={searchAsk}
-                names={searchNames}
-                search={searchContents}
-                onOpenFile={show}
-                onOpenLine={openSearchLine}
-                onClose={closeSearch}
-                inset={filesTreeSide === 'right' ? 'right' : 'left'}
-              />
-            ) : undefined
-          }
-        />
-        <EditorColumn
-          cwd={cwd}
-          files={files}
-          treeSide={filesTreeSide}
-          treeOpen={treeOpen}
-          hasChanges={hasChanges}
-          isNewFile={isNewFile}
-          onRevealInTree={revealInTree}
-          onContextMenu={openMenu}
-          revealAt={revealAt}
-          findAsk={findAsk}
-          readOnly={readOnly}
-          filePaths={filePaths}
-          onSelectInTree={selectInTree}
-          {...(actions.dropOnEditor ? { onDropFiles: actions.dropOnEditor } : {})}
-          {...(renderTabGlyph ? { renderTabGlyph } : {})}
-        />
-        <RowActionsMenu
-          open={menu !== null}
-          position={menu?.at ?? null}
-          onClose={() => setMenu(null)}
-          items={
-            menu
-              ? fileActionItems(menu.target, {
-                  chat,
-                  labels,
-                  system: host.system,
-                  ...(menu.tree && actions.menu ? { entries: actions.menu } : {}),
-                })
-              : []
-          }
-        />
-      </div>
-    </FilesChatContext.Provider>
-  );
-}
-
-/** `abs` relative to `root` (`''` for the root itself), `null` outside it. */
-function relativeTo(abs: string, root: string): string | null {
-  const base = root.replace(/\/+$/, '');
-  if (abs === base || abs === `${base}/`) return '';
-  return abs.startsWith(`${base}/`) ? abs.slice(base.length + 1) : null;
-}

package/src/files/MediaDiff.tsx

@@ -1,61 +0,0 @@
-/**
- * A changed image, video or audio file in Diffs: what it was and what it is,
- * side by side (one under the other when the pane is narrow), each from the
- * host's `mediaUrl` (the last commit, the working tree). An added file shows only
- * the new side, a deleted one only the old. Git has no text diff for these:
- * the header-only section pierre would draw becomes this.
- */
-import { memo } from 'react';
-
-import type { FileDiffMetadata } from '../code/editor/DiffView';
-import { useFilesHost } from './FilesProvider';
-import { mediaTypeOfPath } from './headless/media';
-import { MediaView } from './MediaView';
-import { useFilesLabels } from './useFilesLabels';
-
-/** A diff git reports as binary, for a format the page plays: shown as media. */
-export function isMediaDiff(file: FileDiffMetadata): boolean {
-  return file.hunks.length === 0 && mediaTypeOfPath(file.name) !== null;
-}
-
-export const MediaDiff = memo(function MediaDiff({ file, cwd }: { file: FileDiffMetadata; cwd: string }) {
-  const mediaUrl = useFilesHost().mediaUrl!;
-  const labels = useFilesLabels();
-  const type = mediaTypeOfPath(file.name)!;
-  const name = file.name.slice(file.name.lastIndexOf('/') + 1);
-  const oldPath = file.prevName ?? file.name;
-  const sides = [
-    ...(file.type === 'new'
-      ? []
-      : [
-          {
-            label: labels.filesBefore,
-            src: mediaUrl({ kind: 'diff', cwd, path: oldPath, side: 'old', version: file.prevObjectId }),
-          },
-        ]),
-    ...(file.type === 'deleted'
-      ? []
-      : [
-          {
-            label: labels.filesAfter,
-            src: mediaUrl({ kind: 'diff', cwd, path: file.name, side: 'new', version: file.newObjectId }),
-          },
-        ]),
-  ];
-  return (
-    <div className="flex flex-col">
-      <div className="zg-meta px-3 py-2 truncate" title={file.name}>
-        {file.name}
-      </div>
-      <div className="grid gap-3 px-3 pb-3 grid-cols-[repeat(auto-fit,minmax(12rem,1fr))]" data-testid="media-diff">
-        {sides.map((side) => (
-          <figure key={side.label} className="m-0 flex flex-col items-center gap-1.5 min-w-0">
-            {/* Keyed on the address: a new version starts with a fresh load, not a stale failure. */}
-            <MediaView key={side.src} kind={type.kind} src={side.src} name={name} fit="row" />
-            <figcaption className="zg-meta">{side.label}</figcaption>
-          </figure>
-        ))}
-      </div>
-    </div>
-  );
-});

package/src/files/MediaView.tsx

@@ -1,170 +0,0 @@
-/**
- * An image, a video, audio or a PDF from the workspace, in the Files editor
- * and in Diffs (`headless/media.ts` lists the formats; the host's `mediaUrl`
- * serves the bytes). The browser fetches, decodes and caches them: the image decodes off
- * the main thread, a video or audio loads only its first frame and length
- * until played, and nothing loads until the view is on screen (`lazy`). A PDF
- * opens in Chromium's own viewer (pages, zoom, search), filling the pane.
- *
- * In the editor (`fit="contain"`) an image shows in the image viewer
- * (`ZoomableImage`: zoom, pan, right-click copy), and `MediaFrame` around it
- * steps through the other media of its folder.
- */
-import { useState, type KeyboardEvent, type ReactNode, type Ref } from 'react';
-
-import { MediaNav } from '../components/MediaNav';
-import { ZoomableImage, type ZoomableImageHandle } from '../components/ZoomableImage';
-import type { MediaKind } from './headless/host';
-import { useFilesLabels } from './useFilesLabels';
-
-const IMAGE_LOOK = 'zg-media-checker rounded-zg-md shadow-[inset_0_0_0_1px_var(--zg-hairline)]';
-
-export function MediaView({
-  kind,
-  src,
-  name,
-  fit = 'contain',
-  viewerRef,
-}: {
-  kind: MediaKind;
-  src: string;
-  /** The file's name: the image's alt, and what the error says. */
-  name: string;
-  /** `contain`: scaled down to the pane, in the image viewer. `row`: capped height, for a diff side. */
-  fit?: 'contain' | 'row';
-  /** The image viewer's handle (`contain` images): its frame's keys zoom through it. */
-  viewerRef?: Ref<ZoomableImageHandle>;
-}) {
-  const labels = useFilesLabels();
-  const [failed, setFailed] = useState(false);
-  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
-  if (failed) {
-    return <div className="zg-meta p-3 text-center">{labels.filesMediaFailed(name)}</div>;
-  }
-  const box = fit === 'row' ? 'max-h-72' : 'max-h-full';
-  if (kind === 'pdf') {
-    return (
-      <iframe
-        src={src}
-        title={name}
-        loading="lazy"
-        data-testid="media-pdf"
-        className={`block w-full border-0 ${fit === 'row' ? 'h-[28rem] rounded-zg-md' : 'h-full'}`}
-      />
-    );
-  }
-  if (kind === 'image') {
-    const title = size ? labels.filesImageSize(name, size.w, size.h) : name;
-    const onLoad = (e: React.SyntheticEvent<HTMLImageElement>) =>
-      setSize({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight });
-    if (fit === 'contain') {
-      return (
-        <ZoomableImage
-          ref={viewerRef}
-          src={src}
-          alt={name}
-          imgTitle={title}
-          imgTestId="media-image"
-          imgClassName={`${IMAGE_LOOK} block max-w-full max-h-full w-auto h-auto object-contain`}
-          onLoad={onLoad}
-          onError={() => setFailed(true)}
-        />
-      );
-    }
-    return (
-      <img
-        src={src}
-        alt={name}
-        title={title}
-        loading="lazy"
-        decoding="async"
-        draggable={false}
-        onLoad={onLoad}
-        onError={() => setFailed(true)}
-        data-testid="media-image"
-        className={`${IMAGE_LOOK} block max-w-full ${box} w-auto h-auto object-contain`}
-      />
-    );
-  }
-  return kind === 'video' ? (
-    // eslint-disable-next-line jsx-a11y/media-has-caption -- a workspace file carries no caption source to point a track at
-    <video
-      src={src}
-      controls
-      preload="metadata"
-      onError={() => setFailed(true)}
-      data-testid="media-video"
-      className={`block max-w-full ${box} rounded-zg-md bg-black`}
-    />
-  ) : (
-    // eslint-disable-next-line jsx-a11y/media-has-caption -- a workspace file carries no caption source to point a track at
-    <audio
-      src={src}
-      controls
-      preload="metadata"
-      onError={() => setFailed(true)}
-      data-testid="media-audio"
-      className="block w-full max-w-md"
-    />
-  );
-}
-
-/** Where a file is among its folder's media, and how to step to another. */
-export interface MediaBrowse {
-  /** Position of the file on show, from 0. */
-  index: number;
-  /** How many media files the folder has. */
-  count: number;
-  /** Shows the previous (`-1`) or next (`1`) one, wrapping around. */
-  onStep: (delta: 1 | -1) => void;
-}
-
-/**
- * The editor's media box: a focusable frame around a `MediaView` that
- * stays as the file inside changes, so its keys keep working while you
- * step. ← / → step through the folder's media (`browse`), with the
- * lightbox's ‹ › chips and an "n / N" chip; + / − / 0 zoom an image. Keys
- * aimed at a player's own controls are left to it.
- */
-export function MediaFrame({
-  name,
-  browse,
-  viewerRef,
-  children,
-}: {
-  /** The file's name: the frame's accessible name. */
-  name: string;
-  /** Its folder's media; absent or alone, no stepping. */
-  browse?: MediaBrowse;
-  /** The image viewer inside, when the file is an image. */
-  viewerRef: React.RefObject<ZoomableImageHandle | null>;
-  children: ReactNode;
-}) {
-  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const target = event.target as HTMLElement;
-    if (target instanceof HTMLMediaElement || event.metaKey || event.ctrlKey || event.altKey) return;
-    const viewer = viewerRef.current;
-    if (event.key === 'ArrowRight' && browse && browse.count > 1) browse.onStep(1);
-    else if (event.key === 'ArrowLeft' && browse && browse.count > 1) browse.onStep(-1);
-    else if ((event.key === '+' || event.key === '=') && viewer) viewer.zoomIn();
-    else if (event.key === '-' && viewer) viewer.zoomOut();
-    else if (event.key === '0' && viewer) viewer.reset();
-    else return;
-    event.preventDefault();
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- ← / → and + / − / 0 for the media inside
-    <div
-      role="group"
-      aria-label={name}
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- the frame takes its keys (step, zoom) once focused
-      tabIndex={0}
-      onKeyDown={onKeyDown}
-      data-testid="media-frame"
-      className="relative w-full h-full flex items-center justify-center outline-none focus-visible:shadow-[inset_0_0_0_2px_var(--zg-ring)] rounded-zg-md"
-    >
-      {children}
-      {browse && <MediaNav index={browse.index} count={browse.count} onStep={browse.onStep} counter />}
-    </div>
-  );
-}