@parhelia/core 0.3.12832 → 0.3.12833

package/dist/editor/page-viewer/FeedbackMarginController.js

@@ -0,0 +1,241 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../../lib/utils";
+import { layoutBalloons } from "../reviews/balloonLayout";
+import { useHoveredFeedback } from "../reviews/feedbackHoverState";
+import { decideMarginMode, orderMarginThreads, } from "./feedbackMarginLayout";
+import { useRememberedMarginAnchors } from "./feedbackMarginSources";
+import { FEEDBACK_MARGIN_DEFAULT_WIDTH, FEEDBACK_MARGIN_MIN_WIDTH, FEEDBACK_MARGIN_RAIL_WIDTH, } from "./feedbackMarginWidth";
+/**
+ * Width of the full column before the user resizes it, and of the column
+ * floating over the canvas from the rail (feedbackMarginWidth).
+ */
+export const FEEDBACK_MARGIN_WIDTH = FEEDBACK_MARGIN_DEFAULT_WIDTH;
+export { FEEDBACK_MARGIN_MIN_WIDTH, FEEDBACK_MARGIN_RAIL_WIDTH };
+export const FEEDBACK_MARGIN_CARD_GAP = 8;
+/** Room left of the cards for the leader line's elbow. */
+export const FEEDBACK_MARGIN_CARD_INSET_LEFT = 14;
+export const FEEDBACK_MARGIN_CARD_INSET_RIGHT = 10;
+/** Cards floating beside the rail are as wide as in the full column. */
+const FLOATING_CARD_WIDTH = FEEDBACK_MARGIN_WIDTH -
+    FEEDBACK_MARGIN_CARD_INSET_LEFT -
+    FEEDBACK_MARGIN_CARD_INSET_RIGHT;
+/** Space between a floating card and the rail. */
+const FLOATING_CARD_GAP = 6;
+/** How far the rail's layer reaches over the canvas (card plus its shadow). */
+export const FEEDBACK_MARGIN_RAIL_BLEED = FLOATING_CARD_WIDTH + FLOATING_CARD_GAP + 16;
+const RAIL_MARKER_SIZE = 24;
+const RAIL_MARKER_GAP = 4;
+const RAIL_MARKER_LEFT = (FEEDBACK_MARGIN_RAIL_WIDTH - RAIL_MARKER_SIZE) / 2;
+/** Where the leader meets the card, below its top edge. */
+const LEADER_CARD_ATTACH_Y = 22;
+/** Stacked mode only returns to anchored once the cards fit with this slack. */
+const ANCHORED_RETURN_SLACK = 0.1;
+export function getFeedbackMarginCardWidth(columnWidth) {
+    return (columnWidth -
+        FEEDBACK_MARGIN_CARD_INSET_LEFT -
+        FEEDBACK_MARGIN_CARD_INSET_RIGHT);
+}
+function isTextInput(element) {
+    if (!(element instanceof HTMLElement))
+        return false;
+    const tag = element.tagName;
+    return tag === "TEXTAREA" || tag === "INPUT" || element.isContentEditable;
+}
+function reportsEqual(a, b) {
+    return (a.mode === b.mode &&
+        a.orderedIds.length === b.orderedIds.length &&
+        a.unplacedIds.length === b.unplacedIds.length &&
+        a.orderedIds.every((id, index) => b.orderedIds[index] === id) &&
+        a.unplacedIds.every((id, index) => b.unplacedIds[index] === id));
+}
+function isDraftThread(thread) {
+    return thread?.kind === "comment" && !!thread.root.isNew;
+}
+/**
+ * Measures where every thread's text sits on the canvas, lays the cards out
+ * as balloons beside it and decides whether that layout fits. Stays mounted
+ * in both modes (in stacked mode it renders no cards) so the column can
+ * return to anchored mode when the page or the cards change.
+ *
+ * In the rail presentation the balloons are small markers, which never
+ * switch to the stacked list; the selected thread and any unsent draft float
+ * as full cards over the canvas, left of the rail and level with their marker.
+ */
+export function FeedbackMarginController({ measure, layerMetrics, threads, heights, width, presentation, minY, footerHeight, pinnedId, focusEpoch, columnRef, onLayoutChange, renderCard, renderMarker, }) {
+    const hovered = useHoveredFeedback();
+    const isRail = presentation === "rail";
+    const anchors = useRememberedMarginAnchors(threads, measure);
+    const order = useMemo(() => orderMarginThreads(threads, anchors, layerMetrics.scrollTop + minY), [threads, anchors, layerMetrics.scrollTop, minY]);
+    const items = useMemo(() => order.anchored.map((entry) => ({
+        id: entry.id,
+        anchorY: entry.anchorY,
+        height: isRail ? RAIL_MARKER_SIZE : (heights[entry.id] ?? 0),
+    })), [order.anchored, heights, isRail]);
+    const gap = isRail ? RAIL_MARKER_GAP : FEEDBACK_MARGIN_CARD_GAP;
+    const ready = layerMetrics.layerHeight > 0;
+    const maxY = Math.max(minY, layerMetrics.layerHeight - footerHeight - FEEDBACK_MARGIN_CARD_GAP);
+    const layout = useMemo(() => layoutBalloons(items, { gap, minY, maxY, pinnedId }), [items, gap, minY, maxY, pinnedId]);
+    const fitsWithSlack = useMemo(() => !layoutBalloons(items, {
+        gap,
+        minY,
+        maxY: minY + (maxY - minY) * (1 - ANCHORED_RETURN_SLACK),
+        pinnedId,
+    }).overflow, [items, gap, minY, maxY, pinnedId]);
+    const [mode, setMode] = useState("anchored");
+    const [pendingMode, setPendingMode] = useState(null);
+    useEffect(() => {
+        if (!ready)
+            return;
+        const next = isRail
+            ? "anchored"
+            : decideMarginMode(mode, !layout.overflow, fitsWithSlack);
+        if (next === mode) {
+            setPendingMode(null);
+            return;
+        }
+        // Never re-home a card the user is typing in; apply once focus leaves.
+        // Buttons and links in the column do not hold unsaved input, so a switch
+        // is only deferred while a text field or rich-text editor has focus.
+        const column = columnRef.current;
+        const active = typeof document !== "undefined" ? document.activeElement : null;
+        if (column && active && column.contains(active) && isTextInput(active)) {
+            setPendingMode(next);
+            return;
+        }
+        setPendingMode(null);
+        setMode(next);
+    }, [
+        ready,
+        isRail,
+        mode,
+        layout.overflow,
+        fitsWithSlack,
+        focusEpoch,
+        columnRef,
+    ]);
+    const orderedIds = useMemo(() => order.anchored.map((entry) => entry.id), [order.anchored]);
+    const lastReportRef = useRef(null);
+    useEffect(() => {
+        const report = {
+            mode,
+            orderedIds,
+            unplacedIds: order.unplaced,
+        };
+        if (lastReportRef.current && reportsEqual(lastReportRef.current, report)) {
+            return;
+        }
+        lastReportRef.current = report;
+        onLayoutChange(report);
+    }, [mode, orderedIds, order.unplaced, onLayoutChange]);
+    // Selection jumps are instant; only reflows around a growing card animate.
+    const [instant, setInstant] = useState(false);
+    const previousPinnedRef = useRef(pinnedId);
+    useEffect(() => {
+        if (previousPinnedRef.current === pinnedId)
+            return;
+        previousPinnedRef.current = pinnedId;
+        setInstant(true);
+        const frame = window.requestAnimationFrame(() => setInstant(false));
+        return () => window.cancelAnimationFrame(frame);
+    }, [pinnedId]);
+    const threadsById = useMemo(() => new Map(threads.map((thread) => [thread.id, thread])), [threads]);
+    // Rail: the selected thread and unsent drafts float as cards beside their
+    // markers, laid out among themselves so two of them never overlap.
+    const floatingItems = useMemo(() => isRail
+        ? layout.positions
+            .filter((position) => position.id === pinnedId ||
+            isDraftThread(threadsById.get(position.id)))
+            .map((position) => ({
+            id: position.id,
+            // The card's header line sits level with its marker.
+            anchorY: position.top + RAIL_MARKER_SIZE / 2 - LEADER_CARD_ATTACH_Y,
+            height: heights[position.id] ?? 0,
+        }))
+        : [], [isRail, layout.positions, pinnedId, threadsById, heights]);
+    const floatingLayout = useMemo(() => layoutBalloons(floatingItems, {
+        gap: FEEDBACK_MARGIN_CARD_GAP,
+        minY,
+        maxY,
+        pinnedId,
+    }), [floatingItems, minY, maxY, pinnedId]);
+    if (mode !== "anchored")
+        return null;
+    const positions = new Map(layout.positions.map((position) => [position.id, position.top]));
+    const hasSelection = !!pinnedId;
+    const leaderIds = Array.from(new Set([pinnedId, hovered?.id].filter((id) => !!id)));
+    const leaders = leaderIds.map((id) => {
+        const anchor = anchors[id];
+        const top = positions.get(id);
+        if (!anchor || top === undefined)
+            return null;
+        const thread = threadsById.get(id);
+        return (_jsx(MarginLeader, { lineY: anchor.lineMidY, targetY: isRail ? top + RAIL_MARKER_SIZE / 2 : top + LEADER_CARD_ATTACH_Y, endX: isRail ? RAIL_MARKER_LEFT : FEEDBACK_MARGIN_CARD_INSET_LEFT, kind: thread?.kind ?? "comment", resolved: thread?.kind === "comment" ? !!thread.root.isResolved : false, emphasis: id === pinnedId ? "selected" : "hovered" }, `leader-${id}`));
+    });
+    if (isRail) {
+        return (_jsxs(_Fragment, { children: [leaders, order.anchored.map((entry) => {
+                    const top = positions.get(entry.id) ?? entry.anchorY;
+                    return (_jsx("div", { "data-feedback-margin-marker": entry.id, "data-feedback-anchor-y": Math.round(entry.anchorY * 100) / 100, className: cn("pointer-events-auto absolute", !instant &&
+                            "transition-[top] duration-150 ease-out motion-reduce:transition-none"), style: {
+                            top,
+                            left: RAIL_MARKER_LEFT,
+                            width: RAIL_MARKER_SIZE,
+                            height: RAIL_MARKER_SIZE,
+                            zIndex: entry.id === pinnedId ? 2 : 1,
+                        }, children: renderMarker(entry.id, {
+                            selected: entry.id === pinnedId,
+                            hovered: entry.id === hovered?.id,
+                        }) }, entry.id));
+                }), floatingLayout.positions.map(({ id, top }) => {
+                    const measured = (heights[id] ?? 0) > 0;
+                    return (_jsx("div", { "data-feedback-margin-card": id, "data-feedback-margin-floating": "", "data-feedback-measured-height": heights[id] ?? "none", className: "pointer-events-auto absolute", style: {
+                            top,
+                            left: -(FLOATING_CARD_WIDTH + FLOATING_CARD_GAP),
+                            width: FLOATING_CARD_WIDTH,
+                            visibility: measured ? "visible" : "hidden",
+                            zIndex: id === pinnedId ? 5 : 4,
+                        }, children: renderCard(id, {
+                            selected: id === pinnedId,
+                            dimmed: false,
+                            floating: true,
+                        }) }, `floating-${id}`));
+                })] }));
+    }
+    const cardWidth = getFeedbackMarginCardWidth(width);
+    return (_jsxs(_Fragment, { children: [pendingMode && (_jsx("span", { "data-feedback-margin-pending-mode": pendingMode, hidden: true })), leaders, order.anchored.map((entry) => {
+                const top = positions.get(entry.id) ?? entry.anchorY;
+                const measured = (heights[entry.id] ?? 0) > 0;
+                const selected = entry.id === pinnedId;
+                return (_jsx("div", { "data-feedback-margin-card": entry.id, "data-feedback-anchor-y": Math.round(entry.anchorY * 100) / 100, "data-feedback-measured-height": heights[entry.id] ?? "none", className: cn("pointer-events-auto absolute", !instant &&
+                        "transition-[top] duration-150 ease-out motion-reduce:transition-none"), style: {
+                        top,
+                        left: FEEDBACK_MARGIN_CARD_INSET_LEFT,
+                        width: cardWidth,
+                        visibility: measured ? "visible" : "hidden",
+                        zIndex: selected ? 2 : 1,
+                    }, children: renderCard(entry.id, {
+                        selected,
+                        dimmed: hasSelection && !selected,
+                    }) }, entry.id));
+            })] }));
+}
+function MarginLeader({ lineY, targetY, endX, kind, resolved, emphasis, }) {
+    const top = Math.min(lineY, targetY) - 1;
+    const height = Math.abs(lineY - targetY) + 2;
+    const y0 = lineY - top;
+    const y1 = targetY - top;
+    const elbowX = Math.min(6, endX / 2);
+    const color = kind === "suggestion"
+        ? "var(--color-feedback-green)"
+        : resolved
+            ? "var(--color-feedback-green)"
+            : "var(--color-highlight-100)";
+    return (_jsx("svg", { "data-testid": "feedback-leader-margin", "data-feedback-leader": emphasis, className: "pointer-events-none absolute left-0", style: {
+            top,
+            width: endX + 1,
+            height,
+            opacity: emphasis === "selected" ? 1 : 0.55,
+            zIndex: 3,
+        }, viewBox: `0 0 ${endX + 1} ${height}`, "aria-hidden": "true", children: _jsx("path", { d: `M0 ${y0} H${elbowX} V${y1} H${endX}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }) }));
+}
+//# sourceMappingURL=FeedbackMarginController.js.map

package/dist/editor/page-viewer/FeedbackMarginController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackMarginController.js","sourceRoot":"","sources":["../../../src/editor/page-viewer/FeedbackMarginController.tsx"],"names":[],"mappings":"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"}

package/dist/editor/page-viewer/FeedbackMarginMarker.d.ts

@@ -0,0 +1,16 @@
+import type { FeedbackThread } from "../reviews/feedbackThreads";
+type FeedbackMarginMarkerProps = {
+    thread: FeedbackThread;
+    resolvedAuthorName?: string;
+    selected: boolean;
+    hovered: boolean;
+    onToggle: () => void;
+    onHoverChange: (hovered: boolean) => void;
+};
+/**
+ * A thread in the collapsed comment rail: the author's avatar beside the text
+ * the thread is about, ringed in the thread's highlight color. Toggles the
+ * thread's card, which floats over the canvas while it is selected.
+ */
+export declare function FeedbackMarginMarker({ thread, resolvedAuthorName, selected, hovered, onToggle, onHoverChange, }: FeedbackMarginMarkerProps): import("react").JSX.Element;
+export {};

package/dist/editor/page-viewer/FeedbackMarginMarker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "../../components/ui/avatar";
+import { cn } from "../../lib/utils";
+import { getFeedbackAvatarClassName, useFeedbackAuthor, } from "../reviews/feedbackAvatar";
+import { isResolvedFeedbackItem } from "../reviews/feedbackOrdering";
+/**
+ * A thread in the collapsed comment rail: the author's avatar beside the text
+ * the thread is about, ringed in the thread's highlight color. Toggles the
+ * thread's card, which floats over the canvas while it is selected.
+ */
+export function FeedbackMarginMarker({ thread, resolvedAuthorName, selected, hovered, onToggle, onHoverChange, }) {
+    const item = thread.kind === "comment" ? thread.root : thread.suggestion;
+    const author = useFeedbackAuthor(item, resolvedAuthorName);
+    const replies = thread.kind === "comment" ? thread.replies.length : thread.comments.length;
+    const resolved = isResolvedFeedbackItem(item);
+    const noun = thread.kind === "comment" ? "Comment" : "Suggestion";
+    return (_jsxs("button", { type: "button", "data-testid": "feedback-margin-marker", "data-feedback-thread-kind": thread.kind, "aria-label": `${noun} by ${author.displayName}`, "aria-pressed": selected, title: `${noun} by ${author.displayName}`, className: cn("relative flex size-6 cursor-pointer items-center justify-center rounded-full bg-white transition-[box-shadow,opacity] duration-150", thread.kind === "suggestion" || resolved
+            ? "ring-feedback-green"
+            : "ring-highlight-100", selected ? "ring-2" : hovered ? "ring-2 ring-offset-1" : "ring-1", resolved && !selected && "opacity-60"), onClick: (event) => {
+            event.stopPropagation();
+            onToggle();
+        }, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), children: [_jsx(Avatar, { src: author.avatarUrl, name: author.displayName, size: "sm", fallbackColor: author.fallbackColor, fallbackClassName: getFeedbackAvatarClassName(item), className: "size-5 !text-[9px] font-medium" }), replies > 0 && (_jsx("span", { "aria-hidden": "true", className: "bg-neutral-grey-100 absolute -right-1.5 -bottom-1 min-w-3.5 rounded-full px-0.5 text-center text-[9px] leading-3.5 font-medium text-white", children: replies }))] }));
+}
+//# sourceMappingURL=FeedbackMarginMarker.js.map

package/dist/editor/page-viewer/FeedbackMarginMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackMarginMarker.js","sourceRoot":"","sources":["../../../src/editor/page-viewer/FeedbackMarginMarker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EACL,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAYrE;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,MAAM,EACN,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,aAAa,GACa;IAC1B,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;IACzE,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;IAC3D,MAAM,OAAO,GACX,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;IAC7E,MAAM,QAAQ,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;IAElE,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,iBACD,wBAAwB,+BACT,MAAM,CAAC,IAAI,gBAC1B,GAAG,IAAI,OAAO,MAAM,CAAC,WAAW,EAAE,kBAChC,QAAQ,EACtB,KAAK,EAAE,GAAG,IAAI,OAAO,MAAM,CAAC,WAAW,EAAE,EACzC,SAAS,EAAE,EAAE,CACX,oIAAoI,EACpI,MAAM,CAAC,IAAI,KAAK,YAAY,IAAI,QAAQ;YACtC,CAAC,CAAC,qBAAqB;YACvB,CAAC,CAAC,oBAAoB,EACxB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,QAAQ,EACjE,QAAQ,IAAI,CAAC,QAAQ,IAAI,YAAY,CACtC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,QAAQ,EAAE,CAAC;QACb,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EACvC,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAExC,KAAC,MAAM,IACL,GAAG,EAAE,MAAM,CAAC,SAAS,EACrB,IAAI,EAAE,MAAM,CAAC,WAAW,EACxB,IAAI,EAAC,IAAI,EACT,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,iBAAiB,EAAE,0BAA0B,CAAC,IAAI,CAAC,EACnD,SAAS,EAAC,gCAAgC,GAC1C,EACD,OAAO,GAAG,CAAC,IAAI,CACd,8BACc,MAAM,EAClB,SAAS,EAAC,2IAA2I,YAEpJ,OAAO,GACH,CACR,IACM,CACV,CAAC;AACJ,CAAC"}

package/dist/editor/page-viewer/FeedbackMarginResizeHandle.d.ts

@@ -0,0 +1,23 @@
+export type FeedbackMarginResizeHandleProps = {
+    /** The column's current width; a drag starts from it. */
+    width: number;
+    /** What the pane leaves for the column (getFeedbackMarginRoom). */
+    maxWidth?: number;
+    /** Show a grip in the middle of the handle (a column as tall as the pane). */
+    grip?: boolean;
+    /**
+     * Dragging the edge past the minimum collapses the column into its rail
+     * (FEEDBACK_MARGIN_COLLAPSE_WIDTH). Only where the column has a rail.
+     */
+    collapsible?: boolean;
+    /** This is the edge of the collapsed rail: dragging it out opens the column. */
+    collapsed?: boolean;
+};
+/**
+ * The comment margin's left edge: drag it (or use the arrow keys) to make the
+ * column wider or narrower, double-click to go back to the default width.
+ * A collapsible column snaps into its rail when dragged past its minimum and
+ * back out of it within the same drag. Width and collapse are kept per
+ * browser (feedbackMarginWidth).
+ */
+export declare function FeedbackMarginResizeHandle({ width, maxWidth, grip, collapsible, collapsed, }: FeedbackMarginResizeHandleProps): import("react").JSX.Element;

package/dist/editor/page-viewer/FeedbackMarginResizeHandle.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "../../lib/utils";
+import { clampFeedbackMarginWidth, FEEDBACK_MARGIN_COLLAPSE_WIDTH, FEEDBACK_MARGIN_DEFAULT_WIDTH, FEEDBACK_MARGIN_MAX_WIDTH, FEEDBACK_MARGIN_MIN_WIDTH, FEEDBACK_MARGIN_RAIL_WIDTH, FEEDBACK_MARGIN_RESIZE_STEP, getFeedbackMarginPreferredWidth, setFeedbackMarginCollapsed, setFeedbackMarginPreferredWidth, } from "./feedbackMarginWidth";
+function restoreAfterDrag(drag) {
+    drag.iframes.forEach((value, iframe) => {
+        iframe.style.pointerEvents = value;
+    });
+    document.body.style.cursor = drag.bodyCursor;
+}
+/**
+ * The comment margin's left edge: drag it (or use the arrow keys) to make the
+ * column wider or narrower, double-click to go back to the default width.
+ * A collapsible column snaps into its rail when dragged past its minimum and
+ * back out of it within the same drag. Width and collapse are kept per
+ * browser (feedbackMarginWidth).
+ */
+export function FeedbackMarginResizeHandle({ width, maxWidth, grip = true, collapsible = false, collapsed = false, }) {
+    const dragRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const upperBound = clampFeedbackMarginWidth(FEEDBACK_MARGIN_MAX_WIDTH, maxWidth);
+    const resizeTo = (next, persist, restoreWidth) => {
+        if (collapsible && next < FEEDBACK_MARGIN_COLLAPSE_WIDTH) {
+            if (restoreWidth !== undefined) {
+                setFeedbackMarginPreferredWidth(restoreWidth, { persist });
+            }
+            setFeedbackMarginCollapsed(true, { persist });
+            return;
+        }
+        setFeedbackMarginPreferredWidth(clampFeedbackMarginWidth(next, maxWidth), {
+            persist,
+        });
+        if (collapsible)
+            setFeedbackMarginCollapsed(false, { persist });
+    };
+    const endDrag = (event) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        dragRef.current = null;
+        setDragging(false);
+        restoreAfterDrag(drag);
+        resizeTo(drag.startWidth + drag.startX - event.clientX, true, drag.restoreWidth);
+    };
+    // A pane that loses its room mid-drag turns the column into its rail, which
+    // unmounts the handle.
+    useEffect(() => () => {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        dragRef.current = null;
+        restoreAfterDrag(drag);
+    }, []);
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize comments", "aria-valuemin": collapsible ? FEEDBACK_MARGIN_RAIL_WIDTH : FEEDBACK_MARGIN_MIN_WIDTH, "aria-valuemax": upperBound, "aria-valuenow": width, tabIndex: 0, title: collapsed
+            ? "Drag to expand. Double-click to reset."
+            : "Drag to resize. Double-click to reset.", "data-testid": "feedback-margin-resize-handle", className: cn("group absolute inset-y-0 -left-[3px] z-30 flex w-[6px] cursor-ew-resize touch-none items-center justify-center transition-colors select-none", "hover:bg-neutral-grey-15 focus-visible:bg-neutral-grey-15 focus-visible:outline-none", dragging && "bg-neutral-grey-15"), onPointerDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            // The canvas iframe would swallow the moves the pointer makes over it.
+            const iframes = new Map();
+            document.querySelectorAll("iframe").forEach((iframe) => {
+                iframes.set(iframe, iframe.style.pointerEvents);
+                iframe.style.pointerEvents = "none";
+            });
+            dragRef.current = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startWidth: width,
+                restoreWidth: getFeedbackMarginPreferredWidth(),
+                iframes,
+                bodyCursor: document.body.style.cursor,
+            };
+            document.body.style.cursor = "ew-resize";
+            setDragging(true);
+        }, onPointerMove: (event) => {
+            const drag = dragRef.current;
+            if (!drag || drag.pointerId !== event.pointerId)
+                return;
+            // The column sits right of the canvas: dragging left widens it.
+            resizeTo(drag.startWidth + drag.startX - event.clientX, false, drag.restoreWidth);
+        }, onPointerUp: endDrag, onPointerCancel: endDrag, onLostPointerCapture: endDrag, onDoubleClick: () => resizeTo(FEEDBACK_MARGIN_DEFAULT_WIDTH, true), onKeyDown: (event) => {
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            event.preventDefault();
+            const widen = event.key === "ArrowLeft";
+            if (collapsed) {
+                // The rail opens at the width the column had.
+                if (widen)
+                    setFeedbackMarginCollapsed(false);
+                return;
+            }
+            if (!widen && collapsible && width <= FEEDBACK_MARGIN_MIN_WIDTH) {
+                setFeedbackMarginCollapsed(true);
+                return;
+            }
+            resizeTo(width +
+                (widen
+                    ? FEEDBACK_MARGIN_RESIZE_STEP
+                    : -FEEDBACK_MARGIN_RESIZE_STEP), true);
+        }, children: grip && (_jsx("div", { className: cn("h-6 w-0.5 rounded-full bg-transparent transition-colors", "group-hover:bg-neutral-grey-50 group-focus-visible:bg-neutral-grey-50", dragging && "bg-neutral-grey-50") })) }));
+}
+//# sourceMappingURL=FeedbackMarginResizeHandle.js.map

package/dist/editor/page-viewer/FeedbackMarginResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackMarginResizeHandle.js","sourceRoot":"","sources":["../../../src/editor/page-viewer/FeedbackMarginResizeHandle.tsx"],"names":[],"mappings":"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"}

package/dist/editor/page-viewer/InteractivePreviewBar.d.ts

@@ -0,0 +1,24 @@
+import type { RenderingState } from "../services/renderingsService";
+import type { InteractivePreviewStatus } from "./interactivePreview";
+type InteractivePreviewBarProps = {
+    status: InteractivePreviewStatus;
+    /** The page has client code to run: "Run client code" is offered. */
+    canRunClientCode: boolean;
+    onToggle: (run: boolean) => void;
+    /** The page's dynamic renderings with their approval state. */
+    renderings?: readonly RenderingState[];
+    renderingsLoading?: boolean;
+    renderingsError?: string;
+    /** The user may approve and revoke (an administrator, not a sandbox). */
+    canApprove?: boolean;
+    onReview?: (rendering: RenderingState) => void;
+    onRevoke?: (rendering: RenderingState) => void;
+};
+/**
+ * Sits above the preview canvas when the page has dynamic renderings. It
+ * lists them with their approval state (published pages show only approved
+ * ones), lets administrators review, approve and revoke them, and offers to
+ * run the page's client code in a sealed frame. While that runs, it says so.
+ */
+export declare function InteractivePreviewBar({ status, canRunClientCode, onToggle, renderings, renderingsLoading, renderingsError, canApprove, onReview, onRevoke, }: InteractivePreviewBarProps): import("react").JSX.Element;
+export {};

package/dist/editor/page-viewer/InteractivePreviewBar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeXmlIcon, PaletteIcon, ShieldAlertIcon } from "lucide-react";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Switch } from "../../components/ui/switch";
+import { cn } from "../../lib/utils";
+import { Spinner } from "../ui/Spinner";
+import { getRenderingApprovalStatus, getRenderingDisplayName, RENDERING_APPROVAL_BADGE_CLASSES, RENDERING_APPROVAL_DESCRIPTIONS, RENDERING_APPROVAL_LABELS, } from "./renderingApproval";
+/**
+ * Sits above the preview canvas when the page has dynamic renderings. It
+ * lists them with their approval state (published pages show only approved
+ * ones), lets administrators review, approve and revoke them, and offers to
+ * run the page's client code in a sealed frame. While that runs, it says so.
+ */
+export function InteractivePreviewBar({ status, canRunClientCode, onToggle, renderings = [], renderingsLoading = false, renderingsError, canApprove = false, onReview, onRevoke, }) {
+    const running = status === "on";
+    return (_jsxs("div", { role: "region", "aria-label": "Dynamic renderings", "data-testid": "interactive-preview-bar", "data-state": status, 
+        // pl-14 clears the editor form toggle that floats over the canvas's top-left corner (PageViewer).
+        className: cn("text-neutral-grey-100 flex max-h-24 w-full shrink-0 items-start gap-2 overflow-y-auto border-b py-1.5 pr-3 pl-14 text-xs", running
+            ? "bg-feedback-orange-light border-feedback-orange"
+            : "bg-feedback-blue-light border-border-default"), children: [running ? (_jsx(ShieldAlertIcon, { className: "text-feedback-orange mt-0.5 h-4 w-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" })) : (_jsx(CodeXmlIcon, { className: "text-feedback-blue mt-0.5 h-4 w-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" })), _jsxs("div", { className: "flex min-h-5 min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx("span", { className: "font-medium", "data-testid": "interactive-preview-title", children: running
+                            ? "Client code runs in a sealed frame. Editing is off."
+                            : "Dynamic renderings" }), renderings.map((rendering) => {
+                        const approval = getRenderingApprovalStatus(rendering);
+                        const name = getRenderingDisplayName(rendering);
+                        return (_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-center gap-1.5", "data-testid": "preview-rendering", "data-rendering-id": rendering.id, "data-approval": approval, children: [rendering.kind === "theme" && (_jsx(PaletteIcon, { className: "text-neutral-grey-50 h-3.5 w-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" })), _jsx("span", { className: "max-w-48 truncate", title: rendering.path || name, children: name }), _jsx(Badge, { size: "sm", variant: "secondary", className: RENDERING_APPROVAL_BADGE_CLASSES[approval], title: RENDERING_APPROVAL_DESCRIPTIONS[approval], children: RENDERING_APPROVAL_LABELS[approval] }), canApprove &&
+                                    !rendering.sandbox &&
+                                    (rendering.approved ? (_jsx(Button, { variant: "link", size: "xxs", className: "h-auto p-0 text-xs", onClick: () => onRevoke?.(rendering), "data-testid": "preview-rendering-revoke", children: "Revoke" })) : (_jsx(Button, { variant: "link", size: "xxs", className: "h-auto p-0 text-xs", onClick: () => onReview?.(rendering), "data-testid": "preview-rendering-review", children: "Review and approve" })))] }, rendering.id));
+                    }), renderingsLoading && renderings.length === 0 && (_jsx(Spinner, { size: "xs" })), renderingsError && (_jsxs("span", { className: "text-feedback-red truncate", title: renderingsError, "data-testid": "preview-renderings-error", children: ["Approval state unavailable: ", renderingsError] }))] }), (canRunClientCode || status !== "off") && (_jsxs("label", { className: "flex shrink-0 cursor-pointer items-center gap-2 select-none", title: "Client code that is not approved does not run here. This runs all client code of the page in a sealed frame without access to the editor.", children: [status === "starting" && _jsx(Spinner, { size: "xs" }), _jsx("span", { className: "font-medium whitespace-nowrap", children: "Run client code" }), _jsx(Switch, { checked: status !== "off", disabled: status === "starting", onCheckedChange: onToggle, "aria-label": "Run client code", "data-testid": "interactive-preview-toggle" })] }))] }));
+}
+//# sourceMappingURL=InteractivePreviewBar.js.map

package/dist/editor/page-viewer/InteractivePreviewBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractivePreviewBar.js","sourceRoot":"","sources":["../../../src/editor/page-viewer/InteractivePreviewBar.tsx"],"names":[],"mappings":"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"}

package/dist/editor/page-viewer/MobileCommentsPanel.d.ts

@@ -0,0 +1,16 @@
+export declare const MOBILE_COMMENTS_PANEL_DEFAULT_HEIGHT = 300;
+export declare const MOBILE_COMMENTS_PANEL_MIN_HEIGHT = 160;
+/**
+ * The phone's comments surface: the same thread cards as the desktop margin,
+ * as a plain list in the panel below the canvas, in page order. The canvas
+ * highlights publish where every thread's text sits; the list follows that
+ * order, drafts first, and threads the page does not render come last under
+ * a divider. Items without a canvas list their threads by activity.
+ *
+ * Selecting a card scrolls the canvas to the highlight and never opens the
+ * edit form (that would cover this panel); tapping the canvas does.
+ */
+export declare function MobileCommentsPanel({ safeAreaInset, }: {
+    /** Pad the bottom edge for the home indicator when no rail sits below. */
+    safeAreaInset: boolean;
+}): import("react").JSX.Element | null;