[{"_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","5a9ffe06dbdca3aa8d3e6c8c5503bc082bc8d7fb","path","packages/editor/src/resolved-layer.tsx","oid","b1d172d6f37140783eb954af0f17dd573202cccd","size",22264,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * A resolved decision, as a marker beside the prose it produced.\n *\n * Reader-local chrome, like the comment layer it is modelled on: it is drawn\n * over the document from measurements and never put in it. Hovering the marker\n * or the prose washes the passage and previews the decision; pressing either\n * pins the same popover open, where the options not chosen and the close\n * button appear. What each of those says and where it sits is `resolved.ts`.\n */\n\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { CheckIcon, ClockIcon, CloseIcon, DecisionIcon, MessageForwardIcon } from \"@chopin/icons\";\nimport { InlineCode, ResolvedActions } from \"@chopin/question/react\";\nimport { useCellValue } from \"@mdxeditor/gurx\";\n\nimport { currentDecision, releaseDecision, subscribeDecision } from \"./decision-pin\";\nimport { useResolvedActions } from \"./resolved-actions\";\nimport { decisionHostVisible } from \"./decision-placement\";\nimport { when } from \"./card\";\nimport { containsHit, passageHits } from \"./comment-hits\";\nimport { Face } from \"./face\";\nimport { COARSE_POINTER_QUERY } from \"./pointer\";\nimport {\n\tCOMPACT_GUTTER,\n\tkeyOf,\n\tMARKER_SIZE,\n\tMARKER_TOUCH_SIZE,\n\tmarkerPoint,\n\townedPoint,\n\tpoint,\n\tpopoverBelow,\n\tresolvedKeys,\n\tshown,\n\tunchosen,\n} from \"./resolved\";\nimport { useQuestionnaires, useRelations } from \"./questionnaires\";\nimport { blockElement } from \"./scroll\";\nimport { useTransitionPresence } from \"./transition-presence\";\nimport { widgets$ } from \"./widget-options\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\nimport type { Rect } from \"./comment-geometry\";\nimport type { Question } from \"@chopin/protocol\";\nimport type { MarkerPlace, PointerAction } from \"./resolved\";\nimport type { PassageHit } from \"./comment-hits\";\nimport type { QuestionnaireStore } from \"./questionnaires\";\n\n/** One answered question that has prose to sit beside. */\ntype Decision = {\n\tkey: string;\n\twidget: string;\n\tquestion: string;\n\tprompt: string;\n\tanswer: string;\n\t/** Undefined when the answer cannot be read back against the options. */\n\tothers?: string[];\n\tby?: string;\n\tat?: string;\n\tkeys: string[];\n\tmeta?: Question.CardMeta;\n};\n\ntype Placed = {\n\tdecision: Decision;\n\tmarker: MarkerPlace;\n\tlineHeight: number;\n\tanchor: Rect;\n\thits: PassageHit[];\n};\n\nconst POPOVER_WIDTH = 336;\nconst EMPTY_META: ReadonlyMap = new Map();\nfunction emptyMeta() {\n\treturn EMPTY_META;\n}\nfunction noMeta() {\n\treturn () => {};\n}\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\nfunction lineHeightOf(element: HTMLElement): number {\n\tlet style = getComputedStyle(element);\n\tlet lineHeight = Number.parseFloat(style.lineHeight);\n\treturn Number.isFinite(lineHeight) ? lineHeight : Number.parseFloat(style.fontSize) * 1.6;\n}\n\n/**\n * The marker's box. A disc is padded out to the hit size around its centre; a\n * slim bar keeps its place in the gutter and only grows to a touch target\n * toward the prose side, where the bar is drawn at its left edge.\n */\nfunction markerStyle(\n\tmarker: MarkerPlace,\n\tlineHeight: number,\n\thit: number,\n\tinset: number,\n): CSSProperties {\n\tif (!marker.compact) return { top: marker.top - inset, left: marker.left - inset };\n\tlet coarse = hit > MARKER_SIZE;\n\tlet height = coarse ? Math.max(hit, lineHeight) : lineHeight;\n\treturn {\n\t\ttop: marker.top - (height - lineHeight) / 2,\n\t\tleft: coarse ? 0 : marker.left,\n\t\twidth: coarse ? hit : COMPACT_GUTTER,\n\t\theight,\n\t\t\"--plan-decision-bar\": `${coarse ? marker.left + 4 : 4}px`,\n\t\t\"--plan-decision-line\": `${lineHeight}px`,\n\t} as CSSProperties;\n}\n\ntype PopoverValue = {\n\tdecision: Decision;\n\tpinned: boolean;\n\tstyle: CSSProperties;\n};\n\nfunction Popover(\n\t{ actions, close, onSource, value }: {\n\t\tactions?: ReactNode;\n\t\tclose: () => void;\n\t\tonSource?: () => void;\n\t\tvalue: PopoverValue;\n\t},\n) {\n\tlet { decision, pinned } = value;\n\tlet others = decision.others ?? [];\n\tlet discussion =\n\t\tdecision.meta?.involved.filter(handle => handle.toLowerCase() !== decision.by?.toLowerCase())\n\t\t\t?? [];\n\treturn (\n\t\t<>\n\t\t\t

\n\t\t\t\t

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

\n\t\t\t\t\n\t\t\t\t\t{onSource && (\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)}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t

\n\t\t\t

\n\t\t\t\t\n\t\t\t\t{decision.answer}\n\t\t\t

\n\t\t\t{others.length > 0 && (\n\t\t\t\t

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

\n\t\t\t\t\t\t{others.map(label => (\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t))}\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t)}\n\t\t\t{(decision.by || decision.at) && (\n\t\t\t\t

\n\t\t\t\t\t{decision.by && (\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{decision.by}\n\t\t\t\t\t\t\t\t{discussion.length > 0 && `, with ${discussion.join(\", \")}`}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t

\n\t\t\t\t\t)}\n\t\t\t\t\t{decision.at && when(decision.at) && (\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{when(decision.at)}\n\t\t\t\t\t\t

\n\t\t\t\t\t)}\n\t\t\t\t

\n\t\t\t)}\n\t\t\t{pinned && actions}\n\t\t\n\t);\n}\n\nfunction Surface(\n\t{ id, immediately, onMeasure, render, value }: {\n\t\tid: string;\n\t\timmediately: boolean;\n\t\tonMeasure: (height: number) => void;\n\t\trender: (value: PopoverValue) => ReactNode;\n\t\tvalue?: PopoverValue;\n\t},\n) {\n\tlet presence = useTransitionPresence(value, 150, immediately);\n\tlet element = useRef(null);\n\tlet present = presence.phase !== \"closed\";\n\tuseEffect(() => {\n\t\tlet node = element.current;\n\t\tif (!node || !present) return;\n\t\tlet observe = new ResizeObserver(() => onMeasure(node.offsetHeight));\n\t\tobserve.observe(node);\n\t\tonMeasure(node.offsetHeight);\n\t\treturn () => observe.disconnect();\n\t}, [onMeasure, present]);\n\tif (presence.phase === \"closed\") return null;\n\tlet active = presence.phase !== \"closing\";\n\tlet current = presence.value;\n\treturn (\n\t\t\n\t\t\t{render(current)}\n\t\t\n\t);\n}\n\nexport function ResolvedLayer({ store }: { store: QuestionnaireStore }) {\n\tlet [editor] = useLexicalComposerContext();\n\tlet options = useCellValue(widgets$);\n\tlet entries = useQuestionnaires(store);\n\tlet relations = useRelations(store);\n\tlet [host, setHost] = useState();\n\tlet [placed, setPlaced] = useState([]);\n\tlet [pointer, dispatch] = useReducer(point, {});\n\tlet pointerRef = useRef(pointer);\n\tpointerRef.current = pointer;\n\tlet owner = useRef