@parhelia/core 0.3.12832 → 0.3.12833

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

@@ -0,0 +1,77 @@
+import { type PreviewTokenResult } from "../services/previewTokenService";
+import { type CanvasRenderings, type InteractivePreviewPage, type InteractivePreviewState } from "./interactivePreview";
+export type InteractivePreviewDependencies = {
+    fetchToken: (page: InteractivePreviewPage) => Promise<PreviewTokenResult>;
+    now: () => number;
+    origin: () => string;
+    onError: (message: string) => void;
+};
+type InteractivePreviewTarget = {
+    mode: string | undefined;
+    page: InteractivePreviewPage | undefined;
+};
+/**
+ * Owns one interactive preview session: the renderings read from the canvas
+ * (the canvas's instance only reads them), the token and the sealed frame's
+ * key (the review dialog's instance). A small external store
+ * rather than React state so that stopping (explicitly, or because the canvas
+ * left preview mode or the page) synchronously invalidates a token request
+ * that is still in flight.
+ */
+export declare class InteractivePreviewController {
+    private dependencies;
+    private state;
+    private readonly listeners;
+    private target;
+    private requestId;
+    private canvasUrl;
+    constructor(dependencies: InteractivePreviewDependencies);
+    setDependencies(dependencies: InteractivePreviewDependencies): void;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => InteractivePreviewState;
+    /** The canvas's mode and page. A session for anything else ends. */
+    setTarget: (target: InteractivePreviewTarget) => void;
+    /** Records the dynamic renderings the normal preview canvas shows. */
+    setHint: (renderings: CanvasRenderings) => void;
+    /**
+     * Mints a token and shows the sealed frame, which loads the page with the
+     * query of `canvasUrl` (the preview canvas URL).
+     */
+    start: (canvasUrl?: string) => void;
+    /** Closes the sealed frame and forgets the token. */
+    stop: () => void;
+    /**
+     * Reloads the sealed frame, with the query of `canvasUrl` when given. A
+     * token close to expiry is renewed first; time alone never reloads the
+     * frame.
+     */
+    reload: (canvasUrl?: string) => void;
+    /** Drops the answer of a token request still in flight. */
+    dispose(): void;
+    private mint;
+    private dispatch;
+}
+export type UseInteractivePreviewOptions = {
+    mode: string | undefined;
+    page: InteractivePreviewPage | undefined;
+    /** Why a session could not start; only callers that start one need it. */
+    onError?: (message: string) => void;
+    fetchToken?: InteractivePreviewDependencies["fetchToken"];
+    now?: () => number;
+};
+export declare function useInteractivePreview({ mode, page, onError, fetchToken, now, }: UseInteractivePreviewOptions): {
+    status: import("./interactivePreview").InteractivePreviewStatus;
+    /** True while the sealed frame is running for this page. */
+    active: boolean;
+    frameKey: number;
+    frameUrl: string | undefined;
+    /** Rendering ids the toggle is offered for (empty: no toggle). */
+    offeredRenderingIds: string[];
+    /** The page's dynamic renderings the preview strip lists. */
+    renderingIds: string[];
+    setHint: (renderings: CanvasRenderings) => void;
+    start: (canvasUrl?: string) => void;
+    stop: () => void;
+    reload: (canvasUrl?: string) => void;
+};
+export {};

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

@@ -0,0 +1,210 @@
+import { useEffect, useLayoutEffect, useState, useSyncExternalStore, } from "react";
+import { fetchPreviewToken, } from "../services/previewTokenService";
+import { buildInteractivePreviewFrameUrl, createInteractivePreviewSession, getInteractivePreviewPageKey, getOfferedClientCodeRenderings, getPreviewRenderingIds, INITIAL_INTERACTIVE_PREVIEW_STATE, interactivePreviewReducer, isInteractivePreviewActive, isPreviewTokenDue, shouldStopInteractivePreview, } from "./interactivePreview";
+/**
+ * Owns one interactive preview session: the renderings read from the canvas
+ * (the canvas's instance only reads them), the token and the sealed frame's
+ * key (the review dialog's instance). A small external store
+ * rather than React state so that stopping (explicitly, or because the canvas
+ * left preview mode or the page) synchronously invalidates a token request
+ * that is still in flight.
+ */
+export class InteractivePreviewController {
+    dependencies;
+    state = INITIAL_INTERACTIVE_PREVIEW_STATE;
+    listeners = new Set();
+    target = {
+        mode: undefined,
+        page: undefined,
+    };
+    requestId = 0;
+    // The latest preview canvas URL; the frame takes it on its next (re)load.
+    canvasUrl;
+    constructor(dependencies) {
+        this.dependencies = dependencies;
+    }
+    setDependencies(dependencies) {
+        this.dependencies = dependencies;
+    }
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    getSnapshot = () => this.state;
+    /** The canvas's mode and page. A session for anything else ends. */
+    setTarget = (target) => {
+        this.target = target;
+        if (shouldStopInteractivePreview(this.state, {
+            mode: target.mode,
+            pageKey: getInteractivePreviewPageKey(target.page),
+        })) {
+            this.stop();
+        }
+    };
+    /** Records the dynamic renderings the normal preview canvas shows. */
+    setHint = (renderings) => {
+        this.dispatch({
+            type: "hint",
+            pageKey: this.target.mode === "preview"
+                ? getInteractivePreviewPageKey(this.target.page)
+                : undefined,
+            renderings,
+        });
+    };
+    /**
+     * Mints a token and shows the sealed frame, which loads the page with the
+     * query of `canvasUrl` (the preview canvas URL).
+     */
+    start = (canvasUrl) => {
+        const { mode, page } = this.target;
+        const pageKey = getInteractivePreviewPageKey(page);
+        if (!page ||
+            !pageKey ||
+            this.state.status !== "off" ||
+            getOfferedClientCodeRenderings(this.state, { mode, pageKey }).length ===
+                0) {
+            return;
+        }
+        this.canvasUrl = canvasUrl;
+        const requestId = ++this.requestId;
+        this.dispatch({ type: "start", pageKey, requestId });
+        void this.mint(requestId, page);
+    };
+    /** Closes the sealed frame and forgets the token. */
+    stop = () => {
+        this.requestId += 1;
+        this.dispatch({ type: "stop" });
+    };
+    /**
+     * Reloads the sealed frame, with the query of `canvasUrl` when given. A
+     * token close to expiry is renewed first; time alone never reloads the
+     * frame.
+     */
+    reload = (canvasUrl) => {
+        const current = this.state;
+        if (current.status !== "on" || !current.session)
+            return;
+        if (canvasUrl)
+            this.canvasUrl = canvasUrl;
+        // A renewed token is already on its way and remounts the frame.
+        if (current.pendingRequestId !== undefined)
+            return;
+        if (!isPreviewTokenDue(current.session, this.dependencies.now())) {
+            this.dispatch({ type: "remount", canvasUrl: this.canvasUrl });
+            return;
+        }
+        const page = this.target.page;
+        if (!page || getInteractivePreviewPageKey(page) !== current.pageKey) {
+            return;
+        }
+        const requestId = ++this.requestId;
+        this.dispatch({ type: "refreshStarted", requestId });
+        void this.mint(requestId, page);
+    };
+    /** Drops the answer of a token request still in flight. */
+    dispose() {
+        this.requestId += 1;
+    }
+    async mint(requestId, page) {
+        let session;
+        let error;
+        try {
+            const result = await this.dependencies.fetchToken(page);
+            if (result.ok) {
+                session = createInteractivePreviewSession(result.data, this.dependencies.now(), this.dependencies.origin());
+                if (!session) {
+                    error = "The server returned an invalid interactive preview address.";
+                }
+            }
+            else {
+                error = result.message;
+            }
+        }
+        catch (caught) {
+            error =
+                caught instanceof Error
+                    ? caught.message
+                    : "The preview token could not be created.";
+        }
+        // Stopped, restarted or superseded while the request was in flight.
+        if (requestId !== this.requestId)
+            return;
+        if (session) {
+            this.dispatch({
+                type: "minted",
+                requestId,
+                session,
+                canvasUrl: this.canvasUrl,
+            });
+            return;
+        }
+        this.dispatch({ type: "mintFailed", requestId });
+        this.dependencies.onError(error ?? "The preview token could not be created.");
+    }
+    dispatch(action) {
+        const next = interactivePreviewReducer(this.state, action);
+        if (next === this.state)
+            return;
+        this.state = next;
+        this.listeners.forEach((listener) => listener());
+    }
+}
+const getWindowOrigin = () => window.location.origin;
+const ignoreError = () => { };
+const defaultFetchToken = (page) => fetchPreviewToken(page);
+export function useInteractivePreview({ mode, page, onError = ignoreError, fetchToken = defaultFetchToken, now = Date.now, }) {
+    const [controller] = useState(() => new InteractivePreviewController({
+        fetchToken,
+        now,
+        origin: getWindowOrigin,
+        onError,
+    }));
+    useLayoutEffect(() => {
+        controller.setDependencies({
+            fetchToken,
+            now,
+            origin: getWindowOrigin,
+            onError,
+        });
+    });
+    const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+    const pageId = page?.id;
+    const pageLanguage = page?.language;
+    const pageVersion = page?.version;
+    // Layout effect: ends a session for another page or mode before the browser
+    // paints, and before the canvas's own effects read the renderings.
+    useLayoutEffect(() => {
+        controller.setTarget({
+            mode,
+            page: pageId && pageLanguage && typeof pageVersion === "number"
+                ? { id: pageId, language: pageLanguage, version: pageVersion }
+                : undefined,
+        });
+    }, [controller, mode, pageId, pageLanguage, pageVersion]);
+    useEffect(() => () => controller.dispose(), [controller]);
+    const context = { mode, pageKey: getInteractivePreviewPageKey(page) };
+    const active = isInteractivePreviewActive(state, context);
+    // The canvas query the frame last (re)loaded with, so a reload after a
+    // preview date change loads what the canvas would show.
+    const frameUrl = active && state.session && page
+        ? buildInteractivePreviewFrameUrl(state.session.prefix, page, state.canvasUrl, getWindowOrigin())
+        : undefined;
+    return {
+        status: state.status,
+        /** True while the sealed frame is running for this page. */
+        active,
+        frameKey: state.frameKey,
+        frameUrl,
+        /** Rendering ids the toggle is offered for (empty: no toggle). */
+        offeredRenderingIds: getOfferedClientCodeRenderings(state, context),
+        /** The page's dynamic renderings the preview strip lists. */
+        renderingIds: getPreviewRenderingIds(state, context),
+        setHint: controller.setHint,
+        start: controller.start,
+        stop: controller.stop,
+        reload: controller.reload,
+    };
+}
+//# sourceMappingURL=useInteractivePreview.js.map

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

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

package/dist/editor/reviews/CollapsibleText.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+/**
+ * Clamps long content to a few lines with a "Show more" toggle, so a long
+ * comment in the margin stays a short balloon until the reader asks for it.
+ * The toggle only appears when the content actually overflows the clamp.
+ */
+export declare function CollapsibleText({ children, lines, className, expanded: controlledExpanded, onExpandedChange, }: {
+    children: ReactNode;
+    lines?: number;
+    className?: string;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+}): import("react").JSX.Element;

package/dist/editor/reviews/CollapsibleText.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Clamps long content to a few lines with a "Show more" toggle, so a long
+ * comment in the margin stays a short balloon until the reader asks for it.
+ * The toggle only appears when the content actually overflows the clamp.
+ */
+export function CollapsibleText({ children, lines = 4, className, expanded: controlledExpanded, onExpandedChange, }) {
+    const contentRef = useRef(null);
+    const [localExpanded, setLocalExpanded] = useState(false);
+    const expanded = controlledExpanded ?? localExpanded;
+    const [overflows, setOverflows] = useState(false);
+    useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element || expanded)
+            return;
+        const check = () => setOverflows(element.scrollHeight > element.clientHeight + 1);
+        check();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(check);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [expanded, children]);
+    const setExpanded = (next) => {
+        setLocalExpanded(next);
+        onExpandedChange?.(next);
+    };
+    return (_jsxs("div", { className: className, children: [_jsx("div", { ref: contentRef, "data-testid": "collapsible-text", "data-collapsed": !expanded && overflows ? "true" : undefined, className: cn(!expanded && "overflow-hidden"), style: expanded
+                    ? undefined
+                    : {
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        WebkitLineClamp: lines,
+                    }, children: children }), (overflows || expanded) && (_jsx("button", { type: "button", "data-testid": "collapsible-text-toggle", className: "text-neutral-grey-50 hover:text-neutral-grey-100 mt-1 text-left underline-offset-2 hover:underline", onClick: (event) => {
+                    event.stopPropagation();
+                    setExpanded(!expanded);
+                }, children: expanded ? "Show less" : "Show more" }))] }));
+}
+//# sourceMappingURL=CollapsibleText.js.map

package/dist/editor/reviews/CollapsibleText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleText.js","sourceRoot":"","sources":["../../../src/editor/reviews/CollapsibleText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,GAAG,CAAC,EACT,SAAS,EACT,QAAQ,EAAE,kBAAkB,EAC5B,gBAAgB,GAOjB;IACC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,kBAAkB,IAAI,aAAa,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,OAAO,IAAI,QAAQ;YAAE,OAAO;QACjC,MAAM,KAAK,GAAG,GAAG,EAAE,CACjB,YAAY,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QAChE,KAAK,EAAE,CAAC;QACR,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAClD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,MAAM,WAAW,GAAG,CAAC,IAAa,EAAE,EAAE;QACpC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,gBAAgB,EAAE,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,cACE,GAAG,EAAE,UAAU,iBACH,kBAAkB,oBACd,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3D,SAAS,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,EAC7C,KAAK,EACH,QAAQ;oBACN,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC;wBACE,OAAO,EAAE,aAAa;wBACtB,eAAe,EAAE,UAAU;wBAC3B,eAAe,EAAE,KAAK;qBACvB,YAGN,QAAQ,GACL,EACL,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAC1B,iBACE,IAAI,EAAC,QAAQ,iBACD,yBAAyB,EACrC,SAAS,EAAC,oGAAoG,EAC9G,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACjB,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,YAEA,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,GAC9B,CACV,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentImageAttachments.d.ts

@@ -0,0 +1,12 @@
+import type { CommentImageAttachment } from "./useCommentImagePaste";
+/**
+ * Thumbnail strip shown above a comment composer for pasted or dropped
+ * screenshots. Uploading thumbs show a spinner, failed ones a red frame with
+ * the error as tooltip; finished ones open the shared image viewer.
+ */
+export declare function CommentImageAttachments({ attachments, onRemove, disabled, className, }: {
+    attachments: CommentImageAttachment[];
+    onRemove: (key: string) => void;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/editor/reviews/CommentImageAttachments.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { AgentImagePreview } from "../ai/AgentImagePreview";
+/**
+ * Thumbnail strip shown above a comment composer for pasted or dropped
+ * screenshots. Uploading thumbs show a spinner, failed ones a red frame with
+ * the error as tooltip; finished ones open the shared image viewer.
+ */
+export function CommentImageAttachments({ attachments, onRemove, disabled = false, className, }) {
+    if (attachments.length === 0)
+        return null;
+    return (_jsx("div", { className: cn("flex flex-wrap items-start gap-2", className), "data-testid": "comment-image-attachments", children: attachments.map((attachment) => {
+            const thumb = (_jsx("img", { src: attachment.previewUrl, alt: attachment.fileName, className: cn("h-12 w-12 rounded-md object-cover", attachment.status !== "done" && "opacity-60"), draggable: false }));
+            return (_jsxs("div", { className: cn("border-border-default group relative shrink-0 overflow-hidden rounded-md border bg-white", attachment.status === "error" && "border-destructive"), "data-testid": "comment-image-attachment", "data-status": attachment.status, "data-image-id": attachment.imageId, title: attachment.error ?? attachment.fileName, children: [attachment.status === "done" ? (_jsx(AgentImagePreview, { src: attachment.previewUrl, alt: attachment.fileName, fileName: attachment.fileName, overlayClassName: "z-[300]", contentClassName: "z-[301]", portalContainer: typeof document === "undefined" ? null : document.body, children: _jsx("button", { type: "button", className: "block cursor-zoom-in", "aria-label": `Preview ${attachment.fileName}`, children: thumb }) })) : (thumb), attachment.status === "uploading" && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60", "data-testid": "comment-image-uploading", role: "status", "aria-label": "Uploading image", children: _jsx(Loader2, { className: "text-neutral-grey-100 h-4 w-4 animate-spin", strokeWidth: 1.5 }) })), attachment.status === "error" && (_jsx("div", { className: "bg-destructive/80 absolute inset-x-0 bottom-0 truncate px-1 text-[9px] leading-4 text-white", "data-testid": "comment-image-upload-error", role: "alert", children: "Upload failed" })), !disabled && (_jsx("button", { type: "button", onClick: () => onRemove(attachment.key), className: "bg-neutral-grey-100 hover:bg-neutral-grey-100/90 absolute top-0.5 right-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full text-white shadow-sm", "aria-label": "Remove image", title: "Remove image", "data-testid": "comment-image-remove", children: _jsx(X, { className: "h-3 w-3", strokeWidth: 2 }) }))] }, attachment.key));
+        }) }));
+}
+//# sourceMappingURL=CommentImageAttachments.js.map

package/dist/editor/reviews/CommentImageAttachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentImageAttachments.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentImageAttachments.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,EACtC,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,GAMV;IACC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE1C,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,iBAChD,2BAA2B,YAEtC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;YAC9B,MAAM,KAAK,GAAG,CACZ,cACE,GAAG,EAAE,UAAU,CAAC,UAAU,EAC1B,GAAG,EAAE,UAAU,CAAC,QAAQ,EACxB,SAAS,EAAE,EAAE,CACX,mCAAmC,EACnC,UAAU,CAAC,MAAM,KAAK,MAAM,IAAI,YAAY,CAC7C,EACD,SAAS,EAAE,KAAK,GAChB,CACH,CAAC;YAEF,OAAO,CACL,eAEE,SAAS,EAAE,EAAE,CACX,0FAA0F,EAC1F,UAAU,CAAC,MAAM,KAAK,OAAO,IAAI,oBAAoB,CACtD,iBACW,0BAA0B,iBACzB,UAAU,CAAC,MAAM,mBACf,UAAU,CAAC,OAAO,EACjC,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,aAE7C,UAAU,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,iBAAiB,IAChB,GAAG,EAAE,UAAU,CAAC,UAAU,EAC1B,GAAG,EAAE,UAAU,CAAC,QAAQ,EACxB,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,gBAAgB,EAAC,SAAS,EAC1B,gBAAgB,EAAC,SAAS,EAC1B,eAAe,EACb,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,YAGxD,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sBAAsB,gBACpB,WAAW,UAAU,CAAC,QAAQ,EAAE,YAE3C,KAAK,GACC,GACS,CACrB,CAAC,CAAC,CAAC,CACF,KAAK,CACN,EAEA,UAAU,CAAC,MAAM,KAAK,WAAW,IAAI,CACpC,cACE,SAAS,EAAC,+DAA+D,iBAC7D,yBAAyB,EACrC,IAAI,EAAC,QAAQ,gBACF,iBAAiB,YAE5B,KAAC,OAAO,IACN,SAAS,EAAC,4CAA4C,EACtD,WAAW,EAAE,GAAG,GAChB,GACE,CACP,EACA,UAAU,CAAC,MAAM,KAAK,OAAO,IAAI,CAChC,cACE,SAAS,EAAC,6FAA6F,iBAC3F,4BAA4B,EACxC,IAAI,EAAC,OAAO,8BAGR,CACP,EAEA,CAAC,QAAQ,IAAI,CACZ,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EACvC,SAAS,EAAC,+JAA+J,gBAC9J,cAAc,EACzB,KAAK,EAAC,cAAc,iBACR,sBAAsB,YAElC,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,EAAC,WAAW,EAAE,CAAC,GAAI,GAClC,CACV,KAnEI,UAAU,CAAC,GAAG,CAoEf,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentQuote.d.ts

@@ -0,0 +1,13 @@
+import type { Comment } from "../../types";
+/**
+ * How following a quote reaches the quoted comment:
+ * - `dom`: reveal the quoted comment inside the same surface (list, popover)
+ *   by scrolling its nearest feedback scroll container;
+ * - `select`: select the quoted comment so the owning surface pins its thread
+ *   and the canvas scrolls to its anchor (the comment margin).
+ */
+export type FeedbackNavigation = "dom" | "select";
+export declare function CommentQuote({ comment, navigation, }: {
+    comment: Comment;
+    navigation?: FeedbackNavigation;
+}): import("react").JSX.Element;

package/dist/editor/reviews/CommentQuote.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatDate } from "../utils";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { useFeedbackAuthor } from "./feedbackAvatar";
+import { stripCommentImages } from "./commentImages";
+import { EmojiText } from "../../components/emoji/EmojiText";
+import { isTextSelectionClick, selectFeedbackComment, } from "./feedbackSelection";
+import { revealInFeedbackScrollContainer } from "./scrollWithin";
+export function CommentQuote({ comment, navigation = "dom", }) {
+    const author = useFeedbackAuthor(comment);
+    const editContext = useEditContext();
+    const fieldsContext = useFieldsEditContext();
+    const created = comment.created ? new Date(comment.created) : undefined;
+    const date = created && !Number.isNaN(created.getTime()) ? created : undefined;
+    return (_jsx("button", { type: "button", className: "border-border-default hover:bg-neutral-grey-5 focus-visible:ring-highlight-100 mb-2 block w-full cursor-pointer rounded-md border bg-white px-3 py-2 text-left shadow-sm focus-visible:ring-2 focus-visible:outline-none", "aria-label": `Jump to comment by ${author.displayName}`, "data-testid": "comment-quote", onClick: (event) => {
+            event.stopPropagation();
+            if (isTextSelectionClick(event.currentTarget, event))
+                return;
+            if (navigation === "select") {
+                void selectFeedbackComment(comment, editContext, fieldsContext);
+                return;
+            }
+            // Keep navigation within the surface containing this quote: the same
+            // comment can also be mounted in the sidebar behind an open popover.
+            const thread = event.currentTarget.closest("[data-comment-thread]");
+            const target = Array.from(thread?.querySelectorAll("[data-comment-id]") || []).find((element) => element.dataset.commentId === comment.id);
+            if (!target)
+                return;
+            target.focus({ preventScroll: true });
+            // Only the surface's own scroll container moves; scrollIntoView would
+            // also scroll every ancestor (editor shell, overlay roots).
+            revealInFeedbackScrollContainer(target, { behavior: "smooth" });
+        }, children: _jsxs("span", { className: "border-neutral-grey-50 block min-w-0 border-l-2 pl-2", children: [_jsxs("span", { className: "text-neutral-grey-50 mb-0.5 flex flex-wrap items-baseline gap-x-2 text-xs leading-4", children: [_jsx("span", { className: "min-w-0 truncate font-medium", children: author.displayName }), date && (_jsx("time", { dateTime: date.toISOString(), children: formatDate(date) }))] }), _jsx("span", { className: "text-neutral-grey-100 line-clamp-3 text-sm leading-5 [overflow-wrap:anywhere] whitespace-pre-wrap select-text", children: _jsx(EmojiText, { text: stripCommentImages(comment.text) }) })] }) }));
+}
+//# sourceMappingURL=CommentQuote.js.map

package/dist/editor/reviews/CommentQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentQuote.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentQuote.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,+BAA+B,EAAE,MAAM,gBAAgB,CAAC;AAWjE,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,UAAU,GAAG,KAAK,GAInB;IACC,MAAM,MAAM,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;IAC7C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,MAAM,IAAI,GACR,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0NAA0N,gBACxN,sBAAsB,MAAM,CAAC,WAAW,EAAE,iBAC1C,eAAe,EAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC;gBAAE,OAAO;YAC7D,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;gBAC5B,KAAK,qBAAqB,CAAC,OAAO,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;gBAChE,OAAO;YACT,CAAC;YACD,qEAAqE;YACrE,qEAAqE;YACrE,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;YACpE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,MAAM,EAAE,gBAAgB,CAAc,mBAAmB,CAAC,IAAI,EAAE,CACjE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACtC,sEAAsE;YACtE,4DAA4D;YAC5D,+BAA+B,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC,YAED,gBAAM,SAAS,EAAC,sDAAsD,aACpE,gBAAM,SAAS,EAAC,qFAAqF,aACnG,eAAM,SAAS,EAAC,8BAA8B,YAC3C,MAAM,CAAC,WAAW,GACd,EACN,IAAI,IAAI,CACP,eAAM,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,YAAG,UAAU,CAAC,IAAI,CAAC,GAAQ,CAC9D,IACI,EACP,eAAM,SAAS,EAAC,+GAA+G,YAC7H,KAAC,SAAS,IAAC,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,GAAI,GAChD,IACF,GACA,CACV,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentTargetOutline.d.ts

@@ -0,0 +1,13 @@
+import type { PickableRect } from "./commentTargetPicker";
+/**
+ * Outlines what a click would comment on while picking a comment target,
+ * with a label naming it. Never takes pointer events: the surface or form
+ * underneath owns the pointer.
+ */
+export declare function CommentTargetOutline({ rect, label, position, zIndex, }: {
+    rect: PickableRect;
+    label: string;
+    /** `absolute` inside the canvas overlay layer, `fixed` over editor forms. */
+    position: "absolute" | "fixed";
+    zIndex: number;
+}): import("react").JSX.Element;

package/dist/editor/reviews/CommentTargetOutline.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageCirclePlus } from "lucide-react";
+/**
+ * Outlines what a click would comment on while picking a comment target,
+ * with a label naming it. Never takes pointer events: the surface or form
+ * underneath owns the pointer.
+ */
+export function CommentTargetOutline({ rect, label, position, zIndex, }) {
+    // The label sits above the box, or inside its top edge when there is no
+    // room above (targets at the very top of the page or viewport).
+    const labelInside = rect.y < 22;
+    return (_jsx("div", { "data-testid": "comment-target-outline", className: "border-highlight-100 bg-highlight-100/5 pointer-events-none rounded-[3px] border-2", style: {
+            position,
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+            zIndex,
+        }, children: _jsxs("div", { "data-testid": "comment-target-label", className: "bg-highlight-100 absolute left-[-2px] flex max-w-[260px] items-center gap-1 rounded-[3px] px-1.5 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap text-white", style: labelInside ? { top: -2 } : { bottom: "100%" }, children: [_jsx(MessageCirclePlus, { className: "h-3 w-3 shrink-0", strokeWidth: 1.5 }), _jsx("span", { className: "truncate", children: label })] }) }));
+}
+//# sourceMappingURL=CommentTargetOutline.js.map

package/dist/editor/reviews/CommentTargetOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentTargetOutline.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentTargetOutline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,GAOP;IACC,wEAAwE;IACxE,gEAAgE;IAChE,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;IAEhC,OAAO,CACL,6BACc,wBAAwB,EACpC,SAAS,EAAC,oFAAoF,EAC9F,KAAK,EAAE;YACL,QAAQ;YACR,IAAI,EAAE,IAAI,CAAC,CAAC;YACZ,GAAG,EAAE,IAAI,CAAC,CAAC;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM;SACP,YAED,8BACc,sBAAsB,EAClC,SAAS,EAAC,wKAAwK,EAClL,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,aAErD,KAAC,iBAAiB,IAAC,SAAS,EAAC,kBAAkB,EAAC,WAAW,EAAE,GAAG,GAAI,EACpE,eAAM,SAAS,EAAC,UAAU,YAAE,KAAK,GAAQ,IACrC,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentTargetPickerDomLayer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The editor-document half of comment target picking: form fields become
+ * pickable, the picker cursor applies across the editor, Escape or a click on
+ * anything that is not a target leaves the mode. Mounted only while picking.
+ * (The canvas is covered by `CommentTargetPickerCanvasLayer`.)
+ */
+export declare function CommentTargetPickerDomLayer(): import("react").ReactPortal | null;

package/dist/editor/reviews/CommentTargetPickerDomLayer.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useEditContext } from "../client/editContext";
+import { COMMENT_PICKER_CURSOR, COMMENT_PICKER_IGNORE_ATTRIBUTE, stopCommentTargetPicking, } from "./commentTargetPicker";
+import { CommentTargetOutline } from "./CommentTargetOutline";
+/** Form fields of the editor (item form, page side form) carry these. */
+const FORM_FIELD_SELECTOR = "[data-field-id][data-itemid]";
+const PICKING_ATTRIBUTE = "data-comment-target-picking";
+function closestFormField(target) {
+    return target instanceof Element
+        ? target.closest(FORM_FIELD_SELECTOR)
+        : null;
+}
+function readFieldDescriptor(element) {
+    const fieldId = element.getAttribute("data-field-id");
+    const itemId = element.getAttribute("data-itemid");
+    if (!fieldId || !itemId)
+        return null;
+    const version = Number.parseInt(element.getAttribute("data-version") ?? "", 10);
+    return {
+        fieldId,
+        item: {
+            id: itemId,
+            language: element.getAttribute("data-language") ?? "",
+            version: Number.isFinite(version) ? version : 0,
+        },
+    };
+}
+/**
+ * The editor-document half of comment target picking: form fields become
+ * pickable, the picker cursor applies across the editor, Escape or a click on
+ * anything that is not a target leaves the mode. Mounted only while picking.
+ * (The canvas is covered by `CommentTargetPickerCanvasLayer`.)
+ */
+export function CommentTargetPickerDomLayer() {
+    const editContext = useEditContext();
+    const [hovered, setHovered] = useState();
+    // The edit context changes identity with every editor state change; the
+    // listeners only need its latest `addComment`.
+    const addCommentRef = useRef(editContext?.addComment);
+    addCommentRef.current = editContext?.addComment;
+    useEffect(() => {
+        const root = document.documentElement;
+        root.setAttribute(PICKING_ATTRIBUTE, "");
+        const style = document.createElement("style");
+        style.textContent = `html[${PICKING_ATTRIBUTE}], html[${PICKING_ATTRIBUTE}] * { cursor: ${COMMENT_PICKER_CURSOR} !important; }`;
+        document.head.appendChild(style);
+        let hoveredElement = null;
+        const showOutline = (element) => {
+            hoveredElement = element;
+            if (!element) {
+                setHovered(undefined);
+                return;
+            }
+            const box = element.getBoundingClientRect();
+            setHovered({
+                rect: { x: box.left, y: box.top, width: box.width, height: box.height },
+                label: element.getAttribute("data-fieldname") || "Field",
+            });
+        };
+        const handleMove = (event) => {
+            const field = closestFormField(event.target);
+            if (field !== hoveredElement)
+                showOutline(field);
+        };
+        // The outline is fixed-positioned; keep it on its field while scrolling.
+        const handleScroll = () => {
+            if (hoveredElement)
+                showOutline(hoveredElement);
+        };
+        // The mouse-down is left alone so text can be selected in the field; a
+        // selection inside it becomes the comment's range. The click that ends
+        // the gesture picks: it must not reach the field's own handlers, and the
+        // field gives the focus back so the composer can take it.
+        const handleClick = (event) => {
+            const target = event.target instanceof Element ? event.target : null;
+            if (target?.closest(`[${COMMENT_PICKER_IGNORE_ATTRIBUTE}]`))
+                return;
+            const field = closestFormField(target);
+            const descriptor = field ? readFieldDescriptor(field) : null;
+            stopCommentTargetPicking();
+            if (!descriptor)
+                return; // a click elsewhere just leaves the mode
+            event.preventDefault();
+            event.stopPropagation();
+            const active = document.activeElement;
+            if (active instanceof HTMLElement && field?.contains(active)) {
+                active.blur();
+            }
+            addCommentRef.current?.({ field: descriptor });
+        };
+        const handleKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            stopCommentTargetPicking();
+        };
+        document.addEventListener("mousemove", handleMove, true);
+        document.addEventListener("scroll", handleScroll, true);
+        document.addEventListener("click", handleClick, true);
+        document.addEventListener("keydown", handleKeyDown, true);
+        return () => {
+            document.removeEventListener("mousemove", handleMove, true);
+            document.removeEventListener("scroll", handleScroll, true);
+            document.removeEventListener("click", handleClick, true);
+            document.removeEventListener("keydown", handleKeyDown, true);
+            root.removeAttribute(PICKING_ATTRIBUTE);
+            style.remove();
+        };
+    }, []);
+    if (!hovered || typeof document === "undefined")
+        return null;
+    return createPortal(_jsx(CommentTargetOutline, { rect: hovered.rect, label: hovered.label, position: "fixed", zIndex: 300 }), document.body);
+}
+//# sourceMappingURL=CommentTargetPickerDomLayer.js.map

package/dist/editor/reviews/CommentTargetPickerDomLayer.js.map

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