[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10,"_11":12},"actionData","errors","root",{"_228":-5,"_231":232,"_233":234},"routes/shell",{"_40":41,"_227":-5,"_228":-5,"_229":230},"routes/repo",{"_33":-7,"_34":35,"_36":37,"_38":39,"_40":41,"_42":31,"_43":31,"_44":31,"_45":31,"_46":31,"_47":31,"_48":49,"_50":49,"_51":31,"_52":-7,"_53":-7,"_54":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68},"routes/repo.blob",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":14,"_22":23,"_24":-5,"_25":26,"_27":28,"_28":29,"_30":31,"_32":14},"ref","bfa1493df0196b3a30207017a1bfa8bb15bc8098","path","packages/editor/src/comment-layer.tsx","oid","5bf632e6f1ecf881d99ece7de2af391c6294c491","size",31994,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/** Reader-local comment chrome overlays rather than mutates collaborative prose. */\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { MessageIcon } from \"@chopin/icons\";\nimport { useCellValue } from \"@mdxeditor/gurx\";\nimport { $getNodeByKey } from \"lexical\";\n\nimport { DraftCard, ThreadCard, ThreadList } from \"./comments\";\nimport { blockMarkerPoints, edgePanelPoint, markerRect, popoverPoint } from \"./comment-geometry\";\nimport { containsHit, passageHits } from \"./comment-hits\";\nimport { CommentSheet, usesCommentSheet } from \"./comment-sheet\";\nimport { useCommentSheetReveal } from \"./comment-sheet-reveal\";\nimport { $rangeOf } from \"./marks\";\nimport { blockElement } from \"./scroll\";\nimport { COARSE_POINTER_QUERY, PRIMARY_COARSE_POINTER_QUERY } from \"./pointer\";\nimport { useThreads } from \"./threads\";\nimport { useTransitionPresence } from \"./transition-presence\";\nimport { widgets$ } from \"./widget-options\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\nimport type { BlockMarkerPoint, Point, Rect } from \"./comment-geometry\";\nimport type { PassageHit } from \"./comment-hits\";\nimport type { ThreadStore, ThreadView } from \"./threads\";\n\n/** The visible chip; a coarse pointer gets a larger, invisible hit area around it. */\nconst CHIP = 24;\nconst TOUCH_TARGET = 44;\n\ntype PlacedThread = {\n\tview: ThreadView;\n\t/** The block marker that stands for this thread. */\n\tmarker: string;\n\thits: PassageHit[];\n\tpassages: Rect[];\n};\n/** One marker per commented block, standing for every open thread on it. */\ntype PlacedMarker = {\n\tkey: string;\n\tviews: ThreadView[];\n\texcerpt: string;\n\tbutton: BlockMarkerPoint;\n};\ntype MeasuredThread = {\n\tview: ThreadView;\n\tpassages: Rect[];\n\thits: Rect[];\n};\ntype MeasuredBlock = {\n\tkey: string;\n\tblock: Rect;\n\tline: { top: number; height: number };\n\texcerpt: string;\n\tthreads: MeasuredThread[];\n};\n\n/** A pinned list of one block's threads, as opposed to a pinned thread id. */\nconst LIST = \"list:\";\n\nfunction dialogId(pinned: string): string {\n\treturn pinned.startsWith(LIST)\n\t\t? `plan-comment-list-${pinned.slice(LIST.length)}`\n\t\t: `plan-comment-thread-${pinned}`;\n}\n\nfunction excerptOf(text: string): string {\n\tlet flat = text.replace(/\\s+/g, \" \").trim();\n\treturn flat.length > 48 ? `${flat.slice(0, 47).trimEnd()}…` : flat;\n}\n\n/** The first line box of a block, from its own type metrics. */\nfunction firstLine(element: HTMLElement, box: Rect): { top: number; height: number } {\n\tlet style = getComputedStyle(element);\n\tlet height = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2 || CHIP;\n\tlet inset = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.borderTopWidth) || 0);\n\treturn { top: box.top + inset, height: Math.min(height, box.height - inset || height) };\n}\n\nfunction chipWidth(count: number): number {\n\treturn count > 1 ? 30 + 7 * String(count).length : CHIP;\n}\n\ntype PassagePress = { id: string; left: number; pointer: number; top: number; moved: boolean };\n\nfunction rect(value: DOMRect): Rect {\n\treturn {\n\t\ttop: value.top,\n\t\tright: value.right,\n\t\tbottom: value.bottom,\n\t\tleft: value.left,\n\t\twidth: value.width,\n\t\theight: value.height,\n\t};\n}\n\ntype PreviewRequest = {\n\tbutton: Point;\n\tid: string;\n\tpage: Rect;\n\tsize: number;\n\tview: ThreadView;\n\twidth: number;\n};\n\ntype PreviewValue = {\n\tid: string;\n\tstyle: CSSProperties;\n\tview: ThreadView;\n};\n\ntype PreviewMeasurement = {\n\theight: number;\n\tid: string;\n\tnoteCount: number;\n\tquote: string;\n\twidth: number;\n};\n\nfunction previewHeight(\n\trequest: PreviewRequest | undefined,\n\tmeasurement: PreviewMeasurement | undefined,\n): number | undefined {\n\treturn request\n\t\t\t&& measurement?.id === request.id\n\t\t\t&& measurement.width === request.width\n\t\t\t&& measurement.quote === request.view.quote\n\t\t\t&& measurement.noteCount === request.view.thread.notes.length\n\t\t? measurement.height\n\t\t: undefined;\n}\n\nfunction placedPreview(\n\trequest: PreviewRequest | undefined,\n\tmeasurement: PreviewMeasurement | undefined,\n): PreviewValue | undefined {\n\tlet height = previewHeight(request, measurement);\n\tif (!request || height === undefined) return undefined;\n\tlet point = popoverPoint(\n\t\tmarkerRect(request.button, request.page, request.size),\n\t\trequest.page,\n\t\trequest.width,\n\t\theight,\n\t);\n\tlet originX = point.left >= request.button.left ? 0 : request.width;\n\tlet originY = Math.min(\n\t\theight,\n\t\tMath.max(0, request.button.top + request.size / 2 - point.top),\n\t);\n\treturn {\n\t\tid: request.id,\n\t\tstyle: {\n\t\t\t...point,\n\t\t\ttransformOrigin: `${originX}px ${originY}px`,\n\t\t\twidth: request.width,\n\t\t},\n\t\tview: request.view,\n\t};\n}\n\nfunction PreviewContent({ view }: { view: ThreadView }) {\n\tlet replies = Math.max(0, view.thread.notes.length - 1);\n\tlet opening = view.thread.notes[0];\n\treturn (\n\t\t<>\n\t\t\t{opening && (\n\t\t\t\t<>\n\t\t\t\t\t

@{opening.handle}

\n\t\t\t\t\t

{opening.text}

\n\t\t\t\t\n\t\t\t)}\n\t\t\t{replies > 0 && {replies} {replies === 1 ? \"reply\" : \"replies\"}}\n\t\t\n\t);\n}\n\nfunction PreviewSurface(\n\t{\n\t\timmediately,\n\t\tonMeasure,\n\t\trequest,\n\t\tvalue,\n\t}: {\n\t\timmediately: boolean;\n\t\tonMeasure: (request: PreviewRequest, height: number) => void;\n\t\trequest?: PreviewRequest;\n\t\tvalue?: PreviewValue;\n\t},\n) {\n\tlet measurementElement = useRef(null);\n\tlet lifecycle = useCommentPresence(value, 150, immediately);\n\tuseLayoutEffect(() => {\n\t\tlet element = measurementElement.current;\n\t\tif (request && element) onMeasure(request, element.offsetHeight);\n\t}, [onMeasure, request]);\n\n\tlet measuring = !!request && value === undefined;\n\tif (!measuring && lifecycle.presence.phase === \"closed\") return null;\n\tlet preview = lifecycle.presence.phase === \"closed\" ? undefined : lifecycle.presence.value;\n\treturn (\n\t\t<>\n\t\t\t{measuring && request && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t{preview && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n}\n\ntype CommentSurfaceValue = {\n\tariaLabel: string;\n\tchildren: ReactNode;\n\tclassName: string;\n\tid?: string;\n\tonMeasure?: (element: HTMLDivElement | null) => void;\n\tonMouseEnter?: () => void;\n\tonMouseLeave?: () => void;\n\tstyle?: CSSProperties;\n};\n\nfunction useCommentPresence(value: T | undefined, duration: number, immediately: boolean) {\n\tlet presence = useTransitionPresence(value, duration, immediately);\n\tlet active = presence.phase !== \"closed\" && presence.phase !== \"closing\";\n\treturn {\n\t\tariaHidden: active ? undefined : \"true\" as const,\n\t\tinert: !active,\n\t\tpresence,\n\t};\n}\n\nfunction CommentSurface(\n\t{\n\t\tcompact,\n\t\timmediately,\n\t\tvalue,\n\t}: {\n\t\tcompact: boolean;\n\t\timmediately: boolean;\n\t\tvalue?: CommentSurfaceValue;\n\t},\n) {\n\tlet lifecycle = useCommentPresence(value, compact ? 180 : 150, immediately);\n\tif (lifecycle.presence.phase === \"closed\") return null;\n\tlet surface = lifecycle.presence.value;\n\treturn (\n\t\t\n\t\t\t{surface.children}\n\t\t\n\t);\n}\n\nfunction replyState(view: ThreadView): string {\n\treturn repliesWaiting(Math.max(0, view.thread.notes.length - 1));\n}\n\nfunction repliesWaiting(replies: number): string {\n\treturn replies === 0\n\t\t? \"No replies waiting.\"\n\t\t: `${replies} ${replies === 1 ? \"reply\" : \"replies\"} waiting.`;\n}\n\nexport function CommentLayer({ store }: { store: ThreadStore }) {\n\tlet [editor] = useLexicalComposerContext();\n\tlet state = useThreads(store);\n\tlet [host, setHost] = useState();\n\tlet [placed, setPlaced] = useState([]);\n\tlet [markers, setMarkers] = useState([]);\n\tlet markersRef = useRef([]);\n\tlet [preview, setPreview] = useState();\n\tlet [previewMeasurement, setPreviewMeasurement] = useState();\n\tlet [pinned, setPinned] = useState();\n\tlet pinnedRef = useRef(undefined);\n\tpinnedRef.current = pinned;\n\tlet [coarse, setCoarse] = useState(false);\n\tlet [primaryCoarse, setPrimaryCoarse] = useState(false);\n\tlet [cardHeights, setCardHeights] = useState<{ [id: string]: number }>({});\n\tlet root = useRef(null);\n\tlet placedRef = useRef([]);\n\tlet hoverOwner = useRef(undefined);\n\tlet press = useRef(undefined);\n\tlet close = useRef | undefined>(undefined);\n\tlet failures = useRef(new Set());\n\tlet origin = useRef(undefined);\n\tlet draftOpen = useRef(false);\n\tlet selected = useRef(undefined);\n\tlet options = useCellValue(widgets$);\n\tlet canEdit = options.canEdit !== false;\n\tlet compact = options.commentPresentation === \"sheet\"\n\t\t&& usesCommentSheet({ coarse: primaryCoarse, width: host?.clientWidth ?? Infinity });\n\tlet previousCompact = useRef(compact);\n\tlet immediately = options.motionImmediately?.() ?? false;\n\tlet draft = canEdit ? state.draft : undefined;\n\tlet measurePreview = useCallback((request: PreviewRequest, height: number) => {\n\t\tif (height <= 0) {\n\t\t\tsetPreviewMeasurement(undefined);\n\t\t\tif (preview === request.view.thread.id) {\n\t\t\t\tsetPreview(undefined);\n\t\t\t\tstore.focus(undefined);\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tlet next = {\n\t\t\theight,\n\t\t\tid: request.id,\n\t\t\tnoteCount: request.view.thread.notes.length,\n\t\t\tquote: request.view.quote,\n\t\t\twidth: request.width,\n\t\t};\n\t\tsetPreviewMeasurement(current => previewHeight(request, current) === height ? current : next);\n\t}, [preview, store]);\n\n\tuseEffect(() => {\n\t\treturn editor.registerRootListener(element => {\n\t\t\tsetHost(element?.closest(\".plan-document\") ?? undefined);\n\t\t});\n\t}, [editor]);\n\n\tuseEffect(() => {\n\t\tlet query = matchMedia(COARSE_POINTER_QUERY);\n\t\tlet primary = matchMedia(PRIMARY_COARSE_POINTER_QUERY);\n\t\tlet update = () => {\n\t\t\tsetCoarse(query.matches);\n\t\t\tsetPrimaryCoarse(primary.matches);\n\t\t};\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\tprimary.addEventListener(\"change\", update);\n\t\treturn () => {\n\t\t\tquery.removeEventListener(\"change\", update);\n\t\t\tprimary.removeEventListener(\"change\", update);\n\t\t};\n\t}, []);\n\n\tuseLayoutEffect(() => {\n\t\tlet previous = previousCompact.current;\n\t\tpreviousCompact.current = compact;\n\t\tif (!previous || compact || !pinned) return;\n\t\tlet dialog = document.getElementById(dialogId(pinned));\n\t\tdialog?.querySelector(\"[data-plan-comment-close], button\")?.focus();\n\t}, [compact, pinned]);\n\n\tlet enter = useCallback((id: string) => {\n\t\tclearTimeout(close.current);\n\t\tsetPreview(id);\n\t\tstore.focus(id);\n\t}, [store]);\n\tlet leave = useCallback((id: string) => {\n\t\tclearTimeout(close.current);\n\t\tclose.current = setTimeout(() => {\n\t\t\tif (pinned !== id) setPreview(current => current === id ? undefined : current);\n\t\t\tstore.focus(undefined);\n\t\t}, 100);\n\t}, [pinned, store]);\n\tlet hover = useCallback((id: string) => {\n\t\tif (hoverOwner.current === id) return;\n\t\tif (hoverOwner.current) leave(hoverOwner.current);\n\t\thoverOwner.current = id;\n\t\tenter(id);\n\t}, [enter, leave]);\n\tlet unhover = useCallback((id: string) => {\n\t\tif (hoverOwner.current !== id) return;\n\t\thoverOwner.current = undefined;\n\t\tleave(id);\n\t}, [leave]);\n\tlet measure = () => {\n\t\tif (!host) return;\n\t\tlet page = rect(host.getBoundingClientRect());\n\t\tlet blocks = new Map();\n\n\t\tfor (let view of state.threads) {\n\t\t\tif (view.thread.status !== \"open\") continue;\n\t\t\ttry {\n\t\t\t\tlet target = editor.getEditorState().read(() => {\n\t\t\t\t\tlet exact = view.places[0] && $rangeOf(editor, view.places[0]);\n\t\t\t\t\tlet anchor = view.places[0]?.anchorKey ?? view.targetKey;\n\t\t\t\t\tlet element = anchor ? blockElement(editor, anchor) : undefined;\n\t\t\t\t\tlet key = element\n\t\t\t\t\t\t? $getNodeByKey(anchor!)?.getTopLevelElement()?.getKey() ?? anchor!\n\t\t\t\t\t\t: `thread:${view.thread.id}`;\n\t\t\t\t\tif (exact) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tbounds: exact.getBoundingClientRect(),\n\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\thits: Array.from(exact.getClientRects(), rect),\n\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\tlet fallback = view.targetKey ? blockElement(editor, view.targetKey) : undefined;\n\t\t\t\t\treturn fallback\n\t\t\t\t\t\t? { bounds: fallback.getBoundingClientRect(), element: fallback, hits: [], key }\n\t\t\t\t\t\t: undefined;\n\t\t\t\t});\n\t\t\t\tif (!target || (target.bounds.width === 0 && target.bounds.height === 0)) continue;\n\t\t\t\tlet targetRect = rect(target.bounds);\n\t\t\t\tlet passages = target.hits.length > 0 ? target.hits : [targetRect];\n\t\t\t\tlet block = blocks.get(target.key!);\n\t\t\t\tif (!block) {\n\t\t\t\t\tlet box = target.element ? rect(target.element.getBoundingClientRect()) : targetRect;\n\t\t\t\t\tblock = {\n\t\t\t\t\t\tkey: target.key!,\n\t\t\t\t\t\tblock: box,\n\t\t\t\t\t\tline: target.element\n\t\t\t\t\t\t\t? firstLine(target.element, box)\n\t\t\t\t\t\t\t: { top: box.top, height: Math.min(box.height, CHIP) },\n\t\t\t\t\t\texcerpt: excerptOf(target.element?.textContent ?? view.quote),\n\t\t\t\t\t\tthreads: [],\n\t\t\t\t\t};\n\t\t\t\t\tblocks.set(block.key, block);\n\t\t\t\t}\n\t\t\t\tblock.threads.push({ view, passages, hits: target.hits });\n\t\t\t} catch (error) {\n\t\t\t\t// A bad anchor must not break Lexical's update listener.\n\t\t\t\tif (failures.current.has(view.thread.id)) continue;\n\t\t\t\tfailures.current.add(view.thread.id);\n\t\t\t\tconsole.error(`[plan] could not measure comment ${view.thread.id}:`, error);\n\t\t\t}\n\t\t}\n\n\t\tlet measured = [...blocks.values()].sort((a, b) => a.block.top - b.block.top);\n\t\tlet focused = document.activeElement?.getAttribute(\"data-plan-comment-button\");\n\t\tlet points = blockMarkerPoints(\n\t\t\tmeasured.map(({ block, key, line, threads }) => ({\n\t\t\t\tblock,\n\t\t\t\tline,\n\t\t\t\twidth: chipWidth(threads.length),\n\t\t\t\theld: focused === key\n\t\t\t\t\t|| pinnedRef.current === `${LIST}${key}`\n\t\t\t\t\t|| threads.some(({ view }) => view.thread.id === pinnedRef.current),\n\t\t\t})),\n\t\t\tpage,\n\t\t\t{ size: CHIP },\n\t\t);\n\t\tlet nextMarkers = measured.map((entry, index) => ({\n\t\t\tkey: entry.key,\n\t\t\tviews: entry.threads.map(({ view }) => view),\n\t\t\texcerpt: entry.excerpt,\n\t\t\tbutton: points[index]!,\n\t\t}));\n\t\tlet next = measured.flatMap(entry =>\n\t\t\tentry.threads.map(thread => ({\n\t\t\t\tview: thread.view,\n\t\t\t\tmarker: entry.key,\n\t\t\t\thits: passageHits(page, thread.hits),\n\t\t\t\tpassages: thread.passages,\n\t\t\t}))\n\t\t);\n\n\t\tplacedRef.current = next;\n\t\tmarkersRef.current = nextMarkers;\n\t\tsetPlaced(next);\n\t\tsetMarkers(nextMarkers);\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tmeasure();\n\t}, [host, state.threads, coarse, pinned]);\n\n\tuseEffect(() => {\n\t\tif (!host) return;\n\t\tlet update = () => measure();\n\t\tlet off = editor.registerUpdateListener(update);\n\t\thost.addEventListener(\"scroll\", update, true);\n\t\tlet observer = new ResizeObserver(update);\n\t\tobserver.observe(host);\n\t\treturn () => {\n\t\t\toff();\n\t\t\thost.removeEventListener(\"scroll\", update, true);\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [editor, host, state.threads, coarse]);\n\n\tuseEffect(() => () => clearTimeout(close.current), []);\n\n\tuseEffect(() => {\n\t\tif (!canEdit && state.draft) store.draft(undefined);\n\t}, [canEdit, state.draft, store]);\n\n\tuseEffect(() => {\n\t\tif (!host) return;\n\t\tlet over = (event: MouseEvent | PointerEvent): PlacedThread | undefined => {\n\t\t\tlet page = host.getBoundingClientRect();\n\t\t\tlet point = { top: event.clientY - page.top, left: event.clientX - page.left };\n\t\t\treturn placedRef.current.find(entry => containsHit(entry.hits, point));\n\t\t};\n\t\tlet inProse = (target: EventTarget | null) =>\n\t\t\t!!target && editor.getRootElement()?.contains(target as Node);\n\t\tlet down = (event: PointerEvent) => {\n\t\t\tpress.current = undefined;\n\t\t\tif (\n\t\t\t\tevent.button !== 0 || root.current?.contains(event.target as Node) || !inProse(event.target)\n\t\t\t) return;\n\t\t\tlet entry = over(event);\n\t\t\tif (!entry) return;\n\t\t\tpress.current = {\n\t\t\t\tid: entry.view.thread.id,\n\t\t\t\tleft: event.clientX,\n\t\t\t\tpointer: event.pointerId,\n\t\t\t\ttop: event.clientY,\n\t\t\t\tmoved: false,\n\t\t\t};\n\t\t};\n\t\tlet move = (event: PointerEvent) => {\n\t\t\tlet pending = press.current;\n\t\t\tif (\n\t\t\t\tpending?.pointer === event.pointerId\n\t\t\t\t&& Math.hypot(event.clientX - pending.left, event.clientY - pending.top) > 3\n\t\t\t) pending.moved = true;\n\t\t\t// Keep native prose selection outside the controls.\n\t\t\tif (root.current?.contains(event.target as Node)) return;\n\t\t\tlet next = over(event)?.view.thread.id;\n\t\t\tif (next) hover(next);\n\t\t\telse if (hoverOwner.current) unhover(hoverOwner.current);\n\t\t};\n\t\tlet click = (event: MouseEvent) => {\n\t\t\tlet pending = press.current;\n\t\t\tpress.current = undefined;\n\t\t\tif (\n\t\t\t\t!pending\n\t\t\t\t|| pending.moved\n\t\t\t\t|| root.current?.contains(event.target as Node)\n\t\t\t\t|| !inProse(event.target)\n\t\t\t) return;\n\t\t\tlet entry = over(event);\n\t\t\tlet selection = getSelection();\n\t\t\tif (entry?.view.thread.id !== pending.id || (selection && !selection.isCollapsed)) return;\n\t\t\torigin.current = root.current?.querySelector(\n\t\t\t\t`[data-plan-comment-button=\"${entry.marker}\"]`,\n\t\t\t) ?? undefined;\n\t\t\tenter(pending.id);\n\t\t\tsetPinned(current => current === pending.id ? undefined : pending.id);\n\t\t};\n\t\tlet out = () => {\n\t\t\tif (hoverOwner.current) unhover(hoverOwner.current);\n\t\t};\n\t\tlet cancel = () => {\n\t\t\tpress.current = undefined;\n\t\t};\n\t\thost.addEventListener(\"pointerdown\", down);\n\t\thost.addEventListener(\"pointermove\", move);\n\t\thost.addEventListener(\"click\", click);\n\t\thost.addEventListener(\"pointerleave\", out);\n\t\thost.addEventListener(\"pointercancel\", cancel);\n\t\treturn () => {\n\t\t\thost.removeEventListener(\"pointerdown\", down);\n\t\t\thost.removeEventListener(\"pointermove\", move);\n\t\t\thost.removeEventListener(\"click\", click);\n\t\t\thost.removeEventListener(\"pointerleave\", out);\n\t\t\thost.removeEventListener(\"pointercancel\", cancel);\n\t\t};\n\t}, [editor, enter, host, hover, unhover]);\n\n\tlet restoreOrigin = useCallback(() => {\n\t\tlet target = origin.current;\n\t\trequestAnimationFrame(() => {\n\t\t\tlet fallback = editor.getRootElement();\n\t\t\t(target?.isConnected ? target : fallback)?.focus();\n\t\t});\n\t}, [editor]);\n\tlet dismiss = useCallback(() => {\n\t\tsetPinned(undefined);\n\t\tsetPreview(undefined);\n\t\trestoreOrigin();\n\t}, [restoreOrigin]);\n\tlet cancelDraft = useCallback(() => {\n\t\tdraftOpen.current = false;\n\t\tstore.draft(undefined);\n\t\trestoreOrigin();\n\t}, [restoreOrigin, store]);\n\n\tuseLayoutEffect(() => {\n\t\tlet open = !!draft;\n\t\tif (open && !draftOpen.current) {\n\t\t\tlet active = document.activeElement;\n\t\t\torigin.current = active instanceof HTMLElement\n\t\t\t\t? active\n\t\t\t\t: editor.getRootElement() ?? undefined;\n\t\t} else if (!open && draftOpen.current) restoreOrigin();\n\t\tdraftOpen.current = open;\n\n\t\tif (!pinned) return;\n\t\tlet available = pinned === \"orphans\"\n\t\t\t? state.threads.some(view => view.thread.status === \"open\" && view.orphaned)\n\t\t\t: pinned.startsWith(LIST)\n\t\t\t? markersRef.current.some(marker => `${LIST}${marker.key}` === pinned)\n\t\t\t: state.threads.some(view =>\n\t\t\t\tview.thread.id === pinned && view.thread.status === \"open\" && !view.orphaned\n\t\t\t);\n\t\tif (available) return;\n\t\tsetPinned(undefined);\n\t\tsetPreview(undefined);\n\t\tstore.focus(undefined);\n\t\trestoreOrigin();\n\t}, [draft, editor, pinned, restoreOrigin, state.threads, store]);\n\n\t// The list item that held focus is replaced by the thread it opened; focus its way back.\n\tuseLayoutEffect(() => {\n\t\tlet id = selected.current;\n\t\tif (!id || id !== pinned) return;\n\t\tselected.current = undefined;\n\t\tdocument.querySelector(\n\t\t\t`[data-plan-comment-thread=\"${id}\"] [data-plan-comment-back]`,\n\t\t)?.focus();\n\t}, [pinned]);\n\n\tlet sheetId = compact && pinned !== \"orphans\" ? pinned : undefined;\n\tlet sheetPassages = useMemo(() => {\n\t\tif (!sheetId) return undefined;\n\t\tlet list = sheetId.startsWith(LIST) ? sheetId.slice(LIST.length) : undefined;\n\t\tlet entries = placed.filter(entry =>\n\t\t\tlist ? entry.marker === list : entry.view.thread.id === sheetId\n\t\t);\n\t\treturn entries.length > 0 ? entries.flatMap(entry => entry.passages) : undefined;\n\t}, [placed, sheetId]);\n\tlet revealId = compact && draft?.placement ? \"draft\" : sheetId;\n\tlet revealPassages = useMemo(\n\t\t() => compact && draft?.placement ? [draft.placement] : sheetPassages,\n\t\t[compact, draft?.placement, sheetPassages],\n\t);\n\tuseCommentSheetReveal({\n\t\thost,\n\t\tid: revealId,\n\t\tpassages: revealPassages,\n\t});\n\n\tuseEffect(() => {\n\t\tif (!pinned && !preview) return;\n\t\tif (compact && pinned) return;\n\t\tlet outside = (event: PointerEvent) => {\n\t\t\tlet dialog = pinned ? document.getElementById(dialogId(pinned)) : undefined;\n\t\t\tif (dialog?.contains(event.target as Node)) return;\n\t\t\tif (pinned) dismiss();\n\t\t\telse setPreview(undefined);\n\t\t};\n\t\tlet escape = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== \"Escape\") return;\n\t\t\tevent.preventDefault();\n\t\t\tif (pinned) dismiss();\n\t\t\telse setPreview(undefined);\n\t\t};\n\t\tdocument.addEventListener(\"pointerdown\", outside);\n\t\tdocument.addEventListener(\"keydown\", escape);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"pointerdown\", outside);\n\t\t\tdocument.removeEventListener(\"keydown\", escape);\n\t\t};\n\t}, [compact, dismiss, pinned, preview]);\n\n\tif (!host) return null;\n\n\tlet orphaned = state.threads.filter(view => view.thread.status === \"open\" && view.orphaned);\n\tlet markerOf = (id: string) => {\n\t\tlet entry = placed.find(candidate => candidate.view.thread.id === id);\n\t\treturn entry ? markers.find(marker => marker.key === entry.marker) : undefined;\n\t};\n\tlet selectThread = (id: string) => {\n\t\tselected.current = id;\n\t\tsetPinned(id);\n\t};\n\tlet card = (view: ThreadView, showClose = true) => {\n\t\tlet group = markerOf(view.thread.id);\n\t\tlet back = group && group.views.length > 1 ? group : undefined;\n\t\treturn (\n\t\t\t store.accept(view.thread.id)}\n\t\t\t\tonBack={back ? () => setPinned(`${LIST}${back.key}`) : undefined}\n\t\t\t\tonBlur={() => unhover(view.thread.id)}\n\t\t\t\tonClose={showClose ? dismiss : undefined}\n\t\t\t\tonDismiss={() => store.dismiss(view.thread.id)}\n\t\t\t\tonFocus={() => hover(view.thread.id)}\n\t\t\t\tonReply={text => store.reply(view.thread.id, text)}\n\t\t\t\tonRetry={() => store.retry(view.thread.id)}\n\t\t\t\tonTyping={writing => store.announce(view.thread.id, writing)}\n\t\t\t\tquote={view.quote}\n\t\t\t\tshowClose={showClose}\n\t\t\t\tview={view}\n\t\t\t\twriting={state.writing[view.thread.id]}\n\t\t\t/>\n\t\t);\n\t};\n\tlet pinnedList = pinned?.startsWith(LIST)\n\t\t? markers.find(marker => `${LIST}${marker.key}` === pinned)\n\t\t: undefined;\n\tlet pinnedView = pinned && pinned !== \"orphans\" && !pinnedList\n\t\t? state.threads.find(view => view.thread.id === pinned && view.thread.status === \"open\")\n\t\t: undefined;\n\tlet pinnedMarker = pinnedList ?? (pinnedView ? markerOf(pinnedView.thread.id) : undefined);\n\tlet rememberHeight = (id: string, element: HTMLDivElement | null) => {\n\t\tlet height = element?.offsetHeight;\n\t\tif (!height) return;\n\t\tsetCardHeights(current => current[id] === height ? current : { ...current, [id]: height });\n\t};\n\tlet page = host.getBoundingClientRect();\n\tlet cardWidth = Math.min(320, host.clientWidth - 24);\n\tlet previewWidth = Math.min(288, host.clientWidth * 0.8);\n\tlet compactKey: string | undefined;\n\tlet compactId: string | undefined;\n\tlet compactLabel: string | undefined;\n\tlet compactClose: (() => void) | undefined;\n\tlet compactContent: ReactNode = undefined;\n\tlet previewView = preview && pinned !== preview\n\t\t? placed.find(entry => entry.view.thread.id === preview)?.view\n\t\t: undefined;\n\tlet previewMarker = previewView ? markerOf(previewView.thread.id) : undefined;\n\tlet previewRequest: PreviewRequest | undefined = previewView && previewMarker\n\t\t\t&& !previewMarker.button.offscreen\n\t\t? {\n\t\t\tbutton: previewMarker.button,\n\t\t\tid: `plan-comment-preview-${previewView.thread.id}`,\n\t\t\tpage: rect(page),\n\t\t\tsize: CHIP,\n\t\t\tview: previewView,\n\t\t\twidth: previewWidth,\n\t\t}\n\t\t: undefined;\n\tlet previewValue = placedPreview(previewRequest, previewMeasurement);\n\tlet activePreviewId = previewValue?.id;\n\n\tif (compact && draft?.placement) {\n\t\tcompactKey = \"draft\";\n\t\tcompactId = \"plan-comment-draft\";\n\t\tcompactLabel = \"New comment\";\n\t\tcompactClose = cancelDraft;\n\t\tcompactContent = (\n\t\t\t store.start(text)}\n\t\t\t\tshowClose={false}\n\t\t\t/>\n\t\t);\n\t} else if (compact && pinned === \"orphans\" && orphaned.length > 0) {\n\t\tcompactKey = \"orphans\";\n\t\tcompactId = \"plan-comment-thread-orphans\";\n\t\tcompactLabel = \"Orphaned comments\";\n\t\tcompactClose = dismiss;\n\t\tcompactContent = orphaned.map(view => card(view, false));\n\t} else if (compact && pinned && (pinnedView || pinnedList)) {\n\t\t// One sheet serves a block's list and its threads, so moving between them does not reopen it.\n\t\tcompactKey = pinnedMarker && pinnedMarker.views.length > 1\n\t\t\t? `marker:${pinnedMarker.key}`\n\t\t\t: `thread:${pinned}`;\n\t\tcompactId = dialogId(pinned);\n\t\tcompactLabel = pinnedView ? \"Comment thread\" : \"Comments\";\n\t\tcompactClose = dismiss;\n\t\tcompactContent = pinnedView ? card(pinnedView, false) : (\n\t\t\t\n\t\t);\n\t}\n\n\tlet pinnedCard: CommentSurfaceValue | undefined;\n\tif (!compact && pinned && pinnedMarker && (pinnedView || pinnedList)) {\n\t\tlet id = dialogId(pinned);\n\t\tlet hoverId = pinnedView?.thread.id;\n\t\tpinnedCard = {\n\t\t\tariaLabel: pinnedView ? \"Comment thread\" : \"Comments\",\n\t\t\tchildren: pinnedView\n\t\t\t\t? card(pinnedView)\n\t\t\t\t: ,\n\t\t\tclassName: \"plan-comment-card\",\n\t\t\tid,\n\t\t\tonMeasure: element => rememberHeight(id, element),\n\t\t\tonMouseEnter: hoverId ? () => hover(hoverId) : undefined,\n\t\t\tonMouseLeave: hoverId ? () => unhover(hoverId) : undefined,\n\t\t\tstyle: edgePanelPoint(\n\t\t\t\tmarkerRect(pinnedMarker.button, page, CHIP),\n\t\t\t\tpage,\n\t\t\t\tcardWidth,\n\t\t\t\tcardHeights[id] ?? 0,\n\t\t\t),\n\t\t};\n\t}\n\t// An open card keeps the reader on it: every other marker steps back.\n\tlet engaged = !!pinned || !!draft?.placement;\n\n\tlet documentChrome = createPortal(\n\t\t\n\t\t\t{placed.flatMap(({ hits, view }) =>\n\t\t\t\thits.map((hit, index) => (\n\t\t\t\t\t\n\t\t\t\t))\n\t\t\t)}\n\n\t\t\t{markers.map(marker => {\n\t\t\t\tlet { button, views } = marker;\n\t\t\t\tlet single = views.length === 1 ? views[0] : undefined;\n\t\t\t\tlet shown = !!pinned && marker === pinnedMarker;\n\t\t\t\tlet dimmed = engaged && !shown;\n\t\t\t\tlet replies = views.reduce(\n\t\t\t\t\t(total, view) => total + Math.max(0, view.thread.notes.length - 1),\n\t\t\t\t\t0,\n\t\t\t\t);\n\t\t\t\tlet previewId = single ? `plan-comment-preview-${single.thread.id}` : undefined;\n\t\t\t\tlet width = coarse ? Math.max(TOUCH_TARGET, button.width) : button.width;\n\t\t\t\tlet height = coarse ? TOUCH_TARGET : CHIP;\n\t\t\t\t// The touch area stays inside the document, so a chip in the padding keeps a full target.\n\t\t\t\tlet left = Math.max(\n\t\t\t\t\t0,\n\t\t\t\t\tMath.min(button.left - (width - button.width) / 2, page.width - width),\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t 0 || undefined}\n\t\t\t\t\t\tdata-slim={button.slim || undefined}\n\t\t\t\t\t\tinert={dimmed || undefined}\n\t\t\t\t\t\tkey={marker.key}\n\t\t\t\t\t\tonBlur={() => {\n\t\t\t\t\t\t\tif (single) unhover(single.thread.id);\n\t\t\t\t\t\t\t// A focused marker whose passage scrolled away hides once focus leaves it.\n\t\t\t\t\t\t\tmeasure();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={event => {\n\t\t\t\t\t\t\torigin.current = event.currentTarget;\n\t\t\t\t\t\t\tif (shown) dismiss();\n\t\t\t\t\t\t\telse setPinned(single ? single.thread.id : `${LIST}${marker.key}`);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={single ? () => hover(single.thread.id) : undefined}\n\t\t\t\t\t\tonMouseEnter={single ? () => hover(single.thread.id) : undefined}\n\t\t\t\t\t\tonMouseLeave={single ? () => unhover(single.thread.id) : undefined}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttop: button.top - (height - CHIP) / 2,\n\t\t\t\t\t\t\tleft,\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\tvisibility: button.offscreen ? \"hidden\" : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{(single || !button.slim) && (\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!single && {views.length}}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t);\n\t\t\t})}\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t store.start(text)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tclassName: \"plan-comment-card\",\n\t\t\t\t\t\tonMeasure: element => rememberHeight(\"draft\", element),\n\t\t\t\t\t\tstyle: edgePanelPoint(\n\t\t\t\t\t\t\tdraft.placement,\n\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\tcardWidth,\n\t\t\t\t\t\t\tcardHeights.draft ?? 0,\n\t\t\t\t\t\t),\n\t\t\t\t\t}\n\t\t\t\t\t: undefined}\n\t\t\t/>\n\n\t\t\t{orphaned.length > 0 && (\n\t\t\t\t

\n\t\t\t\t\t {\n\t\t\t\t\t\t\torigin.current = event.currentTarget;\n\t\t\t\t\t\t\tsetPinned(current => current === \"orphans\" ? undefined : \"orphans\");\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{orphaned.length} comments without prose\n\t\t\t\t\t\n\t\t\t\t\t card(view)),\n\t\t\t\t\t\t\t\tclassName: \"plan-comment-card plan-comment-orphan-card\",\n\t\t\t\t\t\t\t\tid: \"plan-comment-thread-orphans\",\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: undefined}\n\t\t\t\t\t/>\n\t\t\t\t

\n\t\t\t)}\n\t\t,\n\t\thost,\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{documentChrome}\n\t\t\t{compactKey && compactId && compactLabel && compactClose && (\n\t\t\t\t\n\t\t\t\t\t{compactContent}\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n}\n","editable",false,"branch","documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[183,184,185,186,187,188,189,190,191,192,193,194,195],"navigation",{"_54":55,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150},"sources",[],"viewer","meta",{"_131":132,"_133":134,"_135":136,"_42":31,"_137":126,"_138":31,"_48":49,"_50":49},"branches",[73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130],"tags",[69,70,71,72],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","comments","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","description","Let's compose rich plans together","owner","githubnext","section","","head","empty","pins",[165,166,167],"documents",{"_160":161,"_162":163},"code",{"_156":157,"_158":159},"automations",{"_153":154,"_155":-5},"delivery",{"_151":49,"_152":-5},"tag","04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_164":163},"total",11,"issue",{"_168":158,"_170":181,"_15":158,"_172":182,"_52":174,"_175":31,"_176":174,"_177":159},{"_168":178,"_170":179,"_15":178,"_172":180,"_52":174,"_175":31,"_176":174,"_177":49},{"_168":169,"_170":171,"_15":169,"_172":173,"_52":174,"_175":31,"_176":174,"_177":163},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_168":158,"_170":181,"_15":158,"_172":226,"_52":174,"_175":31,"_176":174},{"_168":178,"_170":179,"_15":178,"_172":225,"_52":174,"_175":31,"_176":174},{"_168":169,"_170":171,"_15":169,"_172":224,"_52":174,"_175":31,"_176":174},{"_168":221,"_170":222,"_15":221,"_172":223,"_52":31,"_175":31,"_176":174},{"_168":218,"_170":219,"_15":218,"_172":220,"_52":31,"_175":31,"_176":174},{"_168":153,"_170":216,"_15":145,"_172":217,"_52":31,"_175":31,"_176":174},{"_168":155,"_170":213,"_15":214,"_172":215,"_52":31,"_175":31,"_176":174},{"_168":151,"_170":211,"_15":151,"_172":212,"_52":31,"_175":31,"_176":174},{"_168":207,"_170":208,"_15":209,"_172":210,"_52":31,"_175":31,"_176":174},{"_168":141,"_170":205,"_15":141,"_172":206,"_52":31,"_175":31,"_176":31},{"_168":202,"_170":203,"_15":202,"_172":204,"_52":31,"_175":31,"_176":31},{"_168":199,"_170":200,"_15":199,"_172":201,"_52":31,"_175":31,"_176":31},{"_168":196,"_170":197,"_15":196,"_172":198,"_52":31,"_175":31,"_176":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794576215781,"sidebar","expanded"]