@slowcook-ai/review-overlay 0.6.0 → 0.7.2

package/dist/react/overlay.js

@@ -25,8 +25,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState, useRef, useCallback } from "react";
 import { extractSelector, resolveStoredSelector } from "../selector.js";
 import { buildPayload, formatReviewComment, formatLcrIssue, } from "../comment-format.js";
-import { loadPat, savePat, submitComment, createIssue, fetchOverlayComments, loadCachedComments, saveCachedComments, fetchPrLabels, addLabelsToPr, submitPrApproval, APPROVED_LABEL, } from "../github.js";
-import { loadReviewerToken, loadReviewerIdentity, saveReviewerToken, saveReviewerIdentity, clearReviewerSession, runDeviceLogin, identifyReviewer, } from "../reviewer-session.js";
+import { loadPat, savePat, submitComment, createIssue, fetchOverlayComments, fetchLcrIssues, loadCachedComments, saveCachedComments, fetchPrLabels, addLabelsToPr, submitPrApproval, fetchDocFile, commitDocFile, APPROVED_LABEL, } from "../github.js";
+import { renderMarkdown } from "./markdown.js";
+import { loadReviewerToken, loadReviewerIdentity, saveReviewerToken, saveReviewerIdentity, clearReviewerSession, runDeviceLogin, identifyReviewer, checkRepoWriteAccess, } from "../reviewer-session.js";
 import { isResolvedStatus } from "../comment-format.js";
 import { readCurrentStory } from "./use-story-marker.js";
 const ACCENT = "#FF6B6B";
@@ -48,6 +49,21 @@ export function SlowcookReviewOverlay(props) {
     const authBase = props.authBase ?? process.env["NEXT_PUBLIC_SLOWCOOK_AUTH_BASE"] ?? "";
     const overlayVersion = props.overlayVersion ?? "0.6.0";
     const repoCoord = { owner, repo };
+    // 0.7.0 — docs studio config.
+    const docPaths = props.docPaths ??
+        (process.env["NEXT_PUBLIC_SLOWCOOK_DOC_PATHS"]?.split(",").map((s) => s.trim()).filter(Boolean)) ??
+        ["docs/PRD.md", "docs/ROADMAP.md", "docs/USER_STORIES.md", "docs/ARCHITECTURE.md"];
+    const branchProp = props.branch ?? process.env["NEXT_PUBLIC_SLOWCOOK_BRANCH"] ?? "";
+    // 0.7.1 — review surfaces (persona switcher lives in the pane, not the mock).
+    const surfaces = props.surfaces ?? (() => {
+        try {
+            const raw = process.env["NEXT_PUBLIC_SLOWCOOK_SURFACES"];
+            return raw ? JSON.parse(raw) : [];
+        }
+        catch {
+            return [];
+        }
+    })();
     // 0.5.1 — hydration-mismatch fix. The overlay can't render during
     // SSR (no localStorage, no window.matchMedia, no DOM), so it returns
     // null. But on first client render it would normally render the
@@ -63,6 +79,8 @@ export function SlowcookReviewOverlay(props) {
     // are declared. Bails early during SSR via the typeof window check.
     const [mode, setMode] = useState("nav");
     const [target, setTarget] = useState(null);
+    // 0.6.5 — element under the cursor in comment mode (green hover preview).
+    const [hoverEl, setHoverEl] = useState(null);
     const [composerOpen, setComposerOpen] = useState(false);
     // 0.5.0 — comments-list panel state. Opened by the "📋" button in
     // the pill OR by clicking the count badge on the Comment toggle.
@@ -86,6 +104,10 @@ export function SlowcookReviewOverlay(props) {
     // comments (applied/declined/noop) hide by default; needs-clarification +
     // unresolved always show.
     const [showApplied, setShowApplied] = useState(false);
+    // 0.7.0 — docs studio (textual review): panel open + the resolved working
+    // branch a scope-change commits to.
+    const [docsPanelOpen, setDocsPanelOpen] = useState(false);
+    const [resolvedBranch, setResolvedBranch] = useState(branchProp);
     // 0.2.0 — track viewport width for the icon-only mobile collapse + the
     // picker-route hide. Updates on resize + initial mount.
     const [isMobile, setIsMobile] = useState(false);
@@ -96,18 +118,107 @@ export function SlowcookReviewOverlay(props) {
     // refresh; background-refresh on focus.
     const [comments, setComments] = useState([]);
     const [openCommentId, setOpenCommentId] = useState(null);
+    // 0.6.8 — "new activity" badge: track which comment states the reviewer has
+    // already seen, so new replies / newly-applied resolutions ping the Comment
+    // button with a green count. Signature = id + reply status + reply length.
+    const seenKey = `slowcook.review-overlay.seen.${owner}/${repo}`;
+    const [seenSigs, setSeenSigs] = useState(() => {
+        try {
+            return new Set(JSON.parse(window.localStorage.getItem(seenKey) ?? "[]"));
+        }
+        catch {
+            return new Set();
+        }
+    });
+    const sigOf = (r) => `${r.commentId}:${r.plateReply?.status ?? ""}:${(r.plateReply?.summary ?? "").length}`;
+    // 0.6.10 — only an AGENT action is an "event": a reply comment (plateCommentUrl)
+    // or a resolution (applied). A reviewer's own freshly-filed comment (open issue,
+    // no reply) is NOT an event — it shouldn't ping their own badge.
+    const isAgentEvent = (r) => r.plateReply != null && (r.plateReply.status === "applied" || !!r.plateCommentUrl);
+    const newCount = comments.filter((r) => isAgentEvent(r) && !seenSigs.has(sigOf(r))).length;
+    const markAllSeen = useCallback(() => {
+        const sigs = comments.map(sigOf);
+        setSeenSigs(new Set(sigs));
+        try {
+            window.localStorage.setItem(seenKey, JSON.stringify(sigs));
+        }
+        catch { /* ignore */ }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [comments]);
     // 0.4.2 — approved state. True when the PR carries the
     // slowcook-mockup-approved label; pill renders green-tinted +
     // hides the Approve button. Nav + Comment still work for follow-up
     // discussion (plate refuses to amend either way).
     const [isApproved, setIsApproved] = useState(false);
-    // Mount-time + on-focus fetch of overlay comments.
+    // Lock page scroll while a composer or thread popover is open. Those boxes
+    // (and the element highlight) are positioned once at open time, so a scroll
+    // would leave them behind — easy to lose on mobile. Freezing the page keeps
+    // the box and its highlight together until the reviewer is done.
+    useEffect(() => {
+        const locked = composerOpen || generalComposerOpen || openCommentId !== null;
+        if (!locked || typeof document === "undefined")
+            return;
+        const body = document.body;
+        const prevOverflow = body.style.overflow;
+        const prevTouch = body.style.touchAction;
+        body.style.overflow = "hidden";
+        body.style.touchAction = "none";
+        return () => { body.style.overflow = prevOverflow; body.style.touchAction = prevTouch; };
+    }, [composerOpen, generalComposerOpen, openCommentId]);
+    // 0.7.0 — resolve the working branch for doc scope-changes. Prefer the
+    // configured branch; else the head branch of the open mockup PR; else the
+    // repo default. Runs once in lcr mode when no branch was provided.
+    useEffect(() => {
+        if (typeof window === "undefined" || reviewMode !== "lcr" || branchProp || !owner || !repo)
+            return;
+        let alive = true;
+        (async () => {
+            const base = getProxyApiBase() ?? "https://api.github.com";
+            try {
+                const r = await fetch(`${base}/repos/${owner}/${repo}`, { headers: { Accept: "application/vnd.github+json" } });
+                if (r.ok && alive) {
+                    const j = (await r.json());
+                    if (j.default_branch)
+                        setResolvedBranch(j.default_branch);
+                }
+            }
+            catch { /* offline / rate-limited — Docs read falls back to default ref */ }
+        })();
+        return () => { alive = false; };
+    }, [reviewMode, branchProp, owner, repo]);
+    // Mount-time + on-focus fetch of overlay comments / LCR issues.
     useEffect(() => {
         if (typeof window === "undefined")
             return;
-        if (!enabled)
+        if (!enabled || !owner || !repo)
             return;
-        if (!owner || !repo || !prNumber)
+        // 0.6.4 — lcr mode: comments are `lcr-review` ISSUES, retrieved with the
+        // signed-in reviewer's token. Closed issues = applied (hidden behind the
+        // "show already-applied" toggle); open = shown. Without a token (not signed
+        // in yet) there's nothing to read on a private repo — refetches after login
+        // via the reviewerIdentity dep.
+        if (reviewMode === "lcr") {
+            const cached = loadCachedComments(window.localStorage, { owner, repo }, 0);
+            if (cached)
+                setComments(cached);
+            const refresh = () => {
+                const token = loadReviewerToken(window.localStorage, { owner, repo });
+                if (!token)
+                    return;
+                void fetchLcrIssues({ owner, repo, token })
+                    .then((records) => {
+                    setComments(records);
+                    saveCachedComments(window.localStorage, { owner, repo }, 0, records);
+                })
+                    .catch(() => { });
+            };
+            refresh();
+            const onFocus = () => refresh();
+            window.addEventListener("focus", onFocus);
+            return () => window.removeEventListener("focus", onFocus);
+        }
+        // scenarios mode — the pin layer reads PR comments (needs a PR).
+        if (!prNumber)
             return;
         const cached = loadCachedComments(window.localStorage, { owner, repo }, prNumber);
         if (cached)
@@ -133,7 +244,7 @@ export function SlowcookReviewOverlay(props) {
         const onFocus = () => refresh();
         window.addEventListener("focus", onFocus);
         return () => window.removeEventListener("focus", onFocus);
-    }, [enabled, owner, repo, prNumber]);
+    }, [enabled, owner, repo, prNumber, reviewMode, reviewerIdentity]);
     useEffect(() => {
         if (typeof window === "undefined")
             return;
@@ -174,12 +285,17 @@ export function SlowcookReviewOverlay(props) {
         if (!token)
             return;
         try {
-            const id = await identifyReviewer(token);
+            const base = await identifyReviewer(token);
+            // Derive the apply tier from repo write access (push/maintain/admin).
+            const canApply = await checkRepoWriteAccess(token, { owner, repo });
+            const id = { ...base, canApply };
             saveReviewerToken(window.localStorage, { owner, repo }, token);
             saveReviewerIdentity(window.localStorage, { owner, repo }, id);
             setReviewerIdentity(id);
             setLogin({ open: false, status: "" });
-            setFeedback(`Signed in as @${id.login}.`);
+            setFeedback(canApply
+                ? `Signed in as @${id.login} — your comments are applied.`
+                : `Signed in as @${id.login} — your feedback goes to the team for review.`);
         }
         catch (e) {
             setLogin({ open: true, status: `Could not read your GitHub identity: ${e instanceof Error ? e.message : String(e)}` });
@@ -197,7 +313,9 @@ export function SlowcookReviewOverlay(props) {
     //    the `vibe` label, since an LCR note is about a requirement, not a PR.
     const postPayload = useCallback(async (payload, pat) => {
         if (reviewMode === "lcr") {
-            const issue = formatLcrIssue({ payload });
+            // Only write-access reviewers get the `vibe` (auto-apply) label; others
+            // are labelled `community-review` and held for the team to triage.
+            const issue = formatLcrIssue({ payload, canApply: reviewerIdentity?.canApply === true });
             const res = await createIssue({
                 owner: repoCoord.owner, repo: repoCoord.repo, pat,
                 title: issue.title, body: issue.body, labels: issue.labels,
@@ -211,7 +329,7 @@ export function SlowcookReviewOverlay(props) {
             apiBase: getProxyApiBase() ?? undefined,
         });
         return { res, kind: "comment" };
-    }, [reviewMode, repoCoord, prNumber]);
+    }, [reviewMode, repoCoord, prNumber, reviewerIdentity]);
     useEffect(() => {
         if (typeof window === "undefined")
             return;
@@ -252,31 +370,75 @@ export function SlowcookReviewOverlay(props) {
     useEffect(() => {
         if (typeof window === "undefined")
             return;
-        if (mode === "nav")
+        if (mode === "nav") {
+            setHoverEl(null);
             return;
+        }
+        const isOwnUi = (el) => !el ||
+            (composerRef.current && composerRef.current.contains(el)) ||
+            !!el.closest('[data-slowcook-overlay-ui="1"]');
         function onClick(e) {
             const el = e.target;
-            if (!el)
-                return;
-            // Don't capture clicks on the overlay's own UI.
-            if (composerRef.current && composerRef.current.contains(el))
-                return;
-            if (el.closest('[data-slowcook-overlay-ui="1"]'))
+            if (!el || isOwnUi(el))
                 return;
             e.preventDefault();
             e.stopPropagation();
             if (mode === "comment") {
                 setTarget(el);
+                setHoverEl(null);
                 setComposerOpen(true);
             }
             else if (mode === "approve") {
                 void submitApproval();
             }
         }
+        // 0.6.5 — live hover preview in comment mode: green-outline the element that
+        // would be selected on click, so the reviewer isn't minesweeping. (The red
+        // outline marks the element already chosen for the open composer.)
+        function onMove(e) {
+            if (mode !== "comment")
+                return;
+            const el = e.target;
+            setHoverEl(el && !isOwnUi(el) ? el : null);
+        }
+        // 0.6.15 — native controls (a <select>, <input>, link, button) activate on
+        // mousedown/pointerdown, BEFORE click — so without this they'd open their
+        // dropdown / focus / navigate instead of letting the click attach a comment.
+        // Swallow the down-press on the page (not the overlay's own UI) in
+        // comment/approve mode; the click still fires and opens the composer.
+        function onDown(e) {
+            const el = e.target;
+            if (!el || isOwnUi(el))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+        }
         document.addEventListener("click", onClick, { capture: true });
-        return () => document.removeEventListener("click", onClick, { capture: true });
+        document.addEventListener("mouseover", onMove, { capture: true });
+        document.addEventListener("mousedown", onDown, { capture: true });
+        document.addEventListener("pointerdown", onDown, { capture: true });
+        return () => {
+            document.removeEventListener("click", onClick, { capture: true });
+            document.removeEventListener("mouseover", onMove, { capture: true });
+            document.removeEventListener("mousedown", onDown, { capture: true });
+            document.removeEventListener("pointerdown", onDown, { capture: true });
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mode]);
+    // 0.6.6 — entering Nav clears the whole comment surface: any open composer,
+    // the comments-list panel, a general-note composer, an open pin popover, the
+    // approve confirm, the hover preview. Nav = "done reviewing, clean slate".
+    useEffect(() => {
+        if (mode !== "nav")
+            return;
+        setComposerOpen(false);
+        setTarget(null);
+        setGeneralComposerOpen(false);
+        setListPanelOpen(false);
+        setOpenCommentId(null);
+        setApproveConfirmOpen(false);
+        setHoverEl(null);
+    }, [mode]);
     const onApproveClicked = useCallback(() => {
         // 0.2.0 — two-step confirm; protects against fat-finger approval.
         setMode("approve");
@@ -509,23 +671,45 @@ export function SlowcookReviewOverlay(props) {
     if (isPickerRoute)
         return null;
     // 0.5.1 — auto-detect path: skip when env vars + props together
-    // don't supply a real owner/repo/pr. Avoids "submit comment"
-    // failing silently because the API call goes nowhere.
-    if (!owner || !repo || !prNumber)
+    // don't supply a real owner/repo. Avoids "submit comment" failing
+    // silently because the API call goes nowhere.
+    // 0.6.1 — lcr mode files ISSUES (not PR comments), so it needs no PR;
+    // only scenarios mode requires a prNumber.
+    if (!owner || !repo)
+        return null;
+    if (reviewMode !== "lcr" && !prNumber)
         return null;
     return (_jsxs("div", { "data-slowcook-overlay-ui": "1", style: {
             position: "fixed",
             inset: 0,
             pointerEvents: "none",
             zIndex: 2147483000,
-        }, children: [mode !== "nav" && (_jsx("div", { style: {
+        }, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: `[data-slowcook-overlay-ui] textarea,[data-slowcook-overlay-ui] input,[data-slowcook-overlay-ui] select{` +
+                        `color:#1a1a1a !important;background-color:#fff !important;` +
+                        `-webkit-text-fill-color:#1a1a1a !important;border-color:rgba(0,0,0,0.15) !important;caret-color:#1a1a1a !important;}` +
+                        `[data-slowcook-overlay-ui] textarea::placeholder,[data-slowcook-overlay-ui] input::placeholder{` +
+                        `color:rgba(0,0,0,0.4) !important;-webkit-text-fill-color:rgba(0,0,0,0.4) !important;}` +
+                        // 0.7.2 — the compact pane select. Higher specificity (attr + class +
+                        // element) so the host's `select{font-size:16px !important}` (iOS-zoom
+                        // guard) can't bloat it; keep it small + dark to match the pane.
+                        `[data-slowcook-overlay-ui] select.sc-ovl-pane-select{` +
+                        `font-size:11px !important;padding:4px 7px !important;line-height:1.15 !important;` +
+                        `color:#1a1a1a !important;background-color:#fff !important;font-weight:700 !important;}`
+                } }), mode !== "nav" && (_jsx("div", { style: {
                     position: "absolute",
                     inset: 0,
                     backgroundColor: mode === "comment"
                         ? "rgba(255, 107, 107, 0.05)"
                         : "rgba(74, 222, 128, 0.05)",
                     pointerEvents: "none",
-                }, "aria-hidden": "true" })), _jsx(ModeToggle, { mode: mode, onChange: (m) => (m === "approve" ? onApproveClicked() : setMode(m)), disabled: submitting, isMobile: isMobile, isApproved: isApproved, commentCount: comments.length, onListClick: () => setListPanelOpen(true) }), mode === "comment" && comments.length > 0 && (_jsx(CommentPins, { records: comments.filter((c) => c.payload.element !== null), openCommentId: openCommentId, onOpen: (id) => setOpenCommentId(id), onClose: () => setOpenCommentId(null), flashCommentId: flashCommentId })), listPanelOpen && (_jsx(CommentsListPanel, { records: comments, showApplied: showApplied, onToggleApplied: () => setShowApplied((v) => !v), onClose: () => setListPanelOpen(false), onOpenComment: (id) => {
+                }, "aria-hidden": "true" })), mode === "comment" && !composerOpen && hoverEl && _jsx(HoverHighlight, { el: hoverEl }), _jsx(ModeToggle, { mode: mode, onChange: (m) => (m === "approve" ? onApproveClicked() : setMode(m)), disabled: submitting, isMobile: isMobile, isApproved: isApproved, commentCount: comments.length, newCount: newCount, onListClick: () => { setListPanelOpen(true); markAllSeen(); }, docsEnabled: reviewMode === "lcr" && docPaths.length > 0, onDocsClick: () => setDocsPanelOpen(true), surfaces: reviewMode === "lcr" ? surfaces : [], onNavigate: (home) => {
+                    if (typeof window === "undefined")
+                        return;
+                    // Router-agnostic SPA nav: pushState + popstate so react-router (or any
+                    // history listener) updates without a full reload.
+                    window.history.pushState({}, "", home);
+                    window.dispatchEvent(new PopStateEvent("popstate"));
+                }, reviewMode: reviewMode, identity: reviewerIdentity, onSignIn: () => void signIn(), onSignOut: signOut }), mode === "comment" && comments.length > 0 && (_jsx(CommentPins, { records: comments.filter((c) => c.payload.element !== null), showApplied: showApplied, openCommentId: openCommentId, onOpen: (id) => setOpenCommentId(id), onClose: () => setOpenCommentId(null), flashCommentId: flashCommentId })), listPanelOpen && (_jsx(CommentsListPanel, { records: comments, showApplied: showApplied, onToggleApplied: () => setShowApplied((v) => !v), onClose: () => setListPanelOpen(false), onOpenComment: (id) => {
                     setListPanelOpen(false);
                     setMode("comment");
                     setOpenCommentId(id);
@@ -534,7 +718,7 @@ export function SlowcookReviewOverlay(props) {
                 }, onAddGeneral: () => {
                     setListPanelOpen(false);
                     setGeneralComposerOpen(true);
-                } })), generalComposerOpen && (_jsx(GeneralComposer, { onCancel: () => setGeneralComposerOpen(false), onSubmit: submitGeneralComment, submitting: submitting })), composerOpen && target && (_jsx(Composer, { target: target, onCancel: () => {
+                }, onApprove: () => { setListPanelOpen(false); onApproveClicked(); }, isApproved: isApproved })), docsPanelOpen && (_jsx(DocsPanel, { repo: repoCoord, docPaths: docPaths, branch: resolvedBranch, identity: reviewerIdentity, getToken: () => (typeof window !== "undefined" ? loadReviewerToken(window.localStorage, repoCoord) : null), onSignIn: () => void signIn(), apiBase: getProxyApiBase() ?? undefined, onClose: () => setDocsPanelOpen(false), onFeedback: (t) => setFeedback(t) })), generalComposerOpen && (_jsx(GeneralComposer, { onCancel: () => setGeneralComposerOpen(false), onSubmit: submitGeneralComment, submitting: submitting })), composerOpen && target && (_jsx(Composer, { target: target, onCancel: () => {
                     setComposerOpen(false);
                     setTarget(null);
                 }, onSubmit: submitFromComposer, submitting: submitting, composerRef: composerRef })), approveConfirmOpen && (_jsx(ApproveConfirm, { onCancel: () => {
@@ -543,21 +727,31 @@ export function SlowcookReviewOverlay(props) {
                 }, onConfirm: async () => {
                     setApproveConfirmOpen(false);
                     await submitApproval();
-                }, submitting: submitting })), reviewMode === "lcr" && (_jsx(ReviewerSignInBadge, { identity: reviewerIdentity, onSignIn: () => void signIn(), onSignOut: signOut })), login.open && (_jsx(ReviewerLoginDialog, { userCode: login.userCode, verificationUri: login.verificationUri, status: login.status, onClose: () => { loginAbort.current = true; setLogin({ open: false, status: "" }); } })), feedback && _jsx(FeedbackToast, { text: feedback, onDismiss: () => setFeedback(null) })] }));
+                }, submitting: submitting })), login.open && (_jsx(ReviewerLoginDialog, { userCode: login.userCode, verificationUri: login.verificationUri, status: login.status, onClose: () => { loginAbort.current = true; setLogin({ open: false, status: "" }); } })), feedback && _jsx(FeedbackToast, { text: feedback, onDismiss: () => setFeedback(null) })] }));
 }
 /**
- * 0.6.0 — sign-in badge for LCR review (top-right). Shows "Sign in with
- * GitHub" until the reviewer authenticates, then their @login + sign-out.
- * Every comment then posts as that reviewer (real GitHub attribution).
+/**
+ * 0.6.5 — green hover preview in comment mode. Outlines the element the cursor
+ * is over (the one a click would attach the comment to) so the reviewer can see
+ * the target before committing — no minesweeping. Distinct from the red outline,
+ * which marks the element already chosen for the open composer.
  */
-function ReviewerSignInBadge({ identity, onSignIn, onSignOut, }) {
-    return (_jsx("div", { style: { position: "fixed", top: 12, right: 12, pointerEvents: "auto", zIndex: 2147483600 }, children: identity ? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid rgba(0,0,0,0.12)", borderRadius: 999, padding: "5px 10px 5px 6px", boxShadow: "0 2px 10px rgba(0,0,0,0.12)", fontSize: 13 }, children: [identity.avatarUrl
-                    ? _jsx("img", { src: identity.avatarUrl, alt: "", width: 22, height: 22, style: { borderRadius: "50%" } })
-                    : _jsx("span", { "aria-hidden": true, style: { width: 22, height: 22, borderRadius: "50%", background: "#eee", display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: "\uD83D\uDC64" }), _jsxs("span", { style: { fontWeight: 600 }, children: ["@", identity.login] }), _jsx("button", { onClick: onSignOut, title: "Sign out", style: { border: "none", background: "transparent", cursor: "pointer", color: "#888", fontSize: 12 }, children: "sign out" })] })) : (_jsxs("button", { onClick: onSignIn, style: { display: "flex", alignItems: "center", gap: 8, background: "#24292f", color: "#fff", border: "none", borderRadius: 999, padding: "8px 14px", cursor: "pointer", boxShadow: "0 2px 10px rgba(0,0,0,0.18)", fontSize: 13, fontWeight: 600 }, children: [_jsx("span", { "aria-hidden": true, children: "\u29C9" }), " Sign in with GitHub"] })) }));
+function HoverHighlight({ el }) {
+    const r = el.getBoundingClientRect();
+    return (_jsx("div", { "data-slowcook-overlay-ui": "1", "aria-hidden": "true", style: {
+            position: "fixed",
+            top: r.top, left: r.left, width: r.width, height: r.height,
+            border: "2px solid #22c55e",
+            background: "rgba(34, 197, 94, 0.12)",
+            borderRadius: 4,
+            boxShadow: "0 0 0 1px rgba(34,197,94,0.35)",
+            pointerEvents: "none",
+            zIndex: 2147483200,
+        } }));
 }
 /** 0.6.0 — device-flow login dialog: shows the user code + verification link. */
 function ReviewerLoginDialog({ userCode, verificationUri, status, onClose, }) {
-    return (_jsx("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "auto", zIndex: 2147483601 }, children: _jsxs("div", { style: { background: "#fff", borderRadius: 14, padding: 24, width: 360, maxWidth: "90vw", boxShadow: "0 12px 40px rgba(0,0,0,0.3)", fontFamily: "system-ui, sans-serif" }, children: [_jsx("div", { style: { fontSize: 17, fontWeight: 700, marginBottom: 6, color: "#111" }, children: "Sign in with GitHub" }), userCode ? (_jsxs(_Fragment, { children: [_jsx("p", { style: { fontSize: 13.5, color: "#555", margin: "0 0 14px" }, children: "Open GitHub and enter this code to review as yourself:" }), _jsx("div", { style: { fontSize: 30, fontWeight: 800, letterSpacing: "0.18em", textAlign: "center", background: "#f3f4f6", borderRadius: 10, padding: "12px 0", color: "#111", fontFamily: "ui-monospace, monospace" }, children: userCode }), _jsxs("a", { href: verificationUri, target: "_blank", rel: "noreferrer", style: { display: "block", textAlign: "center", marginTop: 14, background: "#2da44e", color: "#fff", borderRadius: 999, padding: "9px 0", textDecoration: "none", fontWeight: 600, fontSize: 14 }, children: ["Open ", verificationUri?.replace(/^https?:\/\//, "")] })] })) : (_jsx("p", { style: { fontSize: 14, color: "#555", margin: "8px 0 14px" }, children: status || "Starting…" })), userCode && _jsx("p", { style: { fontSize: 12, color: "#888", marginTop: 12 }, children: status }), _jsx("button", { onClick: onClose, style: { marginTop: 16, width: "100%", border: "1px solid rgba(0,0,0,0.12)", background: "#fff", borderRadius: 999, padding: "8px 0", cursor: "pointer", fontSize: 13, color: "#444" }, children: "Cancel" })] }) }));
+    return (_jsx("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "auto", zIndex: 2147483647 /* 0.7.1 — above the Docs panel (…602) so the sign-in popup isn't hidden behind it */ }, children: _jsxs("div", { style: { background: "#fff", borderRadius: 14, padding: 24, width: 360, maxWidth: "90vw", boxShadow: "0 12px 40px rgba(0,0,0,0.3)", fontFamily: "system-ui, sans-serif" }, children: [_jsx("div", { style: { fontSize: 17, fontWeight: 700, marginBottom: 6, color: "#111" }, children: "Sign in with GitHub" }), userCode ? (_jsxs(_Fragment, { children: [_jsx("p", { style: { fontSize: 13.5, color: "#555", margin: "0 0 14px" }, children: "Open GitHub and enter this code to review as yourself:" }), _jsx("div", { style: { fontSize: 30, fontWeight: 800, letterSpacing: "0.18em", textAlign: "center", background: "#f3f4f6", borderRadius: 10, padding: "12px 0", color: "#111", fontFamily: "ui-monospace, monospace" }, children: userCode }), _jsxs("a", { href: verificationUri, target: "_blank", rel: "noreferrer", style: { display: "block", textAlign: "center", marginTop: 14, background: "#2da44e", color: "#fff", borderRadius: 999, padding: "9px 0", textDecoration: "none", fontWeight: 600, fontSize: 14 }, children: ["Open ", verificationUri?.replace(/^https?:\/\//, "")] })] })) : (_jsx("p", { style: { fontSize: 14, color: "#555", margin: "8px 0 14px" }, children: status || "Starting…" })), userCode && _jsx("p", { style: { fontSize: 12, color: "#888", marginTop: 12 }, children: status }), _jsx("button", { onClick: onClose, style: { marginTop: 16, width: "100%", border: "1px solid rgba(0,0,0,0.12)", background: "#fff", borderRadius: 999, padding: "8px 0", cursor: "pointer", fontSize: 13, color: "#444" }, children: "Cancel" })] }) }));
 }
 /**
  * 0.2.0 — draggable toggle pill with grip handle, slowcook logo,
@@ -596,16 +790,31 @@ function saveTogglePosition(p) {
     }
 }
 function ModeToggle(props) {
-    const { mode, onChange, disabled, isMobile, isApproved, commentCount, onListClick } = props;
+    const { mode, onChange, disabled, isMobile, isApproved, commentCount, newCount, onListClick, docsEnabled, onDocsClick, surfaces, onNavigate, reviewMode, identity, onSignIn, onSignOut } = props;
     // 0.5.1 — initialise with the default; load saved position from
     // localStorage AFTER mount. Eliminates a hydration mismatch where
     // SSR/first-client render disagreed on the position value.
     const [pos, setPos] = useState({ top: 12, right: 12 });
     useEffect(() => { setPos(loadTogglePosition()); }, []);
     const dragRef = useRef(null);
+    // 0.6.3 — sign-out is a two-step confirm: the disk floats, so a single
+    // mis-click shouldn't log you out. First click/tap on the identity chip arms
+    // confirmation (the chip turns into "Sign out?"); a second click/tap within a
+    // few seconds confirms. ANY other action (mode toggle, list, drag) cancels.
+    const [confirmLogout, setConfirmLogout] = useState(false);
+    const cancelLogout = useCallback(() => setConfirmLogout(false), []);
+    useEffect(() => {
+        if (!confirmLogout)
+            return;
+        const t = setTimeout(() => setConfirmLogout(false), 3500);
+        return () => clearTimeout(t);
+    }, [confirmLogout]);
+    const onChangeSafe = useCallback((m) => { setConfirmLogout(false); onChange(m); }, [onChange]);
+    const onListSafe = useCallback(() => { setConfirmLogout(false); onListClick(); }, [onListClick]);
     // Drag handlers — pointer events for unified mouse + touch.
     const onPointerDown = useCallback((e) => {
         // Only drag from the grip itself; clicks on toggle buttons must stay clicks.
+        setConfirmLogout(false); // dragging cancels a pending sign-out confirm
         e.preventDefault();
         e.stopPropagation();
         const target = e.currentTarget;
@@ -641,13 +850,22 @@ function ModeToggle(props) {
             pointerEvents: "auto",
             display: "flex",
             alignItems: "center",
+            // 0.7.1 — wrap to multiple rows when crowded (Nav/Comment + 📋 + Docs +
+            // persona switcher + sign-in don't fit one row on portrait mobile).
+            flexWrap: "wrap",
+            justifyContent: "flex-end",
+            // 0.7.2 — cap to the viewport (not a fixed px) so it stays one row on
+            // desktop but wraps to two on portrait mobile when crowded (Comment mode
+            // adds 📋 + Sign-in on top of Docs + the persona switcher).
+            maxWidth: "94vw",
             gap: 4,
+            rowGap: 5,
             // 0.4.2 — green-tinted background + green border when approved.
             background: isApproved
                 ? "rgba(20, 83, 45, 0.92)" // dark-green pill
                 : "rgba(15, 15, 24, 0.92)", // default dark
-            padding: "4px 4px 4px 6px",
-            borderRadius: 999,
+            padding: "5px 6px",
+            borderRadius: 16,
             border: isApproved
                 ? `1px solid rgba(34, 197, 94, 0.55)` // brighter green border
                 : "1px solid rgba(255, 255, 255, 0.16)",
@@ -668,17 +886,15 @@ function ModeToggle(props) {
                     justifyContent: "center",
                     opacity: 0.55,
                     touchAction: "none",
-                }, children: _jsxs("svg", { width: "6", height: "14", viewBox: "0 0 6 14", "aria-hidden": "true", children: [_jsx("circle", { cx: "1.5", cy: "2", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "4.5", cy: "2", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "1.5", cy: "7", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "4.5", cy: "7", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "1.5", cy: "12", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "4.5", cy: "12", r: "1.1", fill: "currentColor" })] }) }), _jsx(ToggleButton, { active: mode === "nav", onClick: () => onChange("nav"), disabled: disabled, label: isMobile ? "🧭" : "Nav", title: "Navigate (default)" }), _jsx(ToggleButton, { active: mode === "comment", onClick: () => onChange("comment"), disabled: disabled, label: isMobile ? "💬" : "💬 Comment", title: "Comment on an element", accent: true }), isApproved ? (_jsx("span", { "data-slowcook-overlay-ui": "1", title: "Mockup approved \u2014 comment thread stays open for follow-up; plate refuses to amend", style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 4,
-                    padding: "6px 12px",
-                    borderRadius: 999,
-                    background: APPROVED_GREEN,
-                    color: "white",
-                    fontWeight: 700,
-                    fontSize: 13,
-                }, children: "\u2713 Approved" })) : (_jsx(ToggleButton, { active: mode === "approve", onClick: () => onChange("approve"), disabled: disabled, label: isMobile ? "✅" : "✅ Approve", title: "Approve the mockup (asks for confirmation)", approve: true })), _jsxs("button", { type: "button", onClick: onListClick, disabled: disabled, title: `See all comments (${commentCount})`, style: {
+                }, children: _jsxs("svg", { width: "6", height: "14", viewBox: "0 0 6 14", "aria-hidden": "true", children: [_jsx("circle", { cx: "1.5", cy: "2", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "4.5", cy: "2", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "1.5", cy: "7", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "4.5", cy: "7", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "1.5", cy: "12", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "4.5", cy: "12", r: "1.1", fill: "currentColor" })] }) }), _jsx(ToggleButton, { active: mode === "comment", onClick: () => onChangeSafe(mode === "comment" ? "nav" : "comment"), disabled: disabled, label: mode === "comment"
+                    ? (isMobile ? "💬" : "💬 Commenting")
+                    : (isMobile ? "🧭" : "🧭 Navigating"), title: mode === "comment"
+                    ? "Comment mode on — click to go back to navigating"
+                    : (newCount ? `Click to comment — ${newCount} new update(s)` : "Click to comment on an element"), accent: true, badge: newCount }), isApproved && (_jsx("span", { "data-slowcook-overlay-ui": "1", title: "Mockup approved \u2014 comment thread stays open for follow-up; plate refuses to amend", style: {
+                    display: "inline-flex", alignItems: "center", gap: 4,
+                    padding: "6px 12px", borderRadius: 999, background: APPROVED_GREEN,
+                    color: "white", fontWeight: 700, fontSize: 13,
+                }, children: "\u2713 Approved" })), mode === "comment" && (_jsxs("button", { type: "button", onClick: onListSafe, disabled: disabled, title: `See all comments (${commentCount})`, style: {
                     marginLeft: 4,
                     background: "rgba(255,255,255,0.06)",
                     color: "white",
@@ -701,7 +917,40 @@ function ModeToggle(props) {
                             fontWeight: 700,
                             minWidth: 14,
                             textAlign: "center",
-                        }, children: commentCount }))] })] }));
+                        }, children: commentCount }))] })), docsEnabled && (_jsx("button", { type: "button", onClick: () => { setConfirmLogout(false); onDocsClick(); }, disabled: disabled, title: "Review & edit the spec docs (textual review)", style: {
+                    marginLeft: 4, background: "rgba(255,255,255,0.06)", color: "white",
+                    border: "none", padding: "6px 10px", borderRadius: 999,
+                    cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.6 : 1,
+                    font: "inherit", fontSize: 12, display: "inline-flex", alignItems: "center", gap: 5,
+                }, children: "\uD83D\uDCC4 Docs" })), surfaces.length > 0 && _jsx(SurfaceSwitcher, { surfaces: surfaces, onNavigate: onNavigate, disabled: disabled }), reviewMode === "lcr" && mode === "comment" && (identity ? (_jsx("span", { title: confirmLogout
+                    ? "Click again to sign out (or click anything else to cancel)"
+                    : identity.canApply
+                        ? `Signed in as @${identity.login} — you have write access, so your comments are applied`
+                        : `Signed in as @${identity.login} — no write access, so your feedback is gathered for the team to review (not auto-applied)`, onClick: () => { if (confirmLogout) {
+                    setConfirmLogout(false);
+                    onSignOut();
+                }
+                else {
+                    setConfirmLogout(true);
+                } }, style: {
+                    marginLeft: 4, display: "inline-flex", alignItems: "center", gap: 6,
+                    padding: "4px 10px 4px 4px", borderRadius: 999, cursor: "pointer",
+                    background: confirmLogout ? "rgba(255,107,107,0.25)" : "rgba(255,255,255,0.10)",
+                    border: confirmLogout ? "1px solid rgba(255,107,107,0.7)" : "1px solid transparent",
+                    color: "white", fontSize: 12, fontWeight: 600,
+                }, children: confirmLogout ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\uD83D\uDEAA" }), " Sign out?"] })) : (_jsxs(_Fragment, { children: [identity.avatarUrl
+                            ? _jsx("img", { src: identity.avatarUrl, alt: "", width: 20, height: 20, style: { borderRadius: "50%" } })
+                            : _jsx("span", { "aria-hidden": true, style: { width: 20, height: 20, borderRadius: "50%", background: "rgba(255,255,255,0.2)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11 }, children: "\uD83D\uDC64" }), "@", identity.login, _jsx("span", { style: {
+                                fontSize: 9.5, fontWeight: 800, letterSpacing: 0.3, textTransform: "uppercase",
+                                padding: "1px 6px", borderRadius: 999,
+                                background: identity.canApply ? "rgba(34,197,94,0.22)" : "rgba(148,163,184,0.25)",
+                                color: identity.canApply ? "#4ade80" : "#cbd5e1",
+                            }, children: identity.canApply ? "applies" : "review" })] })) })) : (_jsxs("button", { type: "button", onClick: onSignIn, disabled: disabled, title: "Sign in with GitHub to comment as yourself", style: {
+                    marginLeft: 4, display: "inline-flex", alignItems: "center", gap: 6,
+                    padding: "6px 12px", borderRadius: 999, border: "none",
+                    background: "white", color: "#24292f", cursor: disabled ? "not-allowed" : "pointer",
+                    font: "inherit", fontSize: 12, fontWeight: 700,
+                }, children: [_jsx("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "#24292f", "aria-hidden": "true", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }), "Sign in"] })))] }));
 }
 /**
  * Two-step approval confirm — guards against fat-finger taps on the
@@ -759,7 +1008,8 @@ function ToggleButton(props) {
                 ? ACCENT
                 : "rgba(255,255,255,0.18)"
         : "transparent";
-    return (_jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, title: props.title, style: {
+    return (_jsxs("button", { type: "button", onClick: props.onClick, disabled: props.disabled, title: props.title, style: {
+            position: "relative",
             background: bg,
             color: "white",
             border: "none",
@@ -768,7 +1018,28 @@ function ToggleButton(props) {
             cursor: props.disabled ? "not-allowed" : "pointer",
             opacity: props.disabled ? 0.6 : 1,
             font: "inherit",
-        }, children: props.label }));
+        }, children: [props.label, props.badge ? (_jsx("span", { style: {
+                    position: "absolute", top: -5, right: -5, minWidth: 16, height: 16,
+                    padding: "0 4px", borderRadius: 999, background: "#22c55e", color: "white",
+                    fontSize: 10, fontWeight: 800, display: "inline-flex", alignItems: "center",
+                    justifyContent: "center", boxShadow: "0 0 0 2px rgba(15,15,24,0.92)",
+                }, children: props.badge })) : null] }));
+}
+/**
+ * 0.6.13 — page-context badge in the composer so the reviewer sees which page
+ * the comment is on (route + the story it declares, if any) before submitting.
+ */
+function PageBadge() {
+    if (typeof window === "undefined")
+        return null;
+    const route = window.location.pathname + window.location.search;
+    const story = readCurrentStory();
+    return (_jsxs("div", { style: {
+            display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%",
+            fontSize: 11.5, color: "#3a3a3a", background: "rgba(255,107,107,0.10)",
+            border: "1px solid rgba(255,107,107,0.30)", borderRadius: 6,
+            padding: "3px 9px", marginBottom: 8,
+        }, children: [_jsx("span", { "aria-hidden": true, children: "\uD83D\uDCC4" }), _jsx("span", { style: { fontFamily: "ui-monospace, monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: route }), story && _jsxs("span", { style: { fontWeight: 700, color: "#d6336c" }, children: ["\u00B7 story-", story] })] }));
 }
 function Composer(props) {
     const [prose, setProse] = useState("");
@@ -830,12 +1101,13 @@ function Composer(props) {
                     fontFamily: "system-ui, -apple-system, sans-serif",
                     fontSize: 13,
                     zIndex: 2147483647,
-                }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Review comment" }), _jsx("div", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 11, opacity: 0.7, marginBottom: 8, wordBreak: "break-all" }, children: sel.selector }), _jsx("textarea", { "aria-label": "Comment text", autoFocus: true, value: prose, onChange: (e) => setProse(e.target.value), placeholder: "What's off about this element?", rows: 5, style: {
+                }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Review comment" }), _jsx(PageBadge, {}), _jsx("div", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 11, opacity: 0.7, marginBottom: 8, wordBreak: "break-all" }, children: sel.selector }), _jsx("textarea", { "aria-label": "Comment text", autoFocus: true, value: prose, onChange: (e) => setProse(e.target.value), placeholder: "What's off about this element?", rows: 5, style: {
                             width: "100%",
                             padding: 8,
                             border: "1px solid rgba(0,0,0,0.15)",
                             borderRadius: 6,
                             font: "inherit",
+                            fontSize: 16, // 0.6.12 — ≥16px stops iOS Safari auto-zooming on focus
                             resize: "vertical",
                             boxSizing: "border-box",
                         } }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 12 }, children: [_jsx("button", { type: "button", onClick: props.onCancel, disabled: props.submitting, style: {
@@ -941,7 +1213,13 @@ function ensurePat(repo, lcr = false) {
  * sticky to the underlying DOM.
  */
 function CommentPins(props) {
-    const { records, openCommentId, onOpen, onClose, flashCommentId } = props;
+    const { records: allRecords, showApplied, openCommentId, onOpen, onClose, flashCommentId } = props;
+    // Hide pins for resolved/applied comments unless the reviewer has asked to
+    // see them (the same "show applied" toggle that governs the list). An open
+    // pin stays visible so "Locate from list" still works.
+    const records = allRecords.filter((r) => showApplied ||
+        r.commentId === openCommentId ||
+        !(r.plateReply != null && isResolvedStatus(r.plateReply.status)));
     // tick forces a re-render on every animation frame so pins follow
     // the underlying DOM as the page scrolls / reflows.
     const [tick, setTick] = useState(0);
@@ -995,7 +1273,9 @@ function CommentPins(props) {
         }
         return { record: r, rect, drifted };
     });
-    return (_jsxs("div", { "data-slowcook-overlay-ui": "1", style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [placements.map(({ record, rect, drifted }) => (_jsx(PinIcon, { record: record, x: rect.x, y: rect.y, drifted: drifted, flashing: flashCommentId === record.commentId, onClick: () => onOpen(record.commentId) }, record.commentId))), openCommentId !== null && (() => {
+    return (_jsxs("div", { "data-slowcook-overlay-ui": "1", style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [placements
+                .filter(({ record, drifted }) => !drifted || record.commentId === openCommentId)
+                .map(({ record, rect, drifted }) => (_jsx(PinIcon, { record: record, x: rect.x, y: rect.y, drifted: drifted, flashing: flashCommentId === record.commentId, onClick: () => onOpen(record.commentId) }, record.commentId))), openCommentId !== null && (() => {
                 const placement = placements.find((p) => p.record.commentId === openCommentId);
                 if (!placement)
                     return null;
@@ -1010,41 +1290,70 @@ function pinPalette(status, drifted) {
         case "declined": return { bg: "#94a3b8", fg: "white", glyph: "⊘", ring: "rgba(148, 163, 184, 0.35)" };
         case "spec-altering": return { bg: "#facc15", fg: "#1a1a1a", glyph: "!", ring: "rgba(250, 204, 21, 0.35)" };
         case "noop": return { bg: "#94a3b8", fg: "white", glyph: "•", ring: "rgba(148, 163, 184, 0.35)" };
+        case "needs-clarification": return { bg: "#4D96FF", fg: "white", glyph: "?", ring: "rgba(77, 150, 255, 0.35)" };
         default: return { bg: ACCENT, fg: "white", glyph: "💬", ring: "rgba(255, 107, 107, 0.35)" };
     }
 }
+/** Per-author colour — Figma-style. Hashes the FULL author handle to a hue, so
+ *  two reviewers with the same initial still get distinct colours. */
+function authorColor(author) {
+    let h = 0;
+    for (let i = 0; i < author.length; i++)
+        h = (h * 31 + author.charCodeAt(i)) >>> 0;
+    const hue = h % 360;
+    return { bg: `hsl(${hue}, 58%, 42%)`, ring: `hsla(${hue}, 58%, 42%, 0.35)` };
+}
+/** First alphanumeric character of the author handle, uppercased. */
+function authorInitial(author) {
+    const m = author.replace(/[^a-zA-Z0-9]/g, "");
+    return (m[0] ?? "?").toUpperCase();
+}
 function PinIcon(props) {
+    const author = props.record.author || "unknown";
     const status = props.record.plateReply?.status ?? null;
-    const palette = pinPalette(status, props.drifted);
-    const title = props.drifted
-        ? `Selector drifted (anchored at original bbox); click to view`
-        : `${status ?? "unresolved"} · click to view`;
-    return (_jsx("button", { type: "button", "data-slowcook-overlay-ui": "1", "data-slowcook-comment-id": props.record.commentId, title: title, onClick: (e) => { e.stopPropagation(); props.onClick(); }, style: {
+    const col = authorColor(author);
+    // Status is shown as a small corner badge (not the whole pin) so the pin's
+    // body can carry the author's identity instead. No badge for a plain
+    // unresolved comment; drifted/resolved states get one.
+    const statusBadge = props.drifted
+        ? pinPalette(null, true)
+        : status
+            ? pinPalette(status, false)
+            : null;
+    const title = `@${author}${props.drifted ? " · selector drifted" : status ? ` · ${status}` : ""} · click to view`;
+    return (_jsxs("button", { type: "button", "data-slowcook-overlay-ui": "1", "data-slowcook-comment-id": props.record.commentId, title: title, onClick: (e) => { e.stopPropagation(); props.onClick(); }, style: {
             position: "absolute",
             left: props.x,
             top: props.y,
             width: 22,
             height: 22,
             borderRadius: 999,
-            background: palette.bg,
-            color: palette.fg,
+            background: col.bg,
+            color: "#fff",
             border: `2px solid white`,
             boxShadow: props.flashing
-                ? `0 2px 6px rgba(0,0,0,0.25), 0 0 0 12px ${palette.ring}`
-                : `0 2px 6px rgba(0,0,0,0.25), 0 0 0 4px ${palette.ring}`,
+                ? `0 2px 6px rgba(0,0,0,0.25), 0 0 0 12px ${col.ring}`
+                : `0 2px 6px rgba(0,0,0,0.25), 0 0 0 4px ${col.ring}`,
             transform: props.flashing ? "scale(1.4)" : "scale(1)",
             transition: "transform 220ms ease, box-shadow 220ms ease",
             cursor: "pointer",
             pointerEvents: "auto",
             fontSize: 11,
-            fontWeight: 700,
+            fontWeight: 800,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             font: "inherit",
             padding: 0,
             lineHeight: 1,
-        }, children: palette.glyph }));
+        }, children: [authorInitial(author), statusBadge && (_jsx("span", { "aria-hidden": true, style: {
+                    position: "absolute", top: -5, right: -5,
+                    width: 12, height: 12, borderRadius: 999,
+                    background: statusBadge.bg, color: statusBadge.fg,
+                    border: "1.5px solid white", fontSize: 8, fontWeight: 800,
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    lineHeight: 1,
+                }, children: statusBadge.glyph }))] }));
 }
 /**
  * Thread popover — opens above the pin (or below when near the
@@ -1114,7 +1423,7 @@ function CommentThreadPopover(props) {
                     background: "rgba(34, 197, 94, 0.08)",
                     borderLeft: "3px solid #22c55e",
                     borderRadius: 4,
-                }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 600, color: "#15803d", marginBottom: 4 }, children: "slowcook plate" }), _jsx("div", { style: { whiteSpace: "pre-wrap" }, children: record.plateReply.summary }), record.plateReply.files_touched && record.plateReply.files_touched.length > 0 && (_jsxs("div", { style: { marginTop: 6, fontSize: 11, opacity: 0.7, fontFamily: "ui-monospace, SFMono-Regular, monospace" }, children: ["touched: ", record.plateReply.files_touched.join(", ")] }))] })), _jsxs("div", { style: { display: "flex", gap: 12, marginTop: 12, fontSize: 11 }, children: [_jsx("a", { href: record.htmlUrl, target: "_blank", rel: "noreferrer", style: { color: ACCENT, textDecoration: "none" }, children: "\u2197 Comment on GitHub" }), record.plateCommentUrl && (_jsx("a", { href: record.plateCommentUrl, target: "_blank", rel: "noreferrer", style: { color: "#22c55e", textDecoration: "none" }, children: "\u2197 Plate reply on GitHub" }))] })] }));
+                }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 600, color: "#15803d", marginBottom: 4 }, children: "slowcook plate" }), _jsx("div", { style: { whiteSpace: "pre-wrap" }, children: record.plateReply.summary }), record.plateReply.files_touched && record.plateReply.files_touched.length > 0 && (_jsxs("div", { style: { marginTop: 6, fontSize: 11, opacity: 0.7, fontFamily: "ui-monospace, SFMono-Regular, monospace" }, children: ["touched: ", record.plateReply.files_touched.join(", ")] }))] })), _jsxs("div", { style: { display: "flex", gap: 12, marginTop: 12, fontSize: 11 }, children: [_jsx("a", { href: record.htmlUrl, target: "_blank", rel: "noreferrer", style: { color: ACCENT, textDecoration: "none" }, children: "\u2197 Comment on GitHub" }), record.plateCommentUrl && (_jsx("a", { href: record.plateCommentUrl, target: "_blank", rel: "noreferrer", style: { color: "#22c55e", textDecoration: "none" }, children: "\u2197 Reply on GitHub" }))] })] }));
 }
 function formatTimeAgo(iso) {
     try {
@@ -1146,7 +1455,10 @@ function formatTimeAgo(iso) {
  * + visible, also flashes the pin in-place.
  */
 function CommentsListPanel(props) {
-    const { records, showApplied, onToggleApplied, onClose, onOpenComment, onAddGeneral } = props;
+    const { records, showApplied, onToggleApplied, onClose, onOpenComment, onAddGeneral, onApprove, isApproved } = props;
+    // 0.6.14 — expand/collapse a row in place to read the full prose + reply,
+    // open the GitHub issue, or (for anchored comments) locate the pin on the page.
+    const [expandedId, setExpandedId] = useState(null);
     // 0.6.0 — resolved comments (applied/declined/noop) hide by default so the
     // list shows what still needs attention; needs-clarification + unresolved
     // always show. The toggle reveals the resolved ones.
@@ -1178,69 +1490,62 @@ function CommentsListPanel(props) {
                             fontSize: 18,
                             lineHeight: 1,
                             padding: 0,
-                        }, children: "\u00D7" })] }), _jsx("div", { style: { padding: 12, borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: _jsx("button", { type: "button", onClick: onAddGeneral, style: {
-                        width: "100%",
-                        padding: "10px 12px",
-                        background: "rgba(255,107,107,0.12)",
-                        color: ACCENT,
-                        border: `1px dashed ${ACCENT}`,
-                        borderRadius: 8,
-                        cursor: "pointer",
-                        font: "inherit",
-                        fontWeight: 600,
-                        fontSize: 13,
-                    }, children: "+ Add note (about the page, not an element)" }) }), hiddenCount > 0 && (_jsx("button", { type: "button", onClick: onToggleApplied, style: { margin: "0 12px 8px", padding: "7px 10px", background: "transparent", color: "rgba(255,255,255,0.6)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 8, cursor: "pointer", font: "inherit", fontSize: 12 }, children: showApplied ? `Hide ${hiddenCount} already-applied` : `Show ${hiddenCount} already-applied` })), _jsx("div", { style: { overflow: "auto", flex: 1, padding: 8 }, children: visible.length === 0 ? (_jsx("div", { style: { padding: 16, opacity: 0.55, textAlign: "center", fontSize: 12 }, children: records.length === 0
-                        ? "No comments yet. Toggle 💬 Comment + click an element to anchor a comment, or use the button above for a page-level note."
-                        : "Nothing needs attention — all comments are applied. Use the toggle above to see them." })) : (visible.slice().reverse().map((r) => {
-                    const status = r.plateReply?.status ?? null;
-                    const palette = pinPalette(status, false);
-                    const anchored = r.payload.element !== null;
-                    const live = anchored && typeof document !== "undefined"
-                        ? resolveStoredSelector(document, r.payload.element.selector, r.payload.element.fallback_selector)
-                        : null;
-                    const hidden = anchored && live && (live.element.getBoundingClientRect().width === 0 ||
-                        live.element.offsetParent === null);
-                    const anchorLabel = !anchored
-                        ? { text: "note", color: "#94a3b8", bg: "rgba(148,163,184,0.18)" }
-                        : !live
-                            ? { text: "drifted", color: "#facc15", bg: "rgba(250,204,21,0.18)" }
-                            : hidden
-                                ? { text: "hidden", color: "#94a3b8", bg: "rgba(148,163,184,0.18)" }
-                                : { text: "anchored", color: "#22c55e", bg: "rgba(34,197,94,0.18)" };
-                    return (_jsxs("button", { type: "button", onClick: () => onOpenComment(r.commentId), style: {
-                            display: "block",
+                        }, children: "\u00D7" })] }), _jsxs("div", { style: { padding: 12, borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [_jsx("button", { type: "button", onClick: onAddGeneral, style: {
                             width: "100%",
-                            textAlign: "left",
-                            background: "rgba(255,255,255,0.03)",
-                            border: "1px solid rgba(255,255,255,0.08)",
+                            padding: "10px 12px",
+                            background: "rgba(255,107,107,0.12)",
+                            color: ACCENT,
+                            border: `1px dashed ${ACCENT}`,
                             borderRadius: 8,
-                            padding: 10,
-                            marginBottom: 6,
                             cursor: "pointer",
-                            color: "white",
                             font: "inherit",
-                        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [_jsx("span", { style: {
-                                            display: "inline-flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                            width: 18,
-                                            height: 18,
-                                            borderRadius: 999,
-                                            background: palette.bg,
-                                            color: palette.fg,
-                                            fontSize: 10,
-                                            fontWeight: 700,
-                                        }, children: palette.glyph }), _jsx("span", { style: {
-                                            fontSize: 10,
-                                            fontWeight: 700,
-                                            textTransform: "uppercase",
-                                            letterSpacing: 0.4,
-                                            padding: "1px 6px",
-                                            borderRadius: 999,
-                                            background: anchorLabel.bg,
-                                            color: anchorLabel.color,
-                                        }, children: anchorLabel.text }), _jsxs("span", { style: { fontSize: 10, opacity: 0.55, marginLeft: "auto" }, children: ["@", r.author, " \u00B7 ", formatTimeAgo(r.createdAt)] })] }), _jsx("div", { style: { fontSize: 12, opacity: 0.85, lineHeight: 1.4, display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }, children: r.payload.prose })] }, r.commentId));
-                })) })] }));
+                            fontWeight: 600,
+                            fontSize: 13,
+                        }, children: "+ Add note (about the page, not an element)" }), _jsx("button", { type: "button", onClick: isApproved ? undefined : onApprove, disabled: isApproved, title: isApproved ? "Mockup already approved" : "Approve the whole mockup (asks to confirm)", style: {
+                            width: "100%", marginTop: 8, padding: "10px 12px",
+                            background: isApproved ? "rgba(34,197,94,0.15)" : "rgba(34,197,94,0.10)",
+                            color: APPROVED_GREEN, border: `1px solid ${APPROVED_GREEN}`,
+                            borderRadius: 8, cursor: isApproved ? "default" : "pointer",
+                            font: "inherit", fontWeight: 700, fontSize: 13,
+                        }, children: isApproved ? "✓ Mockup approved" : "✅ Approve mockup" })] }), hiddenCount > 0 && (_jsx("button", { type: "button", onClick: onToggleApplied, style: { margin: "0 12px 8px", padding: "7px 10px", background: "transparent", color: "rgba(255,255,255,0.6)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 8, cursor: "pointer", font: "inherit", fontSize: 12 }, children: showApplied ? `Hide ${hiddenCount} already-applied` : `Show ${hiddenCount} already-applied` })), _jsx("div", { style: { overflow: "auto", flex: 1, padding: 8 }, children: visible.length === 0 ? (_jsx("div", { style: { padding: 16, opacity: 0.55, textAlign: "center", fontSize: 12 }, children: records.length === 0
+                        ? "No comments yet. Toggle 💬 Comment + click an element to anchor a comment, or use the button above for a page-level note."
+                        : "Nothing needs attention — all comments are applied. Use the toggle above to see them." })) : ((() => {
+                    // #198-overlay — separate page-level notes from element-anchored
+                    // comments into labelled groups; element comments are the ones that
+                    // get sticky pins, page notes live only here.
+                    const rows = visible.slice().reverse();
+                    const groups = [
+                        { label: "📍 On an element", items: rows.filter((r) => r.payload.element !== null) },
+                        { label: "📄 On the page", items: rows.filter((r) => r.payload.element === null) },
+                    ];
+                    const renderRow = (r) => {
+                        const status = r.plateReply?.status ?? null;
+                        const palette = pinPalette(status, false);
+                        const anchored = r.payload.element !== null;
+                        const live = anchored && typeof document !== "undefined"
+                            ? resolveStoredSelector(document, r.payload.element.selector, r.payload.element.fallback_selector)
+                            : null;
+                        const hidden = anchored && live && (live.element.getBoundingClientRect().width === 0 ||
+                            live.element.offsetParent === null);
+                        const anchorLabel = !anchored
+                            ? { text: "note", color: "#94a3b8", bg: "rgba(148,163,184,0.18)" }
+                            : !live
+                                ? { text: "drifted", color: "#facc15", bg: "rgba(250,204,21,0.18)" }
+                                : hidden
+                                    ? { text: "hidden", color: "#94a3b8", bg: "rgba(148,163,184,0.18)" }
+                                    : { text: "anchored", color: "#22c55e", bg: "rgba(34,197,94,0.18)" };
+                        const expanded = expandedId === r.commentId;
+                        const clamp = (lines) => expanded ? {} : { display: "-webkit-box", WebkitLineClamp: lines, WebkitBoxOrient: "vertical", overflow: "hidden" };
+                        return (_jsxs("div", { style: {
+                                background: "rgba(255,255,255,0.03)",
+                                border: `1px solid ${expanded ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.08)"}`,
+                                borderRadius: 8, padding: 10, marginBottom: 6, color: "white",
+                            }, children: [_jsxs("button", { type: "button", onClick: () => setExpandedId(expanded ? null : r.commentId), style: { display: "flex", alignItems: "center", gap: 6, width: "100%", textAlign: "left", color: "white", font: "inherit", cursor: "pointer" }, children: [_jsxs("span", { style: { position: "relative", display: "inline-flex", flexShrink: 0 }, children: [_jsx("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, borderRadius: 999, background: authorColor(r.author || "unknown").bg, color: "#fff", fontSize: 9, fontWeight: 800 }, children: authorInitial(r.author || "unknown") }), status && (_jsx("span", { "aria-hidden": true, style: { position: "absolute", top: -4, right: -4, width: 10, height: 10, borderRadius: 999, background: palette.bg, color: palette.fg, border: "1.5px solid rgba(15,15,24,1)", fontSize: 7, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center", lineHeight: 1 }, children: palette.glyph }))] }), _jsx("span", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4, padding: "1px 6px", borderRadius: 999, background: anchorLabel.bg, color: anchorLabel.color }, children: anchorLabel.text }), _jsxs("span", { style: { fontSize: 10, opacity: 0.55, marginLeft: "auto" }, children: ["@", r.author, " \u00B7 ", formatTimeAgo(r.createdAt)] }), _jsx("span", { "aria-hidden": true, style: { fontSize: 10, opacity: 0.55, transform: expanded ? "rotate(90deg)" : "none", transition: "transform .15s" }, children: "\u25B6" })] }), _jsx("div", { style: { fontSize: 12, opacity: 0.85, lineHeight: 1.4, marginTop: 4, ...clamp(3) }, children: r.payload.prose }), r.plateReply?.summary && (_jsxs("div", { style: { marginTop: 6, paddingTop: 6, borderTop: "1px solid rgba(255,255,255,0.08)", fontSize: 11.5, lineHeight: 1.45, color: "rgba(255,255,255,0.82)", whiteSpace: "pre-wrap", ...clamp(4) }, children: [_jsx("span", { style: { color: palette.bg, fontWeight: 700 }, children: "\u21B3 reply: " }), r.plateReply.summary] })), _jsxs("div", { style: { display: "flex", gap: 12, marginTop: 8, fontSize: 11.5 }, children: [_jsx("a", { href: r.htmlUrl, target: "_blank", rel: "noreferrer", style: { color: "#7cc7ff", textDecoration: "none" }, children: "\u2197 Open issue on GitHub" }), anchored && (_jsxs("button", { type: "button", onClick: () => onOpenComment(r.commentId), style: { color: "#22c55e", font: "inherit", fontSize: 11.5, cursor: "pointer" }, children: ["\uD83D\uDCCD ", live ? "Locate on page" : "Anchor drifted"] })), !expanded && (r.payload.prose.length > 120 || (r.plateReply?.summary?.length ?? 0) > 180) && (_jsx("button", { type: "button", onClick: () => setExpandedId(r.commentId), style: { color: "rgba(255,255,255,0.6)", font: "inherit", fontSize: 11.5, cursor: "pointer", marginLeft: "auto" }, children: "Expand" }))] })] }, r.commentId));
+                    };
+                    return groups
+                        .filter((g) => g.items.length > 0)
+                        .map((g) => (_jsxs("div", { children: [_jsxs("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.6, color: "rgba(255,255,255,0.42)", padding: "10px 6px 4px" }, children: [g.label, " \u00B7 ", g.items.length] }), g.items.map(renderRow)] }, g.label)));
+                })()) })] }));
 }
 /**
  * 0.5.0 — composer for general (no-anchor) comments. Same shape as the
@@ -1264,12 +1569,13 @@ function GeneralComposer(props) {
             pointerEvents: "auto",
             fontFamily: "system-ui, -apple-system, sans-serif",
             fontSize: 13,
-        }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 4, fontSize: 14 }, children: "Add page note" }), _jsx("div", { style: { fontSize: 12, opacity: 0.65, marginBottom: 10 }, children: "Comment about overall behavior \u2014 not anchored to a specific element." }), _jsx("textarea", { "aria-label": "Note text", autoFocus: true, value: prose, onChange: (e) => setProse(e.target.value), placeholder: "e.g. 'Show an inline error when the user submits a duplicate name.'", rows: 5, style: {
+        }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 6, fontSize: 14 }, children: "Add page note" }), _jsx(PageBadge, {}), _jsx("div", { style: { fontSize: 12, opacity: 0.65, marginBottom: 10 }, children: "Comment about overall behavior \u2014 not anchored to a specific element." }), _jsx("textarea", { "aria-label": "Note text", autoFocus: true, value: prose, onChange: (e) => setProse(e.target.value), placeholder: "e.g. 'Show an inline error when the user submits a duplicate name.'", rows: 5, style: {
                     width: "100%",
                     padding: 8,
                     border: "1px solid rgba(0,0,0,0.15)",
                     borderRadius: 6,
                     font: "inherit",
+                    fontSize: 16, // 0.6.12 — ≥16px stops iOS Safari auto-zooming on focus
                     resize: "vertical",
                     boxSizing: "border-box",
                 } }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 12 }, children: [_jsx("button", { type: "button", onClick: props.onCancel, disabled: props.submitting, style: {
@@ -1292,4 +1598,121 @@ function GeneralComposer(props) {
                             fontWeight: 600,
                         }, children: props.submitting ? "Posting…" : "Post note" })] })] }));
 }
+/**
+ * 0.7.0 — Docs studio: the textual half of review. Reads the spine markdown docs
+ * on the working branch, lets a reviewer edit them with an edit/preview toggle,
+ * and (write-access only) commits the edit to the branch as a "scope change"
+ * that `refine` reconciles. Non-write reviewers get read + preview.
+ */
+function DocsPanel(props) {
+    const { repo, docPaths, branch, identity, getToken, onSignIn, apiBase, onClose, onFeedback } = props;
+    const [path, setPath] = useState(docPaths[0] ?? "");
+    const [file, setFile] = useState(null);
+    const [draft, setDraft] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [view, setView] = useState("preview");
+    const [submitting, setSubmitting] = useState(false);
+    const canApply = identity?.canApply === true;
+    const dirty = file != null && draft !== file.content;
+    const ref = branch || "HEAD";
+    const load = useCallback(async (p) => {
+        setLoading(true);
+        setError(null);
+        setFile(null);
+        const token = getToken();
+        const res = await fetchDocFile({ owner: repo.owner, repo: repo.repo, path: p, ref, pat: token ?? undefined, apiBase });
+        if (res.ok) {
+            setFile(res.file);
+            setDraft(res.file.content);
+            setView("preview");
+        }
+        else if (!token && (res.status === 404 || res.status === 401)) {
+            setError(`Sign in with GitHub to read ${p.split("/").pop()} — this repo is private.`);
+        }
+        else {
+            setError(`Couldn't load ${p}: ${res.message} (${res.status})`);
+        }
+        setLoading(false);
+    }, [repo.owner, repo.repo, ref, apiBase, getToken]);
+    useEffect(() => { if (path)
+        void load(path); }, [path, load]);
+    async function submit() {
+        if (!file || !dirty)
+            return;
+        const token = getToken();
+        if (!canApply || !token)
+            return;
+        setSubmitting(true);
+        const res = await commitDocFile({
+            owner: repo.owner, repo: repo.repo, path, content: draft, sha: file.sha,
+            branch: ref, message: `docs(scope): ${path} edited via review (PM scope change)`,
+            pat: token, apiBase,
+        });
+        setSubmitting(false);
+        if (res.ok) {
+            onFeedback(`Scope change committed to ${ref} — refine will reconcile ${path.split("/").pop()}.`);
+            await load(path); // refresh sha + content
+        }
+        else {
+            setError(`Commit failed: ${res.message} (${res.status})`);
+        }
+    }
+    const name = (p) => p.split("/").pop() ?? p;
+    return (_jsxs("div", { "data-slowcook-overlay-ui": "1", role: "dialog", "aria-label": "Docs studio", onClick: (e) => e.stopPropagation(), style: {
+            position: "fixed", inset: 0, zIndex: 2147483602,
+            background: "rgba(15,15,24,0.97)", color: "white", pointerEvents: "auto",
+            fontFamily: "system-ui, -apple-system, sans-serif", fontSize: 13,
+            display: "flex", flexDirection: "column",
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: "1px solid rgba(255,255,255,0.1)" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14 }, children: "\uD83D\uDCC4 Docs \u00B7 textual review" }), _jsxs("span", { style: { fontSize: 11, opacity: 0.6 }, children: ["branch ", _jsx("code", { style: { background: "rgba(255,255,255,0.1)", padding: "1px 6px", borderRadius: 5 }, children: ref })] }), _jsx("span", { style: { marginLeft: "auto" } }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close docs", style: { background: "transparent", border: "none", color: "rgba(255,255,255,0.6)", cursor: "pointer", fontSize: 22, lineHeight: 1 }, children: "\u00D7" })] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "10px 16px", borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: docPaths.map((p) => (_jsxs("button", { type: "button", onClick: () => setPath(p), title: p, style: {
+                        fontSize: 12, fontWeight: p === path ? 800 : 600, padding: "5px 11px", borderRadius: 999,
+                        cursor: "pointer", border: "1px solid " + (p === path ? "rgba(255,107,107,0.7)" : "rgba(255,255,255,0.15)"),
+                        background: p === path ? "rgba(255,107,107,0.18)" : "transparent", color: p === path ? "#ffb4b4" : "rgba(255,255,255,0.75)",
+                    }, children: [name(p), dirty && p === path ? " •" : ""] }, p))) }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 16px", borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [_jsx("div", { style: { display: "inline-flex", background: "rgba(255,255,255,0.06)", borderRadius: 999, padding: 2 }, children: ["preview", "edit"].map((v) => (_jsx("button", { type: "button", onClick: () => setView(v), style: { fontSize: 12, fontWeight: 700, padding: "4px 12px", borderRadius: 999, border: "none", cursor: "pointer",
+                                background: view === v ? "white" : "transparent", color: view === v ? "#111" : "rgba(255,255,255,0.7)" }, children: v === "preview" ? "Preview" : "Edit" }, v))) }), _jsx("span", { style: { marginLeft: "auto" } }), identity ? (canApply ? (_jsx("button", { type: "button", disabled: !dirty || submitting, onClick: () => void submit(), title: dirty ? "Commit this edit to the branch as a scope change" : "No changes yet", style: { fontSize: 12.5, fontWeight: 800, padding: "7px 14px", borderRadius: 8, border: "none",
+                            cursor: !dirty || submitting ? "not-allowed" : "pointer", opacity: !dirty || submitting ? 0.5 : 1,
+                            background: "#22c55e", color: "white" }, children: submitting ? "Submitting…" : "Submit scope change" })) : (_jsx("span", { style: { fontSize: 11.5, opacity: 0.7, maxWidth: 280 }, children: "Read-only \u2014 write access is required to submit a scope change; your notes can go via a review comment." }))) : (_jsx("button", { type: "button", onClick: onSignIn, style: { fontSize: 12.5, fontWeight: 700, padding: "7px 14px", borderRadius: 8, border: "none", cursor: "pointer", background: "white", color: "#111" }, children: "Sign in to edit" }))] }), _jsx("div", { style: { flex: 1, overflow: "auto", padding: 0 }, children: loading ? (_jsxs("div", { style: { padding: 24, opacity: 0.6 }, children: ["Loading ", name(path), "\u2026"] })) : error ? (_jsx("div", { style: { padding: 24, color: "#ffb4b4" }, children: error })) : view === "edit" ? (_jsx("textarea", { value: draft, onChange: (e) => setDraft(e.target.value), spellCheck: false, style: {
+                        width: "100%", height: "100%", minHeight: 400, boxSizing: "border-box",
+                        padding: "16px 20px", border: "none", outline: "none", resize: "none",
+                        background: "#11111b", color: "#e8e8f0", fontSize: 16, lineHeight: 1.55,
+                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                    } })) : (_jsx("div", { className: "sc-doc-prose", style: { padding: "16px 24px", maxWidth: 860, margin: "0 auto", lineHeight: 1.6 }, dangerouslySetInnerHTML: { __html: renderMarkdown(draft) } })) }), _jsx("style", { dangerouslySetInnerHTML: { __html: `.sc-doc-prose h1,.sc-doc-prose h2,.sc-doc-prose h3{color:#fff;margin:1.1em 0 .4em;line-height:1.25}` +
+                        `.sc-doc-prose h1{font-size:24px}.sc-doc-prose h2{font-size:19px;border-bottom:1px solid rgba(255,255,255,0.12);padding-bottom:4px}.sc-doc-prose h3{font-size:16px}` +
+                        `.sc-doc-prose p,.sc-doc-prose li{color:rgba(255,255,255,0.85)}` +
+                        `.sc-doc-prose code{background:rgba(255,255,255,0.1);padding:1px 5px;border-radius:5px;font-size:0.9em}` +
+                        `.sc-doc-prose pre{background:#11111b;padding:12px 14px;border-radius:8px;overflow:auto}.sc-doc-prose pre code{background:none;padding:0}` +
+                        `.sc-doc-prose a{color:#7cc7ff}` +
+                        `.sc-doc-prose blockquote{border-left:3px solid rgba(255,107,107,0.6);margin:.6em 0;padding:.2em 0 .2em 14px;color:rgba(255,255,255,0.7)}` +
+                        `.sc-doc-prose hr{border:none;border-top:1px solid rgba(255,255,255,0.12);margin:1.2em 0}` +
+                        `.sc-doc-prose table{border-collapse:collapse;width:100%;margin:.8em 0;font-size:12.5px}` +
+                        `.sc-doc-prose th,.sc-doc-prose td{border:1px solid rgba(255,255,255,0.15);padding:6px 10px;text-align:left}` +
+                        `.sc-doc-prose th{background:rgba(255,255,255,0.06)}`
+                } })] }));
+}
+/**
+ * 0.7.1 — "Viewing as" surface switcher, in the review pane. Lets a reviewer
+ * jump between the mock's persona/section surfaces. This is review-only — a real
+ * user is one role — so it must NOT live in the product mock. Tracks the current
+ * route (longest matching surface home) and navigates via the parent's
+ * router-agnostic handler.
+ */
+function SurfaceSwitcher(props) {
+    const { surfaces, onNavigate, disabled } = props;
+    const [path, setPath] = useState(typeof window !== "undefined" ? window.location.pathname : "/");
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const on = () => setPath(window.location.pathname);
+        window.addEventListener("popstate", on);
+        return () => window.removeEventListener("popstate", on);
+    }, []);
+    const current = surfaces
+        .filter((s) => (s.home === "/" ? true : path === s.home || path.startsWith(s.home + "/") || path === s.home))
+        .sort((a, b) => b.home.length - a.home.length)[0] ?? surfaces[0];
+    return (_jsx("select", { className: "sc-ovl-pane-select", "aria-label": "Viewing as (review surface)", title: "Viewing as \u2014 jump between persona surfaces (review only; not a real control)", value: current?.home ?? "", disabled: disabled, onChange: (e) => onNavigate(e.target.value), style: {
+            marginLeft: 2, maxWidth: 150,
+            border: "1px solid rgba(0,0,0,0.15)", borderRadius: 999,
+            cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.6 : 1,
+        }, children: surfaces.map((s) => (_jsx("option", { value: s.home, style: { color: "#111" }, children: (s.icon ? s.icon + " " : "") + "as " + s.label }, s.home))) }));
+}
 //# sourceMappingURL=overlay.js.map