31:Td78,loadSvg = { const drawing = viewof drawing; const file = htl.html``; const say = (msg, ok) => { file.title = msg; file.style.outline = ok ? "" : "1px solid #B25B3A"; }; // Real files lead with an XML declaration, a BOM, comments or a DOCTYPE before the root; strip that // preamble so what lands in the literal is the

${file}${dl}

`; }32:T888,howToDrive = md` | gesture | what it does | lens | |---|---|---| | drag a shape | moves it | \`transform\` | | tap a polygon or path, drag a handle | moves one vertex or anchor | \`points\`, path \`d\` | | tap anything else, drag a corner or the rotate handle | scale or rotate from the box | \`transform\` | | drag the pivot dot | moves the point the box scales and rotates around | \`transform\` | | double-click an edge / a vertex / empty canvas | add a vertex / remove one / drop in a shape | \`children\` | | tap again in the same place | steps down through stacked shapes | — | | shift-tap, or rubber-band | adds to the selection | — | A selection also carries **chips**: the same commands, one tap away, drawn only when they apply: | chip | | chip | | |---|---|---|---| | **⧉** | duplicate | **∿** | smooth ↔ corner the anchor | | **⇄** | swap fill and stroke | **◑** | give it a gradient (minted into \`defs\`) | | **≡** _(drag)_ | stroke width | **➤** | put an arrowhead on it | | **⊚** / **◠** | close / open the path | | | The panel under the drawing edits \`fill\`, \`stroke\`, width, opacity and the dash as typed inputs; each change commits through the same write path, so the source keeps the notation you wrote. | key | | |---|---| | **R** **E** **L** | drag out a rect, an ellipse, a line | | **P** | place path anchors; click the first again to close, double-click to finish open | | **S** | scribble a freehand path; it is fitted to Béziers on release | | **V** / **Esc** | back to selecting (a finished tool returns by itself) | | **⌘G** / **⇧⌘G** | group / ungroup the selection | | **⌘D** | duplicate | | **⌘C** **⌘X** **⌘V** / **⇧⌘V** | copy, cut, paste / paste in place | | **⌘A** | select all | | **1** / **2** | reset the view / fit it to the selection | | **\\[** **\\]** / **{** **}** | lower, raise / send to back, front | | **Delete** | removes the selection | | **⌘Z** / **⇧⌘Z** | undo, redo (byte for byte), and declines if something else wrote to the cell first | | **arrows**, **shift+arrows** | nudge by one unit, by ten | | **alt** while dragging | ignore snapping | ${ ref('architecture') }.`33:T4ee,problemP = md`You can create computer graphics by typing code or by a graphical user interface, each has advantages in certain situations. If we can switch between these two modes fluidly, bidirectional, the advantage of each can be leveraged at that moment in time and the combined sum is greater than the parts in isolation. Keeping both means keeping them in step, which is the view-update problem ${ cite('bancilhon1981') } recast for programs ${ cite('chugh2016') }. Feedback in the other direction, from program to picture, is the older half of the problem and has a standard vocabulary ${ cite('tanimoto1990') }; what is at issue here is the return path. Propagation is the hard part. Sketch-n-Sketch infers program changes from output changes by tracing values back to the expressions that produced them ${ cite('chugh2016') } ${ cite('hempel2019') }, which works for programs the tracer understands. This notebook takes a different approach. The update path is a composition of bidirectional lenses ${ cite('foster2007lenses') }, which gives it laws, a stated domain, and property tests (${ ref('laws') }). What is editable is a drawing whose shape is written literally; interpolated values are rendered but left to their source (${ ref('sinks') }).`34:T54e,lensesP = md`A **lens** between a source type ${ tex`S` } and a view type ${ tex`A` } is a pair of functions ${ cite('foster2007lenses') }: ${ tex.block`\mathrm{get} : S \to A \qquad \mathrm{put} : A \times S \to S` } ${ tex`\mathrm{get}` } reads a view out of a source; ${ tex`\mathrm{put}` } pushes an edited view back *into a particular source*. The second argument is what distinguishes a lens from a parser/printer pair: ${ tex`S \to A` } and ${ tex`A \to S` } would discard everything the parser did not model, whereas ${ tex`\mathrm{put}` } still holds the old source while it writes, so it can keep what the view never mentioned ${ cite('foster2007lenses') }. Here ${ tex`S` } is text and ${ tex`A` } is whatever a gesture manipulates: a number, a point list, a transform. The lenses compose. Writing ${ tex`l_1` } for the outer and ${ tex`l_2` } for the inner lens, ${ tex.block`(l_1 \circ l_2).\mathrm{get}(s) = l_2.\mathrm{get}(l_1.\mathrm{get}(s))` } ${ tex.block`(l_1 \circ l_2).\mathrm{put}(b, s) = l_1.\mathrm{put}\big(l_2.\mathrm{put}(b, l_1.\mathrm{get}(s)),\; s\big)` } and that is exactly the chain a drag runs down: cell source → template literal → attribute string → typed value, then back up again. Composition of well-behaved lenses is well-behaved, so the laws are established once, per level, and hold for the composite.`35:T725,residueP = md`SVG's syntax is not canonical. \`"0,0 100 100"\` and \`"0 0 100 100"\` are the same rectangle; \`rotate(45)\` and \`matrix(0.707 0.707 -0.707 0.707 0 0)\` are the same transform. So ${tex`\mathrm{get}`} is not injective: a whole *fibre* of source strings maps to one view. ${tex.block`\mathrm{get}^{-1}(a) = \{\, s \in S \;\mid\; \mathrm{get}(s) = a \,\}`} Any ${tex`\mathrm{put}`} has to pick a representative from that fibre. Reprinting canonically is the obvious choice, and it reformats the file every time a shape is nudged. The rule used here instead: > **Skip rule.** If ${tex`a = \mathrm{get}(s)`}, return ${tex`s`} unchanged. This implements GetPut rather than merely satisfying it, and it is what keeps comments, spacing and \`rotate(45)\` intact across an edit. Everything the view does not determine is **residue**, and residue survives. It costs strict PutPut. Take ${tex`a_2 = \mathrm{get}(s)`} and ${tex`a_1 \neq \mathrm{get}(s)`}, with ${tex`s`} written non-canonically. On the left the first put reprints, the second skips, and the non-canonical spelling is gone; on the right the single put skips and the spelling survives, giving two different strings that encode the same drawing. What holds is PutPut *up to observation*: ${tex.block`\mathrm{get}(\mathrm{put}(a_2, \mathrm{put}(a_1, s))) = \mathrm{get}(\mathrm{put}(a_2, s))`} and strict PutPut holds whenever ${tex`a_2 \neq \mathrm{get}(s)`}. This is a deliberate trade rather than a defect: canonical printing would restore the law and remove the property that makes the editor usable on source a human wrote. Weakening a law to a quotient is the usual move when residue matters ${cite("czarnecki2009bx")}. \`test_putput_skip_rule_corner\` in the appendix targets this case directly, since random generators are unlikely to reach it.`36:T12be,towerP = md`Two things make SVG harder than the string examples in ${ cite('foster2007lenses') }: the source is *nested*, and every address is relative to a source that editing can change. **Notation.** Composition is written in diagrammatic order throughout: ${ tex`\ell_1 \circ \ell_2` } applies ${ tex`\ell_1` } first, so the outer lens is on the left. This is the reverse of the usual convention for functions, and matches the direction a gesture travels. **The tower.** Four types and three lenses: ${ tex.block`\begin{aligned} \ell_{\mathrm{lit}} &\;:\; \mathrm{Src} \rightharpoonup \mathrm{Doc} &&\texttt{literalLens} \\ \ell_{\mathrm{attr}}(p, n) &\;:\; \mathrm{Doc} \rightharpoonup \mathrm{Attr} &&\texttt{attrTextLens} \\ \ell_\mu &\;:\; \mathrm{Attr} \rightharpoonup A &&\texttt{transformLens},\ \texttt{pointsLens},\ \texttt{pathLens},\ \texttt{lengthLens} \end{aligned}` } ${ tex`\mathrm{Src}` } is the cell's own definition text, recovered from \`Function.prototype.toString()\`; ${ tex`\mathrm{Doc}` } is the bytes of the \`svg\` template literal inside it; ${ tex`\mathrm{Attr}` } is one attribute value; ${ tex`A` } is what the gesture actually manipulates: a number, a point list, an affine matrix, a list of path operations. A drag of a shape is the composite ${ tex.block`\ell_{\mathrm{lit}} \circ \ell_{\mathrm{attr}}(p, \texttt{transform}) \circ \ell_{\mathrm{transform}} \;:\; \mathrm{Src} \rightharpoonup \mathbb{R}^6` } and structural editing branches off one level up, at ${ tex`\ell_{\mathrm{kids}}(p) = \texttt{childrenLens}(p) : \mathrm{Doc} \rightharpoonup \mathrm{Elem}^*` }, whose view is the list of child *source slices*, so that every child carries its own residue and only the children that changed are reprinted. **Addressing is dependent, and that is the interesting part.** For a document ${ tex`s` } let ${ tex`\mathrm{Path}(s)` } be the set of addresses of its elements. ${ tex`\ell_{\mathrm{attr}}` } is not a lens but a *family* indexed by that set, and the set depends on the source: ${ tex.block`\ell_{\mathrm{attr}} \;:\; (s : \mathrm{Doc}) \to \mathrm{Path}(s) \times \mathrm{Name} \to \mathrm{Lens}(\mathrm{Doc}, \mathrm{Attr})` } The two kinds of put differ exactly here: ${ tex.block`\begin{aligned} \mathrm{Path}\big(\mathrm{put}_{\ell_{\mathrm{attr}}(p,n)}(a, s)\big) &= \mathrm{Path}(s) \\ \mathrm{Path}\big(\mathrm{put}_{\ell_{\mathrm{kids}}(p)}(k, s)\big) &\neq \mathrm{Path}(s) \quad\text{in general} \end{aligned}` } An attribute edit preserves the address space; a structural edit does not. That one inequality is the reason the editor holds a selection as a *path* and re-resolves it after every put instead of caching a node, and the reason handles are refreshed after an attribute edit but cleared after a structural one. **Partiality is part of the type.** ${ tex`\ell_{\mathrm{lit}}` } refuses text that would not survive re-entry into the template literal; ${ tex`\ell_{\mathrm{kids}}` } refuses a string that is not exactly one element. So put is partial, ${ tex`\mathrm{put} : A \times S \rightharpoonup S` }, and composition intersects the domains: ${ tex.block`\mathrm{dom}(\ell_1 \circ \ell_2) = \{\,(b, s) \;\mid\; s \in \mathrm{dom}(\ell_1.\mathrm{get}),\; (b,\, \ell_1.\mathrm{get}(s)) \in \mathrm{dom}(\ell_2.\mathrm{put}),\; (\ell_2.\mathrm{put}(b, \ell_1.\mathrm{get}(s)),\, s) \in \mathrm{dom}(\ell_1.\mathrm{put})\,\}` } The editor's contract is that this partiality is *visible*: a gesture whose put is undefined is declined before it previews, and the handle is drawn locked with the reason (${ ref('sinks') }). Refusing is the domain being honest, not a failure. **Composition preserves the laws.** If ${ tex`\ell_1` } and ${ tex`\ell_2` } are well-behaved on their domains then so is ${ tex`\ell_1 \circ \ell_2` }. GetPut: ${ tex.block`(\ell_1 \circ \ell_2).\mathrm{put}\big((\ell_1 \circ \ell_2).\mathrm{get}(s),\, s\big) = \ell_1.\mathrm{put}\big(\ell_2.\mathrm{put}(\ell_2.\mathrm{get}(\ell_1.\mathrm{get}(s)),\, \ell_1.\mathrm{get}(s)),\, s\big) = \ell_1.\mathrm{put}(\ell_1.\mathrm{get}(s),\, s) = s` } using GetPut of ${ tex`\ell_2` } then of ${ tex`\ell_1` }; PutGet is the same argument read downwards. This is why the laws are established once per level and never re-argued for the chain. It is also why a new microsyntax lens is a self-contained obligation: prove it at its own level and the tower is unaffected. The weakened form composes too. Each level keeps PutPut only up to observation (${ ref('residue') }), and since ${ tex`(\ell_1 \circ \ell_2).\mathrm{get} = \ell_2.\mathrm{get} \circ \ell_1.\mathrm{get}` }, the composite's quotient is exactly the composite's own \`get\`, so "up to observation" at each level gives "up to observation" of the whole chain, with no further loss.`37:T601,architectureP = md`One rule separates the maths from the pointer: > **Tools emit commands, commands are lens puts, one writer applies them.** A tool is a pointer state machine (press, move, release). It may draw a preview into an overlay layer and mutate the live DOM; it may not persist anything. What it produces at the end of a gesture is a *command*: a pure function from the document text to new document text, or an attribute value to write at an address. The writer is the only code in the notebook that redefines a cell. The layers, what lives in each, and what each is allowed to know are shown in the figure below; it is itself an \`svgLens\` drawing, so the stack can be edited by the editor it describes. Nothing below L4 touches the DOM or the pointer, so L0–L3 is testable outside of a browser, and is (${ ref('laws') }). Two consequences worth stating: **The source is the truth; the DOM is a projection.** ${ cite('larkworthy2026') } calls the general arrangement *source-last*: the live runtime is canonical and text is recovered from it on demand, and this editor applies it one level down, to the bytes inside one cell. A gesture is therefore an ordinary edit; what that buys, and why the resulting feedback loop terminates, is ${ ref('propagation') }. **The browser stays the authority on geometry.** Hit testing is \`elementsFromPoint\`, bounding boxes are \`getBBox\`, screen-to-user conversion is \`getScreenCTM\`. The lenses never re-implement SVG semantics; they only rewrite the text that produced them.`38:T1114,viewof archDiagram = svgLens(svg`

`; bar.append( act("insert at front", () => node.addShape('', 0)), act("append", () => node.addShape('')), act("delete selection", () => node.removeSelection()), act("send to back", () => { const p = last(); if (p) node.zOrder(p, "back"); }), act("bring to front", () => { const p = last(); if (p) node.zOrder(p, "front"); }) ); return htl.html`

${bar}${lawBadges(node, invalidation)}

`; }3d:T733,sinksP = md`Everything so far assumed the drawing is written out literally. A drawing may also *interpolate* values from elsewhere: \`transform="translate(\${shift} 0)"\` reads \`shift\` from a slider. The editor tolerates interpolation. The drawing renders, and the literal text around a hole stays editable; what the editor will not do is write back into a hole. The source text of an attribute is cut into **slots**. Each slot is either a literal run of digits or an interpolation \`\${...}\`, and only the first kind is somewhere a gesture can write: | slot | can a gesture write it? | |---|---| | literal digits | yes: spliced in place, exactly as in ${ref("rect")} | | an interpolation \`\${...}\` | no: kept verbatim, and the handle is drawn locked with the reason | A gesture that touches only literal slots commits as usual. A gesture that would have to change a hole is declined: any literal slots it also moved are written, the hole is left byte for byte, and the readout reports the mix. When the whole value is one hole there is nothing to write, so the gesture is refused outright. Refusing is a guarantee, not effort withheld. A hole could in principle be *inverted*: resolve \`\${shift}\` to the slider and set its value, or solve \`\${Math.sin(t)}\` numerically. Inversion by reflection into an upstream view was tried and removed. It is fragile, it rarely holds, and its result is indistinguishable on screen from an exact edit until it silently drifts. Declining instead keeps every law in ${ref("laws")} true of every accepted gesture, and the handle says which case it is in. The term *hole* is used here in a weaker sense than in ${cite("omar2019holes")}, where holes are typed and the language has a semantics for evaluating around them; here a hole is only an interpolation the editor renders but will not rewrite.`3e:T90b,toolsP = md`The lenses so far answer one question: given a new view, what source produces it. A tool asks something narrower and carries a memory with it: given a *pointer delta* and the context a gesture accumulates, what edit does the source get? That memory is what a state-based lens lacks, and naming it as one value is what lets a single law describe every tool's edit instead of one law per tool. The generalisation is already in the literature the paper cites. Where a *state-based* lens maps states to states, an **edit lens** ${ cite('hofmann2012editlenses') } maps *edits* to edits through a **complement** (a memory the translation is allowed to keep), and ${ cite('johnson2016unifying') } axiomatises it alongside the asymmetric **delta lens** of ${ cite('diskin2011delta') }. The two frameworks do two jobs here. The delta lens is the shape of the *writer*: the source is authoritative, the drawing is derived. The edit lens is the shape of a *tool*, because what a tool has that a state-based lens lacks is exactly a complement. The dictionary is one line. **The complement is that memory:** | edit lens | svg-lens | | --- | --- | | ${ tex`X,\ M_X` } | the cell source; the edits a command can make to it | | ${ tex`Y,\ M_Y` } | the rendered drawing; pointer deltas | | ${ tex`C` } | \`ctx.state.drag\`: the origin, the grabbed targets, the hit list, the snap boxes | | ${ tex`q : M_Y \times C \rightharpoonup M_X \times C` } | the tool | | ${ tex`K` } | "the DOM on screen is what this source renders to" | Making the delta a value is the whole of the framework. A tool returns a \`gestureDelta\` (one of \`attr\`, \`command\`, \`select\`, \`view\`, \`clip\`), and three functions consume it: \`previewDelta\` paints the live DOM, \`commitDelta\` writes the source once, \`revertDelta\` throws the preview away. One write path, so every law in ${ ref('toollaws') } is stated about the delta and checked in one place rather than re-proved per tool. It is also what lets the registry stay *open*: \`svgLens(node)\` uses the default tools, \`svgLens(node, { tools: [toolVertex] })\` pins a vertex-only editor, and \`svgLens(node, { tools: (d) => [myTool, ...d] })\` extends without restating the defaults: a test runs one tool in isolation and a figure shows a reduced editor by the same mechanism.`3f:Tec0,toollawsP = md`Five laws come straight from the axioms ${ cite('johnson2016unifying') }. The null gesture is the sharpest. | | law | what it says here | what it rules out | | --- | --- | --- | --- | | **T1** | ${ tex`p(1,c)=(1,c)` } | a null gesture writes nothing *and* returns its memory untouched | a click that grabs nothing creating a shape, or a gesture losing the context it holds | | **T2** | ${ tex`p(mm',c)=(nn',c'')` } | translating a composite gesture equals composing the translations | float drift — two gestures ending at the same point committing different bytes | | **T3** | ${ tex`\mathrm{PutGet}` } | the gesture you made is the gesture the committed source shows | a preview that looks right on screen but not once the source is reloaded | | **T4** | ${ tex`\mathrm{PutInc}` } | a gesture commits against the state it *began* from | a commit that mints a new node letting a follow-up write land on a stale document | | **T5** | consistency | if the DOM agreed with the source before, it agrees after | makes T3's screen-level check a consequence, not a separate assertion | **Partiality is the formal content of "a tool must decline cleanly."** A gesture outside a lens's domain is undefined, so its translation is undefined too: the action is partial. \`onPointerDown\` returning \`false\` is that partiality — a tool with nothing to say about a press declines it rather than falling through to drop a shape on an empty click, which is why an empty-canvas tool gates on \`ctx.pick\` first. The same partiality runs through every surface that reaches the DOM: a command declines by returning \`null\` from its plan, and an affordance chip greys out exactly when its command declines. One notion of "not applicable here" spans pointer, command and chrome. Six more laws are ours, not the papers': * **T6 Confinement.** A tool that returns \`false\` has changed nothing, and installing it cannot change what earlier tools do. Registry order is priority, so tool sets form a non-commutative monoid under concatenation. This is the law that makes a tool a *plugin* rather than a *patch*: it is what a third-party tool has to prove. * **T7 Rebase agreement.** \`rebase(path, cmd)\` equals re-locating the same element after the command runs: operational transformation's TP1 ${ cite('ressel1996') }, one-sided. * **T10 Hit agreement.** What hover outlines, what a press claims and what a double-click enters are three readings of *one* answer, \`ctx.pick\`, so they cannot drift apart. It also pins the group policy: a click takes the outermost unopened container, a double-click descends a level, Escape ascends. * **T11 The view is not an edit.** Zoom, pan and fit write nothing and push nothing onto undo; and the same drag *in the drawing's own units* commits the same bytes at any zoom, because every measurement goes through \`ctx\` and \`getScreenCTM\` already carries the viewBox, with alignment snapping off. (Snapping is magnetism measured in *screen* pixels, the one deliberate screen-space affordance.) Three things that looked like special cases are textbook constructions with textbook laws: the **shape registry is a family of prisms** (tag dispatch is a sum type; ${ tex`\mathrm{preview} \circ \mathrm{review} = \mathrm{Just}` } is what each \`rect\`/\`circle\`/\`path\` entry owes), **hit-testing is an affine** (a focus that may fail, whose law is that a failed get makes put a no-op, T1 again), and **multi-selection is a traversal** (so "set the fill on the selection" is traversal ∘ lens, and align, distribute and group-edit come with it). All of them run live: \`test_gesture_*\` and \`gestureLaws\` check the laws above over a random corpus of gestures, on the same \`forAll\` harness the lens laws in ${ ref('laws') } use.`40:Tfbd,relatedP = md`**Bidirectional programming.** The lens formulation, the laws and the well-behaved / very well-behaved distinction are Foster et al.'s ${cite("foster2007lenses")}, addressing the view-update problem posed first for databases ${cite("bancilhon1981")}. ${cite("czarnecki2009bx")} survey how many fields arrived at the same structure independently. What differs here is the source: ${cite("foster2007lenses")} lens trees and strings, this notebook lenses the executing function's own text, so the residue that must survive is the author's formatting and \`put\` splices into bytes that are also a running program. **Sketch-n-Sketch.** The closest system ${cite("chugh2016")} ${cite("hempel2016")} ${cite("hempel2019")}: an SVG editor where you write a program, manipulate the output, and the system updates the program. It is considerably more expressive, handling abstraction, loops and recursion via trace-based provenance and later output-directed synthesis ${cite("hempel2019")}, and it can produce a program the user never typed. Three differences, none a claim of superiority: 1. *Notation.* Sketch-n-Sketch programs are written in a language of its own (Little, an untyped lambda calculus, later the Elm-like Leo) whose values are translated to SVG for display. What is edited here is SVG: a W3C interchange format from 1999 with no notion of provenance, holes or bidirectionality, embedded verbatim in a JavaScript template literal. No part of the notation was designed to admit an update path, so the artifact stays one that other tools emit and a browser renders unaided. 2. *Scope.* Sketch-n-Sketch solves for changes anywhere in a program; this editor rewrites only slots whose provenance is syntactically evident and refuses the rest explicitly (${ref("sinks")}). The narrow scope is what makes the laws checkable, and it is forced by the first difference: without a language of its own there is no tracer, so provenance has to be syntactically evident or absent. 3. *Host.* Sketch-n-Sketch is an environment a program is opened in. This is a library called from a cell in a live notebook, so the editor is a value in the same dataflow graph as the drawing, and the program being edited is the one currently running (${ref("architecture")}). **Lenses in practice.** Cambria applies lenses to schema evolution in local-first documents ${cite("litt2020cambria")}; edit lenses ${cite("hofmann2012editlenses")} shift the currency from states to edits, which is the same instinct as our command layer, though we implement it concretely as splices on child source strings (${ref("children")}). **The host this depends on.** The editor relies on the system it runs in being *source-last* ${cite("larkworthy2026")}: Lopecode keeps no canonical saved file, treats the live runtime as the source of truth, and recovers each cell's text on demand from \`Function.prototype.toString()\`. There is no file on a server that the definition is a copy of, and no save step for an edit to fall out of. Read the other way, this notebook is a test of that paper's claim that a plurality of editing surfaces follows from runtime primacy: \`editor-5\` edits a cell as text, \`editable-md\` as prose, \`sticky\` edits a literal by manipulation, and \`svgLens\` edits one as a drawing. None is privileged, and since all four go through \`Variable.define\` (${ref("architecture")}), each one's edits are visible to the others. **Notebooks and liveness.** Liveness has a standard scale ${cite("tanimoto1990")}, but it measures feedback from program to output; the quality at issue here is the reverse. ${cite("horowitz2023lrc")} name persistence as what separates a rich widget from a programming system: interactions with a rendered tool "cannot be 'saved' back to the notebook". This is one answer for one domain: the widget's output *is* the cell, so there is nothing to save back. ${cite("edwards2019")} ask for costs to be reported alongside benefits, which is what ${ref("future")} is for.`41:T772,futureP = md`**The literal lens is not specific to SVG.** \`literalLens\` finds a tagged template in a cell's own definition and lenses its text; everything above it is SVG-specific, everything below is not. The same primitive points at markdown in an \`md\` cell, CSS in a \`css\` cell, or JSON in a data cell: a click-to-edit prose editor and a colour picker that rewrites a stylesheet differ only in the microsyntax layer. This is the generalization worth doing next. **Writing through holes.** Today a hole is tolerated and locked (${ref("sinks")}). Two ways to make one writable are visible from here, both deliberately out of scope: resolving a hole to another cell's literal, which makes the lens target the dataflow graph rather than one cell, and numerical inversion for holes feeding arithmetic, the approximate solve \`@tomlarkworthy/manipulate\` already implements. Reflection into an upstream view was tried and removed for being fragile; either replacement would have to keep reporting that its guarantee is weaker than an exact edit's. **Structure the domain refuses.** An interpolation in element position is out of scope, because document-order indices would stop matching the DOM. Addressing children by identity rather than position would lift the restriction, at the cost of putting ids into a drawing the author is writing. **What it costs.** Reported in the manner ${cite("edwards2019")} argue for: the editor reaches only drawings written literally; the parser is a deliberate subset of XML (no CDATA, no entity decoding, no nested \`

`; const buttons = TOOLS.map(([id, label, key]) => { const b = htl.html``; b.onclick = () => drawing.setTool(id); el.appendChild(b); return [ id, b ]; }); const paint = tool => buttons.forEach(([id, b]) => { b.style.background = id === tool ? '#2F6BFF' : '#fff'; b.style.color = id === tool ? '#fff' : '#243'; }); paint(drawing.tool); drawing.addEventListener('lens-tool', e => paint(e.detail.tool)); // The command bar is *generated* from the registry, labels, bindings and all — so installing a // command cell puts a button here without touching this cell. Whether a button is live is the plan // itself (`canCommand`), asked fresh on every selection change: one answer, so a greyed-out button // and a refusal to run cannot disagree. const bar = htl.html`

`; const KEYNAME = k => (k || '').replace('Mod', navigator.platform.startsWith('Mac') ? '\u2318' : 'Ctrl').replace('Shift', '\u21E7').replace(/-/g, ''); const cmdButtons = (drawing.commands ? drawing.commands() : []).map(c => { const b = htl.html``; b.onclick = () => drawing.command(c.id); bar.appendChild(b); return [ c.id, b ]; }); const repaintCommands = () => cmdButtons.forEach(([id, b]) => { const on = drawing.canCommand(id); b.disabled = !on; b.style.display = on ? 'inline-block' : 'none'; b.style.opacity = on ? '1' : '0.35'; b.style.cursor = on ? 'pointer' : 'default'; }); repaintCommands(); drawing.addEventListener('lens-select', repaintCommands); drawing.addEventListener('lens-put', repaintCommands); // Z-order and delete act on the selection, so they belong to whatever is selected, not to a tool. const Z = { ']': 'raise', '[': 'lower', '}': 'front', '{': 'back' }; const onKey = e => { const typing = /^(INPUT|TEXTAREA)$/.test(e.target.tagName) || e.target.isContentEditable; // Commands declare their own binding; the callsite only decides to honour it. Undo is checked // first because editor-5 owns ⌘Z while you are in a cell, and a decline falls through to // whatever the browser would have done — ⌘C with nothing selected still copies the page. if (!typing && drawing.commandForEvent) { const c = drawing.commandForEvent(e); if (c && drawing.canCommand(c.id)) { e.preventDefault(); return void drawing.command(c.id); } } if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z' && !typing) { e.preventDefault(); // editor-5 owns undo while you are in a cell return void (e.shiftKey ? drawing.redo() : drawing.undo()); } // ⌘0 fits the drawing, ⌘1 is 100%, ⌘2 fits the selection. The drawing offers the verbs; which // key means what is the callsite's business, like every other shortcut here. if ((e.metaKey || e.ctrlKey) && !typing && '012'.includes(e.key)) { e.preventDefault(); return void (e.key === '1' ? drawing.resetView() : e.key === '2' ? drawing.fitView(drawing.selectionPaths()) : drawing.fitView([])); } if (e.metaKey || e.ctrlKey || e.altKey || typing) return; const sel = drawing.selectionPaths(); if (Z[e.key] && sel.length) { e.preventDefault(); // Each reorder moves the others, so re-read the (rebased) selection between steps rather than // working from a snapshot that the first move already invalidated. (async () => { for (let i = 0; i < sel.length; i++) { const cur = drawing.selectionPaths(); if (cur[i]) await drawing.zOrder(cur[i], Z[e.key]); } })(); return; } const ARROW = { ArrowLeft: [ -1, 0 ], ArrowRight: [ 1, 0 ], ArrowUp: [ 0, -1 ], ArrowDown: [ 0, 1 ] }; if (ARROW[e.key] && sel.length) { e.preventDefault(); const k = e.shiftKey ? 10 : 1; return void drawing.nudge(ARROW[e.key][0] * k, ARROW[e.key][1] * k); } if (e.key === 'Delete' || e.key === 'Backspace') { // A held vertex is the finer selection, so it is what the key means; only with none held does // Delete take the whole element. if (drawing.canCommand('delete-vertex')) { e.preventDefault(); return void drawing.command('delete-vertex'); } if (sel.length) { e.preventDefault(); return void drawing.removeSelection(); } } const hit = TOOLS.find(([, , k]) => k.toLowerCase() === e.key.toLowerCase()); if (hit) drawing.setTool(hit[0]); // Escape means "undo what I am doing now", then "step out of this group", and only failing // both "leave this mode". Keyboard stays with the callsite; the drawing only offers the verbs. else if (e.key === 'Escape') { if (!drawing.cancelGesture() && !drawing.ascendScope()) drawing.setTool('select'); } }; document.addEventListener('keydown', onKey); invalidation.then(() => document.removeEventListener('keydown', onKey)); // G8. Right-click renders the same registry the bar does, so it costs nothing as the registry fills. // The click first selects what is under the pointer (unless that is already in the selection), then // the menu lists every command that is live *for that selection* — `canCommand` is the one authority, // exactly as it is for the buttons. Only commands are shown; keyboard-only view verbs stay off it. let menu = null; const closeMenu = () => { if (menu) { menu.remove(); menu = null; } }; const openMenu = (x, y) => { closeMenu(); const live = (drawing.commands ? drawing.commands() : []).filter(c => drawing.canCommand(c.id)); if (!live.length) return; menu = htl.html`

`; for (const c of live) { const item = htl.html`

${ c.label }${ c.key ? KEYNAME(c.key) : '' }

`; item.onmouseenter = () => item.style.background = '#eef3ea'; item.onmouseleave = () => item.style.background = ''; item.onclick = () => { closeMenu(); drawing.command(c.id); }; menu.appendChild(item); } document.body.appendChild(menu); }; const onContext = e => { e.preventDefault(); const hit = drawing.pickAt ? drawing.pickAt(e) : []; const sel = drawing.selectionPaths(); const inSel = hit[0] && sel.some(p => p.join('/') === hit[0].join('/')); if (hit[0] && !inSel) drawing.select([hit[0]], 'transform'); else if (!hit[0] && !sel.length) drawing.select([]); openMenu(e.clientX, e.clientY); }; drawing.addEventListener('contextmenu', onContext); const onDocDown = e => { if (menu && !menu.contains(e.target)) closeMenu(); }; document.addEventListener('pointerdown', onDocDown, true); document.addEventListener('scroll', closeMenu, true); invalidation.then(() => { closeMenu(); drawing.removeEventListener('contextmenu', onContext); document.removeEventListener('pointerdown', onDocDown, true); document.removeEventListener('scroll', closeMenu, true); }); el.appendChild(bar); return el; }a2:T2294,inspector = { const drawing = viewof drawing; const el = htl.html`

`; const row = (label, control) => htl.html` ${label}${control}`; // Registry paint/stroke rows for one element — the enums an author asked for, one widget per `kind`, // writing through `drawing.setField` (= `setProperty` → `commitDelta`, the one write path). const paintRows = (path) => drawing.fields(path).map((f) => { const commit = (value) => drawing.setField(path, f.prop, value); if (f.kind === "enum") { const opts = f.options.includes(f.value) && f.value !== "" ? f.options : [f.value || ""].concat(f.options); const sel = htl.html``; for (const o of opts) { const op = document.createElement("option"); op.value = o; op.textContent = o === "" ? "(default)" : o; if (o === f.value) op.selected = true; sel.append(op); } sel.addEventListener("change", () => commit(sel.value)); return row(f.label, sel); } if (f.kind === "color") { const txt = htl.html``; const sw = htl.html``; try { if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(f.value)) sw.value = f.value.length === 4 ? "#" + f.value.slice(1).split("").map((c) => c + c).join("") : f.value; } catch (e) {} txt.addEventListener("change", () => commit(txt.value.trim())); sw.addEventListener("change", () => { txt.value = sw.value; commit(sw.value); }); return row(f.label, htl.html`${sw}${txt}`); } const inp = htl.html``; if (f.min !== undefined) inp.min = f.min; if (f.max !== undefined) inp.max = f.max; if (f.step !== undefined) inp.step = f.step; inp.addEventListener("change", () => commit(inp.value.trim())); return row(f.label, inp); }); const render = () => { const paths = drawing.selectionPaths(); el.textContent = ""; if (!paths.length) { el.append(htl.html`nothing selected`); return; } // One fieldset per selected element: a multi-selection is several addresses, so it is several editors. for (const path of paths) { const info = drawing.describe(path); if (!info) continue; // G26. A text-bearing element gets an editable content field, written through the content lens // (`setText`). Only tags whose content is a text run — a shape's empty inner is not text. let textField = ""; if (["text", "tspan", "textPath", "title", "desc"].includes(info.tag) && drawing.textOf) { const run = drawing.textOf(path); if (run !== null && !/`; inp.addEventListener("change", () => drawing.setText(path, inp.value)); textField = htl.html` text${inp}`; } } // Registry-owned paint/stroke for this element's tag (the typed section). const paint = paintRows(path); const paintLabel = info.tag === "stop" ? "stop" : /^(linear|radial)Gradient$/.test(info.tag) ? "gradient" : "paint & stroke"; // Hide any attribute the registry owns for this tag — paint has exactly one surface — and let the // rest be typed exactly (geometry, transform, custom attrs). const owned = new Set(svgFields.forTag(info.tag).map((f) => f.prop)); const fields = info.attrs.filter(([name]) => !owned.has(name)).map(([name, value]) => { const field = Inputs.text({ label: name, value, width: 220 }); const box = field.querySelector("input"); // `change`, not `input`: one commit per finished edit, like one commit per finished drag. box.addEventListener("change", () => drawing.setProperty(path, name, box.value)); return field; }); const jumps = drawing.refs(path).map((ref) => { const b = htl.html``; if (ref.path) b.onclick = () => drawing.select([ref.path], "transform"); else { b.disabled = true; b.title = "nothing in this document has that id"; } return b; }); // G1/G4. When the selection is a gradient (or a shape whose paint points at one), surface its // stops as click-to-select swatches so the child is reachable without a manual tree // descent. Each swatch carries a ✕ to remove that stop (hidden below the 2-stop minimum, which // is where delete-stop declines), and a + adds one. The selected stop's swatch is ringed. const g = drawing.gradientStops ? drawing.gradientStops(path) : null; let strip = ""; if (g && g.stops.length) { const selKey = info.tag === "stop" ? path.join("/") : null; strip = htl.html`

stops

`; for (const s of g.stops) { const sel = selKey === s.path.join("/"); const wrap = htl.html``; const sw = htl.html``; sw.onclick = () => drawing.select([s.path], "transform"); wrap.append(sw); if (g.stops.length > 2) { const del = htl.html``; del.onclick = async (e) => { e.stopPropagation(); drawing.select([s.path], "transform"); await drawing.command("delete-stop"); }; wrap.append(del); } strip.append(wrap); } const add = htl.html``; add.onclick = async () => { drawing.select([g.gradient], "transform"); await drawing.command("add-stop"); }; strip.append(add); } el.append(htl.html`

<${info.tag}> ${path.join(".")} ${textField} ${paint.length ? htl.html`

${paintLabel}${paint}

` : ""} ${fields.length ? Inputs.form(fields) : ""} ${jumps.length ? htl.html`

${jumps}

` : ""} ${strip}

`); } }; // `lens-select`/`lens-put` dispatch synchronously inside the drawing's own `draw()`; a listener that // throws would break that render, so the panel must never let one escape. const on = () => { try { render(); } catch (e) { el.textContent = ""; el.append(htl.html`${String(e.message || e)}`); } }; on(); drawing.addEventListener("lens-select", on); drawing.addEventListener("lens-put", on); invalidation.then(() => { drawing.removeEventListener("lens-select", on); drawing.removeEventListener("lens-put", on); }); return el; }a3:[] 2f:{"title":"SVG Sketch Source","cells":[{"id":1813,"value":"intro = md`# SVG Sketch Source\n\nThe drawing syncs to the code and vice versa. Switch between using code and UI. Built on composable lens ${ cite('foster2007lenses') } and edit-lens ${ cite('hofmann2012editlenses') } theory, but applied in the string domain so unknown semantics like SVG animations and interpolation holes are preserved without parsing. Follows the path of Sketch-n-Sketch ${ cite('chugh2016') } ${ cite('hempel2019') } but applied to an existing image format: SVG. Generated with a novel prompting strategy of requesting an LLM to use property checking against mathematical laws as a architecture, leading to strong implementation consistency over an expansive domain.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1814,"value":"workbench = gridContainer(runtime, {\n invalidation,\n module: svgLensModule,\n columns: 12,\n portrait: 640,\n include: [\n 'viewof drawing',\n 'drawingCode',\n 'toolbar',\n 'inspector'\n ],\n layout: {\n atoms: {\n 'viewof drawing': {\n 'x': 0,\n 'y': 0,\n 'w': 8,\n 'h': 4\n },\n 'drawingCode': {\n 'x': 0,\n 'y': 4,\n 'w': 8,\n 'h': 4\n },\n 'toolbar': {\n 'x': 8,\n 'y': 0,\n 'w': 4,\n 'h': 2\n },\n 'inspector': {\n 'x': 8,\n 'y': 2,\n 'w': 4,\n 'h': 6\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1816,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"putTable = Inputs.table(putLog.filter((e) => e.source === \"drawing\").map((e) => e.detail).slice(-8).reverse(), {\n columns: [\"target\", \"attribute\", \"before\", \"after\", \"GetPut\", \"PutGet\"],\n format: { GetPut: (ok) => (ok ? \"✅\" : \"❌\"), PutGet: (ok) => (ok ? \"✅\" : \"❌\") },\n rows: 8, layout: \"auto\",\n width: { attribute: \"8%\", GetPut: \"6%\", PutGet: \"6%\" }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1818,"value":"useIt = md`## Use it in your own notebook\n\n\\`\\`\\`js\nimport {svgLens} from \"@tomlarkworthy/svg-lens\"\n\nviewof picture = svgLens(svg\\`\\`)\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"putLog = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"edits = Generators.observe((change) => {\n change(putLog.length);\n const bump = (source) => (e) => { putLog.push({ source, detail: e.detail }); change(putLog.length); };\n const offs = [[viewof drawing, bump(\"drawing\")], [viewof factory, bump(\"factory\")]];\n for (const [node, fn] of offs) node.addEventListener(\"lens-put\", fn);\n const off = () => { for (const [node, fn] of offs) node.removeEventListener(\"lens-put\", fn); };\n invalidation.then(off);\n return off;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1821,"value":"viewof svgLensModule = thisModule()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"keepYourEdits = {\n // The drawing's definition is the drawing. Read it back out of the runtime to show what a download\n // would actually capture — not a file on a server, the bytes this page is holding right now.\n const v = await lookupVariable(\"viewof drawing\", svgLensModule);\n const bytes = v && v._definition ? v._definition.toString().length : 0;\n const anchor = downloadAnchor(\n { style: \"font:inherit;font-weight:600\" },\n edits ? `Download this notebook with your ${edits} edit${edits === 1 ? \"\" : \"s\"} in it`\n : \"Download this notebook\"\n );\n return htl.html`

\n ${anchor} — ${bytes} bytes of drawing source, read from the live runtime.\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"paperHeader = md`---\n\n# Editing a drawing by editing its program\n\n*What follows is the reasoning behind the editor above: what a lens is, which laws it keeps, how we combine to cover a complex domain like SVG, how the maths of sync is kept apart from the UX, and additionally how to apply when the drawing is itself a parameterized function.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"problemH = sec(\"problem\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1826,"value":"lensesH = sec(\"lenses\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"lawsH = sec(\"laws\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"lawsP = md`Two laws make a lens *well-behaved* ${cite(\"foster2007lenses\")}:\n\n${tex.block`\\mathrm{put}(\\mathrm{get}(s),\\, s) = s \\qquad\\qquad \\mathrm{get}(\\mathrm{put}(a,\\, s)) = a`}\n\n**GetPut** (left) says a null edit is a null write: drag a shape back to where it started and the cell\nis byte-identical to before, not merely equivalent. **PutGet** (right) says the view you asked for is\nthe view you get, so a drag of 40 pixels moves the shape 40 pixels and the number in the source\nagrees.\n\nA third law, **PutPut**, makes a lens *very* well-behaved:\n\n${tex.block`\\mathrm{put}(a_2,\\, \\mathrm{put}(a_1,\\, s)) = \\mathrm{put}(a_2,\\, s)`}\n\nThat is, the last write wins and intermediate ones leave no trace. Most of these lenses keep it; some\ndeliberately do not (${ref(\"residue\")}). ${cite(\"czarnecki2009bx\")} surveys how many disciplines have\nhad to make the same trade, and ${cite(\"hofmann2012editlenses\")} is one systematic response to it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"residueH = sec(\"residue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1831,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1832,"value":"towerH = sec(\"tower\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"architectureH = sec(\"architecture\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2213,"value":"archLinks = htl.html`

Each layer, and the tool-point branch, links to the section that defines it.\n \n L0 lens core ${ref(\"laws\")}\n L1 microsyntax ${ref(\"tower\")}\n L2 source lenses ${ref(\"children\")}\n L3 commands ${ref(\"propagation\")}\n L4 tools ${ref(\"tools\")}\n L5 chrome ${ref(\"architecture\")}\n branch → literal vs hole ${ref(\"sinks\")}\n address space ${ref(\"tower\")}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"propagationH = sec(\"propagation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"rectH = sec(\"rect\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"lawBadges = {return(\n// One readout for every demo below: the laws are computed on the put that just happened, not asserted.\n(node, invalidation) => {\n const el = htl.html`

`;\n const badge = (ok, label) => htl.html`${ok ? \"\\u2705\" : \"\\u274c\"} ${label}`;\n const render = (d) => {\n el.textContent = \"\";\n if (!d) {\n el.append(htl.html`drag the picture \\u2014 each put is checked here`);\n return;\n }\n el.append(\n badge(d.GetPut, \"GetPut\"), badge(d.PutGet, \"PutGet\"),\n htl.html`${d.target} ${d.attribute}: ${d.before} \\u2192 ${d.after}`\n );\n };\n render(node.lastPut);\n const on = (e) => render(e.detail);\n node.addEventListener(\"lens-put\", on);\n if (invalidation) invalidation.then(() => node.removeEventListener(\"lens-put\", on));\n return el;\n}\n)}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"viewof rectDemo = svgLens({\n tools: [\n toolVertex,\n toolMove\n ],\n affordances: [],\n keyboard: true\n})``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"rectDemoLaws = htl.html`

${lawBadges(viewof rectDemo, invalidation)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"childrenH = sec(\"children\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"viewof childrenDemo = svgLens(svg``, {\n tools: [\n toolMove,\n toolStructure\n ],\n affordances: [],\n keyboard: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"sinksH = sec(\"sinks\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1848,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1849,"value":"factoryDoc = md`Three rectangles, two sliders. **The first** is written literally, so a drag rewrites this cell's\nsource and the box moves. **The second** carries \\`transform=\"translate(\\${shift} 0)\"\\`: move the slider\nand it follows, because the drawing interpolates the value; but *drag* the box and the editor declines,\nbecause the number lives in the hole and this editor does not write back into an interpolation.\n**The third** carries \\`rotate(\\${spin} 32 100)\\` and behaves the same way for rotation.\n\nInterpolation is tolerated, not inverted: the slider feeds the drawing, and a gesture that lands on a\nhole is refused rather than guessed. Watch the table underneath: every gesture reports whether it wrote\nliteral source or hit a locked hole.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"viewof shift = Inputs.range([-100, 300], { value: 40, step: 1, label: \"shift\", width: 260 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1851,"value":"viewof spin = Inputs.range([0, 360], { value: 20, step: 1, label: \"spin\", width: 260 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"viewof factory = svgLens(svg``, {\n tools: [toolMove],\n affordances: [],\n keyboard: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1853,"value":"sinkRecord = (() => {\n const rows = putLog.filter((e) => e.source === \"factory\").slice(-6).reverse()\n .map(({ detail: d }) => ({ attribute: d.attribute, sink: d.sink || \"literal\",\n before: d.before, after: d.after, locked: d.locked || \"\" }));\n return htl.html`

${\n rows.length\n ? Inputs.table(rows, { columns: [\"attribute\", \"sink\", \"before\", \"after\", \"locked\"],\n rows: 6, layout: \"auto\", width: { sink: \"14%\", attribute: \"10%\" } })\n : htl.html`

drag one of the three boxes above; whether it wrote literal source or hit a locked hole shows up here

`\n }

`;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"toolsH = sec(\"tools\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"toollawsH = sec(\"toollaws\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1857,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"relatedH = sec(\"related\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1860,"value":"futureH = sec(\"future\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"referencesH = md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"referencesList = references","pinned":false,"hidden":false,"mode":"ojs"},{"id":1864,"value":"appendixHeader = md`---\n\n## Appendix: the implementation\n\nThe tests come first because they are the specification: every law quoted above is a cell below, run on each load with a seeded generator. After them, the implementation in dependency order: lens core, SVG microsyntax, source lenses, commands, then the editor.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"externalLink = (label, url) => htl.html`${label}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"sections = [\n { key: \"problem\", title: \"The problem\" },\n { key: \"lenses\", title: \"Lenses\" },\n { key: \"laws\", title: \"The laws\", parent: \"lenses\" },\n { key: \"residue\", title: \"Residue, and why PutPut bends\", parent: \"lenses\" },\n { key: \"tower\", title: \"The SVG tower: addressing and nesting\" },\n { key: \"architecture\", title: \"Tools, commands, one writer\" },\n { key: \"propagation\", title: \"Propagation, and why the loop closes\", parent: \"architecture\" },\n { key: \"rect\", title: \"A first lens: one attribute of one shape\" },\n { key: \"children\", title: \"The structural lens\" },\n { key: \"sinks\", title: \"Interpolation and holes\" },\n { key: \"tools\", title: \"Tools as edit lenses\" },\n { key: \"toollaws\", title: \"The laws a tool owes\", parent: \"tools\" },\n { key: \"related\", title: \"Related work\" },\n { key: \"future\", title: \"Future work\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"sectionIndex = (() => {\n const index = new Map();\n const kids = new Map();\n let top = 0;\n for (const s of sections) {\n if (s.parent) {\n const n = (kids.get(s.parent) || 0) + 1;\n kids.set(s.parent, n);\n index.set(s.key, { num: `${index.get(s.parent).num}.${n}`, title: s.title, level: 3 });\n } else {\n index.set(s.key, { num: String(++top), title: s.title, level: 2 });\n }\n }\n return index;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1868,"value":"sec = (key) => {\n const s = sectionIndex.get(key);\n const h = document.createElement(s ? `h${s.level}` : \"h2\");\n h.id = `sec-${key}`;\n h.textContent = s ? `${s.num}. ${s.title}` : `[missing section: ${key}]`;\n return h;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1869,"value":"ref = (key) => {\n const s = sectionIndex.get(key);\n if (!s) return htl.html`[missing section: ${key}]`;\n return htl.html` {\n ev.preventDefault();\n document.getElementById(`sec-${key}`)?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n }}>§${s.num} ${s.title}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1870,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"cite = (key) => {\n const e = bibliography[key];\n if (!e) return htl.html`[missing ref: ${key}]`;\n return htl.html` {\n ev.preventDefault();\n document.getElementById(`ref-${key}`)?.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }}>[${e.label}]`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1872,"value":"references = htl.html`

\n ${e.authors} (${e.year}). ${externalLink(htl.html`${e.title}`, e.url)}. ${e.venue}.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"testsDashboard = tests({ filter: (t) => t.computed })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1874,"value":"harnessHeader = md`## Property-test harness\n\nDeterministic replacement of fast-check: a seeded PRNG (\\`mulberry32\\`), domain generators (\\`arb\\`), and \\`forAll\\` which throws the counterexample on failure. Fixed seeds keep every test cell rerunnable with identical results. \\`arb.anyFinite\\` draws random 64-bit patterns, so the exact round-trip claims are exercised across the full double range, subnormals and -0 included.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"NUM_RUNS = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"mulberry32 = (seed) => () => {\n seed = (seed + 0x6D2B79F5) | 0;\n let t = seed;\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":1878,"value":"forAll = (runs, rng, gen, prop, label = \"property\") => {\n const show = (v) => JSON.stringify(v, (k, x) => (typeof x === \"number\" ? String(x) : x));\n for (let i = 0; i < runs; i++) {\n const args = gen(rng);\n let ok, err;\n try { ok = prop(...args); } catch (e) { ok = false; err = e; }\n if (!ok) throw new Error(`${label} counterexample (run ${i}): ${show(args)}${err ? \" — \" + err.message : \"\"}`);\n }\n return runs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"checkLens = (l, { runs, rng, genS, genA, eqS, eqA }) => {\n forAll(runs, rng, (r) => [genS(r)], lensLaws.getPut(l, eqS), \"GetPut\");\n forAll(runs, rng, (r) => [genA(r), genS(r)], lensLaws.putGet(l, eqA), \"PutGet\");\n forAll(runs, rng, (r) => [genA(r), genA(r), genS(r)], lensLaws.putPut(l, eqS), \"PutPut\");\n return `✅ GetPut, PutGet, PutPut (${runs} runs each)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1880,"value":"testsHeader = md`## Tests\n\nEach \\`test_*\\` cell property-checks one lens (or one exactness claim) with a fixed seed.\nThe dashboard near the top of the notebook aggregates them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1881,"value":"test_viewBoxLens_laws = checkLens(viewBoxLens, {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0001),\n genS: arb.viewBoxStr, genA: arb.rect,\n eqS: (a, b) => a === b, eqA: rectEq\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"test_pointsLens_laws = checkLens(pointsLens, {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0002),\n genS: arb.pointsStr, genA: arb.points,\n eqS: (a, b) => a === b, eqA: pointsEq\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1883,"value":"test_transformLens_laws = checkLens(transformLens, {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0003),\n genS: arb.transformStr, genA: arb.mat,\n eqS: (a, b) => a === b, eqA: matEq\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1884,"value":"test_pathLens_laws = checkLens(pathLens, {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0004),\n genS: arb.pathStr, genA: arb.pathCmds,\n eqS: (a, b) => a === b, eqA: pathEq\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"test_attr_laws = checkLens(attr(\"fill\"), {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0005),\n genS: arb.node, genA: (rng) => (rng() < 0.2 ? null : arb.attrValue(rng)),\n eqS: nodeEq, eqA: (a, b) => a === b\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"test_child_laws = {\n const rng = mulberry32(0x5EED0006);\n forAll(NUM_RUNS, rng, (r) => [arb.nodeWithChild(r)],\n ([n, i]) => lensLaws.getPut(child(i), nodeEq)(n), \"GetPut\");\n forAll(NUM_RUNS, rng, (r) => [arb.node(r), arb.nodeWithChild(r)],\n (c, [n, i]) => lensLaws.putGet(child(i), nodeEq)(c, n), \"PutGet\");\n forAll(NUM_RUNS, rng, (r) => [arb.node(r), arb.node(r), arb.nodeWithChild(r)],\n (c1, c2, [n, i]) => lensLaws.putPut(child(i), nodeEq)(c1, c2, n), \"PutPut\");\n return `✅ child(i): GetPut, PutGet, PutPut (${NUM_RUNS} runs each)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1887,"value":"test_compose_nodeViewBox_laws = checkLens(compose(requiredAttr(\"viewBox\"), viewBoxLens), {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0007),\n genS: arb.nodeWithViewBox, genA: arb.rect,\n eqS: nodeEq, eqA: rectEq\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"test_invert_involution = {\n const rng = mulberry32(0x5EED0008);\n forAll(NUM_RUNS, rng, (r) => [arb.invertibleMat(r)],\n isoLaws.roundTripS(invertIso, (a, b) => matApproxEq(a, b)), \"invert(invert(m)) ≈ m\");\n forAll(NUM_RUNS, rng, (r) => [arb.invertibleMat(r)],\n (m) => matApproxEq(multiply(m, invertIso.to(m)), IDENTITY), \"m · invert(m) ≈ identity\");\n return `✅ inversion is a float-approximate involution (${NUM_RUNS} runs each)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"test_exact_roundtrips = {\n const rng = mulberry32(0x5EED0009);\n forAll(NUM_RUNS, rng, (r) => [arb.anyFinite(r)],\n (x) => Number(String(x)) === x, \"Number(String(x)) === x\");\n forAll(NUM_RUNS, rng, (r) => [arb.mat(r)],\n (m) => matEq(parseTransform(printTransform(m)), m), \"parseTransform ∘ printTransform = id\");\n forAll(NUM_RUNS, rng, (r) => [arb.pathCmds(r)],\n (p) => pathEq(parsePath(printPath(p)), p), \"parsePath ∘ printPath = id\");\n forAll(NUM_RUNS, rng, (r) => [arb.rect(r)],\n (x) => rectEq(viewBoxLens.get(printViewBox(x)), x), \"parse ∘ print = id for viewBox\");\n return `✅ print/parse round-trips are exact across the full double range (${NUM_RUNS} runs each)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"test_applyPoint_screen_roundtrip = {\n const rng = mulberry32(0x5EED000B);\n forAll(NUM_RUNS, rng, (r) => [arb.invertibleMat(r), (r() * 2 - 1) * 1000, (r() * 2 - 1) * 1000],\n (m, x, y) => {\n const [sx, sy] = applyPoint(m, x, y);\n const [bx, by] = applyPoint(invert(m), sx, sy);\n const tol = 1e-6 * Math.max(1, Math.abs(x), Math.abs(y));\n return Math.abs(bx - x) <= tol && Math.abs(by - y) <= tol;\n }, \"applyPoint(invert(m), applyPoint(m, p)) ≈ p\");\n forAll(NUM_RUNS, rng, (r) => [arb.invertibleMat(r)],\n (m) => matApproxEq(multiply(invert(m), m), IDENTITY), \"invert(m) · m ≈ identity\");\n return `✅ screen↔element coordinate round-trip holds (${NUM_RUNS} runs each)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"test_translateLens_laws = ((r) => {\n const rng = mulberry32(0x5EED0011);\n // dragging never rewrites the ops that follow the translate\n forAll(NUM_RUNS, rng, (g) => [arb.transformStr(g), [arb.bounded(g), arb.bounded(g)]], (s, t) => {\n const out = translateLens.put(t, s);\n const tail = (x) => x.replace(/^\\s*translate\\s*\$[^)]*\$\\s*/, \"\");\n return tail(out) === tail(s) || tail(out) === s.trim();\n }, \"put keeps the rest of the transform list\");\n return r;\n})(checkLens(translateLens, {\n runs: NUM_RUNS, rng: mulberry32(0x5EED0010),\n genS: arb.transformStr, genA: (rng) => [arb.bounded(rng), arb.bounded(rng)],\n eqS: (a, b) => a === b, eqA: (a, b) => a[0] === b[0] && a[1] === b[1]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"test_literalLens_laws = checkLens(literalLens(\"svgLens\"), {\n runs: NUM_RUNS, rng: mulberry32(0x5EED000C),\n genS: arb.cellSrcStr, genA: arb.svgDocStr,\n eqS: (a, b) => a === b, eqA: (a, b) => a === b\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"test_attrTextLens_laws = checkLens(attrTextLens(1, \"transform\", \"matrix(1 0 0 1 0 0)\"), {\n runs: NUM_RUNS, rng: mulberry32(0x5EED000D),\n genS: arb.svgDocStr, genA: arb.opStr,\n eqS: (a, b) => a === b, eqA: (a, b) => a === b\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1895,"value":"test_cellSourceLens_laws = checkLens(compose(cellAttrLens(\"svgLens\", 1, \"transform\", \"matrix(1 0 0 1 0 0)\"), transformLens), {\n runs: NUM_RUNS, rng: mulberry32(0x5EED000E),\n genS: arb.cellSrcStr, genA: arb.mat,\n eqS: (a, b) => a === b, eqA: matEq\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"test_source_residue_preserved = {\n const rng = mulberry32(0x5EED000F);\n const lit = literalLens(\"svgLens\");\n const cell = cellAttrLens(\"svgLens\", 1, \"transform\", \"matrix(1 0 0 1 0 0)\");\n forAll(NUM_RUNS, rng, (r) => [arb.cellSrcStr(r), arb.opStr(r)], (s, op) => {\n const out = cell.put(op, s);\n const [a, b] = literalSpan(s, \"svgLens\");\n const [a2] = literalSpan(out, \"svgLens\");\n // everything before the literal is byte-identical, and so is everything after it\n return s.slice(0, a) === out.slice(0, a2) &&\n s.slice(b) === out.slice(literalSpan(out, \"svgLens\")[1]) &&\n lit.get(out) !== undefined;\n }, \"a put touches only bytes inside the literal\");\n return `✅ puts leave every byte outside the literal untouched (${NUM_RUNS} runs)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":1898,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"test_nearestSegment = (() => {\n const sq = [[0, 0], [10, 0], [10, 10], [0, 10]];\n const at = (x, y, closed = true) => nearestSegment(sq, x, y, closed).index;\n if (at(5, 0) !== 0) throw new Error(\"midpoint of the first edge\");\n if (at(10, 5) !== 1) throw new Error(\"midpoint of the second edge\");\n if (at(5, 10) !== 2) throw new Error(\"midpoint of the third edge\");\n if (at(0, 5) !== 3) throw new Error(\"the closing edge must be a candidate when closed\");\n if (at(0, 5, false) === 3) throw new Error(\"an open polyline has no closing edge\");\n if (nearestSegment(sq, 5, 1).distance !== 1) throw new Error(\"distance to the nearest edge\");\n return \"✅ nearest segment on closed and open polygons\";\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1901,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":1902,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"test_commands_commute = {\n const rng = mulberry32(0x5EED0021);\n const cmd = (i, name, v) => (s) => attrTextLens(i, name, null).put(v, s);\n forAll(NUM_RUNS, rng,\n (r) => [arb.svgDocStr(r), arb.opStr(r), arb.opStr(r), arb.int(r, 0, 9), arb.int(r, 0, 9)],\n (doc, a, b, pi, qi) => {\n const n = tokenize(doc).length; // 0 is the