[{"_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","377402d237eb84155f8d9342b6a7e07862eeff8f","path","packages/editor/src/comment-layer.tsx","oid","e66cbf0aee18ebc94cd497b40db03afd1407b623","size",24791,"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\";\n\nimport { DraftCard, ThreadCard } from \"./comments\";\nimport { edgePanelPoint, markerPoints, 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 { Point, Rect } from \"./comment-geometry\";\nimport type { PassageHit } from \"./comment-hits\";\nimport type { ThreadStore, ThreadView } from \"./threads\";\n\ntype PlacedThread = {\n\tview: ThreadView;\n\tbutton: Point;\n\thits: PassageHit[];\n\tpassages: Rect[];\n};\ntype MeasuredThread = { view: ThreadView; target: Rect; passages: Rect[]; hits: Rect[] };\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\tlet replies = Math.max(0, view.thread.notes.length - 1);\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 [preview, setPreview] = useState();\n\tlet [previewMeasurement, setPreviewMeasurement] = useState();\n\tlet [pinned, setPinned] = useState();\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 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 id = pinned === \"orphans\"\n\t\t\t? \"plan-comment-thread-orphans\"\n\t\t\t: `plan-comment-thread-${pinned}`;\n\t\tlet dialog = document.getElementById(id);\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 measured: MeasuredThread[] = [];\n\t\tlet size = coarse ? 44 : 24;\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\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\thits: Array.from(exact.getClientRects(), rect),\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\tlet fallback = view.targetKey\n\t\t\t\t\t\t? blockElement(editor, view.targetKey)?.getBoundingClientRect()\n\t\t\t\t\t\t: undefined;\n\t\t\t\t\treturn fallback ? { bounds: fallback, hits: [] } : 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\tmeasured.push({\n\t\t\t\t\tview,\n\t\t\t\t\ttarget: targetRect,\n\t\t\t\t\tpassages,\n\t\t\t\t\thits: target.hits,\n\t\t\t\t});\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\t\tlet buttons = markerPoints(measured, page, size);\n\t\tlet next = measured.map((entry, index) => ({\n\t\t\tview: entry.view,\n\t\t\tbutton: buttons[index]!,\n\t\t\thits: passageHits(page, entry.hits),\n\t\t\tpassages: entry.passages,\n\t\t}));\n\n\t\tplacedRef.current = next;\n\t\tsetPlaced(next);\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tmeasure();\n\t}, [host, state.threads, coarse]);\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=\"${pending.id}\"]`,\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: 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\tlet sheetId = compact && pinned !== \"orphans\" ? pinned : undefined;\n\tlet sheet = placed.find(entry => entry.view.thread.id === sheetId);\n\tlet revealId = compact && draft?.placement ? \"draft\" : sheetId;\n\tlet revealPassages = useMemo(\n\t\t() => compact && draft?.placement ? [draft.placement] : sheet?.passages,\n\t\t[compact, draft?.placement, sheet?.passages],\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\n\t\t\t\t? document.getElementById(`plan-comment-thread-${pinned}`)\n\t\t\t\t: 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 card = (view: ThreadView, showClose = true) => (\n\t\t store.accept(view.thread.id)}\n\t\t\tonBlur={() => unhover(view.thread.id)}\n\t\t\tonClose={showClose ? dismiss : undefined}\n\t\t\tonDismiss={() => store.dismiss(view.thread.id)}\n\t\t\tonFocus={() => hover(view.thread.id)}\n\t\t\tonReply={text => store.reply(view.thread.id, text)}\n\t\t\tonRetry={() => store.retry(view.thread.id)}\n\t\t\tonTyping={writing => store.announce(view.thread.id, writing)}\n\t\t\tquote={view.quote}\n\t\t\tshowClose={showClose}\n\t\t\tview={view}\n\t\t\twriting={state.writing[view.thread.id]}\n\t\t/>\n\t);\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 previewEntry = preview && pinned !== preview\n\t\t? placed.find(entry => entry.view.thread.id === preview)\n\t\t: undefined;\n\tlet previewRequest: PreviewRequest | undefined = previewEntry\n\t\t? {\n\t\t\tbutton: previewEntry.button,\n\t\t\tid: `plan-comment-preview-${previewEntry.view.thread.id}`,\n\t\t\tpage: rect(page),\n\t\t\tsize: coarse ? 44 : 24,\n\t\t\tview: previewEntry.view,\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) {\n\t\tlet pinnedView = state.threads.find(view =>\n\t\t\tview.thread.id === pinned && view.thread.status === \"open\"\n\t\t);\n\t\tif (pinnedView) {\n\t\t\tcompactKey = `thread:${pinned}`;\n\t\t\tcompactId = `plan-comment-thread-${pinned}`;\n\t\t\tcompactLabel = \"Comment thread\";\n\t\t\tcompactClose = dismiss;\n\t\t\tcompactContent = card(pinnedView, false);\n\t\t}\n\t}\n\n\tlet documentChrome = createPortal(\n\t\t\n\t\t\t{placed.map(({ button, hits, view }) => {\n\t\t\t\tlet shown = pinned === view.thread.id;\n\t\t\t\tlet previewId = `plan-comment-preview-${view.thread.id}`;\n\t\t\t\tlet anchor = markerRect(button, page, coarse ? 44 : 24);\n\t\t\t\tlet cardPoint = edgePanelPoint(\n\t\t\t\t\tanchor,\n\t\t\t\t\tpage,\n\t\t\t\t\tcardWidth,\n\t\t\t\t\tcardHeights[view.thread.id] ?? 0,\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t

\n\t\t\t\t\t\t{hits.map((hit, index) => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t unhover(view.thread.id)}\n\t\t\t\t\t\t\tonClick={event => {\n\t\t\t\t\t\t\t\torigin.current = event.currentTarget;\n\t\t\t\t\t\t\t\tif (shown) dismiss();\n\t\t\t\t\t\t\t\telse setPinned(view.thread.id);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonFocus={() => hover(view.thread.id)}\n\t\t\t\t\t\t\tonMouseEnter={() => hover(view.thread.id)}\n\t\t\t\t\t\t\tonMouseLeave={() => unhover(view.thread.id)}\n\t\t\t\t\t\t\tstyle={button}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t rememberHeight(view.thread.id, element),\n\t\t\t\t\t\t\t\t\tonMouseEnter: () => hover(view.thread.id),\n\t\t\t\t\t\t\t\t\tonMouseLeave: () => unhover(view.thread.id),\n\t\t\t\t\t\t\t\t\tstyle: cardPoint,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: undefined}\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 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",1794524514636,"sidebar","expanded"]