31:T8ce,md`## How it works Observable cell syntax already *is* formula-bar syntax: what a spreadsheet user types after \`=\` is the cell body, and the name comes from where they clicked. Recalculation is the reactive runtime, a circular reference is \`RuntimeError: circular definition\`, and a reference to a blank cell is an implicit variable ("A5 is not defined") that is taken over the moment A5 is defined — so formulas can be typed in any order. **Names as well as positions.** Split definition from placement: ~~~js taxRate = 0.2 // definition — the semantic name B1 = taxRate // placement — "this lives at B1" ~~~ The sheet detects a placement cell (a positional name whose body is a bare reference to a non-positional name), renders the target's value at B1 and labels it. \`= B1 * 12\` is then relative and shifts on copy; \`= taxRate * 12\` is absolute and never shifts. Placement also puts *any* cell on the grid: \`D5 = revenuePlot\`. **Pinning a coordinate.** \`$\` is legal in a JS identifier, so \`$A$1\`, \`$A1\` and \`A$1\` are names too. The sheet defines each one it sees as an alias to the plain address, and paste leaves a pinned component alone — Excel's semantics, still with nothing stored outside the names. **Ranges.** \`A4:C4\` is not JavaScript, so the bar expands it before parsing into \`[A4, B4, C4]\` — an array of ordinary references, every one a real dependency — and reads a full-rectangle array literal back as a range for display. \`d3.sum(A4:C4)\` is stored as \`d3.sum([A4, B4, C4])\`. Written without spaces round the colon; \`x ? a1 : b2\` stays a ternary. **Text.** A bare name that resolves to nothing (\`Total\`), or words that do not parse (\`Total revenue\`), is stored as a string literal; the bar shows the quotes. A broken formula stays broken. **Overflow.** Content spills into empty neighbours and clips at the first occupied cell — Excel's rule generalised from text to DOM nodes, done in CSS with nothing stored. A column is \`auto\` (the widest text value, capped) unless \`size\` names it; DOM values spill rather than widen. **Sparse.** Only defined cells are variables and only defined cells have DOM. An empty sheet is zero of both; the grid is painted, not built.`32:T9fc,expandRanges = (src, { max = 4096 } = {}) => { // `A4:C4` is not JavaScript. It is expanded BEFORE parsing into `[A4, B4, C4]` (row-major, // flat), so the runtime sees an array of ordinary references and every dependency is real. // A scan, not a parse: it only has to know where strings and comments are. Written without // spaces round the colon -- `x ? a1 : b2` is a ternary and stays one. Pins come from the // first endpoint. A range inside an object literal is not supported. const isId = (ch) => ch != null && /[A-Za-z0-9_$]/.test(ch); const n = src.length; let out = "", i = 0; while (i < n) { const ch = src[i]; if (ch === '"' || ch === "'") { let j = i + 1; while (j < n && src[j] !== ch) { if (src[j] === "\\") j++; j++; } out += src.slice(i, j + 1); i = j + 1; continue; } if (ch === "`") { let j = i + 1, d = 0; while (j < n) { if (src[j] === "\\") { j += 2; continue; } if (src[j] === "$" && src[j + 1] === "{") { d++; j += 2; continue; } if (src[j] === "}" && d) { d--; j++; continue; } if (src[j] === "`" && !d) break; j++; } out += src.slice(i, j + 1); i = j + 1; continue; } if (ch === "/" && src[i + 1] === "/") { let j = src.indexOf("\n", i); if (j < 0) j = n; out += src.slice(i, j); i = j; continue; } if (ch === "/" && src[i + 1] === "*") { let j = src.indexOf("*/", i + 2); j = j < 0 ? n : j + 2; out += src.slice(i, j); i = j; continue; } if (/[A-Za-z_$]/.test(ch) && !(i > 0 && (isId(src[i - 1]) || src[i - 1] === "."))) { let j = i; while (j < n && isId(src[j])) j++; const a = src.slice(i, j); if (src[j] === ":") { let l = j + 1; while (l < n && isId(src[l])) l++; const b = src.slice(j + 1, l); const ra = parseRef(a.toUpperCase()), rb = parseRef(b.toUpperCase()); if (ra && rb) { const c0 = Math.min(ra.col, rb.col), c1 = Math.max(ra.col, rb.col); const r0 = Math.min(ra.row, rb.row), r1 = Math.max(ra.row, rb.row); const count = (c1 - c0 + 1) * (r1 - r0 + 1); if (count > max) throw new Error(`range ${a}:${b} has ${count} cells; limit ${max}`); const cells = []; for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) cells.push(formatRef(c, r, ra.colAbs, ra.rowAbs)); out += "[" + cells.join(", ") + "]"; i = l; continue; } } out += a; i = j; continue; } out += ch; i++; } return out; }33:T62a,collapseRanges = (src) => { // The inverse, for DISPLAY only: an array literal that is a full rectangle of references in // row-major order with uniform pins reads back as `A4:C4`. Nothing is stored in this form. const cell = parser.parseCell(src, { ranges: true }); const edits = []; const visit = (node) => { if (!node || typeof node !== "object") return; if (Array.isArray(node)) { node.forEach(visit); return; } if (node.type === "ArrayExpression" && node.elements.length >= 2) { const refs = node.elements.map((e) => (e?.type === "Identifier" ? parseRef(e.name) : null)); if (refs.every(Boolean)) { const cols = refs.map((r) => r.col), rows = refs.map((r) => r.row); const c0 = Math.min(...cols), c1 = Math.max(...cols), r0 = Math.min(...rows), r1 = Math.max(...rows); const w = c1 - c0 + 1, h = r1 - r0 + 1; const { colAbs, rowAbs } = refs[0]; const ok = refs.length === w * h && refs.every((r, i) => r.col === c0 + (i % w) && r.row === r0 + Math.floor(i / w) && r.colAbs === colAbs && r.rowAbs === rowAbs); if (ok) { edits.push({ start: node.start, end: node.end, text: formatRef(c0, r0, colAbs, rowAbs) + ":" + formatRef(c1, r1, colAbs, rowAbs) }); return; } } } for (const k in node) if (k !== "type" && k !== "start" && k !== "end") visit(node[k]); }; visit(cell.body); let out = src; for (const e of edits.sort((a, b) => b.start - a.start)) out = out.slice(0, e.start) + e.text + out.slice(e.end); return out; }34:T1aa5,sh_css = `.sh-frame { position: relative; box-sizing: border-box; width: 100%; height: 420px; resize: vertical; overflow: hidden; border: 1px solid var(--theme-foreground-faintest, #ddd); border-radius: 6px; background: var(--theme-background, #fff); font: 12px var(--sans-serif, system-ui); } .sh-bar { display: flex; align-items: stretch; gap: 6px; height: 26px; padding: 0 6px; border-bottom: 1px solid var(--theme-foreground-faintest, #ddd); background: var(--theme-background-alt, #fafafa); } .sh-bar .sh-addr { font: 11px var(--code, monospace); min-width: 52px; opacity: 0.7; display: flex; align-items: center; } .sh-bar .sh-eq { display: flex; align-items: center; opacity: 0.5; font: 12px var(--code, monospace); } /* the formula bar is ONE editor-5 CodeMirror for the whole sheet, retargeted on selection -- not cellEditor, which clones a hotbar shell per instance */ .sh-formula { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; } .sh-formula .cm-editor { height: 26px; background: transparent; } .sh-frame.sh-bar-open .sh-formula { overflow: visible; } .sh-frame.sh-bar-open .sh-formula .cm-editor { position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: auto; min-height: 26px; max-height: 60vh; background: var(--theme-background, #fff); border: 1px solid var(--theme-blue, #3b7dd8); border-radius: 0 0 4px 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); } .sh-frame.sh-bar-open .sh-formula .cm-scroller { max-height: 60vh; overflow-y: auto; } .sh-formula .cm-editor.cm-focused { outline: none; } .sh-formula .cm-scroller { overflow-x: auto; font: 12px var(--code, monospace); } .sh-formula .cm-content { padding: 4px 0; } .sh-formula .cm-gutters { display: none; } .sh-fmt { display: flex; align-items: center; } .sh-fmt form { margin: 0; display: flex; align-items: center; width: auto; } .sh-fmt select { font: 11px var(--sans-serif, system-ui); width: 90px; max-width: 90px; } /* z-index: 0 makes the scrollport a stacking context, so nothing inside it -- however high its z-index -- can paint over the sticky headers (z 3) or the selection box (z 5) */ .sh-scroll { position: absolute; inset: 26px 0 0 0; overflow: auto; z-index: 0; } .sh-canvas { position: relative; } /* the grid is PAINTED, not built: one viewport-sized canvas that sticks to the scrollport and is redrawn on scroll, so a tall sheet costs no more than a short one */ .sh-grid { position: sticky; top: 0; left: 0; display: block; z-index: 0; pointer-events: none; color: var(--theme-foreground-faintest, #e8e8e8); } .sh-colhead, .sh-rowhead { position: absolute; z-index: 3; box-sizing: border-box; background: var(--theme-background-alt, #f4f4f4); color: var(--theme-foreground-muted, #666); font: 10px var(--sans-serif, system-ui); user-select: none; -webkit-user-select: none; } .sh-colhead { top: 0; left: 0; height: 18px; } .sh-rowhead { top: 0; left: 0; width: 44px; } .sh-corner { position: absolute; top: 0; left: 0; width: 44px; height: 18px; z-index: 4; background: var(--theme-background-alt, #f4f4f4); border-right: 1px solid var(--theme-foreground-faintest, #ddd); border-bottom: 1px solid var(--theme-foreground-faintest, #ddd); } .sh-h { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; border-right: 1px solid var(--theme-foreground-faintest, #ddd); border-bottom: 1px solid var(--theme-foreground-faintest, #ddd); } .sh-h.sh-h-sel { background: var(--theme-foreground-faintest, #ddd); color: var(--theme-foreground, #111); } .sh-rs { position: absolute; z-index: 1; } .sh-rs-col { top: 0; right: 0; width: 5px; height: 100%; cursor: col-resize; } .sh-rs-row { left: 0; bottom: 0; height: 5px; width: 100%; cursor: row-resize; } .sh-viz { position: absolute; inset: 0; pointer-events: none; } /* !important: hosting frames style .observablehq descendants with ID selectors (lopepage-2: "#lopepage-2 .lope-viz .observablehq {position: relative}") which outrank any class selector. Relative positioning stacks the cells in flow order and the top offset then applies on top of that: measured 43px pitch, not 22. */ /* Overflow is a GENERAL rule, not a format: content spills into neighbouring cells while they are empty and clips at the first occupied one (Excel's rule, generalised from text to DOM nodes). width/height are max-content clamped by max-width/max-height, so CSS does it with no measurement pass and nothing is stored -- the footprint is a function of the content and of which neighbours are empty. A per-cell stored span would be grid-container's layout: literal coming back in. */ .sh-viz > .observablehq { position: absolute !important; margin: 0 !important; box-sizing: border-box; overflow: hidden; width: max-content; height: max-content; display: flex; align-items: center; padding: 0 4px; pointer-events: auto; background: var(--theme-background, #fff); } /* a text value never wraps: it is one line that either fits, spills, or clips -- and nowrap is what makes scrollWidth its natural width for column auto-fit */ .sh-viz > .observablehq.sh-text { white-space: nowrap; } .sh-viz > .observablehq.sh-num { justify-content: flex-end; font: 12px var(--code, monospace); } .sh-viz > .observablehq.sh-err { color: #d73a49; font: 11px var(--code, monospace); } .sh-viz > .observablehq.sh-running { opacity: 0.45; } .sh-viz > .observablehq > * { max-width: 100%; } .sh-viz > .observablehq input[type="range"] { width: 100%; } .sh-name { position: absolute; top: 0; left: 2px; z-index: 2; font: 8px var(--sans-serif, system-ui); line-height: 8px; color: var(--theme-foreground-muted, #999); pointer-events: none; } .sh-sel { position: absolute; z-index: 5; box-sizing: border-box; pointer-events: none; border: 2px solid var(--theme-blue, #3b7dd8); } /* ABOVE the cells (which reflow stamps z 1, spilling z 2): an opaque value or a spilled md block must tint, not wipe out, the selection. Transparent, so it reads as a wash. */ .sh-range { position: absolute; z-index: 3; pointer-events: none; background: rgba(59,125,216,0.10); } .sh-ghost { position: absolute; z-index: 5; pointer-events: none; display: none; box-sizing: border-box; border: 1px dashed var(--theme-blue, #3b7dd8); } .sh-fill { position: absolute; z-index: 7; box-sizing: border-box; width: 7px; height: 7px; background: var(--theme-blue, #3b7dd8); border: 1px solid var(--theme-background, #fff); cursor: crosshair; } .sh-input { position: absolute; z-index: 6; box-sizing: border-box; padding: 0 3px; font: 12px var(--code, monospace); border: 2px solid var(--theme-blue, #3b7dd8); background: var(--theme-background, #fff); color: var(--theme-foreground, #111); outline: none; display: none; }`35:Tb59c,sheet = { // notebook-kit spells these `viewof$x`; the legacy spelling is canonical in source const canonName = (n) => (typeof n === "string" ? n.replace(/^(viewof|mutable)\$/, "$1 ") : n); const CW = 88, RH = 22, HW = 44, HH = 18, BAR = 26; const AUTO_CAP = 260; // an auto-fit column stops widening here; past it, content spills const SPILL_MAX = 16; // a runaway value must not paint over the whole sheet const UNDO_MAX = 200; // undo history lives per MODULE, not per instance: saving a format or size rewrites the sheet // cell, which rebuilds the sheet, and a column resize must not erase what came before it const histories = new WeakMap(); const styleId = "sh-style"; // a save-in-place bakes this