@bitvea/feedback-toolbar 0.0.1

package/dist/PinLayer.js

@@ -0,0 +1,1702 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Pinning: the centrepiece interaction. Click an element, attach a comment to
+// it, and see everyone else's pins on the same page so nobody reports the same
+// bug twice.
+//
+// Two overlays, both fixed and both above the host page. In picking mode the
+// overlay is what receives the click, which is how a pin can be dropped on a
+// button without the button firing. Out of picking mode nothing intercepts
+// pointer events except the markers themselves, so the page stays usable.
+//
+// The markers are not gated on any surface being open: they are the page's
+// review state, and hiding them until a reviewer opened a panel was how two
+// people ended up filing the same bug twice. The one thing that does hide a
+// marker is a resolved item - see `showResolved`.
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { FEEDBACK_BODY_MAX, } from "./vendor/types/index.js";
+import { captureMetadata, captureScreenshot } from "./capture.js";
+import { ToolbarApiError } from "./client.js";
+import { buildDeepLink, currentPageUrl } from "./deepLink.js";
+import { ChordWatcher, isApplePlatform, isEditableTarget, matchesChord, } from "./shortcut.js";
+import { Avatar, displayNameFor, formatStamp, initialsFor, relativeStamp, } from "./FeedbackPanel.js";
+import { CameraIcon, CheckIcon, CloseIcon, CopyIcon, LinkIcon, SendIcon, } from "./icons.js";
+import { MARKDOWN_MARKS, toggleMark } from "./markdown.js";
+import { RichText } from "./RichText.js";
+import { captureElement } from "./capture.js";
+import { surfaceMotion, useEntered, useNewSinceMount, usePrefersReducedMotion, usePresence, } from "./motion.js";
+import { buildSelector, locatePin, offsetWithin, resolveSelector, } from "./selector.js";
+import { accent, durationMs, exitFor, layers, lightTheme, motion, motionTransform, radii, resetBox, sizes, spacing, srOnly, transition, typeScale, VIEWPORT_GUTTER, } from "./tokens.js";
+/**
+ * What counts as "inside the pin UI" for the outside-click dismissal. The
+ * composer is included because a click that lands on it is a reviewer still
+ * writing, and the toolbar's own bar is included because closing a thread on
+ * the way to pressing a bar button would make the bar feel unreliable.
+ */
+const PIN_SURFACE_SELECTOR = '[data-bitvea-pin-surface], [data-testid="pin-composer"], [data-bitvea-feedback-toolbar]';
+/**
+ * How far down and right of its marker an anchored thread sits, in pixels.
+ *
+ * A constant rather than two string literals in a style object because the
+ * thread's `transform-origin` is derived from it - the growth origin has to
+ * land back on the marker, and that is this offset negated. Two places that
+ * have to agree, so one value.
+ */
+const THREAD_ANCHOR_OFFSET = 16;
+/**
+ * The composer's own version of the offset above. 12 rather than 16 because it
+ * hangs off a cursor rather than off a 28px teardrop, and the unit test that
+ * asserts the growth origin lands on the clicked pixel reads it as `-12px`.
+ */
+const COMPOSER_ANCHOR_OFFSET = 12;
+/**
+ * How wide an anchored surface is allowed to grow: the viewport, less
+ * `VIEWPORT_GUTTER` on each side.
+ *
+ * Derived rather than spelled `calc(100vw - 32px)` at the three call sites
+ * that had it, which is what makes the clamps below agree with the width they
+ * clamp - by construction, rather than by two numbers happening to match. A
+ * card whose `maxWidth` is wider than the clamp believes hangs off the very
+ * edge the clamp exists to hold it inside, and the clamp cannot see it happen.
+ */
+const VIEWPORT_MAX_WIDTH = `calc(100vw - ${VIEWPORT_GUTTER * 2}px)`;
+/**
+ * How much of the composer is kept on screen vertically.
+ *
+ * A guess, and stated as one: nothing measures the composer's height before it
+ * is placed, and doing so would mean laying it out off-screen first. It is
+ * generous enough to hold the selector line, three rows of textarea and the
+ * button row, which is the composer at rest.
+ */
+const COMPOSER_VIEWPORT_RESERVE = 200;
+/**
+ * The card width as a number, for the two clamps that have to do arithmetic
+ * with it. Parsed from the token rather than declared beside it - see
+ * `sizes.thread`, where a hard-coded `300` in exactly this position is the
+ * defect that token exists to close.
+ */
+const THREAD_WIDTH = Number.parseFloat(sizes.thread);
+/**
+ * How tall the reply box may grow before it scrolls instead - six lines of
+ * `bodySm`. Past that the composer would push the send control out of a card
+ * that is itself capped at `sizes.threadMaxHeight`.
+ */
+const REPLY_MAX_HEIGHT = 120;
+/**
+ * The key a not-yet-submitted report's capture is held under.
+ *
+ * Attachments are keyed by feedback item id, and a draft has no id - it is the
+ * report being written. A reserved key rather than a second piece of state,
+ * because everything else about the two composers is now shared and a parallel
+ * `draftAttachment` would be the one thing that could drift.
+ *
+ * Not a valid cuid, so it cannot collide with a real item id.
+ */
+const DRAFT_ATTACHMENT = "draft";
+/** How long a copy button shows its check. Long enough to read, and no longer. */
+const COPIED_FOR_MS = 1200;
+export function PinLayer({ client, config, organizationId, theme = lightTheme, picking, onPickingChange, showResolved = false, focusPinId = null, onFocusHandled, deepLinkPinId = null, onOpenCountChange, }) {
+    const [pins, setPins] = useState([]);
+    const [draft, setDraft] = useState(null);
+    /**
+     * The camera in a thread's composer arms the SAME picker the pin tool uses,
+     * and the two are one mechanism with two intents: point at an element, and
+     * do something with it. The alternative was a second overlay with its own
+     * hit-testing and its own escape hatch, which is how two pickers end up
+     * disagreeing about what "the element under the cursor" means.
+     *
+     * Which thread asked is held here rather than in the thread, because the
+     * overlay is rendered by this component: a thread cannot own a surface that
+     * covers the whole viewport. The captured image is held here for the same
+     * reason and handed back down.
+     */
+    const [capturingFor, setCapturingFor] = useState(null);
+    const [attachments, setAttachments] = useState({});
+    const [openPinId, setOpenPinId] = useState(null);
+    // Which threads this reviewer has already looked at, keyed by reply count so
+    // a new reply on an already-read thread marks it unread again. Session-local
+    // because there is no server-side read model: the alternative was to call
+    // every thread with replies unread forever, which makes the dot meaningless.
+    const [read, setRead] = useState({});
+    // Whether the first list has come back. Only a deep link needs this: "no
+    // such item on this page" and "the request has not answered yet" have to be
+    // told apart before anything is said about a missing item, or every deep
+    // link flashes an error on its way to working.
+    const [loaded, setLoaded] = useState(false);
+    // Bumped on scroll and resize to recompute every marker's position from its
+    // anchor. Positions are derived, never stored in viewport pixels, which is
+    // what lets a pin survive a reload onto a different viewport.
+    const [tick, setTick] = useState(0);
+    // Derived, not read off the address bar. A deep link arrives with our
+    // fragment on the URL and a host framework can put it back after the shell
+    // has removed it; a `pageUrl` carrying it matches no stored row, so the page
+    // renders as empty at the exact moment somebody followed a link to a report
+    // on it. See `currentPageUrl`.
+    const pageUrl = currentPageUrl();
+    const reload = useCallback(async () => {
+        try {
+            setPins(await client.listForPage(organizationId, pageUrl));
+        }
+        catch {
+            // A pin list that will not load must not take the toolbar with it: the
+            // reviewer can still write a general note.
+            setPins([]);
+        }
+        finally {
+            setLoaded(true);
+        }
+    }, [client, organizationId, pageUrl]);
+    useEffect(() => {
+        void reload();
+    }, [reload]);
+    useEffect(() => {
+        const onMove = () => setTick((t) => t + 1);
+        window.addEventListener("scroll", onMove, { passive: true });
+        window.addEventListener("resize", onMove);
+        return () => {
+            window.removeEventListener("scroll", onMove);
+            window.removeEventListener("resize", onMove);
+        };
+    }, []);
+    // Escape gets out of everything this layer opened, in the order a reviewer
+    // means it: the composer they are typing in, then the pin tool they armed,
+    // then the thread they opened.
+    //
+    // There was no key handling in this package at all, and for the pin tool
+    // that was not a missing nicety - combined with the picker painting over the
+    // bar it meant picking mode had no exit whatsoever. The z-index fix makes
+    // the button reachable again; this makes the keyboard work as well, which is
+    // what an overlay in somebody else's app owes them.
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            if (draft !== null) {
+                setDraft(null);
+            }
+            else if (capturingFor !== null) {
+                // Before `picking`, because a capture is the innermost thing open: the
+                // reviewer armed it from a thread they still want.
+                setCapturingFor(null);
+            }
+            else if (picking) {
+                onPickingChange(false);
+            }
+            else if (openPinId !== null) {
+                setOpenPinId(null);
+            }
+            else {
+                return;
+            }
+            // Only when something was actually dismissed: a host app may have its
+            // own Escape handling, and swallowing the key when the toolbar had
+            // nothing open would break it.
+            event.stopPropagation();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [draft, openPinId, picking, capturingFor, onPickingChange]);
+    // ARMING THE PICKER FROM THE KEYBOARD, which is the mirror of the handler
+    // above and deliberately sits beside it: those two are now the whole of what
+    // this package does with a key, and splitting them across files is how they
+    // start disagreeing about what "something is open" means.
+    //
+    // It lives in THIS component and not in the bar, and three of the feature's
+    // rules are satisfied by that placement alone rather than by a condition:
+    //
+    //   - A ready session is required. `FeedbackToolbar` renders this layer only
+    //     once the session resolves, so before that there is no listener - not a
+    //     listener that checks.
+    //   - The bar may be collapsed. This layer is mounted outside the dock and
+    //     survives a collapse, so the chord keeps working while the bar is put
+    //     away, which is the case it is most wanted in. Nothing here touches the
+    //     `collapsed` preference: a keystroke that silently rewrote a stored
+    //     setting would be a side effect nobody asked for.
+    //   - A draft must not be destroyed. `draft` is state in this component, so
+    //     the no-op below reads it directly instead of a flag lifted up to the
+    //     bar and back.
+    //
+    // CAPTURE PHASE, unlike the Escape handler. A host application that calls
+    // `stopPropagation()` in its own keydown handler would swallow the chord
+    // before a bubble-phase listener ever saw it, and the reviewer would get no
+    // feedback and no way to understand why. Escape can afford to bubble because
+    // it only ever acts on something the toolbar already opened; this one has to
+    // work when the toolbar has nothing open at all, which is precisely when the
+    // host is in charge of the keyboard.
+    //
+    // The swallow stays conditional, exactly as above: every suppressed case
+    // here leaves the event completely untouched.
+    useEffect(() => {
+        const chord = config.pinShortcut;
+        // No chord means NO LISTENER. A host that switched the shortcut off must
+        // not have its keystrokes observed by a handler that merely declines them.
+        if (chord === null)
+            return;
+        const watcher = new ChordWatcher();
+        const apple = isApplePlatform(typeof navigator === "undefined" ? undefined : navigator);
+        const onKeyDown = (event) => {
+            // Held keys are tracked even while the reviewer is typing in the host's
+            // own field: the suppression below is about whether we ACT, and a set
+            // that stopped tracking mid-word would be wrong about what is down by
+            // the time focus leaves.
+            watcher.down(event.key);
+            if (isEditableTarget(event.target))
+                return;
+            if (!matchesChord(chord, event, watcher.keys(), apple))
+                return;
+            // Mid-sentence in a composer, this does nothing. Deliberately NOT
+            // symmetric with Escape above: Escape is an explicit "get me out of
+            // this" and may discard a draft, while this is a "get me in" that has
+            // landed at a bad moment, and it must never cost unsent words.
+            if (draft !== null)
+                return;
+            // Arming only. Pressing it again is not a toggle - Escape is the exit,
+            // and the handler above owns what that means in every state.
+            if (picking)
+                return;
+            onPickingChange(true);
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const onKeyUp = (event) => watcher.up(event.key);
+        // Both of these mean the same thing: this document has stopped hearing the
+        // reviewer's keystrokes and cannot know what they released. Without them a
+        // keyup lost to a tab switch - or to Spotlight, which this chord provokes
+        // on macOS - leaves Space "held" forever, and a later lone F arms picking
+        // out of nowhere.
+        const onRelease = () => watcher.clear();
+        window.addEventListener("keydown", onKeyDown, true);
+        window.addEventListener("keyup", onKeyUp, true);
+        window.addEventListener("blur", onRelease);
+        document.addEventListener("visibilitychange", onRelease);
+        return () => {
+            window.removeEventListener("keydown", onKeyDown, true);
+            window.removeEventListener("keyup", onKeyUp, true);
+            window.removeEventListener("blur", onRelease);
+            document.removeEventListener("visibilitychange", onRelease);
+        };
+    }, [config.pinShortcut, draft, picking, onPickingChange]);
+    // A click on the page closes an open thread. A popover parked over the
+    // element under review, dismissable only by finding its own small close
+    // control again, is a review tool getting in the way of the review.
+    //
+    // `pointerdown` rather than `click`, so the thread is gone before the host's
+    // own click handler runs on the thing the reviewer actually aimed at.
+    useEffect(() => {
+        if (openPinId === null)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (target instanceof Element &&
+                target.closest(PIN_SURFACE_SELECTOR) !== null) {
+                return;
+            }
+            setOpenPinId(null);
+        };
+        window.addEventListener("pointerdown", onPointerDown, true);
+        return () => window.removeEventListener("pointerdown", onPointerDown, true);
+    }, [openPinId]);
+    const openCount = useMemo(() => pins.filter((p) => p.status !== "DONE").length, [pins]);
+    useEffect(() => {
+        onOpenCountChange?.(openCount);
+    }, [openCount, onOpenCountChange]);
+    // Which pins belong on the page right now, as ids.
+    //
+    // Split out of `placed` and deliberately independent of `tick`: this is the
+    // cheap set-membership question, and `placed` below is the expensive one - it
+    // resolves a selector and reads a bounding rect per pin, on every scroll and
+    // resize event. Resolved items leave the page unless they have been asked
+    // back, with one exception: an open thread stays whatever its status, which
+    // is what makes a deep link to a resolved item work - the link reveals that
+    // one item without turning every closed pin on the page back on.
+    const onPageIds = useMemo(() => pins
+        .filter((p) => p.kind === "PINNED" &&
+        p.pin &&
+        (showResolved || p.status !== "DONE" || p.id === openPinId))
+        .map((p) => p.id), [openPinId, pins, showResolved]);
+    // Pins that were on the page a moment ago and are not any more, kept just
+    // long enough to fade out (issue #24). A resolve used to end with a marker
+    // blinking out of existence, which reads as a glitch rather than as an
+    // acknowledgement.
+    //
+    // Derived during render from the previous set rather than in an effect: an
+    // effect would paint one frame with the marker already gone, which is the
+    // frame the fade needed. This is the same "a value changed, so derive some
+    // state from it" shape the focus request above uses.
+    //
+    // The initial value is the point of the whole latch. `onPageIds` starts empty
+    // and fills in when the fetch answers, so a page loading with twenty resolved
+    // pins hidden compares an empty previous set against an empty current one and
+    // fades nothing - DESIGN.md: nothing animates on first mount. Only a pin that
+    // was visible and stopped being visible ends up here, and it is usually
+    // `openPinId` or `showResolved` changing that puts it there rather than the
+    // status write, since the exception above keeps a pin resolved from its own
+    // thread on the page until that thread closes.
+    const [wasOnPage, setWasOnPage] = useState(onPageIds);
+    const [departingIds, setDepartingIds] = useState([]);
+    if (wasOnPage !== onPageIds) {
+        const gone = wasOnPage.filter((id) => !onPageIds.includes(id));
+        setWasOnPage(onPageIds);
+        // Added to whatever is already leaving rather than replacing it. Two pins
+        // departing 50ms apart is ordinary - resolving from the sheet while a
+        // deep-linked thread closes - and a replace dropped the first one from
+        // `placed` mid-fade, which unmounts a marker at opacity 0.6. That is the
+        // blink the fade exists to remove, arriving by a different route.
+        if (gone.length > 0) {
+            setDepartingIds((leaving) => [
+                ...leaving,
+                ...gone.filter((id) => !leaving.includes(id)),
+            ]);
+        }
+    }
+    useEffect(() => {
+        if (departingIds.length === 0)
+            return;
+        const timer = window.setTimeout(() => setDepartingIds([]), durationMs(motion.duration.fast));
+        return () => window.clearTimeout(timer);
+    }, [departingIds]);
+    const placed = useMemo(() => {
+        void tick;
+        const onPage = new Set(onPageIds);
+        return (pins
+            // Only the pins that have to be drawn: the ones on the page, plus the
+            // handful on their way off it. Anything else never reaches `locatePin`,
+            // which is what keeps the cost of a scroll proportional to what is
+            // visible rather than to the project's whole review history.
+            .filter((p) => p.kind === "PINNED" &&
+            p.pin &&
+            (onPage.has(p.id) || departingIds.includes(p.id)))
+            .map((p) => ({
+            item: p,
+            at: locatePin(p.pin.selector, p.pin.offsetX, p.pin.offsetY),
+            departing: !onPage.has(p.id),
+        }))
+            // A pin whose anchor no longer exists is hidden rather than parked in a
+            // corner: a marker floating over unrelated content is worse than none.
+            .filter((p) => p.at !== null));
+    }, [departingIds, onPageIds, pins, tick]);
+    // A focus request - from the inbox sheet, or from a deep link - opens that
+    // thread. Adjusted during render rather than in an effect: an effect would
+    // paint the un-focused state first and then correct it, and React's own
+    // guidance for "a prop changed, so derive some state from it" is exactly
+    // this shape.
+    const requestedPinId = focusPinId ?? deepLinkPinId;
+    const [lastFocus, setLastFocus] = useState(null);
+    if (requestedPinId !== null && requestedPinId !== lastFocus) {
+        setLastFocus(requestedPinId);
+        setOpenPinId(requestedPinId);
+    }
+    // The scroll is a real side effect on the host document, so it does belong
+    // in an effect. Handing the request back here is what makes it fire once.
+    useEffect(() => {
+        if (focusPinId === null)
+            return;
+        scrollToAnchor(pins, focusPinId);
+        onFocusHandled?.();
+    }, [focusPinId, pins, onFocusHandled]);
+    // The deep link's own scroll, which cannot use the effect above: the id is
+    // known before the list is, so this waits for the fetch instead of firing
+    // against an empty array. The ref is what keeps it a one-shot - the list is
+    // re-read after every reply, and re-scrolling the reviewer's page each time
+    // would fight them for control of the viewport. A ref rather than state
+    // because "has this side effect run" is not something a render reads.
+    const deepLinkScrolled = useRef(false);
+    useEffect(() => {
+        if (deepLinkPinId === null || deepLinkScrolled.current || !loaded)
+            return;
+        deepLinkScrolled.current = true;
+        scrollToAnchor(pins, deepLinkPinId);
+    }, [deepLinkPinId, loaded, pins]);
+    // An open item that has no marker to hang its thread off. Two ways to get
+    // here, and both must still show the thread: the selector no longer
+    // resolves because the markup changed since the pin was made, or the item
+    // is a general note about the page and never had an anchor. Silently doing
+    // nothing is the one unacceptable outcome - a reviewer who followed a link
+    // to a report has to be told what happened to it.
+    const openItem = pins.find((p) => p.id === openPinId) ?? null;
+    const stranded = openItem !== null && !placed.some((p) => p.item.id === openItem.id)
+        ? openItem
+        : null;
+    // A deep link naming an item this page's list does not contain at all: it
+    // was filed on another page, or it has since been deleted. Dismissable
+    // because it is a dead end, unlike a stranded thread which can still be
+    // replied to.
+    const [missingDismissed, setMissingDismissed] = useState(false);
+    const showMissing = deepLinkPinId !== null &&
+        loaded &&
+        !missingDismissed &&
+        !pins.some((p) => p.id === deepLinkPinId);
+    function markRead(item) {
+        setRead((current) => ({ ...current, [item.id]: item.replies.length }));
+    }
+    async function onCaptureClick(e) {
+        const itemId = capturingFor;
+        const target = elementUnder(e.currentTarget, e.clientX, e.clientY);
+        // Disarm first, whatever happens next. A capture that fails must not leave
+        // the reviewer trapped in an overlay with no way back to their draft.
+        setCapturingFor(null);
+        if (!target || itemId === null)
+            return;
+        const shot = await captureElement(target);
+        if (shot === null)
+            return;
+        setAttachments((current) => ({ ...current, [itemId]: shot }));
+    }
+    function onPickClick(e) {
+        const target = elementUnder(e.currentTarget, e.clientX, e.clientY);
+        if (!target)
+            return;
+        const selector = buildSelector(target);
+        if (!selector) {
+            onPickingChange(false);
+            return;
+        }
+        const { offsetX, offsetY } = offsetWithin(target, e.clientX, e.clientY);
+        setDraft({ selector, offsetX, offsetY, x: e.clientX, y: e.clientY });
+        onPickingChange(false);
+    }
+    return (_jsxs(_Fragment, { children: [picking ? _jsx(Picker, { theme: theme, onPick: onPickClick }) : null, capturingFor !== null ? (_jsx(Picker, { theme: theme, onPick: (e) => void onCaptureClick(e) })) : null, placed.map(({ item, at, departing }) => (_jsx(PinMarker, { item: item, at: at, theme: theme, departing: departing, dimmed: item.status === "DONE", focused: openPinId === item.id, unread: item.replies.length > (read[item.id] ?? -1), outdated: isOutdated(item, config), attachment: attachments[item.id] ?? null, onRequestCapture: () => setCapturingFor(item.id), onClearAttachment: () => setAttachments(({ [item.id]: _dropped, ...rest }) => rest), apiUrl: config.apiUrl, open: openPinId === item.id, onToggle: () => {
+                    markRead(item);
+                    setOpenPinId((id) => (id === item.id ? null : item.id));
+                }, client: client, organizationId: organizationId, onChanged: reload }, item.id))), stranded ? (_jsx("div", { "data-testid": `pin-stranded-${stranded.id}`, "data-bitvea-pin-surface": "", style: {
+                    position: "fixed",
+                    left: "50%",
+                    top: "50%",
+                    transform: "translate(-50%, -50%)",
+                    // The same rung an anchored thread rises to when it opens: this is
+                    // one of those, minus a marker to hang off. See `layers`.
+                    zIndex: layers.thread,
+                }, children: _jsx(PinThread, { item: stranded, theme: theme, client: client, organizationId: organizationId, onChanged: reload, outdated: isOutdated(stranded, config), attachment: attachments[stranded.id] ?? null, onRequestCapture: () => setCapturingFor(stranded.id), onClearAttachment: () => setAttachments(({ [stranded.id]: _dropped, ...rest }) => rest), apiUrl: config.apiUrl, position: { position: "relative" }, note: stranded.pin
+                        ? "The element this was pinned to is gone, so the thread is shown here instead."
+                        : "A note about the page as a whole, so it has no pin.", onClose: () => setOpenPinId(null) }) })) : null, showMissing ? (_jsxs("div", { role: "alert", "data-testid": "pin-missing", style: {
+                    position: "fixed",
+                    left: "50%",
+                    top: spacing.md,
+                    transform: "translateX(-50%)",
+                    zIndex: layers.alert,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: spacing.xs,
+                    padding: `${spacing.xs} ${spacing.sm}`,
+                    maxWidth: VIEWPORT_MAX_WIDTH,
+                    background: theme.colors.canvas,
+                    border: `1px solid ${theme.colors.hairline}`,
+                    borderRadius: radii.lg,
+                    boxShadow: theme.shadows.popover,
+                    ...typeScale.bodySm,
+                    color: theme.colors.body,
+                }, children: [_jsx("span", { children: "That feedback is not on this page any more." }), _jsx("button", { type: "button", "data-testid": "pin-missing-dismiss", onClick: () => setMissingDismissed(true), style: {
+                            padding: 0,
+                            border: "none",
+                            background: "transparent",
+                            // `body`, not `mute`: this is the control that gets rid of the
+                            // alert, and 3.4:1 is not a control.
+                            color: theme.colors.body,
+                            cursor: "pointer",
+                            ...typeScale.bodySmStrong,
+                            outline: "revert",
+                        }, children: "Dismiss" })] })) : null, draft ? (_jsx(PinComposer, { draft: draft, theme: theme, client: client, config: config, organizationId: organizationId, onDone: () => {
+                    setDraft(null);
+                    // The capture belonged to the report that just landed.
+                    setAttachments(({ [DRAFT_ATTACHMENT]: _sent, ...rest }) => rest);
+                    void reload();
+                }, attachment: attachments[DRAFT_ATTACHMENT] ?? null, onRequestCapture: () => setCapturingFor(DRAFT_ATTACHMENT), onClearAttachment: () => setAttachments(({ [DRAFT_ATTACHMENT]: _dropped, ...rest }) => rest) })) : null] }));
+}
+/**
+ * Scroll the element one item is pinned to into the middle of the viewport.
+ * A no-op for an item this page's list does not have, and for one whose
+ * selector no longer resolves - in both cases the layer has already decided
+ * what to show instead, and scrolling to nowhere would only move the page
+ * under the reviewer for no reason.
+ */
+function scrollToAnchor(pins, id) {
+    const item = pins.find((p) => p.id === id);
+    const target = item?.pin ? resolveSelector(item.pin.selector) : null;
+    target?.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+/**
+ * Ask the document what is under a point, with the overlay taken out of the
+ * way. `elementFromPoint` returns the TOPMOST element, which is the overlay
+ * itself, so it has to be hidden for the duration of the hit test or every pin
+ * anchors to the picker rather than to the page.
+ */
+function elementUnder(overlay, clientX, clientY) {
+    const previousVisibility = overlay.style.visibility;
+    overlay.style.visibility = "hidden";
+    const target = document.elementFromPoint(clientX, clientY);
+    overlay.style.visibility = previousVisibility;
+    if (!target ||
+        target === document.body ||
+        target === document.documentElement ||
+        // Never anchor to the toolbar's own UI.
+        target.closest("[data-bitvea-feedback-toolbar]") !== null) {
+        return null;
+    }
+    return target;
+}
+/* ── Picking ──────────────────────────────────────────────────────────── */
+/**
+ * The picking overlay, plus the dashed accent outline around whatever is under
+ * the cursor. The outline is what makes picking predictable: the overlay
+ * swallows every hover the page would otherwise show, so without it the
+ * reviewer is clicking blind and finds out what they hit only afterwards.
+ */
+function Picker({ theme, onPick, }) {
+    const [box, setBox] = useState(null);
+    return (_jsx("div", { "data-testid": "pin-picker", onClick: onPick, onMouseMove: (e) => {
+            const target = elementUnder(e.currentTarget, e.clientX, e.clientY);
+            setBox(target ? target.getBoundingClientRect() : null);
+        }, onMouseLeave: () => setBox(null), style: {
+            position: "fixed",
+            inset: 0,
+            // Below the bar, which is what makes the pin tool cancellable. This
+            // overlay used to sit above it: it covered the whole bar, `elementUnder`
+            // refuses anything inside the toolbar, and `onPickClick` answered a
+            // click on the pin button with `if (!target) return` - so once picking
+            // was armed there was no way out of it at all. See `layers`.
+            zIndex: layers.picker,
+            cursor: "crosshair",
+            // Faint, so the page underneath is still readable while choosing.
+            background: theme.colors.pickTint,
+        }, children: box ? (_jsx("div", { "data-testid": "pin-picker-outline", "aria-hidden": "true", style: {
+                position: "fixed",
+                left: `${box.left}px`,
+                top: `${box.top}px`,
+                width: `${box.width}px`,
+                height: `${box.height}px`,
+                // Ink, not the accent. The outline is chrome - it says "this is
+                // what you are about to pin" - and the accent's one remaining job
+                // is being the pin itself.
+                border: `2px dashed ${theme.colors.ink}`,
+                borderRadius: radii.sm,
+                background: theme.colors.inkSoft,
+                // And ink alone is not enough, because this is the ONE surface in
+                // the package painted directly onto the host's own content rather
+                // than onto a canvas of ours. The toolbar's theme follows the
+                // reviewer's OS, not the host page: a dark-mode reviewer on a
+                // light-only staging site gets `ink` = #ffffff drawn over white,
+                // and the outline vanishes at the exact moment it has to be
+                // trusted. `markerRing` is the palette's opposite pole (#ffffff
+                // light, #0a0a0a dark), so sandwiching the dashes between two
+                // 1px rings of it leaves a legible edge whichever way the host
+                // page and the toolbar's theme disagree.
+                boxShadow: `0 0 0 1px ${theme.colors.markerRing}, inset 0 0 0 1px ${theme.colors.markerRing}`,
+                pointerEvents: "none",
+            } })) : null }));
+}
+/* ── A placed pin, and its thread ─────────────────────────────────────── */
+function PinMarker({ item, at, theme, departing, dimmed, focused, unread, open, onToggle, client, organizationId, onChanged, outdated, attachment, onRequestCapture, onClearAttachment, apiUrl, }) {
+    // The thread outlives `open` by one exit, so the reviewer sees it leave
+    // rather than blink out. `open` itself is already false by then - only the
+    // DOM removal is deferred. See `usePresence`.
+    //
+    // `exitFor(fast)` rather than `instant` spelled out: the thread enters at
+    // `surfaceMotion`'s default step, and this timer has to be the same value
+    // that helper puts in the transition. They agree today at 80ms; derived off
+    // one rule they cannot stop agreeing.
+    const thread = usePresence(open, exitFor(motion.duration.fast));
+    // A cross-fade is not vestibular motion, so reduced motion keeps it and only
+    // shortens it - DESIGN.md's Reduced Motion rule.
+    const reduced = usePrefersReducedMotion();
+    // WHERE THE THREAD OPENS: which side of the marker, and then inside the
+    // viewport either way.
+    //
+    // There never was a right-edge clamp here: the card is `left: 16px` inside a
+    // zero-width wrapper parked at the anchor, so a pin in the right third of a
+    // page has always hung its thread off the edge - `maxWidth` caps the WIDTH
+    // and says nothing about the OFFSET. At 280px that was survivable and at
+    // issue #20's 440px it is 160px worse, so the widening is what forces this.
+    //
+    // Two decisions, and they are deliberately not the same one. SIDE is a
+    // preference: right of the marker, unless the card does not fit there and
+    // the left is roomier. CLAMP is a guarantee: wherever it ends up, the card
+    // stays between the two viewport gutters. Choosing a side alone is what a
+    // flip on its own gets wrong - on a viewport narrower than the card plus its
+    // offsets neither side fits, and "the roomier one" then picks which EDGE to
+    // hang off rather than avoiding both. Flipping left is the worse of those
+    // two failures as well, because the half that goes off-screen is the one
+    // holding every avatar, author name and the first word of every line.
+    //
+    // `width` is what the card will actually render at, `maxWidth` included:
+    // `calc(100vw - 32px)` is the same two gutters, so on a narrow viewport the
+    // card narrows and the clamp narrows with it rather than pushing a card it
+    // thinks is 440px wide off the left edge.
+    //
+    // All of it is LAYOUT - one `left`, in the wrapper's own coordinates - and
+    // deliberately nothing else. The wrapper stays transform-free, which is the
+    // rule this whole branch is built on: a transform on it would become the
+    // containing block for every `position: fixed` marker on the page. See the
+    // note on `zIndex` below and `surfaceMotion`'s placement inside `PinThread`.
+    const cardWidth = Math.min(THREAD_WIDTH, window.innerWidth - VIEWPORT_GUTTER * 2);
+    const roomRight = window.innerWidth - VIEWPORT_GUTTER - (at.x + THREAD_ANCHOR_OFFSET);
+    const roomLeft = at.x - THREAD_ANCHOR_OFFSET - VIEWPORT_GUTTER;
+    const preferredLeft = roomRight < cardWidth && roomLeft > roomRight
+        ? at.x - THREAD_ANCHOR_OFFSET - cardWidth
+        : at.x + THREAD_ANCHOR_OFFSET;
+    // `max` inside `min`, so the left gutter wins on a viewport too narrow for
+    // both - the card is then flush left with its right edge inside the screen,
+    // which is the only arrangement in which all of it can be read.
+    const cardLeft = Math.min(Math.max(preferredLeft, VIEWPORT_GUTTER), window.innerWidth - VIEWPORT_GUTTER - cardWidth);
+    return (_jsxs("div", { "data-bitvea-pin-surface": "", 
+        // See the note beside `pointerEvents` below: the fade is for eyes only.
+        inert: departing, style: {
+            position: "fixed",
+            left: at.x,
+            top: at.y,
+            // This wrapper is `position: fixed` with a z-index, which makes it a
+            // stacking context whatever else is declared on it - so the rung the
+            // THREAD paints at is the one written here, not one the thread could
+            // set on itself. Pinned at `marker` for every pin, an open thread
+            // therefore rendered under the inbox sheet and under the composer, and
+            // `layers` in tokens.ts documented an order that was quietly untrue for
+            // every anchored thread on the page (issue #23).
+            //
+            // A closed marker is page state, so it stays at `marker`, below any
+            // open surface. An open one is the surface the reviewer is reading, and
+            // rises with the thread it is holding.
+            //
+            // Keyed on `mounted` rather than on `open` so it also holds for the
+            // 80ms the thread spends leaving. On `open` the rung dropped on the
+            // closing click, and a thread that ducks behind the inbox sheet and
+            // only then fades is a worse exit than no exit at all.
+            zIndex: thread.mounted ? layers.thread : layers.marker,
+            // A marker on its way off the page is a picture of a pin, not a pin:
+            // clicking it would open a thread for an item that is no longer here,
+            // and a screen reader should not be offered a pin with 120ms left to
+            // live. `inert` is the one platform feature that says exactly that -
+            // out of the accessibility tree, out of the tab order, unclickable -
+            // and it is the reason this is not `aria-hidden` on the button. That
+            // spelling was a WCAG violation waiting for one ordinary sequence:
+            // resolve from the thread, then click the MARKER to close it, and
+            // `aria-hidden` lands on the element that currently holds focus.
+            // Becoming inert sheds that focus by specification instead.
+            //
+            // `pointerEvents` stays as well, for a browser old enough to ignore
+            // `inert`: there the fade is merely unclickable rather than fully
+            // inert, which is the failure worth having.
+            ...(departing ? { pointerEvents: "none" } : {}),
+        }, children: [_jsxs("button", { type: "button", "data-testid": `pin-${item.id}`, "data-bitvea-pin": item.id, "aria-label": `Feedback from ${displayNameFor(item.author.name, item.author.email)}: ${item.body.slice(0, 60)}`, onClick: onToggle, style: {
+                    position: "absolute",
+                    // The teardrop's point is its bottom-left corner, and that corner is
+                    // what sits on the anchor - so the marker hangs above and to the
+                    // right of the exact pixel that was clicked, the way a map pin does.
+                    transform: "translate(0, -100%)",
+                    width: sizes.icon,
+                    height: sizes.icon,
+                    // The 2px ring is a border, and the marker's bottom-left corner is
+                    // what has to sit on the pixel that was clicked. Under a host page's
+                    // default `content-box` this box would be 32px and the point would
+                    // miss by 4px in both axes.
+                    boxSizing: "border-box",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: 0,
+                    // 4px, the radius scale's smallest step, replacing an invented 3px.
+                    borderRadius: `50% 50% 50% ${radii.xs}`,
+                    border: `2px solid ${theme.colors.markerRing}`,
+                    // The one place the brand orange survives. A pin has to be findable
+                    // over arbitrary host content - somebody else's page, in colours
+                    // nobody here chose - and it is the object that means "BitVea
+                    // Feedback is on this page". Everything else in the toolbar gave the
+                    // accent back; this kept it, and the mesh gradient is deliberately
+                    // NOT substituted here because that would miniaturise and crop it.
+                    background: accent.gradient,
+                    color: accent.onAccent,
+                    ...typeScale.caption,
+                    fontWeight: 500,
+                    boxShadow: focused
+                        ? `${theme.shadows.focusRing}, ${theme.shadows.marker}`
+                        : theme.shadows.marker,
+                    // Resolved-but-shown pins stay legible while reading as settled. On
+                    // the marker and not on the wrapper above, because `opacity`
+                    // composites the whole subtree it is set on: at 45% up there it
+                    // painted the open thread translucent too, and the host page's table
+                    // rows and body copy read straight through the card (issue #23).
+                    // The unread dot and the focus ring are inside this box and dim with
+                    // it, which is what a settled pin should do.
+                    //
+                    // Zero while departing, which is the same declaration doing the
+                    // fade off the page: one property, two jobs, and one transition
+                    // below covering both.
+                    opacity: departing ? 0 : dimmed ? 0.45 : 1,
+                    // Half of the resolve/reopen acknowledgement, and the cheap half: the
+                    // marker fades between its two weights instead of snapping, so a pin
+                    // resolved from its own thread is visibly answered on the page as
+                    // well as in the badge. `inOut` for the dim, because the marker is
+                    // not moving - one property changes on a stationary element - and
+                    // `exit` for the departure, which is a leaving surface.
+                    //
+                    // On the BUTTON, with the opacity it belongs to, and never hoisted to
+                    // the wrapper: a transition on `opacity` up there would composite the
+                    // thread for 120ms every time a pin resolves, which is issue #23 with
+                    // a timer on it. See the rule at the head of motion.ts.
+                    transition: transition(["opacity"], motion.duration.fast, departing ? motion.easing.exit : motion.easing.inOut, reduced),
+                    cursor: "pointer",
+                    outline: "revert",
+                }, children: [initialsFor(item.author.name, item.author.email), unread ? (_jsx("span", { "data-testid": `pin-unread-${item.id}`, "aria-hidden": "true", style: {
+                            position: "absolute",
+                            // 8px of dot inside a 2px ring is a 12px object, hung 4px
+                            // outside the marker on both axes - all three on the 4px base,
+                            // where 9px and -3px were on none of it.
+                            top: `-${spacing.xxs}`,
+                            right: `-${spacing.xxs}`,
+                            width: sizes.dot,
+                            height: sizes.dot,
+                            borderRadius: radii.pill,
+                            background: theme.colors.ink,
+                            border: `2px solid ${theme.colors.markerRing}`,
+                            boxSizing: "content-box",
+                        } })) : null] }), thread.mounted ? (_jsx(PinThread, { item: item, theme: theme, client: client, organizationId: organizationId, onChanged: onChanged, outdated: outdated, attachment: attachment, onRequestCapture: onRequestCapture, onClearAttachment: onClearAttachment, apiUrl: apiUrl, 
+                // Beside the marker rather than over it, so the thread never covers
+                // the element the pin is talking about.
+                //
+                // Still a child of the wrapper, and that is the deliberate half:
+                // `data-bitvea-pin-surface` up there is what the outside-pointerdown
+                // dismissal matches, and these coordinates are relative to that box.
+                // Hoisting the thread out to escape the wrapper's stacking context
+                // would need a second dismissal attribute and its own viewport
+                // coordinates; moving the wrapper's z-index with `open` gets the same
+                // layering with neither.
+                //
+                // ONE `left`, in the wrapper's coordinates, for all three cases -
+                // right of the marker, left of it, and clamped against either
+                // gutter. A `right` for the flipped case would have been the shorter
+                // spelling and is the wrong shape: two properties that mean the same
+                // thing need the origin below to branch with them, and neither can
+                // express "as far left as the marker allows, but no further than the
+                // gutter" at all. `cardLeft` is a viewport coordinate; the wrapper
+                // sits at `at.x`, so the offset is the difference, negative whenever
+                // the card ends up left of its own marker.
+                position: {
+                    position: "absolute",
+                    left: `${cardLeft - at.x}px`,
+                    top: `${THREAD_ANCHOR_OFFSET}px`,
+                }, 
+                // The growth origin is the marker, expressed in the card's own
+                // coordinates - so it is the same subtraction the other way round,
+                // and it stays right through the flip AND through the clamp without
+                // a second copy of either decision. A clamped card grows from a point
+                // outside its own box, which is legal CSS and is exactly what
+                // "originates at the thing it belongs to" means when the card had to
+                // move to stay on screen. Same derivation as the composer's.
+                origin: `${at.x - cardLeft}px -${THREAD_ANCHOR_OFFSET}px`, leaving: thread.leaving })) : null] }));
+}
+/**
+ * One item's thread: the report, who last moved its status and when, the
+ * replies, and the box for adding another.
+ *
+ * Split out of the marker because a thread outlives its marker. A pin whose
+ * selector no longer resolves has nothing to hang off, and a general note
+ * never had an anchor at all, yet both have to be readable and repliable - so
+ * the thread takes its position as a prop and the layer decides whether that
+ * is "beside a marker" or "in the middle of the viewport".
+ */
+function PinThread({ item, theme, client, organizationId, onChanged, position, note, onClose, origin, leaving = false, outdated = false, attachment, onRequestCapture, onClearAttachment, apiUrl, }) {
+    const [reply, setReply] = useState("");
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const [moving, setMoving] = useState(false);
+    // Whether the composer band draws its focus ring. The band is a `div`, so
+    // the focus state of the field inside it has to be tracked here: there is no
+    // stylesheet in this package to hold a `:focus-within` rule, which is the
+    // same reason `RowButton` below tracks its own three states.
+    const [composing, setComposing] = useState(false);
+    // The formatting bar is closed until asked for: it is the rarer need, and a
+    // row of markup buttons above an empty box is chrome a reviewer has to read
+    // past to write one sentence.
+    const [formatting, setFormatting] = useState(false);
+    const entered = useEntered();
+    const reduced = usePrefersReducedMotion();
+    // Which replies were already in this thread when it opened. Only the ones
+    // that land while the reviewer is reading get the arrival treatment - see
+    // `useNewSinceMount`.
+    const isNew = useNewSinceMount(item.replies.map((r) => r.id));
+    // The one imperative handle in this file, and auto-growth is why: the height
+    // the text wants is a MEASUREMENT (`scrollHeight`), not something a render
+    // can derive from state. Touched only in handlers - reading `.current`
+    // during render is what `react-hooks/refs` forbids in this repo.
+    const replyBox = useRef(null);
+    /**
+     * Fit the reply box to its text, up to `REPLY_MAX_HEIGHT`.
+     *
+     * `height` is a LAYOUT property and is set instantly, never transitioned -
+     * DESIGN.md's Motion section in as many words, and the reason the composer
+     * can grow at all inside a card floating over somebody else's page.
+     *
+     * The `auto` first is not a flourish: `scrollHeight` reports the height the
+     * box already HAS whenever that is the larger of the two, so without it the
+     * field could only ever grow and a deleted paragraph left a hole.
+     */
+    async function send() {
+        const trimmed = reply.trim();
+        if (trimmed.length === 0)
+            return;
+        setSending(true);
+        setError(null);
+        try {
+            await client.reply(organizationId, item.id, trimmed, attachment ?? undefined);
+            setReply("");
+            // Cleared only after the call resolves. Dropping it optimistically would
+            // lose the picture on a failed send, and the picture is the expensive
+            // half of what the reviewer just did.
+            onClearAttachment();
+            // The field shrinks back with its content. React does not own `height`
+            // here - it was set imperatively - so clearing the value alone would
+            // leave a six-line box holding a placeholder.
+            grow(replyBox.current);
+            onChanged();
+        }
+        catch {
+            setError("Could not post that reply.");
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    /**
+     * The only state change the toolbar offers, and the only one it shows.
+     *
+     * A reviewer's surface has two states for a comment: it is on the page, or
+     * it is resolved. The thread used to render the full triage vocabulary
+     * instead - a status chip, plus a mono line naming who moved it and when -
+     * and that is a queue-owner's model shown to somebody who is looking at a
+     * bug on a page. It cost two rows of chrome above every report and asked a
+     * reviewer to distinguish "open" from "in review" with no way to act on the
+     * difference.
+     *
+     * `IN_REVIEW` is not gone: it is still the dashboard's, still in the API,
+     * still settable over MCP. It simply reads as unresolved here, which is what
+     * a reviewer can actually do something about. That is why this sends `DONE`
+     * and `OPEN` rather than a status the caller chose - and why `resolved` is
+     * the one derived flag the card renders from.
+     */
+    async function moveTo(status) {
+        setMoving(true);
+        setError(null);
+        try {
+            await client.setStatus(organizationId, item.id, status);
+            onChanged();
+        }
+        catch (err) {
+            setError(err instanceof ToolbarApiError && err.code === "not_invited_to_project"
+                ? "You are not invited to this project any more."
+                : "Could not change the status.");
+        }
+        finally {
+            setMoving(false);
+        }
+    }
+    const resolved = item.status === "DONE";
+    const canSend = reply.trim().length > 0;
+    // When it was written, and nothing else.
+    //
+    // This line used to carry the viewport and the git branch too. Both are real
+    // facts the DTO carries, and both are for the wrong reader: the toolbar is
+    // the surface a CUSTOMER's reviewer uses, and "1512x916 · feat/pricing-
+    // refresh" is noise to somebody who wants to say a button is in the wrong
+    // place. The dashboard is where feedback is acted on, and it keeps every one
+    // of them - with the branch and the commit as links, which is a thing only
+    // that surface can offer.
+    //
+    // Not a privacy boundary, and it must never be described as one. The API
+    // still sends `gitBranch`, `gitCommit`, `userAgent` and the viewport to any
+    // reviewer who can read the item; this is a decision about what is worth a
+    // reader's attention, and a curious one can still read the rest in devtools.
+    // Withholding them would be an API change, deliberately not made here.
+    //
+    // The absolute stamp and the browser string stay in the `title` below. They
+    // cost nothing until somebody hovers, and "when exactly" is a question a
+    // reviewer does occasionally have.
+    const rootFacts = [relativeStamp(item.createdAt)];
+    const rootTitle = [formatStamp(item.createdAt), item.userAgent]
+        .filter((fact) => typeof fact === "string" && fact !== "")
+        .join(" · ");
+    return (_jsxs("section", { "data-testid": `pin-thread-${item.id}`, style: {
+            // `resetBox` first: a `<section>` is a block a host can give margin,
+            // padding, a border and a ground, and this one carries every one of
+            // those itself.
+            ...resetBox,
+            ...position,
+            // Issue #20's ~440px content width, from the one token the composer
+            // shares - see `sizes.thread`. At 280px every reply wrapped after four
+            // or five words and a fourteen-message thread was a very tall, very
+            // narrow column.
+            width: sizes.thread,
+            maxWidth: VIEWPORT_MAX_WIDTH,
+            // The list scrolls; the card does not grow past the viewport. See
+            // `sizes.threadMaxHeight`.
+            maxHeight: sizes.threadMaxHeight,
+            // See the note on `boxSizing` in FeedbackToolbar.tsx: the host may
+            // ship no CSS reset, and a width plus padding plus a border is a
+            // wider card than the one asked for, over the element it is
+            // discussing.
+            boxSizing: "border-box",
+            // Three stacked regions - header, scrolling list, composer footer - so
+            // the padding belongs to each of them and the hairline dividers between
+            // them can run the full width of the card.
+            display: "flex",
+            flexDirection: "column",
+            background: theme.colors.canvas,
+            border: `1px solid ${theme.colors.hairline}`,
+            borderRadius: radii.lg,
+            boxShadow: theme.shadows.popover,
+            ...typeScale.bodySm,
+            color: theme.colors.body,
+            // Grows out of its marker and shrinks back into it. On the thread
+            // itself rather than on the wrapper it shares with the marker, because
+            // a transform on that wrapper creates a stacking context by exactly the
+            // mechanism the old dim did - issue #23 through the other door - and
+            // would scale the marker along with the card. Nothing inside this
+            // section has to stack independently of it.
+            ...surfaceMotion({ visible: entered, leaving, reduced, origin }),
+        }, children: [onClose ? (_jsx("header", { style: {
+                    ...resetBox,
+                    flex: "0 0 auto",
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    padding: `${spacing.xs} ${spacing.xs} 0`,
+                }, children: _jsx(RowButton, { theme: theme, label: "Close thread", testId: `pin-thread-close-${item.id}`, onClick: onClose, children: _jsx(CloseIcon, {}) }) })) : null, _jsxs("div", { style: {
+                    flex: "1 1 auto",
+                    minHeight: 0,
+                    overflowY: "auto",
+                    overscrollBehavior: "contain",
+                }, children: [note ? (_jsx("p", { "data-testid": `pin-note-${item.id}`, style: {
+                            ...resetBox,
+                            margin: `${spacing.sm} ${spacing.sm} 0`,
+                            padding: spacing.xs,
+                            borderRadius: radii.sm,
+                            background: theme.colors.canvasSoft2,
+                            color: theme.colors.body,
+                            ...typeScale.caption,
+                        }, children: note })) : null, _jsx(MessageRow, { theme: theme, testId: `pin-message-${item.id}`, name: item.author.name, email: item.author.email, body: item.body, facts: rootFacts, factsTitle: rootTitle, badge: outdated ? _jsx(OutdatedChip, { theme: theme, id: item.id }) : undefined, 
+                        // The root's actions are always on, which is issue #20's own split:
+                        // they are the thread's actions as much as the message's, and
+                        // resolve in particular is the most consequential control in the
+                        // card. The replies reveal theirs.
+                        alwaysShowActions: true, actions: _jsxs(_Fragment, { children: [_jsx(CopyButton, { theme: theme, label: "Copy link to this thread", text: buildDeepLink(item.pageUrl, item.id), icon: _jsx(LinkIcon, {}) }), _jsx(CopyButton, { theme: theme, label: "Copy message", text: item.body, icon: _jsx(CopyIcon, {}) }), _jsx(RowButton, { theme: theme, 
+                                    // The label flips rather than the glyph: a check that means
+                                    // "resolve" and a check that means "reopen" are the same
+                                    // picture, and nothing may become unreachable - including a
+                                    // resolution somebody wants back.
+                                    label: resolved ? "Reopen" : "Resolve", srText: resolved ? "Reopen" : "Resolve", testId: `pin-resolve-${item.id}`, tone: resolved ? "ink" : "ghost", disabled: moving, onClick: () => void moveTo(resolved ? "OPEN" : "DONE"), children: _jsx(CheckIcon, {}) })] }) }), item.replies.map((r, index) => (_jsx(MessageRow, { theme: theme, testId: `pin-message-${r.id}`, name: r.author.name, email: r.author.email, body: r.body, facts: [
+                            // "via agent" before the stamp, because it qualifies WHO is
+                            // speaking rather than when. Written by an agent through MCP in
+                            // this person's name, and said plainly rather than hidden:
+                            // CLAUDE.md section 14, and the dashboard spells it the same way.
+                            ...(r.viaAgent ? ["via agent"] : []),
+                            relativeStamp(r.createdAt),
+                        ], factsTitle: formatStamp(r.createdAt), 
+                        // Resolved against the API, because the toolbar runs on the
+                        // CUSTOMER'S origin and the DTO's path is relative to ours - a
+                        // bare `<img src="/api/...">` would ask the reviewed site for a
+                        // picture it has never heard of.
+                        //
+                        // Only a path is joined. A value that already names its own source
+                        // is passed through: the preview route's fake transport echoes the
+                        // captured `data:` URL straight back, having no store to put it
+                        // in, and prefixing that would produce a nonsense src on the one
+                        // page built to review this surface.
+                        image: r.screenshotUrl
+                            ? {
+                                url: r.screenshotUrl.startsWith("/")
+                                    ? `${apiUrl}${r.screenshotUrl}`
+                                    : r.screenshotUrl,
+                                alt: `Screenshot attached by ${displayNameFor(r.author.name, r.author.email)}`,
+                            }
+                            : undefined, 
+                        // A hairline above the first reply, which is the divider between
+                        // the root message and the conversation. A border on the first
+                        // child rather than a `<hr>` or a bottom border on the root: one
+                        // declaration, and it simply does not exist when there are no
+                        // replies.
+                        divided: index === 0, arriving: isNew(r.id), actions: _jsx(CopyButton, { theme: theme, label: "Copy reply", text: r.body, icon: _jsx(CopyIcon, {}) }) }, r.id)))] }), _jsxs("div", { style: {
+                    ...resetBox,
+                    flex: "0 0 auto",
+                    padding: spacing.sm,
+                    borderTop: `1px solid ${theme.colors.hairline}`,
+                }, children: [error ? (_jsx("p", { role: "alert", style: {
+                            ...resetBox,
+                            margin: `0 0 ${spacing.xxs}`,
+                            color: theme.colors.error,
+                            ...typeScale.caption,
+                        }, children: error })) : null, _jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: spacing.xs,
+                            padding: spacing.xs,
+                            borderRadius: radii.sm,
+                            background: theme.colors.canvasSoft2,
+                            // The frame is gone, so this ring is the ONLY focus indication the
+                            // composer has. Not a nicety: a keyboard reviewer who cannot see
+                            // where focus is cannot use the card. Not transitioned, per
+                            // DESIGN.md - a ring that fades in reads as lag on the one
+                            // interaction that has to feel immediate.
+                            boxShadow: composing ? theme.shadows.focusRing : "none",
+                        }, children: [attachment ? (_jsxs("div", { "data-testid": `pin-attachment-${item.id}`, style: {
+                                    position: "relative",
+                                    alignSelf: "flex-start",
+                                    borderRadius: radii.sm,
+                                    border: `1px solid ${theme.colors.hairline}`,
+                                    overflow: "hidden",
+                                    lineHeight: 0,
+                                }, children: [_jsx("img", { src: attachment, alt: "The element you captured, attached to this reply", style: {
+                                            display: "block",
+                                            maxWidth: "120px",
+                                            maxHeight: "80px",
+                                        } }), _jsx("button", { type: "button", "aria-label": "Remove screenshot", title: "Remove screenshot", "data-testid": `pin-attachment-remove-${item.id}`, onClick: onClearAttachment, style: {
+                                            ...resetBox,
+                                            position: "absolute",
+                                            top: "2px",
+                                            right: "2px",
+                                            width: "16px",
+                                            height: "16px",
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: radii.sm,
+                                            cursor: "pointer",
+                                            // Its own ground, because it sits on an arbitrary screenshot
+                                            // and cannot borrow contrast from a colour it does not know.
+                                            background: theme.colors.ink,
+                                            color: theme.colors.onInk,
+                                            lineHeight: 1,
+                                        }, children: _jsx(CloseIcon, {}) })] })) : null, _jsx("textarea", { ref: replyBox, value: reply, onChange: (e) => {
+                                    setReply(e.target.value);
+                                    grow(e.target);
+                                }, onFocus: () => setComposing(true), onBlur: () => setComposing(false), 
+                                // Enter sends; Shift+Enter and Alt+Enter write a newline. The
+                                // grammar every comment box a reviewer has ever used already has.
+                                //
+                                // `isComposing` is the load-bearing guard, not a nicety: an IME
+                                // uses Enter to COMMIT a candidate, so a reviewer typing Japanese
+                                // or Chinese would have posted a half-finished reply on the first
+                                // Enter they pressed.
+                                onKeyDown: (event) => {
+                                    if (event.key !== "Enter")
+                                        return;
+                                    if (event.nativeEvent.isComposing)
+                                        return;
+                                    if (event.shiftKey || event.altKey)
+                                        return;
+                                    event.preventDefault();
+                                    if (sending || !canSend)
+                                        return;
+                                    void send();
+                                }, rows: 1, placeholder: "Add a reply\u2026", "aria-label": "Reply", "data-testid": `pin-reply-${item.id}`, maxLength: FEEDBACK_BODY_MAX, style: {
+                                    // The band draws the ground; this is the text and nothing else.
+                                    ...resetBox,
+                                    display: "block",
+                                    width: "100%",
+                                    // One row at rest, growing with the text. Capped so a pasted
+                                    // essay scrolls inside the composer instead of pushing the
+                                    // control row out of the card - which is the whole point of the
+                                    // row being fixed.
+                                    minHeight: typeScale.bodySm.lineHeight,
+                                    maxHeight: `${REPLY_MAX_HEIGHT}px`,
+                                    overflowY: "auto",
+                                    // `none`, and `grow` above is the replacement. The UA default is
+                                    // `both`, and `vertical` was a real handle a reviewer could drag
+                                    // the box out through the card's border with.
+                                    resize: "none",
+                                    ...typeScale.bodySm,
+                                    color: theme.colors.ink,
+                                    background: "transparent",
+                                    // The BAND shows focus, so a second ring here would draw the
+                                    // same state twice.
+                                    outline: "none",
+                                } }), _jsxs("div", { style: {
+                                    position: "relative",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.xxs,
+                                    flex: "0 0 auto",
+                                }, children: [formatting ? (_jsx(FormatBar, { theme: theme, onApply: (mark) => {
+                                            const field = replyBox.current;
+                                            if (!field)
+                                                return;
+                                            const next = toggleMark(reply, field.selectionStart, field.selectionEnd, mark);
+                                            setReply(next.text);
+                                            // The selection has to survive the round trip or the button is
+                                            // unusable twice in a row: React re-renders with the new value
+                                            // and the browser puts the caret at the end, so it is restored
+                                            // after the paint rather than before it.
+                                            requestAnimationFrame(() => {
+                                                field.focus();
+                                                field.setSelectionRange(next.selectionStart, next.selectionEnd);
+                                                grow(field);
+                                            });
+                                        } })) : null, _jsx(RowButton, { theme: theme, label: "Take a screenshot", testId: `pin-attach-${item.id}`, 
+                                        // Ink while one is attached, so the row says the reply is
+                                        // carrying something without the reviewer scrolling up to the
+                                        // thumbnail to check.
+                                        tone: attachment ? "ink" : "ghost", onClick: onRequestCapture, children: _jsx(CameraIcon, {}) }), _jsx("span", { "aria-hidden": "true", style: {
+                                            width: "1px",
+                                            height: "16px",
+                                            background: theme.colors.hairline,
+                                            margin: `0 ${spacing.xxs}`,
+                                        } }), _jsx(RowButton, { theme: theme, label: formatting ? "Hide formatting" : "Formatting", testId: `pin-format-${item.id}`, tone: formatting ? "ink" : "ghost", onClick: () => setFormatting((on) => !on), children: _jsx("span", { style: { ...typeScale.captionMono, lineHeight: 1 }, children: "Aa" }) }), _jsx("span", { style: { flex: "1 1 auto" } }), _jsx(RowButton, { theme: theme, 
+                                        // "Reply", in both the accessible name and a real text node:
+                                        // toolbar-pin.spec.ts asks for this control by ROLE AND NAME and
+                                        // PinLayer.test.tsx asks for it by TEXT, and an `aria-label`
+                                        // alone answers only the first. See `srOnly`.
+                                        label: "Reply", srText: "Reply", busy: sending, 
+                                        // Ink the moment there is something to send, quiet before that.
+                                        // DESIGN.md gives the card exactly one ink primary and this is
+                                        // it; the reference's blue would be a second accent on a surface
+                                        // that already has one.
+                                        tone: canSend ? "ink" : "ghost", disabled: sending || !canSend, onClick: () => void send(), children: _jsx(SendIcon, {}) })] })] })] })] }));
+}
+/**
+ * One message in a thread - the root report and every reply alike.
+ *
+ * ONE component for both is the point rather than an economy. The root used to
+ * be a bare `<p>` under a header doing double duty as the card's title, and a
+ * reply was two stacked paragraphs with the author, the agent marker and the
+ * timestamp welded into a single 12px mono run - so a thread had no rhythm and
+ * no per-message identity, which is the second defect in issue #20's
+ * screenshot. Avatar, name, metadata line, body: the same anatomy for
+ * everybody who speaks.
+ *
+ * A component also gives a reply that just landed something to mount, which is
+ * what `useEntered` needs. `arriving` is false for the replies that were
+ * already in the thread when it opened - DESIGN.md's first-mount rule, without
+ * which reopening an old thread replays the whole conversation.
+ */
+function MessageRow({ theme, testId, name, email, body, facts, factsTitle, actions, badge, image, alwaysShowActions = false, divided = false, arriving = false, }) {
+    const entered = useEntered();
+    const reduced = usePrefersReducedMotion();
+    // Hover AND focus, because "reveal on hover" alone would put a keyboard
+    // reviewer's own focus on a control they cannot see. React's `onFocus` is
+    // `focusin`, so it fires for the buttons inside this row as well as for the
+    // row - which is the `:focus-within` this package has no stylesheet to write.
+    const [active, setActive] = useState(false);
+    const shown = alwaysShowActions || active;
+    return (_jsxs("div", { "data-testid": testId, onPointerEnter: () => setActive(true), onPointerLeave: () => setActive(false), onFocus: () => setActive(true), onBlur: () => setActive(false), style: {
+            ...resetBox,
+            display: "flex",
+            gap: spacing.xs,
+            padding: spacing.sm,
+            ...(divided ? { borderTop: `1px solid ${theme.colors.hairline}` } : {}),
+            // Fades up from `enterShift` below where it lands, which is the half of
+            // "a sent reply is acknowledged" that happens after the request comes
+            // back. `translateY` and not a height or a margin animation: this row
+            // is inside a card floating over a host page, and a per-frame reflow
+            // there is jank the host gets blamed for.
+            //
+            // Safe as an opacity on the container because a message row is a leaf -
+            // an avatar and three lines of text, nothing that has to stack out of
+            // it. The same question the inbox row answers, and the opposite of the
+            // pin wrapper in issue #23.
+            ...(arriving
+                ? surfaceMotion({ visible: entered, reduced, slide: "y" })
+                : {}),
+        }, children: [_jsx(Avatar, { theme: theme, name: name, email: email }), _jsxs("div", { style: { flex: "1 1 auto", minWidth: 0 }, children: [_jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: spacing.xs,
+                            // So a row with no actions showing is the same height as one with.
+                            minHeight: sizes.action,
+                        }, children: [_jsx("span", { style: {
+                                    minWidth: 0,
+                                    color: theme.colors.ink,
+                                    ...typeScale.bodySmStrong,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                }, children: displayNameFor(name, email) }), badge === undefined ? null : (_jsx("span", { style: { flex: "0 0 auto", marginLeft: spacing.xxs }, children: badge })), _jsx("span", { style: {
+                                    marginLeft: "auto",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.xxs,
+                                    flex: "0 0 auto",
+                                    // Opacity alone, never `visibility` or `display`: both of those
+                                    // take a control out of the tab order, and a hidden action a
+                                    // keyboard cannot reach to reveal is the accessibility half of
+                                    // this issue failed rather than met. An invisible button is still
+                                    // focusable, and focusing it is what makes it visible.
+                                    opacity: shown ? 1 : 0,
+                                    transition: transition(["opacity"], motion.duration.instant, motion.easing.inOut, reduced),
+                                }, children: actions })] }), _jsx("p", { 
+                        // The 12px caption-mono role, and on its own line. It used to be the
+                        // FIRST line of every reply with 14px body copy immediately beneath
+                        // it and nothing between them, which is what made a correctly sized
+                        // mono caption read as body-weight metadata.
+                        title: factsTitle, style: {
+                            ...resetBox,
+                            ...typeScale.captionMono,
+                            color: theme.colors.body,
+                            overflowWrap: "anywhere",
+                        }, children: facts.join(" · ") }), _jsx("div", { style: { marginTop: spacing.xxs }, children: _jsx(RichText, { theme: theme, body: body }) }), image ? (_jsx("img", { src: image.url, alt: image.alt, style: {
+                            display: "block",
+                            marginTop: spacing.xxs,
+                            maxWidth: "100%",
+                            borderRadius: radii.sm,
+                            border: `1px solid ${theme.colors.hairline}`,
+                        } })) : null] })] }));
+}
+/**
+ * A per-message action: 24px, icon-only, and named.
+ *
+ * Every one of these is an icon, so the accessible name is the whole of what
+ * says what it does - hence `label` being required rather than optional. The
+ * focus, hover and press states are tracked in React state for the reason
+ * `ThreadButton` already states: there is no stylesheet in this package, so
+ * `:hover`, `:active` and `:focus-visible` do not exist here.
+ */
+function RowButton({ theme, label, srText, onClick, disabled, testId, tone = "ghost", busy, children, }) {
+    const [focused, setFocused] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const reduced = usePrefersReducedMotion();
+    const ink = tone === "ink";
+    return (_jsxs("button", { type: "button", "aria-label": label, 
+        // The same word a screen reader gets, for the reviewer who is pointing at
+        // it. An icon-only control that only a screen reader can name is a
+        // control half the audience has to guess.
+        title: label, ...(busy === undefined ? {} : { "aria-busy": busy }), ...(testId === undefined ? {} : { "data-testid": testId }), onClick: onClick, disabled: disabled, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onPointerEnter: () => setHovered(true), onPointerLeave: () => {
+            setHovered(false);
+            // Dragging off the button cancels the press, which is what every
+            // native control does. Without this the button stays squashed.
+            setPressed(false);
+        }, onPointerDown: () => setPressed(true), onPointerUp: () => setPressed(false), onPointerCancel: () => setPressed(false), style: {
+            // The clipped label is `position: absolute`, so this box has to be the
+            // thing it is positioned against.
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: "0 0 auto",
+            width: sizes.action,
+            height: sizes.action,
+            padding: 0,
+            // The host may ship no reset, and a 24px box that measures 26 breaks
+            // the row it sits in. See FeedbackToolbar.tsx's note.
+            boxSizing: "border-box",
+            border: "none",
+            borderRadius: radii.sm,
+            // The ghost's hover fill is the faint shift toward `canvasSoft2` that
+            // DESIGN.md's Known Gaps describes. The ink tone gets none: there is no
+            // ink-hover step in this palette, and inventing one is a decision that
+            // section says to state in a pull request rather than take at a call
+            // site. Its feedback is the press below.
+            background: ink
+                ? theme.colors.ink
+                : hovered && disabled !== true
+                    ? theme.colors.canvasSoft2
+                    : "transparent",
+            // `body`, never `mute`: 3.4:1 is not a control, which is the same
+            // argument the dismiss button and the close control already make.
+            color: ink ? theme.colors.onInk : theme.colors.body,
+            cursor: disabled === true ? "not-allowed" : "pointer",
+            outline: "revert",
+            boxShadow: focused ? theme.shadows.focusRing : "none",
+            // A 3% squash under the pointer, at `instant`. A leaf control with no
+            // fixed descendants, so a transform here is safe.
+            transform: motionTransform(pressed && disabled !== true ? `scale(${motion.pressScale})` : "none", reduced),
+            transition: transition(["background-color", "color", "transform"], motion.duration.instant, motion.easing.inOut, reduced),
+        }, children: [children, srText === undefined ? null : _jsx("span", { style: srOnly, children: srText })] }));
+}
+/**
+ * Fit a composer's field to its text, up to `REPLY_MAX_HEIGHT`.
+ *
+ * Module scope because BOTH composers use it now - the thread's reply box and
+ * the pin composer, which are the same box. It was a helper inside the thread
+ * when only the thread grew.
+ *
+ * `height` is a LAYOUT property and is set instantly, never transitioned -
+ * DESIGN.md's Motion section in as many words, and the reason a field can grow
+ * at all inside a card floating over somebody else's page.
+ *
+ * The `auto` first is not a flourish: `scrollHeight` reports the height the box
+ * already HAS whenever that is the larger of the two, so without it the field
+ * could only ever grow and a deleted paragraph left a hole.
+ */
+function grow(box) {
+    if (!box)
+        return;
+    box.style.height = "auto";
+    box.style.height = `${Math.min(box.scrollHeight, REPLY_MAX_HEIGHT)}px`;
+}
+/**
+ * The formatting popover, anchored under the `Aa` button.
+ *
+ * A floating panel rather than a row inside the composer, which is what the
+ * reference does and what makes it read as a menu that belongs to the button
+ * that opened it. An inline row pushed the text area down every time it
+ * opened, so the draft a reviewer was reading moved under their eyes.
+ *
+ * Buttons that rewrite the TEXT rather than an editor that owns a document:
+ * the composer is a `<textarea>` and the body is markdown, so formatting is a
+ * string transformation and `toggleMark` is the whole of it. Rendering is
+ * react-markdown's job.
+ *
+ * `onMouseDown` prevented, not `onClick`: pressing a button blurs the field,
+ * and a blurred field has no selection to format. Preventing the default keeps
+ * the caret where the reviewer left it.
+ *
+ * It is positioned ABOVE the button rather than below it, and that is the one
+ * deliberate departure from the reference. The composer is the bottom-most
+ * band of a card that the pin layer clamps against the viewport floor, so a
+ * panel hanging below the row would be cut off by the window edge exactly when
+ * the card is where it most often sits. Vercel's toolbar floats free of any
+ * card and has room underneath; ours does not.
+ */
+function FormatBar({ theme, onApply, }) {
+    const labels = {
+        bold: "Bold",
+        italic: "Italic",
+        strike: "Strikethrough",
+        code: "Code",
+    };
+    const glyphs = {
+        bold: "B",
+        italic: "I",
+        strike: "S",
+        code: "<>",
+    };
+    return (_jsx("div", { role: "group", "aria-label": "Formatting", "data-testid": "pin-format-bar", style: {
+            position: "absolute",
+            // Above the row that opened it, by the gap the card uses everywhere.
+            bottom: `calc(100% + ${spacing.xxs})`,
+            left: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: spacing.xxs,
+            padding: spacing.xxs,
+            borderRadius: radii.md,
+            background: theme.colors.canvas,
+            border: `1px solid ${theme.colors.hairline}`,
+            // A menu floating over the card, so it carries the card's own
+            // elevation rather than sitting flat on it.
+            boxShadow: theme.shadows.popover,
+            // Above the composer it overlaps, and inside the same stacking context
+            // the thread already owns - no new rung in the ladder. See `layers`.
+            zIndex: 1,
+        }, children: Object.keys(MARKDOWN_MARKS).map((mark) => (_jsxs(Fragment, { children: [mark === "code" ? (_jsx("span", { "aria-hidden": "true", style: {
+                        width: "1px",
+                        height: "16px",
+                        background: theme.colors.hairline,
+                        margin: `0 ${spacing.xxs}`,
+                    } })) : null, _jsx("button", { type: "button", "aria-label": labels[mark], title: labels[mark], "data-testid": `pin-format-${mark}`, onMouseDown: (event) => event.preventDefault(), onClick: () => onApply(mark), style: {
+                        ...resetBox,
+                        width: sizes.action,
+                        height: sizes.action,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: radii.sm,
+                        cursor: "pointer",
+                        color: theme.colors.body,
+                        outline: "revert",
+                        ...typeScale.captionMono,
+                        // The one place a mono glyph carries weight, and it is the glyph
+                        // that MEANS weight. DESIGN.md gives the mono face one weight; a
+                        // bold "B" that is not bold is a button that lies about what it
+                        // does, so the exception is stated here rather than taken
+                        // quietly. Same argument for the other two.
+                        fontWeight: mark === "bold" ? 500 : 400,
+                        fontStyle: mark === "italic" ? "italic" : "normal",
+                        textDecoration: mark === "strike" ? "line-through" : "none",
+                    }, children: glyphs[mark] })] }, mark))) }));
+}
+/**
+ * Copy one string to the clipboard, and say so.
+ *
+ * The acknowledgement is the reason this is a component rather than an
+ * `onClick`: a copy button with no answer leaves a reviewer pressing it twice.
+ * The glyph swaps to a check for a beat, which costs one timer that only ever
+ * starts on a click.
+ *
+ * `navigator.clipboard` is optional on purpose. It is undefined on a page
+ * served over plain HTTP, and staging sites - which is most of what this
+ * toolbar is pointed at - are not always on TLS. The optional chain makes that
+ * a no-op rather than a `TypeError` thrown inside somebody else's application.
+ */
+function CopyButton({ theme, label, text, icon, }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => setCopied(false), COPIED_FOR_MS);
+        return () => window.clearTimeout(timer);
+    }, [copied]);
+    return (_jsx(RowButton, { theme: theme, label: label, onClick: () => {
+            void navigator.clipboard?.writeText(text).then(() => setCopied(true), 
+            // A denied clipboard permission is not something to interrupt a
+            // review over: the button simply does not acknowledge.
+            () => { });
+        }, children: copied ? _jsx(CheckIcon, {}) : icon }));
+}
+/**
+ * Was this comment written about a different build than the one on screen?
+ *
+ * The toolbar knows the commit it is RUNNING on (`config.gitCommit`, from the
+ * host's build environment) and the commit each item was filed against, which
+ * has been captured since the first version and until now was thrown away at
+ * render time. Comparing the two needs no backend, no git access and no new
+ * column - which is why this is a string comparison rather than the
+ * "N commits ago" the request started as.
+ *
+ * That distance is deliberately NOT computed. Counting commits between two
+ * SHAs needs the git graph, and nothing in this product has the repository:
+ * `Project` stores a hostname, there is no remote and no provider token. The
+ * honest answer available here is "same build" or "not the same build", so
+ * that is the only claim the marker makes.
+ *
+ * Both sides are required. An item filed before the environment reported a
+ * commit, or a host that does not set one, yields `false` rather than marking
+ * everything outdated - an unknown is not a difference.
+ */
+export function isOutdated(item, config) {
+    const filed = item.gitCommit;
+    const running = config.gitCommit;
+    if (!filed || !running)
+        return false;
+    return filed !== running;
+}
+/**
+ * The marker a reviewer sees on a comment written about an earlier build.
+ *
+ * "Outdated", not "9f2c1ab" and not "4 commits behind". The toolbar is the
+ * surface a customer's non-technical reviewer uses, so a commit SHA is noise
+ * to them - it stays in the API and in the MCP payload, where an agent can do
+ * something with it. What a person needs is whether the page changed since
+ * somebody complained about it.
+ *
+ * It says the page moved on, never that the report is wrong: a bug filed three
+ * builds ago may be very much still there, and the only thing that closes a
+ * report is a person or an agent acting as one.
+ */
+function OutdatedChip({ theme, id }) {
+    return (_jsx("span", { "data-testid": `pin-outdated-${id}`, title: "Written before the latest update to this page. It may already be fixed.", style: {
+            padding: `0 ${spacing.xs}`,
+            // Square-ish, like the chip it replaces: DESIGN.md gives the pill to
+            // marketing CTAs and this is in-product metadata.
+            borderRadius: radii.sm,
+            // Neutral rather than a status tone. This is not a lane in a workflow
+            // and must not read as one - the toolbar has no statuses any more.
+            background: theme.colors.canvasSoft2,
+            color: theme.colors.body,
+            ...typeScale.caption,
+            whiteSpace: "nowrap",
+        }, children: "Outdated" }));
+}
+/* ── Composing a new pin ──────────────────────────────────────────────── */
+function PinComposer({ draft, theme, client, config, organizationId, onDone, attachment, onRequestCapture, onClearAttachment, }) {
+    const [body, setBody] = useState("");
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const [composing, setComposing] = useState(false);
+    const [formatting, setFormatting] = useState(false);
+    const bodyBox = useRef(null);
+    const trimmed = body.trim();
+    const canSend = trimmed.length > 0 && trimmed.length <= FEEDBACK_BODY_MAX;
+    const entered = useEntered();
+    const reduced = usePrefersReducedMotion();
+    // Where the composer actually lands, hoisted out of the style object because
+    // the clamp is the whole of the "which side of the viewport is this pin on"
+    // information and it was being computed and thrown away.
+    //
+    // The width is what the clamp is made of, so it is READ from the token
+    // rather than restated: the `300` that used to sit here was `280 + padding +
+    // border` hard-coded, and it is the third place issue #20's two `"280px"`
+    // literals had quietly reached. Widening the card without this would have
+    // left the composer clamped 140px inside the right edge its own comment
+    // claims it hugs.
+    //
+    // The width the composer will actually render at, `maxWidth` included, and
+    // then both gutters - the same clamp the anchored thread takes, for the same
+    // reason. `innerWidth - (440 + 16)` alone goes NEGATIVE on any viewport under
+    // 456px and parks the card off the left edge; the old `300` in this position
+    // merely overflowed the right one. A phone-width host is not hypothetical for
+    // a tool pointed at staging sites.
+    const width = Math.min(THREAD_WIDTH, window.innerWidth - VIEWPORT_GUTTER * 2);
+    const left = Math.min(Math.max(draft.x + COMPOSER_ANCHOR_OFFSET, VIEWPORT_GUTTER), window.innerWidth - VIEWPORT_GUTTER - width);
+    // The same floor vertically, for the same arithmetic: the reserve is 200px,
+    // so a viewport shorter than that used to resolve to a negative `top`.
+    const top = Math.max(VIEWPORT_GUTTER, Math.min(draft.y + COMPOSER_ANCHOR_OFFSET, window.innerHeight - COMPOSER_VIEWPORT_RESERVE));
+    async function send() {
+        setSending(true);
+        setError(null);
+        try {
+            // The reviewer's own capture wins. See `attachment`.
+            const screenshot = attachment ?? (await captureScreenshot());
+            await client.submit({
+                organizationId,
+                kind: "PINNED",
+                body: trimmed,
+                metadata: captureMetadata(config),
+                pin: {
+                    selector: draft.selector,
+                    offsetX: draft.offsetX,
+                    offsetY: draft.offsetY,
+                },
+                ...(screenshot ? { screenshot } : {}),
+            });
+            onDone();
+        }
+        catch (err) {
+            setSending(false);
+            setError(err instanceof ToolbarApiError && err.code === "not_invited_to_project"
+                ? "You are not invited to this project any more."
+                : "Could not save that pin. Your text is still here.");
+        }
+    }
+    return (_jsx("section", { "data-testid": "pin-composer", style: {
+            ...resetBox,
+            position: "fixed",
+            left,
+            top,
+            // The same token the thread card takes. Issue #20: "both the pin
+            // popover and the composer-only variant share the 280px constant -
+            // widen both consistently", and one token is how they cannot stop
+            // being consistent.
+            width: sizes.thread,
+            maxWidth: VIEWPORT_MAX_WIDTH,
+            boxSizing: "border-box",
+            // No padding: the composer band below IS this card. The section used
+            // to hold a selector line and a bordered field inside a padded card -
+            // three boxes for one field - and the reference is a single rounded
+            // surface with a placeholder in it.
+            padding: 0,
+            background: theme.colors.canvas,
+            border: `1px solid ${theme.colors.hairline}`,
+            borderRadius: radii.lg,
+            boxShadow: theme.shadows.popover,
+            // The band inside has its own radius; clipping keeps its corners from
+            // squaring off against this one.
+            overflow: "hidden",
+            // `thread`, not `surface`: a composer is a thread that does not exist
+            // yet, and it holds text the reviewer is part-way through typing.
+            // Arming the picker does not close an open thread, so both can be on
+            // screen at once - and left a rung below, the newly opened thread would
+            // paint over the half-written comment. Rendered after the markers, so
+            // it also wins the tie against a thread on the same rung. See `layers`.
+            zIndex: layers.thread,
+            ...typeScale.bodySm,
+            color: theme.colors.body,
+            // Grows out of the pixel that was clicked, which is the acceptance
+            // criterion "the composer visibly originates at the anchor". The
+            // origin is the clicked point expressed in the composer's own
+            // coordinates, so it is derived from the SAME clamp that decided where
+            // the composer sits: unclamped it resolves to `-12px -12px`, just
+            // outside the top-left corner; clamped against the right edge it
+            // resolves to roughly +300px, off the composer's right side, and the
+            // surface then grows from the pin's side of the viewport with no
+            // second copy of the branching to keep in step. A negative or
+            // out-of-box origin is legal CSS and is exactly the point.
+            //
+            // No exit. `onDone` reloads the pin list, and a ghost composer fading
+            // over the marker that just replaced it reads as a rendering fault -
+            // and toolbar-pin.spec.ts asserts `pin-composer` reaches zero.
+            ...surfaceMotion({
+                visible: entered,
+                reduced,
+                origin: `${draft.x - left}px ${draft.y - top}px`,
+            }),
+        }, children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: spacing.xs,
+                padding: spacing.sm,
+                background: theme.colors.canvasSoft2,
+                boxShadow: composing ? theme.shadows.focusRing : "none",
+            }, children: [attachment ? (_jsxs("div", { "data-testid": "pin-composer-attachment", style: {
+                        position: "relative",
+                        alignSelf: "flex-start",
+                        borderRadius: radii.sm,
+                        border: `1px solid ${theme.colors.hairline}`,
+                        overflow: "hidden",
+                        lineHeight: 0,
+                    }, children: [_jsx("img", { src: attachment, alt: "The element you captured, attached to this report", style: { display: "block", maxWidth: "120px", maxHeight: "80px" } }), _jsx("button", { type: "button", "aria-label": "Remove screenshot", title: "Remove screenshot", "data-testid": "pin-composer-attachment-remove", onClick: onClearAttachment, style: {
+                                ...resetBox,
+                                position: "absolute",
+                                top: "2px",
+                                right: "2px",
+                                width: "16px",
+                                height: "16px",
+                                display: "inline-flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                borderRadius: radii.sm,
+                                cursor: "pointer",
+                                background: theme.colors.ink,
+                                color: theme.colors.onInk,
+                                lineHeight: 1,
+                            }, children: _jsx(CloseIcon, {}) })] })) : null, _jsx("textarea", { autoFocus: true, ref: bodyBox, value: body, onChange: (e) => {
+                        setBody(e.target.value);
+                        grow(e.target);
+                    }, onFocus: () => setComposing(true), onBlur: () => setComposing(false), 
+                    // The thread's grammar, because this is now the thread's composer:
+                    // Enter sends, Shift/Alt+Enter writes a newline. It used to take
+                    // Cmd/Ctrl+Enter on the argument that a first report is longer prose
+                    // than a reply - true, and beside the point once the two boxes are
+                    // the same box. Two identical surfaces with different keys is the
+                    // worse trade. Cmd/Ctrl+Enter still sends, for the reviewer who
+                    // learned that grammar elsewhere.
+                    //
+                    // `isComposing` is the load-bearing guard: an IME uses Enter to
+                    // COMMIT a candidate, so a reviewer typing Japanese would otherwise
+                    // post half a sentence on their first Enter.
+                    onKeyDown: (event) => {
+                        if (event.key !== "Enter")
+                            return;
+                        if (event.nativeEvent.isComposing)
+                            return;
+                        if (event.shiftKey || event.altKey)
+                            return;
+                        event.preventDefault();
+                        if (sending || !canSend)
+                            return;
+                        void send();
+                    }, rows: 1, placeholder: "Start a new thread\u2026", "aria-label": "Pinned feedback", "data-testid": "pin-body", maxLength: FEEDBACK_BODY_MAX, style: {
+                        ...resetBox,
+                        display: "block",
+                        width: "100%",
+                        // Grows with the text and scrolls past the cap, exactly as the
+                        // reply box does. The old box opened at three rows with a drag
+                        // handle; `resize` is `none` here for the reason it is there - the
+                        // handle let a reviewer drag the field out through the card.
+                        minHeight: typeScale.bodySm.lineHeight,
+                        maxHeight: `${REPLY_MAX_HEIGHT}px`,
+                        overflowY: "auto",
+                        resize: "none",
+                        ...typeScale.bodySm,
+                        color: theme.colors.ink,
+                        background: "transparent",
+                        outline: "none",
+                    } }), error ? (_jsx("p", { role: "alert", style: {
+                        ...resetBox,
+                        color: theme.colors.error,
+                        ...typeScale.caption,
+                    }, children: error })) : null, _jsxs("div", { style: {
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: spacing.xxs,
+                        flex: "0 0 auto",
+                    }, children: [formatting ? (_jsx(FormatBar, { theme: theme, onApply: (mark) => {
+                                const field = bodyBox.current;
+                                if (!field)
+                                    return;
+                                const next = toggleMark(body, field.selectionStart, field.selectionEnd, mark);
+                                setBody(next.text);
+                                requestAnimationFrame(() => {
+                                    field.focus();
+                                    field.setSelectionRange(next.selectionStart, next.selectionEnd);
+                                    grow(field);
+                                });
+                            } })) : null, _jsx(RowButton, { theme: theme, label: "Take a screenshot", testId: "pin-composer-attach", tone: attachment ? "ink" : "ghost", onClick: onRequestCapture, children: _jsx(CameraIcon, {}) }), _jsx("span", { "aria-hidden": "true", style: {
+                                width: "1px",
+                                height: "16px",
+                                background: theme.colors.hairline,
+                                margin: `0 ${spacing.xxs}`,
+                            } }), _jsx(RowButton, { theme: theme, label: formatting ? "Hide formatting" : "Formatting", testId: "pin-composer-format", tone: formatting ? "ink" : "ghost", onClick: () => setFormatting((on) => !on), children: _jsx("span", { style: { ...typeScale.captionMono, lineHeight: 1 }, children: "Aa" }) }), _jsx("span", { style: { flex: "1 1 auto" } }), _jsx(RowButton, { theme: theme, 
+                            // "Pin it", still: the icon is the thread's send control and the
+                            // NAME is the verb this surface performs. Both e2e and the unit
+                            // tests ask for this button by that name, and so does a screen
+                            // reader - `srText` keeps it a real text node as well.
+                            label: "Pin it", srText: "Pin it", busy: sending, tone: canSend ? "ink" : "ghost", disabled: sending || !canSend, onClick: () => void send(), children: _jsx(SendIcon, {}) })] })] }) }));
+}
+//# sourceMappingURL=PinLayer.js.map