","\t\t

","\treturn createPortal(","\tlet previewWidth = Math.min(288, host.clientWidth * 0.8);",326,348,40,[416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455],{"_63":64,"_65":490},{"_63":64,"_65":489},{"_63":64,"_65":71},{"_63":41,"_65":481},{"_63":41,"_65":488},{"_63":41,"_65":487},{"_63":41,"_65":486},{"_63":41,"_65":485},{"_63":41,"_65":484},{"_63":41,"_65":478},{"_63":41,"_65":483},{"_63":41,"_65":482},{"_63":41,"_65":71},{"_63":41,"_65":481},{"_63":41,"_65":480},{"_63":41,"_65":479},{"_63":41,"_65":478},{"_63":41,"_65":477},{"_63":41,"_65":476},{"_63":41,"_65":475},{"_63":41,"_65":474},{"_63":41,"_65":473},{"_63":41,"_65":472},{"_63":41,"_65":471},{"_63":41,"_65":470},{"_63":41,"_65":469},{"_63":41,"_65":468},{"_63":41,"_65":467},{"_63":41,"_65":466},{"_63":41,"_65":465},{"_63":41,"_65":464},{"_63":41,"_65":463},{"_63":41,"_65":462},{"_63":41,"_65":461},{"_63":41,"_65":460},{"_63":41,"_65":459},{"_63":41,"_65":71},{"_63":64,"_65":458},{"_63":64,"_65":457},{"_63":64,"_65":456},"\t\tlet outside = (event: PointerEvent) => {","\t\tif (!pinned && !preview) return;","\tuseEffect(() => {","\t}, [cardHeights, compact, host, pinned, placed]);","\t\t}","\t\t\tscroller.scrollTop = next;","\t\t\tif (saved?.id === pinned) saved.revealed = true;","\t\t\tlet saved = compactScroll.current;","\t\tif (Math.abs(next - scroller.scrollTop) >= 1) {","\t\t});","\t\t\tviewportTop: host.getBoundingClientRect().top,","\t\t\tsheetTop: dialog.getBoundingClientRect().top,","\t\t\tpassageTop,","\t\t\tpassageBottom,","\t\t\tmaxScroll: scroller.scrollHeight - scroller.clientHeight,","\t\t\tgap: 20,","\t\t\tcurrentScroll: scroller.scrollTop,","\t\tlet next = commentRevealScroll({","\t\tlet passageBottom = Math.max(...passages.map(passage => passage.bottom));","\t\tlet passageTop = Math.min(...passages.map(passage => passage.top));","\t\tif (!dialog || !scroller || !passages || passages.length === 0) return;","\t\tlet passages = placed.find(entry => entry.view.thread.id === pinned)?.passages;","\t\tlet scroller = commentScroller(host);","\t\tlet dialog = document.getElementById(`plan-comment-thread-${pinned}`);","\t\tif (!compact || !host || !pinned || pinned === \"orphans\") return;","\tuseLayoutEffect(() => {","\t}, [host, pinned]);","\t\tif (scroller) scroller.scrollTop = saved.top;","\t\tif (!saved.revealed) return;","\t\tcompactScroll.current = undefined;","\t\tif (!saved) return;","\t\tlet saved = compactScroll.current;","\t\tif (pinned || !host) return;","\t}, [editor, pinned, restoreOrigin, state.draft, state.threads, store]);","\t\trestoreOrigin();",283,305,[494,495,496,497,498,499,500,501],{"_63":64,"_65":508},{"_63":64,"_65":507},{"_63":64,"_65":506},{"_63":43,"_65":505},{"_63":41,"_65":504},{"_63":64,"_65":71},{"_63":64,"_65":503},{"_63":64,"_65":502},"\t\tlet target = origin.current;","\tlet restoreOrigin = useCallback(() => {","\t}, [editor, enter, host, hover, pinned, rememberCompactScroll, unhover]);","\t}, [editor, enter, host, hover, unhover]);","\t\t};","\t\t\thost.removeEventListener(\"pointercancel\", cancel);","\t\t\thost.removeEventListener(\"pointerleave\", out);",263,280,12,[513,514,515,516,517,518,519,520,521,522,523,524,525],{"_63":64,"_65":537},{"_63":64,"_65":536},{"_63":64,"_65":535},{"_63":43,"_65":534},{"_63":41,"_65":533},{"_63":41,"_65":532},{"_63":41,"_65":531},{"_63":41,"_65":530},{"_63":41,"_65":529},{"_63":41,"_65":528},{"_63":64,"_65":506},{"_63":64,"_65":527},{"_63":64,"_65":526},"\t\t\tif (hoverOwner.current) unhover(hoverOwner.current);","\t\tlet out = () => {","\t\t\t}","\t\t\t\tsetPinned(pending.id);","\t\t\t\trememberCompactScroll(pending.id);","\t\t\t} else {","\t\t\t\tsetPinned(undefined);","\t\t\tif (pinned === pending.id) {","\t\t\tsetPinned(current => current === pending.id ? undefined : pending.id);","\t\t\tenter(pending.id);","\t\t\t) ?? undefined;","\t\t\t\t`[data-plan-comment-button=\"${pending.id}\"]`,",197,219,[541,542,543,544,545,546,547,548,549,550,551,552,553,554,555],{"_63":64,"_65":568},{"_63":64,"_65":567},{"_63":64,"_65":566},{"_63":43,"_65":565},{"_63":43,"_65":564},{"_63":43,"_65":563},{"_63":43,"_65":562},{"_63":64,"_65":561},{"_63":64,"_65":560},{"_63":64,"_65":559},{"_63":64,"_65":558},{"_63":43,"_65":557},{"_63":64,"_65":506},{"_63":64,"_65":556},{"_63":64,"_65":71},"\t}, [editor, host, state.threads, coarse]);","\t\t\tcompactObserver.disconnect();","\t\t\tobserver.disconnect();","\t\t\thost.removeEventListener(\"scroll\", update, true);","\t\t\toff();","\t\treturn () => {","\t\tcompactObserver.observe(host);","\t\tlet compactObserver = new ResizeObserver(compactUpdate);","\t\tcompactUpdate();","\t\tlet compactUpdate = () => setCompact(host.clientWidth <= 640);","\t\tobserver.observe(host);","\t\tlet observer = new ResizeObserver(update);","\t\thost.addEventListener(\"scroll\", update, true);",180,201,[572,573,574,575,576,577,578],{"_63":64,"_65":584},{"_63":64,"_65":583},{"_63":64,"_65":582},{"_63":41,"_65":581},{"_63":64,"_65":580},{"_63":64,"_65":71},{"_63":64,"_65":579},"\t\tplacedRef.current = next;","\t\t}));","\t\t\tpassages: entry.passages,","\t\t\thits: passageHits(page, entry.hits),","\t\t\tbutton: buttons[index]!,","\t\t\tview: entry.view,",136,150,13,[589,590,591,592,593,594,595,596,597,598,599,600,601],{"_63":64,"_65":611},{"_63":64,"_65":610},{"_63":64,"_65":609},{"_63":41,"_65":608},{"_63":41,"_65":607},{"_63":41,"_65":478},{"_63":41,"_65":606},{"_63":41,"_65":605},{"_63":41,"_65":460},{"_63":41,"_65":604},{"_63":64,"_65":71},{"_63":64,"_65":603},{"_63":64,"_65":602},"\t\tif (!host) return;","\tlet measure = () => {","\t}, [host]);","\t\t\tcompactScroll.current = { id, top: scroller.scrollTop, revealed: false };","\t\tif (scroller) {","\t\tif (!host || id === \"orphans\") return;","\tlet rememberCompactScroll = useCallback((id: string) => {","\t}, [leave]);","\t\tleave(id);","\t\thoverOwner.current = undefined;",100,112,[615,616,617,618,619,620,621,622],{"_63":64,"_65":628},{"_63":64,"_65":627},{"_63":64,"_65":626},{"_63":41,"_65":625},{"_63":41,"_65":624},{"_63":64,"_65":71},{"_63":64,"_65":458},{"_63":64,"_65":623},"\t\tsetHost(document.querySelector(\".plan-document\") ?? undefined);","\tlet compact = useCellValue(widgets$).commentPresentation === \"sheet\";","\tlet compactScroll = useRef<{ id: string; top: number; revealed: boolean } | undefined>(undefined);","\tlet draftOpen = useRef(false);","\tlet origin = useRef(undefined);","\tlet failures = useRef(new Set());",89,102,[632,633,634,635,636,637,638],{"_63":64,"_65":645},{"_63":64,"_65":644},{"_63":64,"_65":643},{"_63":43,"_65":642},{"_63":64,"_65":641},{"_63":64,"_65":640},{"_63":64,"_65":639},"\tlet root = useRef(null);","\tlet [cardHeights, setCardHeights] = useState<{ [id: string]: number }>({});","\tlet [coarse, setCoarse] = useState(false);","\tlet [compact, setCompact] = useState(false);","\tlet [pinned, setPinned] = useState();","\tlet [preview, setPreview] = useState();","\tlet [placed, setPlaced] = useState([]);",33,41,[649,650,651,652,653,654,655,656,657,658,659],{"_63":64,"_65":666},{"_63":64,"_65":116},{"_63":64,"_65":71},{"_63":41,"_65":665},{"_63":41,"_65":664},{"_63":41,"_65":663},{"_63":41,"_65":116},{"_63":41,"_65":71},{"_63":64,"_65":662},{"_63":64,"_65":661},{"_63":64,"_65":660},"\tonMeasure,","\tid,","function Preview({","\treturn child instanceof HTMLElement ? child : undefined;","\tlet child = host.firstElementChild;","function commentScroller(host: HTMLElement): HTMLElement | undefined {","\t};",4,21,29,[671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700],{"_63":64,"_65":724},{"_63":64,"_65":723},{"_63":64,"_65":722},{"_63":41,"_65":721},{"_63":64,"_65":71},{"_63":64,"_65":720},{"_63":64,"_65":719},{"_63":64,"_65":718},{"_63":41,"_65":348},{"_63":64,"_65":717},{"_63":64,"_65":716},{"_63":64,"_65":715},{"_63":64,"_65":714},{"_63":41,"_65":713},{"_63":64,"_65":71},{"_63":64,"_65":712},{"_63":64,"_65":711},{"_63":64,"_65":710},{"_63":64,"_65":709},{"_63":64,"_65":71},{"_63":43,"_65":708},{"_63":41,"_65":707},{"_63":41,"_65":706},{"_63":41,"_65":705},{"_63":41,"_65":704},{"_63":41,"_65":703},{"_63":41,"_65":254},{"_63":64,"_65":702},{"_63":64,"_65":701},{"_63":64,"_65":71},"type PassagePress = { id: string; left: number; pointer: number; top: number; moved: boolean };","type MeasuredThread = { view: ThreadView; target: Rect; passages: Rect[]; hits: Rect[] };","\tpassages: Rect[];","\thits: PassageHit[];","\tbutton: Point;","\tview: ThreadView;","type PlacedThread = {","type PlacedThread = { view: ThreadView; button: Point; hits: PassageHit[] };","import type { ThreadStore, ThreadView } from \"./threads\";","import type { PassageHit } from \"./comment-hits\";","import type { Point, Rect } from \"./comment-geometry\";","import type { CSSProperties } from \"react\";","import { widgets$ } from \"./widget-options\";","import { useThreads } from \"./threads\";","import { COARSE_POINTER_QUERY, hasCoarsePointer } from \"./pointer\";","import { blockElement } from \"./scroll\";","import { $rangeOf } from \"./marks\";","import { containsHit, passageHits } from \"./comment-hits\";","import { markerPoints, popoverPoint } from \"./comment-geometry\";","import { DraftCard, ThreadCard } from \"./comments\";","import { useCellValue } from \"@mdxeditor/gurx\";","import { ChatCircleIcon } from \"@phosphor-icons/react\";","import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";","import { createPortal } from \"react-dom\";","11046a12","399fca09","e2e/responsive-comments.e2e.ts",{"_73":851,"_75":76},64,[731],{"_48":44,"_50":44,"_51":42,"_52":729,"_54":732},[733,734,735,736,737,738,739,740,741,742,743,744,745,746,747,748,749,750,751,752,753,754,755,756,757,758,759,760,761,762,763,764,765,766,767,768,769,770,771,772,773,774,775,776,777,778,779,780,781,782,783,784,785,786,787,788,789,790,791,792,793,794,795,796],{"_63":41,"_65":850},{"_63":41,"_65":71},{"_63":41,"_65":849},{"_63":41,"_65":848},{"_63":41,"_65":847},{"_63":41,"_65":846},{"_63":41,"_65":845},{"_63":41,"_65":71},{"_63":41,"_65":844},{"_63":41,"_65":843},{"_63":41,"_65":842},{"_63":41,"_65":841},{"_63":41,"_65":840},{"_63":41,"_65":839},{"_63":41,"_65":838},{"_63":41,"_65":837},{"_63":41,"_65":71},{"_63":41,"_65":836},{"_63":41,"_65":835},{"_63":41,"_65":834},{"_63":41,"_65":833},{"_63":41,"_65":832},{"_63":41,"_65":831},{"_63":41,"_65":830},{"_63":41,"_65":71},{"_63":41,"_65":829},{"_63":41,"_65":828},{"_63":41,"_65":827},{"_63":41,"_65":826},{"_63":41,"_65":825},{"_63":41,"_65":824},{"_63":41,"_65":465},{"_63":41,"_65":823},{"_63":41,"_65":822},{"_63":41,"_65":821},{"_63":41,"_65":820},{"_63":41,"_65":798},{"_63":41,"_65":819},{"_63":41,"_65":818},{"_63":41,"_65":817},{"_63":41,"_65":465},{"_63":41,"_65":816},{"_63":41,"_65":815},{"_63":41,"_65":814},{"_63":41,"_65":813},{"_63":41,"_65":812},{"_63":41,"_65":798},{"_63":41,"_65":71},{"_63":41,"_65":811},{"_63":41,"_65":810},{"_63":41,"_65":809},{"_63":41,"_65":808},{"_63":41,"_65":807},{"_63":41,"_65":806},{"_63":41,"_65":805},{"_63":41,"_65":804},{"_63":41,"_65":803},{"_63":41,"_65":802},{"_63":41,"_65":801},{"_63":41,"_65":800},{"_63":41,"_65":799},{"_63":41,"_65":798},{"_63":41,"_65":797},{"_63":41,"_65":116},"\t});","\t\t);","\t\t\t0,","\t\t\toriginalScroll,","\t\tawait expect.poll(() => scroller.evaluate(element => element.scrollTop)).toBeCloseTo(","\t\tawait expect(sheet).toHaveCount(0);","\t\tawait page.keyboard.press(\"Escape\");","\t\t}).toBe(true);","\t\t\treturn Math.abs(gap - 20) <= 1;","\t\t\tlet gap = sheetBox!.y - (passageBox!.y + passageBox!.height);","\t\t\tlet passageBox = await passage.boundingBox();","\t\t\tlet sheetBox = await sheet.boundingBox();","\t\tawait expect.poll(async () => {","\t\tawait expect(sheet).toHaveAttribute(\"aria-modal\", \"true\");","\t\tlet sheet = page.getByRole(\"dialog\", { name: \"Comment thread\" });","\t\t\tmarkerBox!.y + markerBox!.height / 2,","\t\t\tmarkerBox!.x + markerBox!.width / 2,","\t\tawait page.touchscreen.tap(","\t\tlet markerBox = await marker.boundingBox();","\t\tawait expect(marker).toBeInViewport();","\t\t\tname: /Comment on “Paragraph 30 contains enough text/,","\t\tlet marker = page.getByRole(\"button\", {","\t\tlet originalScroll = await scroller.evaluate(element => element.scrollTop);","\t\t\tnew Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))","\t\tawait page.evaluate(() =>","\t\t// changes layout; the controlled scroll value is restored on re-render.","\t\t// Let the document host persist the reader's position before the sheet","\t\t\tscroller.dispatchEvent(new Event(\"scroll\"));","\t\t\tscroller.scrollTop += passage.bottom - viewport.bottom + 64;","\t\t\tlet viewport = scroller.getBoundingClientRect();","\t\t\tlet passage = element.getBoundingClientRect();","\t\t\tlet scroller = element.closest(\"[data-plan-scroll]\")!;","\t\tawait passage.evaluate(element => {","\t\tawait expect(draft).toHaveCount(0);","\t\tawait draft.getByRole(\"button\", { name: \"Comment\" }).click();","\t\tawait draft.getByPlaceholder(\"Comment on this passage…\").fill(\"Keep this paragraph close.\");","\t\tlet draft = page.getByRole(\"dialog\", { name: \"New comment\" });","\t\tawait page.getByRole(\"button\", { name: \"Comment on this passage\", exact: true }).click();","\t\tawait passage.selectText();","\t\tawait passage.scrollIntoViewIfNeeded();","\t\tawait expect(page.locator(\"[data-plan-comment-sheet]\")).toHaveCount(1);","\t\tawait expect(page.getByRole(\"navigation\", { name: \"Workspace view\" })).toBeVisible();","\t\tlet passage = content(page).getByText(TARGET, { exact: true });","\t\tlet scroller = page.locator(\"[data-plan-scroll]\");","\t\tlet page = await join(\"ana\", { hasTouch: true, viewport });","\t\tawait seed(PLAN);","\ttest(`${viewport.width}px comments keep their passage above the sheet and restore the document`, async ({ join, seed }) => {","for (let viewport of [{ width: 390, height: 844 }, { width: 768, height: 1024 }]) {",").join(\"\\n\\n\");","\t(_, index) => `Paragraph ${index + 1} contains enough text to receive a comment.`,","\t{ length: 40 },","const PLAN = Array.from(","const TARGET = \"Paragraph 30 contains enough text to receive a comment.\";","import { content, expect, test } from \"./room\";","63883b18","apps/web/src/app.tsx",{"_73":873,"_75":76},{"_73":872,"_75":76},[856],{"_48":857,"_50":49,"_51":857,"_52":53,"_54":858},367,[859,860,861,862,863,864,865],{"_63":64,"_65":528},{"_63":64,"_65":871},{"_63":64,"_65":870},{"_63":41,"_65":869},{"_63":64,"_65":868},{"_63":64,"_65":867},{"_63":64,"_65":866},"\t\t\t\t\tquestions={questions}","\t\t\t\t\tonScrollTop={setPlanScrollTop}","\t\t\t\t\tconnection={status}","\t\t\t\t\tcommentPresentation={mode === \"split\" ? \"popover\" : \"sheet\"}","\t\t\t\t

feat: anchor compact comments to their passage