[{"_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",{"_41":42,"_227":-5,"_228":-5,"_229":230},"routes/repo",{"_34":-7,"_35":36,"_37":38,"_39":40,"_41":42,"_43":32,"_44":32,"_45":32,"_46":32,"_47":32,"_48":32,"_49":50,"_51":50,"_52":32,"_53":-7,"_54":-7,"_55":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69},"routes/repo.blob",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":-5,"_26":27,"_28":29,"_29":30,"_31":32,"_33":14},"ref","main","path","packages/editor/src/resolved-layer.tsx","oid","2298c3dc8ebdc61f112cbd3fe93c99297745d113","size",21322,"commit","2182c95de44a8f63fd86af1c5874ae0ca298f807","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. Only the marker\n * answers: hovering or focusing it washes the passage and previews the\n * decision, and pressing it pins the same popover open, where the options not\n * chosen and the close button appear. The prose itself stays quiet so reading\n * it never pops anything up. What each of those says and where it sits is\n * `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 { Face } from \"./face\";\nimport {\n\tCOMPACT_GUTTER,\n\tkeyOf,\n\tmarkerPoint,\n\tmarkerReach,\n\townedPoint,\n\tpoint,\n\tpopoverBelow,\n\tresolvedKeys,\n\tshown,\n\tunchosen,\n\tverticalReach,\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 { 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\tmarkerSize: number;\n\tanchor: Rect;\n\t/** Where the prose starts, from the host's left edge. */\n\tprose: number;\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 drawn box, and how far its invisible reach may extend sideways\n * without leaving the gutter. A slim bar is drawn at its box's left edge.\n */\nfunction markerStyle(\n\tmarker: MarkerPlace,\n\tlineHeight: number,\n\tmarkerSize: number,\n\tprose: number,\n\tvertical: { top: number; bottom: number },\n): CSSProperties {\n\tlet width = marker.compact ? COMPACT_GUTTER : markerSize;\n\tlet reach = markerReach(marker.left, width, prose);\n\treturn {\n\t\ttop: marker.top,\n\t\tleft: marker.left,\n\t\t\"--plan-decision-reach-start\": `${reach.start}px`,\n\t\t\"--plan-decision-reach-end\": `${reach.end}px`,\n\t\t\"--plan-decision-reach-top\": `${vertical.top}px`,\n\t\t\"--plan-decision-reach-bottom\": `${vertical.bottom}px`,\n\t\t...(marker.compact && {\n\t\t\twidth,\n\t\t\theight: lineHeight,\n\t\t\t\"--plan-decision-line\": `${lineHeight}px`,\n\t\t}),\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 scroller = useMemo(() => host?.querySelector(\"[data-plan-scroll]\"), [host]);\n\tlet [placed, setPlaced] = useState([]);\n\tlet [pointer, dispatch] = useReducer(point, {});\n\tlet pointerRef = useRef(pointer);\n\tpointerRef.current = pointer;\n\tlet owner = useRef