zidane-ui 9.0.4 → 9.1.3

package/src/session/QueueTab.tsx

@@ -1,669 +0,0 @@
-/**
- * The Queue panel body: the messages sent while the agent works, waiting for
- * the run to end, in delivery order.
- *
- *   - One row per message, its position when there is an order to convey.
- *   - Attachments that ride with the message show as one chip (the first
- *     name, `+N` for the rest); clicking it opens them in the lightbox.
- *   - Click the text (or the pencil) to edit it in place. The editor has its
- *     own footer: keycap hints (↵ save, ⇧↵ newline, ⌘↵ send now, esc cancel)
- *     and Cancel / Save. With an `attachments` slot it shows the attachments
- *     as the composer does: paste, drop or pick files to add one, × removes one.
- *   - ▶ pushes the (saved) message into the live run now, × drops it.
- *
- * The queue is the host's (`queue.items`, `queue.update`, `queue.pushNow`,
- * `queue.remove`); the mirror carries attachment names only, so their bytes
- * are read (`queue.attachments`) when the lightbox opens or an edit starts.
- */
-import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { bindingAlternatives } from 'zidane/chat/pure';
-
-import { PdfPreview } from '../chat/PdfPreview';
-import {
-  isPdfAttachment,
-  isTextLike,
-  pastedTextFilename,
-  readAttachment,
-  shouldFoldPasteToAttachment,
-} from '../chat/composer/attachment-ingest';
-import { AttachmentNotices } from '../chat/composer/attachments';
-import { useAttachmentNotices } from '../chat/composer/useAttachmentIngest';
-import { MetaChip } from '../components/Form';
-import { IconButton } from '../components/IconButton';
-import { KeyCombo } from '../components/Keycap';
-import { useLightbox, type LightboxItem } from '../components/Lightbox';
-import { PanelEmpty } from '../components/PanelEmpty';
-import { readExitMs } from '../motion/presence';
-import type { PromptAttachment, QueuedAttachment, QueuedMessage, SessionQueue } from './headless/host';
-import { attachmentsKey, stagedToWire, wireToStaged, type StagedAttachment } from './headless/queue-attachments';
-import { useSessionHost, useSessionQueue } from './SessionProvider';
-import { useSessionLabels } from './useSessionLabels';
-
-/** What an `attachments` slot's row receives: the staged attachments and the editor's removal wiring. */
-export interface QueueAttachmentRowProps {
-  /** The staged attachments (a removed one stays while it shrinks away: see `exitingIds`). */
-  attachments: readonly StagedAttachment[];
-  /** The ids leaving. */
-  exitingIds: Set<string>;
-  /** Starts removing one (the tile shrinks away). */
-  onRemove: (id: string) => void;
-  /** A removed tile finished leaving. */
-  onExited: (id: string) => void;
-  /** Opens the lightbox at one attachment. */
-  onOpenLightbox: (id: string, origin: HTMLElement) => void;
-}
-
-/** The app's attachment pieces for the queue editor: the staged tiles and their previews. */
-export interface QueueAttachmentsSlot {
-  /** Whether attaching is on. Default `true`. */
-  enabled?: boolean;
-  /** Draws the staged attachments as tiles. */
-  renderRow: (props: QueueAttachmentRowProps) => ReactNode;
-  /** The lightbox gallery of staged attachments (the previewable ones). Default: images and PDFs. */
-  lightboxItems?: (attachments: readonly StagedAttachment[]) => LightboxItem[];
-}
-
-/** Props for {@link QueueTab}. */
-export interface QueueTabProps {
-  /** The session whose queue to show. */
-  sessionId: string;
-  /** Pushes an entry (with the text the host now holds) into the run. Default: `queue.pushNow`. */
-  onPush?: (id: string, text: string) => void;
-  /** Drops an entry. Default: `queue.remove`. */
-  onDrop?: (id: string) => void;
-  /** An entry's text is about to change from `from` to `to`. */
-  onEdit?: (sessionId: string, from: string, to: string) => void;
-  /** Attachment editing in the editor. Absent: stored attachments are kept as they are, none can be added. */
-  attachments?: QueueAttachmentsSlot;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a session's queue: the summary, the rows and their inline editor; an empty state without entries.
- *
- * @param props - The `sessionId`, optional push / drop / edit handlers, the `attachments` slot, `className` and `style`.
- */
-export function QueueTab({ sessionId, onPush, onDrop, onEdit, attachments, className = '', style }: QueueTabProps) {
-  const labels = useSessionLabels();
-  const queue = useSessionHost().queue;
-  const messages = useSessionQueue(sessionId);
-  // The queue state fills only on a read or a broadcast: read the session on mount, as the other panels do.
-  const refresh = queue?.refresh;
-  useEffect(() => {
-    refresh?.(sessionId);
-  }, [sessionId, refresh]);
-  const push = onPush ?? ((id: string) => void queue?.pushNow?.(sessionId, id).catch(() => undefined));
-  const drop = onDrop ?? ((id: string) => queue?.remove?.(sessionId, id));
-
-  if (messages.length === 0) {
-    return (
-      <div className={`flex-1 min-h-0 flex flex-col ${className}`} style={style}>
-        <PanelEmpty icon="i-ph-queue" title={labels.queueEmpty} hint={labels.queueEmptyHint} />
-      </div>
-    );
-  }
-
-  return (
-    <div className={`flex-1 min-h-0 flex flex-col ${className}`} style={style}>
-      <div className="flex-1 min-h-0 overflow-y-auto">
-        <div className="flex flex-col gap-2 p-3">
-          <div className="zg-meta flex items-center gap-2 px-2" data-testid="queue-summary">
-            <MetaChip>{labels.queueCount(messages.length)}</MetaChip>
-            <span className="min-w-0 truncate">{labels.queueOrder}</span>
-          </div>
-          <QueueList messages={messages} onPush={push} onDrop={drop} onEdit={onEdit} attachments={attachments} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-interface QueueListProps {
-  messages: readonly QueuedMessage[];
-  onPush: (id: string, text: string) => void;
-  onDrop: (id: string) => void;
-  onEdit: ((sessionId: string, from: string, to: string) => void) | undefined;
-  attachments: QueueAttachmentsSlot | undefined;
-}
-
-/** The attachments under edit, and the stored set they started from (`null` until loaded). */
-interface EditAttachments {
-  list: StagedAttachment[];
-  baseline: string | null;
-}
-
-/** Images and PDFs, the previews the kit draws itself. */
-function defaultLightboxItems(attachments: readonly StagedAttachment[]): LightboxItem[] {
-  return attachments
-    .filter((att) => att.mediaType.startsWith('image/') || isPdfAttachment(att))
-    .map<LightboxItem>((att) =>
-      att.mediaType.startsWith('image/')
-        ? { key: att.id, name: att.name, src: att.dataUrl }
-        : { key: att.id, name: att.name, body: () => <PdfPreview src={att.dataUrl} name={att.name} /> },
-    );
-}
-
-/**
- * Removal with the tile's exit: `removeAttachment` marks it exiting, and the tile's transition (or a timer on the
- * `exit` motion's length, when motion is reduced or off) drops it. Only a removal still in flight is finalized: once
- * the list is replaced (`clearExiting`), a late timer must not remove a tile of the new list sharing that id.
- */
-function useAttachmentRemoval(setList: (next: (current: StagedAttachment[]) => StagedAttachment[]) => void) {
-  const [exitingIds, setExitingIds] = useState<Set<string>>(new Set());
-  const inFlight = useRef(new Set<string>());
-  const finalizeRemove = (id: string) => {
-    if (!inFlight.current.delete(id)) return;
-    setList((current) => current.filter((att) => att.id !== id));
-    setExitingIds((current) => {
-      if (!current.has(id)) return current;
-      const next = new Set(current);
-      next.delete(id);
-      return next;
-    });
-  };
-  const removeAttachment = (id: string) => {
-    inFlight.current.add(id);
-    setExitingIds((current) => new Set(current).add(id));
-    window.setTimeout(() => finalizeRemove(id), readExitMs());
-  };
-  const clearExiting = () => {
-    inFlight.current.clear();
-    setExitingIds(new Set());
-  };
-  return { exitingIds, removeAttachment, finalizeRemove, clearExiting };
-}
-
-function QueueList({ messages, onPush, onDrop, onEdit, attachments: slot }: QueueListProps) {
-  const labels = useSessionLabels();
-  const queue = useSessionHost().queue;
-  const update = (...args: Parameters<NonNullable<SessionQueue['update']>>) =>
-    queue?.update?.(...args) ?? Promise.resolve();
-  const attachmentsOf = (sessionId: string, id: string) => queue?.attachments?.(sessionId, id) ?? Promise.resolve(null);
-  const lightboxItems = slot?.lightboxItems ?? defaultLightboxItems;
-
-  const [editingId, setEditingId] = useState<string | null>(null);
-  /** Mirrors `editingId` so a late `attachmentsOf` answer can tell whether its entry is still open. */
-  const editingIdRef = useRef<string | null>(null);
-  useEffect(() => {
-    editingIdRef.current = editingId;
-  });
-  const [draft, setDraft] = useState('');
-  const [editAttachments, setEditAttachments] = useState<EditAttachments>({ list: [], baseline: null });
-  const setList = (next: StagedAttachment[] | ((current: StagedAttachment[]) => StagedAttachment[])) =>
-    setEditAttachments((current) => ({
-      ...current,
-      list: typeof next === 'function' ? next(current.list) : next,
-    }));
-  const removal = useAttachmentRemoval(setList);
-
-  // The entry under edit was sent or dropped meanwhile (the run drained the queue): leave edit mode.
-  if (editingId && !messages.some((m) => m.id === editingId)) setEditingId(null);
-
-  const startEdit = (msg: QueuedMessage) => {
-    setEditingId(msg.id);
-    setDraft(msg.text);
-    removal.clearExiting();
-    if (!msg.attachments?.length) {
-      setEditAttachments({ list: [], baseline: attachmentsKey([]) });
-      return;
-    }
-    // Not editable until the bytes arrive; without a slot (or a host that can't send them) it stays so.
-    setEditAttachments({ list: [], baseline: null });
-    editingIdRef.current = msg.id;
-    if (!slot) return;
-    void attachmentsOf(msg.sessionId, msg.id).then((wire) => {
-      if (wire && editingIdRef.current === msg.id) {
-        setEditAttachments({ list: wireToStaged(wire), baseline: attachmentsKey(wire) });
-      }
-    });
-  };
-
-  const cancelEdit = () => setEditingId(null);
-
-  /** The attachments to store, when the edit changed them (a removed tile still shrinking away is gone). */
-  const changedAttachments = () => {
-    if (editAttachments.baseline === null) return undefined;
-    const wire = stagedToWire(editAttachments.list.filter((att) => !removal.exitingIds.has(att.id)));
-    return attachmentsKey(wire) === editAttachments.baseline ? undefined : wire;
-  };
-
-  /** What saving would store, and whether it changes the entry: something left to send, and something different. */
-  const pendingEdit = (msg: QueuedMessage) => {
-    const next = draft.trim();
-    const changed = changedAttachments();
-    const keepsAttachments = changed ? changed.length > 0 : (msg.attachments?.length ?? 0) > 0;
-    const dirty = (next.length > 0 || keepsAttachments) && (next !== msg.text || changed !== undefined);
-    return { next, attachments: changed, changed: dirty };
-  };
-
-  /** Persists the open edit (if any) and reports the text the host now holds. */
-  const commitEdit = async (msg: QueuedMessage): Promise<string> => {
-    if (editingId !== msg.id) return msg.text;
-    setEditingId(null);
-    const { next, attachments, changed } = pendingEdit(msg);
-    if (!changed) return msg.text;
-    if (next !== msg.text) onEdit?.(msg.sessionId, msg.text, next);
-    await (attachments ? update(msg.sessionId, msg.id, next, attachments) : update(msg.sessionId, msg.id, next));
-    return next;
-  };
-
-  // Push delivers what the host holds, so an open edit lands first.
-  const pushEntry = async (msg: QueuedMessage) => {
-    onPush(msg.id, await commitEdit(msg));
-  };
-
-  return (
-    <ol className="flex flex-col gap-px m-0 p-0 list-none" aria-label={labels.queueListLabel}>
-      {messages.map((msg, i) => {
-        const editing = editingId === msg.id;
-        return (
-          <li
-            key={msg.id}
-            data-queued={msg.id}
-            className={`group/queued flex items-start gap-2.5 px-2 py-1 rounded-zg-md ${editing ? '' : 'hover:bg-[var(--zg-row-hover)]'}`}
-          >
-            <span aria-hidden className="zg-meta w-4 shrink-0 text-center leading-7">
-              {messages.length > 1 ? i + 1 : '❯'}
-            </span>
-            <div className="flex-1 min-w-0">
-              {editing ? (
-                <QueueEditor
-                  value={draft}
-                  dirty={pendingEdit(msg).changed}
-                  attachments={editAttachments.baseline === null ? null : editAttachments.list}
-                  slot={slot}
-                  lightboxItems={lightboxItems}
-                  exitingIds={removal.exitingIds}
-                  onChange={setDraft}
-                  onAttach={(att) => setList((current) => [...current, att])}
-                  onRemoveAttachment={removal.removeAttachment}
-                  onAttachmentExited={removal.finalizeRemove}
-                  onSave={() => void commitEdit(msg)}
-                  onSaveAndPush={() => void pushEntry(msg)}
-                  onCancel={cancelEdit}
-                />
-              ) : (
-                <div className="flex flex-col items-start gap-1 py-1">
-                  <button
-                    type="button"
-                    title={labels.queueEditHint}
-                    onClick={() => startEdit(msg)}
-                    // `min-h-5`: an attachments-only entry has no text, and its row still edits on a click.
-                    className="block w-full min-w-0 min-h-5 text-left bg-transparent border-0 p-0 cursor-text text-zg-ui leading-5 text-[var(--zg-text)] whitespace-pre-wrap break-words line-clamp-4 rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--zg-accent)]"
-                  >
-                    {msg.text.trim()}
-                  </button>
-                  {msg.attachments?.length ? (
-                    <AttachmentsChip
-                      attachments={msg.attachments}
-                      previewable={slot ? previewable : previewableByKit}
-                      lightboxItems={lightboxItems}
-                      load={() => attachmentsOf(msg.sessionId, msg.id)}
-                    />
-                  ) : null}
-                </div>
-              )}
-            </div>
-            {/*
-             * While editing, `onMouseDown.preventDefault` keeps focus in the
-             * textarea so the click reaches the action without a blur racing
-             * it. Both actions then commit the draft themselves.
-             */}
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not a control: it keeps focus in the editor for the buttons inside */}
-            <span
-              onMouseDown={editing ? (e) => e.preventDefault() : undefined}
-              className={`shrink-0 h-7 inline-flex items-center gap-0.5 transition-opacity ${
-                editing
-                  ? 'opacity-100'
-                  : 'opacity-0 group-hover/queued:opacity-100 group-focus-within/queued:opacity-100'
-              }`}
-            >
-              {!editing && (
-                <IconButton label={labels.queueEdit} icon="i-ph-pencil-simple" onClick={() => startEdit(msg)} />
-              )}
-              <IconButton
-                label={editing ? labels.queueSaveAndPush : labels.queuePush}
-                icon="i-ph-play-fill"
-                className="!text-[var(--zg-accent-hover)]"
-                onClick={() => void pushEntry(msg)}
-              />
-              <IconButton label={labels.queueRemove} icon="i-ph-x" tone="danger" onClick={() => onDrop(msg.id)} />
-            </span>
-          </li>
-        );
-      })}
-    </ol>
-  );
-}
-
-/** Images, PDFs and text files have a preview (with the app's text preview); other files do not. */
-function previewable(attachment: QueuedAttachment): boolean {
-  return (
-    attachment.mediaType.startsWith('image/') ||
-    isPdfAttachment(attachment) ||
-    isTextLike({ mediaType: attachment.mediaType, name: attachment.name ?? '' })
-  );
-}
-
-/** The previews the kit draws itself: images and PDFs. */
-function previewableByKit(attachment: QueuedAttachment): boolean {
-  return attachment.mediaType.startsWith('image/') || isPdfAttachment(attachment);
-}
-
-/**
- * What rides with a queued message: the first file's icon and name, then `+N` for the rest (every name on hover).
- * Opens the lightbox over them when one has a preview.
- */
-function AttachmentsChip({
-  attachments,
-  previewable: canPreview,
-  lightboxItems,
-  load,
-}: {
-  attachments: readonly QueuedAttachment[];
-  previewable: (attachment: QueuedAttachment) => boolean;
-  lightboxItems: (attachments: readonly StagedAttachment[]) => LightboxItem[];
-  load: () => Promise<PromptAttachment[] | null>;
-}) {
-  const labels = useSessionLabels();
-  const lightbox = useLightbox();
-  const first = attachments[0]!;
-  const isImage = first.mediaType.startsWith('image/');
-  const more = attachments.length - 1;
-  const names = attachments.map(labels.queueAttachmentName).join('\n');
-  const content = (
-    <>
-      <span aria-hidden className={`${isImage ? 'i-ph-image' : 'i-ph-file'} text-zg-meta shrink-0`} />
-      <span className="min-w-0 truncate">{labels.queueAttachmentName(first)}</span>
-      {more > 0 && <span className="shrink-0 text-[var(--zg-text)]">+{more}</span>}
-    </>
-  );
-  const look = 'zg-meta zg-track-chip shrink-0 inline-flex items-center gap-1 h-5 max-w-[180px] px-1.5';
-
-  if (!attachments.some(canPreview)) {
-    return (
-      <span className={look} title={names}>
-        {content}
-      </span>
-    );
-  }
-
-  return (
-    <>
-      <button
-        type="button"
-        title={names}
-        aria-label={labels.queueViewAttachments(attachments.length, labels.queueAttachmentName(first))}
-        onClick={(event) => {
-          const origin = event.currentTarget;
-          void load().then((wire) => {
-            if (wire) lightbox.open(lightboxItems(wireToStaged(wire)), 0, origin);
-          });
-        }}
-        className={`${look} border-0 cursor-zoom-in hover:text-[var(--zg-text)] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--zg-accent)]`}
-      >
-        {content}
-      </button>
-      {lightbox.element}
-    </>
-  );
-}
-
-interface QueueEditorProps {
-  value: string;
-  /** Something to save: the text changed (and is not empty), or the attachments did. */
-  dirty: boolean;
-  /** `null` while the stored attachments load (or when they can't be edited). */
-  attachments: readonly StagedAttachment[] | null;
-  slot: QueueAttachmentsSlot | undefined;
-  lightboxItems: (attachments: readonly StagedAttachment[]) => LightboxItem[];
-  exitingIds: Set<string>;
-  onChange: (next: string) => void;
-  onAttach: (attachment: StagedAttachment) => void;
-  onRemoveAttachment: (id: string) => void;
-  onAttachmentExited: (id: string) => void;
-  onSave: () => void;
-  onSaveAndPush: () => void;
-  onCancel: () => void;
-}
-
-/** Cap the auto-grown editor so a pasted wall of text still leaves room for the rest of the queue. */
-const EDITOR_MAX_HEIGHT_PX = 240;
-
-/**
- * Inline editor for one queued entry: auto-focuses with the caret at the end, auto-grows (up to a cap). The
- * composer's keys: Enter saves, Shift+Enter inserts a newline, ⌘/Ctrl+Enter saves and pushes, Esc cancels. A pasted
- * or dropped image, or a long text paste, becomes an attachment. Leaving by clicking elsewhere saves; its own footer,
- * tiles, the row's actions, its lightbox and the window losing focus are not elsewhere.
- */
-function QueueEditor({
-  value,
-  dirty,
-  attachments,
-  slot,
-  lightboxItems,
-  exitingIds,
-  onChange,
-  onAttach,
-  onRemoveAttachment,
-  onAttachmentExited,
-  onSave,
-  onSaveAndPush,
-  onCancel,
-}: QueueEditorProps) {
-  const labels = useSessionLabels();
-  const root = useRef<HTMLDivElement | null>(null);
-  const area = useRef<HTMLTextAreaElement | null>(null);
-  const fileInput = useRef<HTMLInputElement | null>(null);
-  const lightbox = useLightbox();
-  const canAttach = attachments !== null && slot !== undefined && slot.enabled !== false;
-  const [dragOver, setDragOver] = useState(false);
-  const notices = useAttachmentNotices();
-
-  // The composer's rule (`readAttachment`): images, PDFs and text attach; a refused file says why.
-  const attach = (files: readonly File[]) => {
-    for (const file of files) {
-      void readAttachment(file).then(
-        (att) =>
-          onAttach({ id: att.id, name: att.name, mediaType: att.mediaType, size: att.size, dataUrl: att.dataUrl }),
-        (err: unknown) => notices.refuse(file.name, err),
-      );
-    }
-  };
-
-  useEffect(() => {
-    const el = area.current;
-    if (!el) return;
-    el.focus();
-    el.setSelectionRange(el.value.length, el.value.length);
-  }, []);
-
-  useEffect(() => {
-    const el = area.current;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = `${Math.min(el.scrollHeight, EDITOR_MAX_HEIGHT_PX)}px`;
-    el.style.overflowY = el.scrollHeight > EDITOR_MAX_HEIGHT_PX ? 'auto' : 'hidden';
-  }, [value]);
-
-  return (
-    <div
-      ref={root}
-      className="flex flex-col gap-1.5 w-full py-1"
-      onBlur={(e) => {
-        // Focus moved within the editor, into its lightbox, or out of the window: not a commit.
-        if (root.current?.contains(e.relatedTarget as Node | null) || lightbox.element || !document.hasFocus()) return;
-        onSave();
-      }}
-    >
-      <div
-        className="zg-well flex flex-col px-2.5 py-1.5"
-        data-drop={dragOver || undefined}
-        onDragOver={(event) => {
-          if (!canAttach || !Array.from(event.dataTransfer.types).includes('Files')) return;
-          event.preventDefault();
-          setDragOver(true);
-        }}
-        onDragLeave={(event) => {
-          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragOver(false);
-        }}
-        onDrop={(event) => {
-          setDragOver(false);
-          if (!canAttach) return;
-          event.preventDefault();
-          attach(Array.from(event.dataTransfer.files));
-        }}
-      >
-        <AttachmentNotices notices={notices.notices} onDismiss={notices.dismiss} className="mt-1" />
-        {attachments && slot && (
-          <SlotRow
-            render={slot.renderRow}
-            attachments={attachments}
-            exitingIds={exitingIds}
-            onRemove={(id) => {
-              // The focused × leaves the page with its tile: keep focus (and the edit) in the text.
-              area.current?.focus();
-              onRemoveAttachment(id);
-            }}
-            onExited={onAttachmentExited}
-            onOpenLightbox={(id, origin) => {
-              const items = lightboxItems(attachments);
-              lightbox.open(
-                items,
-                items.findIndex((item) => item.key === id),
-                origin,
-              );
-            }}
-          />
-        )}
-        <textarea
-          ref={area}
-          value={value}
-          rows={1}
-          spellCheck={false}
-          aria-label={labels.queueEditLabel}
-          onChange={(e) => onChange(e.target.value)}
-          onPaste={(event) => {
-            if (!canAttach) return;
-            const pasted = Array.from(event.clipboardData.items)
-              .filter((item) => item.kind === 'file')
-              .map((item) => item.getAsFile())
-              .filter((file): file is File => file !== null);
-            if (pasted.length > 0) {
-              event.preventDefault();
-              attach(pasted);
-              return;
-            }
-            // A long text paste becomes a file, as in the composer.
-            const text = event.clipboardData.getData('text/plain');
-            if (shouldFoldPasteToAttachment(text)) {
-              event.preventDefault();
-              attach([new File([text], pastedTextFilename(), { type: 'text/plain' })]);
-            }
-          }}
-          onKeyDown={(e) => {
-            // Global shortcuts don't fire mid-edit.
-            e.stopPropagation();
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-              e.preventDefault();
-              onSaveAndPush();
-              return;
-            }
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              onSave();
-              return;
-            }
-            if (e.key === 'Escape') {
-              e.preventDefault();
-              onCancel();
-            }
-          }}
-          className="block w-full resize-none text-zg-ui leading-5 p-0 bg-transparent border-0 outline-none text-[var(--zg-text)]"
-        />
-      </div>
-      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-h-6">
-        <span className="min-w-0 flex flex-wrap items-center gap-x-2.5 gap-y-1">
-          <FooterHint spec="enter" label={labels.queueHintSave} />
-          <FooterHint spec="shift+enter" label={labels.queueHintNewline} />
-          <FooterHint spec="cmd+enter" label={labels.queueHintPush} />
-          <FooterHint spec="esc" label={labels.queueHintCancel} />
-        </span>
-        <span className="ml-auto inline-flex items-center gap-1">
-          {canAttach && (
-            <>
-              <input
-                ref={fileInput}
-                type="file"
-                multiple
-                hidden
-                aria-label={labels.queueAttach}
-                onChange={(event) => {
-                  attach(Array.from(event.target.files ?? []));
-                  event.target.value = '';
-                }}
-              />
-              <IconButton label={labels.queueAttach} icon="i-ph-paperclip" onClick={() => fileInput.current?.click()} />
-            </>
-          )}
-          <EditorButton onClick={onCancel}>{labels.queueCancel}</EditorButton>
-          <EditorButton onClick={onSave} tone="accent" disabled={!dirty}>
-            {labels.queueSave}
-          </EditorButton>
-        </span>
-      </div>
-      {lightbox.element}
-    </div>
-  );
-}
-
-/** Calls the slot's row renderer as a component. */
-function SlotRow({ render, ...props }: QueueAttachmentRowProps & { render: QueueAttachmentsSlot['renderRow'] }) {
-  return <>{render(props)}</>;
-}
-
-/** A footer legend entry: the keys, then what they do. */
-function FooterHint({ spec, label }: { spec: string; label: string }) {
-  return (
-    <span className="zg-meta inline-flex items-center gap-1">
-      <span className="inline-flex items-center gap-0.5" data-size="sm">
-        {bindingAlternatives(spec).map((parts, c) => (
-          <span key={c} className="contents">
-            <KeyCombo spec={parts} size="sm" physical />
-          </span>
-        ))}
-      </span>
-      <span className="ml-0.5">{label}</span>
-    </span>
-  );
-}
-
-function EditorButton({
-  children,
-  onClick,
-  tone = 'muted',
-  disabled = false,
-}: {
-  children: string;
-  onClick: () => void;
-  tone?: 'muted' | 'accent';
-  disabled?: boolean;
-}) {
-  const look =
-    tone === 'accent'
-      ? 'text-[var(--zg-accent-hover)] hover:text-[var(--zg-accent)] disabled:text-[var(--zg-text-muted)]'
-      : 'text-[var(--zg-text-muted)] hover:text-[var(--zg-text)]';
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={onClick}
-      className={`zg-press-soft h-6 px-2 rounded-zg-sm text-zg-meta font-medium bg-transparent hover:before:bg-[var(--zg-row-hover)] disabled:hover:before:bg-transparent disabled:cursor-default border-0 cursor-pointer transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--zg-accent)] ${look}`}
-    >
-      {children}
-    </button>
-  );
-}