Finish and harden the editor
What you will make
Section titled “What you will make”Review the completed 960 by 600 workflow editor: selected cards glow, dragging and panning preserve their separate state, wheel zoom stays anchored, and keyboard controls remain available.
How it works
Section titled “How it works”The final source puts pure model and coordinate helpers before the components that consume them. updateNodePosition, rootToWorkspace, and zoomAroundPoint make the mutable-looking gestures ordinary immutable model updates. useConst owns the expensive static grid path for the mounted GridLayer; each NodeCard owns its drag ref and cursor state, while Workspace separately owns its pan ref and cursor state.
Build the change
Section titled “Build the change”Each local terminator clears a gesture only when that exact pointer owns it. Pointer up, cancellation, and capture loss all pass through the corresponding terminator. Removing a card unmounts the component that owns its drag session and cursor, so application ownership disappears naturally before any later pointer-up; it does not need a synthetic loss callback. There is deliberately no useReaction: this editor owns no external resource requiring signal-driven synchronization. The refs are appropriate because they represent in-flight pointer sessions, not visual state.
Stable card and edge keys preserve identity among their same parent siblings. Reparenting or changing a key remounts a component, which is why the source keeps the component tree deliberate. useRef and state and lifecycle explain those ownership boundaries.
Predict and try
Section titled “Predict and try”Change INITIAL_NODES—for example, move Build or revise a subtitle. Predict that edges, selection, dragging, focus bounds, and filter placement derive from the model rather than from inspected pixels.
Check your result
Section titled “Check your result”Select and drag Idea outside its initial card, pan empty workspace, zoom around a pointer, then reset only the view. Tab to Sketch and activate it. Dispose the controller twice: later browser events do not repaint. If a render fails, Pibbl releases runtime-owned resources and refs; pixels painted earlier in that frame are not rolled back.
What you learned
Section titled “What you learned”This tutorial is complete, not a production diagramming product. Browser Canvas and Path2D behavior remain authoritative; nonempty filters and retained layers require their browser capabilities. Production work still needs an application-owned representation of the same nodes and relationships, synchronized with the Canvas model and offering equivalent selection, traversal, activation, editing, and relationship operations to assistive technology. Do not bolt on a separate keyboard implementation that can diverge from the Canvas actions; route both surfaces through the same model commands. Persistence, undo, recovery UX, and product-specific testing also remain application work. Review focus and keyboard navigation and style and draw before extending it.
Open the interactive workbench
Implementation guidance for agents
Section titled “Implementation guidance for agents”Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision c321a83. ALPHA — NOT FOR PRODUCTION USE.