[{"_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","c54367c600687695262c6dfd6d64f5dfd65e958e","path","packages/editor/src/table/rails.tsx","oid","01c7e372f2265afc0d9beeddfeb50a6324c4c0bd","size",23044,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * The rails a table is reshaped from.\n *\n * A grip per column above the table and per row beside it: the handle a drag\n * starts from, the button a row or column is removed by, and — between two of\n * them — where a new one is inserted.\n *\n * They are drawn as a fixed overlay measured from cell rectangles rather than\n * as chrome inside the node, because a `` cannot contain a `

`. The\n * `data-plan-chrome` slot that callouts and tabs portal into is not available\n * at any price here: the browser hoists a stray div straight back out of a\n * table, so the choice is between measuring and subclassing `TableNode`. This\n * is the technique the selection bubble already uses.\n *\n * Only one table has rails at a time — whichever the pointer is over, or the\n * caret is in. Rails on every table at once would be a page of grey furniture\n * around prose that is mostly not tables.\n *\n * There is no test for this file, on purpose: it is rectangles and pointers all\n * the way down and the test runtime has no DOM. What can be decided without one\n * — which seam a drop means, what a rail's boxes are, what the table permits —\n * lives in `geometry.ts` and `shape.ts`, which are tested.\n */\n\nimport { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n\t$findTableNode,\n\t$isTableNode,\n\tregisterTableCellUnmergeTransform,\n\tregisterTablePlugin,\n\tregisterTableSelectionObserver,\n} from \"@lexical/table\";\nimport { readOnly$ } from \"@mdxeditor/editor\";\nimport { useCellValue } from \"@mdxeditor/gurx\";\nimport { $getRoot, $getSelection, $isElementNode, $isRangeSelection, mergeRegister } from \"lexical\";\n\nimport { destination, dropSeam, gripBox, seamAt, seamBox, seams } from \"./geometry\";\nimport {\n\t$addColumn,\n\t$addRow,\n\t$describe,\n\t$moveColumn,\n\t$moveRow,\n\t$removeColumn,\n\t$removeRow,\n\t$setAlign,\n} from \"./ops\";\nimport { canAddColumn, canAddRow, canRemoveColumn, canRemoveRow, HEADER } from \"./shape\";\n\nimport type { Align } from \"@chopin/dialect\";\nimport type { ElementNode, LexicalEditor, NodeKey } from \"lexical\";\nimport type { Axis, Track } from \"./geometry\";\nimport type { Table } from \"./ops\";\n\n/*\n * A rail is two lanes: grips against the table, buttons beyond them.\n *\n * They are separate because they were not, once. A cross in the middle of a\n * grip is where a drag is most naturally begun, so it swallowed the gesture it\n * was drawn beside — and only sometimes, since whether it had become live yet\n * depended on a re-render landing between the pointer arriving and the button\n * going down. Nothing in the two lanes overlaps now, so neither can take the\n * other's pointer.\n */\nconst GRIP = 14;\nconst TOOL = 14;\nconst DEPTH = GRIP + TOOL;\n\n/** How much of a seam can be aimed at. */\nconst SEAM = 16;\n\n/** One button in the tool lane, and how far each of a pair sits from centre. */\nconst BUTTON = 15;\nconst PAIR = 8;\n\n/**\n * What the alignment button steps through.\n *\n * `null` first because it is what a column starts as and what the source omits;\n * stepping off the end returns to it, so the control can always be put back.\n */\nconst ALIGNMENTS: Align[] = [null, \"left\", \"center\", \"right\"];\n\nconst ALIGN_LABEL: Record = {\n\tnull: \"default\",\n\tleft: \"left\",\n\tcenter: \"centre\",\n\tright: \"right\",\n};\n\nfunction nextAlign(current: Align): Align {\n\tlet index = ALIGNMENTS.indexOf(current ?? null);\n\treturn ALIGNMENTS[(index + 1) % ALIGNMENTS.length] ?? null;\n}\n\n/** Where a measured table is on the screen, and where its tracks are. */\ntype Metrics = {\n\t/**\n\t * The table these were taken from.\n\t *\n\t * Carried so a render that has already switched tables can tell that the\n\t * measurements have not caught up, and draw nothing for the one frame\n\t * before the layout effect runs. Without it the rails appear at the last\n\t * table's coordinates first, which reads as them jumping into place.\n\t */\n\tkey: NodeKey;\n\tleft: number;\n\ttop: number;\n\twidth: number;\n\theight: number;\n\tcolumns: Track[];\n\trows: Track[];\n};\n\n/** A drag in progress. */\ntype Drag = { axis: Axis; from: number; seam: number };\n\n/** Read every table out of the document. */\nfunction collect(editor: LexicalEditor): Table[] {\n\tlet out: Table[] = [];\n\teditor.getEditorState().read(() => {\n\t\tlet walk = (node: ElementNode) => {\n\t\t\tfor (let child of node.getChildren()) {\n\t\t\t\t// A table cannot nest inside a table in this dialect, but a\n\t\t\t\t// callout or a tab panel can hold one, so the walk cannot stop\n\t\t\t\t// at the top level.\n\t\t\t\tif ($isTableNode(child)) out.push($describe(child));\n\t\t\t\telse if ($isElementNode(child)) walk(child);\n\t\t\t}\n\t\t};\n\t\twalk($getRoot());\n\t});\n\treturn out;\n}\n\n/**\n * Measure one table.\n *\n * Cells are found by key rather than by `querySelector`, so nothing here\n * depends on the DOM `@lexical/table` happens to build — whether rows sit\n * under a `tbody`, whether a `colgroup` comes first.\n *\n * Returns nothing when the table is not rendered, which is the case for one\n * inside a tab panel that is not the open tab.\n */\nfunction measure(editor: LexicalEditor, table: Table): Metrics | undefined {\n\tlet element = editor.getElementByKey(table.key);\n\tif (!element) return undefined;\n\n\tlet frame = element.getBoundingClientRect();\n\tif (frame.width === 0 && frame.height === 0) return undefined;\n\n\tlet box = (key: NodeKey | undefined) =>\n\t\tkey ? editor.getElementByKey(key)?.getBoundingClientRect() : undefined;\n\n\t// Columns from the header row, rows from the first column: one pass along\n\t// each edge rather than over the whole grid.\n\tlet columns: Track[] = [];\n\tfor (let key of table.cells[HEADER] ?? []) {\n\t\tlet rect = box(key);\n\t\tif (!rect) return undefined;\n\t\tcolumns.push({ start: rect.left, end: rect.right });\n\t}\n\n\tlet rows: Track[] = [];\n\tfor (let row of table.cells) {\n\t\tlet rect = box(row[0]);\n\t\tif (!rect) return undefined;\n\t\trows.push({ start: rect.top, end: rect.bottom });\n\t}\n\n\treturn {\n\t\tkey: table.key,\n\t\tleft: frame.left,\n\t\ttop: frame.top,\n\t\twidth: frame.width,\n\t\theight: frame.height,\n\t\tcolumns,\n\t\trows,\n\t};\n}\n\n/**\n * Project each column's alignment onto its cells.\n *\n * The alignment is recorded on the header cell, because the `| :--- |` row is\n * the only place GFM has to put it, but it describes the whole column — and CSS\n * cannot cascade from one cell to the others beneath it. So it is written to\n * the elements rather than the document: the same arrangement as a tab panel's\n * visibility, for the same reason, which is that how a column is drawn should\n * not be an edit.\n *\n * Re-applied on every update, because Lexical rebuilds a block's element when\n * the block changes and a style set on the old one goes with it.\n */\nfunction paint(editor: LexicalEditor, tables: Table[]): void {\n\tfor (let table of tables) {\n\t\tfor (let row of table.cells) {\n\t\t\tfor (let column = 0; column < row.length; column++) {\n\t\t\t\tlet element = editor.getElementByKey(row[column]!);\n\t\t\t\tif (!element) continue;\n\t\t\t\t// Empty rather than \"start\", so clearing an alignment hands the\n\t\t\t\t// column back to the stylesheet instead of pinning it to a\n\t\t\t\t// value that would then win against any later change there.\n\t\t\t\telement.style.textAlign = table.align[column] ?? \"\";\n\t\t\t}\n\t\t}\n\t}\n}\n\nexport function TableRails() {\n\tlet [editor] = useLexicalComposerContext();\n\tlet disabled = useCellValue(readOnly$);\n\n\tlet [tables, setTables] = useState([]);\n\tlet [active, setActive] = useState();\n\tlet [metrics, setMetrics] = useState();\n\tlet [drag, setDrag] = useState();\n\n\t/*\n\t * Everything `@lexical/table` assumes is installed, and was not.\n\t *\n\t * Without `registerTablePlugin` a table has no keyboard navigation and none\n\t * of the transforms that keep it rectangular. Without the unmerge transform\n\t * a table pasted from HTML keeps its spans, which the dialect has no way to\n\t * write — the export visitor ignores them, so the cells silently\n\t * redistribute themselves at the next save.\n\t */\n\tuseEffect(\n\t\t() =>\n\t\t\tmergeRegister(\n\t\t\t\tregisterTablePlugin(editor),\n\t\t\t\tregisterTableSelectionObserver(editor),\n\t\t\t\tregisterTableCellUnmergeTransform(editor),\n\t\t\t),\n\t\t[editor],\n\t);\n\n\tlet table = tables.find(item => item.key === active);\n\n\tlet remeasure = useCallback(() => {\n\t\tsetMetrics(table ? measure(editor, table) : undefined);\n\t}, [editor, table]);\n\n\t// A ref so `schedule` can stay stable across renders while still calling\n\t// the current measurement, which changes whenever the active table does.\n\tlet latest = useRef(remeasure);\n\tlatest.current = remeasure;\n\n\tlet pending = useRef(0);\n\tlet schedule = useCallback(() => {\n\t\tcancelAnimationFrame(pending.current);\n\t\tpending.current = requestAnimationFrame(() => latest.current());\n\t}, []);\n\n\tuseEffect(() => () => cancelAnimationFrame(pending.current), []);\n\n\t/*\n\t * Read the document, and only say so when it has actually changed shape.\n\t *\n\t * Every keystroke fires an update, and `collect` allocates as it walks — so\n\t * publishing unconditionally would re-render the rails and re-measure the\n\t * table once per character typed anywhere in the plan. The measurement\n\t * still has to happen on every update, because typing into a cell widens\n\t * its column, but that is a rectangle read behind a frame rather than a\n\t * pass over the whole tree.\n\t */\n\tlet last = useRef(\"\");\n\tuseEffect(() => {\n\t\tlet refresh = () => {\n\t\t\t// An update listener that throws takes every listener after it with\n\t\t\t// it, including the one that syncs to Yjs. Losing the rails is the\n\t\t\t// cheapest outcome available and the only acceptable one.\n\t\t\ttry {\n\t\t\t\tlet next = collect(editor);\n\t\t\t\tlet json = JSON.stringify(next);\n\t\t\t\tif (json !== last.current) {\n\t\t\t\t\tlast.current = json;\n\t\t\t\t\tsetTables(next);\n\t\t\t\t\tpaint(editor, next);\n\t\t\t\t}\n\t\t\t\tschedule();\n\t\t\t} catch (err) {\n\t\t\t\tconsole.error(\"[plan] table rails could not read the document\", err);\n\t\t\t}\n\t\t};\n\t\trefresh();\n\t\treturn editor.registerUpdateListener(refresh);\n\t}, [editor, schedule]);\n\n\t/*\n\t * Repaint the alignment after any render that could have replaced an\n\t * element. Lexical rebuilds a block's element when the block changes, and\n\t * an inline style set on the old one goes with it — so this cannot be left\n\t * to the update above, which deliberately says nothing when the shape has\n\t * not moved.\n\t */\n\tuseEffect(() => {\n\t\ttry {\n\t\t\tpaint(editor, tables);\n\t\t} catch (err) {\n\t\t\tconsole.error(\"[plan] column alignment could not be painted\", err);\n\t\t}\n\t}, [editor, tables]);\n\n\t// Synchronously on a change of table, so switching between two never draws\n\t// one frame of rails at the other's coordinates.\n\tuseLayoutEffect(() => {\n\t\tremeasure();\n\t}, [remeasure, tables]);\n\n\t/*\n\t * Re-measure whenever anything could have moved the table.\n\t *\n\t * Rectangles go stale for more reasons than the document changing: the pane\n\t * resizes, the document scrolls, and the table scrolls inside itself, which\n\t * is a scroll the document never hears about. Scroll is taken on the\n\t * capture phase rather than from any one element, because which element\n\t * scrolls is not fixed.\n\t */\n\tuseEffect(() => {\n\t\tif (!table) return;\n\n\t\twindow.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n\t\twindow.addEventListener(\"resize\", schedule, { passive: true });\n\n\t\tlet element = editor.getElementByKey(table.key);\n\t\tlet observer = new ResizeObserver(schedule);\n\t\tif (element) observer.observe(element);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"scroll\", schedule, { capture: true });\n\t\t\twindow.removeEventListener(\"resize\", schedule);\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [editor, table, schedule]);\n\n\t/*\n\t * Which table the rails belong to.\n\t *\n\t * Pointer rather than caret alone, so a table can be reshaped without first\n\t * clicking into it — and caret as well, so it can be reshaped with no\n\t * pointer at all.\n\t */\n\tlet dragging = useRef(false);\n\tdragging.current = drag !== undefined;\n\tlet leaving = useRef(0);\n\n\tlet hover = useCallback((key: NodeKey | undefined) => {\n\t\tcancelAnimationFrame(leaving.current);\n\t\tif (key) return setActive(key);\n\t\t// A drag holds the pointer captured well outside the rail it started\n\t\t// from, so a leave during one is not a leave.\n\t\tif (dragging.current) return;\n\t\t/*\n\t\t * Otherwise deferred by a frame: moving from the last cell onto a grip\n\t\t * leaves the table before it reaches the rail, and clearing at once\n\t\t * would take the rails out from under a pointer on its way to them.\n\t\t * The rail's own handler cancels this before it runs.\n\t\t */\n\t\tleaving.current = requestAnimationFrame(() => setActive(undefined));\n\t}, []);\n\n\tuseEffect(() => {\n\t\tlet root = editor.getRootElement();\n\t\tif (!root) return;\n\n\t\tlet over = (event: PointerEvent) => {\n\t\t\tlet target = event.target;\n\t\t\tif (!(target instanceof Node)) return;\n\t\t\thover(tables.find(item => editor.getElementByKey(item.key)?.contains(target))?.key);\n\t\t};\n\t\tlet out = () => hover(undefined);\n\n\t\troot.addEventListener(\"pointerover\", over);\n\t\troot.addEventListener(\"pointerleave\", out);\n\t\treturn () => {\n\t\t\troot.removeEventListener(\"pointerover\", over);\n\t\t\troot.removeEventListener(\"pointerleave\", out);\n\t\t};\n\t}, [editor, tables, hover]);\n\n\t/*\n\t * The caret, so a table can be reshaped with no pointer at all.\n\t *\n\t * Only when it moves into a *different* table, not on every update that\n\t * happens to leave it in one. Otherwise typing in a table would keep\n\t * re-asserting it against a pointer resting somewhere else, and the rails\n\t * would flick between the two as long as somebody kept writing.\n\t */\n\tlet caret = useRef(undefined);\n\tuseEffect(() => {\n\t\treturn editor.registerUpdateListener(() => {\n\t\t\teditor.getEditorState().read(() => {\n\t\t\t\tlet selection = $getSelection();\n\t\t\t\tlet found = $isRangeSelection(selection)\n\t\t\t\t\t? $findTableNode(selection.anchor.getNode())?.getKey()\n\t\t\t\t\t: undefined;\n\t\t\t\tif (found === caret.current) return;\n\t\t\t\tcaret.current = found;\n\t\t\t\tif (found) setActive(found);\n\t\t\t});\n\t\t});\n\t}, [editor]);\n\n\tlet act = useCallback((op: () => void) => editor.update(op), [editor]);\n\n\t// Metrics lag the active table by a frame; drawing against the previous\n\t// table's rectangles would put the rails somewhere they do not belong.\n\tif (disabled || !table || !metrics || metrics.key !== table.key) return null;\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\ntype RailProps = {\n\taxis: Axis;\n\tdrag: Drag | undefined;\n\tmetrics: Metrics;\n\tonAct: (op: () => void) => void;\n\tonDrag: (drag: Drag | undefined) => void;\n\tonHover: (key: NodeKey | undefined) => void;\n\ttable: Table;\n\ttracks: Track[];\n};\n\nfunction Rail({ axis, drag, metrics, onAct, onDrag, onHover, table, tracks }: RailProps) {\n\tlet column = axis === \"column\";\n\tlet key = table.key;\n\tlet count = tracks.length;\n\tlet lines = seams(tracks);\n\t// `Axis` is already the word for it.\n\tlet noun = axis;\n\n\t/*\n\t * The track the pointer is on, which is the only one showing a remove\n\t * button.\n\t *\n\t * A cross against every row at once is a rail asking to be misread, and the\n\t * one that matters is always the one being pointed at. Every button is\n\t * rendered regardless, so they all keep their place in the tab order; this\n\t * only decides which of them is drawn.\n\t */\n\tlet [under, setUnder] = useState();\n\n\t/*\n\t * Where the rail sits, in viewport coordinates.\n\t *\n\t * `overflow: hidden` so a column scrolled out of the table's own scroller\n\t * takes its grip with it rather than leaving one floating past the edge.\n\t * The grips lie against the table and the buttons in a lane beyond them, so\n\t * the rail is as deep as the two together.\n\t *\n\t * Half a seam of slack at each end, because the first and last seams sit\n\t * exactly on the table's edges and what is drawn on a seam straddles it:\n\t * without the slack the clip that keeps a scrolled-away grip hidden cuts\n\t * the outermost insert buttons in half, which are the two most likely to\n\t * be wanted.\n\t */\n\tlet pad = SEAM / 2;\n\tlet frame = column\n\t\t? {\n\t\t\tleft: metrics.left - pad,\n\t\t\ttop: metrics.top - DEPTH,\n\t\t\twidth: metrics.width + pad * 2,\n\t\t\theight: DEPTH,\n\t\t}\n\t\t: {\n\t\t\tleft: metrics.left - DEPTH,\n\t\t\ttop: metrics.top - pad,\n\t\t\twidth: DEPTH,\n\t\t\theight: metrics.height + pad * 2,\n\t\t};\n\n\t// Measured against the rail's own edge, slack included, so the two agree.\n\tlet origin = column ? frame.left : frame.top;\n\n\tlet mine = drag?.axis === axis ? drag : undefined;\n\tlet at = mine ? dropSeam(axis, mine.seam) : undefined;\n\tlet target = mine && at !== undefined ? destination(mine.from, at, count) : undefined;\n\n\tlet move = (from: number, to: number) =>\n\t\tonAct(() => (column ? $moveColumn(key, from, to) : $moveRow(key, from, to)));\n\tlet insert = (seam: number) => onAct(() => (column ? $addColumn(key, seam) : $addRow(key, seam)));\n\tlet remove = (index: number) =>\n\t\tonAct(() => (column ? $removeColumn(key, index) : $removeRow(key, index)));\n\n\tlet addable = column ? canAddColumn(table.shape) : canAddRow(table.shape);\n\tlet removable = (index: number) =>\n\t\tcolumn ? canRemoveColumn(table.shape, index) : canRemoveRow(table.shape, index);\n\t// Every column may be taken hold of; the header row may not.\n\tlet holdable = (index: number) => table.shape.simple && (column || index > HEADER);\n\n\treturn (\n\t\t onHover(key)}\n\t\t\tonPointerLeave={() => {\n\t\t\t\tonHover(undefined);\n\t\t\t\tsetUnder(undefined);\n\t\t\t}}\n\t\t>\n\t\t\t{tracks.map((track, index) => {\n\t\t\t\t// `TOOL` is the lane offset: the grips are the lane against the\n\t\t\t\t// table, the buttons the one beyond it.\n\t\t\t\tlet box = gripBox(axis, track, origin, GRIP, TOOL);\n\t\t\t\tif (!holdable(index)) {\n\t\t\t\t\t// The header still gets a bar, so the rail does not have a\n\t\t\t\t\t// gap in it where the row everybody can see plainly is.\n\t\t\t\t\treturn

;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t setUnder(index)}\n\t\t\t\t\t\tonFocus={() => setUnder(index)}\n\t\t\t\t\t\tonPointerDown={event => {\n\t\t\t\t\t\t\t// Pointer capture rather than window listeners: the\n\t\t\t\t\t\t\t// pointer leaves the grip on any real drag, and\n\t\t\t\t\t\t\t// capture is what keeps the events coming without a\n\t\t\t\t\t\t\t// document-level subscription to tear down.\n\t\t\t\t\t\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\t\t\t\t\t\tonDrag({ axis, from: index, seam: index });\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonPointerMove={event => {\n\t\t\t\t\t\t\tif (!event.currentTarget.hasPointerCapture(event.pointerId)) return;\n\t\t\t\t\t\t\tonDrag({\n\t\t\t\t\t\t\t\taxis,\n\t\t\t\t\t\t\t\tfrom: index,\n\t\t\t\t\t\t\t\tseam: seamAt(tracks, column ? event.clientX : event.clientY),\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonPointerUp={event => {\n\t\t\t\t\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId);\n\t\t\t\t\t\t\t/*\n\t\t\t\t\t\t\t * Recomputed from the event rather than read off\n\t\t\t\t\t\t\t * the render that drew this handler. The last\n\t\t\t\t\t\t\t * pointermove and this can fall in the same frame,\n\t\t\t\t\t\t\t * and a drop that used a destination one move out\n\t\t\t\t\t\t\t * of date would land a column beside where it was\n\t\t\t\t\t\t\t * released with nothing anywhere to say why.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tlet seam = dropSeam(\n\t\t\t\t\t\t\t\taxis,\n\t\t\t\t\t\t\t\tseamAt(tracks, column ? event.clientX : event.clientY),\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tlet to = destination(index, seam, count);\n\t\t\t\t\t\t\tif (to !== undefined) move(index, to);\n\t\t\t\t\t\t\tonDrag(undefined);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonPointerCancel={() => onDrag(undefined)}\n\t\t\t\t\t\tonKeyDown={event => {\n\t\t\t\t\t\t\t// The whole gesture from the keyboard too: a\n\t\t\t\t\t\t\t// reorder that is only ever a drag is a reorder\n\t\t\t\t\t\t\t// some people cannot perform at all.\n\t\t\t\t\t\t\tif (!event.metaKey && !event.ctrlKey) return;\n\t\t\t\t\t\t\tlet back = event.key === (column ? \"ArrowLeft\" : \"ArrowUp\");\n\t\t\t\t\t\t\tlet forward = event.key === (column ? \"ArrowRight\" : \"ArrowDown\");\n\t\t\t\t\t\t\tif (!back && !forward) return;\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tmove(index, index + (back ? -1 : 1));\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\t\t\t\t/*\n\t\t\t\t * Removal is a sibling of the grip rather than a child of it: a\n\t\t\t\t * button cannot contain a button, and demoting the cross to a\n\t\t\t\t * span would cost it its place in the tab order for the sake of\n\t\t\t\t * the nesting. It sits in the far lane, over the middle of the\n\t\t\t\t * track it removes.\n\t\t\t\t */\n\t\t\t}\n\t\t\t{tracks.map((track, index) => {\n\t\t\t\tlet middle = (track.start + track.end) / 2;\n\t\t\t\t// A column carries two buttons, so they sit either side of the\n\t\t\t\t// track's middle rather than both on it; a row has only the one.\n\t\t\t\tlet place = (offset: number) =>\n\t\t\t\t\tseamBox(axis, middle + (column ? offset : 0), origin, TOOL, BUTTON);\n\t\t\t\tlet shown = under === index ? \"\" : undefined;\n\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t\t\t{column\n\t\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\t setUnder(index)}\n\t\t\t\t\t\t\t\t\tonPointerEnter={() => setUnder(index)}\n\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\tonAct(() => $setAlign(key, index, nextAlign(table.align[index] ?? null)))}\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: null}\n\t\t\t\t\t\t{removable(index)\n\t\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\t setUnder(index)}\n\t\t\t\t\t\t\t\t\tonPointerEnter={() => setUnder(index)}\n\t\t\t\t\t\t\t\t\tonClick={() => remove(index)}\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: null}\n\t\t\t\t\t\n\t\t\t\t);\n\t\t\t})}\n\n\t\t\t{addable\n\t\t\t\t&& lines.map((line, seam) => {\n\t\t\t\t\t// Nothing may be inserted above the header row.\n\t\t\t\t\tif (!column && seam <= HEADER) return null;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t insert(seam)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\n\t\t\t{target !== undefined && at !== undefined\n\t\t\t\t? (\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t\t: null}\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",1794550819060,"sidebar","expanded"]