[{"_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/table/rails.tsx","oid","ee0f07457af11caab058928fbf758fa955ce3e60","size",24721,"commit","2182c95de44a8f63fd86af1c5874ae0ca298f807","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. Within that table only the row and\n * column being pointed at, or holding the caret, draw a grip; an insert button\n * shows only while its seam is aimed at.\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 { $findTableNode, $isTableCellNode } from \"@lexical/table\";\nimport { $findMatchingParent, $getSelection, $isRangeSelection } from \"lexical\";\n\nimport { alignmentLabel, nextAlign } from \"./alignment\";\nimport { destination, dropSeam, gripBox, seamAt, seamBox, seams } from \"./geometry\";\nimport {\n\t$addColumn,\n\t$addRow,\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 { 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 = 12;\nconst TOOL = 24;\nconst DEPTH = GRIP + TOOL;\n\n/** How much of a seam can be aimed at. */\nconst SEAM = 24;\n\n/** One button in the tool lane, and how far each of a pair sits from centre. */\nconst BUTTON = 24;\nconst PAIR = 13;\n\nexport type RailMode = \"full\" | \"grips\";\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\t/** The visible rect of the scroller the table is in, which rails never draw past. */\n\tclip: { top: number; bottom: number };\n};\n\n/** The nearest ancestor that scrolls vertically, or the viewport. */\nfunction visibleRect(element: HTMLElement): Metrics[\"clip\"] {\n\tfor (let node = element.parentElement; node; node = node.parentElement) {\n\t\tif (!/auto|scroll/.test(getComputedStyle(node).overflowY)) continue;\n\t\tlet { top, bottom } = node.getBoundingClientRect();\n\t\treturn { top, bottom };\n\t}\n\treturn { top: 0, bottom: innerHeight };\n}\n\n/** A fixed overlay's `clip-path`, cutting off whatever falls outside `clip`. */\nfunction clipTo(\n\tclip: Metrics[\"clip\"],\n\tbox: { left: number; top: number; width: number; height: number },\n) {\n\t// Vertical only: a row rail lives in the gutter, which can be outside the\n\t// scroller's own box, and the chrome a rail must not cover is above and below.\n\tlet inset = [clip.top - box.top, 0, box.top + box.height - clip.bottom, 0]\n\t\t.map(edge => `${Math.max(edge, 0)}px`);\n\treturn `inset(${inset.join(\" \")})`;\n}\n\n/** A drag in progress. */\ntype Drag = { axis: Axis; from: number; seam: number };\n\n/** A cell of the active table, by row and column. */\ntype Cell = { table: NodeKey; row: number; column: number };\n\n/** The seam an insert button is aimed at, drawn across the table. */\ntype Aim = { axis: Axis; seam: number };\n\nfunction same(a: Cell | undefined, b: Cell | undefined): boolean {\n\treturn a?.table === b?.table && a?.row === b?.row && a?.column === b?.column;\n}\n\nfunction cellAt(tables: Table[], key: NodeKey): Cell | undefined {\n\tfor (let table of tables) {\n\t\tfor (let [row, keys] of table.cells.entries()) {\n\t\t\tlet column = keys.indexOf(key);\n\t\t\tif (column >= 0) return { table: table.key, row, column };\n\t\t}\n\t}\n\treturn undefined;\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\tclip: visibleRect(element),\n\t};\n}\n\nexport function TableRails(\n\t{ disabled, mode = \"full\", tables }: {\n\t\tdisabled?: boolean;\n\t\tmode?: RailMode;\n\t\ttables: Table[];\n\t},\n) {\n\tlet [editor] = useLexicalComposerContext();\n\n\tlet [active, setActive] = useState();\n\tlet [metrics, setMetrics] = useState();\n\tlet [drag, setDrag] = useState();\n\tlet [pointed, setPointed] = useState();\n\tlet [caretCell, setCaretCell] = useState();\n\tlet [aim, setAim] = useState();\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\tuseEffect(() => {\n\t\treturn editor.registerUpdateListener(schedule);\n\t}, [editor, schedule]);\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\tlet caret = useRef(undefined);\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(() => {\n\t\t\t// Back to the table holding the caret, if any, rather than none.\n\t\t\tsetActive(caret.current);\n\t\t\tsetAim(undefined);\n\t\t});\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\tlet found = tables.find(item => editor.getElementByKey(item.key)?.contains(target));\n\t\t\thover(found?.key);\n\t\t\tlet element = target instanceof Element ? target : target.parentElement;\n\t\t\tlet cell = element?.closest(\"td, th\");\n\t\t\tlet key = found && cell\n\t\t\t\t? found.cells.flat().find(item => editor.getElementByKey(item) === cell)\n\t\t\t\t: undefined;\n\t\t\tlet at = key ? cellAt([found!], key) : undefined;\n\t\t\tsetPointed(last => same(last, at) ? last : at);\n\t\t};\n\t\tlet out = () => {\n\t\t\thover(undefined);\n\t\t\tsetPointed(undefined);\n\t\t};\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 tablesRef = useRef(tables);\n\ttablesRef.current = tables;\n\tuseEffect(() => {\n\t\tlet sync = () => {\n\t\t\teditor.getEditorState().read(() => {\n\t\t\t\tlet selection = $getSelection();\n\t\t\t\tlet node = $isRangeSelection(selection) ? selection.anchor.getNode() : undefined;\n\t\t\t\tlet found = node ? $findTableNode(node)?.getKey() : undefined;\n\t\t\t\tlet cell = node ? $findMatchingParent(node, $isTableCellNode)?.getKey() : undefined;\n\t\t\t\tlet at = cell ? cellAt(tablesRef.current, cell) : undefined;\n\t\t\t\tsetCaretCell(last => same(last, at) ? last : at);\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\tsync();\n\t\treturn editor.registerUpdateListener(sync);\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\tlet tools = mode === \"full\";\n\tlet aimed = pointed?.table === table.key ? pointed : undefined;\n\tlet hot = aimed ?? (caretCell?.table === table.key ? caretCell : undefined);\n\tlet holding = caretCell?.table === table.key;\n\n\tlet line = aim\n\t\t? seams(aim.axis === \"column\" ? metrics.columns : metrics.rows)[aim.seam]\n\t\t: undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{aim && line !== 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\t\n\t\t\t\n\t\t\n\t);\n}\n\nfunction seamLine(axis: Axis, line: number, metrics: Metrics) {\n\tlet box = axis === \"column\"\n\t\t? { left: line - 1, top: metrics.top, width: 2, height: metrics.height }\n\t\t: { left: metrics.left, top: line - 1, width: metrics.width, height: 2 };\n\treturn { ...box, clipPath: clipTo(metrics.clip, box) };\n}\n\ntype RailProps = {\n\t/** The seam an insert is aimed at, on either rail. */\n\taim: Aim | undefined;\n\t/** The track the pointer is on in the table; the caret alone does not count. */\n\taimed: number | undefined;\n\taxis: Axis;\n\t/** Whether the caret is in this table, which keeps every grip faintly drawn. */\n\tcaret: boolean;\n\tdrag: Drag | undefined;\n\t/** The track being pointed at in the table, or holding the caret. */\n\thot: number | undefined;\n\tmetrics: Metrics;\n\tonAct: (op: () => void) => void;\n\tonAim: (aim: Aim | undefined) => void;\n\tonDrag: (drag: Drag | undefined) => void;\n\tonHover: (key: NodeKey | undefined) => void;\n\ttable: Table;\n\ttracks: Track[];\n\ttools: boolean;\n};\n\nfunction Rail(\n\t{\n\t\taim,\n\t\taimed,\n\t\taxis,\n\t\tcaret,\n\t\tdrag,\n\t\thot,\n\t\tmetrics,\n\t\tonAct,\n\t\tonAim,\n\t\tonDrag,\n\t\tonHover,\n\t\ttable,\n\t\ttracks,\n\t\ttools,\n\t}: RailProps,\n) {\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. A full rail adds the button lane beyond\n\t * them; a compact rail measures only the grips it actually draws.\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 depth = tools ? DEPTH : GRIP;\n\tlet gripLane = tools ? TOOL : 0;\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\t// A row rail is beside the table, so its tooltips go further out to the left;\n\t// a column rail's already open above it.\n\tlet side = column ? undefined : \"left\";\n\t/*\n\t * Only the seams either side of the track being pointed at take the pointer.\n\t * The rest of the button lane lets clicks through to whatever it overlaps —\n\t * on a column rail, the last line of the paragraph above the table.\n\t */\n\tlet near = under ?? aimed;\n\tlet live = (seam: number) => near !== undefined && (seam === near || seam === near + 1);\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\tlet box = gripBox(axis, track, origin, GRIP, gripLane);\n\t\t\t\tif (!holdable(index)) {\n\t\t\t\t\t// Undrawn, but still the rail's: a hole here would be a\n\t\t\t\t\t// pointerleave on the way from the header to the first grip.\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{tools && 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\t// Never under an aimed insert: a click meant for adding must not\n\t\t\t\t// land on removing.\n\t\t\t\tlet shown = under === index && aim?.axis !== axis ? \"\" : 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{tools && 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 onAim(undefined)}\n\t\t\t\t\t\t\tonClick={() => insert(seam)}\n\t\t\t\t\t\t\tonFocus={() => onAim({ axis, seam })}\n\t\t\t\t\t\t\tonPointerEnter={() => onAim({ axis, seam })}\n\t\t\t\t\t\t\tonPointerLeave={() => onAim(undefined)}\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",{"_55":56,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150},"sources",[],"viewer","meta",{"_131":132,"_133":134,"_135":136,"_43":32,"_137":14,"_138":32,"_49":50,"_51":50},"branches",[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,14,127,128,129,130],"tags",[70,71,72,73],"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","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":50,"_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,"_53":174,"_175":32,"_176":174,"_177":159},{"_168":178,"_170":179,"_15":178,"_172":180,"_53":174,"_175":32,"_176":174,"_177":50},{"_168":169,"_170":171,"_15":169,"_172":173,"_53":174,"_175":32,"_176":174,"_177":163},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_168":158,"_170":181,"_15":158,"_172":226,"_53":174,"_175":32,"_176":174},{"_168":178,"_170":179,"_15":178,"_172":225,"_53":174,"_175":32,"_176":174},{"_168":169,"_170":171,"_15":169,"_172":224,"_53":174,"_175":32,"_176":174},{"_168":221,"_170":222,"_15":221,"_172":223,"_53":32,"_175":32,"_176":174},{"_168":218,"_170":219,"_15":218,"_172":220,"_53":32,"_175":32,"_176":174},{"_168":153,"_170":216,"_15":145,"_172":217,"_53":32,"_175":32,"_176":174},{"_168":155,"_170":213,"_15":214,"_172":215,"_53":32,"_175":32,"_176":174},{"_168":151,"_170":211,"_15":151,"_172":212,"_53":32,"_175":32,"_176":174},{"_168":207,"_170":208,"_15":209,"_172":210,"_53":32,"_175":32,"_176":174},{"_168":141,"_170":205,"_15":141,"_172":206,"_53":32,"_175":32,"_176":32},{"_168":202,"_170":203,"_15":202,"_172":204,"_53":32,"_175":32,"_176":32},{"_168":199,"_170":200,"_15":199,"_172":201,"_53":32,"_175":32,"_176":32},{"_168":196,"_170":197,"_15":196,"_172":198,"_53":32,"_175":32,"_176":32},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794436615249,"sidebar","expanded"]