@drawnagency/primitives 0.1.118 → 0.1.119

package/src/deck-builder/DeckBuilderApp.tsx

@@ -1,572 +0,0 @@
-import { MessageSquareIcon, PlusIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "../components/shared/Button";
-import { DeckChatPanel } from "./DeckChatPanel";
-import { clearDeckChat } from "./deck-chat-history";
-import {
-  deleteDeckDraft,
-  getDeckDraft,
-  hasUnpublishedChanges,
-  initDeckDraftStore,
-  listDeckDrafts,
-  markDeckDraftPublished,
-  putDeckDraft,
-  recordDeckPublish,
-  type DeckDraftRow,
-} from "../lib/deck-dexie";
-import {
-  applyDeckTextEdit,
-  duplicateDeckSlide,
-  moveDeckSlide,
-  removeDeckSlide,
-  type DeckEditResult,
-  type DeckTextPath,
-} from "../lib/deck-edit";
-import type { Deck, DeckMediaAsset } from "../schemas/deck";
-import {
-  deletePublishedDeck,
-  listPublishedDecks,
-  publishDeck,
-  readPublishedDeck,
-  type DeckApiFailure,
-  type PublishedDeckSummary,
-} from "./deck-api";
-import { DeckBuilderTopBar } from "./DeckBuilderTopBar";
-import { DeckEditor } from "./DeckEditor";
-import { DeckLibrary } from "./DeckLibrary";
-import { newDeckId, starterDeck } from "./starter-deck";
-import type { DeckGridEntry } from "./types";
-
-/**
- * The Deck Builder shell (#34).
- *
- * Builder mode is its own ROUTE rather than an overlay on a viewer page, which
- * is what makes "the sidebar drops out for a top bar" and "leaving restores
- * portal chrome" trivially true — and what keeps every byte of the deck runtime
- * off ordinary viewer pages, where the entry point is a plain server-rendered
- * `<a>` FAB. `/present` is the same shape for the same reasons.
- *
- * The working deck is a Deck Draft in IndexedDB (ADR 0002): the builder reads
- * the decks branch to list and to reopen, and writes to it only when the author
- * presses Publish.
- */
-interface Props {
-  /** Keys the draft database, so two portals in one browser never collide. */
-  siteId: string;
-  /** The other half of that key: a `deckDraftScope` digest of the caller's
-   *  identity, so two people sharing a browser profile never share drafts. */
-  draftScope: string;
-  /** Pre-resolved portal media for the runtime's resolver seam. */
-  mediaAssets: Record<string, DeckMediaAsset>;
-  /** Where "Leave builder" goes — the page the FAB was pressed on. */
-  exitHref: string;
-  /** Server-decided: editor, or a member of a deck-enabled audience. */
-  canCreate: boolean;
-}
-
-type Notice = { tone: "error" | "info"; text: string; details?: string[] } | null;
-
-/** A pending 409: the author has to choose, so it cannot be a toast. */
-type Conflict = { deckId: string; message: string } | null;
-
-export function DeckBuilderApp({ siteId, draftScope, mediaAssets, exitHref, canCreate }: Props) {
-  const [drafts, setDrafts] = useState<DeckDraftRow[]>([]);
-  const [published, setPublished] = useState<PublishedDeckSummary[]>([]);
-  const [openDeckId, setOpenDeckId] = useState<string | null>(null);
-  const [slide, setSlide] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [busy, setBusy] = useState(false);
-  const [notice, setNotice] = useState<Notice>(null);
-  const [conflict, setConflict] = useState<Conflict>(null);
-  // The assistant is the primary authoring surface (#35), so it opens with the
-  // deck rather than waiting to be asked for.
-  const [chatOpen, setChatOpen] = useState(true);
-  // A chat turn is a writer to the Deck Draft. Publish locks while one is in
-  // flight — the same reason #39's inline editing will lock against it.
-  const [chatBusy, setChatBusy] = useState(false);
-  // Dexie writes are the source of truth; this only stops a resolved promise
-  // from setting state after the island is gone.
-  const alive = useRef(true);
-  /**
-   * The last deck this component wrote, held synchronously so a second edit
-   * committed inside the first one's Dexie round-trip builds on it rather than
-   * on the stale `openRow.deck`.
-   *
-   * It carries its own deck id and `currentDeck` refuses a mismatch, which is
-   * what makes it SELF-INVALIDATING rather than dependent on every writer
-   * remembering to clear it. That is not belt-and-braces: a chat turn started on
-   * deck A can resolve after the author has opened deck B — the panel unmounts
-   * without aborting the stream — and an unguarded ref then hands deck A to
-   * every subsequent edit while the stage renders B, writing those edits into
-   * A's row where they are never seen again.
-   */
-  const editBase = useRef<{ deckId: string; deck: Deck } | null>(null);
-
-  useEffect(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-    };
-  }, []);
-
-  const refreshDrafts = useCallback(async () => {
-    const rows = await listDeckDrafts();
-    if (alive.current) setDrafts(rows);
-  }, []);
-
-  useEffect(() => {
-    initDeckDraftStore(siteId, draftScope);
-    void (async () => {
-      await refreshDrafts();
-      const listed = await listPublishedDecks();
-      if (!alive.current) return;
-      // A failed listing is not a failed builder: the drafts on this device are
-      // still openable, and saying so beats an empty grid that looks like data
-      // loss. 401 is the exception — that is a session to renew, not a blip.
-      if (listed.ok) setPublished(listed.value);
-      else setNotice(noticeFor(listed, "Could not list your published decks."));
-      setLoading(false);
-    })();
-  }, [siteId, draftScope, refreshDrafts]);
-
-  // Belt to the id-tag's braces: drop a base the open deck no longer has any
-  // use for, so a closed deck's body is not held alive for the session.
-  useEffect(() => {
-    editBase.current = null;
-  }, [openDeckId]);
-
-  const entries = useMemo(() => buildEntries(drafts, published), [drafts, published]);
-  const openRow = openDeckId === null ? null : (drafts.find((row) => row.deckId === openDeckId) ?? null);
-
-  const openDeck = useCallback(
-    async (id: string) => {
-      setNotice(null);
-      setSlide(0);
-      // Already staged: open the draft. Never re-read — the draft is the newer
-      // of the two by construction, and clobbering it with the published body
-      // is precisely the data loss Dexie staging exists to prevent.
-      if (await getDeckDraft(id)) {
-        if (alive.current) setOpenDeckId(id);
-        return;
-      }
-      setBusy(true);
-      const read = await readPublishedDeck(id);
-      if (!alive.current) return;
-      setBusy(false);
-      if (!read.ok) {
-        setNotice(noticeFor(read, "Could not open that deck."));
-        return;
-      }
-      // The sidecar's own timestamp, not "now": opening a deck to look at it
-      // must not sort it to the top of the grid.
-      await markDeckDraftPublished(read.value.deck, read.value.version, read.value.meta?.updatedAt);
-      await refreshDrafts();
-      if (alive.current) setOpenDeckId(id);
-    },
-    [refreshDrafts],
-  );
-
-  const createDeck = useCallback(async () => {
-    setNotice(null);
-    const title = `Untitled deck ${new Date().toLocaleDateString("en-US", { month: "short", day: "numeric" })}`;
-    const deck = starterDeck(newDeckId(title), title);
-    await putDeckDraft(deck);
-    await refreshDrafts();
-    if (!alive.current) return;
-    setSlide(0);
-    setOpenDeckId(deck.id);
-  }, [refreshDrafts]);
-
-  /**
-   * A validated deck from the assistant. LOCAL ONLY: it lands in the Deck Draft
-   * exactly like any other edit, and publishing stays the author's explicit act
-   * (#34) — the authoring loop performs no server writes at all (ADR 0002).
-   */
-  const applyDeck = useCallback(
-    async (next: Deck) => {
-      // A turn is a writer too, so it owns the edit base from here on — tagged
-      // with its own deck id, because a turn can resolve after the author has
-      // moved to a different deck (see the ref's own comment).
-      editBase.current = { deckId: next.id, deck: next };
-      await putDeckDraft(next);
-      await refreshDrafts();
-      if (!alive.current) return;
-      // A turn can shorten the deck out from under the filmstrip selection.
-      setSlide((current) => Math.min(current, next.slides.length - 1));
-    },
-    [refreshDrafts],
-  );
-
-  /**
-   * Stage the result of a direct-manipulation edit (#39).
-   *
-   * The ops in `lib/deck-edit` end in `parseDeck`, so a refusal here is the
-   * schema's own message — an over-long heading, a deleted last slide, a
-   * duplicate past the slide cap. Nothing invalid is ever staged, and a refused
-   * edit leaves the draft exactly as it was.
-   */
-  const stageEdit = useCallback(
-    async (result: DeckEditResult, focus?: (deck: Deck) => number) => {
-      if (!result.ok) {
-        setNotice({ tone: "error", text: "That change did not fit the deck's rules.", details: result.errors });
-        return;
-      }
-      setNotice(null);
-      // Synchronously, BEFORE the await: two commits can land inside one Dexie
-      // round-trip (blurring one field is what activates the next), and until
-      // `refreshDrafts` returns, `openRow.deck` is still the pre-edit deck. The
-      // second edit would then be computed against it and overwrite the first.
-      editBase.current = { deckId: result.deck.id, deck: result.deck };
-      await putDeckDraft(result.deck);
-      await refreshDrafts();
-      if (!alive.current) return;
-      const last = result.deck.slides.length - 1;
-      setSlide((current) => Math.max(0, Math.min(focus ? focus(result.deck) : current, last)));
-    },
-    [refreshDrafts],
-  );
-
-  /**
-   * The freshest staged deck. Read through a callback rather than computed at
-   * render: `editBase` is written synchronously by `stageEdit` and re-rendering
-   * is exactly what has not happened yet at the moment the next edit commits.
-   */
-  const currentDeck = useCallback((): Deck | null => {
-    if (openRow === null) return null;
-    const staged = editBase.current;
-    return staged !== null && staged.deckId === openRow.deckId ? staged.deck : openRow.deck;
-  }, [openRow]);
-
-  /**
-   * The stage's inline text commits. `slide` is the selection as of this render
-   * — the same one the stage is drawing, which is what the path addresses.
-   */
-  const editText = useCallback(
-    (path: DeckTextPath, text: string) => {
-      const deck = currentDeck();
-      if (!deck || chatBusy) return;
-      const index = Math.min(slide, deck.slides.length - 1);
-      void stageEdit(applyDeckTextEdit(deck, index, path, text));
-    },
-    [currentDeck, slide, chatBusy, stageEdit],
-  );
-
-  const moveSlide = useCallback(
-    (from: number, to: number) => {
-      const deck = currentDeck();
-      if (!deck || chatBusy) return;
-      // Follow the slide that moved, not the position it left.
-      void stageEdit(moveDeckSlide(deck, from, to), () => to);
-    },
-    [currentDeck, chatBusy, stageEdit],
-  );
-
-  const duplicateSlide = useCallback(
-    (index: number) => {
-      const deck = currentDeck();
-      if (!deck || chatBusy) return;
-      // Land on the copy — it is the thing the author is about to change.
-      void stageEdit(duplicateDeckSlide(deck, index), () => index + 1);
-    },
-    [currentDeck, chatBusy, stageEdit],
-  );
-
-  const deleteSlide = useCallback(
-    (index: number) => {
-      const deck = currentDeck();
-      if (!deck || chatBusy) return;
-      void stageEdit(removeDeckSlide(deck, index), () => index - 1);
-    },
-    [currentDeck, chatBusy, stageEdit],
-  );
-
-  const removeDeck = useCallback(
-    async (id: string) => {
-      setNotice(null);
-      setBusy(true);
-      // Server first: a local-only delete that fails upstream would leave a
-      // published deck this browser can no longer see, let alone remove.
-      if (published.some((p) => p.id === id)) {
-        const deleted = await deletePublishedDeck(id);
-        if (!alive.current) return;
-        if (!deleted.ok) {
-          setBusy(false);
-          setNotice(noticeFor(deleted, "Could not delete that deck."));
-          return;
-        }
-        setPublished((prev) => prev.filter((p) => p.id !== id));
-      }
-      await deleteDeckDraft(id);
-      // The conversation is about a deck that no longer exists — and a new deck
-      // could reuse the id, which would silently inherit it.
-      clearDeckChat(draftScope, id);
-      await refreshDrafts();
-      if (!alive.current) return;
-      setBusy(false);
-      if (openDeckId === id) setOpenDeckId(null);
-    },
-    [published, openDeckId, refreshDrafts, draftScope],
-  );
-
-  const publish = useCallback(async () => {
-    if (!openRow) return;
-    setNotice(null);
-    setConflict(null);
-    setBusy(true);
-    // `currentDeck()`, not `openRow.deck`: clicking Publish while a text field is
-    // open BLURS it first, so the commit and the click land inside one Dexie
-    // round-trip and the row is still the pre-edit deck at this line. Publishing
-    // that would send a deck the author had just changed on screen.
-    const publishing = currentDeck() ?? openRow.deck;
-    const result = await publishDeck(publishing, openRow.baseVersion);
-    if (!alive.current) return;
-    setBusy(false);
-    if (!result.ok) {
-      if (result.kind === "conflict") {
-        setConflict({ deckId: openRow.deckId, message: result.message });
-        return;
-      }
-      setNotice(noticeFor(result, "Could not publish this deck."));
-      return;
-    }
-    // The durable fix #35 deferred to #39: re-read the row and write back only
-    // the publish BASELINE, leaving `deck` as whatever is current by now. An
-    // inline edit committed during the round-trip therefore survives, and
-    // `hasUnpublishedChanges` reports it — where the old pre-request snapshot
-    // would have discarded it silently.
-    //
-    // The chat panel stays locked during a publish anyway (`disabled={busy}`),
-    // and it still carries weight: `recordDeckPublish` makes an INLINE edit
-    // during the round-trip safe, but a whole-deck turn landing inside a publish
-    // would still commit whichever half of the deck Dexie held at that instant.
-    await recordDeckPublish(openRow.deckId, publishing, result.value.version);
-    await refreshDrafts();
-    if (!alive.current) return;
-    setPublished((prev) => {
-      const next = prev.filter((p) => p.id !== openRow.deckId);
-      next.push({ id: openRow.deckId, version: result.value.version, meta: result.value.meta });
-      return next;
-    });
-    setNotice({ tone: "info", text: "Published." });
-  }, [openRow, currentDeck, refreshDrafts]);
-
-  /**
-   * The MVP's answer to a 409: RELOAD-NEWER, and only on request.
-   *
-   * Nothing is merged and nothing is overwritten silently — the author is told
-   * the deck moved and chooses between taking the newer copy (their staged
-   * edits are dropped, which is why the button says so) and keeping theirs
-   * (nothing is written; the draft stays exactly as it was). A real merge needs
-   * the revision history #35's authoring loop will produce, and guessing at one
-   * now would be a way to lose work quietly.
-   */
-  const reloadPublished = useCallback(async () => {
-    if (!conflict) return;
-    setBusy(true);
-    const read = await readPublishedDeck(conflict.deckId);
-    if (!alive.current) return;
-    setBusy(false);
-    if (!read.ok) {
-      setNotice(noticeFor(read, "Could not reload that deck."));
-      return;
-    }
-    // The deck is being REPLACED, so the staged edit base has to go with it —
-    // the open deck id does not change here, so nothing else would drop it, and
-    // keeping it would let the next inline edit rebuild the copy just discarded.
-    editBase.current = null;
-    await markDeckDraftPublished(read.value.deck, read.value.version, read.value.meta?.updatedAt);
-    await refreshDrafts();
-    if (!alive.current) return;
-    setConflict(null);
-    setSlide(0);
-    setNotice({ tone: "info", text: "Reloaded the published deck. Your staged edits were replaced." });
-  }, [conflict, refreshDrafts]);
-
-  const dirty = openRow ? hasUnpublishedChanges(openRow) : false;
-
-  return (
-    <div data-deck-builder-app="" className="flex h-screen min-h-0 flex-col bg-base font-body text-base-contrast">
-      <DeckBuilderTopBar
-        exitHref={exitHref}
-        onBackToLibrary={openDeckId === null ? undefined : () => setOpenDeckId(null)}
-        primaryAction={
-          openRow ? (
-            // Locked during a turn: the deck is being rewritten, so publishing
-            // now would commit whichever half of it Dexie held at that instant.
-            <Button variant="brand" onClick={publish} disabled={busy || chatBusy || !dirty}>
-              {dirty ? "Publish deck" : "Published"}
-            </Button>
-          ) : canCreate ? (
-            <Button variant="brand" onClick={createDeck} disabled={busy}>
-              <PlusIcon size={14} className="mr-1.5" aria-hidden="true" />
-              New deck
-            </Button>
-          ) : null
-        }
-        status={
-          openRow
-            ? `${dirty ? "Draft · staged on this device" : "Published"} · ${openRow.deck.slides.length} slides`
-            : loading
-              ? "Loading your decks…"
-              : `${entries.length} ${entries.length === 1 ? "deck" : "decks"}`
-        }
-      />
-
-      {/* The builder body: content pane left, assistant docked right. The pane
-          scrolls; the chat column is IN FLOW rather than fixed (unlike
-          ChatPanel's docked mode), because the builder owns the whole viewport
-          and has no centered band for a fixed panel to shift out from under. */}
-      <div className="flex min-h-0 flex-1">
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          {conflict && (
-            <div role="alert" className="mx-auto flex max-w-screen-xl flex-wrap items-center gap-3 px-4 pt-4">
-              <p className="text-xs text-base-contrast">{conflict.message}</p>
-              <Button variant="secondary" onClick={reloadPublished} disabled={busy}>
-                Reload the published deck
-              </Button>
-              <Button variant="ghost" onClick={() => setConflict(null)}>
-                Keep my version
-              </Button>
-            </div>
-          )}
-          {notice && (
-            <div
-              role={notice.tone === "error" ? "alert" : "status"}
-              className="mx-auto max-w-screen-xl px-4 pt-4 text-xs text-base-contrast"
-            >
-              <p>{notice.text}</p>
-              {notice.details && (
-                <ul className="mt-1 list-disc pl-4 text-base-contrast-light">
-                  {notice.details.map((detail) => (
-                    <li key={detail}>{detail}</li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          )}
-
-          {openRow ? (
-            <DeckEditor
-              deck={openRow.deck}
-              mediaAssets={mediaAssets}
-              currentSlide={slide}
-              onSelectSlide={setSlide}
-              onBack={() => setOpenDeckId(null)}
-              onEditText={editText}
-              onMoveSlide={moveSlide}
-              onDuplicateSlide={duplicateSlide}
-              onDeleteSlide={deleteSlide}
-              // Only a streaming turn locks the stage. `busy` (publish, reopen)
-              // deliberately does NOT: those are short, and the whole reason the
-              // publish baseline is now re-read is so a mid-flight edit is safe.
-              locked={chatBusy}
-              statusLine={
-                dirty
-                  ? openRow.baseVersion === null
-                    ? "Never published — staged on this device"
-                    : "Unpublished changes on this device"
-                  : "Published"
-              }
-            />
-          ) : loading ? (
-            <p className="mx-auto max-w-screen-xl px-4 pt-8 text-sm text-base-contrast-light">Loading your decks…</p>
-          ) : (
-            <DeckLibrary
-              entries={entries}
-              mediaAssets={mediaAssets}
-              canCreate={canCreate}
-              onOpen={(id) => void openDeck(id)}
-              onCreate={() => void createDeck()}
-              onDelete={(id) => void removeDeck(id)}
-            />
-          )}
-        </div>
-
-        {/* Docked only while a deck is open. A turn rewrites the WHOLE deck
-            (ADR 0001), so there has to be one to rewrite — creating is the
-            "New deck" button's job, and the starter deck is what the first
-            turn edits. */}
-        {openRow &&
-          (chatOpen ? (
-            <DeckChatPanel
-              deck={openRow.deck}
-              // Same staleness as publish, and the acceptance criterion "a manual
-              // edit is visible to the model on the next turn" is exactly this:
-              // Send blurs the open field, so the row has not caught up yet.
-              getDeck={currentDeck}
-              scope={draftScope}
-              onDeck={(next) => void applyDeck(next)}
-              onBusyChange={setChatBusy}
-              // The other half of the publish lock. Publish is disabled while a
-              // turn streams; this is what stops a turn STARTING inside a
-              // publish, whose tail rewrites the draft row from a pre-request
-              // snapshot (see the ⚠️ in `publish`).
-              disabled={busy}
-              onClose={() => setChatOpen(false)}
-            />
-          ) : (
-            <button
-              type="button"
-              onClick={() => setChatOpen(true)}
-              aria-label="Show deck assistant"
-              className="fixed right-4 bottom-4 z-50 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90"
-            >
-              <MessageSquareIcon size={18} aria-hidden="true" />
-            </button>
-          ))}
-      </div>
-    </div>
-  );
-}
-
-/** The grid's rows: every draft on this device, joined to the branch listing. */
-function buildEntries(drafts: DeckDraftRow[], published: PublishedDeckSummary[]): DeckGridEntry[] {
-  const byId = new Map<string, DeckGridEntry>();
-  for (const row of drafts) {
-    byId.set(row.deckId, {
-      id: row.deckId,
-      title: row.deck.title,
-      slideCount: row.deck.slides.length,
-      updatedAt: row.updatedAt,
-      draft: { deck: row.deck, baseVersion: row.baseVersion },
-      published: null,
-      unpublishedChanges: hasUnpublishedChanges(row),
-    });
-  }
-  for (const summary of published) {
-    const existing = byId.get(summary.id);
-    if (existing) {
-      existing.published = { version: summary.version };
-      continue;
-    }
-    // Published from another browser (or after this one's draft was cleared).
-    // Listed from the meta sidecar alone — opening it is what fetches the body.
-    byId.set(summary.id, {
-      id: summary.id,
-      title: summary.meta?.title ?? summary.id,
-      slideCount: summary.meta?.slideCount ?? 0,
-      updatedAt: summary.meta?.updatedAt ?? new Date(0).toISOString(),
-      draft: null,
-      published: { version: summary.version },
-      unpublishedChanges: false,
-    });
-  }
-  return [...byId.values()].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
-}
-
-function noticeFor(failure: { ok: false } & DeckApiFailure, fallback: string): Notice {
-  switch (failure.kind) {
-    case "invalid":
-      return { tone: "error", text: "The deck did not pass validation.", details: failure.details };
-    case "forbidden":
-      return { tone: "error", text: failure.message };
-    case "notFound":
-      return { tone: "error", text: "That deck is no longer there." };
-    case "conflict":
-    case "unavailable":
-    case "failed":
-      return { tone: "error", text: `${fallback} ${failure.message}` };
-  }
-}
-
-export default DeckBuilderApp;

package/src/deck-builder/DeckBuilderTopBar.tsx

@@ -1,62 +0,0 @@
-import { ArrowLeftIcon, LayoutGridIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { IconButton } from "../components/shared/IconButton";
-import { Tooltip } from "../components/shared/Tooltip";
-
-/**
- * Builder mode's chrome (the 2026-08-05 prototype verdict: variant B's bar).
- *
- * A hand-for-hand match of EditorShell's toolbar — full-bleed bordered band,
- * `max-w-screen-xl` inner grid of three columns at `h-16`, framed icon buttons
- * on the right — because this bar REPLACES the portal sidebar while builder
- * mode is open, and the two surfaces should not read as different products.
- * Not `fixed`: the builder owns the whole viewport and lays out as a column, so
- * the bar is a flex child that nothing can scroll under.
- */
-interface Props {
-  /** Left cell: the primary action for whichever view is showing. */
-  primaryAction: ReactNode;
-  /** Center cell: one line of draft/deck status. */
-  status: ReactNode;
-  /** Where leaving builder mode goes — the page the FAB was pressed on. */
-  exitHref: string;
-  /** Shown while a deck is open; returns to the grid. */
-  onBackToLibrary?: () => void;
-}
-
-export function DeckBuilderTopBar({ primaryAction, status, exitHref, onBackToLibrary }: Props) {
-  return (
-    <div className="shrink-0 border-b border-base-200 bg-base">
-      <div className="mx-auto grid h-16 max-w-screen-xl grid-cols-3 items-center gap-4 px-4">
-        <div className="flex min-w-0 items-center gap-2">{primaryAction}</div>
-        <div className="flex items-center justify-center">
-          <p className="truncate text-xs text-base-contrast-light">{status}</p>
-        </div>
-        <div className="flex items-center justify-end gap-2">
-          {onBackToLibrary && (
-            <Tooltip side="bottom" content="Deck library">
-              <IconButton
-                icon={<LayoutGridIcon size={16} />}
-                label="Deck library"
-                size="md"
-                onClick={onBackToLibrary}
-                className="border border-base-200 bg-base-accent"
-              />
-            </Tooltip>
-          )}
-          <div aria-hidden="true" className="mx-1 h-6 w-px self-center bg-base-200" />
-          {/* An anchor, not a Button with a click handler: leaving builder mode
-              is a navigation, and it should survive middle-click and a failed
-              hydration alike. Classes mirror Button variant="secondary". */}
-          <a
-            href={exitHref}
-            className="inline-flex cursor-pointer items-center justify-center rounded border border-base-200 px-3 py-1.5 text-xs font-medium text-base-contrast transition-colors hover:bg-base-accent"
-          >
-            <ArrowLeftIcon size={14} className="mr-1.5" aria-hidden="true" />
-            Leave builder
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}