[{"_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","584e50fc45fc5defbf392fb39e1ca3d9edd8a421","path","packages/editor/src/changes.ts","oid","1704e1eaf43118faf3eea137fa405aaac9195df0","size",19612,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * Showing the reader what the agent just did to the plan.\n *\n * The server says what a batch wrote, moved and took out; this puts each of\n * those somewhere on screen, and holds it back until the reader has actually\n * reached it. Everything is drawn by attribute on a block that already exists,\n * so the marks add no element and take no space — an agent editing below the\n * fold must not shift the sentence somebody is in the middle of typing, and a\n * mark that expires a few seconds later must not shift it back.\n *\n * A block that has gone cannot carry a mark, so a hole is drawn on the edge of\n * the block still beside it and the side is part of the address. That is also\n * why a hole can only ever say that something was here: what it was lives in\n * the list behind the chips, which is the one place a removal can be read\n * after the fact.\n *\n * Nothing is written into the document. These are one reader's marks, arriving\n * at a different moment for everybody in the room, and putting them in the\n * document would send them to everyone else and make them undoable.\n */\n\nimport { resolve } from \"./anchors\";\nimport { trail } from \"./trail\";\n\nimport type { Binding } from \"@lexical/yjs\";\nimport type { LexicalEditor } from \"lexical\";\nimport type { Plan } from \"@chopin/protocol\";\nimport type { Trail } from \"./trail\";\n\n/**\n * How far into the viewport a block has to come to count as seen.\n *\n * An inset on the root rather than a ratio of the element: `threshold` is a\n * fraction of the observed block, so a code block taller than the window could\n * never reach one and would stay unread however long it was looked at.\n */\nconst MARGIN = 24;\n\n/** Which of the four marks a placement draws. */\nexport type Kind = \"added\" | \"moved\" | \"removed\" | \"vacated\";\n\n/** One end of a change, resolved to somewhere in this editor. */\ntype Placement = {\n\tid: string;\n\tchange: string;\n\tkind: Kind;\n\tanchor: Plan.Anchor;\n\t/** Which edge of the anchored block, for the two that draw a hole. */\n\tside?: \"before\" | \"after\";\n};\n\n/** A change, as the list behind the chips shows it. */\nexport type Entry = {\n\tid: string;\n\tkind: Plan.Change[\"kind\"];\n\tattribution?: Plan.ChangeAttribution;\n\t/** What was written, or what was taken out. */\n\tblocks: Plan.Excerpt[];\n\t/** Whether the reader has been shown it yet. */\n\tseen: boolean;\n};\n\nexport type Snapshot = {\n\tentries: Entry[];\n\t/** Unseen marks the reader would have to scroll up to reach. */\n\tabove: number;\n\t/** Unseen marks below the fold. */\n\tbelow: number;\n};\n\nconst EMPTY: Snapshot = { entries: [], above: 0, below: 0 };\n\nfunction attribute(placement: Placement): string {\n\treturn placement.kind === \"added\" || placement.kind === \"moved\"\n\t\t? \"data-plan-change\"\n\t\t: `data-plan-gap-${placement.side ?? \"before\"}`;\n}\n\nfunction value(placement: Placement): string {\n\treturn placement.kind;\n}\n\nfunction reduced(): boolean {\n\treturn matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction duration(style: CSSStyleDeclaration, token: string): number {\n\tlet value = style.getPropertyValue(token).trim();\n\tlet number = Number.parseFloat(value);\n\tif (!Number.isFinite(number)) return 0;\n\treturn value.endsWith(\"ms\") ? number : number * 1000;\n}\n\n/** Longer than the fade, so a mark is taken off even if its animation never ends. */\nconst FADED = 2_000;\n\nexport class ChangeStore {\n\t#listeners = new Set<() => void>();\n\t#snapshot: Snapshot = EMPTY;\n\n\t#editor: LexicalEditor | undefined;\n\t#binding: Binding | undefined;\n\t#scroller: HTMLElement | undefined;\n\n\t#changes = new Map();\n\t#placements = new Map();\n\t#marks: Trail = trail(() => this.refresh());\n\t#counter = 0;\n\n\t/** Which way out of view each unseen mark is, from the last time it moved. */\n\t#side = new Map();\n\n\t#observer: IntersectionObserver | undefined;\n\t/** What each observed element currently stands for. */\n\t#observed = new Map>();\n\t/** Attributes this store put on the document, so it can take them off. */\n\t#painted = new Map>();\n\n\t/** Marks on their way out, and which attributes go once they have faded. */\n\t#fading = new Map; timer: ReturnType }>();\n\t/** Whether the remote update being applied right now was the agent's. */\n\t#agent = false;\n\n\t#scrolled = 0;\n\t#frame = 0;\n\n\tsubscribe = (listener: () => void): () => void => {\n\t\tthis.#listeners.add(listener);\n\t\treturn () => this.#listeners.delete(listener);\n\t};\n\n\tsnapshot = (): Snapshot => this.#snapshot;\n\n\t// -- attachment ----------------------------------------------------------\n\n\t/** The editor, so a node key can be turned into something on screen. */\n\tattach(editor: LexicalEditor | undefined): void {\n\t\tif (this.#editor && this.#editor !== editor) this.clear();\n\t\tthis.#editor = editor;\n\t}\n\n\t/** The Yjs binding, so a relative position can be turned into a node key. */\n\tbind(binding: Binding | undefined): void {\n\t\tthis.#binding = binding;\n\t}\n\n\t/**\n\t * The element the plan scrolls in, which is what \"in view\" is measured\n\t * against. The pane around it is the wrong frame: it does not scroll.\n\t */\n\tviewport(element: HTMLElement | undefined): void {\n\t\tif (this.#scroller === element) return;\n\t\tthis.#scroller = element;\n\t\tthis.#observer?.disconnect();\n\t\tthis.#observer = undefined;\n\t\tthis.#observed.clear();\n\t\tthis.refresh();\n\t}\n\n\t// -- what the agent did --------------------------------------------------\n\n\t/**\n\t * Take on a batch.\n\t *\n\t * A move arrives as one change with two ends, and stays one entry in the\n\t * list: shown as a disappearance and an arrival, a reader would have to\n\t * work out for themselves that they were the same block.\n\t */\n\tmark(changes: Plan.Change[]): void {\n\t\tthis.#marks.renew();\n\t\tfor (let change of changes) {\n\t\t\tlet id = `c${this.#counter++}`;\n\t\t\tthis.#changes.set(id, change);\n\n\t\t\tlet ends: Placement[] = [];\n\t\t\tif (change.kind === \"removed\") {\n\t\t\t\tends.push({\n\t\t\t\t\tid: `${id}:at`,\n\t\t\t\t\tchange: id,\n\t\t\t\t\tkind: \"removed\",\n\t\t\t\t\tanchor: change.at.at,\n\t\t\t\t\tside: change.at.side,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tends.push({ id: `${id}:at`, change: id, kind: change.kind, anchor: change.at });\n\t\t\t\tif (change.kind === \"moved\") {\n\t\t\t\t\tends.push({\n\t\t\t\t\t\tid: `${id}:from`,\n\t\t\t\t\t\tchange: id,\n\t\t\t\t\t\tkind: \"vacated\",\n\t\t\t\t\t\tanchor: change.from.at,\n\t\t\t\t\t\tside: change.from.side,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfor (let end of ends) this.#placements.set(end.id, end);\n\t\t\tthis.#marks.add(ends.map(end => end.id));\n\t\t}\n\n\t\tthis.refresh();\n\t}\n\n\t/** Forget everything. The epoch rotated, or the editor went away. */\n\tclear(): void {\n\t\tthis.#marks.dispose();\n\t\tthis.#marks = trail(() => this.refresh());\n\t\tthis.#changes.clear();\n\t\tthis.#placements.clear();\n\t\tthis.#side.clear();\n\t\tthis.#unpaint();\n\t\tthis.#observer?.disconnect();\n\t\tthis.#observer = undefined;\n\t\tthis.#observed.clear();\n\t\tthis.#publish(EMPTY);\n\t}\n\n\tdispose(): void {\n\t\tthis.clear();\n\t\tthis.#marks.dispose();\n\t\tif (this.#frame) cancelAnimationFrame(this.#frame);\n\t\tthis.#frame = 0;\n\t}\n\n\t// -- painting ------------------------------------------------------------\n\n\t/**\n\t * Resolve every mark against the document as it is now, and paint.\n\t *\n\t * Re-resolved on every pass rather than once on arrival: a relative\n\t * position survives edits around it, so re-resolving is what keeps a mark\n\t * on the right block while somebody types above it. Elements are looked up\n\t * again for the same reason — Lexical rebuilds a block's element when the\n\t * block changes, and an attribute set on the old one goes with it.\n\t *\n\t * Guarded whole. This runs from a Lexical update listener, and Lexical runs\n\t * those in one loop with no isolation: a throw here would skip the listener\n\t * that syncs the document, and the room would lose edits over a highlight.\n\t */\n\trefresh = (): void => {\n\t\ttry {\n\t\t\tthis.#resolve();\n\t\t} catch (err) {\n\t\t\tconsole.error(\"[plan] could not mark what the agent changed:\", err);\n\t\t}\n\t};\n\n\t#resolve(): void {\n\t\tlet editor = this.#editor;\n\t\tlet binding = this.#binding;\n\t\tif (!editor || !binding) return;\n\n\t\t// Called from a Lexical update listener, so this runs on every\n\t\t// keystroke in the plan and almost none of them concern a mark.\n\t\tif (this.#placements.size === 0 && this.#painted.size === 0) return;\n\n\t\t// A mark that expired on its own left its placement behind: the trail\n\t\t// owns the lifetime and has no way to reach in here when a timer runs\n\t\t// out, so what it has forgotten is collected on the next pass.\n\t\tthis.#prune();\n\n\t\tlet elements = new Map();\n\t\tlet gone: string[] = [];\n\n\t\tfor (let placement of this.#placements.values()) {\n\t\t\tif (!this.#marks.phase(placement.id)) continue;\n\n\t\t\tlet key = resolve(binding, placement.anchor);\n\t\t\tif (!key) {\n\t\t\t\t// The block it named is gone. Told apart from a block that\n\t\t\t\t// simply has not been painted yet, below, because that one\n\t\t\t\t// resolves to a key and only wants another pass.\n\t\t\t\tgone.push(placement.id);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tlet element = editor.getElementByKey(key);\n\t\t\tif (element) elements.set(placement.id, element);\n\t\t}\n\n\t\tif (gone.length > 0) this.#marks.drop(gone);\n\t\tthis.#observe(elements);\n\t\tthis.#paint(elements);\n\t\tthis.#publish(this.#describe(elements));\n\t}\n\n\t/** Watch what is on screen, so a mark can wait until it has been read. */\n\t#observe(elements: Map): void {\n\t\tlet root = this.#scroller;\n\t\tif (!root || typeof IntersectionObserver === \"undefined\") {\n\t\t\t// No way to tell what is in view, so nothing can be held back.\n\t\t\t// Over-showing beats marks that would never appear at all.\n\t\t\tthis.#marks.saw(elements.keys());\n\t\t\treturn;\n\t\t}\n\n\t\tthis.#observer ??= new IntersectionObserver(entries => this.#sighted(entries), {\n\t\t\troot,\n\t\t\trootMargin: `-${MARGIN}px 0px`,\n\t\t});\n\n\t\tlet wanted = new Map>();\n\t\tfor (let [id, element] of elements) {\n\t\t\tlet ids = wanted.get(element) ?? new Set();\n\t\t\tids.add(id);\n\t\t\twanted.set(element, ids);\n\t\t}\n\n\t\tfor (let element of this.#observed.keys()) {\n\t\t\tif (!wanted.has(element)) this.#observer.unobserve(element);\n\t\t}\n\t\tfor (let element of wanted.keys()) {\n\t\t\tif (!this.#observed.has(element)) this.#observer.observe(element);\n\t\t}\n\t\tthis.#observed = wanted;\n\t}\n\n\t#sighted(entries: IntersectionObserverEntry[]): void {\n\t\tlet seen: string[] = [];\n\n\t\tfor (let entry of entries) {\n\t\t\tlet ids = this.#observed.get(entry.target);\n\t\t\tif (!ids) continue;\n\n\t\t\tif (entry.isIntersecting) {\n\t\t\t\tfor (let id of ids) seen.push(id);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// Which way it went. An unseen mark cannot change side without\n\t\t\t// crossing the viewport, and crossing produces an entry, so this\n\t\t\t// stays true without watching the scroll — except across a jump\n\t\t\t// that skips the viewport entirely, which `#jumped` picks up.\n\t\t\tlet top = entry.rootBounds?.top ?? 0;\n\t\t\tlet side: \"above\" | \"below\" = entry.boundingClientRect.bottom <= top ? \"above\" : \"below\";\n\t\t\tfor (let id of ids) this.#side.set(id, side);\n\t\t}\n\n\t\tif (seen.length > 0) this.#marks.saw(seen);\n\t\tthis.refresh();\n\t}\n\n\t/**\n\t * Recheck which way out of view everything is.\n\t *\n\t * Only worth doing after a jump: an element that leaves one edge of the\n\t * viewport and arrives past the other within a single frame is never\n\t * intersecting at either end, so the observer has nothing to report and\n\t * the side it was last seen on is stale.\n\t */\n\tonScroll = (): void => {\n\t\tlet root = this.#scroller;\n\t\tif (!root) return;\n\n\t\tlet moved = Math.abs(root.scrollTop - this.#scrolled);\n\t\tthis.#scrolled = root.scrollTop;\n\t\tif (moved <= root.clientHeight) return;\n\n\t\tif (this.#frame) cancelAnimationFrame(this.#frame);\n\t\tthis.#frame = requestAnimationFrame(() => {\n\t\t\tthis.#frame = 0;\n\t\t\tthis.#jumped();\n\t\t});\n\t};\n\n\t#jumped(): void {\n\t\tlet root = this.#scroller;\n\t\tif (!root) return;\n\n\t\tlet bounds = root.getBoundingClientRect();\n\t\tfor (let [element, ids] of this.#observed) {\n\t\t\tlet rect = element.getBoundingClientRect();\n\t\t\tif (rect.bottom > bounds.top && rect.top < bounds.bottom) continue;\n\t\t\tlet side: \"above\" | \"below\" = rect.bottom <= bounds.top ? \"above\" : \"below\";\n\t\t\tfor (let id of ids) this.#side.set(id, side);\n\t\t}\n\t\tthis.refresh();\n\t}\n\n\t#paint(elements: Map): void {\n\t\tlet next = new Map>();\n\n\t\tfor (let id of this.#marks.showing()) {\n\t\t\tlet placement = this.#placements.get(id);\n\t\t\tlet element = elements.get(id);\n\t\t\tif (!placement || !element) continue;\n\n\t\t\t// Marked again on its way out: back to an ordinary mark.\n\t\t\tif (this.#fading.has(element)) this.#faded(element);\n\n\t\t\tlet names = next.get(element) ?? new Set();\n\t\t\tnames.add(attribute(placement));\n\t\t\tnext.set(element, names);\n\t\t\telement.setAttribute(attribute(placement), value(placement));\n\t\t}\n\n\t\tlet still = !reduced();\n\t\tfor (let [element, names] of this.#painted) {\n\t\t\tlet staying = next.get(element);\n\t\t\tlet leaving = [...names].filter(name => !staying?.has(name));\n\t\t\tif (leaving.length === 0) continue;\n\n\t\t\t// The stylesheet fades the mark while every attribute is still on,\n\t\t\t// so the wash keeps its shape to the end. Only a block losing all of\n\t\t\t// its marks fades: fading one of two would take the other with it.\n\t\t\tif (still && !staying && element.isConnected) {\n\t\t\t\tthis.#fading.set(element, {\n\t\t\t\t\tnames: new Set(leaving),\n\t\t\t\t\ttimer: setTimeout(() => this.#faded(element), FADED),\n\t\t\t\t});\n\t\t\t\telement.addEventListener(\"animationend\", this.#ended);\n\t\t\t\telement.setAttribute(\"data-plan-fade\", \"\");\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tfor (let name of leaving) element.removeAttribute(name);\n\t\t}\n\t\tthis.#painted = next;\n\t}\n\n\t#ended = (event: AnimationEvent): void => {\n\t\tif (event.animationName !== \"plan-change-out\") return;\n\t\tif (event.target instanceof HTMLElement) this.#faded(event.target);\n\t};\n\n\t#faded(element: HTMLElement): void {\n\t\tlet fading = this.#fading.get(element);\n\t\tif (!fading) return;\n\t\tclearTimeout(fading.timer);\n\t\tthis.#fading.delete(element);\n\t\telement.removeEventListener(\"animationend\", this.#ended);\n\t\telement.removeAttribute(\"data-plan-fade\");\n\t\tfor (let name of fading.names) element.removeAttribute(name);\n\t}\n\n\t#unpaint(): void {\n\t\tfor (let element of this.#fading.keys()) this.#faded(element);\n\t\tfor (let [element, names] of this.#painted) {\n\t\t\tfor (let name of names) element.removeAttribute(name);\n\t\t}\n\t\tthis.#painted.clear();\n\t}\n\n\t/**\n\t * Say who wrote the remote update about to be applied.\n\t *\n\t * Lexical applies it in a microtask, which is before this timer runs, so\n\t * the flag covers exactly that update and no later one.\n\t */\n\tauthored(agent: boolean): void {\n\t\tthis.#agent = agent;\n\t\tif (agent) setTimeout(() => (this.#agent = false));\n\t}\n\n\t/** Whether the update Lexical is applying now came from the agent. */\n\tget agentWriting(): boolean {\n\t\treturn this.#agent;\n\t}\n\n\t/**\n\t * Open up blocks the agent just inserted in front of the reader.\n\t *\n\t * A block that appears at full height shoves everything under it down in\n\t * one frame, which reads as the page lurching. Only blocks on screen are\n\t * worth it: one inserted out of view moves nothing anybody is looking at.\n\t * The caller decides which blocks are safe to open; this only animates.\n\t */\n\tarrived(elements: HTMLElement[]): void {\n\t\tlet root = this.#scroller;\n\t\tif (!root || elements.length === 0 || reduced()) return;\n\n\t\t// Every read before any write, so opening several costs one layout.\n\t\tlet bounds = root.getBoundingClientRect();\n\t\tlet opening = elements.flatMap(element => {\n\t\t\tlet rect = element.getBoundingClientRect();\n\t\t\tif (rect.top >= bounds.bottom || rect.bottom <= bounds.top) return [];\n\t\t\treturn [{ element, height: rect.height, style: getComputedStyle(element) }];\n\t\t});\n\n\t\tfor (let { element, height, style } of opening) {\n\t\t\t// Clipped through the keyframes rather than an inline style, so it\n\t\t\t// cannot outlive the animation or overwrite one Lexical writes.\n\t\t\telement.animate(\n\t\t\t\t[\n\t\t\t\t\t{\n\t\t\t\t\t\theight: \"0px\",\n\t\t\t\t\t\tmarginBlock: \"0px\",\n\t\t\t\t\t\tpaddingBlock: \"0px\",\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\toverflow: \"clip\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\tmarginBlock: `${style.marginBlockStart} ${style.marginBlockEnd}`,\n\t\t\t\t\t\tpaddingBlock: `${style.paddingBlockStart} ${style.paddingBlockEnd}`,\n\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\toverflow: \"clip\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: duration(style, \"--acc-expand\"),\n\t\t\t\t\teasing: style.getPropertyValue(\"--motion-move\").trim() || \"ease-out\",\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t}\n\n\t// -- what the chips say --------------------------------------------------\n\n\t#describe(elements: Map): Snapshot {\n\t\tlet above = 0;\n\t\tlet below = 0;\n\n\t\tfor (let id of this.#marks.pending()) {\n\t\t\t// Only what can actually be reached is worth counting. A mark whose\n\t\t\t// block has not been painted yet is not somewhere to send anyone.\n\t\t\tif (!elements.has(id)) continue;\n\t\t\tif (this.#side.get(id) === \"above\") above++;\n\t\t\telse below++;\n\t\t}\n\n\t\t// A move has two ends, and reaching either of them is having been shown\n\t\t// the change — so this is worked out per change rather than per end.\n\t\tlet shown = new Set();\n\t\tfor (let id of this.#marks.showing()) {\n\t\t\tlet placement = this.#placements.get(id);\n\t\t\tif (placement) shown.add(placement.change);\n\t\t}\n\n\t\tlet entries: Entry[] = [];\n\t\tlet listed = new Set();\n\t\tfor (let id of this.#marks.ids()) {\n\t\t\tlet placement = this.#placements.get(id);\n\t\t\tif (!placement || listed.has(placement.change)) continue;\n\t\t\tlet change = this.#changes.get(placement.change);\n\t\t\tif (!change) continue;\n\n\t\t\tlisted.add(placement.change);\n\t\t\tentries.push({\n\t\t\t\tid: placement.change,\n\t\t\t\tkind: change.kind,\n\t\t\t\t...(change.attribution ? { attribution: change.attribution } : {}),\n\t\t\t\tblocks: change.kind === \"removed\"\n\t\t\t\t\t? change.blocks\n\t\t\t\t\t: [{ type: change.type, preview: change.preview }],\n\t\t\t\tseen: shown.has(placement.change),\n\t\t\t});\n\t\t}\n\n\t\treturn { entries, above, below };\n\t}\n\n\t#publish(snapshot: Snapshot): void {\n\t\tlet same = snapshot.above === this.#snapshot.above\n\t\t\t&& snapshot.below === this.#snapshot.below\n\t\t\t&& JSON.stringify(snapshot.entries) === JSON.stringify(this.#snapshot.entries);\n\t\tif (same) return;\n\n\t\tthis.#snapshot = snapshot;\n\t\tfor (let listener of this.#listeners) listener();\n\t}\n\n\t/** Drop changes no end of which is still being tracked. */\n\t#prune(): void {\n\t\tlet live = new Set();\n\t\tfor (let id of this.#marks.ids()) {\n\t\t\tlet placement = this.#placements.get(id);\n\t\t\tif (placement) live.add(placement.change);\n\t\t}\n\t\tfor (let id of this.#placements.keys()) {\n\t\t\tif (!this.#marks.phase(id)) this.#placements.delete(id);\n\t\t}\n\t\tfor (let id of this.#changes.keys()) {\n\t\t\tif (!live.has(id)) this.#changes.delete(id);\n\t\t}\n\t}\n\n\t// -- going to one --------------------------------------------------------\n\n\t/** Scroll to the nearest unseen mark in one direction, which reveals it. */\n\treveal(direction: \"above\" | \"below\"): void {\n\t\tlet root = this.#scroller;\n\t\tif (!root) return;\n\n\t\tlet bounds = root.getBoundingClientRect();\n\t\tlet best: { element: Element; distance: number } | undefined;\n\n\t\tfor (let id of this.#marks.pending()) {\n\t\t\tif ((this.#side.get(id) ?? \"below\") !== direction) continue;\n\n\t\t\tfor (let [element, ids] of this.#observed) {\n\t\t\t\tif (!ids.has(id)) continue;\n\t\t\t\tlet rect = element.getBoundingClientRect();\n\t\t\t\tlet distance = direction === \"above\"\n\t\t\t\t\t? bounds.top - rect.bottom\n\t\t\t\t\t: rect.top - bounds.bottom;\n\t\t\t\tif (!best || distance < best.distance) best = { element, distance };\n\t\t\t}\n\t\t}\n\n\t\tbest?.element.scrollIntoView({\n\t\t\tblock: \"center\",\n\t\t\t// A scroll behaviour set in script is out of the stylesheet's\n\t\t\t// reach, so the reduced-motion preference has to be read here.\n\t\t\tbehavior: matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\",\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",1794438762383,"sidebar","expanded"]