@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/design-share-page/share-review.tsx

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { DesignShareGuestInfo } from "../../shared/design-share-guest-types";
+import type { PickedElement } from "../../shared/design-bridge-messages-picker";
+import { defaultFrameFor, framePreset, type DeviceFrameId } from "../components/design/canvas/device-frame-presets";
+import { useCommentPins } from "../components/design/comments/use-comment-pins";
+import { anchorFromPicked, useElementPicker } from "../components/design/comments/use-element-picker";
+import { useShareCanvas } from "./use-share-canvas";
+import { useShareSession } from "./use-share-session";
+import { asPinComments, groupThreads, pinNumbers } from "./share-thread-model";
+import { ShareCanvas } from "./share-canvas";
+import { ShareBottomBar, ShareToolbar } from "./share-toolbar";
+import { SharePanelContent, type PanelView } from "./share-panel-content";
+import { ShareBottomSheet } from "./share-bottom-sheet";
+import { ShareNotice, ShareInvalid, ShareUpdatedBar } from "./share-states";
+import { formatDate } from "./share-ui";
+
+/**
+ * A reviewer's view of one shared version: the design, its pins, and the threads beside it
+ * (desktop) or in a bottom sheet (phone). Choosing an element is the canvas's own picker
+ * gesture — on touch, a first tap outlines and a second tap (or a long-press) chooses — and
+ * choosing opens the new-comment form for it.
+ */
+export function ShareReview({ info, code }: { info: DesignShareGuestInfo; code: string }) {
+  const session = useShareSession(info, code);
+  const isMobile = useIsMobile();
+  const [file, setFile] = useState(info.entry);
+  const [frame, setFrame] = useState<DeviceFrameId>(() => defaultFrameFor(info.kind));
+  const [view, setView] = useState<PanelView>({ kind: "list" });
+  const [panelOpen, setPanelOpen] = useState(() => !isMobile);
+  const canvas = useShareCanvas(code, info.slug, file);
+
+  const threads = useMemo(() => groupThreads(session.threads), [session.threads]);
+  const numbers = useMemo(() => pinNumbers(threads.open), [threads.open]);
+  const pinComments = useMemo(() => asPinComments(threads.open), [threads.open]);
+  // A reviewer proposes no writes: a pin the frame found again by its text is shown where it
+  // was found, and nothing is sent anywhere.
+  const acceptLocally = useCallback(async (id: string) => {
+    const found = pinComments.find((c) => c.id === id);
+    if (!found) throw new Error("Not a pin on this page");
+    return found;
+  }, [pinComments]);
+  const pins = useCommentPins(canvas.bridge, pinComments, acceptLocally);
+  const picker = useElementPicker(canvas.bridge, () => {});
+  const { clear: clearPick, setOn: setPicking } = picker;
+
+  // Choosing an element opens the form for it; nothing else needs choosing on this page.
+  useEffect(() => {
+    if (!picker.selected) return;
+    setView({ kind: "compose" });
+    setPanelOpen(true);
+  }, [picker.selected]);
+
+  const openThread = useCallback((id: string) => {
+    const thread = session.threads.find((t) => t.id === id);
+    if (thread && thread.file !== file && info.variants.some((v) => v.file === thread.file)) setFile(thread.file);
+    setView({ kind: "thread", id });
+    setPanelOpen(true);
+  }, [session.threads, file, info.variants]);
+
+  const cancelCompose = useCallback(() => { clearPick(); setView({ kind: "list" }); }, [clearPick]);
+  const compose = useCallback((el: PickedElement, body: string, name: string) =>
+    session.actions.addThread(anchorFromPicked(el), body, name, (t) => {
+      setPicking(false);
+      setView({ kind: "thread", id: t.id });
+    }), [session.actions, setPicking]);
+
+  const closeSheet = useCallback(() => {
+    if (view.kind === "compose") clearPick();
+    setPanelOpen(false);
+    setView({ kind: "list" });
+  }, [view.kind, clearPick]);
+
+  if (session.invalid) return <ShareInvalid />;
+
+  const expiryText = info.expiresAt === null ? null : `Link expires on ${formatDate(info.expiresAt)}`;
+  const subtitle = [`Shared version from ${formatDate(info.versionCreatedAt)}`, expiryText].filter(Boolean).join(" · ");
+  const shownFrame = isMobile ? defaultFrameFor(info.kind) : frame;
+  const names = { name: session.name, setName: session.setName };
+  const content = (onClose?: () => void) => (
+    <SharePanelContent view={view} setView={setView} threads={threads} numbers={numbers} statusOf={pins.statusOf}
+      names={names} actions={session.actions} picked={picker.selected} expiryText={expiryText}
+      onCompose={compose} onCancelCompose={cancelCompose} onClose={onClose} />
+  );
+  const activeId = view.kind === "thread" ? view.id : null;
+  // Below the header on a desktop. On a phone, just above the bottom bar, in thumb reach, or
+  // at the top of the comments sheet while that is open, since the sheet covers the rest.
+  const updatedBar = session.versionChanged ? <ShareUpdatedBar onReload={() => window.location.reload()} /> : null;
+
+  return (
+    <div className="flex h-dvh flex-col bg-bg text-text">
+      {isMobile ? (
+        <header className="shrink-0 border-b border-border bg-panel px-4 pb-1.5 pt-[max(0.375rem,env(safe-area-inset-top))]">
+          <h1 className="truncate text-sm font-semibold">{info.title}</h1>
+          <p className="truncate text-xs text-text-3">{subtitle}</p>
+        </header>
+      ) : (
+        <ShareToolbar title={info.title} subtitle={subtitle} variants={info.variants} file={file} onVariant={setFile}
+          frame={frame} onFrame={setFrame} picking={picker.on} onPicking={setPicking}
+          panelOpen={panelOpen} onPanel={setPanelOpen} count={threads.open.length} />
+      )}
+      {!isMobile && updatedBar}
+      <div className="flex min-h-0 flex-1">
+        <ShareCanvas canvas={canvas} title={info.title} frameSize={framePreset(shownFrame).size} picker={picker} pins={pins}
+          open={threads.open} numbers={numbers} activeId={activeId} onOpenThread={openThread} isMobile={isMobile} />
+        {!isMobile && panelOpen && (
+          <aside className="flex w-80 shrink-0 flex-col border-l border-border bg-panel lg:w-96" aria-label="Comments">
+            {content(() => setPanelOpen(false))}
+          </aside>
+        )}
+      </div>
+      {session.notice && <ShareNotice key={session.notice.id} message={session.notice.message} onDismiss={session.dismissNotice} top={isMobile} />}
+      {isMobile && (
+        <>
+          {!panelOpen && updatedBar}
+          <ShareBottomBar variants={info.variants} file={file} onVariant={setFile} picking={picker.on} onPicking={setPicking}
+            onComments={() => { setView({ kind: "list" }); setPanelOpen(true); }} count={threads.open.length} />
+          <ShareBottomSheet open={panelOpen} onClose={closeSheet} label="Comments">{updatedBar}{content(closeSheet)}</ShareBottomSheet>
+        </>
+      )}
+    </div>
+  );
+}

package/src/web/design-share-page/share-states.tsx

@@ -0,0 +1,78 @@
+import { useEffect, type ReactNode } from "react";
+import { Link2Off, Loader2, RefreshCw, X } from "@/lib/icons";
+import { buttonOutline, buttonPrimary, buttonQuiet, cx } from "./share-ui";
+
+/** The page's whole-screen states, and the one-line notice a failed write or a wait shows. */
+
+function Centered({ children }: { children: ReactNode }) {
+  return (
+    <main className="flex h-dvh flex-col items-center justify-center gap-3 bg-bg p-6 text-center text-text">{children}</main>
+  );
+}
+
+export function ShareLoading() {
+  return (
+    <Centered>
+      <Loader2 className="size-6 animate-spin text-text-3" />
+      <p className="text-sm text-text-2">Opening the design…</p>
+    </Centered>
+  );
+}
+
+/** Same words for every reason a link stops opening, as the server gives no reason either. */
+export function ShareInvalid() {
+  return (
+    <Centered>
+      <Link2Off className="size-8 text-text-3" />
+      <h1 className="text-lg font-semibold">This link is no longer valid</h1>
+      <p className="max-w-sm text-sm text-text-2">Ask the person who shared it for a new link.</p>
+    </Centered>
+  );
+}
+
+export function ShareFailed({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <Centered>
+      <p className="max-w-sm text-sm text-text-2">{message}</p>
+      <button type="button" className={buttonOutline} onClick={onRetry}><RefreshCw className="size-4" /> Try again</button>
+    </Centered>
+  );
+}
+
+/**
+ * Shown once the owner has re-pinned the link: the page still shows the version it loaded,
+ * which nobody can comment on any more. Stays until the reviewer reloads; nothing else
+ * brings the design, its title and its date up to date together.
+ */
+export function ShareUpdatedBar({ onReload }: { onReload: () => void }) {
+  return (
+    <div className="flex shrink-0 items-center gap-2 border-y border-border bg-panel-2 py-1 pl-4 pr-2 text-sm" role="status" aria-live="polite">
+      <RefreshCw className="size-4 shrink-0 text-text-3" />
+      <span className="min-w-0 flex-1">This design was updated.</span>
+      <button type="button" className={buttonPrimary} onClick={onReload}>Reload</button>
+    </div>
+  );
+}
+
+const NOTICE_MS = 6000;
+
+/**
+ * A transient notice, drawn above everything including an open sheet (a refused write is
+ * usually made from one). At the top on a phone, where a sheet's form and keyboard cannot
+ * cover it; at the bottom on a desktop.
+ */
+export function ShareNotice({ message, onDismiss, top }: { message: string; onDismiss: () => void; top: boolean }) {
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, NOTICE_MS);
+    return () => clearTimeout(timer);
+  }, [onDismiss]);
+  return (
+    <div className={cx("pointer-events-none fixed inset-x-0 z-[60] flex justify-center px-3",
+      top ? "top-[max(0.5rem,env(safe-area-inset-top))]" : "bottom-4")}>
+      <div className="pointer-events-auto flex max-w-md items-center gap-2 rounded-lg border border-border bg-panel py-1 pl-3 pr-1 text-sm shadow-lg" role="status" aria-live="polite">
+        <span className="min-w-0 flex-1">{message}</span>
+        <button type="button" className={buttonQuiet} onClick={onDismiss} aria-label="Dismiss"><X className="size-4" /></button>
+      </div>
+    </div>
+  );
+}

package/src/web/design-share-page/share-thread-model.ts

@@ -0,0 +1,83 @@
+import type { DesignCommentGuestView, GuestCommentReplyView } from "../../shared/design-comment-thread-types";
+import type { DesignComment } from "../../shared/design-comment-types";
+import type { PinStatus } from "../components/design/comments/use-comment-pins";
+
+/**
+ * Pure decisions about a link's threads: their order and numbers, what this reviewer may do
+ * with each entry, and folding a write's answer into the list held on screen.
+ */
+
+export type GuestThread = DesignCommentGuestView;
+export type GuestReply = GuestCommentReplyView;
+
+const byCreation = (a: GuestThread, b: GuestThread): number =>
+  a.createdAt === b.createdAt ? (a.id < b.id ? -1 : a.id > b.id ? 1 : 0) : a.createdAt < b.createdAt ? -1 : 1;
+
+/** Open threads oldest first (the order pins are numbered in); resolved ones most recent first. */
+export function groupThreads(threads: readonly GuestThread[]): { open: GuestThread[]; resolved: GuestThread[] } {
+  const open = threads.filter((t) => !t.resolvedAt).sort(byCreation);
+  const resolved = threads.filter((t) => t.resolvedAt).sort((a, b) => (a.resolvedAt! < b.resolvedAt! ? 1 : a.resolvedAt! > b.resolvedAt! ? -1 : 0));
+  return { open, resolved };
+}
+
+/** Pin numbers: 1… over the open threads in creation order. Resolved threads have none. */
+export function pinNumbers(open: readonly GuestThread[]): Map<string, number> {
+  return new Map(open.map((t, i) => [t.id, i + 1]));
+}
+
+export type RootDelete = { allowed: true } | { allowed: false; reason: string };
+
+/**
+ * Whether the reviewer may delete their own thread: only while nobody has replied, because
+ * the replies would go with it. Null for someone else's thread (no button at all). Editing
+ * stays allowed either way.
+ */
+export function rootDelete(thread: GuestThread): RootDelete | null {
+  if (!thread.mine) return null;
+  if (thread.replies.length === 0) return { allowed: true };
+  const others = thread.replies.some((r) => !r.mine);
+  return { allowed: false, reason: `${others ? "Others replied" : "It has replies"}, so you can edit it but not delete it.` };
+}
+
+export const canEditEntry = (entry: { mine: boolean }): boolean => entry.mine;
+export const canDeleteReply = (reply: GuestReply): boolean => reply.mine;
+
+/** What a byline shows. The owner is a badge, never a name, so no reviewer can look like them. */
+export function bylineOf(author: GuestThread["author"]): { owner: true } | { owner: false; name: string } {
+  return author.kind === "owner" ? { owner: true } : { owner: false, name: author.name };
+}
+
+/** The list with `thread` put in place of its old copy, or added when it is new. */
+export function upsertThread(list: readonly GuestThread[], thread: GuestThread): GuestThread[] {
+  const at = list.findIndex((t) => t.id === thread.id);
+  if (at < 0) return [...list, thread];
+  const next = list.slice();
+  next[at] = thread;
+  return next;
+}
+
+export function removeThread(list: readonly GuestThread[], id: string): GuestThread[] {
+  return list.filter((t) => t.id !== id);
+}
+
+/**
+ * The shape the canvas pin hook takes. A reviewer's view carries no snippet; the hook never
+ * reads one, it only sends each thread's anchor to the frame.
+ */
+export function asPinComments(open: readonly GuestThread[]): DesignComment[] {
+  return open.map((t) => ({
+    id: t.id, file: t.file, anchor: t.anchor, body: t.body, snippet: null,
+    createdAt: t.createdAt, updatedAt: t.updatedAt,
+  }));
+}
+
+/**
+ * The note beside a thread: where its pin stands, in the words the owner's canvas uses.
+ * Null while the frame has not answered yet for an open thread with no number.
+ */
+export function pinStatusText(status: PinStatus, number: number | null, resolved: boolean): string | null {
+  if (resolved) return "Resolved";
+  if (status === "detached") return "Detached";
+  if (status === "elsewhere") return "On another page";
+  return number === null ? null : `Pin ${number}`;
+}

package/src/web/design-share-page/share-thread-view.tsx

@@ -0,0 +1,61 @@
+import { ChevronLeft } from "@/lib/icons";
+import type { PinStatus } from "../components/design/comments/use-comment-pins";
+import { pinStatusText, rootDelete, type GuestThread } from "./share-thread-model";
+import { ShareEntry } from "./share-entry";
+import { ShareTextForm, type NameControl } from "./share-composer";
+import type { ShareActions } from "./use-share-session";
+import { buttonQuiet } from "./share-ui";
+
+/**
+ * One thread: its pin number and where the pin stands, the comment, every reply oldest
+ * first, and the reply box. A resolved thread reads the same with a note that it is done.
+ */
+
+export function ShareThreadView({ thread, number, status, names, actions, onBack, onDeleted }: {
+  thread: GuestThread;
+  number: number | null;
+  status: PinStatus;
+  names: NameControl;
+  actions: ShareActions;
+  onBack: () => void;
+  onDeleted: () => void;
+}) {
+  const note = pinStatusText(status, number, !!thread.resolvedAt);
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex shrink-0 items-center gap-1 border-b border-border px-2 py-1">
+        <button type="button" className={buttonQuiet} onClick={onBack}>
+          <ChevronLeft className="size-5" /> All comments
+        </button>
+        {note && <span className="ml-auto truncate pr-2 text-xs text-text-3">{note}</span>}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-3">
+        <ShareEntry
+          author={thread.author} createdAt={thread.createdAt} updatedAt={thread.updatedAt} body={thread.body} mine={thread.mine}
+          deleteRule={rootDelete(thread)}
+          onEdit={thread.mine ? (body) => actions.editThread(thread.id, body) : undefined}
+          onDelete={thread.mine ? async () => { const ok = await actions.deleteThread(thread.id); if (ok) onDeleted(); return ok; } : undefined}
+        />
+        {thread.replies.length > 0 && (
+          <ol className="mt-3 flex flex-col gap-3 border-l-2 border-border pl-3" aria-label="Replies">
+            {thread.replies.map((r) => (
+              <li key={r.id}>
+                <ShareEntry
+                  author={r.author} createdAt={r.createdAt} updatedAt={r.updatedAt} body={r.body} mine={r.mine}
+                  onEdit={r.mine ? (body) => actions.editReply(thread.id, r.id, body) : undefined}
+                  onDelete={r.mine ? () => actions.deleteReply(thread.id, r.id) : undefined}
+                />
+              </li>
+            ))}
+          </ol>
+        )}
+      </div>
+      {!thread.resolvedAt && (
+        <div className="shrink-0 border-t border-border p-3">
+          <ShareTextForm names={names} submitLabel="Reply" placeholder="Reply to this thread" compact
+            onSubmit={(body, name) => actions.reply(thread.id, body, name)} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/design-share-page/share-threads-panel.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { ChevronDown, ChevronRight, MessageSquare, X } from "@/lib/icons";
+import type { PinStatus } from "../components/design/comments/use-comment-pins";
+import { pinStatusText, type GuestThread } from "./share-thread-model";
+import { Byline } from "./share-entry";
+import { buttonQuiet, cx } from "./share-ui";
+
+/**
+ * The list of a link's threads: open ones numbered like their pins, resolved ones folded
+ * under "Resolved (n)". Who the reviewer is, and the way to change it, sits at the top.
+ */
+
+function ThreadRow({ thread, number, status, active, onOpen }: {
+  thread: GuestThread;
+  number: number | null;
+  status: PinStatus;
+  active: boolean;
+  onOpen: () => void;
+}) {
+  const note = pinStatusText(status, number, !!thread.resolvedAt);
+  return (
+    <li>
+      <button type="button" onClick={onOpen} aria-current={active ? "true" : undefined}
+        className={cx("flex min-h-11 w-full items-start gap-3 px-4 py-3 text-left active:bg-panel-2 can-hover:hover:bg-panel-2",
+          active && "bg-panel-2")}>
+        <span className={cx("mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
+          number === null ? "bg-panel-2 text-text-3" : "bg-primary text-primary-fg")} aria-hidden="true">
+          {number ?? "✓"}
+        </span>
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="flex min-w-0 items-center gap-2"><Byline author={thread.author} /></span>
+          <span className="line-clamp-2 whitespace-pre-wrap break-words text-sm text-text-2">{thread.body}</span>
+          <span className="text-xs text-text-3">
+            {thread.replies.length === 1 ? "1 reply" : `${thread.replies.length} replies`}
+            {note && note !== `Pin ${number}` ? ` · ${note}` : ""}
+          </span>
+        </span>
+      </button>
+    </li>
+  );
+}
+
+export function ShareThreadsPanel({ open, resolved, numbers, statusOf, activeId, name, expiryText, onOpen, onChangeName, onClose }: {
+  open: GuestThread[];
+  resolved: GuestThread[];
+  numbers: ReadonlyMap<string, number>;
+  statusOf: (id: string) => PinStatus;
+  activeId: string | null;
+  name: string | null;
+  expiryText: string | null;
+  onOpen: (id: string) => void;
+  onChangeName: () => void;
+  onClose?: () => void;
+}) {
+  const [showResolved, setShowResolved] = useState(false);
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex shrink-0 items-center gap-2 border-b border-border py-1 pl-4 pr-2">
+        <h2 className="flex-1 text-sm font-semibold">Comments ({open.length})</h2>
+        {onClose && (
+          <button type="button" className={buttonQuiet} onClick={onClose} aria-label="Close comments">
+            <X className="size-5" />
+          </button>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-2 px-4 py-2 text-xs text-text-2">
+        <span className="min-w-0 flex-1 truncate">{name ? `Commenting as ${name}` : "You will be asked for a name when you first write"}</span>
+        {name && <button type="button" className={cx(buttonQuiet, "text-xs")} onClick={onChangeName}>Change name</button>}
+      </div>
+      {expiryText && <p className="shrink-0 px-4 pb-2 text-xs text-text-3">{expiryText}</p>}
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain border-t border-border">
+        {open.length === 0 && resolved.length === 0 && (
+          <div className="flex flex-col items-center gap-2 px-6 py-10 text-center text-sm text-text-2">
+            <MessageSquare className="size-6 text-text-3" />
+            No comments yet. Choose Comment, then the part of the design you want to talk about.
+          </div>
+        )}
+        <ul aria-label="Open comments">
+          {open.map((t) => (
+            <ThreadRow key={t.id} thread={t} number={numbers.get(t.id) ?? null} status={statusOf(t.id)}
+              active={activeId === t.id} onOpen={() => onOpen(t.id)} />
+          ))}
+        </ul>
+        {resolved.length > 0 && (
+          <div className="border-t border-border">
+            <button type="button" className={cx(buttonQuiet, "w-full justify-start rounded-none px-4")}
+              aria-expanded={showResolved} onClick={() => setShowResolved((v) => !v)}>
+              {showResolved ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />} Resolved ({resolved.length})
+            </button>
+            {showResolved && (
+              <ul aria-label="Resolved comments">
+                {resolved.map((t) => (
+                  <ThreadRow key={t.id} thread={t} number={null} status={statusOf(t.id)}
+                    active={activeId === t.id} onOpen={() => onOpen(t.id)} />
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/design-share-page/share-toolbar.tsx

@@ -0,0 +1,105 @@
+import type { ElementType } from "react";
+import { Layers, MessageSquare, MessageSquarePlus, Monitor, PanelRight, Presentation, Smartphone, Tablet, X } from "@/lib/icons";
+import type { DesignVariant } from "../../shared/design-variants";
+import { DEVICE_FRAMES, type DeviceFrameId } from "../components/design/canvas/device-frame-presets";
+import { buttonQuiet, buttonToggleOn, cx } from "./share-ui";
+
+/**
+ * The reviewer's controls. From `md` a toolbar above the design: variants, device frames,
+ * Comment and the comments panel. On a phone the same actions sit in a bar at the bottom,
+ * in the thumb zone; there is no device frame there, the phone is the frame.
+ */
+
+const FRAME_ICONS: Record<DeviceFrameId, ElementType> = { desktop: Monitor, tablet: Tablet, phone: Smartphone, slide: Presentation };
+
+export const variantLabel = (v: DesignVariant, i: number): string => v.label || `Variant ${i + 1}`;
+
+/** A native select: the platform's own picker on a phone, no custom dropdown to get wrong. */
+export function VariantPicker({ variants, file, onChange, compact }: {
+  variants: DesignVariant[];
+  file: string;
+  onChange: (file: string) => void;
+  compact?: boolean;
+}) {
+  if (variants.length < 2) return null;
+  return (
+    <label className={cx("relative flex min-h-11 items-center gap-2 rounded-lg px-3 text-sm font-medium text-text-2 active:bg-panel-2 can-hover:hover:bg-panel-2",
+      compact && "flex-col justify-center gap-0.5 px-2 text-xs")}>
+      <Layers className={compact ? "size-5" : "size-4"} aria-hidden="true" />
+      <span className={compact ? undefined : "sr-only"}>Variants</span>
+      <select value={file} onChange={(e) => onChange(e.target.value)} aria-label="Variant"
+        className={cx("bg-transparent text-sm text-text", compact && "absolute inset-0 opacity-0")}>
+        {variants.map((v, i) => <option key={v.file} value={v.file}>{variantLabel(v, i)}</option>)}
+      </select>
+    </label>
+  );
+}
+
+export function ShareToolbar({ title, subtitle, variants, file, onVariant, frame, onFrame, picking, onPicking, panelOpen, onPanel, count }: {
+  title: string;
+  subtitle: string;
+  variants: DesignVariant[];
+  file: string;
+  onVariant: (file: string) => void;
+  frame: DeviceFrameId;
+  onFrame: (frame: DeviceFrameId) => void;
+  picking: boolean;
+  onPicking: (on: boolean) => void;
+  panelOpen: boolean;
+  onPanel: (open: boolean) => void;
+  count: number;
+}) {
+  return (
+    <header className="flex shrink-0 items-center gap-2 border-b border-border bg-panel px-3 py-1">
+      <div className="min-w-0 flex-1">
+        <h1 className="truncate text-sm font-semibold">{title}</h1>
+        <p className="truncate text-xs text-text-3">{subtitle}</p>
+      </div>
+      <VariantPicker variants={variants} file={file} onChange={onVariant} />
+      <div className="flex items-center gap-0.5 rounded-lg border border-border p-0.5" role="group" aria-label="Device frame">
+        {DEVICE_FRAMES.map((f) => {
+          const Icon = FRAME_ICONS[f.id];
+          return (
+            <button key={f.id} type="button" title={f.label} aria-label={f.label} aria-pressed={frame === f.id}
+              className={cx(buttonQuiet, "px-2", frame === f.id && buttonToggleOn)} onClick={() => onFrame(f.id)}>
+              <Icon className="size-4" />
+            </button>
+          );
+        })}
+      </div>
+      <button type="button" aria-pressed={picking} onClick={() => onPicking(!picking)}
+        className={cx(buttonQuiet, picking && buttonToggleOn)}>
+        <MessageSquarePlus className="size-4" /> {picking ? "Choosing…" : "Comment"}
+      </button>
+      <button type="button" aria-pressed={panelOpen} onClick={() => onPanel(!panelOpen)}
+        className={cx(buttonQuiet, panelOpen && buttonToggleOn)} aria-label={`Comments (${count})`}>
+        <PanelRight className="size-4" /> {count}
+      </button>
+    </header>
+  );
+}
+
+export function ShareBottomBar({ variants, file, onVariant, picking, onPicking, onComments, count }: {
+  variants: DesignVariant[];
+  file: string;
+  onVariant: (file: string) => void;
+  picking: boolean;
+  onPicking: (on: boolean) => void;
+  onComments: () => void;
+  count: number;
+}) {
+  const cell = "flex min-h-12 min-w-16 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg text-xs font-medium text-text-2 active:bg-panel-2";
+  return (
+    <nav className="flex shrink-0 items-stretch gap-2 border-t border-border bg-panel px-2 pt-1 pb-[max(0.25rem,env(safe-area-inset-bottom))]" aria-label="Review">
+      <button type="button" aria-pressed={picking} onClick={() => onPicking(!picking)} className={cx(cell, picking && "text-primary")}>
+        {picking ? <X className="size-5" /> : <MessageSquarePlus className="size-5" />} {picking ? "Done" : "Comment"}
+      </button>
+      <button type="button" onClick={onComments} className={cell}>
+        <MessageSquare className="size-5" /> Comments ({count})
+      </button>
+      {variants.length > 1 && (
+        <div className="flex flex-1"><VariantPicker variants={variants} file={file} onChange={onVariant} compact /></div>
+      )}
+    </nav>
+  );
+}

package/src/web/design-share-page/share-ui.ts

@@ -0,0 +1,30 @@
+/**
+ * Small shared pieces of the reviewer page's markup: class joining and the button looks.
+ * Every target is at least 44px on every side, on a phone and on a desktop alike.
+ */
+
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+const BUTTON = "inline-flex min-h-11 min-w-11 items-center justify-center gap-2 rounded-lg px-3 text-sm font-medium select-none disabled:opacity-50";
+
+export const buttonPrimary = `${BUTTON} bg-primary text-primary-fg active:opacity-80 can-hover:hover:opacity-90`;
+export const buttonQuiet = `${BUTTON} text-text-2 active:bg-panel-2 can-hover:hover:bg-panel-2`;
+export const buttonOutline = `${BUTTON} border border-border bg-panel text-text active:bg-panel-2 can-hover:hover:bg-panel-2`;
+export const buttonToggleOn = "bg-panel-2 text-text ring-1 ring-border";
+
+export const fieldClass = "w-full rounded-lg border border-border bg-panel px-3 py-2 text-base text-text placeholder:text-text-3 md:text-sm";
+
+/** A date as the reviewer's own locale writes it. */
+export function formatDate(value: number | string): string {
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}
+
+export function formatDateTime(value: string): string {
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}

package/src/web/design-share-page/share.css

@@ -0,0 +1,63 @@
+/*
+ * The reviewer page's styles. Tailwind scans this folder only (`source(none)` + `@source`),
+ * so nothing of the app's class list lands here. The page has no theme engine: its colours
+ * follow the reviewer's own light or dark setting.
+ */
+@import "tailwindcss" source(none);
+@source ".";
+
+@custom-variant can-hover (@media (hover: hover) and (pointer: fine));
+
+@theme {
+  --color-bg: #f6f7f9;
+  --color-panel: #ffffff;
+  --color-panel-2: #eef0f3;
+  --color-border: #d9dde3;
+  --color-text: #15181d;
+  --color-text-2: #4a525e;
+  --color-text-3: #6b7380;
+  --color-primary: #2563eb;
+  --color-primary-fg: #ffffff;
+  --color-owner: #7c3aed;
+  --color-owner-fg: #ffffff;
+  --color-error: #c62828;
+  --color-warning: #9a6200;
+  --color-stage: #e6e9ee;
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #111418;
+    --color-panel: #181c22;
+    --color-panel-2: #222831;
+    --color-border: #313844;
+    --color-text: #e8ebef;
+    --color-text-2: #b4bcc7;
+    --color-text-3: #8d96a3;
+    --color-primary: #5b8def;
+    --color-primary-fg: #0b1220;
+    --color-owner: #a78bfa;
+    --color-owner-fg: #140b2b;
+    --color-error: #ff7b72;
+    --color-warning: #e3b341;
+    --color-stage: #0b0d10;
+  }
+}
+
+@layer base {
+  html, body, #root {
+    height: 100%;
+  }
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    -webkit-tap-highlight-color: transparent;
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}