@hienlh/ppm 0.22.11 → 0.23.1

package/src/web/components/design/dialogs/delete-design-dialog.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { usePanelStore } from "@/stores/panel-store";
+import { deleteDesign } from "@/lib/design/api-designs";
+import { announceDesignsChanged } from "@/lib/design/design-ui-events";
+import { DesignResponsiveDialog } from "./design-responsive-dialog";
+import type { DesignSummary } from "../../../../shared/design-types";
+
+/**
+ * Delete a design folder, history included. Typing the slug is the confirmation, and the
+ * server checks it again (`?confirm=<slug>`), so a mistap or a replayed request cannot do it.
+ * The design's open tab is closed with it; its chat sessions stay in the history.
+ */
+export function DeleteDesignDialog({ projectName, design, onClose }: {
+  projectName: string;
+  design: DesignSummary;
+  onClose: () => void;
+}) {
+  const [typed, setTyped] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const confirmed = typed.trim() === design.slug;
+
+  const remove = async () => {
+    if (!confirmed || deleting) return;
+    setDeleting(true);
+    setError(null);
+    try {
+      await deleteDesign(projectName, design.slug);
+      const store = usePanelStore.getState();
+      for (const panel of Object.values(store.panels)) {
+        for (const tab of panel.tabs) {
+          if (tab.type === "design" && tab.metadata?.designSlug === design.slug
+            && (tab.projectId ?? tab.metadata?.projectName) === projectName) store.closeTab(tab.id, panel.id);
+        }
+      }
+      announceDesignsChanged(projectName);
+      onClose();
+    } catch (e) {
+      setError((e as Error).message || "Could not delete the design");
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <DesignResponsiveDialog
+      open
+      onClose={() => { if (!deleting) onClose(); }}
+      title={`Delete “${design.title}”?`}
+      description={`This deletes designs/${design.slug}/ and its version history. It cannot be undone.`}
+      footer={<>
+        <Button variant="outline" onClick={onClose} disabled={deleting}>Cancel</Button>
+        <Button variant="destructive" onClick={remove} disabled={!confirmed || deleting}>
+          {deleting && <Loader2 className="size-4 animate-spin" />} Delete
+        </Button>
+      </>}
+    >
+      <form onSubmit={(e) => { e.preventDefault(); void remove(); }} className="flex flex-col gap-2">
+        <label className="text-xs text-text-secondary">
+          Type <span className="font-mono font-semibold">{design.slug}</span> to confirm
+          <input value={typed} onChange={(e) => setTyped(e.target.value)} autoComplete="off" spellCheck={false}
+            className="mt-1 min-h-11 w-full rounded-md border border-border bg-background px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-destructive md:min-h-9" />
+        </label>
+        {error && <p className="text-xs text-destructive" role="alert">{error}</p>}
+      </form>
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/dialogs/design-responsive-dialog.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { cn } from "@/lib/utils";
+
+/**
+ * One modal presentation for every design dialog: a centred dialog on desktop, a bottom
+ * sheet below `md` with its actions stacked at the bottom, inside the thumb zone.
+ */
+export function DesignResponsiveDialog({ open, onClose, title, description, children, footer, className }: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children?: ReactNode;
+  /** Primary action last: rightmost on desktop, lowest in the sheet. */
+  footer?: ReactNode;
+  className?: string;
+}) {
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return (
+      <BottomSheet open={open} onClose={onClose} className="max-h-[85vh] p-4">
+        <div className={cn("flex flex-col gap-3", className)}>
+          <div>
+            <h2 className="text-base font-semibold text-text">{title}</h2>
+            {description && <p className="mt-1 text-sm text-text-2">{description}</p>}
+          </div>
+          {children && <div className="max-h-[55vh] overflow-y-auto">{children}</div>}
+          {footer && <div className="flex flex-col gap-2 pt-1 [&>*]:min-h-11">{footer}</div>}
+        </div>
+      </BottomSheet>
+    );
+  }
+  return (
+    <Dialog open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
+      <DialogContent className={cn("sm:max-w-md", className)}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        {children && <div className="max-h-[60vh] overflow-y-auto">{children}</div>}
+        {footer && <div className="flex justify-end gap-2 pt-2">{footer}</div>}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/design/dialogs/new-design-dialog.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { FileCode, Loader2, Presentation } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { getAISettings } from "@/lib/api-settings";
+import { resolveNewChatProvider } from "@/lib/new-chat-provider";
+import { createDesign, listDesignProviders, type DesignProvider } from "@/lib/design/api-designs";
+import { openDesignTab } from "@/lib/design/open-design-tab";
+import { announceDesignsChanged } from "@/lib/design/design-ui-events";
+import { DesignResponsiveDialog } from "./design-responsive-dialog";
+import type { DesignKind } from "../../../../shared/design-types";
+
+const MAX_TITLE_LENGTH = 120;
+
+const KINDS: Array<{ id: DesignKind; label: string; hint: string; icon: typeof FileCode }> = [
+  { id: "page", label: "Page", hint: "A page, screen or prototype", icon: FileCode },
+  { id: "slides", label: "Slides", hint: "A 1280×720 slide deck", icon: Presentation },
+];
+
+/**
+ * Create a design and open its tab.
+ *
+ * Only providers that deliver design instructions are offered: a design session on any
+ * other provider would be an ordinary chat that believes it is not one (the server refuses
+ * to create it anyway).
+ */
+export function NewDesignDialog({ projectName, onClose }: { projectName: string; onClose: () => void }) {
+  const [title, setTitle] = useState("");
+  const [kind, setKind] = useState<DesignKind>("page");
+  const [providers, setProviders] = useState<DesignProvider[] | null>(null);
+  const [providerId, setProviderId] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    Promise.all([listDesignProviders(projectName), getAISettings().catch(() => null)])
+      .then(([list, settings]) => {
+        if (cancelled) return;
+        setProviders(list);
+        const preferred = settings ? resolveNewChatProvider(settings) : undefined;
+        setProviderId((list.find((p) => p.id === preferred) ?? list[0])?.id ?? "");
+      })
+      .catch((e) => { if (!cancelled) { setProviders([]); setError((e as Error).message || "Could not load providers"); } });
+    return () => { cancelled = true; };
+  }, [projectName]);
+
+  const trimmed = title.trim();
+  const canCreate = !!trimmed && !!providerId && !creating;
+
+  const create = async () => {
+    if (!canCreate) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const design = await createDesign(projectName, { title: trimmed, kind });
+      announceDesignsChanged(projectName);
+      openDesignTab({ projectName, slug: design.slug, title: design.title, providerId, fresh: true });
+      onClose();
+    } catch (e) {
+      setError((e as Error).message || "Could not create the design");
+      setCreating(false);
+    }
+  };
+
+  return (
+    <DesignResponsiveDialog
+      open
+      onClose={() => { if (!creating) onClose(); }}
+      title="New design"
+      description="The AI builds it in designs/ in this project, with a live preview beside the chat."
+      footer={<>
+        <Button variant="outline" onClick={onClose} disabled={creating}>Cancel</Button>
+        <Button onClick={create} disabled={!canCreate}>
+          {creating && <Loader2 className="size-4 animate-spin" />} Create
+        </Button>
+      </>}
+    >
+      <form className="flex flex-col gap-4" onSubmit={(e) => { e.preventDefault(); void create(); }}>
+        <label className="flex flex-col gap-1 text-xs font-medium text-text-secondary">
+          Title
+          <input autoFocus value={title} maxLength={MAX_TITLE_LENGTH} onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g. Pricing page"
+            className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground placeholder:text-text-subtle focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9" />
+        </label>
+        <div role="radiogroup" aria-label="Kind" className="grid grid-cols-2 gap-2">
+          {KINDS.map((k) => (
+            <button key={k.id} type="button" role="radio" aria-checked={kind === k.id} onClick={() => setKind(k.id)}
+              className={cn("flex min-h-14 flex-col items-start gap-0.5 rounded-md border p-2 text-left",
+                kind === k.id ? "border-primary" : "border-border")}>
+              <span className="flex items-center gap-1.5 text-sm font-medium"><k.icon className="size-4" /> {k.label}</span>
+              <span className="text-xs text-text-subtle">{k.hint}</span>
+            </button>
+          ))}
+        </div>
+        <label className="flex flex-col gap-1 text-xs font-medium text-text-secondary">
+          AI provider
+          {providers === null ? (
+            <span className="flex min-h-11 items-center gap-2 text-sm text-text-subtle"><Loader2 className="size-4 animate-spin" /> Loading…</span>
+          ) : providers.length === 0 ? (
+            <span className="text-sm text-text-subtle">No configured provider can run design sessions. Enable Claude or Codex in Settings.</span>
+          ) : (
+            <select value={providerId} onChange={(e) => setProviderId(e.target.value)}
+              className="min-h-11 w-full rounded-md border border-border bg-background px-2 text-sm text-foreground md:min-h-9">
+              {providers.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          )}
+        </label>
+        {error && <p className="text-xs text-destructive" role="alert">{error}</p>}
+      </form>
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/dialogs/rename-design-dialog.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { renameDesign } from "@/lib/design/api-designs";
+import { announceDesignsChanged } from "@/lib/design/design-ui-events";
+import { DesignResponsiveDialog } from "./design-responsive-dialog";
+import type { DesignSummary } from "../../../../shared/design-types";
+
+/**
+ * Change a design's title. The slug — its folder name — never changes, because the design's
+ * sessions were told to work in `designs/<slug>/` and would keep writing to the old path.
+ */
+export function RenameDesignDialog({ projectName, design, onClose }: {
+  projectName: string;
+  design: DesignSummary;
+  onClose: () => void;
+}) {
+  const [title, setTitle] = useState(design.title);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const trimmed = title.trim();
+  const canSave = !!trimmed && trimmed !== design.title && !saving;
+
+  const save = async () => {
+    if (!canSave) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await renameDesign(projectName, design.slug, trimmed);
+      announceDesignsChanged(projectName);
+      onClose();
+    } catch (e) {
+      setError((e as Error).message || "Could not rename the design");
+      setSaving(false);
+    }
+  };
+
+  return (
+    <DesignResponsiveDialog
+      open
+      onClose={() => { if (!saving) onClose(); }}
+      title="Rename design"
+      description={`The folder stays designs/${design.slug}/.`}
+      footer={<>
+        <Button variant="outline" onClick={onClose} disabled={saving}>Cancel</Button>
+        <Button onClick={save} disabled={!canSave}>{saving && <Loader2 className="size-4 animate-spin" />} Rename</Button>
+      </>}
+    >
+      <form onSubmit={(e) => { e.preventDefault(); void save(); }} className="flex flex-col gap-2">
+        <input autoFocus value={title} maxLength={120} onChange={(e) => setTitle(e.target.value)} aria-label="Title"
+          className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9" />
+        {error && <p className="text-xs text-destructive" role="alert">{error}</p>}
+      </form>
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/export/export-menu.tsx

@@ -0,0 +1,108 @@
+import { useEffect, type ElementType } from "react";
+import { Download, ExternalLink, FileArchive, FileCode, Loader2, Presentation, Printer } from "@/lib/icons";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { NEW_TAB_REL } from "@/lib/design/design-export-client";
+import type { DesignExportFeature, DesignExportJob } from "./use-design-export";
+
+/**
+ * The Export menu: a dropdown on desktop, a bottom sheet of 44px rows on a phone, both built
+ * from {@link exportEntries}.
+ *
+ * PDF and "Open in new tab" are real links (`target=_blank`, `rel="noopener noreferrer"`) to
+ * the view tokens minted when the menu opened, so the user's own click opens them: no popup
+ * blocker is involved, and the new tab has no handle on PPM. Until the tokens arrive those
+ * two rows are disabled.
+ */
+
+interface ExportEntry {
+  id: string;
+  label: string;
+  icon: ElementType;
+  job?: DesignExportJob;
+  /** A link row when set (null while its token is being minted). */
+  href?: string | null;
+  run?: () => void;
+}
+
+function exportEntries(f: DesignExportFeature): ExportEntry[] {
+  const entries: ExportEntry[] = [
+    { id: "zip", label: "Download ZIP", icon: FileArchive, job: "zip", run: f.downloadZip },
+    { id: "html", label: "Download HTML file", icon: FileCode, job: "html", run: f.downloadHtml },
+    { id: "pdf", label: "Print or save as PDF", icon: Printer, href: f.views.print },
+  ];
+  if (f.canPptx) entries.push({ id: "pptx", label: "Download PowerPoint", icon: Presentation, job: "pptx", run: f.exportPptx });
+  entries.push({ id: "tab", label: "Open in new tab", icon: ExternalLink, href: f.views.standalone });
+  return entries;
+}
+
+function EntryIcon({ entry, busy, className }: { entry: ExportEntry; busy: DesignExportJob | null; className: string }) {
+  if (entry.job && busy === entry.job) return <Loader2 className={cn(className, "animate-spin")} />;
+  return <entry.icon className={className} />;
+}
+
+/** Desktop: the toolbar's Export button and its dropdown. */
+export function ExportMenuButton({ feature, className }: { feature: DesignExportFeature; className?: string }) {
+  return (
+    <DropdownMenu onOpenChange={(open) => { if (open) feature.prepare(); }}>
+      <DropdownMenuTrigger asChild>
+        <button type="button" className={className} aria-label="Export" title="Export">
+          {feature.busy ? <Loader2 className="size-4 animate-spin" /> : <Download className="size-4" />}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-56">
+        <DropdownMenuLabel className="text-xs text-text-subtle">Export</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {exportEntries(feature).map((entry) => (entry.href !== undefined ? (
+          <DropdownMenuItem key={entry.id} asChild disabled={!entry.href}>
+            <a href={entry.href ?? undefined} target="_blank" rel={NEW_TAB_REL}>
+              <EntryIcon entry={entry} busy={feature.busy} className="size-4" /> {entry.label}
+              {!entry.href && <span className="ml-auto text-xs text-text-subtle">Preparing…</span>}
+            </a>
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem key={entry.id} disabled={!!feature.busy} onSelect={() => entry.run?.()}>
+            <EntryIcon entry={entry} busy={feature.busy} className="size-4" /> {entry.label}
+          </DropdownMenuItem>
+        )))}
+        {feature.viewError && <p className="px-2 py-1.5 text-xs text-destructive" role="alert">{feature.viewError}</p>}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** Phone: the same entries as a bottom sheet, opened from the More sheet's Export row. */
+export function ExportSheet({ feature }: { feature: DesignExportFeature }) {
+  const { sheetOpen, prepare, setSheetOpen } = feature;
+  useEffect(() => { if (sheetOpen) prepare(); }, [sheetOpen, prepare]);
+  const close = () => setSheetOpen(false);
+  const row = "flex min-h-11 w-full items-center gap-3 rounded-md px-3 text-left text-sm hover:bg-surface-elevated";
+  return (
+    <BottomSheet open={sheetOpen} onClose={close}>
+      <div className="flex flex-col gap-1 px-2 pb-2">
+        <p className="px-3 pt-1 text-xs font-semibold uppercase tracking-wide text-text-subtle">Export</p>
+        {exportEntries(feature).map((entry) => (entry.href !== undefined ? (
+          entry.href ? (
+            <a key={entry.id} href={entry.href} target="_blank" rel={NEW_TAB_REL} className={row} onClick={close}>
+              <EntryIcon entry={entry} busy={feature.busy} className="size-5 text-text-subtle" /> <span className="flex-1">{entry.label}</span>
+            </a>
+          ) : (
+            <div key={entry.id} className={cn(row, "opacity-40")} aria-disabled="true">
+              <EntryIcon entry={entry} busy={feature.busy} className="size-5 text-text-subtle" />
+              <span className="flex-1">{entry.label}</span><span className="text-xs text-text-subtle">Preparing…</span>
+            </div>
+          )
+        ) : (
+          <button key={entry.id} type="button" className={cn(row, "disabled:opacity-40")} disabled={!!feature.busy}
+            onClick={() => { close(); entry.run?.(); }}>
+            <EntryIcon entry={entry} busy={feature.busy} className="size-5 text-text-subtle" /> <span className="flex-1">{entry.label}</span>
+          </button>
+        )))}
+        {feature.viewError && <p className="px-3 py-1 text-xs text-destructive" role="alert">{feature.viewError}</p>}
+      </div>
+    </BottomSheet>
+  );
+}

package/src/web/components/design/export/export-warnings-sheet.tsx

@@ -0,0 +1,35 @@
+import { TriangleAlert } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
+import type { DesignExportFeature } from "./use-design-export";
+
+/**
+ * What an export could not reproduce exactly: CSS the PowerPoint file approximates, or
+ * assets the HTML file keeps as links. Shown after the file has been saved, so it explains
+ * the result rather than standing in its way. The lines come from the frame and the server
+ * and are rendered as plain text.
+ */
+export function ExportWarningsSheet({ feature }: { feature: DesignExportFeature }) {
+  const warnings = feature.warnings;
+  return (
+    <DesignResponsiveDialog
+      open={!!warnings}
+      onClose={feature.dismissWarnings}
+      title={warnings?.title ?? ""}
+      description="The file was saved. These parts could not be carried over exactly."
+      footer={<Button onClick={feature.dismissWarnings}>OK</Button>}
+    >
+      {warnings && (
+        <ul className="flex flex-col gap-1.5 text-sm">
+          {warnings.items.map((item, i) => (
+            <li key={i} className="flex gap-2">
+              <TriangleAlert className="mt-0.5 size-4 shrink-0 text-text-subtle" />
+              <span className="min-w-0 break-words">{item}</span>
+            </li>
+          ))}
+          {warnings.items.length === 0 && <li className="text-text-subtle">No details were reported.</li>}
+        </ul>
+      )}
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/export/pptx-export.ts

@@ -0,0 +1,38 @@
+import PptxGenJS from "pptxgenjs";
+import { mapSlideDocToPptx } from "@/lib/design/pptx-slide-mapper";
+import { EXPORT_BLOB_TYPE, saveBlobAsFile } from "@/lib/design/design-export-client";
+import type { SlideDoc } from "../../../../shared/design-slide-doc";
+
+/**
+ * The PowerPoint writer. Reached only through `import()` from the export hook, so pptxgenjs
+ * (and the jszip it brings) lands in a chunk of its own that nobody downloads until they
+ * export a deck — it must never be imported statically from anywhere else.
+ *
+ * The plan from {@link mapSlideDocToPptx} is replayed call for call; the file is written as a
+ * Blob and saved as octet-stream like every other export, rather than through pptxgenjs's
+ * own `writeFile` (which would create a typed blob URL of its own).
+ */
+export async function exportSlidesToPptx(doc: SlideDoc, opts: { fileName: string; title: string }): Promise<string[]> {
+  const plan = mapSlideDocToPptx(doc);
+  const pptx = new PptxGenJS();
+  if (plan.layout === "LAYOUT_WIDE") {
+    pptx.layout = "LAYOUT_WIDE";
+  } else {
+    pptx.defineLayout(plan.layout);
+    pptx.layout = plan.layout.name;
+  }
+  pptx.title = opts.title;
+  for (const planned of plan.slides) {
+    const slide = pptx.addSlide();
+    if (planned.background) slide.background = planned.background;
+    for (const op of planned.ops) {
+      if (op.kind === "text") slide.addText(op.runs, op.options);
+      else if (op.kind === "shape") slide.addShape(op.shape, op.options);
+      else slide.addImage(op.options);
+    }
+  }
+  const out = await pptx.write({ outputType: "blob" });
+  if (!(out instanceof Blob)) throw new Error("The PowerPoint writer returned no file");
+  saveBlobAsFile(new Blob([out], { type: EXPORT_BLOB_TYPE }), opts.fileName);
+  return plan.warnings;
+}

package/src/web/components/design/export/use-design-export.ts

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { sendToChat } from "@/lib/send-to-chat";
+import { buildHandoffPrompt } from "@/lib/design/design-handoff-prompt";
+import {
+  fetchDesignExport, mintDesignView, saveBlobAsFile, type DesignViewPurpose,
+} from "@/lib/design/design-export-client";
+import type { SlideDoc } from "../../../../shared/design-slide-doc";
+import type { DesignTabContextValue } from "../design-tab-context";
+import { newBridgeNonce, type DesignBridge } from "../canvas/use-design-bridge";
+
+/**
+ * The Export menu's state and actions, plus "Hand off to code".
+ *
+ * The print and standalone views open in a new tab, and a tab opened after an `await` is
+ * eaten by popup blockers. Their tokens are therefore minted when the menu opens (`prepare`),
+ * so the menu can render them as plain links the user clicks. A token lives 10 minutes and
+ * cannot be refreshed, so one older than {@link VIEW_REMINT_MS} is minted again on reopen.
+ */
+
+export type DesignExportJob = "zip" | "html" | "pptx";
+
+export interface DesignExportWarnings {
+  title: string;
+  items: string[];
+}
+
+export interface DesignExportFeature {
+  views: Record<DesignViewPurpose, string | null>;
+  viewError: string | null;
+  busy: DesignExportJob | null;
+  canPptx: boolean;
+  sheetOpen: boolean;
+  setSheetOpen: (open: boolean) => void;
+  prepare: () => void;
+  downloadZip: () => void;
+  downloadHtml: () => void;
+  exportPptx: () => void;
+  handOff: () => void;
+  warnings: DesignExportWarnings | null;
+  dismissWarnings: () => void;
+}
+
+export const VIEW_REMINT_MS = 8 * 60 * 1000;
+const EXTRACT_TIMEOUT_MS = 60_000;
+
+/** Ask the bridge to measure the deck; resolves with its answer to this request only. */
+function extractSlides(bridge: DesignBridge): Promise<SlideDoc> {
+  return new Promise((resolve, reject) => {
+    const requestId = newBridgeNonce();
+    const cleanup = (): void => { offData(); offError(); clearTimeout(timer); };
+    const offData = bridge.on("slides-data", (m) => { if (m.requestId === requestId) { cleanup(); resolve(m.doc); } });
+    const offError = bridge.on("slides-error", (m) => { if (m.requestId === requestId) { cleanup(); reject(new Error(m.message)); } });
+    const timer = setTimeout(() => { cleanup(); reject(new Error("The canvas did not answer in time")); }, EXTRACT_TIMEOUT_MS);
+    if (!bridge.ready || !bridge.send({ type: "slides-extract", requestId })) {
+      cleanup();
+      reject(new Error("The canvas is still loading; try again in a moment"));
+    }
+  });
+}
+
+export function useDesignExport(tab: DesignTabContextValue, bridge: DesignBridge): DesignExportFeature {
+  const { projectName, slug, design } = tab;
+  const [views, setViews] = useState<Record<DesignViewPurpose, string | null>>({ print: null, standalone: null });
+  const [viewError, setViewError] = useState<string | null>(null);
+  const [busy, setBusy] = useState<DesignExportJob | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [warnings, setWarnings] = useState<DesignExportWarnings | null>(null);
+  const mintedAt = useRef(0);
+  const minting = useRef(false);
+  const alive = useRef(true);
+  useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
+
+  // Another design (or project) means other tokens.
+  useEffect(() => {
+    mintedAt.current = 0;
+    setViews({ print: null, standalone: null });
+  }, [projectName, slug]);
+
+  const prepare = useCallback(() => {
+    if (minting.current || Date.now() - mintedAt.current < VIEW_REMINT_MS) return;
+    minting.current = true;
+    setViews({ print: null, standalone: null });
+    setViewError(null);
+    Promise.all([mintDesignView(projectName, slug, "print"), mintDesignView(projectName, slug, "standalone")])
+      .then(([print, standalone]) => {
+        if (!alive.current) return;
+        mintedAt.current = Date.now();
+        setViews({ print: print.url, standalone: standalone.url });
+      })
+      .catch((e: unknown) => { if (alive.current) setViewError((e as Error).message || "Could not prepare the views"); })
+      .finally(() => { minting.current = false; });
+  }, [projectName, slug]);
+
+  const run = useCallback(async (job: DesignExportJob, work: () => Promise<void>) => {
+    if (busy) return;
+    setBusy(job);
+    try {
+      await work();
+    } catch (e) {
+      toast.error("Export failed", { description: (e as Error).message });
+    } finally {
+      if (alive.current) setBusy(null);
+    }
+  }, [busy]);
+
+  const download = useCallback((kind: "zip" | "html") => run(kind, async () => {
+    const file = await fetchDesignExport(projectName, slug, kind);
+    saveBlobAsFile(file.blob, file.filename);
+    if (file.warningCount > 0) {
+      setWarnings({ title: `${file.warningCount} item${file.warningCount === 1 ? "" : "s"} left linked`, items: file.warnings });
+    } else {
+      toast.success(`Saved ${file.filename}`);
+    }
+  }), [run, projectName, slug]);
+
+  const exportPptx = useCallback(() => run("pptx", async () => {
+    const doc = await extractSlides(bridge);
+    const { exportSlidesToPptx } = await import("./pptx-export");
+    const notes = await exportSlidesToPptx(doc, { fileName: `${slug}.pptx`, title: design.title });
+    if (notes.length) setWarnings({ title: "PowerPoint approximations", items: notes });
+    else toast.success(`Saved ${slug}.pptx`);
+  }), [run, bridge, slug, design.title]);
+
+  const handOff = useCallback(() => {
+    try {
+      sendToChat({
+        text: buildHandoffPrompt({ slug, title: design.title, kind: design.kind, entry: design.entry }),
+        projectName,
+        newTab: true,
+      });
+    } catch (e) {
+      toast.error("Could not start the hand-off", { description: (e as Error).message });
+    }
+  }, [slug, design.title, design.kind, design.entry, projectName]);
+
+  return useMemo(() => ({
+    views, viewError, busy, canPptx: design.kind === "slides", sheetOpen, setSheetOpen, prepare,
+    downloadZip: () => void download("zip"), downloadHtml: () => void download("html"),
+    exportPptx: () => void exportPptx(), handOff, warnings, dismissWarnings: () => setWarnings(null),
+  }), [views, viewError, busy, design.kind, sheetOpen, prepare, download, exportPptx, handOff, warnings]);
+}