epic: rendering pipeline — themes, icons, rich labels (portable + rich tiers)

[lex00]

Status

Repo: github.com/INTENTIUS/pinhole, TypeScript. Build/verify: npm ci && npm run tsc && npm test && npm run build. Flow: feature branch → PR → CI green → squash-merge. Renders chant projects by shelling chant graph --format ir|layout.

The pipeline is essentially built. Themes, icons, labels, the interactive artifact, size-aware layout, the full animation channel, and a salience/containment view with intent focus have all landed. The remaining child is #14 (the NL agent loop). Polish + the containment-view refinements (#21, split into #24–#28) have all shipped.

---

Goal

Build pinhole's painter as a layered, themeable pipeline over chant's graph IR. The pieces share the Theme tokens and one cross-cutting principle, so they're tracked together.

First principle: two render tiers, one scene graph

	Portable tier (.svg / PNG / <img> / GitHub)	Rich tier (inlined in the HTML artifact, browser)
color	baked theme (concrete colors)	CSS-var live theming
labels	native <text>/<tspan>, hand-laid bullets/rows	<foreignObject> HTML — lists, wrapping, badges, tables
icons	monochrome glyphs (themeable)	+ full-color brand packs
interactivity	none	hover / inspect / links

The painter renders one scene graph to both tiers, degrading gracefully. The portable export must never depend on <foreignObject> or page CSS.

Children

• theme system: CSS-variable painter + Theme token set (baked + live) #5 — Theme system ✅ (PR#8) — CSS-var painter + Theme tokens; later gained an aws theme (PR#17)
• icon resolver + sets: generic glyphs, presentation packs, opt-in brand packs #6 — Icon resolver + generic glyphs ✅ (PR#10) — later: type-specific icons, semantic categories (PR#17)
• labels: foreignObject rich tier + native-text portable tier, field templates #7 — Labels (portable + rich) ✅ (PR#11)
• animation channel: semantic motion (emphasis / flow / role) + cross-view morph #9 — Animation channel ✅ — ambient (PR#12), triggered hover-flow (PR#18), cross-view morph (PR#19)
• interactive HTML artifact: inline SVG + theme switcher + hover/inspect #13 — Interactive HTML artifact ✅ (PR#15) — inline SVG, theme switcher, hover tooltip, click inspector
• NL agent loop: describe intent → edit chant source → lint-gate → re-render #14 — NL agent loop (describe → edit chant source → lint-gate → re-render) — the remaining child

Also shipped under this epic (not original children)

• layout: consume chant's size-aware layout; retire the fitScale band-aid #16 — Size-aware layout ✅ (PR#15) — pinhole feeds card sizes to chant; fitScale retired. Drove the chant-side redesign (chant#509 / @intentius/chant@0.12.0: node sizes as input + dagre engine, no native dot dependency).
• Cards & interaction (PR#17) — icon-forward cards, --icon density mode, centered popover, edge rollovers + edge-click relationship inspector.
• Salience / containment view (PR#20) — roles (place/plumbing), containment-primary nesting, --focus app|network|security, topology-inferred incidental, implied composite edges, row-packed layout, app↔network drill-down.

Open follow-ups

• view enhancements: inspector polish (pretty JSON, scrolling) + containment follow-ups #21 (closed, split into containment: edge routing — route dependency/implied lines around boxes #24–salience extensibility: taxonomy → presentation pack (#6) + manual hint channel #28, all merged): inspector polish, edge routing, topology v2, --focus security view, view polish, and the salience presentation pack + manual hint channel. The containment view is now mature.

Related (not children)

• deployment diff: align N congruent IRs, classify deltas, render (stacked / overlay / small-multiples) #3 deployment diff — a feature over this pipeline (delta colors must be theme vars).