feat(loom): loom-0.6.0 — A3: axonometric/BIM exploded view (Three.js 3D) (#268)

The Spec 002 north star — a second projection of the same architecture model
in real 3D. A 2D|3D toggle in the Architecture tab swaps the maxGraph plan for
a Three.js axonometric scene: each layer a stacked translucent floor, each
component a box colored by the shared "you are here" status, dependency edges
as lines. Explode slider peels the floors apart (BIM exploded view); CSS2DRenderer
labels (layer + component); raycast click reuses the A2.4 detail panel; hover
highlight. One model, many views — CLI authors structure, Loom renders 2D + 3D,
status is always the one core::architecture::project projection.

Closes A3 / Spec 002 fully realized.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: montfort

Cargo.lock

@@ -12,8 +12,34 @@ project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
-### Planned — Architecture Plan view (Spec 002)
-- A3 (north star): axonometric/BIM exploded-layers view.
+## [0.6.0] — 2026-06-16 (Axonometric / BIM exploded view — A3)
+
+The Spec 002 **north star**: a second projection of the same architecture model in real 3D. A
+`2D | 3D` toggle inside the Architecture tab swaps the maxGraph plan for a **Three.js**
+axonometric scene — each layer a stacked, translucent "floor", each component a box colored by
+the same §4 "you are here" status palette, dependency edges drawn as lines between boxes. This
+fully realizes Spec 002 (BIM "one model, many views"): the CLI authors structure
+(`architecture generate|sync|validate`), Loom renders it as both a 2D plan and a 3D exploded
+model, and the status overlay is always the one shared `core::architecture::project` projection.
+
+### Added (A3)
+- **Axonometric 3D view** (`web/src/axon.ts`): orthographic camera (true axonometric) +
+  `OrbitControls` (rotate/zoom/pan). Layers auto-laid-out per floor — the 3D view doesn't need
+  the human DrawIO geometry; it reads `/api/architecture`. `active` components glow (emissive);
+  every box gets crisp edge outlines. Leaving the view / switching mode `dispose()`s the GL
+  context (geometries, materials, renderers, listeners).
+- **Explode slider** (`#axon-explode`, localized): peels the floors apart on `y`
+  (`MIN_FLOOR_GAP..MAX_FLOOR_GAP`); dependency lines re-route to the boxes' new world positions
+  on every change — the BIM exploded view.
+- **Labels** via `CSS2DRenderer` (crisp HTML over the WebGL canvas): layer name per floor +
+  component name per box.
+- **Interaction**: raycast a no-drag click → the **shared** A2.4 component detail panel
+  (`showDetail` reused across the 2D plan and 3D view); hover highlights the box under the
+  pointer. The "where are we" + legend panels are shared with the 2D plan untouched.
+
+### Notes
+- Bundle grows ~600 KB (Three.js) — accepted for the experimental visual; the KG and 2D plan
+  paths are unaffected.
 
 ## [0.5.0] — 2026-06-16 (Architecture Plan view — A2)
 

experimento/CHANGELOG.md

@@ -1,6 +1,6 @@
 [package]
 name = "straymark-loom"
-version = "0.5.0"
+version = "0.6.0"
 edition = "2021"
 description = "Loom — StrayMark's experimental knowledge-graph visualization server (localhost development dashboard)"
 license = "MIT"

experimento/Cargo.toml

@@ -354,8 +354,15 @@
   explode change the lines are re-routed to the boxes' new world positions
   (`getWorldPosition` after `updateMatrixWorld`). Verified on Sentinel (7 floors separate, the
   dependency lines stretch across the gaps). `tsc` + `vite build` clean.
-- [ ] **A3.2 — Interaction & labels.** Floor labels (layer names) + component labels (sprites),
-  click a box → the A2.4 component detail panel, hover highlight. Reuse the where/legend panels.
-- [ ] **A3.3 — Acceptance + release.** Dogfood; `experimento/CHANGELOG.md` + bump
-  `experimento/Cargo.toml` + `web/package.json`; PR → merge → tag **`loom-0.6.0`**. Update the
-  Loom memory note (A3 shipped — Spec 002 fully realized).
+- [x] **A3.2 — Interaction & labels.** Floor labels (layer names) + component labels via
+  **`CSS2DRenderer`** (crisp HTML overlaid on the WebGL canvas, `pointer-events:none` so orbit/pick
+  fall through) — `.axon-floor-label` off each slab's left edge, `.axon-label` above each box.
+  **Raycasting** (`THREE.Raycaster` against the box meshes): a no-drag pointerup → `pick()` →
+  the **shared** A2.4 `showDetail()` (now `export`ed from `plan.ts`, reused by both projections);
+  pointermove → `setHover()` bumps the hovered box's `emissiveIntensity` (restored from a
+  per-box `baseEmissive`) + `cursor:pointer`. Reuses the where/legend panels untouched. Verified
+  on Sentinel (7 floor labels + 13 component labels; click `db` → Database detail with 16 charters
+  + 41 owned files). `tsc` + `vite build` clean.
+- [x] **A3.3 — Acceptance + release.** Dogfooded on Sentinel; `experimento/CHANGELOG.md` `[0.6.0]`
+  + bump `experimento/Cargo.toml` + `web/package.json` to 0.6.0; PR → merge → tag **`loom-0.6.0`**.
+  Loom memory note updated (A3 shipped — Spec 002 fully realized).

experimento/specs/002-architecture-plan/tasks.md

@@ -98,6 +98,9 @@
       /* A3 — axonometric (3D) view, a second projection of the same model */
       #axon { position:absolute; inset:0; z-index:0; display:none; background:var(--bg); cursor:grab; }
       #axon .plan-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:0 40px; }
+      /* CSS2D labels drawn over the WebGL canvas (A3.2) */
+      .axon-label { color:#cdd2dc; font:11px var(--font, system-ui), sans-serif; pointer-events:none; white-space:nowrap; text-shadow:0 1px 3px #000, 0 0 2px #000; }
+      .axon-floor-label { color:#8b91a0; font:600 11px var(--font, system-ui), sans-serif; pointer-events:none; white-space:nowrap; text-transform:uppercase; letter-spacing:.06em; text-shadow:0 1px 3px #000; }
       body.view-plan.plan-3d #axon { display:block; }
       body.view-plan.plan-3d #plan, body.view-plan.plan-3d #plan-zoom { display:none !important; }
       #plan-mode { display:none; gap:2px; margin-left:6px; }

experimento/web/index.html

@@ -1,7 +1,7 @@
 {
   "name": "straymark-loom-web",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",