<!--
SPIRA
Interactive explorer of architectural deformation operations — twisting, tapering, shearing, bending, freeform (FFD), and helical sweeps — with a live solid and volume/area readout
Joe.K · axisbim.io

CHANGELOG
v1.53.1 - 2026-07-30 - Two fixes. (1) Fixed the Dynamo import script's download coming out corrupted:
         one line inside the DYNAMO_IMPORT_SCRIPT_PY constant used a single-backslash \n\n, but since
         that constant is a JS template literal, JS's own escape processing quietly turned it into a
         real line break before the file was ever downloaded — breaking a Python string literal
         across physical lines (a "EOL while scanning string" error in Dynamo). Fixed by doubling the
         backslashes so JS's escaping leaves literal \n\n behind in the actual generated .py file,
         confirmed by reconstructing the exact Blob content the download button produces and checking
         it parses as valid Python. (2) Replaced the old 760px "shrink everything down" mobile
         attempt with a proper block screen (matching the pattern already used in Modulor Mondrian),
         per user request — SPIRA's sidebar-plus-3D-viewport interaction (dozens of sliders, precise
         orbit/zoom gestures) doesn't hold up on a phone no matter how much CSS shrinking the old
         layout did. 760px is the same threshold the old breakpoint already used — every common
         tablet (iPad Mini at 768px+) already falls above it, so this range was always effectively
         phone-only; nothing tablet-sized loses functionality. The render loop now also skips its
         per-frame work while blocked (still calls requestAnimationFrame so it resumes instantly on
         resize, just skips the actual camera/render work), so a phone isn't left running a full
         WebGL loop against a screen nobody can see. Verified in a live browser: blocks at
         390×844/375×812 (iPhone-sized), shows the full app normally at 1400×900, reacts live to an
         in-page resize crossing the breakpoint either direction with no reload needed, camera.near
         confirmed frozen while blocked and confirmed still updating normally once above the
         breakpoint, and a full 7-mode NaN sweep confirmed nothing else broke.
v1.53.0 - 2026-07-25 - App now always opens on the guided Tour, every load, per user request. Previously
         maybeAutoStartTour() gated the auto-launch behind a `spira_tour_seen` localStorage flag, so the
         Tour only ever ran once per browser; removed that function and the flag entirely and call
         startTour() directly at boot instead. endTour() no longer writes to localStorage (nothing reads
         it anymore). The Tour remains re-launchable anytime from the header "Tour" button.
v1.52.1 - 2026-07-19 - Fixed a black wedge appearing (with "surface area: NaN" in the HUD) partway
         through Helix's Play animation, per a user screenshot. Root cause: state.helixTurns is
         normally always an integer (the slider uses parseInt), which
         `const uSegs = Math.min(state.helixTurns * state.segments, 800)` and buildHelicalGeometry's
         two loops downstream (j<=uSegs building vertex rings, j<uSegs building quads between them)
         both silently depended on to stay in sync — but Play/Pause animates helixTurns continuously
         (see ANIMATABLE_PARAMS), so mid-animation it lands on fractional values (the screenshot
         showed turns=1.8187846616430312, uSegs=87.3016637588655) where the two loops disagree by one
         ring. That put the last row of quads' vertex indices one past the end of the position
         buffer — reading undefined, which poisoned both the render (a collapsed/black face, matching
         the screenshot) and computeMeshSurfaceArea's sum (NaN, from arithmetic on undefined).
         Reproduced exactly in the Playwright harness at the screenshot's own turns value first
         (confirmed maxIdx=177 against only 176 real vertices) before fixing, then fixed at the
         source — Math.round() once where uSegs is computed, rather than chasing the mismatch through
         every downstream consumer — and reverified the same way (maxIdx now 175, in range; surface
         area a real number). The two OTHER places state.helixTurns drives a loop count (per-floor
         overlay lines, computePanelWarp) turned out safe already — both evaluate geometry fresh each
         iteration via layerPointFn rather than indexing into a shared pre-built vertex array, so a
         fractional loop count just means the last partial iteration is naturally shorter, not
         out-of-bounds. Verified end-to-end: a 44-point sweep across the full 0.05-to-6-turn range
         (0 bad points), Circle and Pipe generators at a fractional turns value (0 NaN), and — closest
         to the actual bug report — the real Play button running live for 30 sampled animation frames
         with 0 NaN throughout. 148/148 audit passing (1 new check).
v1.52.0 - 2026-07-19 - Teaching content, per user request with a full session available: glossary
         tooltips, exercises, and a guided tour. Checked first whether a separate "theory" panel was
         even needed — it wasn't: the Reference panel already explained each mode's math in depth,
         and a v1.12.1 entry showed figure/page citations were deliberately removed after they turned
         out not to check out, so the new work enriches that existing panel instead of duplicating it
         (and doesn't reintroduce citations). GLOSSARY: 6 terms (Cavalieri's principle, developable
         surface, ruled surface, helicoid, lerp, closed-form), click-to-show popover, woven into
         Reference panel text via <span class="term"> and — the highest-value single placement in the
         app — into the HUD's live "Cavalieri holds" line, which named the principle without ever
         explaining it anywhere. EXERCISES: 5 self-checking challenges (Cavalieri, developable-surface
         warp, taper volume, Compound+Morph, open-vs-closed Helix surfaces), each check() reading the
         SAME cached values the HUD displays (new lastMaxWarpM/lastVolDeformed/lastVolPrism, set at
         their one real computation site inside rebuild(), never re-derived) so an exercise can't
         silently drift from what's on screen. TOUR: 8-step spotlight walkthrough targeting existing,
         stable element ids (not new teaching-specific markup), auto-launches once via a localStorage
         flag, re-launchable from a new header "Tour" button. Browser-testing this (not just a syntax
         check) caught 3 real bugs before shipping: (1) the popover/tour container divs were placed
         AFTER the main script tag, so maybeAutoStartTour() — which runs synchronously at that script's
         end — referenced elements that didn't exist in the DOM yet and threw; moved them before it.
         (2) the HUD's Cavalieri term span was unclickable because #hud is deliberately
         pointer-events:none (so camera-orbit drags pass through it) and the span silently inherited
         that; fixed with pointer-events:auto scoped to just .term. (3) positionTourStep() measured a
         target's position, THEN scrolled it into view smoothly — for any step below the fold this
         left the spotlight/callout positioned from stale pre-scroll coordinates, and separately the
         vertical clamp used a hardcoded 140px height guess shorter than some steps' actual ~190px
         rendered height, leaving the Next/Back buttons partially off-screen and unclickable; fixed by
         scrolling (instantly) before measuring, and measuring the callout's own real rendered height
         instead of guessing. Verified end-to-end: all 8 tour steps click through via real Playwright
         clicks (not JS-triggered) start to finish; all 5 exercises tested through both a pass AND a
         fail transition driven by real state changes; both HUD and Reference-panel glossary terms
         open/close correctly. 148/148 audit passing (12 new checks).
v1.51.5 - 2026-07-19 - Morph can now be the PRIMARY step in a Compound chain, followed by Twist/
         Taper/Shear/Bend — per user request while reviewing the feature backlog with limited time
         left in the session. Morph's compute branch already returned [x,y,z] with y preserved
         exactly like Twist/Taper/Shear do, which is the only contract computeLayerPointCompound()
         needs from a primary step to feed a secondary one — so enabling it was three small,
         surgical changes: canCompound now includes 'morph' (shows the picker), the mode-switch
         handler no longer clears state.compoundMode when switching TO morph, and
         computeLayerPointCompound()'s primary-exclusion list dropped 'morph' (kept helix/ffd/bend,
         whose own output still can't feed a second step). Morph still can't be picked as the
         SECONDARY step — its point representation is a 4-element [fromX,fromZ,toX,toZ], but the
         compound wrapper hands a secondary step a plain [x,z] pair, a real domain mismatch, not
         just an unwired UI option — so compoundGrid still only offers Twist/Taper/Shear/Bend,
         unchanged. Verified with the same Playwright harness as v1.51.4: selected Bend as Morph's
         secondary, sampled computeLayerPointCompound() at base/mid/top and confirmed both the
         morph interpolation (x: 10->15->20) AND the bend curvature (z: 0->31.8->63.7) are present
         in the same output, then checked a full built mesh (1568 vertices) for zero NaN/Infinity
         values. That same check surfaced an unrelated pre-existing bug from v1.51.0: the on-axis
         "A1" reference line fed every mode a 2-element [0,0] point, but Morph's branch needs 4
         elements — silently NaN'd since Morph first shipped, just never exercised until this
         change drew a fresh look at that call site. Fixed by giving Morph a mode-aware origin point
         ([0,0,0,0], a from=(0,0)-to=(0,0) point that correctly stays on-axis with nothing to lerp).
v1.51.4 - 2026-07-19 - Ground grid still cut off visibly in the background, per a user screenshot of
         the Lotte Super Tower case study — the v1.51.1 fix wasn't enough. Built a real headless-
         browser test (Playwright + a local three@0.128.0 copy, since the CDN URLs this project
         loads from are blocked by this sandbox's network allowlist) and raycast the camera's actual
         4 viewport corners against the ground plane to measure what's really visible: the two BOTTOM
         corners landed ~450m out (well inside the old 910-unit grid), but the two TOP corners —
         shallow, near-horizontal rays, unavoidable once the camera pulls back far enough to fit a
         555m-tall, ~100m-wide tower in frame — landed ~4640m out, over 4x farther than the v1.51.1
         model-radius formula ever accounted for. That was never a model-SIZE problem the old formula
         could see; it's a camera-ANGLE problem. Fixed with computeVisibleGroundExtent(): raycasts
         the 4 viewport corners against y=-0.05 (the grid's own plane) each rebuild and takes the
         farthest valid hit (with the old diameter*1.6 kept as a floor for near-horizontal views like
         Front, where an upper corner may not hit the ground at all). Cap raised 4000->20000 so the
         real fix isn't silently re-clipped. Testing this for real (not just math) caught two further
         bugs math alone wouldn't have surfaced: (1) the Top/Front/Home view buttons reposition the
         camera directly, outside of rebuild(), so the grid was going stale in those views without an
         explicit re-sync — added one; (2) computeVisibleGroundExtent() runs synchronously right
         after the camera moves, before any render pass has called updateMatrixWorld() on it, so the
         very first raycast after any camera move was reading a STALE transform and silently under-
         sizing the grid for exactly one rebuild — fixed with an explicit camera.updateMatrixWorld()
         at the top of the function. Verified end-to-end: covered (grid extent >= farthest visible
         ground hit) across Home/Top/Front for Lotte Super Tower, Bend's small-angle case (the
         original v1.51.1 trigger), Guggenheim's Helix case study, and the plain default Twist shape.
v1.51.3 - 2026-07-19 - Morph's header tagline is now dynamic ("Square → Ellipse, live") instead of
         the generic static "shape morph, live" it shipped with in v1.51.0 — per user request while
         picking a title for a screenshot of the feature. morphTagline() reads PRESET_LABELS[state.
         preset] and PRESET_LABELS[state.morphToPreset] directly, so it always names whichever pair
         is actually loaded. Refreshed via applyModeChrome() from three places: the existing
         mode-switch/case-study-load call sites (unchanged), plus two new calls added to the From-
         shape and To-shape preset-button click handlers so the tagline updates live as either picker
         changes, not just on mode switch. Also checked the "volumes match — Cavalieri holds" text's
         color per a user question about it reading as a warning (red) rather than a confirmation —
         it uses --brick, which is this app's actual primary accent/CTA color used throughout (active
         preset buttons, primary buttons), not a semantic error color, so left unchanged.
v1.51.2 - 2026-07-19 - Fixed Play/Pause doing nothing on Morph. Root cause: Morph had no animatable
         parameter at all — computeLayerPoint's morph branch always fully blended by y/h with
         nothing to ping-pong, so Play just showed a "can't animate" toast. Added state.morphBlend
         (default 1.0, not exposed as its own slider) — computeLayerPoint('morph') now scales its
         lerp by params.blend, and Play animates morphBlend 0→1→0 (0 = pure extrusion of the FROM
         shape, matching the "neutral start" convention every other mode's animation already uses;
         animating morphToWidthM/DepthM directly wasn't viable since matched sizes still don't equal
         "no change" whenever fromPreset≠toPreset). Removed the special-case toast; Morph now flows
         through the same ANIMATABLE_PARAMS table as every other mode.
v1.51.1 - 2026-07-19 - Fixed ground grid visibly cut off short of the built solid's edges in Bend
         mode at small bend angles (β_max=6°, R=h/β=877ft — a small angle sweeps a very wide arc
         regardless of footprint size). Root cause: the grid was a fixed 300-unit extent, a leftover
         assumption from the pre-Lotte 30m footprint cap, never revisited when the footprint sliders
         were widened to 80m. Grid extent now resyncs every rebuild() from the actual built
         geometry's own bounding radius (reusing the Box3 already computed for lastModelRadius, no
         duplicate work) — 60% headroom beyond the circumscribed diameter, clamped [300, 4000], only
         rebuilds grid geometry when the needed extent actually changes. Also switched the default
         theme from Light to Blueprint (dark) per explicit request — a user's saved localStorage
         preference still overrides this on repeat visits.
v1.51.0 - 2026-07-19 - Morph mode shipped, per user request after Lotte Super Tower (SOM, unbuilt,
         555m/112fl, 70m square base tapering to a 40m circular top) was rejected from every existing
         mode including Compound: it's a cross-section TOPOLOGY change (square to circle), not a
         scale/twist/shear of one consistent profile shape. Each profile point becomes a 4-tuple
         [fromX,fromZ,toX,toZ] instead of [x,z], letting it slot into the existing
         buildDeformedGeometry/cap/panel pipeline almost unmodified — computeLayerPoint's morph
         branch lerps p[0..1]→p[2..3] by y/h. FROM/TO presets independently resampled to a shared
         N=32 points via ray-casting from the origin at evenly-spaced angles (not arc-length) so
         corresponding indices share the same angle in both shapes and don't twist against each
         other mid-blend — verified numerically before shipping. Generalized
         subdivideProfileForPanels to interpolate ALL point elements (was hardcoded to 2 for [x,z]),
         so Morph's 4-tuples survive panel subdivision and the loft-profiles JSON export produces one
         N-point level per height for free. No closed-form volume (numeric mesh fallback, like FFD).
         Doesn't compound with other modes (like FFD/Helix). Footprint sliders widened 30m/100ft →
         80m/260ft for Lotte's 70m base (same fix pattern as Guggenheim's radius sliders). Case
         study: Lotte Super Tower, square→ellipse, linear blend only (documented simplification,
         same treatment as Shard/Pisa).
v1.50.0 - 2026-07-19 - Compound operations — apply a second deformation after the first (e.g. Twist
         then Taper), the single biggest feature request this project has had. Motivation: every
         rejected case study so far (Shanghai Tower, Absolute World, and in spirit Capital Gate) was
         rejected for the SAME reason — the real building compounds two operations and SPIRA could
         only ever do one. This closes that gap; Shanghai Tower (twist+taper) is now representable.
         Mechanism: computeLayerPointCompound() wraps the existing, unmodified computeLayerPoint() —
         runs the primary transform, and if state.compoundMode is set, feeds the result's [x,z] back
         in at the SAME y through a second transform. This works because twist/taper/shear all return
         [x, y, z] with y passed straight through unchanged (rotation/scaling/translation happen
         entirely in the x/z plane at each height) — verified this against a manual hand-chained
         computation (exact match) and against boundary conditions at y=0/y=h before relying on it.
         Bend can only ever be the LAST step in a chain: its own output describes a point on a curved
         world-space arc, not "how far up the original axis" anymore, so nothing can be chained after
         it — enforced in three places (the wrapper's own safety check, the Compound picker hiding
         itself with an explanatory note whenever primary=Bend, and the mode-switch handler), not
         assumed to hold from the UI alone. FFD and Helix don't participate at all — neither fits the
         "preserve y, transform x/z" model this relies on.
         Replaced computeLayerPoint( with computeLayerPointCompound( at the 14 real call sites (mesh
         construction, panel warp, the tolerance solver, CSV/loft-JSON export, the axis overlay) —
         all of them already funnel through one or two spots in rebuild(), so every downstream
         consumer became compound-aware for free, none individually touched or even aware compounding
         exists. Volume falls back to the same numeric mesh integration FFD already used, since the
         closed-form formulas (Cavalieri-preserved for twist/shear/bend, the quadratic formula for
         taper) were each derived for a single operation and chaining genuinely changes the math
         (Twist then Taper does scale volume, unlike Twist alone) without a new closed form being
         worth deriving. New Compound section (mode picker + one compact parameter block per
         secondary mode, sharing state fields with their primary counterparts since the picker never
         allows the same mode to be both). Caught and fixed two real bugs before shipping: a
         reference to a nonexistent FT_TO_M constant in the compound shear sliders that would have
         thrown at first use, and the compound shear sliders' range staying stuck at a narrow static
         default instead of matching the primary sliders' actual widened runtime range. Reset,
         loading a case study, and switching primary to Bend/FFD/Helix or to whatever mode is
         currently the compound choice all clear compoundMode, so it can't silently point at a
         contradictory or stale configuration. Play/Pause and Compare both continue to work
         unmodified — Play still only animates the primary's own parameter(s) for now (a disclosed
         scope decision, not a gap), and Compare/localStorage/the shareable URL all pick up
         compoundMode automatically since it's just one more field in `state`. Added 11 new
         audit_deploy.js checks.
v1.49.0 - 2026-07-19 - More case studies, per user request. Added the Leaning Tower of Pisa as
         Shear's first case study since Capital Gate was removed in v1.41.0 — height (~56m), lean
         angle (~3.97°), floor count (8), and base diameter (~15.5m) are all independently sourced,
         and two of those figures cross-check against each other: height×tan(lean) computes to
         ~3.89m, matching the ~3.9m horizontal top-offset multiple sources cite directly rather than
         one number being derived from the other. Ellipse preset (the tower is cylindrical, not
         faceted). Caveat disclosed: later floors were built at a slight corrective counter-angle
         once the tilt was noticed mid-construction, so the real lean isn't one straight line the way
         linear Shear is — a deviation within the same operation, the same single-parameter
         simplification already accepted for The Shard's taper, not a different-operation mismatch.
         Investigated and REJECTED two more candidates before either got this far: the Transamerica
         Pyramid (Taper) has two asymmetric wing buttresses that appear partway up and don't taper
         with the rest of the building, plus a separate 65m spire; Absolute World/"Marilyn Monroe"
         (Twist) turned out to also taper inward then back out (a waist) despite its headline "twists
         209°" stat, the same twist+taper compound that already sank Shanghai Tower. Bend remains the
         only mode with no case study. Updated an existing v1.41.0 audit check that had asserted no
         "Case study (real leaning building)" label could exist in Shear's sidebar markup — true when
         written (right after Capital Gate's removal), but too strict now that Shear legitimately has
         one again; replaced with a check that the label is tied to a real, currently-defined case
         study rather than an orphan, preserving the original check's actual intent. Added 4 new
         checks for Pisa itself. 99/99 audit passing.
v1.48.0 - 2026-07-19 - Fixed Play doing nothing on Free (FFD), reported by user testing along with a
         correct diagnosis of why: unlike every other mode, Free has no single scalar deformation
         parameter to animate — 8 independently-draggable control points instead. startAnimation()'s
         FFD branch already scaled every offset by the same 0->1 blend factor (a reasonable generic
         "animate toward the current target," the same idea as every other mode's 0->dialed-in
         value), but the target IS zero at Free's own default/Reset state (all 8 offsets exactly
         zero, confirmed in resetModeValues) — so clicking Play with no handle ever dragged flipped
         the button to Pause and visibly did nothing, reading as broken rather than as "nothing to
         animate yet." Added a check (any control point's offset magnitude > 1cm — verified the
         threshold rejects the true default and floating-point noise from an accidental sub-mm nudge
         while accepting any real drag) that shows a clear toast and declines to start instead of
         silently entering a no-op Pause state. 1 new audit_deploy.js check.
v1.47.0 - 2026-07-19 - Three features requested together: animation, comparison mode, more case
         studies.
         CASE STUDY: added the Guggenheim Museum NYC's spiral ramp as Helix's first case study —
         turns (6) and total rise (~92ft/28m) sourced across multiple sources; outer radius sourced
         too but only as an average, since the real ramp genuinely widens with height (100ft dia. at
         bottom to 128ft at top) rather than holding one radius, which Helix's fixed-radius Line
         generator can't represent — same single-parameter-simplification treatment as The Shard's
         taper estimate, not the compound-mismatch that got Capital Gate/Shanghai Tower rejected.
         Searched specifically for a real single-axis Bend candidate (curves along its vertical axis
         without also twisting or tapering) and found nothing that held up — documented in-code
         rather than forcing a compound building in with an understated caveat. Bend still has none;
         Shear still has none (v1.41.0). Widened the Helix outer/inner radius sliders (previously
         6m/3m, sized for generic exploration) to 20m/5m to fit this building's real scale, matching
         why footprint sliders already go to 30m. Fixed a real gap found while wiring this up:
         loadCaseStudy() synced every other mode's sliders on load except Helix's — same
         one-directional bug pattern as the v1.42.0 footprint-reset fix, just never triggered before
         because Helix never had a case study to expose it.
         ANIMATION: one Play/Pause button (top of Deformation parameters, not duplicated per mode)
         ping-pongs the current Operation's own primary parameter(s) between a neutral value and
         whatever's dialed in. Mutates `state` directly each frame and restores the exact
         pre-animation values on stop, rather than threading a parallel parameter-override path
         through computeLayerPoint/buildDeformedGeometry — those already read straight from `state`
         everywhere, and duplicating that plumbing to avoid a few frames of temporary mutation would
         be a much larger, riskier change to already-verified geometry code. Runs inside the existing
         animate() rAF loop and calls the very same rebuild() FFD handle dragging already calls on
         every pointermove — not a new class of per-frame cost, a new source of an already-accepted
         one. Verified Bend's β=0 case against the actual formula before relying on it (already
         safely guarded, straight-fallback at |β|<1e-6) rather than assuming; used a small epsilon
         for Helix's zero-turns case to avoid a degenerate flat mesh. Stops automatically on manual
         slider drag, Operation switch, case-study load, or Reset — each of those calls
         stopAnimation() from inside its own handler (not a second listener racing the first) so a
         mid-flight switch can never restore stale pre-switch values over what the switch just set.
         COMPARISON MODE: "Save snapshot" (Compare, Advanced view) clones the current solid as a
         translucent ghost overlaid on the live model, rather than a literal second synced viewport —
         this app's single scene/camera/renderer/controls stack is referenced directly throughout
         rebuild() and every overlay function, and duplicating that whole stack for a real
         side-by-side view would be a far larger, riskier restructuring than the feature is worth.
         Ghost geometry: temporarily swap `state` to the snapshot's captured values, call the real
         unmodified rebuild(), clone solidGroup's resulting mesh(es), swap state back, rebuild()
         again for the live geometry — reuses the exact same, already-verified geometry path with
         zero duplicated logic, at the cost of two rebuild() calls once per Save (not per frame).
         pendingReframe is explicitly held off during the snapshot's own rebuild() and restored
         before the live one, since both calls share that one global flag and letting the snapshot's
         call consume it would frame the camera to the wrong geometry and silently drop the live
         model's own pending reframe. A simple height-only delta readout (both totalHeightM() calls
         are mode-agnostic and always correct) rather than a volume/area comparison — those differ
         in meaning across modes (Helix reports surface area, not volume; Free measures via numeric
         integration) and getting that normalization wrong across six modes felt like a worse outcome
         than a smaller but honestly-correct comparison. Found and fixed a real bug while wiring the
         toggle switch: its plain "switch" class would have been swept into the generic
         overlay-switch initializer (keyed to state.overlays[key], which this isn't) and gotten a
         second, conflicting click handler — split off a .switch-standalone class sharing the same
         CSS so the generic loop's selector no longer matches it. Added 16 new audit_deploy.js
         checks (94/94 passing).
v1.46.0 - 2026-07-19 - Collapsed the Export section's explanatory text by default, per a screenshot
         of Advanced mode showing four back-to-back paragraphs (PNG export, share link, loft-profiles
         JSON, Dynamo script) all expanded at once — exactly the density Simple/Advanced (v1.44.0)
         was meant to relieve, just re-exposed in full once someone opens Advanced. Wrapped each in a
         native <details>/<summary> ("What does this do?"), collapsed by default, one shared
         .info-toggle CSS class so all four (and any future one) look and behave identically —
         native element means free keyboard/screen-reader support and no JS state to track, closes
         back to collapsed on reload rather than needing its own persistence. Buttons and the loft-
         profile-count slider stay always visible; only the prose collapses. Checked the rest of
         Advanced (Overlays, Units, Projection) for the same pattern — nothing else there is static
         explanatory prose at this length, it's short dynamic status text, so the fix was scoped to
         exactly where the clutter actually was rather than added everywhere by default. Added 3 new
         audit_deploy.js checks (78/78 passing).
v1.45.0 - 2026-07-19 - Theme pass, per user request to look at "the entire theme design... what else
         can we do." Checked the actual CSS rather than guessing, which turned up two real gaps
         before any new feature work: 'Inter'/'Space Grotesk'/'Space Mono' were referenced throughout
         the stylesheet but never loaded via any <link> or @font-face, so every declaration was
         silently falling back to system fonts; and --ochre was defined in :root but used nowhere.
         Three changes, all chosen by the user from a set of options:
         (1) Loaded the actual fonts (Google Fonts, weights matched to what the CSS already asks
         for). Added a small inline SVG favicon (there wasn't one). Gave ochre exactly one
         consistent role — a new .caveat class (ochre text + left border) — applied to the two
         in-app "illustrative estimate, not sourced" case-study disclaimers and the tolerance
         solver's "not achievable" message, kept separate from --brick (errors/active state) and
         --prussian (data/formula), not just decoration.
         (2) "Blueprint" dark theme — literal architectural-blueprint convention (pale linework on
         deep blue paper), not a generic inverted dark mode. New "Light"/"Blueprint" toggle in the
         View section, `[data-theme="dark"]` CSS variable overrides so every DOM color updates
         automatically. Along the way found two hardcoded #fff values (active preset-button
         background, the toggle switch's on-state knob) that would have gone low-contrast against
         Blueprint's lighter prussian — fixed both to the theme-aware --paper instead, and added a
         --paper-rgb companion variable so the three HUD/legend translucent backgrounds (previously
         hardcoded rgba(251,250,246,...)) theme correctly too. Kept in uiPrefs (not `state`), same
         reasoning as v1.44.0's uiMode/sidebarWidthPx — a screen preference, not part of the building
         a share link hands someone.
         (3) Graph-paper ground grid — THREE.GridHelper (not a CanvasTexture-as-scene.background,
         to sidestep that technique's version/mapping-dependent tiling behavior) sitting in `scene`
         directly, not solidGroup/overlayGroup, confirmed safe against both camera-fit functions
         (frameCameraDefault/fitBoxDistance both already scope to solidGroup only, not the whole
         scene) and against every overlay/Simple-Advanced toggle. Regenerated (not just recolored)
         on every theme switch, since GridHelper's two-tone color comes from per-vertex color
         attributes set at construction, not a material property that can be reassigned after the
         fact. Added 9 new audit_deploy.js checks (75/75 passing).
v1.44.0 - 2026-07-19 - Sidebar overhaul, per user feedback: "the right side panel is getting clunky
         un organized... simple and advanced mode - each mode needs to be consistent... also this
         panel should be stretchable." Two independent changes:
         (1) Simple/Advanced view toggle (new "View" section, top of sidebar). Simple hides four
         sections consistently, regardless of which Operation is selected: Units, Projection,
         resolution (slices), Overlays (including the whole panel-warp toolchain), and Export.
         Operation/Cross-section/Deformation-parameters/Reference stay visible in both modes — "the
         shape itself" vs. tooling around it. Deliberately kept OUT of the model `state` object (and
         so out of localStorage's model key, Reset Values, and the v1.40.0 shareable-URL encoding) —
         this is a screen/workflow preference, not part of "the building" a share link is supposed to
         hand someone; persisted under its own 'spira-ui-prefs' localStorage key instead. Defaults to
         Simple on first load.
         (2) Resizable sidebar — a 6px drag handle between viewport and sidebar, Pointer Events (not
         mouse-only, so touch/pen work too) with setPointerCapture so a fast drag off the thin handle
         doesn't drop the gesture. Width lives in a --sidebar-width CSS custom property (the existing
         aside{width:...} rule just reads it, no other CSS touched), clamped to 260–min(640,60vw), and
         calls the existing resize() every pointermove so the 3D viewport visually keeps pace with the
         drag rather than only updating once released. Also persisted in 'spira-ui-prefs', separate
         from model state for the same reason as (1). Hidden entirely on the existing mobile
         breakpoint, where the sidebar already stacks full-width below the viewport and a width drag
         wouldn't mean anything. Added 6 new audit_deploy.js checks (66/66 passing).
v1.43.0 - 2026-07-19 - Fixed a one-directional overlay-switch sync bug, prompted by a user question
         about whether blue reliably means "on" throughout the app. The color rule itself was
         already fully consistent (all nine overlay switches share one CSS class and one click
         handler, prussian blue #1f4e79 = on, tan = off) — but page-load init only ever ADDED the
         'on' class (`if(state.overlays[key]) sw.classList.add('on')`), never removed it. Five of the
         nine switches (Axis A, Base plane B, Ruling lines, Slice rings, Floor lines) default to true
         and have class="switch on" hardcoded in the static markup; a saved session or shared link
         (v1.40.0) where one of THOSE FIVE happened to be false would load with the switch showing
         blue/on while the overlay was actually off — a genuine visual/state mismatch, not just a
         one-off. Fixed by switching init to `sw.classList.toggle('on', !!state.overlays[key])`,
         which forces the class to match the boolean exactly regardless of which way the markup and
         the loaded state disagree. Verified with a minimal classList simulation covering all four
         markup/state combinations (including the two that already worked, to confirm no regression)
         before shipping. Added 1 audit_deploy.js check (60/60 passing).
v1.42.0 - 2026-07-19 - Fixed "Reset values" leaving footprint width/depth untouched, reported with a
         screenshot of Bend's Reset producing a self-overlapping fan/pac-man shape instead of a
         tower. Root cause, confirmed by the math in computeLayerPoint's bend case (worldY =
         (R − p[1])·sinθ): a footprint left over from a prior mode or case study can have a
         half-extent larger than the bend radius R = h/β, which flips (R − p[1]) negative and folds
         the swept solid back through its own axis — the profile itself, not just the deformation
         parameter, has to be back at a sane scale for the reset shape to make sense. At the true
         fresh-load defaults (2×2m footprint, half-extent 1m vs R≈8.91m at β=180°, 28m tall) this
         never happened, which is why it looked like only Bend's specific default was broken; the
         real gap was that Reset never restored footprint at all, so *any* mode's Reset could inherit
         a wildly mismatched scale from whatever was last loaded. Added footprintWidthM/footprintDepthM
         to MODE_DEFAULTS for twist/taper/shear/bend (helix and ffd don't use footprint) and added
         syncFootprintSliderRange() to resetModeValues() so the sidebar sliders actually reflect the
         restored value, not just internal state. Verified numerically: reproduced the exact reported
         scenario (stale 75.5ft footprint, 8 floors × 3.5m, β=180°) and confirmed it inverts
         (half-extent 11.51m > R 8.91m), then confirmed the fixed default (half-extent 1m, ratio
         ≈0.11) does not. Added 4 new audit_deploy.js checks (59/59 passing).
v1.41.0 - 2026-07-19 - Removed Capital Gate as Shear's case study, per user feedback: "the two best
         case study's samples are: turning torso and cayan tower. capital is not even close to what
         the actual projects is in real life." Checked further rather than taking the caveat already
         in place (nonlinear lean rate) as sufficient: the real building's floor plates don't just
         lean, they change SHAPE and orientation with height ("curved triangular" to "curved
         rectangular," per Skyscraper Center and RMJM's own case study), and its form is described as
         curved/organic throughout — a genuinely different, compound deformation, not a straight
         cross-section on a straight (if nonlinear) lean. That's the same bar Shanghai Tower and The
         Bow already got rejected on; the original v1.17.0 caveat understated the actual mismatch.
         Shear now has no case study, matching Bend and Helix. Updated README, EXTENDED.md's
         rejected-case-studies reasoning is unaffected (Capital Gate documented inline in index.html
         instead, next to where it was removed, since it wasn't in EXTENDED's rejection list before).
v1.40.0 - 2026-07-19 - Added a shareable URL — third item on the feature-list priority order
         (tolerance solver, PNG export, then this). "Copy share link" (Export section) encodes the
         entire state object (mode, preset, every deformation parameter, footprint size, floors/
         floor-height, units, projection, resolution, panel-subdivision/tolerance-target, every
         overlay toggle, FFD control-point offsets) as URL-safe base64 in the location hash
         (#s=...) rather than a query string, since a hash never leaves the browser — no server,
         no Netlify access log, ever sees it, appropriate for a fully client-side static app. On
         load, a shared link's state is applied AFTER the existing localStorage restore, so it
         always wins over whatever the recipient's browser had saved — the whole point of sending
         a specific configuration. Deliberately does not encode camera orbit/position: pendingReframe
         already defaults true, so the first rebuild() after load re-fits the camera the same way
         every Operation/preset switch already does (v1.23.0), which reproduces the sender's intent
         better than pinning their exact viewing angle would. Verified round-trip headlessly (encode
         every mode's default and a modified/non-default state, decode, deep-equal check against the
         original) before wiring into the UI. Clipboard write uses the async Clipboard API with a
         textarea+execCommand fallback for contexts where it's unavailable.
v1.39.0 - 2026-07-18 - Added "Export view (.png)" to the Export section — second item on the
         feature-list priority order (tolerance solver, then this). Captures exactly what's on the
         WebGL canvas at the moment of the click: current camera angle, Perspective/Orthographic
         projection (v1.38.0), the solid, and every in-scene overlay (axis, rulings, point labels —
         real Sprite/Mesh/LineSegments objects, so they render into the canvas like anything else).
         Added preserveDrawingBuffer:true to the renderer, required for canvas.toBlob() to reliably
         capture anything in a continuously-rendering app — WebGL clears its drawing buffer after
         compositing by default, so without this flag a screenshot taken any time after the frame
         that drew it can come back blank. Disclosed the real limitation directly in the button's
         own description rather than leaving it to be discovered: the sidebar HUD panel and the
         panel-warp legend are separate HTML elements positioned over the canvas via CSS, not part
         of the Three.js scene, so they can't be captured this way and aren't included.
v1.38.0 - 2026-07-18 - Added a real Perspective/Orthographic projection toggle, per user request:
         "we have top front home views which are just oriented 3d views. we need real ortho views."
         Correct — Top and Front were true to their view DIRECTION but still perspective-projected,
         so even a straight-down plan or straight-on elevation had perspective foreshortening, not
         the true parallel projection a real plan/elevation view needs (the standard CAD convention
         Revit/AutoCAD/Rhino all follow). Given a choice between ortho-only-for-Top/Front, ortho-
         everywhere-always, or a toggle, went with a global toggle (persisted in state, applies to
         Home/Top/Front/free-orbit alike) so it's available whenever wanted rather than tied to
         which button was last clicked. Two camera objects (perspCamera/orthoCamera) share one
         positionCameraForFit() — perspective computes a fit distance from FOV math (unchanged from
         v1.31.0); orthographic instead sets a frustum half-height directly and resets zoom to 1,
         since an orthographic camera's apparent size comes from its frustum, not its distance from
         the subject. Switching projection re-fits fresh with the new camera rather than trying to
         convert a perspective distance into an equivalent ortho zoom (not the same concept, so no
         such conversion is ever exact) — but preserves the exact view direction and target the user
         was already looking at/from, so switching only changes how depth projects, never reorients
         the view or resets pan. resize() updates both cameras' projections every time regardless of
         which is active, so switching mid-session is always correct without a stale frustum.
         Verified the fit math against real THREE.js camera objects (not just index.html review):
         installed three@0.128.0 standalone, built the actual view-projection matrix, and confirmed
         a point at 99% of the padded radius lands inside the [-1,1] NDC clip volume while one at
         100.1% falls just outside — the orthographic frustum brackets the model with exactly the
         same 15% pad the perspective fit already used, boundary-precise in both directions.
v1.37.0 - 2026-07-18 - Fit-and-finish list fully clear; working through the feature list, highest
         priority first, starting with the tolerance solver (natural inverse of v1.28.0's
         subdivision slider). Added "Solve for minimum panels": set a target max warp, click Solve,
         get the smallest per-face subdivision count that meets it, with a one-click Apply. Sweeps
         N=1..12 through the exact same subdivideProfileForPanels()/computePanelWarp() calls the
         live overlay uses — never assumes the roughly-linear warp-vs-width relationship that
         motivated adding this feature, verifies each N directly, since that relationship is only
         approximate for non-axis-aligned edges. Reports an honest "not achievable up to 12 panels"
         with the best available figure when the target is tighter than 12 panels can reach, rather
         than a misleading result. Deliberately a button, not a live sweep on every rebuild() —
         re-running up to 12 full panel-warp computations on every slider tick during a live drag
         (Helix at high resolution especially) risked reintroducing exactly the frame-rate jank the
         v1.24.0/v1.33.0/v1.34.0 fixes were about avoiding, for a result only actually needed once,
         on request. Verified headlessly against the already-verified Turning Torso numbers before
         shipping: target=1000mm finds N=1 (665mm, correctly under), target=100mm finds N=7,
         tighter targets (50/25/10mm) correctly report not-achievable with best=55.7mm at N=12.
v1.36.0 - 2026-07-18 - Fit-and-finish list fully clear; started on the feature list (panel schedule
         export, first). Added "Export panel schedule (.csv)", shown alongside the other Panel
         flatness controls only while that overlay is on. One row per panel currently being
         analyzed — panel_id, floor/turn index, edge index, width (mm and ft), warp (mm and in), a
         severity label (green/amber/red, using the exact same 0/25/50mm thresholds warpColor()
         renders with, so a row's label always matches the panel's on-screen color), and all 4
         corner coordinates in the same Y-up->Z-up remap the loft-profiles JSON export already
         uses, for direct usability in a CAD/BIM pipeline. Recomputes fresh from lastBuild via
         computePanelWarp()/subdivideProfileForPanels() — the exact same functions, current
         floors/floorHeightM (or Helix's segs/h), and current panelSubdiv the live overlay and HUD
         already use — rather than a second implementation that could drift out of sync, the same
         principle buildLoftProfilesJSON already followed. lastBuild now also stores segs (needed
         for Helix's per-rebuild panel granularity, previously only a local variable inside
         rebuild() itself). Verified headlessly before shipping: panel count matches floors x
         (edges x subdivision) exactly (54 floors x 20 sub-edges = 1080 panels), and floor_index/
         edge_index/width values match the already-verified Turning Torso subdivision numbers.
v1.35.0 - 2026-07-18 - Added a "Colorblind-safe palette" toggle for Panel flatness (warp), the last
         real item on the fit-and-finish list (audit_deploy.js/Dynamo script consistency remains
         blocked without those files being re-uploaded). Default green->amber->red is exactly the
         pair deuteranopia/protanopia (the two most common colorblind forms) struggle to
         distinguish. New alternate palette uses Viridis' own stops (dark purple -> teal -> yellow)
         — a colormap specifically designed to be both colorblind-safe and perceptually uniform, so
         severity still reads correctly by brightness alone, not just hue. Toggleable rather than a
         replacement, since plenty of people prefer the intuitive green-good/red-bad read when it
         isn't a barrier for them. Shown alongside the subdivision slider, only while Panel flatness
         is on; the in-canvas legend's gradient bar switches to match via a CSS class rather than a
         second hardcoded gradient, verified the interpolation hits the exact stop colors at
         t=0/0.5/1 before shipping. warpColor()'s two-stop lerp logic factored into a shared
         lerpPaletteStops() helper so both palettes go through identical interpolation math.
v1.34.0 - 2026-07-18 - Closed out the last open item from the fit-and-finish list: sliders that
         change the model's actual size/shape (floors, floor-to-floor height, footprint width/
         depth, every deformation parameter, every Helix dimension) never triggered a reframe at
         all, even on a drastic change — only button-triggered actions did (Operation, preset, case
         study, Reset values, v1.23.0), deliberately, so a live drag never yanks the camera
         mid-gesture. That was flagged earlier as risky to fix broadly, since the obvious approach
         (reframe on every 'input' tick) would reintroduce exactly the jump v1.24.0 fixed. The
         actual fix: listen for 'change' instead of 'input' — it fires once when a slider is
         released (mouseup) rather than continuously during the drag, so live-dragging is completely
         unaffected (camera never moves mid-gesture) but letting go of a big change now properly
         re-fits instead of leaving the model stranded outside the frame with no recovery short of
         manually clicking Home. Same treatment for the click-to-type editable value fields, via
         their commit() handler, for typed values — except resolution/segments, which doesn't
         affect model size and stays reframe-free like the other purely-visual-density sliders
         (loft profile count, panel subdivision).
v1.33.0 - 2026-07-18 - Fixed a real bug user reported/screenshotted: "view clipping/culling...
         need the ability to zoom out further" on a big model (100 floors, 1350ft tall). Root
         cause: camera.near/camera.far were only ever set once per view-fit (inside Home/Top/Front/
         the first rebuild), sized for that specific fit distance — OrbitControls itself has no
         maxDistance set, so scrolling to manually zoom out further is technically unbounded, but
         doing so eventually exceeds the far plane computed for the ORIGINAL fit distance, and the
         model gets clipped/culled out of view entirely. That reads exactly like being capped —
         the camera can still move back, there's just nothing left to see. Fixed by recomputing
         near/far every frame in animate(), from the camera's actual live distance to the orbit
         target, using a cached model-radius buffer (lastModelRadius, updated once per rebuild()
         rather than per frame — a full Box3 traversal is cheap next to everything else rebuild()
         does, but not something to repeat 60x/second). near/far now always bracket the visible
         content correctly at any zoom level, in or out, with no artificial ceiling — replacing the
         previous approach where near/far were only ever correct for whatever distance existed at
         the moment a view button was last clicked.
v1.32.0 - 2026-07-18 - Fit-and-finish pass, audited for issues rather than waiting on another
         report. Found and fixed one real gap: the mobile breakpoint (max-width 760px) scales down
         #hud and #viewControls but #warpLegend (added v1.26.0, after that breakpoint already
         existed) never got the same treatment — on a narrow phone, where the viewport itself is
         already squeezed (aside takes up to 46vh at the bottom), the legend's full-size 150px bar
         could crowd the Top/Front/Home buttons sharing the same bottom row. Now shrinks alongside
         everything else at that breakpoint. Also verified (not just assumed) several related areas
         while auditing: Helix Line generator's open (2-point, 1-edge) profile subdivides correctly
         under panel warp's new subdivision slider (headless-checked, not just the closed-polygon
         case already verified in v1.28.0); FFD handle dragging is unaffected by Panel flatness
         hiding the solid, since handles raycast against their own array in overlayGroup, never the
         solid itself; Reset Values intentionally leaves panel subdivision untouched, consistent
         with how it already leaves every overlay toggle untouched (a view/analysis preference, not
         a deformation parameter) — confirmed as by-design rather than an oversight. Minor comment
         accuracy fix: a v1.27.0 comment referenced "frameCameraDefault()'s Box3 fit" specifically,
         written before v1.31.0 split that into a shared fitBoxDistance() serving all three view
         buttons — updated to match.
v1.31.0 - 2026-07-18 - Fixed a real framing bug user reported/screenshotted on Front view: a
         tall/narrow building (The Shard's Taper case study, 1015.7ft tall on a 91.9ft footprint)
         filled the viewport almost edge-to-edge vertically with no padding margin, while leaving
         most of the width empty — not an actual "zoom to fit," just a coincidence of the old
         height-only heuristic. Root cause: frameCameraTop()/frameCameraFront() used a separate,
         older distance formula (dist = h * a fixed multiplier, no bounding-box math at all) that
         predates frameCameraDefault()'s (Home's) proper Box3 fit and was never upgraded to match
         it — computed and confirmed numerically that the old Front formula's distance (~232m for
         The Shard) fell well short of the ~400m+ actually needed to fit the full height within the
         camera's vertical FOV, let alone with Home's 15% padding. Refactored the fit math (real
         Box3 → circumscribed-sphere radius → checked against both horizontal and vertical FOV,
         whichever is more restrictive → 15% pad) into a shared fitBoxDistance() helper, and
         switched Top and Front to use it — same fit quality as Home now, for all three buttons,
         regardless of how tall/narrow or wide/short the model is. Each button still positions the
         camera along its own axis (Top: straight down; Front: along -z) and Top still keeps its
         OrbitControls-singularity workaround (swapped up-vector, sub-mm position epsilon).
v1.30.0 - 2026-07-18 - Fit-and-finish pass, three items. (1) The Panel flatness legend's gradient
         clamps at 50mm — every panel past that renders identically red, so a model at 51mm and one
         at 200mm looked the same. Added a marker on the gradient bar at the actual max warp
         position, plus an explicit "actual max: Xmm (off scale)" reading when it exceeds the
         display range, so the real severity is never hidden behind a maxed-out color. (2) Wireframe
         toggle silently did nothing while Panel flatness was on, since that overlay hides the solid
         itself (v1.27.0) and there's nothing left to wireframe — now dims and disables that row
         while Panel flatness is active instead of leaving a dead switch with no explanation.
         (3) README.md and EXTENDED.md refreshed to cover everything shipped since v1.22.0 that
         never made it into the standalone docs (only the in-file changelog and Help modal had it):
         the subdivision slider, panel outlines, the legend and its marker, solid auto-hide, and
         Helix's render-resolution panel granularity. Also corrected EXTENDED.md's Camera framing
         section, which still described the old one-shot hasFramedOnce guard superseded by
         pendingReframe back in v1.23.0, and added a new "Overlay decoration sizing" section
         documenting footprintExtent (v1.23.0), which had no standalone-doc coverage at all despite
         fixing several real bugs (oversized labels/cones on tall buildings, Bend's giant base plane).
v1.29.0 - 2026-07-18 - User reported the panel boundaries were faint/unreadable after using the new
         "subdivide each face into N panels" slider (v1.28.0) — checked the sidebar label's CSS
         first (identical markup/classes to every other slider-row label, ruled out as the cause),
         so this is about the 3D view: with a face split into several bays, neighboring panels often
         land at similar-enough warp values to get near-identical fill colors, and since the overlay
         only ever drew filled color, not boundaries, a subdivided face read as one undifferentiated
         wash rather than N distinct panels. Added a dark outline (LineSegments, 4 edges per panel)
         around every panel-warp quad, nudged slightly further out than the fill (0.045 vs 0.03) so
         it never z-fights with its own panel underneath — panel boundaries now stay clearly visible
         regardless of how similar two neighboring panels' colors happen to be.
v1.28.0 - 2026-07-18 - Added a "subdivide each face into N panels" slider (1-12, shown under Panel
         flatness while that overlay is on) after the user asked whether Turning Torso's 26.2in max
         panel warp figure meant the case study's dimensions were wrong. They weren't — 90 degrees
         over 54 floors on a sourced 23m footprint is correct, and re-deriving it standalone
         reproduced 26.22in exactly. What that number actually exposed: the app's 4-corner Square
         profile treats an entire ~75ft-wide building face as ONE panel, which is not how any real
         twisting facade is built — real curtain walls break each face into many narrower bays
         specifically because warp scales roughly linearly with panel width for a given rotation
         rate (verified: 23m/1 panel = 26.2in, 11.5m/2 panels = 13.2in, ... 2.3m/10 panels = 2.6in,
         a near-exact linear relationship). New subdivideProfileForPanels() interpolates additional
         points along each straight edge of the flat, undeformed profile before layerPointFn
         deforms them — subPerEdge=1 is a verified true no-op (identity, not just numerically equal)
         so default behavior is unchanged. Sidebar shows a live "~Xft wide panels" readout (computed
         from the actual first panel's edge length every rebuild) so the real-world bay size behind
         whatever N is chosen is never left to guesswork. Applies uniformly to every mode via the
         same profile/layerPointFn pattern as the warp computation itself.
v1.27.0 - 2026-07-18 - User reported color jitter/flicker between the solid surface and the Panel
         flatness (warp) overlay's panels — z-fighting, worst at grazing viewing angles where the
         existing 3% outward nudge isn't enough screen-space separation on some GPUs/drivers, asked
         for "a panel analysis mode where the blue rendered form is not there." Rather than pushing
         the nudge further out (which would visibly detach the panels from the surface they
         describe, undermining the whole point of the overlay), the solid (side + caps) now hides
         itself automatically while Panel flatness is on — the color-coded panels already cover the
         same surface at real floor/edge resolution, so nothing readable is lost, and there's no
         longer any coincident geometry left to fight with. Every other overlay (rulings, slice
         rings, floor lines, axis, base plane) stays visible underneath, unaffected. Implemented via
         mesh.visible=false rather than skipping solidGroup.add() — Box3.setFromObject() (which
         frameCameraDefault() uses to fit the camera) traverses regardless of .visible, so camera
         framing still sees the hidden solid's true extent and isn't thrown off by hiding it.
v1.26.0 - 2026-07-18 - Added an in-canvas color legend for Panel flatness (warp), per user request
         after a screenshot showing the overlay working well on Taper+Ellipse ("the best example
         I've seen"). Previously the green->amber->red gradient on the model had no key anywhere in
         the viewport itself — only a single "max panel warp" number in the sidebar HUD, which
         doesn't explain what a mid-gradient amber panel actually means. New bottom-left panel
         (shown only while the Panel flatness toggle is on) shows the same gradient bar with 0 /
         25(unit) / 50(unit)+ tick labels, using the same illustrative 0-50mm range warpColor()
         already renders from and the same mm/inch unit conversion (toDisplaySmallLen/smallLenUnit)
         the HUD row already uses, so the two stay numerically consistent with each other and update
         together on a Metric/Imperial toggle.
v1.25.0 - 2026-07-18 - Fixed a real bug user spotted from a screenshot — a large flat green plane
         cutting straight through the Helix Line generator's ramp with Panel flatness (warp) on.
         Root cause: the panel-warp overlay reused floor lines' turns/pitch as its loopCount/stepM
         for Helix, same as every other overlay that treats one full 360-degree turn as Helix's
         analog to a floor — reasonable for floor LINES (a ring is a ring regardless of size), but
         wrong for panel WARP, where the quad's four corners are what gets drawn. Line's generator
         has only 2 profile points (1 edge, spanning the whole ribbon from inner to outer radius),
         so each "panel" connected a turn's start to its end — landing at the exact same angle one
         full revolution later — as one huge, genuinely flat (0.000mm warp, verified) quad that
         doesn't remotely track the helical surface between those two points, rendering as a solid
         plane where no such surface exists. Switched Helix's panel-warp granularity from
         turns/pitch to the render resolution (segs/h-per-segment) instead — small enough for the
         flat-quad approximation to actually approximate the surface (verified: max panel diagonal
         span dropped from 3.86m to 1.4m at default params, warp went from a misleading 0.000mm to a
         real ~31.6mm reflecting genuine local curvature), and a legitimate fabrication-relevant unit
         for a helical ribbon in its own right (small flat stringer segments, not one full turn, are
         how such a ramp would actually be built from stock). Floor-based modes (Twist/Taper/Shear/
         Bend/FFD) untouched — floors remain the deliberate real-architectural-panel unit there.
v1.24.0 - 2026-07-18 - Fixed a real bug reported as "toggle Panel flatness off, canvas frame jumps" —
         the toggle was incidental, not the cause. rebuild() (which runs on every slider tick and
         every overlay checkbox, not just Panel flatness) was unconditionally calling
         controls.target.set(0, h/2, 0) at its end, every single time. OrbitControls.update() runs
         every animation frame regardless of what triggered it, so that reset silently snapped any
         panning the user had done back to dead-center on the very next frame after ANY interaction
         — the jump was just most noticeable on a toggle click, which doesn't otherwise touch the
         model. Removed the unconditional reset; frameCameraDefault() already sets controls.target
         correctly (to the actual fitted box center) and only runs when pendingReframe is true
         (v1.23.0), so it alone owns the target now — consistent with camera position/distance,
         which likewise only move on an actual reframe, never a plain slider drag or toggle.
v1.23.0 - 2026-07-18 - Fixed two real, user-reported readability bugs, both worst at real-building
         case-study scale. (1) Camera framing: frameCameraDefault() only ever auto-fit once, on the
         very first rebuild() (hasFramedOnce), by design (v1.7.1) so mid-session slider drags never
         yank the view — but that same guard meant switching Operation, cross-section preset, Helix
         generator, a case study, or Reset values (all of which can change the model's size/shape/
         position drastically) left the camera fit to whatever the PREVIOUS model was, sometimes
         framing empty space or a sliver of the new one (screenshots: Helix nearly invisible after
         switching from Taper; Bend's base plane filling the whole viewport with the actual solid
         tiny in a corner). Replaced the one-shot boolean with a pendingReframe flag that those
         specific button handlers set — ordinary slider `input` events still don't, so live-dragging
         a parameter is unaffected. (2) Overlay decorations (point labels, axis arrowhead cone,
         origin marker, surface-normals overlay, base plane B, FFD handles) were all sized/scaled
         off total model height h alone. Fine for a roughly cube-proportioned model, but wrong two
         different ways for a tall/narrow real building like The Shard (309.6m tall, ~28m footprint):
         label sprites scaled to h ballooned to ~12.5m wide against a 28m-wide base — readable in
         isolation, but the point-labels loop ALSO picked its sample points by raw array index
         (first min(n,10)), which is every real corner on a low-vertex polygon (square/triangle/
         hexagon/octagon/star, all n<=10) but only a tightly-clustered ~90 degree arc on a smooth
         32-point Ellipse or 24-point Helix Circle/Pipe generator — so oversized labels landed
         directly on top of each other by construction, independent of size. Fixed both: labels now
         sample evenly around the loop (stride = n/numLabels, a no-op for n<=10 polygons), and every
         decoration's size now derives from a new footprintExtent value (the (x,z) bounding extent
         of the model's own BASE ring only, computed once per rebuild and reused everywhere) instead
         of h. That same footprintExtent fix also corrected base plane B, which had the same root
         bug one level up: v1.21.0 sized it from the planar bounding extent of EVERY layer (correct
         for Twist/Taper, which stay above their own footprint, but wrong for Bend, whose solid
         sweeps sideways through world space as it curves — the "base plane" was measuring the whole
         curved solid's footprint, not the actual base cross-section, which is exactly the huge
         diamond in the Bend screenshot). Verified visually against all four reported screenshots
         (Taper+Ellipse label mass, Helix invisible-after-switch, Shear+Ellipse label mass, Bend
         oversized base plane) before shipping.
v1.22.0 - 2026-07-18 - Added a "Panel flatness (warp)" overlay, following up on the panel-planarity
         topic raised at the end of the last session (every SPIRA operation except pure extrusion
         produces non-planar floor-to-floor panels in general — a real curtain-wall/cladding
         concern, not just a rendering curiosity). For every real floor-to-floor, edge-to-edge
         panel (not the fine render mesh — the actual four corners a fabricator would work from),
         computes warp as the classic curtain-wall "twist" tolerance metric: the plane through three
         of the panel's four corners, and the perpendicular distance of the fourth corner from that
         plane. Rendered as a translucent color-coded quad per panel (green -> amber -> red over an
         illustrative 0-50mm range, same "illustrative, not sourced" framing as the case-study
         footprint estimates) nudged outward from the solid using the same centroid-based technique
         as slice rings/floor lines. New HUD row reports max panel warp in mm (or inches in
         Imperial) — a finer unit than the existing m/ft length readouts, since warp values are
         small relative to the model. The warp computation itself always runs (cheap: floors x
         edges, not floors x resolution), so the HUD number is live even with the visual overlay
         off; only the colored quads are gated behind the toggle. Applies uniformly across all six
         modes via the same layerPointFn/profile/closed pattern as floor lines and the normals
         overlay, including Helix (panels between turn boundaries and generator segments). Verified
         the warp math headlessly before shipping (straight prism and pure Shear both measure exactly
         0, matching that translation is an isometry; axis-aligned rectangle panels under Taper also
         measure exactly 0 even when V≠W, since an edge with one coordinate held constant has no
         bilinear cross-term to warp with — non-axis-aligned edges, e.g. on Triangle, do warp under
         asymmetric Taper as expected). Turned up a genuine finding along the way: Bend's panels
         measure exactly flat (to floating-point precision) at every angle and cross-section tried,
         unlike Twist — because Bend never rotates the local x/bend-axis direction, only sweeps the
         cross-section along an arc, it's structurally a cylindrical bend of a flat sheet (developable
         surface), not a twist. Added a note about this to Bend's Reference panel text.
v1.21.0 - 2026-07-18 - Graphics consistency audit, per user request ("really big axis lines... this
         should be audited and reviewed"). Found and fixed three real issues: (1) Base plane B was a
         hardcoded size=4.2 regardless of the actual model — fine at classroom scale, but far smaller
         than the solid itself on any real-building case study (Cayan Tower's footprint alone is
         ~22m). Now derived from the model's own planar (x,z) bounding extent via layerPositions, so
         it's correct for every mode without per-mode special-casing. (2) Axis arrowhead cones were
         hardcoded (0.09, 0.3) — invisible on a 300m case study, oversized on a small model. Now
         scale with height via the same Math.max(proportional, floor) pattern already used for the
         origin marker/FFD handles/normals overlay. (3) Floor lines had two different techniques
         solving the identical z-fighting problem depending on mode (profile-coordinate scaling for
         non-helix, centroid-based nudge for helix, itself only added last session to fix Pipe) —
         unified on the single centroid-based technique everywhere. Also trimmed the Axis A overshoot
         ratio 1.35x -> 1.15x — always scaled correctly with model height (not a bug), but read as
         oversized/dominant, especially now that case studies make the line long in absolute terms
         too. Verified the new size formulas numerically across small/classroom and real-building
         (Cayan Tower, The Shard) scale before shipping.
v1.20.0 - 2026-07-18 - Added a "Surface normals (debug)" overlay, off by default, per user request
         after a session of chasing normal-orientation bugs (inward-facing Circle/Pipe and Ellipse
         normals, both caught only via headless Node scripts before shipping). One short outward
         segment per profile corner per FLOOR (not per resolution slice, which can run past 100 and
         would be an unreadable haze) — reuses the exact same finite-difference technique the mesh
         builders themselves use for their own analytic normals, so this is a faithful debug view of
         what the render mesh is actually doing rather than a separate approximation, and branches
         the cross-product order the same way buildHelicalGeometry vs. buildDeformedGeometry's own
         paths do (see existing comments on why they differ) rather than getting Helix backwards.
         While building it, found and fixed a related latent bug in the existing "Turn lines" overlay
         (Helix's floor-lines equivalent): it called the raw radial-sweep formula directly instead of
         the per-mode evaluator, which would have been wrong for the Pipe generator specifically —
         same bug class fixed for point labels and the loft-profiles exporter in v1.15.0, just missed
         here since Turn lines predates Pipe. Switched its z-fighting nudge to the generic centroid-
         based technique slice rings already use (v1.14.2) instead of a profile-coordinate scale that
         only made sense for the old radial-sweep formula, fixing both issues in one change.
v1.19.1 - 2026-07-18 - Fixed The Shard's taper — user screenshot showed a needle-thin spike with no
         resemblance to the real building ("very big spire that does not exist"). The v1.19.0
         estimate (taperV=taperW=0.15) was wrong, not just imprecise: SPIRA's Taper is a single
         LINEAR taper across the whole height, but the real Shard stays visibly broad through most
         of its height and only narrows sharply in its top ~15 (largely unoccupied, structural)
         floors of ~95 — forcing a linear taper to reach 0.15x width at the top spreads that
         narrowing across the entire building instead of concentrating it near the top the way the
         actual silhouette does. Revised to 0.4, a considerably blunter, more visually plausible
         compromise for what a single linear taper can represent — still an estimate, not a sourced
         ratio, same as before.
v1.19.0 - 2026-07-18 - Added The Shard (Renzo Piano, London, 2012 — 309.6m, 95 floors, tapers to a
         near-point) as a case study for Taper, first case study outside Twist/Shear. Height and
         floor count are sourced (Wikipedia, Skyscraper Center, WSP's own engineering write-up); the
         taper amount itself (V=W=0.15) is NOT — no published base-width/top-width ratio was found
         despite several searches, so it's an illustrative estimate matching the building's famous
         silhouette, same category as every case study's footprint size. Investigated two other
         candidates from the same research pass and declined both for now rather than force a fit:
         Lotte World Tower's own architects (KPF) describe its taper as "a continuous curve"
         (inspired by celadon pottery), not the straight-line taper SPIRA's Taper mode models — a
         real geometric mismatch, the same category of problem that ruled out The Bow for Bend, not
         just an unsourced parameter; 20 Fenchurch Street ("Walkie-Talkie") would be an interesting
         flare-instead-of-taper example (SPIRA's V/W already support >1 scale factors) but its
         profile is described the same way as Lotte's — curved, not straight — and no numeric
         base/top ratio was found either. Bumped the floors slider max 80->100 to fit The Shard's 95.
v1.18.0 - 2026-07-18 - Added Octagon and Ellipse cross-section presets (user's request for more
         realistic footprint shapes alongside Star, which stays — "fun to play with" per the user,
         just no longer the only non-rectilinear option). Octagon is a straight-edge n-gon, same
         treatment as Square/Triangle/Hexagon/Star (faceted panels, sharp corners — real corners on
         a real polygon). Ellipse required a genuine architecture addition: it has no real corners
         anywhere around its loop, so faceting it into 32 private sharp-edged panels (its sample
         count) would show visible facets on something meant to read as smoothly curved — the same
         problem Helix's Circle/Pipe generator solved in v1.17.1. buildDeformedGeometry gained a
         smoothCrossSection path (new PRESET_SMOOTH lookup, currently just {ellipse:true}): shared
         vertices around the whole loop instead of per-edge duplication, analytic per-vertex normals
         via finite difference across neighboring PROFILE points (approximating the true ellipse
         tangent) crossed with the height tangent — same technique as the faceted path's exact
         straight-edge tangent, just approximate instead of exact since there's no single straight
         edge to be exact about. Initially shipped with an inverted normal sign (100% inward-facing
         in headless testing) from copying buildHelicalGeometry's cross-product order, which uses a
         different winding convention than buildDeformedGeometry's own faceted path — caught before
         release, fixed to match the faceted path's own order instead. Verified headlessly (Node +
         three.js): 0 inward-facing normals and 0 NaNs for Ellipse across twist (untwisted and 90°)
         and NaN-freedom across taper/shear/bend; Octagon verified NaN-free through the existing
         faceted path.
v1.17.1 - 2026-07-18 - Fixed a visible artifact on Helix's Line generator user asked about from a
         screenshot: a dense fan of thin lines radiating from the axis across the ramp. Same root
         cause as the striping fixed in v1.14.3 for the other five modes (flat shading's Mach-band
         effect on a surface built from many thin facets — here 3 turns x 120 resolution = 360 of
         them) but never applied to Helix, which was left flat-shaded at the time. Rebuilt
         buildHelicalGeometry to compute analytic per-vertex normals (height/sweep tangent via
         finite difference, generator/circumference tangent via finite difference across neighboring
         generator SAMPLES — exact for Line's single straight segment, a good approximation of the
         true tangent for Circle/Pipe's 24-sample circle) instead of Three.js's face-averaging
         computeVertexNormals(), the same technique already used for the other five modes. Unlike
         those modes' polygon-corner panels, Helix's generator direction has no real corners to
         preserve — Line is one continuous edge, Circle/Pipe's 24-gon is meant to read as a smooth
         round tube — so normals are shared/smooth across the whole generator direction, not split
         per-panel. All three generators (Line/Circle/Pipe) now get smooth shading; verified
         headlessly (Node + three.js) that normals are outward-facing and NaN-free for all three —
         initially shipped with an inverted sign for Circle/Pipe's tube surface (100% inward-facing
         against the tube's own centerline in testing), caught before release by testing orientation
         against each generator's actual local reference rather than only the global axis, and fixed
         by flipping the cross-product order.
v1.17.0 - 2026-07-18 - Added Capital Gate (RMJM, Abu Dhabi, 2011 — 160m, 35 floors, 18° lean,
         Guinness-certified world's farthest leaning man-made building) as a case study for Shear,
         the first case study outside Twist. Generalized the case-study system (CASE_STUDIES/
         loadCaseStudy, previously Twist-only) to a mode field + fields object per entry, so adding
         a case study to any mode is now just a data entry rather than new plumbing. Named the honest
         approximation directly in-app: the real building's lean isn't linear from the base (floor
         plates stack straight through roughly the 12th storey, then lean at an accelerating rate
         above that) the way SPIRA's Shear is, so this preset's constant linear shear simplifies the
         real, non-uniform lean profile — height/floors/total lean angle are still sourced figures.
         Bumped the shear offset slider range ±8m/±25ft -> ±60m/±200ft to fit (18° over 160m needs
         ~52m of offset). Investigated and rejected two other candidates rather than force a fit: The
         Bow (Calgary) turned out to curve in PLAN (crescent footprint extruded straight up) rather
         than along its axis, so it doesn't actually match what Bend models geometrically; no
         sufficiently well-documented pure-linear-taper or pure-Bend building was found yet either.
v1.16.1 - 2026-07-18 - Fixed a blank canvas after loading the Cayan Tower case study (user report:
         "Home leaves you blank space"). The camera's far clipping plane was a fixed 200 units —
         harmless at classroom-model scale, but Cayan Tower is 306m tall internally (real meters,
         not a scaled-down abstraction), so the entire model sat beyond where the camera could see
         it once framed at a matching distance. Home's own framing math was already correct
         (verified — it computed the right distance and target), it just handed the projection
         matrix a far plane too small to contain the result, so re-clicking Home couldn't fix it
         either. near/far now scale with the actual framed model size in all three framing functions
         (Default/Top/Front) instead of a fixed range; verified numerically for Cayan Tower's real
         scale (radius ~154m, camera distance ~494m) that the whole model now sits inside
         [near, far] with margin on both sides.
v1.16.0 - 2026-07-18 - Added two real-building case-study presets to Twist mode: Turning Torso
         (Calatrava, Malmö, 2005 — 190m, 54 floors, 90° total twist, square/cube plan) and Cayan
         Tower (SOM, Dubai, 2013 — 306m, 73 floors, 90° total twist, hexagonal plan). Both chosen
         specifically because they're twist-ONLY buildings (no accompanying taper) — a genuinely
         twisting-and-tapering building like Shanghai Tower would need combined operations this tool
         doesn't support, and modeling it as twist-only would misrepresent its real form, so it was
         deliberately left out rather than shipped as a shakier approximation. Height, floor count,
         and total twist angle are sourced, documented figures for each building; footprint
         width/depth are an illustrative estimate, not a published plan dimension, and the UI says
         so directly under the buttons rather than presenting every number as equally verified.
         Bumped the floors slider max 60→80 (Cayan needs 73) and the footprint width/depth slider
         max 10m/33ft→30m/100ft (both buildings' illustrative footprints exceed the old max, sized
         for classroom-scale massing) — both were previously capped well below real-building scale.
v1.15.0 - 2026-07-18 - Added "Pipe" as a third Helix generator, closing the gap flagged since
         v1.7.0/EXTENDED.md's Known Limitations: a circle held orthogonal to the helix's own
         tangent at every point (the "true" constant-radius pipe), as opposed to Circle's simplified
         circle-flat-in-the-meridian-plane version. Implemented via an analytic Frenet frame
         (tangent/normal/binormal) along the helix centerline (pipeFrenetPoint) — well-defined and
         smooth everywhere for a circular helix (constant curvature/torsion, C'·C''=0 identically),
         no numerical rotation-minimizing-frame approximation needed. buildHelicalGeometry() was
         refactored to accept an optional evalPoint callback so Pipe reuses the same topology/
         winding/cap code as Line/Circle rather than a parallel implementation; outward-normal
         orientation and NaN-freedom verified headlessly (Node + three.js) before wiring in. While
         building this, found and fixed two related correctness gaps that would have silently used
         the wrong formula for Pipe specifically: the point-labels overlay and the loft-profiles
         JSON exporter both called computeLayerPoint directly rather than whichever formula actually
         built what's on screen. Introduced a single per-rebuild layerPointFn (stored on lastBuild
         as evalPoint) that both now use instead, which also incidentally fixes a latent FFD case
         (point labels at y=0 previously used the raw undeformed profile coordinate rather than the
         actual — possibly user-dragged — bottom control-point position). Updated the Reference
         panel, Help/HUD text, README.md, and EXTENDED.md's Known Limitations and Helix math section
         to describe Pipe instead of flagging it as unbuilt; historical changelog entries describing
         it as unimplemented (v1.7.0 onward) are left as accurate record of the time.
v1.14.3 - 2026-07-18 - Fixed the actual source of the surface striping v1.14.2's ring nudge didn't
         fully address (user confirmed it was still visible with the Slice rings overlay off): flat
         shading itself produces a Mach-band effect on a curved surface built from many thin flat
         facets — a real optical illusion at any facet count, not fixed by resolution. Rebuilt
         buildDeformedGeometry (twist/taper/shear/bend/ffd) to build each polygon-corner-to-corner
         panel as its own private pair of vertex columns (rather than corner vertices shared between
         neighboring panels) and assign each vertex an analytic normal computed directly from the
         deformation's own tangent vectors (width tangent = exact edge vector for these four modes,
         all of which are affine per height slice; height tangent = finite difference of
         computeLayerPoint) rather than Three.js's face-averaging computeVertexNormals(). Side
         material for these modes switched from flatShading:true to smooth shading, now safe because
         analytic normals don't depend on which diagonal a quad happens to be split along — that
         diagonal-dependence was the actual cause of the v1.12.2 herringbone bug flatShading had
         been covering for. True polygon corners stay visually sharp since adjacent panels no longer
         share vertices/normals at all. Helix (buildHelicalGeometry, still shared-vertex) is
         untouched and keeps flatShading:true. Verified headlessly (Node + three.js): normals point
         outward (dot ≥0.5–0.9+ against the known-radial direction) for a plain untwisted prism and
         a 120°-twisted case, and produce no NaNs across taper/shear/bend/ffd.
v1.14.2 - 2026-07-18 - Fixed two visual bugs. (1) Slice rings overlay was z-fighting with the mesh
         surface it's coincident with, showing as fine horizontal striping/banding across the whole
         solid, most visible at higher resolution (many closely-spaced rings). Each ring's vertices
         are now nudged outward from the ring's own centroid before drawing, a generic post-hoc
         offset (unlike floor lines' mode-aware 1.03x-profile recompute) since slice rings share the
         same code path across every mode including helix. (2) Profile point labels (a,b,c.../
         a1,b1,c1...) used a fixed 0.9x0.45 world-unit sprite size that read too small once the
         solid itself was building-scale — sizeMult now scales the label with the model's own
         height (Math.max(h*0.045, 1.4) floor), same proportional-with-a-floor pattern already used
         for the origin marker and FFD handles.
v1.14.1 - 2026-07-18 - Docs cleanup for a full upload package: removed the remaining figure/page
         citations from developer-facing code comments (HELIX_GENERATORS, computeLayerPoint) —
         v1.12.1 already fixed the user-visible Reference panel text, but these internal comments
         used the same now-untrusted citation style and were left as-is at the time. Rewrote
         README.md (dropped all figure/page citations, replaced the removed .sat export section
         with the Dynamo pipeline) and added EXTENDED.md — architecture, the math per operation in
         more depth, the full export pipeline (JSON schema + what the Dynamo script does and why),
         verification methodology, and known limitations.
v1.14.0 - 2026-07-18 - Removed the .sat (ACIS) export entirely. The Dynamo pipeline (loft-profiles
         JSON + bundled import script, v1.13.0/.1) now covers the actual need — a genuinely curved,
         single-pickable-face-per-side Revit form — properly, via Revit's own kernel, rather than
         .sat's flat-faceted approximation for every curved mode. Removed the whole exporter (~300
         lines: buildSatText, the ACIS SAT record writer, collectSideTrianglesM/collectCapTrianglesM,
         buildFlatCapPolysW/buildShearSidePolysW, polyNormalNewell, satNum/satCtimeLike, exportSAT,
         and the sidebar button/description), and updated every live reference to it (Help modal,
         loft-profiles description, lastBuild's comment, the embedded Dynamo script's own docstring)
         so nothing still points at a removed feature. Historical changelog entries about .sat
         (v1.9.0 onward) are left as accurate record of what was actually built and fixed at the
         time — not rewritten.
v1.13.1 - 2026-07-18 - Added "Download Dynamo import script (.py)" next to the loft-profiles JSON
         export — bundles the companion Dynamo Python-node script directly into the app (a static
         string constant, byte-verified identical to the actual working script) instead of leaving
         it something you only have from chat history. Same script handles both outcomes depending
         on which document is active when it's run: a genuine loadable Mass Form if a Conceptual
         Mass family document is active, or a one-off Mass-category DirectShape if a project is
         active. Also fixed the loft-profiles export description, which still said "e.g. via a
         pyRevit loft/sweep script" — corrected to Dynamo, since that's what actually got built.
v1.13.0 - 2026-07-18 - Added "Export loft profiles (.json)" (Export section) — the first piece of
         a planned pyRevit path for getting a genuinely curved, single-face-per-side form into
         Revit natively, instead of importing a faceted .sat. Exports N evenly spaced cross-section
         profiles up the height (N set by a new "loft profiles" slider, deliberately separate from
         "resolution (slices)": a native Revit loft only needs enough profiles for Revit's own
         curve fit to converge, not enough flat triangles to look smooth on screen — usually far
         fewer). Reuses lastBuild + computeLayerPoint directly, the same source of truth the render
         mesh and the .sat exporter both already use, so a pyRevit script consuming this file can't
         drift out of sync with what's on screen the way re-deriving the twist/taper/bend math in
         Python separately would risk. Same Y-up→Z-up axis remap as the .sat exporter. Verified
         against Twist (bottom profile point unrotated, top point correctly rotated by α_max — the
         actual rotation math checked by hand, not just record counts) and Helix's open generator
         (closed:false in the payload, so a consuming script builds an open profile per level
         instead of a closed loop). The pyRevit script itself — the piece that actually reads this
         JSON and builds a native Revit loft/sweep — is the next step, not done yet.
v1.12.2 - 2026-07-18 - Fixed a "pinched"/herringbone shading artifact visible on Bend/Taper (and
         likely any curved mode) at higher resolutions — user spotted diagonal chevron-like light
         patterns across the side faces that didn't correspond to any real edge. Root cause: the
         side material used default smooth (Gouraud) shading, which averages vertex normals across
         each quad's diagonal crease — and since v1.2.0 picks whichever diagonal is shorter
         independently per quad (to minimize that crease), neighboring quads can end up split in
         opposite directions, so smooth shading blends together inconsistently-oriented triangles
         and produces a false light pattern with no matching geometry. Switched both the side and
         cap materials to flatShading:true, so each triangle renders with its own true face normal
         instead — also the more geometrically honest choice, since the surface actually is
         faceted; raising the resolution slider (not normal-blending) is what should make it look
         smoother.
v1.12.1 - 2026-07-18 - Rewrote all six Reference panels (and two leftover HUD strings for Helix)
         to drop every figure/page citation ("Fig. 13.3-13.6", "p.456", etc.) — user reported the
         numbers don't correspond to anything real. Each panel now explains the operation
         self-contained, grounded directly in the formula already shown in the header badge, rather
         than pointing to an external page nobody can check. Also fixed the static HTML placeholder
         under #referenceText (the pre-JS fallback shown for an instant before applyModeChrome()
         runs) which still had the old citation-laden Twist text.
v1.12.0 - 2026-07-18 - Two cleanup items. (1) Added a "?" help modal (header button) covering the
         app's own controls — operations, editing values, Free's viewport handles, overlays, view
         navigation, units, export — kept deliberately separate from the sidebar's Reference panel,
         which cites the book figures the math is drawn from rather than explaining the UI. (2)
         Fixed the camera needing a manual zoom-out on every load: the boot-time framing ran before
         solidGroup had any geometry in it, so it fell back to a height-only heuristic that ignored
         footprint width/depth entirely — a wide/deep sample (or a large-radius Helix) would load
         mostly outside the frustum. frameCameraDefault() now computes an actual Three.js Box3 fit
         (circumscribed-sphere radius against both horizontal and vertical FOV, 15% padding) and
         runs once real geometry exists — hooked into the end of rebuild(), guarded to fire only on
         the very first build so mid-session zoom/orbit is still left alone (the v1.7.1 decision).
         The Home button already called the same function, so it inherits the fix for free. Sanity-
         checked the fit formula against a wide/short case (20×3×20), a tall/narrow one (5×30×5),
         and the old default-ish twist tower (2×28×2) — the last one's new fit distance (~38m) vs.
         the old heuristic's actual camera-to-target distance (~15m) is a direct measure of how
         under-framed the old default was.
v1.11.0 - 2026-07-18 - .sat export: caps and Shear's side walls now export as single flat ACIS
         faces instead of many small triangles, so picking one in Revit/AutoCAD selects the whole
         plane. Caps are geometrically flat for every mode except Free/FFD (twist/bend rotate or
         reposition a whole slice together, taper scales a whole slice by one shared factor, shear
         translates a whole slice together — all affine-per-slice) — rebuilt directly from
         computeLayerPoint at y=0/h as one N-sided face (concave star preset included), rather than
         reading back the earcut-triangulated render mesh. Shear's side walls are flat for a
         different, exact reason: shear is a single global affine transform of the whole solid, and
         affine maps take planes to planes, so each side stays flat at any resolution — one quad
         per profile edge instead of 2×segments triangles. Twist/Taper/Bend/Free's side walls (and
         Helix) stay faceted — those are genuinely curved surfaces; collapsing them into one face
         each would need real curved ACIS surfaces (spline/ruled spl_sur), which this project has
         no verified worked-example syntax for and isn't attempting blind, given how many real
         correctness bugs turned up even in the simple flat-facet writer (v1.10.1/.2/.3). Verified
         headlessly against Shear (4 flat side quads + 2 flat caps, 0 open edges), Twist (48
         triangulated side faces + 2 flat 4-sided caps — including a canary test confirming stray
         triangulated cap data in the render mesh is correctly ignored in favor of the analytic
         reconstruction), and FFD (correctly falls back to the old triangulated-cap path, since
         FFD's caps aren't guaranteed planar). Not yet tested in Revit/AutoCAD themselves.
v1.10.3 - 2026-07-18 - .sat now imports correctly in both AutoCAD Architecture 2026 and Revit
         2026.1 (confirmed by user) — v1.10.2's version-consistency fix was the real blocker. Only
         remaining issue: the solid came in lying on its side. SPIRA's whole pipeline (Three.js)
         treats Y as vertical; ACIS/AutoCAD/Revit treat Z as vertical. Fixed by remapping
         (x,y,z)->(x,-z,y) at the single point geometry enters the exporter (the weld() step), a
         pure rotation so every downstream calculation (plane-surface normals, edge directions,
         triangle winding) stays correct with no other changes needed. Verified with a tall test
         box: height now lands on Z as expected.
v1.10.2 - 2026-07-18 - Fixed .sat still not importing (Revit 2026 and AutoCAD Architecture 2026,
         both silently, no error either time — reported after v1.10.1). Root cause: the header
         declared ACIS version 700 while every token actually written follows pre-700 convention
         (plain length-prefixed header strings rather than @-delimited ones; numeric 0/1 coedge
         sense rather than "forward"/"reversed" strings) — version 700 is specifically where ACIS
         switches both of those conventions. A version-aware reader picks its parsing grammar from
         that header number before reading anything else, so declaring 700 while writing the older
         grammar makes the whole file unrecognized, with no partial import and no error — matching
         what was reported. Now declares 400, the one version every record layout has actually been
         checked token-for-token against a real, fully-quoted worked example for, instead of 700,
         which nothing here was ever verified against. Re-verified structurally; still not tested
         against a live ACIS kernel, Revit, or AutoCAD directly from this environment.
v1.10.1 - 2026-07-18 - Fixed the v1.10.0 .sat export failing to import in Revit 2016. Two record
         fields had been left as null ($-1) where two independently-sourced, directly-quoted real
         ACIS SAT examples both show an actual populated pointer: EDGE's back-reference to one of
         its coedges, and VERTEX's back-reference to one of its edges — both now point to a real
         record. Also dropped a speculative trailing "convexity" token on EDGE that isn't present
         in the one directly-observed EDGE record I have (Spatial's own ACIS 4.0 doc example is
         exactly 6 tokens, no 7th field); the earlier version added that token by inference from a
         field list, not from a record actually seen in the wild. A single malformed/under-linked
         entity is a plausible reason a strict reader imports nothing rather than partially
         importing. Re-verified structurally (pointer resolution, coedge partner symmetry, backref
         type-correctness) against both a closed-cube and an open-strip mesh; still not tested
         against a live ACIS kernel or Revit itself.
v1.10.0 - 2026-07-18 - Added "Export as .sat" (ACIS solid, sidebar Export section) — exports the
         current mode's mesh as a faceted ACIS body: every on-screen triangle becomes one exact
         planar ACIS face (no curve-fitting, since buildDeformedGeometry/buildHelicalGeometry
         already only ever emit triangles). Weld-dedupes shared vertices, builds edge/coedge
         partner links from triangle adjacency so closed modes (twist/taper/shear/bend/free) export
         as a proper solid BODY and Helix's open ribbon/tube exports as an open sheet body (free
         edges get a null partner coedge instead of a matching one). Coordinates convert meters →
         millimeters on export. Targets ACIS SAT version 700, chosen to match the field layout
         documented against real BricsCAD-exported files (mozman/ezdxf project) cross-checked with
         Spatial's own SAT-format chapter for the header/BODY/LUMP/SHELL/FACE/LOOP records — not
         verified against a live ACIS kernel, since none is available in this environment, so a
         freshly exported file's first import into Rhino/AutoCAD/BricsCAD is the actual test.
v1.9.0 - 2026-07-18 - Three requests. (1) A "Reset values" button on every operation's params block
         (twist/taper/shear/bend/helix; FFD's existing "Reset control points" folded into the same
         system), restoring that mode's own parameters — and, for the five height-based modes, floors/
         floor-height too — to their original first-load defaults, not just whatever they were a
         moment ago. One generic resetModeValues() driven by a MODE_DEFAULTS config, rather than six
         near-identical click handlers; reuses the existing unit-aware sync*SliderRange() functions so
         a reset in imperial mode still lands slider thumbs correctly. (2) Basic view navigation: Top
         (plan view, straight down — camera.up swapped to a horizontal axis plus a sub-millimeter
         position epsilon to dodge OrbitControls' known vertical-look singularity), Front (elevation,
         horizontal), and Home (the existing height-scaled default framing, now factored into a named
         frameCameraDefault() so the button can re-run it, not just boot code). Also added a small
         always-visible marker + "0,0,0" label at the true world origin, tied to the Axis toggle but
         shown even in FFD mode (which otherwise has no axis line of its own) as a fixed reference
         point regardless of view or mode. (3) Fixed inward-facing surface normals — found by writing
         a headless Node+three.js diagnostic (validated first against a known-correct THREE.BoxGeometry
         to rule out a bug in the diagnostic itself, then run against the app's actual builder
         functions) that checked every triangle's computed normal against a true outward-direction
         reference: 0% of triangles were outward-facing, across every mode, preset, and cap — a
         systematic winding-order bug, not a per-triangle mix, so the fix was a consistent reversal in
         buildDeformedGeometry's side surface and cap triangulation. Re-ran the same diagnostic against
         buildHelicalGeometry and found its side surface needed the OPPOSITE fix from the footprint
         builder (kept at the original winding) — its generator point lives in a local (radial,
         height-offset) frame embedded into world space by rotation, which has the opposite handedness
         from a footprint profile's direct (x,z) placement, even though the two builders share the same
         quad-strip index topology; the disk caps did need the same reversal as the footprint caps.
         Verified 100% outward on every mode/preset/cap combination, including the helix tube's side
         and both its end caps, before shipping.
v1.8.0 - 2026-07-18 - Two requests: cross-section dimensions were fixed (each preset's arbitrary
         hardcoded "unit" proportions) with no way to size a footprint in real dimensions, and every
         numeric parameter was slider-only with no way to type an exact value. (1) Added Width (x) /
         Depth (z) sliders to the Cross-section section, in real meters/feet, independent per axis.
         PROFILES still generates each preset at its own natural proportions (the star's bounding box
         isn't the square's), so a new scaledProfile() computes the raw shape's bounding box and
         scales it — independently in x and z — to match these dimensions exactly; used by both
         rebuild() and the FFD drag handler (which needs the identical scaled box to compute correct
         default corner positions, or dragging would reference stale geometry). Defaults (2.0×2.0m)
         reproduce the original hardcoded square exactly (scale factors of 1), and switching presets
         now keeps a consistent real-world footprint size instead of jumping to whatever proportions
         each preset happened to be coded with. (2) Every slider's value readout is now also a direct-
         entry field: click it, type a number, Enter/blur commits, Escape cancels — one generic
         bindEditableValue() driven by a declarative per-field config rather than duplicating parse/
         commit logic 17 times. Length fields (shear offsets, floor height, all Helix dimensions, the
         new footprint width/depth) accept feet-inches notation in imperial mode — 8'-6", 8' 6", 8ft
         6in — via a new parseLengthInput(), since that's how architects actually write dimensions;
         the edit box pre-fills with feet-inches (via formatFeetInches()) rather than decimal feet so
         there's something sensible to already be looking at. Angle and ratio fields take plain
         decimals; count fields (floors, turns, resolution) round to the nearest integer. Every typed
         value is clamped to that field's current slider min/max (read live, since several sliders'
         ranges themselves change with the metric/imperial toggle) before being committed, and commit
         moves the slider thumb to match so typing and dragging can never fall out of sync with each
         other.
v1.7.1 - 2026-07-18 - Two fixes reported after v1.7.0 shipped. (1) Floor/turn lines were nearly
         invisible: dark ink at 0.4 opacity, sitting exactly on the mesh surface it's drawn from —
         low contrast against the blue-gray material plus z-fighting with coincident geometry. Now
         paper-white at 0.95 opacity (every other overlay's accent color — brick, ochre, prussian —
         was already spoken for, so a light line pops by brightness instead of competing on hue), and
         nudged 3% outward from the actual profile before evaluating computeLayerPoint so it clears
         the surface instead of fighting it. (2) Initial camera position was a fixed (9,8,11), tuned
         to look right only at the original 8-floor/3.5m default — any taller loaded state (more
         floors, a persisted session, or a multi-turn Helix) put the camera inside or right up against
         the model on open. Camera framing now scales to totalHeightM() at boot (same direction ratio
         as the old constant, distance = height × 0.58, floored at 6 so short/squat shapes don't put
         the camera too close), computed after the localStorage state merge so a persisted tall model
         frames correctly on load. Scoped to boot only — mid-session parameter changes (floors slider,
         mode switches, etc.) don't touch the camera, so manual orbit/zoom during use is undisturbed.
v1.7.0 - 2026-07-18 - Added Helix as a sixth operation (Fig. 9.53-9.60, ch.9 "Helical Surfaces" —
         a different chapter from the other five, which are all ch.13 solid deformations). This is a
         genuinely different construction, not a variant of the shared deformation engine: rather than
         extruding a cross-section along the axis and deforming each slice, a generator/meridian curve
         (radial, height-offset) is swept by true helical motion — rotation by u about axis A combined
         with translation p·u along it — per the book's x(u,v)=X(v)cosu, y(u,v)=X(v)sinu, z(u,v)=z(v)+pu
         (axis renamed to match this app's vertical y, so the meridian curve's own two coordinates are
         radial X(v) and height-offset Y(v)). Two generator types, both using the book's simplified
         meridian formula directly (no Frenet frame needed since each generator already lies flat in the
         meridian plane at u=0): "Line" is the common/right helicoid (Fig. 9.56-9.57) — a straight
         segment orthogonal to the axis, producing the classic open spiral ramp/staircase surface, with
         adjustable inner radius (central void) and outer radius; "Circle" is a circle lying in the
         meridian plane (Fig. 9.55, middle) — a winding tube/screw-column, capped with fan-triangulated
         disks at both open ends. Deliberately did NOT implement the book's third variant (Fig. 9.55,
         bottom) — a circle held orthogonal to the helix's own tangent, the "true" constant-radius pipe
         — since that needs a moving Frenet frame along the 3D helix rather than the flat-meridian
         formula; noted as a known omission in the in-app reference text rather than silently skipped.
         Height here is turns × pitch (rise per full revolution) instead of floors × floor-height, so
         the floors/floor-height controls are swapped for a Turns/Pitch block specific to this mode, and
         "Floor lines" is reused as "Turn lines" (a ring — or for Line, a radial spoke — at each full
         revolution) rather than adding a parallel overlay. A helicoid isn't a solid — the common
         helicoid literally has a hole around the axis and zero thickness — so there's no volume to
         report; the HUD's volume rows are repurposed to surface area (measured via triangle-area
         summation over the built mesh, since no closed form exists here either) and generator length,
         with the Cavalieri-style match row repurposed to name which book figure/surface is showing.
         Ruling lines, slice rings, the fixed axis A overlay, and point labels all fall out of the
         existing generic code paths for free (they only depend on the returned layer-positions/segs/n
         shape, not on which mode built them) — only the floor→turn-lines ring code and point-label
         bottom-anchor position needed small mode branches.
v1.6.0 - 2026-07-17 - Added Free (freeform deformation) as a fifth operation (Fig. 13.17-13.20),
         the odd one out architecturally: no axis, no base plane — the whole solid sits in a
         bounding cuboid with 8 corner control points, and every point is a trilinear (1,1,1)
         Bézier blend of all 8. Implemented with actual draggable 3D handles rather than sliders:
         pointerdown raycasts against 8 brick sphere meshes, then drag intersects a camera-facing
         plane through the grabbed handle (the standard screen-space-drag technique) and rebuilds
         live on every pointermove. Control points are stored as offsets from their default corner
         position rather than absolute coordinates, so they track sensibly when the preset or
         height changes instead of going stale. FFD has no closed-form volume (an arbitrary warp
         can do anything to it), so its volume readout comes from a new computeMeshVolume() —
         numeric integration via the divergence theorem over the actual built triangles — the first
         mode where the HUD number is measured rather than derived. Verified in a from-scratch
         harness: control points at their defaults reproduce the straight prism's volume to
         floating-point precision (the trilinear-interpolation-of-a-box's-own-corners identity),
         and a dragged corner visibly changes it, across all four presets.
v1.5.0 - 2026-07-17 - Added Bend as a fourth operation (Fig. 13.15-13.16, radial bending): the axis
         A maps to a circular arc A1 of radius R = h/β, chosen so the arc length exactly equals the
         original axis length h (the book's "typical" equal-length convention), and each slice is
         rearranged into the plane normal to that arc with local x passed straight through per
         Fig. 13.15. This required a real architecture change: bend is the first operation where the
         height coordinate itself moves (a tower bent 180° ends up beside its own base, not above
         it), so computeLayerPoint() now returns a full [x,y,z] instead of [x,z] with y assumed
         unchanged — twist/taper/shear were updated to just pass y through in the new signature.
         The axis overlay's "moved axis" renderer (built for shear) now generalizes to draw bend's
         curved A1 by sampling computeLayerPoint at the on-axis point, reusing the same dashed-A/
         solid-A1 treatment. Verified the isometry claim (fixed-height slices only rotate+translate,
         never scale, so volume is preserved like twist) both analytically and against a from-scratch
         mesh-volume integration across all four presets and six bend angles before shipping.
v1.4.0 - 2026-07-17 - Added Shear as a third operation (Fig. 13.11-13.14), the odd one out: every
         other operation here fixes the axis A, but shear moves it — each slice is translated
         within its own plane, linear from (0,0) at the base to (Δx,Δy) at the top, so the axis's
         image A1 is a straight line leaning away from A. The axis overlay now branches by mode:
         twist/taper draw the single fixed axis as before, shear draws both the original A (dashed)
         and A1 (solid, brick) to make the "the axis itself moves" distinction visible, not just
         asserted in the reference text. Shear is volume-preserving like twist (translation is an
         exact isometry, same as rotation) — verified this one to floating-point precision rather
         than the ~0.3% triangulation tolerance taper needed, since a per-slice translation applied
         to an already-planar prism wall keeps it exactly planar (an affine map of a plane is a
         plane), so there's no discretization error to tolerate in the first place.
v1.3.0 - 2026-07-17 - Added Tapering as a second operation (Fig. 13.7-13.9), selectable via a new
         Operation switcher at the top of the sidebar. Refactored the twist-only geometry builder
         into a generic buildDeformedGeometry() driven by a per-mode layer-point transform
         (computeLayerPoint), so both operations share the ruled-surface construction, adaptive
         diagonal triangulation, cross-section presets, floors/units, and all overlays. Taper scales
         each slice independently in x (v(z)) and y (w(z)), linear from 1 at the base to user-set v,
         w at the top; unlike twisting this does not preserve volume, so the HUD's volume-match
         message now reports the actual percentage instead of always claiming equality. Volume
         formula is closed-form (verified against numerical integration, not just asserted).
v1.2.0 - 2026-07-17 - Real-world height + units, and a fix for the faint diagonal shading on the
         twisted surface. Root cause of the shading: a twisted quad isn't planar, so splitting it
         into two triangles always leaves a real (if subtle) crease along whichever diagonal is
         chosen — now picks the shorter diagonal per quad, which minimizes it. Replaced the
         abstract "height" slider with floors × floor-to-floor height (in real units) plus a
         Metric/Imperial toggle that converts all HUD numbers (length, area, volume); added a
         "floor lines" overlay showing actual story lines, independent of the computational
         "slice rings" resolution overlay from v1.1.0.
v1.1.0 - 2026-07-17 - Added a "slice rings" overlay: a thin ring drawn at every layer boundary,
         so the resolution slider's effect is visible directly in the viewport instead of only
         as a number in the sidebar. On by default alongside the existing ruling lines.
v1.0.1 - 2026-07-17 - Fix: blank canvas on load. Three.js dropped the classic (non-module)
         examples/js/controls addon somewhere around r150+ in favor of ES-module-only addons;
         at r160 `THREE.OrbitControls` was undefined, so `new THREE.OrbitControls(...)` threw
         and aborted the whole boot script before any WebGL draw call — sliders and HUD
         labels rendered from static HTML, but rebuild() never ran once. Pinned both the core
         library and the OrbitControls addon to r128 (matching the version used elsewhere in
         the tool suite), which still ships the classic script-tag-loadable addon.
v1.0.0 - 2026-07-17 - Initial build. Twist operation on four cross-section presets (square, triangle, hexagon, star),
         live α_max / height / resolution controls, ruling-line + axis/base-plane overlays, and a live
         Cavalieri volume readout showing the twisted and untwisted volumes matching exactly (the whole
         point of the operation). Side surface built as a hand-rolled ruled BufferGeometry (per-slice
         rotation of the profile about the vertical axis A), caps triangulated with THREE.ShapeUtils so
         non-convex profiles (the star) still close correctly.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="description" content="Interactive explorer of architectural deformation operations — twisting, tapering, shearing, bending, freeform (FFD), and helical sweeps — with a live solid and volume/area readout.">
<meta name="theme-color" content="#f4f1ea" id="themeColorMeta">
<title>SPIRA — Deformation Geometry Explorer</title>
<!-- v1.45.0: Inter/Space Grotesk/Space Mono were referenced throughout the CSS below but never
     actually loaded — every declaration was silently falling back to system fonts. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f4f1ea'/%3E%3Cpolygon points='50,8 92,50 50,92 8,50' fill='none' stroke='%231f4e79' stroke-width='5'/%3E%3Cpolygon points='50,26 74,50 50,74 26,50' fill='%23b23a2e'/%3E%3C/svg%3E">
<style>
  :root{
    --cream:#f4f1ea;
    --ink:#1a1a18;
    --paper:#fbfaf6;
    --paper-rgb:251,250,246;
    --line:#d8d3c4;
    --brick:#b23a2e;
    --prussian:#1f4e79;
    --ochre:#c8932a;
    --muted:#7a7568;
  }
  /* v1.45.0: "Blueprint" dark theme — literal architectural blueprint convention (pale linework on
     deep blue paper) rather than a generic inverted dark mode, since that's the theme this tool is
     already drawing on. --prussian and --brick both get lightened here, not just --cream/--ink
     inverted: the original prussian blue and brick red were tuned for contrast against a pale cream
     background, and would read as near-invisible against a background that's itself a deep blue. */
  [data-theme="dark"]{
    --cream:#0b3350;
    --ink:#eaf3fa;
    --paper:#0e3d5e;
    --paper-rgb:14,61,94;
    --line:#2f5878;
    --brick:#ff6b57;
    --prussian:#7fd1ff;
    --ochre:#f2b544;
    --muted:#9fb8cc;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; height:100%; overscroll-behavior-y:contain;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter', -apple-system, system-ui, sans-serif;
    display:flex; flex-direction:column;
    height:100vh; height:100dvh;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  h1,h2,h3, .display{
    font-family:'Space Grotesk','Inter',sans-serif;
    font-weight:600; letter-spacing:-0.01em; margin:0;
  }
  .mono{font-family:'Space Mono', monospace;}
  /* v1.45.0: --ochre was defined but never used anywhere — reserved here for exactly one
     recurring, semantically distinct role: "this figure is an illustrative estimate, not a sourced
     one," as already described in prose throughout the case-study code and changelog. Kept separate
     from --brick (errors/active state) and --prussian (primary data/formula), so ochre now means
     one specific thing consistently, not a third arbitrary decoration. */
  .caveat{
    color:var(--ochre); border-left:2px solid var(--ochre); padding-left:8px;
  }
  /* v1.46.0: collapsed-by-default explanatory text for Advanced-section buttons — was static
     always-on prose (4 paragraphs in Export alone), the single biggest source of the "clunky"
     complaint that prompted Simple/Advanced in v1.44.0 in the first place, since Advanced mode
     re-exposed all of it at once. Native <details>/<summary> rather than a hand-rolled toggle: free
     keyboard/screen-reader support, no JS state to manage, and one shared class keeps every instance
     visually identical (the same consistency principle v1.44.0 already established for Simple vs
     Advanced itself). */
  details.info-toggle{ margin-top:6px; margin-bottom:8px; }
  details.info-toggle summary{
    font-size:0.72rem; color:var(--muted); cursor:pointer; list-style:none;
    display:flex; align-items:center; gap:4px; user-select:none;
  }
  details.info-toggle summary::-webkit-details-marker{ display:none; }
  details.info-toggle summary::before{
    content:'›'; display:inline-block; font-size:0.9rem; line-height:1;
    transition:transform 0.15s; transform:rotate(0deg);
  }
  details.info-toggle[open] summary::before{ transform:rotate(90deg); }
  details.info-toggle .info-body{
    font-size:0.72rem; line-height:1.5; color:var(--muted); margin:6px 0 0; padding-left:14px;
  }

  header{
    display:flex; align-items:baseline; gap:14px;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    background:var(--paper);
    flex-shrink:0;
  }
  header h1{font-size:1.15rem; letter-spacing:0.02em;}
  header .tag{color:var(--muted); font-size:0.78rem;}
  header .axis-badge{
    margin-left:auto; font-size:0.7rem; color:var(--prussian);
    border:1px solid var(--prussian); padding:2px 8px;
  }

  main{
    flex:1; display:flex; min-height:0;
    flex-direction:row;
  }
  #viewport{flex:1; position:relative; min-width:0;}
  #canvasHost{position:absolute; inset:0;}
  #canvasHost canvas{display:block; width:100%; height:100%; touch-action:none;}

  #hud{
    position:absolute; left:14px; top:14px;
    background:rgba(var(--paper-rgb),0.92);
    border:1px solid var(--line);
    padding:10px 14px;
    font-size:0.78rem; line-height:1.55;
    max-width:280px;
    pointer-events:none;
  }
  #hud .formula{color:var(--prussian); font-size:0.85rem;}
  #hud .row{display:flex; justify-content:space-between; gap:12px;}
  #hud .label{color:var(--muted);}
  #hud .vol-match{color:var(--brick); font-weight:600;}

  #viewControls{
    position:absolute; right:14px; bottom:14px;
    display:flex; gap:6px;
  }
  #viewControls button{
    background:rgba(var(--paper-rgb),0.92);
    border:1px solid var(--line);
    color:var(--ink);
    font-family:inherit; font-size:0.72rem;
    padding:7px 12px;
    cursor:pointer;
  }
  #viewControls button:hover{border-color:var(--prussian); color:var(--prussian);}
  #viewControls button:active{background:var(--prussian); color:var(--paper); border-color:var(--prussian);}

  #warpLegend{
    position:absolute; left:14px; bottom:14px;
    background:rgba(var(--paper-rgb),0.92);
    border:1px solid var(--line);
    padding:9px 12px;
    font-size:0.72rem; line-height:1.4;
    pointer-events:none;
    display:none;
  }
  #warpLegend.show{display:block;}
  #warpLegend .warpLegendTitle{color:var(--muted); margin-bottom:5px;}
  #warpLegend .warpLegendBar{
    width:150px; height:8px; position:relative;
    background:linear-gradient(to right, #2f9e44 0%, #f2c14e 50%, #c0392b 100%);
    border:1px solid var(--line);
  }
  #warpLegend .warpLegendBar.colorblind{
    background:linear-gradient(to right, #440154 0%, #21908c 50%, #fde725 100%);
  }
  #warpLegend .warpLegendMarker{
    position:absolute; top:-3px; bottom:-3px; width:2px;
    background:var(--ink); transform:translateX(-50%);
  }
  #warpLegend .warpLegendActual{
    margin-top:4px; font-family:'Space Mono', monospace; font-size:0.68rem; color:var(--ink);
  }
  #warpLegend .warpLegendTicks{
    display:flex; justify-content:space-between;
    width:150px; margin-top:3px; font-family:'Space Mono', monospace; font-size:0.68rem;
  }

  #sidebarResizeHandle{
    width:6px; flex-shrink:0; cursor:col-resize; background:transparent;
    position:relative; touch-action:none;
  }
  #sidebarResizeHandle::after{
    content:''; position:absolute; top:0; bottom:0; left:2px; width:2px;
    background:var(--line);
  }
  #sidebarResizeHandle:hover::after, #sidebarResizeHandle.dragging::after{
    background:var(--prussian);
  }

  aside{
    width:var(--sidebar-width, 300px); flex-shrink:0;
    background:var(--paper);
    border-left:1px solid var(--line);
    overflow-y:auto;
    padding:16px 16px 40px;
  }
  section.group{margin-bottom:22px;}
  section.group h3{
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--muted); margin-bottom:10px; font-weight:600;
  }

  .presets{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .preset-btn{
    border:1px solid var(--line); background:var(--cream);
    padding:9px 6px; font-size:0.78rem; cursor:pointer;
    font-family:inherit; color:var(--ink);
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .preset-btn.active{border-color:var(--brick); background:var(--paper); color:var(--brick);}
  .preset-btn:hover{border-color:var(--ink);}

  .slider-row{margin-bottom:14px;}
  .slider-row .top{display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:5px;}
  .slider-row .top .val{
    font-family:'Space Mono',monospace; color:var(--prussian);
    cursor:text; border-bottom:1px dashed transparent; padding:0 1px;
  }
  .slider-row .top .val:hover{border-bottom-color:var(--prussian);}
  .val-edit-input{
    font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--prussian);
    background:var(--cream); border:1px solid var(--prussian); outline:none;
    width:6.5em; text-align:right; padding:0 2px;
  }
  input[type=range]{
    width:100%; -webkit-appearance:none; appearance:none;
    height:2px; background:var(--line); outline:none; margin:8px 0;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:14px; height:14px; border-radius:0;
    background:var(--brick); cursor:pointer; border:none;
  }
  input[type=range]::-moz-range-thumb{
    width:14px; height:14px; border-radius:0;
    background:var(--brick); cursor:pointer; border:none;
  }

  .toggle-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 0; font-size:0.82rem; border-bottom:1px solid var(--line);
  }
  .toggle-row:last-child{border-bottom:none;}
  .toggle-row.disabled{opacity:0.4; pointer-events:none;}
  .switch, .switch-standalone{
    width:34px; height:18px; background:var(--line); position:relative;
    cursor:pointer; flex-shrink:0;
  }
  .switch::after, .switch-standalone::after{
    content:''; position:absolute; width:14px; height:14px; top:2px; left:2px;
    background:var(--paper); transition:left 0.12s;
  }
  .switch.on, .switch-standalone.on{background:var(--prussian);}
  .switch.on::after, .switch-standalone.on::after{left:18px; background:var(--paper);}

  select{
    width:100%; font-family:inherit; color:var(--ink); background:var(--cream);
    border:1px solid var(--line); padding:8px; font-size:0.8rem;
  }

  .toast{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:var(--cream); padding:9px 18px;
    font-size:0.8rem; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s;
    z-index:50; white-space:nowrap;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* Confirm modal — not currently triggered by any action in this tool (nothing here is
     destructive), but defined per the house convention so it's ready the moment something
     needs it, and so audit_deploy.js's invariant check passes honestly rather than by luck. */
  .confirm-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    display:flex; align-items:center; justify-content:center;
    padding:20px; z-index:60;
  }
  .confirm-box{
    background:var(--paper); border:1px solid var(--line);
    padding:22px; max-width:360px; width:100%;
  }
  .confirm-box p{ font-size:0.85rem; color:var(--ink); margin:0 0 20px; line-height:1.5; }
  .confirm-actions{display:flex; gap:10px; justify-content:flex-end;}
  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:0.78rem;
    padding:9px 16px; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
    cursor:pointer;
  }
  .btn.secondary{background:transparent; color:var(--ink);}
  .btn.secondary.active{border-color:var(--brick); color:var(--brick);}

  header #helpBtn{
    padding:3px 11px; font-size:0.78rem; line-height:1.4;
  }

  /* v1.52.0: glossary tooltips — a dotted underline on any term the Reference panel or an Exercise
     prompt uses, click to show its definition in a small popover near the term. Click-based (not
     hover-only) so it works the same on touch devices, which a purely CSS :hover popover wouldn't. */
  .term{ border-bottom:1px dotted var(--prussian); cursor:help; pointer-events:auto; }
  [data-theme="dark"] .term{ border-bottom-color:var(--ochre); }
  #termPopover{
    position:fixed; z-index:80; max-width:280px; background:var(--paper); color:var(--ink);
    border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,0.25);
    padding:10px 12px; font-size:0.76rem; line-height:1.5; display:none;
  }
  #termPopover .termName{ font-weight:600; color:var(--prussian); display:block; margin-bottom:4px; }

  /* v1.52.0: Exercises — a self-checking challenge list, graded against the exact same cached
     values (lastMaxWarpM/lastVolDeformed/lastVolPrism) the HUD itself displays, never a second,
     independently-derived computation. */
  #exercisesSection .presets{ grid-template-columns:1fr; gap:6px; }
  #exercisesSection .preset-btn{ text-align:left; padding:8px 10px; }
  #exercisePrompt{ font-size:0.78rem; line-height:1.55; color:var(--ink); margin:10px 0; }
  #exerciseResult{ font-size:0.78rem; line-height:1.5; margin-top:8px; padding:8px 10px; display:none; }
  #exerciseResult.pass{ display:block; background:rgba(60,140,60,0.15); color:#2f6e2f; }
  [data-theme="dark"] #exerciseResult.pass{ color:#7fd88f; }
  #exerciseResult.fail{ display:block; background:rgba(178,58,46,0.1); color:var(--brick); }

  /* v1.52.0: guided tour — a spotlight cut-out (box-shadow trick: a transparent box with an enormous
     shadow, so everything OUTSIDE it darkens while the box itself stays fully visible/interactive)
     plus a callout box positioned next to it. Recomputed on window resize; closes the tour instead
     of trying to re-track a moving target, since a resize mid-tour is rare and re-deriving every
     step's position on the fly isn't worth the complexity it'd add. */
  #tourSpotlight{
    position:fixed; z-index:75; border-radius:4px; pointer-events:none;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.55); transition:all 0.25s ease; display:none;
  }
  #tourCallout{
    position:fixed; z-index:76; max-width:300px; background:var(--paper); color:var(--ink);
    border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,0.35);
    padding:14px 16px; font-size:0.8rem; line-height:1.55; display:none;
  }
  #tourCallout h4{ font-size:0.78rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--prussian); margin:0 0 6px; }
  #tourCallout .tourFoot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
  #tourCallout .tourStepCount{ font-size:0.68rem; color:var(--muted); }
  #tourCallout .tourBtns{ display:flex; gap:6px; }

  /* Help modal — how to use the app itself (controls, sliders, overlays, export). Deliberately
     separate from the sidebar's per-mode Reference panel, which cites the book's figures/pages the
     math comes from — this is app documentation, not theory. */
  .help-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    display:flex; align-items:center; justify-content:center;
    padding:20px; z-index:70;
  }
  .help-box{
    background:var(--paper); border:1px solid var(--line);
    max-width:640px; width:100%; max-height:82vh;
    display:flex; flex-direction:column;
  }
  .help-box-head{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:18px 22px 12px; border-bottom:1px solid var(--line); flex-shrink:0;
  }
  .help-box-head h3{font-size:1rem; letter-spacing:0.02em;}
  .help-box-body{padding:16px 22px 22px; overflow-y:auto; font-size:0.82rem; line-height:1.6; color:var(--ink);}
  .help-box-body h4{font-size:0.8rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--prussian); margin:18px 0 6px;}
  .help-box-body h4:first-child{margin-top:0;}
  .help-box-body p{margin:0 0 8px;}
  .help-box-body ul{margin:0 0 8px; padding-left:18px;}
  .help-box-body li{margin-bottom:4px;}
  .help-box-body kbd{
    font-family:'Space Mono',monospace; font-size:0.74rem; background:var(--cream);
    border:1px solid var(--line); padding:1px 5px;
  }

  footer{
    padding:6px 18px; border-top:1px solid var(--line); background:var(--paper);
    font-size:0.68rem; color:var(--muted); flex-shrink:0;
    display:flex; justify-content:space-between;
  }

  /* v1.53.1: SPIRA's sidebar + 3D-viewport interaction (dozens of sliders, precise orbit/zoom
     gestures) doesn't hold up on a phone-sized screen no matter how much the old stacked layout
     shrank things — per Joe's request, replaced that attempt with a proper "use a larger screen"
     block, the same pattern Modulor Mondrian already uses. 760px is unchanged from the old
     breakpoint's threshold: every common tablet (iPad Mini at 768px and up) already falls above
     it and gets the full desktop layout — this range was always effectively phone-only. */
  #mobileBlock{
    display:none; position:fixed; inset:0; z-index:200;
    background:var(--cream); color:var(--ink);
    flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:32px; gap:18px;
  }
  #mobileBlock svg{ width:72px; height:72px; }
  #mobileBlock .mb-sq{ fill:none; stroke-width:3; }
  #mobileBlock .mb-sq-1{ stroke:var(--brick); }
  #mobileBlock .mb-sq-2{ stroke:var(--ochre); }
  #mobileBlock .mb-sq-3{ stroke:var(--prussian); }
  #mobileBlock .mb-sq-4{ stroke:var(--brick); }
  #mobileBlock .mb-rule{ width:64px; height:1px; background:var(--line); }
  #mobileBlock h1{ font-size:1.3rem; letter-spacing:0.08em; margin:0; }
  #mobileBlock p{ max-width:320px; color:var(--muted); font-size:0.92rem; line-height:1.6; margin:0; }
  #mobileBlock .mb-foot{ color:var(--muted); font-size:0.78rem; font-family:'Space Mono', monospace; }
  #mobileBlock .mb-foot a{ color:inherit; }

  @media (max-width: 760px){
    #mobileBlock{ display:flex; }
    header, main, footer{ display:none; }
  }
</style>
</head>
<body>

<div id="mobileBlock">
  <svg viewBox="0 0 100 100">
    <rect class="mb-sq mb-sq-1" x="30" y="30" width="40" height="40" transform="rotate(0 50 50)"/>
    <rect class="mb-sq mb-sq-2" x="32" y="32" width="36" height="36" transform="rotate(15 50 50)"/>
    <rect class="mb-sq mb-sq-3" x="34" y="34" width="32" height="32" transform="rotate(30 50 50)"/>
    <rect class="mb-sq mb-sq-4" x="36" y="36" width="28" height="28" transform="rotate(45 50 50)"/>
  </svg>
  <div class="mb-rule"></div>
  <h1>SPIRA</h1>
  <p>This tool needs a tablet or desktop display for the sidebar and 3D viewport together. Please open it on a larger screen.</p>
  <div class="mb-rule"></div>
  <div class="mb-foot">Joe.K &nbsp;·&nbsp; <a href="https://axisbim.io" target="_blank" rel="noopener">axisbim.io</a></div>
</div>

<header>
  <h1>SPIRA</h1>
  <div class="tag" id="modeTagline">twist deformation, live</div>
  <div class="axis-badge mono" id="formulaBadge">α(z) = (z/h)·α<sub>max</sub></div>
  <button class="btn secondary" id="tourBtn" title="Guided tour of SPIRA">Tour</button>
  <button class="btn secondary" id="helpBtn" title="How to use SPIRA">?</button>
</header>

<main>
  <div id="viewport">
    <div id="canvasHost"></div>
    <div id="hud">
      <div class="formula mono" id="hudFormula">α(z) = (z / h) · α<sub>max</sub></div>
      <div class="row"><span class="label" id="hudParam1Label">α_max</span><span class="val mono" id="hudParam1">0°</span></div>
      <div class="row"><span class="label" id="hudParam2Label">α at h/2</span><span class="val mono" id="hudParam2">0°</span></div>
      <div class="row" id="hudCompoundRow" style="display:none;"><span class="label">then</span><span class="val mono" id="hudCompound">–</span></div>
      <div class="row"><span class="label">height (h)</span><span class="val mono" id="hudHeight">–</span></div>
      <div class="row"><span class="label" id="hudAreaLabel">base area</span><span class="val mono" id="hudArea">–</span></div>
      <div class="row"><span class="label" id="hudVolTwistLabel">deformed volume</span><span class="val mono" id="hudVolTwist">–</span></div>
      <div class="row"><span class="label" id="hudVolStraightLabel">prism volume</span><span class="val mono" id="hudVolStraight">–</span></div>
      <div class="row vol-match" id="hudMatch">volumes match — Cavalieri holds</div>
      <div class="row"><span class="label">max panel warp</span><span class="val mono" id="hudPanelWarp">–</span></div>
    </div>
    <div id="viewControls">
      <button id="viewTopBtn" title="Look straight down, plan view">Top</button>
      <button id="viewFrontBtn" title="Look horizontally, elevation view">Front</button>
      <button id="viewHomeBtn" title="Reset to the default framed view">Home</button>
    </div>
    <div id="warpLegend">
      <div class="warpLegendTitle">panel warp (off-planar)</div>
      <div class="warpLegendBar" id="warpLegendBar"><div class="warpLegendMarker" id="warpLegendMarker"></div></div>
      <div class="warpLegendTicks mono">
        <span id="warpLegendLo">0</span>
        <span id="warpLegendMid">25mm</span>
        <span id="warpLegendHi">50mm+</span>
      </div>
      <div class="warpLegendActual" id="warpLegendActual"></div>
    </div>
  </div>

  <div id="sidebarResizeHandle" title="Drag to resize"></div>

  <aside>
    <section class="group">
      <h3>View</h3>
      <div class="presets" id="uiModeGrid">
        <button class="preset-btn" data-uimode="simple">Simple</button>
        <button class="preset-btn" data-uimode="advanced">Advanced</button>
      </div>
      <div class="presets" id="themeGrid" style="margin-top:8px;">
        <button class="preset-btn" data-themechoice="light">Light</button>
        <button class="preset-btn" data-themechoice="dark">Blueprint</button>
      </div>
    </section>

    <section class="group" id="exercisesSection">
      <h3>Exercises</h3>
      <div class="presets" id="exerciseGrid"></div>
      <div id="exercisePrompt"></div>
      <button class="btn secondary" id="exerciseCheckBtn" style="width:100%;">Check my design</button>
      <div id="exerciseResult"></div>
    </section>

    <section class="group">
      <h3>Operation</h3>
      <div class="presets" id="modeGrid" style="grid-template-columns:1fr 1fr 1fr;">
        <button class="preset-btn active" data-mode="twist">Twist</button>
        <button class="preset-btn" data-mode="taper">Taper</button>
        <button class="preset-btn" data-mode="shear">Shear</button>
        <button class="preset-btn" data-mode="bend">Bend</button>
        <button class="preset-btn" data-mode="ffd">Free</button>
        <button class="preset-btn" data-mode="helix">Helix</button>
        <button class="preset-btn" data-mode="morph">Morph</button>
      </div>
    </section>

    <section class="group" id="crossSectionSection">
      <h3 id="crossSectionHeading">Cross-section (profile in plane B)</h3>
      <div class="presets" id="presetGrid"></div>
      <div class="slider-row" style="margin-top:12px;">
        <div class="top"><span>width (x)</span><span class="val" id="footprintWidthVal">2.0 m</span></div>
        <input type="range" id="footprintWidthSlider" min="0.5" max="10" step="0.1" value="2.0">
      </div>
      <div class="slider-row">
        <div class="top"><span>depth (z)</span><span class="val" id="footprintDepthVal">2.0 m</span></div>
        <input type="range" id="footprintDepthSlider" min="0.5" max="10" step="0.1" value="2.0">
      </div>
    </section>

    <section class="group" id="unitsSection">
      <h3>Units</h3>
      <div class="presets" id="unitsGrid">
        <button class="preset-btn active" data-units="metric">Metric (m)</button>
        <button class="preset-btn" data-units="imperial">Imperial (ft)</button>
      </div>
    </section>

    <section class="group" id="projectionSection">
      <h3>Projection</h3>
      <div class="presets" id="projectionGrid">
        <button class="preset-btn active" data-projection="perspective">Perspective</button>
        <button class="preset-btn" data-projection="orthographic">Orthographic</button>
      </div>
    </section>

    <section class="group" id="deformationParamsSection">
      <h3>Deformation parameters</h3>
      <button class="btn secondary" id="playPauseBtn" style="width:100%; margin-bottom:12px;">▶ Play</button>
      <div id="twistParamsBlock">
        <div class="slider-row">
          <div class="top"><span>α_max (twist of top plane T)</span><span class="val" id="alphaVal">120°</span></div>
          <input type="range" id="alphaSlider" min="-720" max="720" step="1" value="120">
        </div>
        <button class="btn secondary reset-btn" data-resetmode="twist" style="width:100%; margin-top:6px;">Reset values</button>
        <div style="font-size:0.78rem; color:var(--muted); margin:14px 0 8px;">
          Case studies (real 90°-twist buildings)
        </div>
        <div class="presets" id="twistCaseStudyGrid" style="grid-template-columns:1fr 1fr; margin-bottom:2px;">
          <button class="btn secondary" data-casestudy="turningtorso" style="font-size:0.74rem;">Turning Torso</button>
          <button class="btn secondary" data-casestudy="cayantower" style="font-size:0.74rem;">Cayan Tower</button>
        </div>
        <div style="font-size:0.68rem; line-height:1.4; margin-top:4px;" class="caveat">
          Height, floor count, and total twist are sourced figures; footprint size is an illustrative estimate.
        </div>
      </div>
      <div id="taperParamsBlock" style="display:none;">
        <div class="slider-row">
          <div class="top"><span>v (x-direction scale at top)</span><span class="val" id="taperVVal">0.50</span></div>
          <input type="range" id="taperVSlider" min="0.1" max="3" step="0.05" value="0.5">
        </div>
        <div class="slider-row">
          <div class="top"><span>w (y-direction scale at top)</span><span class="val" id="taperWVal">0.50</span></div>
          <input type="range" id="taperWSlider" min="0.1" max="3" step="0.05" value="0.5">
        </div>
        <button class="btn secondary reset-btn" data-resetmode="taper" style="width:100%; margin-top:6px;">Reset values</button>
        <div style="font-size:0.78rem; color:var(--muted); margin:14px 0 8px;">
          Case study (real tapering building)
        </div>
        <button class="btn secondary" data-casestudy="theshard" style="width:100%; font-size:0.74rem;">The Shard</button>
        <div style="font-size:0.68rem; line-height:1.4; margin-top:4px;" class="caveat">
          Height and floor count are sourced; no published base/top footprint ratio was found, so the
          taper amount and footprint size are illustrative estimates matching its famous silhouette.
        </div>
      </div>
      <div id="shearParamsBlock" style="display:none;">
        <div class="slider-row">
          <div class="top"><span>Δx (axis A₁ offset at top)</span><span class="val" id="shearDXVal">3.0 m</span></div>
          <input type="range" id="shearDXSlider" min="-8" max="8" step="0.1" value="3">
        </div>
        <div class="slider-row">
          <div class="top"><span>Δy (axis A₁ offset at top)</span><span class="val" id="shearDYVal">1.0 m</span></div>
          <input type="range" id="shearDYSlider" min="-8" max="8" step="0.1" value="1">
        </div>
        <button class="btn secondary reset-btn" data-resetmode="shear" style="width:100%; margin-top:6px;">Reset values</button>
        <div style="font-size:0.78rem; color:var(--muted); margin:14px 0 8px;">
          Case study (real leaning building)
        </div>
        <button class="btn secondary" data-casestudy="pisa" style="width:100%; font-size:0.74rem;">Leaning Tower of Pisa</button>
        <div style="font-size:0.68rem; line-height:1.4; margin-top:4px;" class="caveat">
          Height, lean angle, floor count, and base diameter are sourced — the sourced ~3.9m
          horizontal offset at the top even cross-checks against height×tan(lean) independently.
          Real-building note: later floors were built at a corrective counter-angle to fight the
          ongoing tilt, so the true lean isn't one straight line the way this linear Shear preset
          is — a simplification, not a literal match, the same treatment as The Shard's taper.
        </div>
      </div>
      <div id="bendParamsBlock" style="display:none;">
        <div class="slider-row">
          <div class="top"><span>β_max (bend angle, axis A → arc A₁)</span><span class="val" id="bendBetaVal">180°</span></div>
          <input type="range" id="bendBetaSlider" min="-360" max="360" step="1" value="180">
        </div>
        <button class="btn secondary reset-btn" data-resetmode="bend" style="width:100%; margin-top:6px;">Reset values</button>
      </div>
      <div id="ffdParamsBlock" style="display:none;">
        <div style="font-size:0.78rem; color:var(--muted); margin-bottom:10px; line-height:1.5;">
          Drag any of the 8 brick control points in the viewport — the solid follows a trilinear
          Bézier blend of all 8, live.
        </div>
        <button class="btn secondary reset-btn" data-resetmode="ffd" style="width:100%; margin-top:6px;">Reset control points</button>
      </div>
      <div id="helixParamsBlock" style="display:none;">
        <div style="font-size:0.78rem; color:var(--muted); margin-bottom:8px;">
          Generator curve (swept helically about axis A)
        </div>
        <div class="presets" id="helixGenGrid" style="grid-template-columns:1fr 1fr 1fr; margin-bottom:12px;">
          <button class="preset-btn active" data-helixgen="line">Line (ramp)</button>
          <button class="preset-btn" data-helixgen="circle">Circle (tube)</button>
          <button class="preset-btn" data-helixgen="pipe">Pipe (true)</button>
        </div>
        <div id="helixLineParams">
          <div class="slider-row">
            <div class="top"><span>inner radius (void at axis)</span><span class="val" id="helixRInnerVal">0.3 m</span></div>
            <input type="range" id="helixRInnerSlider" min="0" max="5" step="0.1" value="0.3">
          </div>
          <div class="slider-row">
            <div class="top"><span>outer radius</span><span class="val" id="helixROuterVal">2.2 m</span></div>
            <input type="range" id="helixROuterSlider" min="0.5" max="20" step="0.1" value="2.2">
          </div>
        </div>
        <div id="helixCircleParams" style="display:none;">
          <div class="slider-row">
            <div class="top"><span>tube radius</span><span class="val" id="helixTubeRVal">0.25 m</span></div>
            <input type="range" id="helixTubeRSlider" min="0.05" max="1" step="0.01" value="0.25">
          </div>
          <div class="slider-row">
            <div class="top"><span>tube offset from axis</span><span class="val" id="helixTubeOffsetVal">1.5 m</span></div>
            <input type="range" id="helixTubeOffsetSlider" min="0" max="4" step="0.1" value="1.5">
          </div>
        </div>
        <button class="btn secondary reset-btn" data-resetmode="helix" style="width:100%; margin-top:6px;">Reset values</button>
      </div>
      <div id="morphParamsBlock" style="display:none;">
        <div style="font-size:0.78rem; color:var(--muted); margin-bottom:8px;">
          Blends the Cross-section shape above (FROM, at the base) into a second shape (TO, at the
          top) linearly with height — the base's own footprint width/depth sliders above set the
          FROM size; the sliders below set the TO size independently.
        </div>
        <div style="font-size:0.72rem; color:var(--muted); margin-bottom:6px;">To shape</div>
        <div class="presets" id="morphToGrid" style="grid-template-columns:1fr 1fr 1fr; margin-bottom:12px;"></div>
        <div class="slider-row">
          <div class="top"><span>to width (x)</span><span class="val" id="morphToWidthVal">2.0 m</span></div>
          <input type="range" id="morphToWidthSlider" min="0.5" max="40" step="0.1" value="2.0">
        </div>
        <div class="slider-row">
          <div class="top"><span>to depth (z)</span><span class="val" id="morphToDepthVal">2.0 m</span></div>
          <input type="range" id="morphToDepthSlider" min="0.5" max="40" step="0.1" value="2.0">
        </div>
        <button class="btn secondary reset-btn" data-resetmode="morph" style="width:100%; margin-top:6px;">Reset values</button>
        <div style="font-size:0.78rem; color:var(--muted); margin:14px 0 8px;">
          Case study (real shape-morphing building)
        </div>
        <button class="btn secondary" data-casestudy="lottesupertower" style="width:100%; font-size:0.74rem;">Lotte Super Tower</button>
        <div style="font-size:0.68rem; line-height:1.4; margin-top:4px;" class="caveat">
          Height and floor count are sourced (SOM, unbuilt 2008 design); base/top plan dimensions
          are sourced directly from SOM's own project description.
        </div>
      </div>
      <div id="compoundSection">
        <div style="font-size:0.78rem; color:var(--muted); margin:14px 0 8px;">
          Compound — apply a second operation after this one
        </div>
        <div class="presets" id="compoundGrid" style="grid-template-columns:1fr 1fr 1fr 1fr 1fr;">
          <button class="preset-btn active" data-compound="">None</button>
          <button class="preset-btn" data-compound="twist">Twist</button>
          <button class="preset-btn" data-compound="taper">Taper</button>
          <button class="preset-btn" data-compound="shear">Shear</button>
          <button class="preset-btn" data-compound="bend">Bend</button>
        </div>
        <div id="compoundBendUnavailableNote" style="font-size:0.68rem; color:var(--muted); line-height:1.4; margin-top:6px; display:none;">
          Bend can only be the LAST step in a chain — its own output no longer describes "how far up
          the original axis" a point is, so nothing can be chained after it. Switch the primary
          Operation above to compound something before a bend.
        </div>
        <div id="compoundTwistBlock" style="display:none; margin-top:8px;">
          <div class="slider-row">
            <div class="top"><span>then α_max (twist)</span><span class="val" id="compoundAlphaVal">120°</span></div>
            <input type="range" id="compoundAlphaSlider" min="-720" max="720" step="1" value="120">
          </div>
        </div>
        <div id="compoundTaperBlock" style="display:none; margin-top:8px;">
          <div class="slider-row">
            <div class="top"><span>then v (x-scale @ top)</span><span class="val" id="compoundTaperVVal">0.50</span></div>
            <input type="range" id="compoundTaperVSlider" min="0.1" max="3" step="0.01" value="0.5">
          </div>
          <div class="slider-row">
            <div class="top"><span>then w (z-scale @ top)</span><span class="val" id="compoundTaperWVal">0.50</span></div>
            <input type="range" id="compoundTaperWSlider" min="0.1" max="3" step="0.01" value="0.5">
          </div>
        </div>
        <div id="compoundShearBlock" style="display:none; margin-top:8px;">
          <div class="slider-row">
            <div class="top"><span>then Δx (shear)</span><span class="val" id="compoundShearDXVal">3.0 m</span></div>
            <input type="range" id="compoundShearDXSlider" min="-8" max="8" step="0.1" value="3">
          </div>
          <div class="slider-row">
            <div class="top"><span>then Δy (shear)</span><span class="val" id="compoundShearDYVal">1.0 m</span></div>
            <input type="range" id="compoundShearDYSlider" min="-8" max="8" step="0.1" value="1">
          </div>
        </div>
        <div id="compoundBendBlock" style="display:none; margin-top:8px;">
          <div class="slider-row">
            <div class="top"><span>then β_max (bend)</span><span class="val" id="compoundBendBetaVal">180°</span></div>
            <input type="range" id="compoundBendBetaSlider" min="-360" max="360" step="1" value="180">
          </div>
        </div>
      </div>
      <div id="commonHeightBlock">
        <div class="slider-row">
          <div class="top"><span>floors</span><span class="val" id="floorsVal">8</span></div>
          <input type="range" id="floorsSlider" min="1" max="100" step="1" value="8">
        </div>
        <div class="slider-row">
          <div class="top"><span>floor-to-floor height</span><span class="val" id="floorHeightVal">3.5 m</span></div>
          <input type="range" id="floorHeightSlider" min="2.5" max="6" step="0.1" value="3.5">
          <div style="font-size:0.72rem; color:var(--muted); margin-top:2px;" id="totalHeightNote"></div>
        </div>
      </div>
      <div id="helixHeightBlock" style="display:none;">
        <div class="slider-row">
          <div class="top"><span>turns (revolutions)</span><span class="val" id="helixTurnsVal">3</span></div>
          <input type="range" id="helixTurnsSlider" min="1" max="10" step="1" value="3">
        </div>
        <div class="slider-row">
          <div class="top"><span>pitch (rise per turn)</span><span class="val" id="helixPitchVal">3.0 m</span></div>
          <input type="range" id="helixPitchSlider" min="0.5" max="8" step="0.1" value="3">
          <div style="font-size:0.72rem; color:var(--muted); margin-top:2px;" id="helixTotalRiseNote"></div>
        </div>
        <div style="font-size:0.78rem; color:var(--muted); margin:14px 0 8px;">
          Case study (real spiral-ramp building)
        </div>
        <button class="btn secondary" data-casestudy="guggenheim" style="width:100%; font-size:0.74rem;">Guggenheim NYC</button>
        <div style="font-size:0.68rem; line-height:1.4; margin-top:4px;" class="caveat">
          Turns and total rise are sourced; outer radius is sourced too but only as an average — the
          real ramp widens with height (100ft dia. at bottom to 128ft at top) rather than holding one
          radius. Inner (void) radius is an illustrative estimate.
        </div>
      </div>
      <div id="resolutionBlock" class="slider-row">
        <div class="top"><span>resolution (slices)</span><span class="val" id="resVal">48</span></div>
        <input type="range" id="resSlider" min="6" max="120" step="1" value="48">
      </div>
    </section>

    <section class="group" id="overlaysSection">
      <h3>Overlays</h3>
      <div class="toggle-row">
        <span>Axis A</span>
        <div class="switch on" data-toggle="axis"></div>
      </div>
      <div class="toggle-row">
        <span>Base plane B</span>
        <div class="switch on" data-toggle="plane"></div>
      </div>
      <div class="toggle-row">
        <span>Ruling lines (edge curves)</span>
        <div class="switch on" data-toggle="rulings"></div>
      </div>
      <div class="toggle-row">
        <span>Slice rings (resolution)</span>
        <div class="switch on" data-toggle="slicerings"></div>
      </div>
      <div class="toggle-row">
        <span id="floorLinesLabel">Floor lines (per floor)</span>
        <div class="switch on" data-toggle="floorlines"></div>
      </div>
      <div class="toggle-row" id="wireframeRow">
        <span>Wireframe</span>
        <div class="switch" data-toggle="wireframe"></div>
      </div>
      <div class="toggle-row">
        <span>Point labels (a, b, c → a₁, b₁, c₁)</span>
        <div class="switch" data-toggle="labels"></div>
      </div>
      <div class="toggle-row">
        <span>Surface normals (debug)</span>
        <div class="switch" data-toggle="normals"></div>
      </div>
      <div class="toggle-row">
        <span>Panel flatness (warp)</span>
        <div class="switch" data-toggle="panelwarp"></div>
      </div>
      <div class="slider-row" id="panelSubdivBlock" style="display:none; margin-top:6px;">
        <div class="top"><span>subdivide each face into</span><span class="val" id="panelSubdivVal">1 panel</span></div>
        <input type="range" id="panelSubdivSlider" min="1" max="12" step="1" value="1">
        <div style="font-size:0.72rem; color:var(--muted); margin-top:2px;" id="panelSubdivNote"></div>
      </div>
      <div class="slider-row" id="toleranceSolverBlock" style="display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);">
        <div class="top"><span>target tolerance</span><span class="val" id="toleranceTargetVal">25mm</span></div>
        <input type="range" id="toleranceTargetSlider" min="1" max="50" step="1" value="25">
        <button class="btn secondary" id="solveToleranceBtn" style="width:100%; margin-top:6px;">Solve for minimum panels</button>
        <div style="font-size:0.72rem; color:var(--muted); margin-top:6px;" id="toleranceSolverResult"></div>
      </div>
      <div class="toggle-row" id="colorblindPaletteRow" style="display:none;">
        <span>Colorblind-safe palette</span>
        <div class="switch" data-toggle="colorblindPalette"></div>
      </div>
      <button class="btn secondary" id="exportPanelScheduleBtn" style="width:100%; margin-top:8px; display:none;">Export panel schedule (.csv)</button>
    </section>

    <section class="group" id="compareSection">
      <h3>Compare</h3>
      <button class="btn secondary" id="saveSnapshotBtn" style="width:100%;">Save snapshot</button>
      <details class="info-toggle">
        <summary>What does this do?</summary>
        <div class="info-body">
          Captures the current shape as a translucent reference ghost, so you can change any
          parameter — even switch Operation entirely — and see exactly how the new shape differs,
          overlaid in the same view rather than side by side. The snapshot lives only in this
          session; it isn't saved, shared, or affected by Reset Values.
        </div>
      </details>
      <div class="toggle-row">
        <span>Show comparison</span>
        <div class="switch-standalone" id="showComparisonSwitch"></div>
      </div>
      <div style="font-size:0.72rem; color:var(--muted); margin-top:2px;" id="compareDeltaNote"></div>
    </section>

    <section class="group" id="exportSection">
      <h3>Export</h3>
      <button class="btn secondary" id="exportViewPngBtn" style="width:100%;">Export view (.png)</button>
      <details class="info-toggle">
        <summary>What does this do?</summary>
        <div class="info-body">
          Captures the 3D view exactly as shown — current camera angle, Perspective/Orthographic
          projection, the solid, and every 3D overlay (axis, rulings, point labels, panel colors).
          The sidebar HUD numbers and the panel-warp legend are separate page elements, not part of
          the 3D view, so they aren't included.
        </div>
      </details>
      <button class="btn secondary" id="copyShareLinkBtn" style="width:100%;">Copy share link</button>
      <details class="info-toggle">
        <summary>What does this do?</summary>
        <div class="info-body">
          Copies a URL that reproduces this exact configuration — mode, preset, every deformation
          parameter, footprint, floors, units, projection, and overlay settings — for anyone who
          opens it. Everything lives in the link itself (nothing sent to a server), so it works from
          any copy of this page.
        </div>
      </details>
      <div class="slider-row">
        <div class="top"><span>loft profiles (for JSON export)</span><span class="val" id="loftProfileCountVal">20</span></div>
        <input type="range" id="loftProfileCountSlider" min="3" max="60" step="1" value="20">
      </div>
      <button class="btn secondary" id="exportLoftJsonBtn" style="width:100%; margin-top:4px;">Export loft profiles (.json)</button>
      <details class="info-toggle">
        <summary>What does this do?</summary>
        <div class="info-body">
          For rebuilding the current form natively in Revit (via the Dynamo script below). Exports
          evenly-spaced cross-section profiles up the height — more profiles track a curved operation
          (Twist/Taper/Bend) more closely, since Revit's own loft fits a true curved surface through
          them rather than approximating with flat facets. Deliberately a separate count from
          "resolution (slices)" above: a loft only needs enough profiles for Revit's own curve fit to
          converge, not enough triangles to look smooth on screen — usually far fewer.
        </div>
      </details>
      <button class="btn secondary" id="downloadDynamoScriptBtn" style="width:100%; margin-top:8px;">Download Dynamo import script (.py)</button>
      <details class="info-toggle">
        <summary>What does this do?</summary>
        <div class="info-body">
          Paste into a Python Script node (File Path node → its IN[0]) in a blank Dynamo graph —
          Dynamo ships with Revit, nothing extra to install. Run it with a Conceptual Mass family
          document active to build a real, loadable Mass Form; run it with a project active for a
          one-off Mass-category DirectShape instead. Same script either way.
        </div>
      </details>
    </section>


    <section class="group">
      <h3>Reference</h3>
      <div style="font-size:0.76rem; line-height:1.6; color:var(--muted);" id="referenceText">
        Twist keeps a base plane B and a vertical axis A fixed, and rotates every horizontal slice
        at height z by α(z) = (z/h)·α_max. Straight vertical edges become helices; a flat wall
        through the axis becomes a helicoid. Try α_max = 90° or 180° to see a quarter or half turn,
        or push past 360° for multiple full turns.
      </div>
    </section>
  </aside>
</main>

<footer>
  <span id="footVersion"></span>
  <span id="footRight" class="mono"></span>
</footer>

<div class="toast" id="toast"></div>


<div id="termPopover"></div>
<div id="tourSpotlight"></div>
<div id="tourCallout"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script>
const APP_VERSION = '1.53.1';

// ---------- toast ----------
let toastTimer=null;
function toast(msg){
  const el=document.getElementById('toast');
  el.textContent=msg;
  el.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer=setTimeout(()=>el.classList.remove('show'), 1600);
}

// ---------- shared helpers (house convention — kept even where unused yet) ----------
function escapeHtml(s){
  return (s||'').replace(/[&<>"']/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function escapeAttr(s){ return escapeHtml(s); }

function confirmDialog(message, confirmLabel = 'Confirm'){
  return new Promise(resolve=>{
    const overlay = document.createElement('div');
    overlay.className = 'confirm-overlay';
    overlay.innerHTML = `
      <div class="confirm-box">
        <p>${escapeHtml(message)}</p>
        <div class="confirm-actions">
          <button class="btn secondary" id="confirmCancel">Cancel</button>
          <button class="btn" id="confirmOk">${escapeHtml(confirmLabel)}</button>
        </div>
      </div>`;
    document.body.appendChild(overlay);
    const cleanup = (result)=>{ overlay.remove(); resolve(result); };
    overlay.addEventListener('click', (e)=>{ if(e.target === overlay) cleanup(false); });
    document.getElementById('confirmCancel').onclick = ()=>cleanup(false);
    document.getElementById('confirmOk').onclick = ()=>cleanup(true);
  });
}

// ---------- help modal ----------
// App usage documentation — how to work SPIRA's own controls. Deliberately separate from the
// sidebar's Reference panel, which explains the underlying math and cites the book figures it's
// drawn from; this is just "what does this button do."
const HELP_HTML = `
  <h4>Simple / Advanced view &amp; resizing</h4>
  <p>The View toggle at the top of the sidebar switches between Simple (just the shape: Operation,
  Cross-section, Deformation parameters, Reference) and Advanced (adds Units, Projection, resolution,
  Overlays, and Export) — the same four sections hide or show no matter which Operation is selected.
  Light/Blueprint switches between the default paper theme and a dark architectural-blueprint theme.
  Drag the thin handle at the sidebar's left edge to resize it; all three choices are remembered for
  next time, separately from the model itself, so they're not included if you use "Copy share link."</p>

  <h4>Operations</h4>
  <p>The six buttons at the top of the sidebar switch which deformation is applied to the
  cross-section: Twist, Taper, Shear, Bend, Free (freeform/FFD), and Helix. Each has its own
  parameters below the switcher — the Reference panel at the bottom of the sidebar explains the
  math and the book figure each one is drawn from.</p>

  <h4>Compound</h4>
  <p>Applies a SECOND operation after the primary one — e.g. Twist then Taper. The picker only offers
  modes different from whatever's currently primary, and Bend can only ever be the last step in a
  chain (nothing can be chained after it, since a bent axis no longer describes "how far up the
  original axis" a point is). Free and Helix don't support compounding at all. Play/Pause still only
  animates the primary operation's own parameter(s); Reset, loading a case study, or switching to a
  mode that doesn't support a second step all clear the compound choice.</p>

  <h4>Cross-section &amp; size</h4>
  <p>Pick a footprint preset (square, triangle, hexagon, star) and set real-world Width/Depth —
  every preset scales to whatever you enter, in meters or feet. Height is set as floors ×
  floor-to-floor height (or, in Helix, turns × pitch) rather than one abstract number.</p>

  <h4>Play / Pause</h4>
  <p>Animates the current Operation's own deformation parameter(s) between a neutral starting value
  and whatever's currently dialed in, looping back and forth so you can watch the deformation happen
  rather than only comparing two static slider positions. Dragging any slider, switching Operation,
  loading a case study, or Reset all stop it automatically — sliders and the animation would
  otherwise fight over the same values every frame. Free has no slider to animate toward — drag at
  least one corner handle first; Play scales every handle's offset together from flat to however
  they're currently pushed.</p>

  <h4>Compare</h4>
  <p>"Save snapshot" (Advanced view) freezes the current shape as a translucent reference ghost, so
  you can change parameters — even switch Operation entirely — and see exactly how the new shape
  differs, overlaid in the same view. "Show comparison" toggles the ghost on and off; a new "Save
  snapshot" replaces it. The snapshot lives only in this browser session — it isn't saved, shared
  via "Copy share link," or affected by Reset Values.</p>

  <h4>Editing values</h4>
  <p>Every slider's readout is also a click-to-type field: click the number, type a new one,
  <kbd>Enter</kbd> or click away to commit, <kbd>Escape</kbd> to cancel. Length fields accept
  feet-inches notation in Imperial mode — <kbd>8'-6"</kbd>, <kbd>8' 6"</kbd>, or <kbd>8ft 6in</kbd>.
  Each operation has its own "Reset values" button, restoring just that mode's parameters (and
  floors/floor-height) to their defaults.</p>

  <h4>Free / FFD handles</h4>
  <p>Free mode has no sliders for its 8 corner control points — drag the small handle spheres
  directly in the viewport instead. Click and drag any brick-colored handle to reshape the solid
  live.</p>

  <h4>Overlays</h4>
  <p>Toggles in the sidebar control what's drawn alongside the solid: the axis A (and, for
  Shear/Bend, its moved image A₁), base plane B, ruling lines, slice-resolution rings, per-floor
  lines, wireframe, point labels, surface normals, and panel flatness/warp. These are visualization
  aids only — none of them change the exported geometry.</p>

  <h4>Panel flatness (warp)</h4>
  <p>Every operation except pure extrusion produces panels — the actual floor-to-floor,
  edge-to-edge quads a fabricator would cut — that aren't perfectly flat. This overlay color-codes
  each real panel from green (flat) through amber to red (warped), with a legend in the
  bottom-left of the viewport while it's on, and the HUD reports the worst panel's warp in
  mm/inches: the perpendicular distance of one corner from the plane of the other three, the
  standard curtain-wall "twist" tolerance measure. The HUD number updates live even with the
  colored overlay off. The solid itself hides automatically while this overlay is on, since the
  colored panels already cover the same surface and showing both at once can z-fight. A
  "subdivide each face into N panels" slider appears alongside the toggle — by default each real
  building face is measured as one single panel, which can produce a large warp figure on a wide
  face; subdividing shows how a real curtain wall would actually reduce that by breaking each face
  into narrower bays, with a live readout of the resulting panel width. A "Colorblind-safe palette"
  toggle switches the gradient from green/amber/red to Viridis' purple/teal/yellow, which reads
  correctly by brightness alone and doesn't rely on distinguishing red from green. The color scale
  (0–50mm) is illustrative, not a sourced tolerance spec — real limits vary by system and
  manufacturer. "Export panel schedule (.csv)" exports one row per panel currently being
  analyzed — width, warp, a severity label matching the on-screen color, and all 4 corner
  coordinates in the same Z-up convention the loft-profiles export uses. "Solve for minimum
  panels" is the inverse of the subdivision slider: set a target max warp and it finds the
  smallest per-face panel count that meets it, with a one-click Apply.</p>

  <h4>View navigation</h4>
  <p>Drag to orbit, scroll to zoom, right-drag (or two-finger drag) to pan. <strong>Top</strong>,
  <strong>Front</strong>, and <strong>Home</strong> in the bottom-right jump to standard
  architectural plan/elevation/isometric framing — Home also re-fits the camera to whatever's
  currently on screen.</p>

  <h4>Projection</h4>
  <p>Perspective (the default) has foreshortening, like a photo — farther things look smaller.
  Orthographic is a true parallel projection with none, the standard for architectural plan and
  elevation drawings, where sizes need to stay accurate regardless of depth. Switching preserves
  whatever you're currently looking at and from which direction — only how depth is projected
  changes, not the view itself.</p>

  <h4>Units</h4>
  <p>The Metric/Imperial toggle converts every length, area, and volume readout in the HUD and
  sidebar at once — it doesn't change the underlying model.</p>

  <h4>Export</h4>
  <p>"Export view (.png)" captures the 3D view exactly as shown — camera angle, projection, the
  solid, and every overlay drawn inside the scene itself (axis, rulings, point labels, panel-warp
  colors). The sidebar HUD and the panel-warp legend are separate page elements, not part of the
  3D view, so they aren't included.</p>
  <p>"Copy share link" copies a URL with the entire current configuration encoded into it (mode,
  preset, every deformation parameter, footprint, floors, units, projection, resolution, and
  overlay settings) — opening that link reproduces the same setup exactly, on any device. The
  configuration lives entirely in the link itself; nothing is uploaded or stored on a server.</p>
  <p>"Export loft profiles (.json)" exports evenly-spaced cross-section profiles up the height,
  meant to be read by the bundled Dynamo script ("Download Dynamo import script") to build the
  current form as native Revit geometry — a genuine curved face per side, not a flat-faceted
  approximation. Paste the script into a Python Script node in Dynamo (ships with Revit, nothing
  extra to install); run it with a Conceptual Mass family document active for a real, loadable
  Mass Family, or with a project active for a one-off Mass-category element.</p>
`;
function showHelp(){
  const overlay = document.createElement('div');
  overlay.className = 'help-overlay';
  overlay.innerHTML = `
    <div class="help-box">
      <div class="help-box-head">
        <h3>How to use SPIRA</h3>
        <button class="btn secondary" id="helpClose" style="padding:4px 12px;">Close</button>
      </div>
      <div class="help-box-body">${HELP_HTML}</div>
    </div>`;
  document.body.appendChild(overlay);
  const close = ()=> overlay.remove();
  overlay.addEventListener('click', (e)=>{ if(e.target === overlay) close(); });
  document.getElementById('helpClose').onclick = close;
}
document.getElementById('helpBtn').addEventListener('click', showHelp);

document.getElementById('footVersion').innerHTML =
  `SPIRA · v${APP_VERSION} · Joe.K · <a href="https://axisbim.io" target="_blank" rel="noopener" style="color:inherit;">axisbim.io</a>`;

// ---------- state ----------
const state = {
  mode: 'twist',          // 'twist' | 'taper' | 'shear' | 'bend' | 'ffd' | 'helix'
  // v1.50.0: optional SECOND operation applied after the primary one — null | 'twist' | 'taper' |
  // 'shear' | 'bend'. Only valid when `mode` is itself one of twist/taper/shear (never 'bend',
  // 'ffd', or 'helix' — see computeLayerPointCompound below for exactly why bend can only ever be
  // last in a chain, and ffd/helix don't fit this model at all). UI enforces this constraint by
  // construction (the Compound section is hidden whenever mode is ffd/helix/bend, and its own
  // options exclude whichever mode is currently primary) rather than validating it after the fact.
  compoundMode: null,
  preset: 'square',
  // Real-world footprint size, independent per axis, applied on top of whichever preset's raw shape
  // is selected: PROFILES generates each preset at its own natural "unit" proportions (e.g. the
  // square is 2×2, the star's bounding box is wider), then rebuild() scales that raw shape so its
  // bounding box exactly matches these dimensions. Defaults (2.0×2.0m) reproduce the original square
  // exactly (scaleX=scaleZ=1), and switching presets keeps the same real-world footprint size instead
  // of jumping to each preset's arbitrary hardcoded proportions.
  footprintWidthM: 2.0,
  footprintDepthM: 2.0,
  alphaMax: 120,
  taperV: 0.5,             // x-direction scale factor at top plane T (book notation v)
  taperW: 0.5,             // y-direction scale factor at top plane T (book notation w)
  shearDXM: 3.0,           // x-offset of axis A1 at top plane, always stored in meters
  shearDYM: 1.0,           // y-offset of axis A1 at top plane, always stored in meters
  bendBetaMax: 180,        // total bend angle in degrees; axis A maps to an arc A1 of this sweep
  // FFD: 8 control points, indexed iu*4+iv*2+iw (iu,iv,iw in {0,1}), stored as offsets from their
  // default position (the corner of the current bounding box) so they track preset/height changes
  // sensibly instead of going stale as absolute coordinates.
  ffdOffsets: [0,0,0,0,0,0,0,0].map(()=>({dx:0, dy:0, dz:0})),
  // Helix: a generator/meridian curve (radial X(v), height-offset Y(v)) swept by true helical motion.
  // Height here is turns × pitch, not floors × floor-height, so these live alongside but independent
  // of the floors/floorHeightM fields above (which twist/taper/shear/bend/ffd keep using).
  helixGenerator: 'line', // 'line' (common helicoid / ramp) | 'circle' (tube, flat in meridian plane) | 'pipe' (true constant-radius pipe, Frenet frame)
  helixTurns: 3,
  helixPitchM: 3.0,        // rise per full revolution, always stored in meters
  helixRInnerM: 0.3,       // 'line' generator: inner radius (central void at the axis)
  helixROuterM: 2.2,       // 'line' generator: outer radius
  helixTubeRM: 0.25,       // 'circle' generator: tube radius
  helixTubeOffsetM: 1.5,   // 'circle' generator: distance from axis to tube center
  // Morph: blends the Cross-section preset above (FROM, at the base) into a second preset (TO, at
  // the top) — see buildMorphProfile(). TO gets its own independent real-world size, same pattern
  // as footprintWidthM/DepthM for FROM.
  morphToPreset: 'ellipse',
  morphToWidthM: 2.0,
  morphToDepthM: 2.0,
  // v1.51.2: separate from the height-based blend itself (computeLayerPoint's morph branch always
  // fully blends by y=h) — this is purely how FAR that blend reaches, so Play/Pause has something to
  // animate 0->1 the same way Twist animates α_max 0->dialed-in. 1.0 = the full configured morph
  // (identical rendering to before this field existed); not exposed as its own slider in this
  // release, only reachable via animation.
  morphBlend: 1.0,
  units: 'metric',       // 'metric' | 'imperial' — display only; geometry is always stored in meters
  projection: 'perspective', // v1.38.0: 'perspective' | 'orthographic' — Top/Front/Home were true
                              // to their view DIRECTION but still perspective-projected, so even a
                              // straight-down plan or straight-on elevation had perspective
                              // foreshortening, not the true parallel projection a real plan/
                              // elevation view needs. Global toggle rather than per-view, so the
                              // choice persists across Home/Top/Front/free-orbit alike.
  floors: 8,
  floorHeightM: 3.5,     // floor-to-floor height, always stored in meters regardless of display units
  segments: 48,
  loftProfileCount: 20, // profile count for the "loft profiles" JSON export — deliberately separate
                        // from segments (render/export facet resolution above): a native Revit loft
                        // only needs enough profiles for its own curve fit to converge, not enough
                        // to look smooth as flat triangles
  panelSubdiv: 1, // v1.28.0: how many narrower bays to split each real face/edge into before
                   // measuring panel warp — 1 reproduces the original behavior (one panel spanning
                   // the whole named-corner-to-named-corner edge). See computePanelWarp's caller.
  toleranceTargetMM: 25, // v1.37.0: target for "Solve for minimum panels" — always stored in mm
                          // regardless of display units (same convention warpColor()'s 0-50mm scale
                          // already uses), converted for display via toDisplaySmallLen/smallLenUnit.
  overlays: { axis:true, plane:true, rulings:true, slicerings:true, floorlines:true, wireframe:false, labels:false, normals:false, panelwarp:false, colorblindPalette:false }
};

try{
  const saved = JSON.parse(localStorage.getItem('spira-state') || 'null');
  if(saved){ Object.assign(state, saved); if(saved.overlays) Object.assign(state.overlays, saved.overlays); }
}catch(e){}

function persist(){
  localStorage.setItem('spira-state', JSON.stringify(state));
}

// ---------- shareable URL (v1.40.0) ----------
// Encodes the entire `state` object into a URL-safe base64 string stored in the location hash
// (#s=...), not a query string — a hash never leaves the browser (not sent to any server, not
// logged, not appended by Netlify's static hosting), which matters since this is a client-only
// static app with nowhere for a query param to be read anyway. Round-trips the exact same state
// object localStorage persistence uses, so a shared link reproduces a session exactly: mode,
// preset, every deformation parameter, footprint size, floors/floor-height, units, projection,
// resolution, panel-subdivision/tolerance-target, every overlay toggle, and FFD control-point
// offsets. Deliberately does NOT encode camera position/orbit — pendingReframe defaults true, so
// the very first rebuild() after a URL-loaded state already re-fits the camera to whatever loaded
// (same "zoom to fit, centered" every Operation/preset switch already relies on, see v1.23.0),
// which is more useful to a recipient than reproducing the sender's specific orbit angle.
function encodeStateToURL(){
  const json = JSON.stringify(state);
  // btoa() only accepts Latin1 bytes; state is pure ASCII (numbers, mode-name strings, booleans)
  // so this doesn't need the unescape/encodeURIComponent UTF-8 dance a truly free-text field would.
  const b64 = btoa(json);
  // Base64's own alphabet (+ / =) isn't URL-safe as-is (+ and / have URL meaning, = is padding
  // browsers/servers can mangle); swap to the standard "base64url" alphabet and drop padding,
  // since the decoder below can reconstruct padding from length alone.
  return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}
function decodeStateFromURLParam(param){
  try{
    let b64 = param.replace(/-/g, '+').replace(/_/g, '/');
    while(b64.length % 4) b64 += '=';
    const json = atob(b64);
    const parsed = JSON.parse(json);
    if(typeof parsed !== 'object' || parsed === null) return null;
    return parsed;
  }catch(e){ return null; }
}
function buildShareURL(){
  return location.origin + location.pathname + '#s=' + encodeStateToURL();
}
async function copyShareLink(){
  const url = buildShareURL();
  try{
    if(navigator.clipboard && navigator.clipboard.writeText){
      await navigator.clipboard.writeText(url);
    } else {
      // Fallback for browsers/contexts without the async Clipboard API (e.g. non-HTTPS local
      // preview): a temporary offscreen textarea + the legacy execCommand copy path.
      const ta = document.createElement('textarea');
      ta.value = url;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.focus(); ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
    }
    toast('Share link copied to clipboard');
  }catch(e){
    toast('Could not copy link — see console');
    console.error('copyShareLink failed', e);
  }
}
// Loading a shared link: parse #s=... on startup and merge it into state, same shape as the
// localStorage restore above but applied AFTER it, so a shared link always wins over whatever
// this browser had saved locally — the whole point of sending someone a specific configuration.
// Runs before any DOM/slider sync below (all of which read from `state`), so nothing downstream
// needs its own special case for "was this state URL-loaded or default."
(function applySharedStateFromURL(){
  const hash = location.hash || '';
  const m = hash.match(/(?:^#|[&;])s=([^&;]+)/) || hash.match(/^#s=([^&;]+)/);
  if(!m) return;
  const parsed = decodeStateFromURLParam(m[1]);
  if(!parsed) return;
  Object.assign(state, parsed);
  if(parsed.overlays) Object.assign(state.overlays, parsed.overlays);
})();

// ---------- profiles (footprint polygons in the x–z plane, roughly unit-radius) ----------
const PROFILES = {
  square: () => [[-1,-1],[1,-1],[1,1],[-1,1]],
  triangle: () => {
    const pts=[]; const n=3, r=1.25;
    for(let i=0;i<n;i++){ const a = -Math.PI/2 + i*2*Math.PI/n; pts.push([r*Math.cos(a), r*Math.sin(a)]); }
    return pts;
  },
  hexagon: () => {
    const pts=[]; const n=6, r=1.15;
    for(let i=0;i<n;i++){ const a = i*2*Math.PI/n; pts.push([r*Math.cos(a), r*Math.sin(a)]); }
    return pts;
  },
  octagon: () => {
    const pts=[]; const n=8, r=1.1;
    for(let i=0;i<n;i++){ const a = Math.PI/8 + i*2*Math.PI/n; pts.push([r*Math.cos(a), r*Math.sin(a)]); }
    return pts;
  },
  ellipse: () => {
    // Densely sampled (n=32, divisible by 4 so the cardinal points land exactly on the bounding
    // box) rather than a true smooth curve, since every other preset here is a discrete point
    // array too — but see PRESET_SMOOTH below: unlike a polygon, this one has no real corners
    // anywhere around the loop, so it's rendered with shared, fully smooth normals instead of a
    // sharp edge at every one of these 32 sample points.
    const pts=[]; const n=32, rx=1.3, rz=0.85;
    for(let i=0;i<n;i++){ const a = i*2*Math.PI/n; pts.push([rx*Math.cos(a), rz*Math.sin(a)]); }
    return pts;
  },
  star: () => {
    const pts=[]; const n=5, rOuter=1.35, rInner=0.55;
    for(let i=0;i<n*2;i++){
      const a = -Math.PI/2 + i*Math.PI/n;
      const r = (i%2===0) ? rOuter : rInner;
      pts.push([r*Math.cos(a), r*Math.sin(a)]);
    }
    return pts;
  }
};
const PRESET_LABELS = { square:'Square', triangle:'Triangle', hexagon:'Hexagon', octagon:'Octagon', ellipse:'Ellipse', star:'Star' };
// Which presets have no real corners around their loop, and so should render with one shared,
// fully smooth normal field (buildDeformedGeometry's smoothCrossSection path) instead of a private,
// sharp-cornered panel at every profile edge — the same distinction Helix's Circle/Pipe generator
// already needed against its own Line generator (v1.17.1).
const PRESET_SMOOTH = { ellipse: true };

// Scales a preset's raw (arbitrary-proportioned) shape so its bounding box exactly matches the
// user's real-world footprintWidthM/footprintDepthM, independently per axis. Used by both rebuild()
// and the FFD drag handler (which needs the same scaled box to compute correct default corner
// positions) — kept as one function so they can't drift out of sync with each other.
function scaledProfile(presetKey, widthM, depthM){
  const raw = PROFILES[presetKey]();
  const rawMinX = Math.min(...raw.map(p=>p[0])), rawMaxX = Math.max(...raw.map(p=>p[0]));
  const rawMinZ = Math.min(...raw.map(p=>p[1])), rawMaxZ = Math.max(...raw.map(p=>p[1]));
  const scaleX = widthM / ((rawMaxX-rawMinX) || 1);
  const scaleZ = depthM / ((rawMaxZ-rawMinZ) || 1);
  return raw.map(p => [p[0]*scaleX, p[1]*scaleZ]);
}

// ---------- Morph mode helpers (v1.51.0) ----------
// Finds where a ray from the origin along `dir` crosses polygon `poly` (assumed star-shaped from
// the origin — true of every PROFILES shape by construction). Standard 2-line intersection: ray
// R(t)=t*dir (t>0) vs segment S(s)=a+s*(b-a) (s in [0,1]), solved as a 2x2 linear system. Returns
// the smallest positive t (the polygon's radius in that direction) or null if no edge is crossed
// (shouldn't happen for a star-shaped closed polygon, but a caller-side guard is cheap insurance).
function polygonRadiusAtAngle(poly, dir){
  const n = poly.length;
  let best = null;
  for(let i=0;i<n;i++){
    const a = poly[i], b = poly[(i+1)%n];
    const ex = b[0]-a[0], ez = b[1]-a[1];
    const det = ex*dir[1] - ez*dir[0];
    if(Math.abs(det) < 1e-12) continue; // edge parallel to the ray
    const t = (ex*a[1] - ez*a[0]) / det;
    const s = (dir[0]*a[1] - dir[1]*a[0]) / det;
    if(t > 1e-9 && s >= -1e-9 && s <= 1+1e-9){
      if(best===null || t<best) best = t;
    }
  }
  return best;
}
// Resamples a (scaled, origin-centered) polygon to exactly N points at evenly spaced angles around
// the origin, via ray-casting (above) rather than arc-length walking — angle-based correspondence
// is what keeps two DIFFERENT shapes (e.g. a square and a circle) from twisting against each other
// when blended point-for-point: point i of both resampled shapes sits at the same angle, always,
// so a Morph's mid-blend never has to guess which corner of the square "becomes" which point of
// the circle. startAngle matches the -90°/top-of-screen reference most PROFILES generators already
// use, so a resampled square's first point still lands near its real top-left-ish corner rather
// than an arbitrary rotation.
function resampleProfileByAngle(poly, N, startAngle){
  startAngle = startAngle === undefined ? -Math.PI/2 : startAngle;
  const pts = [];
  for(let i=0;i<N;i++){
    const angle = startAngle + i*2*Math.PI/N;
    const dir = [Math.cos(angle), Math.sin(angle)];
    const r = polygonRadiusAtAngle(poly, dir) || 0;
    pts.push([r*dir[0], r*dir[1]]);
  }
  return pts;
}
// Fixed resample resolution for Morph — matches Ellipse's own generator density (v1 scope note:
// not user-exposed as a slider, unlike panel subdivision/loft profile count, to keep this release
// bounded; see MORPH scope note in the changelog).
const MORPH_N = 32;
// Builds Morph's "profile" array: N points, each a 4-tuple [fromX, fromZ, toX, toZ] rather than
// the [x,z] pair every other mode uses. This is what lets Morph slot into the EXISTING
// buildDeformedGeometry/computeLayerPoint pipeline unmodified at nearly every call site — anywhere
// that reads p[0]/p[1] directly (bottom cap triangulation, footprint area, point labels, the axis
// overlay) automatically sees the FROM shape, which is exactly correct since those all evaluate at
// y=0. Only computeLayerPoint's own 'morph' branch needs to know about p[2]/p[3] at all.
function buildMorphProfile(){
  const fromScaled = scaledProfile(state.preset, state.footprintWidthM, state.footprintDepthM);
  const toScaled = scaledProfile(state.morphToPreset, state.morphToWidthM, state.morphToDepthM);
  const fromR = resampleProfileByAngle(fromScaled, MORPH_N);
  const toR = resampleProfileByAngle(toScaled, MORPH_N);
  return fromR.map((p,i) => [ p[0], p[1], toR[i][0], toR[i][1] ]);
}

// shoelace area of a simple polygon (2D)
function polygonArea(pts){
  let a=0;
  for(let i=0;i<pts.length;i++){
    const [x1,y1]=pts[i], [x2,y2]=pts[(i+1)%pts.length];
    a += x1*y2 - x2*y1;
  }
  return Math.abs(a)/2;
}

function rotate2D(p, rad){
  const c=Math.cos(rad), s=Math.sin(rad);
  return [ p[0]*c - p[1]*s, p[0]*s + p[1]*c ];
}

// FFD control point helpers. Control points are indexed iu*4+iv*2+iw (iu,iv,iw in {0,1}), matching
// the book's b_ijk convention. The default (identity) control point is the corresponding corner of
// the current bounding box; a trilinear blend of a box's own corners, evaluated at that same point's
// own normalized (u,v,w), reproduces the point exactly — so undragged FFD is a no-op, algebraically.
function ffdDefaultCP(box, h, iu, iv, iw){
  return [
    box.minX + iu*(box.maxX - box.minX),
    iv * h,
    box.minZ + iw*(box.maxZ - box.minZ)
  ];
}
function ffdControlPoints(box, h, offsets){
  const cps = [];
  for(let iu=0; iu<2; iu++) for(let iv=0; iv<2; iv++) for(let iw=0; iw<2; iw++){
    const idx = iu*4 + iv*2 + iw;
    const d = ffdDefaultCP(box, h, iu, iv, iw);
    const o = offsets[idx];
    cps[idx] = [ d[0]+o.dx, d[1]+o.dy, d[2]+o.dz ];
  }
  return cps;
}
function trilinearBlend(u, v, w, cps){
  let x=0, y=0, z=0;
  for(let iu=0; iu<2; iu++) for(let iv=0; iv<2; iv++) for(let iw=0; iw<2; iw++){
    const bu = iu ? u : 1-u, bv = iv ? v : 1-v, bw = iw ? w : 1-w;
    const b = bu*bv*bw;
    const cp = cps[iu*4 + iv*2 + iw];
    x += b*cp[0]; y += b*cp[1]; z += b*cp[2];
  }
  return [x, y, z];
}

// Helix generator/meridian curves. A generator lives in the (radial, height-offset) half-plane at
// u=0 -- i.e. m(v) = (X(v), 0, Y(v)), with the helical axis playing the role of this app's vertical
// y. 'line' is the common/right helicoid: a straight segment orthogonal to the axis, from an inner
// radius (optionally >0, leaving a central void) to an outer radius -- the classic open spiral
// ramp/stair surface. 'circle' is a circle lying entirely IN the meridian plane: this simplified
// formula directly reproduces a winding tube/screw-column, with no Frenet-frame machinery needed
// since the whole circle already sits flat in the plane the formula assumes. 'pipe' is the "true"
// constant-radius pipe -- a circle held orthogonal to the helix's own tangent at every point, riding
// a moving Frenet frame along the 3D helix centerline (see pipeFrenetPoint / buildHelicalGeometry's
// evalPoint parameter) -- previously flagged as not implemented; see changelog v1.15.0.
const HELIX_GENERATORS = {
  line: (p) => [ [p.rInner, 0], [p.rOuter, 0] ],
  circle: (p) => {
    const pts = [], n = 24;
    for(let i=0;i<n;i++){
      const a = i*2*Math.PI/n;
      pts.push([ p.tubeOffset + p.tubeR*Math.cos(a), p.tubeR*Math.sin(a) ]);
    }
    return pts;
  },
  // Each "point" here is just a cross-section angle θ around the pipe — pipeFrenetPoint does the
  // actual 3D placement via the Frenet frame, so the second array slot is unused (kept only so this
  // fits the same 2-element-point shape every other generator returns).
  pipe: (p) => {
    const pts = [], n = 24;
    for(let i=0;i<n;i++) pts.push([ i*2*Math.PI/n, 0 ]);
    return pts;
  }
};
const HELIX_GENERATOR_CLOSED = { line:false, circle:true, pipe:true };

// True-pipe placement: a circle of radius params.tubeR held in the plane orthogonal to the helix
// centerline's own tangent at parameter u, riding a Frenet frame (T,N,B) along that centerline —
// as opposed to 'circle', which fixes the circle flat in the meridian plane regardless of the local
// tangent direction. The centerline here is itself a circular helix of radius params.rOffset, so its
// curvature and torsion are both constant and its Frenet frame is smooth and well-defined everywhere
// (no inflection points to cause the frame to flip, unlike an arbitrary space curve) — verified
// analytically below rather than needing a numerical rotation-minimizing-frame approximation.
function pipeFrenetPoint(y, height, params, genPt){
  const u = (y/height) * params.totalAngle;
  const R0 = params.rOffset, p = params.riseParRad, r = params.tubeR;
  const cosU = Math.cos(u), sinU = Math.sin(u);
  const cx = R0*cosU, cy = p*u, cz = R0*sinU;
  // Tangent T = C'(u) normalized. C'(u) = (-R0 sinu, p, R0 cosu).
  const tx=-R0*sinU, ty=p, tz=R0*cosU;
  const tLen = Math.hypot(tx,ty,tz) || 1;
  const Tx=tx/tLen, Ty=ty/tLen, Tz=tz/tLen;
  // Principal normal N = C''(u) normalized. C''(u) = (-R0 cosu, 0, -R0 sinu), which already has
  // magnitude R0 and — for a circular helix specifically — is always exactly perpendicular to C'(u)
  // (their dot product is R0²sinu·cosu - R0²sinu·cosu = 0 for every u), so no Gram-Schmidt
  // re-orthogonalization against T is needed here the way a general space curve would require.
  const Nx=-cosU, Ny=0, Nz=-sinU;
  // Binormal completes the right-handed frame.
  const Bx = Ty*Nz - Tz*Ny, By = Tz*Nx - Tx*Nz, Bz = Tx*Ny - Ty*Nx;
  const theta = genPt[0];
  const cosT = Math.cos(theta), sinT = Math.sin(theta);
  return [
    cx + r*(cosT*Nx + sinT*Bx),
    cy + r*(cosT*Ny + sinT*By),
    cz + r*(cosT*Nz + sinT*Bz)
  ];
}

// Maps a base-plane profile point to its full 3D position at parameter y, for any of the five
// operations. Twist rotates each slice by α(z) = (z/h)·α_max; taper scales each slice independently
// in x (factor v(z)) and y (factor w(z)), both linear between 1 at the base and v/w at the top;
// shear translates each slice within its own plane, linear between (0,0) at the base and (Δx,Δy) at
// the top. All three keep the slice at world height y unchanged — only bend moves the height
// coordinate itself, which is why this returns a full [x,y,z] rather than just [x,z]: bend maps the
// axis to a circular arc A1 (radius R = h/β, so the arc length exactly equals h -- the "typical"
// equal-length convention) and rearranges each slice into the plane normal to that arc, with the
// profile's local x passed straight through ("x-parallel lines stay x-parallel" under this map) and
// local z (here playing the radial-offset role) riding the arc's normal. For a fixed y this in-slice
// map is a pure rotation+translation (an isometry — same area, exactly like twist), which is what
// makes bending volume-preserving too. FFD is different in kind, not degree: instead of a per-height
// formula it's a single trilinear (1,1,1) Bézier blend of 8 control points spanning the whole
// solid's bounding box — no axis, no base plane.
function computeLayerPoint(mode, params, y, h, p){
  if(mode === 'taper'){
    const vFac = 1 + (y/h) * (params.V - 1);
    const wFac = 1 + (y/h) * (params.W - 1);
    return [ p[0]*vFac, y, p[1]*wFac ];
  }
  if(mode === 'shear'){
    return [ p[0] + params.DX * (y/h), y, p[1] + params.DY * (y/h) ];
  }
  if(mode === 'bend'){
    const betaRad = params.betaMax * Math.PI/180;
    if(Math.abs(betaRad) < 1e-6) return [ p[0], y, p[1] ]; // straight fallback, avoids 0/0 at R=h/beta
    const R = h/betaRad;
    const theta = betaRad * (y/h);
    const worldY = (R - p[1]) * Math.sin(theta);
    const worldZ = R*(1 - Math.cos(theta)) + p[1]*Math.cos(theta);
    return [ p[0], worldY, worldZ ];
  }
  if(mode === 'ffd'){
    const box = params.box;
    const u = (p[0]-box.minX) / (box.maxX-box.minX || 1);
    const v = y / h;
    const w = (p[1]-box.minZ) / (box.maxZ-box.minZ || 1);
    return trilinearBlend(u, v, w, params.cps);
  }
  if(mode === 'helix'){
    // p = [X(v), Y(v)] — a generator point's radial distance and height-offset. u sweeps through
    // params.totalAngle (turns × 2π) as y goes 0→h, matching the book's x=X(v)cosu, z=X(v)sinu,
    // y=Y(v)+p·u (p here is riseParRad, rise per radian — pitch/2π — so a full turn (u+=2π) adds
    // exactly one pitch of height, same as the book's z1=z+p·u with p in per-radian terms).
    const uAngle = (y/h) * params.totalAngle;
    const worldX = p[0]*Math.cos(uAngle);
    const worldZ = p[0]*Math.sin(uAngle);
    const worldY = p[1] + params.riseParRad*uAngle;
    return [worldX, worldY, worldZ];
  }
  if(mode === 'morph'){
    // p = [fromX, fromZ, toX, toZ] (see buildMorphProfile) — a straight lerp per level, height-
    // linear same as Taper/Shear's own primary parameter, scaled by params.blend (v1.51.2) so
    // Play/Pause has a 0->1 quantity to animate the same way every other mode does; blend defaults
    // to 1 (full morph, exactly the original behavior) whenever a caller doesn't supply one — the
    // isolated math tests that verified this branch predate params.blend and call with `{}`.
    // subdivideProfileForPanels' generic element-wise interpolation (v1.51.0) keeps this 4-tuple
    // shape intact even for the finer panel-subdivision points it generates, so panel warp and
    // higher-res exports blend correctly too, not just the named corners.
    const blend = params.blend === undefined ? 1 : params.blend;
    const t = (y/h) * blend;
    return [ p[0] + (p[2]-p[0])*t, y, p[1] + (p[3]-p[1])*t ];
  }
  const angleDeg = (y/h) * params.alphaMax;
  const [x,z] = rotate2D(p, angleDeg * Math.PI/180);
  return [x, y, z];
}

// Build the {V,W}/{DX,DY}/{betaMax}/{alphaMax} params object computeLayerPoint expects for any of
// the four axis-based modes, given just the mode name — factored out of rebuild()'s own inline
// ternary (v1.50.0) so the SAME mapping is used for both the primary operation and, when compounding
// is active, the secondary one, rather than risking the two drifting out of sync if only one copy
// ever got updated. Deliberately doesn't cover 'ffd' (its params also need `box`/`h`, computed at the
// call site) or 'helix' (an entirely different params shape) — neither participates in compounding.
function paramsForMode(mode){
  return mode === 'taper' ? { V: state.taperV, W: state.taperW }
    : mode === 'shear' ? { DX: state.shearDXM, DY: state.shearDYM }
    : mode === 'bend' ? { betaMax: state.bendBetaMax }
    : mode === 'morph' ? { blend: state.morphBlend }
    : { alphaMax: state.alphaMax }; // twist
}

// v1.50.0: compound operations — apply state.compoundMode's transform AFTER the primary one, so e.g.
// Twist then Taper becomes possible (Shanghai Tower's actual geometry, among others — see the
// CASE_STUDIES rejection notes for how many real buildings turned out to need exactly this). A thin
// wrapper around computeLayerPoint rather than a change to it, and used as a drop-in replacement at
// every one of computeLayerPoint's existing call sites (mesh construction, panel warp, the tolerance
// solver, CSV/loft-JSON export, point labels, the axis overlay) — all of those already funnel through
// either buildDeformedGeometry or lastBuild.evalPoint, both fed from a single call site in rebuild(),
// so switching that one spot to this wrapper makes every downstream consumer compound-aware for free,
// with zero of them individually touched or even aware compounding exists.
//
// Only ever applies when `mode` is twist/taper/shear — never 'bend', 'ffd', or 'helix', even if
// state.compoundMode somehow ended up set while one of those was primary (shouldn't be reachable;
// the UI enforces it, but this is the actual safety boundary, not the UI). The reason bend can't
// chain FURTHER: twist/taper/shear all return [x, y, z] with the SAME y that was passed in (rotation/
// scaling/translation happen entirely in the x/z plane at each height) — so their output x/z, fed
// back in at the SAME y, is exactly the right input for a second transform. Bend does not preserve
// this: its own y/z output describes a point on a curved arc in world space, not "how far up the
// original straight axis" anymore, so there's no way to feed it into a second axis-based transform
// using this same y-preserving scheme. Bend can still be the LAST step (any of twist/taper/shear's
// preserved-y output feeds into it correctly), just never followed by anything after.
function computeLayerPointCompound(mode, params, y, h, p){
  const out = computeLayerPoint(mode, params, y, h, p);
  if(state.compoundMode && mode !== 'helix' && mode !== 'ffd' && mode !== 'bend'){
    const secondaryParams = paramsForMode(state.compoundMode);
    return computeLayerPoint(state.compoundMode, secondaryParams, y, h, [out[0], out[2]]);
  }
  return out;
}

// ---------- units ----------
const M_TO_FT = 3.280839895;
function unitLabels(){ return state.units==='metric' ? {len:'m', area:'m²', vol:'m³'} : {len:'ft', area:'ft²', vol:'ft³'}; }
function toDisplayLen(m){ return state.units==='metric' ? m : m*M_TO_FT; }
function toDisplayArea(m2){ return state.units==='metric' ? m2 : m2*M_TO_FT*M_TO_FT; }
function toDisplayVol(m3){ return state.units==='metric' ? m3 : m3*M_TO_FT*M_TO_FT*M_TO_FT; }
// Panel warp values are small (mm-scale) relative to every other HUD length (m/ft), so they get
// their own finer-grained unit rather than reading as "0.0m" — millimeters in Metric, inches in
// Imperial, both natural units for a fabrication tolerance.
function toDisplaySmallLen(m){ return state.units==='metric' ? m*1000 : m*M_TO_FT*12; }
function smallLenUnit(){ return state.units==='metric' ? 'mm' : 'in'; }
function totalHeightM(){
  return state.mode === 'helix' ? state.helixTurns * state.helixPitchM : state.floors * state.floorHeightM;
}

// Formats decimal feet as architectural feet-inches, e.g. 8.5 -> 8'-6". Used to pre-fill a length
// field's edit box in imperial mode, since that's the natural format to type a dimension in, even
// though the passive (non-editing) HUD/slider readouts stay as decimal feet elsewhere in the app.
function formatFeetInches(decimalFeet){
  const neg = decimalFeet < 0;
  decimalFeet = Math.abs(decimalFeet);
  let feet = Math.floor(decimalFeet);
  let inches = Math.round((decimalFeet - feet) * 12 * 100) / 100;
  if(inches >= 12){ feet += 1; inches -= 12; }
  const inchStr = Number.isInteger(inches) ? String(inches) : inches.toFixed(2).replace(/0+$/,'').replace(/\.$/,'');
  return `${neg ? '-' : ''}${feet}'-${inchStr}"`;
}

// Parses a typed length string. Always accepts a plain decimal ("8.5"). In an imperial context, also
// accepts feet-inches notation — 8'6", 8'-6", 8' 6", 8ft 6in, 8ft — since that's how architects
// actually write dimensions. Returns a number in the CALLER's display unit (decimal feet if imperial,
// meters if metric); the caller converts to meters for storage. Returns null if unparseable.
function parseLengthInput(str, isImperialContext){
  str = (str||'').trim();
  if(str === '') return null;
  if(isImperialContext){
    // bare inches with no feet component at all, e.g. "6\"" or "6in" — without this check the
    // general feet(+inches) regex below would misread it as 6 feet.
    const inchesOnly = str.match(/^(-?\d+(?:\.\d+)?)\s*(?:"|in)\s*$/i);
    if(inchesOnly && !/'|ft/i.test(str)) return parseFloat(inchesOnly[1]) / 12;
    if(/['"]|ft|in/i.test(str)){
      const m = str.match(/^(-?\d+(?:\.\d+)?)\s*(?:'|ft)?\s*-?\s*(\d+(?:\.\d+)?)?\s*(?:"|in)?\s*$/i);
      if(m){
        const feet = parseFloat(m[1]) || 0;
        const inches = m[2] ? parseFloat(m[2]) : 0;
        return feet + (feet < 0 ? -inches : inches) / 12;
      }
    }
  }
  const n = parseFloat(str);
  return Number.isFinite(n) ? n : null;
}

// Twist, shear, and bend never change a slice's area — rotation, translation, and (per-slice, at
// fixed height) rotation+translation again are all exact isometries of the plane — so deformed
// volume == prism volume exactly, by Cavalieri. Taper scales each slice's area by v(z)*w(z), a
// quadratic in z, so the volume ratio has a closed form:
// baseArea * h * [1 + (V+W-2)/2 + (V-1)(W-1)/3] (integral of v(z)w(z) dz worked out by hand).
// FFD has no such closed form — an arbitrary trilinear warp can do anything to volume — so its
// reading comes from computeMeshVolume() on the actual built geometry instead (see rebuild()).
function computeDeformedVolume(mode, params, baseArea, h){
  if(mode === 'taper'){
    const V = params.V, W = params.W;
    return baseArea * h * (1 + (V + W - 2)/2 + (V - 1)*(W - 1)/3);
  }
  return baseArea * h;
}

// Numeric volume of a closed triangle mesh via the divergence theorem (sum of signed tetrahedron
// volumes from the origin) — used only where no closed form exists (FFD). Accepts any number of
// THREE.BufferGeometry pieces (side + caps) and sums across all of them.
function computeMeshVolume(...geometries){
  let vol = 0;
  for(const geo of geometries){
    const pos = geo.attributes.position.array;
    const idx = geo.index.array;
    for(let i=0; i<idx.length; i+=3){
      const a=idx[i]*3, b=idx[i+1]*3, c=idx[i+2]*3;
      const ax=pos[a], ay=pos[a+1], az=pos[a+2];
      const bx=pos[b], by=pos[b+1], bz=pos[b+2];
      const cx=pos[c], cy=pos[c+1], cz=pos[c+2];
      vol += (ax*(by*cz - cy*bz) - ay*(bx*cz - cx*bz) + az*(bx*cy - cx*by)) / 6;
    }
  }
  return Math.abs(vol);
}

// Numeric surface area of a mesh — sum of triangle areas via the cross-product formula. Used for
// Helix's HUD reading: a helicoid isn't a solid (the common helicoid has a hole around the axis and
// zero thickness), so there's no volume to report — area is the honest analog, and like FFD's volume,
// there's no closed form for it here either, so it's measured from the actual built triangles.
function computeMeshSurfaceArea(...geometries){
  let area = 0;
  for(const geo of geometries){
    if(!geo) continue;
    const pos = geo.attributes.position.array;
    const idx = geo.index.array;
    for(let i=0; i<idx.length; i+=3){
      const a=idx[i]*3, b=idx[i+1]*3, c=idx[i+2]*3;
      const ux=pos[b]-pos[a], uy=pos[b+1]-pos[a+1], uz=pos[b+2]-pos[a+2];
      const vx=pos[c]-pos[a], vy=pos[c+1]-pos[a+1], vz=pos[c+2]-pos[a+2];
      const cx=uy*vz-uz*vy, cy=uz*vx-ux*vz, cz=ux*vy-uy*vx;
      area += 0.5*Math.sqrt(cx*cx+cy*cy+cz*cz);
    }
  }
  return area;
}

// ---------- three.js setup ----------
const host = document.getElementById('canvasHost');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf4f1ea);

// v1.38.0: two camera objects, one active at a time via the `camera` reference below. Both share
// the same positionCameraForFit() so switching projection re-fits with the new camera's own
// projection math rather than trying to convert a perspective "distance" into an equivalent
// orthographic zoom — they aren't the same concept (an orthographic camera's apparent size comes
// from its frustum width/height, not how far away it sits), so no such conversion is exact anyway;
// re-fitting fresh is simpler and always correct. orthoCamera's frustum starts at a placeholder —
// applyOrthoFrustum() sets it for real on the first resize()/fit.
const perspCamera = new THREE.PerspectiveCamera(42, 1, 0.1, 2000); // near/far re-tightened per-model
const orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 2000);
let camera = state.projection === 'orthographic' ? orthoCamera : perspCamera;
let orthoBaseHalfHeight = 10; // world-space ortho frustum half-height at zoom=1 — set by every fit

// preserveDrawingBuffer:true so canvas.toBlob() (PNG export, v1.39.0) reliably captures what's on
// screen — WebGL clears its drawing buffer after compositing by default in a continuously-rendering
// app like this one (animate()'s requestAnimationFrame loop), so without this flag a screenshot
// taken any time after the frame that drew it can come back blank.
const renderer = new THREE.WebGLRenderer({ antialias:true, preserveDrawingBuffer:true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
host.appendChild(renderer.domElement);

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;

function currentAspect(){ return host.clientWidth / Math.max(host.clientHeight, 1); }
// OrthographicCamera has no .aspect property (unlike PerspectiveCamera) — its frustum is absolute
// left/right/top/bottom, so the aspect ratio has to be folded in by hand whenever it's set.
function applyOrthoFrustum(){
  const halfW = orthoBaseHalfHeight * currentAspect();
  orthoCamera.left = -halfW; orthoCamera.right = halfW;
  orthoCamera.top = orthoBaseHalfHeight; orthoCamera.bottom = -orthoBaseHalfHeight;
}

// ---------- view framing (Home / Top / Front buttons) ----------
// Camera framing fits the actual rendered bounding box — accounts for footprint width/depth as
// well as height, so a wide/deep sample (Width/Depth sliders pushed apart, or a Helix with a large
// outer radius) frames correctly instead of needing a manual zoom-out.
//
// v1.31.0: this box-fit was previously Home-only. Top and Front used an older, separate height-only
// heuristic (dist = h * a fixed multiplier, no Box3 involved at all) that predates it and was never
// upgraded — harmless for a roughly cube-proportioned model, but for a tall/narrow real building
// (The Shard: 1015ft tall, 92ft footprint) it left almost zero headroom top-to-bottom (no padding
// margin the way Home's 15% pad gives) while leaving most of the viewport empty left/right, since
// the distance was chosen purely from height with no awareness of the viewport's aspect ratio or
// the model's actual width. User report/screenshot: Front view showing the tower nearly edge-to-edge
// vertically with huge dead space on both sides — not actually "zoomed to fit," just coincidentally
// tall enough to reach the frame's top and bottom with no margin. All three view buttons share one
// fit calculation (real Box3, circumscribed-sphere radius), so "zoom to fit, centered" means the
// same thing everywhere regardless of which axis happens to be the tight one.
function fitBoxDistance(){
  const box = new THREE.Box3().setFromObject(solidGroup);
  if(box.isEmpty()) return null;
  const center = box.getCenter(new THREE.Vector3());
  const size = box.getSize(new THREE.Vector3());
  const radius = size.length() / 2; // exact circumscribed-sphere radius of the bounding box
  return { center, radius };
}
// Positions the CURRENTLY ACTIVE camera at target + camDir*dist, looking at target, sized to fit
// radius. v1.38.0: handles both projection types — perspective computes a distance from FOV math
// (checked against both horizontal and vertical FOV, whichever is more restrictive, with 15%
// padding, same as before); orthographic instead sets a frustum half-height directly and resets
// zoom to 1, since an orthographic camera's apparent size comes from its frustum, not its distance —
// "dist" for ortho only matters for near/far clipping and giving OrbitControls a sensible orbit
// radius, not for how big the model looks.
function positionCameraForFit(camDir, target, radius){
  let dist;
  if(camera.isPerspectiveCamera){
    const vFov = camera.fov * Math.PI/180;
    const hFov = 2 * Math.atan(Math.tan(vFov/2) * currentAspect());
    dist = Math.max(Math.max(radius / Math.sin(vFov/2), radius / Math.sin(hFov/2)) * 1.15, 6);
    camera.near = Math.max(dist*0.01, 0.01);
    camera.far = dist + radius*2 + 50;
  } else {
    orthoBaseHalfHeight = Math.max(radius * 1.15, 0.5); // same 15% pad as the perspective fit
    camera.zoom = 1;
    applyOrthoFrustum();
    dist = Math.max(radius * 3, 6); // arbitrary for ortho — doesn't affect apparent size, just clip/orbit range
    camera.near = Math.max(dist*0.01, 0.01);
    camera.far = dist + radius*2 + 50;
  }
  camera.updateProjectionMatrix();
  camera.position.copy(target.clone().add(camDir.clone().multiplyScalar(dist)));
  controls.target.copy(target);
  controls.update();
}
function frameCameraDefault(){
  const camDir = new THREE.Vector3(9, 8, 11).normalize();
  camera.up.set(0, 1, 0);
  const fit = fitBoxDistance();
  if(!fit){
    // Defensive fallback for a call before solidGroup has any geometry (shouldn't happen in normal
    // use, since rebuild() calls this itself once actual geometry exists — see pendingReframe).
    const h = totalHeightM();
    positionCameraForFit(camDir, new THREE.Vector3(0, h/2, 0), Math.max(h*0.3, 5));
    return;
  }
  positionCameraForFit(camDir, fit.center, fit.radius);
}
// Top: looks straight down the world y-axis — the standard architectural plan view. A perfectly
// vertical look direction is a known OrbitControls singularity (its internal spherical-coordinate
// math degenerates when the camera-to-target vector aligns with the up vector), so camera.up is
// swapped to a horizontal axis and the look direction gets a sub-millimeter horizontal epsilon —
// both standard workarounds, visually imperceptible, that keep the controls' math well-defined.
function frameCameraTop(){
  camera.up.set(0, 0, -1);
  const camDir = new THREE.Vector3(0.001, 1, 0.001).normalize();
  const fit = fitBoxDistance();
  if(!fit){
    const h = totalHeightM();
    positionCameraForFit(camDir, new THREE.Vector3(0, h/2, 0), Math.max(h*0.3, 5));
    return;
  }
  positionCameraForFit(camDir, fit.center, fit.radius);
}
// Front: looks horizontally toward the model along -z — the standard architectural elevation view.
function frameCameraFront(){
  camera.up.set(0, 1, 0);
  const camDir = new THREE.Vector3(0, 0, 1);
  const fit = fitBoxDistance();
  if(!fit){
    const h = totalHeightM();
    positionCameraForFit(camDir, new THREE.Vector3(0, h/2, 0), Math.max(h*0.3, 5));
    return;
  }
  positionCameraForFit(camDir, fit.center, fit.radius);
}
// First-build camera fit happens inside rebuild() itself (see pendingReframe below), once actual
// geometry exists — calling frameCameraDefault() here would just hit its empty-box fallback.

// Perspective <-> Orthographic toggle. Re-fits with the NEW camera rather than attempting to
// translate the old camera's distance into an equivalent zoom/frustum for the new one (not the
// same concept between projection types, as above) — but preserves the exact view direction and
// target the user was already looking at/from, so switching changes only how depth is projected,
// never reorients the view or resets pan.
function switchProjection(newProjection){
  if(state.projection === newProjection) return;
  const camDir = new THREE.Vector3();
  camera.getWorldDirection(camDir).negate(); // camera-from-target direction, not the look vector
  const target = controls.target.clone();
  const up = camera.up.clone();

  state.projection = newProjection;
  camera = newProjection === 'orthographic' ? orthoCamera : perspCamera;

  controls.dispose();
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.08;

  camera.up.copy(up);
  positionCameraForFit(camDir, target, lastModelRadius);
  persist();
}

scene.add(new THREE.AmbientLight(0xffffff, 0.65));
const key = new THREE.DirectionalLight(0xffffff, 0.9);
key.position.set(8, 14, 6);
scene.add(key);
const fill = new THREE.DirectionalLight(0xbcd0e0, 0.35);
fill.position.set(-8, 4, -6);
scene.add(fill);

const solidGroup = new THREE.Group();
const overlayGroup = new THREE.Group();
scene.add(solidGroup, overlayGroup);

function resize(){
  const w = host.clientWidth, h = host.clientHeight;
  perspCamera.aspect = w/h;
  perspCamera.updateProjectionMatrix();
  applyOrthoFrustum();
  orthoCamera.updateProjectionMatrix();
  renderer.setSize(w, h);
}
window.addEventListener('resize', resize);

// ---------- geometry builders ----------
function cross3(a, b){
  return [ a[1]*b[2]-a[2]*b[1], a[2]*b[0]-a[0]*b[2], a[0]*b[1]-a[1]*b[0] ];
}
function normalize3(v){
  const len = Math.hypot(v[0], v[1], v[2]) || 1;
  return [ v[0]/len, v[1]/len, v[2]/len ];
}
function distSqArr(arr, ia, ib){
  const ax=arr[ia*3], ay=arr[ia*3+1], az=arr[ia*3+2];
  const bx=arr[ib*3], by=arr[ib*3+1], bz=arr[ib*3+2];
  const dx=ax-bx, dy=ay-by, dz=az-bz;
  return dx*dx+dy*dy+dz*dz;
}

// Subdivides each real edge of the (undeformed, flat) profile into subPerEdge narrower straight
// sub-edges before panel warp is measured — v1.28.0, added after a user asked whether a real
// building's ~2in max panel warp figure made sense. It does: the app's own math was correct, but
// with the default named-corner-only profile (4 points for Square), each "panel" spans an entire
// building face — e.g. ~75ft wide for Turning Torso's case study — which is not how a real twisting
// facade is ever actually clad; real curtain walls break each face into many narrower bays
// specifically because warp scales roughly linearly with panel width for a given rotation rate.
// This lets the overlay show that directly: interpolating new points along each straight edge in
// the flat 2D profile (before layerPointFn deforms them) reproduces exactly what a finer real-world
// panelization scheme would look like, at whatever bay count the user picks. subPerEdge=1 is a
// no-op (returns the original profile unchanged) so nothing about the default behavior changes.
function subdivideProfileForPanels(profile, n, closed, subPerEdge){
  if(subPerEdge <= 1) return { subProfile: profile, subN: n };
  const numEdges = closed ? n : n-1;
  const subProfile = [];
  for(let i=0; i<numEdges; i++){
    const i2 = (i+1)%n;
    const p0 = profile[i], p1 = profile[i2];
    for(let s=0; s<subPerEdge; s++){
      const t = s/subPerEdge;
      // Element-wise (not hardcoded to [0]/[1]) so Morph's [fromX,fromZ,toX,toZ] 4-tuples (v1.51.0)
      // interpolate correctly too — every other mode's plain [x,z] pairs behave identically to
      // before, since mapping 2 elements is the same result the old hardcoded version gave.
      subProfile.push(p0.map((v,k) => v + (p1[k]-v)*t));
    }
  }
  if(!closed) subProfile.push(profile[n-1]); // open profiles (Helix Line) need the final endpoint too
  return { subProfile, subN: subProfile.length };
}

// Panel flatness / warp (v1.22.0). For every real floor-to-floor, edge-to-edge panel (four
// corners: two adjacent profile points at two adjacent floor/turn boundaries — the actual quad a
// fabricator or curtain-wall panel would be cut from, not the fine render mesh), measures warp
// using the standard curtain-wall "twist" tolerance definition: fit a plane through three of the
// panel's four corners, then take the perpendicular distance of the fourth corner from that plane.
// This is a single, well-defined scalar per panel (not a least-squares fit across all four points),
// matching how flatness tolerance is actually specified and measured in glazing/cladding practice.
// Every operation here except pure extrusion warps panels in general — Taper included, via the
// bilinear x*y cross term in its own scaling, not just the rotating/bending modes.
function computePanelWarp(profile, layerPointFn, n, closed, loopCount, stepM){
  const numEdges = closed ? n : n-1;
  const panels = [];
  let maxWarpM = 0, sumWarpM = 0;
  for(let k=0; k<loopCount; k++){
    const yLo = k*stepM, yHi = (k+1)*stepM;
    for(let i=0; i<numEdges; i++){
      const i2 = (i+1)%n;
      const p00 = layerPointFn(yLo, profile[i]);
      const p01 = layerPointFn(yLo, profile[i2]);
      const p10 = layerPointFn(yHi, profile[i]);
      const p11 = layerPointFn(yHi, profile[i2]);
      const v1 = [p01[0]-p00[0], p01[1]-p00[1], p01[2]-p00[2]];
      const v2 = [p10[0]-p00[0], p10[1]-p00[1], p10[2]-p00[2]];
      const nrm = normalize3(cross3(v1, v2));
      const toP11 = [p11[0]-p00[0], p11[1]-p00[1], p11[2]-p00[2]];
      const warpM = toP11[0]*nrm[0] + toP11[1]*nrm[1] + toP11[2]*nrm[2]; // signed distance
      const warpAbsM = Math.abs(warpM);
      maxWarpM = Math.max(maxWarpM, warpAbsM);
      sumWarpM += warpAbsM;
      panels.push({ p00, p01, p10, p11, warpAbsM });
    }
  }
  return { panels, maxWarpM, avgWarpM: panels.length ? sumWarpM/panels.length : 0 };
}
// Two palettes over the same illustrative 0-50mm range (real curtain-wall twist tolerances vary by
// system and manufacturer — this is a teaching-scale gradient, not a code value). Default is
// green -> amber -> red, the conventional low/mid/high severity read, but red-green is exactly the
// pair most colorblind users (deuteranopia/protanopia, the two most common forms) struggle to tell
// apart — v1.35.0 added a second palette using Viridis' own stops (dark purple -> teal -> yellow),
// a colormap specifically designed to be both colorblind-safe and perceptually uniform (each step
// reads as evenly more severe by brightness alone, not just hue), toggleable alongside Panel
// flatness rather than replacing the default, since plenty of people prefer the intuitive
// green-good/red-bad read when it isn't a barrier for them.
const WARP_PALETTES = {
  default: [[0x2f,0x9e,0x44], [0xf2,0xc1,0x4e], [0xc0,0x39,0x2b]], // green, amber, red
  colorblind: [[0x44,0x01,0x54], [0x21,0x90,0x8c], [0xfd,0xe7,0x25]] // Viridis: purple, teal, yellow
};
function lerpPaletteStops(stops, t){
  const [a,b] = t < 0.5 ? [stops[0],stops[1]] : [stops[1],stops[2]];
  const localT = t < 0.5 ? t/0.5 : (t-0.5)/0.5;
  const r = a[0]+(b[0]-a[0])*localT, g = a[1]+(b[1]-a[1])*localT, bch = a[2]+(b[2]-a[2])*localT;
  return [r/255, g/255, bch/255];
}
function warpColor(warpAbsM){
  const mm = warpAbsM * 1000;
  const t = Math.max(0, Math.min(mm/50, 1));
  const stops = state.overlays.colorblindPalette ? WARP_PALETTES.colorblind : WARP_PALETTES.default;
  return lerpPaletteStops(stops, t);
}

function buildDeformedGeometry(profile, height, segs, mode, params, smoothCrossSection){
  const n = profile.length;

  // layerPositions: one vertex per profile corner per layer, shared across panels — this is the
  // shape ruling lines / slice rings / floor lines / the loft-profiles exporter all expect (indexed
  // as (j*n+i)*3), so it's kept exactly as before regardless of how the render mesh itself is built.
  const layerPositions = [];
  for(let j=0; j<=segs; j++){
    const y = (j/segs) * height;
    for(let i=0;i<n;i++){
      const [x,yOut,z] = computeLayerPointCompound(mode, params, y, height, profile[i]);
      layerPositions.push(x, yOut, z);
    }
  }

  const dY = Math.max(height/segs, 1e-5) * 0.5; // finite-difference step for the height tangent
  let sideGeo;

  if(smoothCrossSection){
    // Round profiles (Ellipse) have no real corners anywhere around the loop — unlike a polygon
    // footprint, faceting it into private per-edge panels would show visible facets on something
    // meant to read as smoothly curved, the same problem Helix's Circle/Pipe generator solved by
    // sharing normals across its whole generator direction (v1.17.1). Same technique here: shared
    // vertices around the whole loop, per-vertex normals via finite difference across NEIGHBORING
    // PROFILE POINTS (a good approximation of the true ellipse tangent at this sampling density)
    // crossed with the height tangent, rather than the exact-straight-edge tangent the faceted path
    // below uses (which would be wrong here — there's no single straight edge to be exact about).
    const positions = [];
    const normals = [];
    const indices = [];
    for(let j=0; j<=segs; j++){
      const y = (j/segs) * height;
      const yLo = Math.max(0, y-dY), yHi = Math.min(height, y+dY);
      const denom = (yHi - yLo) || dY;
      for(let i=0;i<n;i++){
        const [x,yOut,z] = computeLayerPointCompound(mode, params, y, height, profile[i]);
        positions.push(x, yOut, z);
        const pLo = computeLayerPointCompound(mode, params, yLo, height, profile[i]);
        const pHi = computeLayerPointCompound(mode, params, yHi, height, profile[i]);
        const tHeight = [ (pHi[0]-pLo[0])/denom, (pHi[1]-pLo[1])/denom, (pHi[2]-pLo[2])/denom ];
        const iPrev = (i-1+n)%n, iNext = (i+1)%n;
        const pPrev = computeLayerPointCompound(mode, params, y, height, profile[iPrev]);
        const pNext = computeLayerPointCompound(mode, params, y, height, profile[iNext]);
        const tGen = [ pNext[0]-pPrev[0], pNext[1]-pPrev[1], pNext[2]-pPrev[2] ];
        // Orientation verified headlessly (Node + three.js) before shipping — same cross order as
        // the faceted path below (height-tangent × generator-tangent), since this path shares that
        // path's indices winding convention, not buildHelicalGeometry's (which uses the opposite
        // winding for an unrelated reason — see the comment there).
        const nrm = normalize3(cross3(tHeight, tGen));
        normals.push(nrm[0], nrm[1], nrm[2]);
      }
    }
    for(let j=0;j<segs;j++){
      for(let i=0;i<n;i++){
        const a = j*n+i, b = j*n+(i+1)%n, c = (j+1)*n+(i+1)%n, d = (j+1)*n+i;
        indices.push(a,c,b, a,d,c); // outward winding, matches the faceted path's own convention
      }
    }
    sideGeo = new THREE.BufferGeometry();
    sideGeo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    sideGeo.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
    sideGeo.setIndex(indices);
  } else {
    // Render mesh: built per-panel (the straight edge between profile corner i and i+1 of an
    // n-gon), each panel with its own private pair of vertex columns rather than sharing corner
    // vertices with its neighboring panel. That split matters because it lets the side surface use
    // smooth per-vertex normals along height (removing the flat-shading Mach-band striping visible
    // at high resolution — v1.14.2's slice-ring fix addressed a real but separate z-fighting issue,
    // not this one) while keeping a genuine sharp edge at every real polygon corner, where the cross-
    // section actually does have a crease. Normals are computed analytically rather than via
    // Three.js's face-averaging computeVertexNormals(), since the earlier herringbone bug (v1.12.2)
    // came from averaging across a per-quad diagonal choice that flips direction quad to quad —
    // analytic normals don't depend on that triangulation choice at all.
    const positions = [];
    const normals = [];
    const indices = [];

    for(let i=0;i<n;i++){
      const iN = (i+1) % n;
      const panelBase = positions.length / 3;
      for(let j=0; j<=segs; j++){
        const y = (j/segs) * height;
        const left  = computeLayerPointCompound(mode, params, y, height, profile[i]);
        const right = computeLayerPointCompound(mode, params, y, height, profile[iN]);

        // Width tangent (∂S/∂u): exact, not approximated — a panel is a ruled straight-line surface
        // between two corners at any given height, so its width-direction derivative is just the
        // edge vector itself, constant along that edge.
        const tw = [ right[0]-left[0], right[1]-left[1], right[2]-left[2] ];

        // Height tangent (∂S/∂v) per column, central difference (one-sided at the two ends).
        const yLo = Math.max(0, y-dY), yHi = Math.min(height, y+dY);
        const denom = (yHi - yLo) || dY;
        const lLo = computeLayerPointCompound(mode, params, yLo, height, profile[i]);
        const lHi = computeLayerPointCompound(mode, params, yHi, height, profile[i]);
        const tvL = [ (lHi[0]-lLo[0])/denom, (lHi[1]-lLo[1])/denom, (lHi[2]-lLo[2])/denom ];
        const rLo = computeLayerPointCompound(mode, params, yLo, height, profile[iN]);
        const rHi = computeLayerPointCompound(mode, params, yHi, height, profile[iN]);
        const tvR = [ (rHi[0]-rLo[0])/denom, (rHi[1]-rLo[1])/denom, (rHi[2]-rLo[2])/denom ];

        // Outward normal = tangent-height × tangent-width — this ordering (not the reverse) is what
        // matches the outward-winding convention already established below and verified elsewhere in
        // this file against a known-correct THREE.BoxGeometry reference (see the indices comment).
        const nL = normalize3(cross3(tvL, tw));
        const nR = normalize3(cross3(tvR, tw));

        positions.push(left[0], left[1], left[2]);   normals.push(nL[0], nL[1], nL[2]);
        positions.push(right[0], right[1], right[2]); normals.push(nR[0], nR[1], nR[2]);
      }
      for(let j=0;j<segs;j++){
        const a = panelBase + j*2;        // left,  layer j
        const b = panelBase + j*2 + 1;    // right, layer j
        const c = panelBase + (j+1)*2 + 1;// right, layer j+1
        const d = panelBase + (j+1)*2;    // left,  layer j+1
        // Same shorter-diagonal-first split as before (purely cosmetic now that normals are analytic
        // rather than face-derived, but kept for consistency); same outward winding too.
        const dAC = distSqArr(positions,a,c), dBD = distSqArr(positions,b,d);
        if(dAC <= dBD) indices.push(a,c,b, a,d,c);
        else indices.push(a,d,b, b,d,c);
      }
    }

    sideGeo = new THREE.BufferGeometry();
    sideGeo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    sideGeo.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
    sideGeo.setIndex(indices);
  }

  // caps via shoelace-safe fan/earcut triangulation (handles the star's concave verts)
  const shapePts = profile.map(p => new THREE.Vector2(p[0], p[1]));
  const triangles = THREE.ShapeUtils.triangulateShape(shapePts, []);

  function buildCap(y, flip){
    const capPos = [];
    profile.forEach(p=>{
      const [x,yOut,z] = computeLayerPointCompound(mode, params, y, height, p);
      capPos.push(x, yOut, z);
    });
    const capIdx = [];
    triangles.forEach(tri=>{
      if(flip) capIdx.push(tri[0], tri[2], tri[1]);
      else capIdx.push(tri[0], tri[1], tri[2]);
    });
    const g = new THREE.BufferGeometry();
    g.setAttribute('position', new THREE.Float32BufferAttribute(capPos, 3));
    g.setIndex(capIdx);
    g.computeVertexNormals();
    return g;
  }

  // flip=true here means "reverse the raw triangulateShape winding" — bottom needs the raw winding
  // (flip=false), top needs it reversed (flip=true), the opposite of what might look natural; fixed
  // to match after the same normal-direction check described above at the side surface.
  const bottomCap = buildCap(0, false);
  const topCap = buildCap(height, true);

  return { sideGeo, bottomCap, topCap, layerPositions, segs, n };
}

// Sweeps a generator curve through true helical motion instead of extruding-then-deforming a
// cross-section — a different construction from buildDeformedGeometry, not a variant of it (see
// changelog v1.7.0). Returns the same {layerPositions, segs, n} shape buildDeformedGeometry does,
// so ruling lines, slice rings, and point labels all work unmodified on either builder's output —
// only the caps differ: an open generator (line) has no cap (its "ends" are edges, not faces); a
// closed generator (circle, pipe) gets fan-triangulated disk caps at both open ends of the tube.
// evalPoint(y, genPt) defaults to the ordinary radial-sweep formula (line/circle); pipe passes its
// own Frenet-frame placement (pipeFrenetPoint) instead, through the same topology/winding/cap code.
//
// Normals are analytic per-vertex (v1.17.1), not Three.js's face-averaging computeVertexNormals() —
// a user screenshot of the Line generator showed a dense fan of radiating lines across the ramp,
// the same flat-shading Mach-band effect fixed for the other five modes in v1.14.3 but never applied
// here (Helix's ramp panel, from axis to outer radius, is exactly the same kind of single wide panel
// swept through many thin layers — 3 turns x 120 resolution here is 360 layers — that caused it
// elsewhere). Unlike buildDeformedGeometry's polygon-corner panels, Helix's generator direction has
// no real corners to preserve (Line is one continuous straight edge; Circle/Pipe's 24-gon is meant
// to read as a smooth round tube, not a faceted polygon), so normals are shared/smooth across the
// WHOLE generator direction here, not split per-panel — full smooth shading is the geometrically
// honest choice for a swept generator, the same way flat panel-corners were the honest choice for a
// polygonal footprint.
function buildHelicalGeometry(genPts, closed, uSegs, height, params, evalPoint){
  const n = genPts.length;
  const evalFn = evalPoint || ((y, p) => computeLayerPoint('helix', params, y, height, p));
  const positions = [];
  const normals = [];
  const indices = [];
  const dY = Math.max(height/uSegs, 1e-5) * 0.5;
  for(let j=0; j<=uSegs; j++){
    const y = (j/uSegs) * height;
    const yLo = Math.max(0, y-dY), yHi = Math.min(height, y+dY);
    const denom = (yHi - yLo) || dY;
    for(let i=0;i<n;i++){
      const [x,yOut,z] = evalFn(y, genPts[i]);
      positions.push(x, yOut, z);
      // Height/sweep tangent: finite difference of evalFn in y, holding the generator point fixed.
      const pLo = evalFn(yLo, genPts[i]), pHi = evalFn(yHi, genPts[i]);
      const tHeight = [ (pHi[0]-pLo[0])/denom, (pHi[1]-pLo[1])/denom, (pHi[2]-pLo[2])/denom ];
      // Generator/circumference tangent: finite difference across neighboring generator SAMPLES
      // (not infinitesimally close points — genPts are already discrete samples of the generator
      // curve, spaced by 2π/n for Circle/Pipe or the single Line segment's own two endpoints for
      // Line), central where possible and one-sided at the open ends of a non-closed generator.
      const iPrev = closed ? (i-1+n)%n : Math.max(i-1, 0);
      const iNext = closed ? (i+1)%n : Math.min(i+1, n-1);
      const pPrev = evalFn(y, genPts[iPrev]), pNext = evalFn(y, genPts[iNext]);
      const tGen = [ pNext[0]-pPrev[0], pNext[1]-pPrev[1], pNext[2]-pPrev[2] ];
      // Orientation verified headlessly (Node + three.js) against Line, Circle, and Pipe.
      const nrm = normalize3(cross3(tGen, tHeight));
      normals.push(nrm[0], nrm[1], nrm[2]);
    }
  }
  function distSq(ia, ib){
    const ax=positions[ia*3], ay=positions[ia*3+1], az=positions[ia*3+2];
    const bx=positions[ib*3], by=positions[ib*3+1], bz=positions[ib*3+2];
    const dx=ax-bx, dy=ay-by, dz=az-bz;
    return dx*dx+dy*dy+dz*dz;
  }
  const edgeCount = closed ? n : n-1;
  for(let j=0;j<uSegs;j++){
    for(let i=0;i<edgeCount;i++){
      const iNext = closed ? (i+1)%n : i+1;
      const a = j*n+i, b = j*n+iNext, c = (j+1)*n+iNext, d = (j+1)*n+i;
      // NOTE: this does NOT get the same winding flip buildDeformedGeometry's side surface got.
      // The two builders share this quad topology, but a generator point here lives in a local
      // (radial, height-offset) frame that gets embedded into world (x,z) via rotation — X(v)cosu,
      // X(v)sinu — which has the opposite handedness from a footprint profile's direct (x,z)
      // placement. Verified computationally (a tube built from the 'circle' generator) that this
      // original winding is the one producing outward-facing normals here, even though the reversed
      // version was correct for buildDeformedGeometry.
      if(distSq(a,c) <= distSq(b,d)){ indices.push(a,b,c, a,c,d); }
      else { indices.push(a,b,d, b,c,d); }
    }
  }
  const sideGeo = new THREE.BufferGeometry();
  sideGeo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
  sideGeo.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
  sideGeo.setIndex(indices);

  let capA = null, capB = null;
  if(closed){
    function buildDiskCap(y, flip){
      const capPos = [];
      genPts.forEach(p=>{ const [x,yOut,z] = evalFn(y, p); capPos.push(x,yOut,z); });
      let cx=0, cy=0, cz=0;
      for(let i=0;i<n;i++){ cx+=capPos[i*3]; cy+=capPos[i*3+1]; cz+=capPos[i*3+2]; }
      cx/=n; cy/=n; cz/=n;
      capPos.push(cx, cy, cz);
      const centerIdx = n;
      const capIdx = [];
      for(let i=0;i<n;i++){
        const a=i, b=(i+1)%n;
        // Same swap as buildCap's flip fix above.
        if(flip) capIdx.push(centerIdx, a, b); else capIdx.push(centerIdx, b, a);
      }
      const g = new THREE.BufferGeometry();
      g.setAttribute('position', new THREE.Float32BufferAttribute(capPos, 3));
      g.setIndex(capIdx);
      g.computeVertexNormals();
      return g;
    }
    capA = buildDiskCap(0, true);
    capB = buildDiskCap(height, false);
  }
  return { sideGeo, capA, capB, layerPositions: positions, segs: uSegs, n };
}

let currentMesh = null;
// v1.23.0: was a one-shot hasFramedOnce boolean — camera only ever auto-fit on the very first
// rebuild(), which was fine for continuous slider drags within one mode (deliberately left alone,
// v1.7.1) but meant switching Operation, cross-section preset, Helix generator, a case study, or
// Reset values — all of which can change the model's size/shape/position drastically — left the
// camera wherever it happened to be for the PREVIOUS model, sometimes framing empty space or a tiny
// corner of the new one. Button handlers for those actions set pendingReframe = true; ordinary
// slider `input` events (fired continuously during a drag) still don't, so live-dragging a
// parameter never yanks the camera mid-gesture. v1.34.0 added one more source: a slider's `change`
// event (fired once on release, not during the drag) also sets it for every size/shape-affecting
// slider, so letting go of a big change re-fits instead of stranding the model outside the frame —
// the live-drag itself is unaffected either way, only what happens once the user lets go.
let pendingReframe = true;
// v1.33.0: camera near/far were only ever set once per view-fit (Home/Top/Front), sized for that
// fit's distance — manually scrolling to zoom out further could exceed the far plane and clip the
// model out of view entirely, which reads exactly like being capped even though OrbitControls has
// no maxDistance set. animate() below recomputes near/far every frame from the camera's actual
// live distance, using this cached model radius (updated once per rebuild(), not per frame — a
// full Box3 traversal is cheap next to everything else rebuild() already does, but not something
// to repeat 60x/second) as the buffer beyond the current distance.
let lastModelRadius = 50;
let lastBuild = null; // {mode, profile, params, h, closed, n} — captured each rebuild() so the
                       // loft-profiles JSON exporter can resample the exact same profile/params via
                       // computeLayerPoint, guaranteed in sync with what's on screen. See
                       // buildLoftProfilesJSON().
// v1.52.0: cached straight from the SAME computation the HUD itself displays (not a second,
// independent calculation) so Exercises can grade against exactly what's on screen. See the HUD
// panel-warp block and the volume block inside rebuild() for where these get set.
let lastMaxWarpM = 0;
let lastVolDeformed = 0;
let lastVolPrism = 0;
let rulingLines = null;
let axisHelper = null;
let planeHelper = null;
let labelSprites = [];
let ffdHandleMeshes = []; // current draggable FFD handle meshes, rebuilt every rebuild() call —
                           // pointer handlers (wired once, outside rebuild) raycast against this
                           // live array so they always hit whatever's currently in the scene.

function spriteLabel(text, color, sizeMult=1){
  const cnv = document.createElement('canvas');
  cnv.width = 128; cnv.height = 64;
  const ctx = cnv.getContext('2d');
  ctx.font = '600 40px Space Grotesk, sans-serif';
  ctx.fillStyle = color;
  ctx.textAlign='center'; ctx.textBaseline='middle';
  ctx.fillText(text, 64, 32);
  const tex = new THREE.CanvasTexture(cnv);
  const mat = new THREE.SpriteMaterial({ map: tex, depthTest:false });
  const spr = new THREE.Sprite(mat);
  spr.scale.set(0.9*sizeMult, 0.45*sizeMult, 1);
  return spr;
}

function rebuild(){
  // clear
  while(solidGroup.children.length) solidGroup.remove(solidGroup.children[0]);
  while(overlayGroup.children.length) overlayGroup.remove(overlayGroup.children[0]);
  labelSprites = [];

  const h = totalHeightM();
  let profile, box, params, sideGeo, bottomCap, topCap, layerPositions, segs, n;
  let helixCapA = null, helixCapB = null, helixROuterC = null;
  let closed = true; // whether the cross-section/generator forms a closed ring (false only for
                      // Helix's open 'line' generator) — captured into lastBuild below

  let layerPointFn; // resolves to whichever formula actually built what's on screen — the ordinary
                     // per-mode computeLayerPoint for everything except Pipe, which needs its own
                     // Frenet-frame formula instead. Point labels and the loft-profiles exporter both
                     // use this (via lastBuild.evalPoint below) rather than calling computeLayerPoint
                     // directly, so they can't silently fall back to the wrong formula for Pipe the
                     // way they did before this was introduced.
  if(state.mode === 'helix'){
    // Helix sweeps a generator curve by true helical motion instead of extruding+deforming a
    // cross-section — a different builder entirely (see buildHelicalGeometry / changelog v1.7.0).
    helixROuterC = Math.max(state.helixROuterM, state.helixRInnerM + 0.1); // keep a visible gap
    params = {
      totalAngle: state.helixTurns * 2*Math.PI,
      riseParRad: state.helixPitchM / (2*Math.PI)
    };
    const genParams = {
      rInner: state.helixRInnerM, rOuter: helixROuterC,
      tubeOffset: state.helixTubeOffsetM, tubeR: state.helixTubeRM
    };
    profile = HELIX_GENERATORS[state.helixGenerator](genParams);
    closed = HELIX_GENERATOR_CLOSED[state.helixGenerator];
    // v1.52.1: rounded — buildHelicalGeometry's two loops (j<=uSegs building vertex rings, j<uSegs
    // building quads between them) only produce a matching ring count when uSegs is a whole number.
    // state.helixTurns is normally always an integer (the slider uses parseInt), but Play/Pause
    // animates it continuously (see ANIMATABLE_PARAMS), so mid-animation this was landing on
    // fractional values like 87.3 — which put the two loops one ring out of sync, making the last
    // row of quads reference a vertex index one past the end of the position buffer. Reading that
    // undefined position poisoned both the render (a collapsed/black face) and
    // computeMeshSurfaceArea's sum (NaN, from arithmetic on undefined) — a user screenshot mid-Play
    // caught both symptoms at once.
    const uSegs = Math.max(1, Math.round(Math.min(state.helixTurns * state.segments, 800))); // sane cap on triangle count
    // 'pipe' needs both the sweep params (totalAngle/riseParRad) and the tube's own geometry
    // (rOffset/tubeR) together in one object for pipeFrenetPoint, and a custom evalPoint through
    // buildHelicalGeometry instead of the ordinary radial-sweep computeLayerPoint formula.
    let built;
    if(state.helixGenerator === 'pipe'){
      const pipeParams = {
        totalAngle: params.totalAngle, riseParRad: params.riseParRad,
        rOffset: state.helixTubeOffsetM, tubeR: state.helixTubeRM
      };
      layerPointFn = (y, p) => pipeFrenetPoint(y, h, pipeParams, p);
      built = buildHelicalGeometry(profile, closed, uSegs, h, pipeParams, layerPointFn);
    } else {
      layerPointFn = (y, p) => computeLayerPoint('helix', params, y, h, p);
      built = buildHelicalGeometry(profile, closed, uSegs, h, params);
    }
    sideGeo = built.sideGeo; helixCapA = built.capA; helixCapB = built.capB;
    layerPositions = built.layerPositions; segs = built.segs; n = built.n;
    box = null;
  } else {
    // Morph's profile is [fromX,fromZ,toX,toZ] 4-tuples (buildMorphProfile) rather than scaledProfile's
    // plain [x,z] — everything downstream (box/params below) only ever reads p[0]/p[1], which for
    // Morph is exactly the FROM shape, so it stays correct without special-casing here.
    profile = state.mode === 'morph' ? buildMorphProfile() : scaledProfile(state.preset, state.footprintWidthM, state.footprintDepthM);
    box = {
      minX: Math.min(...profile.map(p=>p[0])), maxX: Math.max(...profile.map(p=>p[0])),
      minZ: Math.min(...profile.map(p=>p[1])), maxZ: Math.max(...profile.map(p=>p[1]))
    };
    params = state.mode === 'ffd' ? { box, cps: ffdControlPoints(box, h, state.ffdOffsets) } : paramsForMode(state.mode);
    const modeForPoint = state.mode, paramsForPoint = params;
    layerPointFn = (y, p) => computeLayerPointCompound(modeForPoint, paramsForPoint, y, h, p);
    // Morph checks BOTH ends for a round preset (Ellipse), not just state.preset — the smooth-
    // normal path reads more naturally on a round endpoint even at the cost of slightly softening
    // the other end's true corners at this resample density (v1.51.0 scope note).
    const smoothXSection = state.mode === 'morph'
      ? !!(PRESET_SMOOTH[state.preset] || PRESET_SMOOTH[state.morphToPreset])
      : !!PRESET_SMOOTH[state.preset];
    ({ sideGeo, bottomCap, topCap, layerPositions, segs, n } = buildDeformedGeometry(
      profile, h, state.segments, state.mode, params, smoothXSection
    ));
  }

  lastBuild = { mode: state.mode, profile, params, h, closed, n, segs, evalPoint: layerPointFn };

  // v1.23.0: a single "how big is the footprint, really" reference, computed from ONLY the first
  // (base) ring of layerPositions rather than the whole solid. Two bugs traced back to using the
  // wrong source for this: (1) Base plane B was sized from the planar (x,z) bounding extent of
  // EVERY layer, so for any mode that curves through world space (Bend especially, whose solid
  // sweeps across a wide arc) the "base plane" ballooned to the size of the whole curved solid's
  // footprint rather than the actual base cross-section — a plane many times larger than the
  // building it was supposed to sit under. (2) Point-label size, the axis arrowhead cone, the
  // surface-normals overlay length, and FFD handle radius all scaled with total height h alone —
  // reasonable for a roughly cube-proportioned model, but for a tall/narrow real-building case study
  // (The Shard: 309.6m tall, ~28m footprint) that let h-proportional sizes balloon to a scale that
  // dwarfed the actual footprint they were meant to mark, e.g. 10 profile-point labels each ~14m
  // wide arranged around a 28m-wide base — guaranteed overlap into an unreadable mass regardless of
  // camera framing. footprintExtent fixes both: it's mode-agnostic (works identically for Helix,
  // where there's no `box`, and every other mode, where `box` already holds the true undeformed
  // cross-section bounds) since it's read directly off the first ring of what was actually built.
  let footMinX=Infinity, footMaxX=-Infinity, footMinZ=Infinity, footMaxZ=-Infinity;
  for(let idx=0; idx<n*3; idx+=3){
    const px = layerPositions[idx], pz = layerPositions[idx+2];
    if(px<footMinX) footMinX=px; if(px>footMaxX) footMaxX=px;
    if(pz<footMinZ) footMinZ=pz; if(pz>footMaxZ) footMaxZ=pz;
  }
  const footprintExtent = Math.max(footMaxX-footMinX, footMaxZ-footMinZ, 0.1);

  // v1.14.2 replaced flat shading (each triangle its own face normal) with analytic per-vertex
  // normals for twist/taper/shear/bend/ffd — computed directly from the deformation's own tangent
  // vectors (buildDeformedGeometry), not from Three.js's face-averaging computeVertexNormals(),
  // so the earlier herringbone bug (v1.12.2, caused by averaging across a per-quad diagonal choice
  // that flips direction quad to quad) can't recur, while also removing the flat-shaded Mach-band
  // striping that was visible as fine horizontal lines at high resolution — that striping was a
  // real, separate issue from the slice-ring z-fighting fixed earlier in v1.14.2, not the same bug.
  // v1.17.1 extended the same analytic-normal treatment to Helix (buildHelicalGeometry) after a user
  // screenshot showed the same Mach-band effect as a dense fan of radiating lines on the Line
  // generator's ramp — so every mode now gets smooth shading, none of them flat.
  const material = new THREE.MeshStandardMaterial({
    color: 0x7d92a0, metalness:0.05, roughness:0.65, flatShading: false,
    side: THREE.DoubleSide, wireframe: state.overlays.wireframe
  });
  const capMaterial = new THREE.MeshStandardMaterial({
    color: 0x64788a, metalness:0.05, roughness:0.7, flatShading: true,
    side: THREE.DoubleSide, wireframe: state.overlays.wireframe
  });


  const sideMesh = new THREE.Mesh(sideGeo, material);
  solidGroup.add(sideMesh);
  let capMeshA = null, capMeshB = null;
  if(state.mode === 'helix'){
    // 'line' generator (open ribbon) has no caps by design — its ends are edges, not faces
    if(helixCapA){ capMeshA = new THREE.Mesh(helixCapA, capMaterial); solidGroup.add(capMeshA); }
    if(helixCapB){ capMeshB = new THREE.Mesh(helixCapB, capMaterial); solidGroup.add(capMeshB); }
  } else {
    capMeshA = new THREE.Mesh(bottomCap, capMaterial);
    capMeshB = new THREE.Mesh(topCap, capMaterial);
    solidGroup.add(capMeshA, capMeshB);
  }
  // v1.27.0: user reported color jitter/flicker (z-fighting) between the solid surface and the
  // Panel flatness (warp) overlay's nudged quads, worst at grazing viewing angles where the 3%
  // outward nudge isn't enough screen-space separation to avoid it on some GPUs/drivers. Rather than
  // pushing the nudge further out (which would visibly detach the panels from the surface they're
  // describing), hide the solid itself while Panel flatness is on — the color-coded panels already
  // cover the same surface at real floor/edge resolution, so nothing readable is lost, and there's
  // no longer any coincident geometry left to fight with. Still added to solidGroup (not skipped)
  // so fitBoxDistance() — which traverses solidGroup regardless of .visible, and backs all three
  // view buttons (v1.31.0) — still sees it and frames correctly even while hidden.
  const hideSolid = state.overlays.panelwarp;
  sideMesh.visible = !hideSolid;
  if(capMeshA) capMeshA.visible = !hideSolid;
  if(capMeshB) capMeshB.visible = !hideSolid;

  // ruling lines: connect each profile point's column across all layers (helix l_i)
  if(state.overlays.rulings){
    const rulingPositions = [];
    for(let i=0;i<n;i++){
      for(let j=0;j<segs;j++){
        const a = (j*n + i) * 3;
        const b = ((j+1)*n + i) * 3;
        rulingPositions.push(
          layerPositions[a], layerPositions[a+1], layerPositions[a+2],
          layerPositions[b], layerPositions[b+1], layerPositions[b+2]
        );
      }
    }
    const rGeo = new THREE.BufferGeometry();
    rGeo.setAttribute('position', new THREE.Float32BufferAttribute(rulingPositions, 3));
    const rMat = new THREE.LineBasicMaterial({ color: 0x9c3226, transparent:true, opacity:0.85 });
    overlayGroup.add(new THREE.LineSegments(rGeo, rMat));
  }

  // slice rings: one ring per computational layer boundary, so the resolution slider is
  // visible in the viewport, not just as a number in the sidebar
  if(state.overlays.slicerings){
    const ringMat = new THREE.LineBasicMaterial({ color: 0xc8932a, transparent:true, opacity:0.6 });
    for(let j=0; j<=segs; j++){
      const ringPts = [];
      for(let i=0;i<=n;i++){
        const idx = (j*n + (i%n)) * 3;
        ringPts.push(new THREE.Vector3(layerPositions[idx], layerPositions[idx+1], layerPositions[idx+2]));
      }
      // Nudge every ring vertex outward from the ring's own centroid before drawing. Unlike the
      // floor-lines overlay (which recomputes its points via computeLayerPoint on a 1.03x-scaled
      // profile), slice rings reuse the raw layerPositions the mesh itself was built from, so at
      // rest they sit exactly coincident with the surface — at higher resolution (many rings close
      // together) that z-fighting reads as a fine horizontal striping artifact across the whole
      // solid rather than a clean ring per layer. A generic post-hoc nudge (rather than a mode-aware
      // recompute) is used here since slice rings are shared across every mode including helix.
      const centroid = new THREE.Vector3();
      ringPts.forEach(p => centroid.add(p));
      centroid.divideScalar(ringPts.length);
      const nudgedPts = ringPts.map(p => p.clone().add(
        new THREE.Vector3().subVectors(p, centroid).multiplyScalar(0.02)
      ));
      const ringGeo = new THREE.BufferGeometry().setFromPoints(nudgedPts);
      overlayGroup.add(new THREE.Line(ringGeo, ringMat));
    }
  }

  // floor lines: a ring at every real floor-to-floor height, independent of the computational
  // resolution above — this is the "how many actual stories is this" readout. In Helix mode there
  // are no floors, so this same toggle/overlay is reused as "turn lines" instead: a ring (or, for
  // the open 'line' generator, a radial spoke) at every full revolution — y=k·pitch lands exactly
  // on u=k·2π since h=turns·pitch and totalAngle=turns·2π, so the same per-k evaluation works.
  if(state.overlays.floorlines){
    // Paper-white reads as a crisp contour against the blue-gray solid — every other overlay color
    // (brick for rulings, ochre for slice rings/base plane, prussian for the axis) is already spoken
    // for, and a light line pops by brightness contrast rather than competing on hue. The nudge
    // pushes the ring just outside the mesh's own surface (which sits at these exact same
    // coordinates), avoiding the z-fighting that was making the old dark, coincident line nearly
    // invisible — same generic centroid-based nudge slice rings use (v1.14.2), applied uniformly
    // here across every mode via layerPointFn rather than the profile-coordinate-scaling approach
    // this used to use for non-helix modes specifically: two different techniques for the identical
    // problem, and the scaling one didn't generalize (it broke for Helix's Pipe generator, whose
    // profile point is a bare angle rather than an [x,z]-like pair — fixed by unifying on this).
    const floorMat = new THREE.LineBasicMaterial({ color: 0xfbfaf6, transparent:true, opacity:0.95 });
    const loopCount = state.mode === 'helix' ? state.helixTurns : state.floors;
    const stepM = state.mode === 'helix' ? state.helixPitchM : state.floorHeightM;
    for(let k=0; k<=loopCount; k++){
      const y = k * stepM;
      const raw = profile.map(p => { const [x,yOut,z] = layerPointFn(y, p); return new THREE.Vector3(x,yOut,z); });
      const centroid = new THREE.Vector3();
      raw.forEach(v => centroid.add(v));
      centroid.divideScalar(raw.length);
      const pts = raw.map(v => v.clone().add(new THREE.Vector3().subVectors(v, centroid).multiplyScalar(0.02)));
      pts.push(pts[0].clone());
      const floorGeo = new THREE.BufferGeometry().setFromPoints(pts);
      overlayGroup.add(new THREE.Line(floorGeo, floorMat));
    }
  }

  // axis A — shear and bend are the two operations that move the axis itself (A1 ≠ A), so they
  // get a shared "moved axis" rendering: the original A stays as a faint dashed reference, A1
  // (solid, brick) shows where it actually went — a straight line for shear, a sampled curve for
  // bend's circular arc. Twist and taper fix the axis, so they just get the single solid line.
  if(state.overlays.axis && state.mode !== 'ffd'){
    // Axis line extends past the top of the solid by design (shows the theoretical axis continuing
    // beyond the form), always scaled to model height so this was never a bug — but 35% read as
    // oversized/dominant in practice, especially at real-building case-study scale where the line is
    // also long in absolute terms. Trimmed to a more restrained 15% overshoot.
    const axisTop = h * 1.15;
    // Arrowhead cone size was a hardcoded (0.09, 0.3) regardless of model scale — invisible on a
    // 300m-tall case study, disproportionately large on a small classroom-scale model. v1.21.0 fixed
    // that by scaling with h, but that overcorrected for tall/narrow buildings (The Shard: 309.6m
    // tall on a ~28m footprint) — a cone sized off total height alone ballooned into a shape bigger
    // than the building was wide, reading as a giant floating teardrop rather than a small arrowhead.
    // v1.23.0: scales with footprintExtent instead, since an arrowhead's job is to read as a small
    // marker against the building's own width, not its height.
    const coneR = Math.max(footprintExtent*0.03, 0.06), coneH = coneR * 3.3;
    // v1.50.0: also draw A/A1 when the SECONDARY compound operation moves the axis, even if the
    // primary one (twist/taper) doesn't — e.g. Twist then Shear still leans the axis away from A.
    const axisMoves = mode => mode === 'shear' || mode === 'bend';
    if(axisMoves(state.mode) || axisMoves(state.compoundMode)){
      const aGeo = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(0,0,0), new THREE.Vector3(0, axisTop, 0)
      ]);
      const aMat = new THREE.LineDashedMaterial({ color: 0x1f4e79, dashSize:0.15, gapSize:0.1, transparent:true, opacity:0.5 });
      const aLine = new THREE.Line(aGeo, aMat);
      aLine.computeLineDistances();
      overlayGroup.add(aLine);

      // A1: exactly 2 points when nothing bends the axis (still provably straight even compounded —
      // twist/taper/shear/morph all move the on-axis point linearly in y, or not at all for morph
      // since (0,0)->(0,0) has nothing to lerp); sample the curve whenever bend is anywhere in the
      // chain — computeLayerPointCompound at the on-axis point gives A1 for any mode or compound
      // combination generically, so this needs no special-casing beyond which count to use.
      // v1.51.5: the on-axis point itself DOES need one piece of mode-awareness — Morph's compute
      // branch expects a 4-element [fromX,fromZ,toX,toZ] point, not the 2-element [x,z] every other
      // mode uses; feeding it [0,0] silently produced NaN (present since Morph shipped in v1.51.0,
      // just never exercised until Morph could be a compound primary drew a fresh look at this call).
      const axisOriginPoint = state.mode === 'morph' ? [0,0,0,0] : [0,0];
      const sampleCount = (state.mode === 'bend' || state.compoundMode === 'bend') ? 48 : 1;
      const a1Points = [];
      for(let k=0; k<=sampleCount; k++){
        const y = (k/sampleCount) * axisTop;
        const [ax,ay,az] = computeLayerPointCompound(state.mode, params, y, h, axisOriginPoint);
        a1Points.push(new THREE.Vector3(ax, ay, az));
      }
      const a1Geo = new THREE.BufferGeometry().setFromPoints(a1Points);
      const a1Mat = new THREE.LineBasicMaterial({ color: 0x9c3226 });
      overlayGroup.add(new THREE.Line(a1Geo, a1Mat));

      const tip = a1Points[a1Points.length-1];
      const prev = a1Points[a1Points.length-2];
      const tipDir = new THREE.Vector3().subVectors(tip, prev).normalize();
      const cone = new THREE.Mesh(
        new THREE.ConeGeometry(coneR, coneH, 12),
        new THREE.MeshBasicMaterial({ color: 0x9c3226 })
      );
      cone.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), tipDir);
      cone.position.copy(tip);
      overlayGroup.add(cone);
    } else {
      const axisGeo = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(0,0,0), new THREE.Vector3(0, axisTop, 0)
      ]);
      const axisMat = new THREE.LineBasicMaterial({ color: 0x1f4e79 });
      overlayGroup.add(new THREE.Line(axisGeo, axisMat));
      const cone = new THREE.Mesh(
        new THREE.ConeGeometry(coneR, coneH, 12),
        new THREE.MeshBasicMaterial({ color: 0x1f4e79 })
      );
      cone.position.set(0, axisTop, 0);
      overlayGroup.add(cone);
    }
  }

  // origin marker — a small "you are here" reference at the true (0,0,0) world origin, tied to the
  // Axis toggle but shown regardless of mode (including FFD, which otherwise skips the axis line
  // itself since FFD has no axis of its own — a fixed anchor point is still useful there).
  if(state.overlays.axis){
    const originMarker = new THREE.Mesh(
      new THREE.SphereGeometry(Math.max(footprintExtent*0.02, 0.06), 12, 8),
      new THREE.MeshBasicMaterial({ color: 0x1a1a18 })
    );
    originMarker.position.set(0, 0, 0);
    overlayGroup.add(originMarker);
    const originLabel = spriteLabel('0,0,0', '#1a1a18');
    const originOffset = footprintExtent*0.04+0.1;
    originLabel.position.set(originOffset, originOffset*0.6+0.1, originOffset);
    overlayGroup.add(originLabel);
  }

  // base plane B — size was a hardcoded 4.2 regardless of the actual model, so it rendered far
  // smaller than the solid itself on any real-building-scale case study (Cayan Tower's footprint
  // alone is ~22m). v1.21.0 fixed that by deriving it from the (x,z) bounding extent of every
  // layerPositions point — correct for a mode that stays roughly above its own footprint (Twist,
  // Taper), but wrong for one that sweeps sideways through world space as it rises (Bend especially:
  // the whole curved solid's footprint was being measured, not the base cross-section, so the "base
  // plane" could balloon to many times the size of the building actually sitting on it). v1.23.0:
  // reuses footprintExtent (first ring only, computed once above) instead, so this is now the true
  // base cross-section size for every mode, Helix included, with no per-mode special-casing.
  if(state.overlays.plane){
    const size = Math.max(footprintExtent * 1.6, 3);
    const planeGeo = new THREE.PlaneGeometry(size, size);
    const planeMat = new THREE.MeshBasicMaterial({ color:0xc8932a, transparent:true, opacity:0.14, side:THREE.DoubleSide });
    const planeMesh = new THREE.Mesh(planeGeo, planeMat);
    planeMesh.rotation.x = -Math.PI/2;
    overlayGroup.add(planeMesh);
    const edges = new THREE.LineSegments(
      new THREE.EdgesGeometry(planeGeo),
      new THREE.LineBasicMaterial({ color:0xc8932a })
    );
    edges.rotation.x = -Math.PI/2;
    overlayGroup.add(edges);
  }

  // point labels a,b,c (bottom) -> a1,b1,c1 (top), first up-to-3 profile verts. Positions now come
  // from layerPointFn (the same evaluator that actually built what's on screen — see its definition
  // above) rather than hand-approximating from the raw generator coordinates, since that
  // approximation only held for the ordinary radial-sweep helix formula (line/circle) and would have
  // placed Pipe's labels using its unrelated (angle, unused) generator coordinates.
  if(state.overlays.labels){
    // Two bugs here, both visible together as an unreadable red/black mass on any tall/narrow
    // real-building case study with a many-point smooth cross-section (e.g. The Shard + Ellipse):
    // (1) this used to take the first min(n,10) points BY ARRAY INDEX. That's every real corner for
    // the low-vertex polygons (square=4, triangle=3, hexagon=6, octagon=8, star=10), but Ellipse
    // (n=32) and Helix's Circle/Pipe generators (n=24) are densely-sampled smooth loops with no real
    // corners — their first 10 points are a tightly-clustered ~90° arc, not 10 points spread around
    // the shape, so labels landed on top of each other by construction regardless of size. Now
    // samples evenly around the loop (stride = n/numLabels) instead, which is a no-op for the
    // low-vertex polygons (n <= 10, stride 1, identical output) and fixes the smooth-loop case.
    // (2) size scaled with total height h alone (v1.14.2), reasonable for a roughly cube-proportioned
    // model but not for a tall/narrow one (The Shard: 309.6m tall, ~28m footprint) — h-proportional
    // labels ballooned past the footprint they were arranged around. Now scales with the footprint
    // extent divided by how many labels actually have to fit around it, so it tracks real available
    // spacing instead of a dimension (height) that has nothing to do with label spacing.
    const numLabels = Math.min(n, 10);
    const labelStride = Math.max(1, Math.floor(n/numLabels));
    const labelSizeMult = Math.max(Math.min(footprintExtent/numLabels*0.5, footprintExtent*0.12), 0.5);
    const names = ['a','b','c','d','e','f','g','h','i','j'];
    for(let k=0;k<numLabels;k++){
      const i = (k*labelStride) % n;
      const bp = profile[i];
      const [bx,byOut,bz] = layerPointFn(0, bp);
      const bLabel = spriteLabel(names[k], '#1a1a18', labelSizeMult);
      if(state.mode === 'helix'){
        // Multiplicative outward nudge breaks down right on the axis (0 * anything is still 0) —
        // e.g. Line's inner point at rInner=0, or any generator point that lands at x=z=0 at u=0 —
        // so those get a small additive fallback instead, same idea the old u=0-specific code used.
        const nudge = (v) => Math.abs(v) < 0.01 ? 0.12 : v*1.06;
        bLabel.position.set(nudge(bx), byOut+0.25, nudge(bz));
      } else {
        bLabel.position.set(bx*1.12, byOut+0.25, bz*1.12);
      }
      overlayGroup.add(bLabel);

      const [tx,tyOut,tz] = layerPointFn(h, bp);
      const tLabel = spriteLabel(names[k]+'₁', '#b23a2e', labelSizeMult);
      tLabel.position.set(tx*1.12, tyOut+0.25, tz*1.12);
      overlayGroup.add(tLabel);
    }
  }

  // Debug/pedagogical overlay: one short outward-pointing segment per profile corner per FLOOR (not
  // per resolution slice — resolution can run past 100, which would be an unreadable haze). Reuses
  // the exact same finite-difference technique the mesh builders themselves use for their own
  // analytic normals (v1.14.3 for twist/taper/shear/bend/ffd, v1.17.1 for helix, v1.18.0 for
  // ellipse), rather than a separate approximation — this overlay is meant to show what the render
  // mesh is actually doing, corners included, not a simplified stand-in for it. Color is a cool
  // violet, deliberately outside the rest of the overlay palette (brick/ochre/prussian/paper-white)
  // rather than a nearby orange that read as a shade of the existing ochre (slice rings, base plane)
  // when both were on at once — a debug-only overlay should be visually unmistakable from the
  // others, not just technically distinct.
  if(state.overlays.normals){
    const normalMat = new THREE.LineBasicMaterial({ color: 0x6a3d9a });
    // Was h*0.03 — same tall/narrow problem as the label sprites and axis cone: scaled with total
    // height regardless of footprint, so normals ballooned past the building's own width on a case
    // study like The Shard. footprintExtent-relative instead.
    const normalLen = Math.max(footprintExtent*0.075, 0.4);
    const loopCount = state.mode === 'helix' ? state.helixTurns : state.floors;
    const stepM = state.mode === 'helix' ? state.helixPitchM : state.floorHeightM;
    const dY = Math.max(h/200, 1e-4);
    const normalPositions = [];
    for(let k=0; k<=loopCount; k++){
      const y = Math.min(k * stepM, h);
      const yLo = Math.max(0, y-dY), yHi = Math.min(h, y+dY);
      const denom = (yHi - yLo) || dY;
      for(let i=0;i<n;i++){
        const [x,yOut,z] = layerPointFn(y, profile[i]);
        const pLo = layerPointFn(yLo, profile[i]), pHi = layerPointFn(yHi, profile[i]);
        const tHeight = [ (pHi[0]-pLo[0])/denom, (pHi[1]-pLo[1])/denom, (pHi[2]-pLo[2])/denom ];
        // Central difference across neighboring profile points, same as the smooth cross-section
        // path (v1.18.0) and buildHelicalGeometry (v1.17.1) — at a real polygon corner this gives an
        // averaged direction rather than either adjacent panel's exact normal, a reasonable choice
        // for a lightweight "which way is outward here" overlay rather than a literal render match.
        const iPrev = closed ? (i-1+n)%n : Math.max(i-1, 0);
        const iNext = closed ? (i+1)%n : Math.min(i+1, n-1);
        const pPrev = layerPointFn(y, profile[iPrev]), pNext = layerPointFn(y, profile[iNext]);
        const tGen = [ pNext[0]-pPrev[0], pNext[1]-pPrev[1], pNext[2]-pPrev[2] ];
        // Cross order matches whichever winding convention is in play — buildHelicalGeometry uses
        // the opposite order from buildDeformedGeometry's own faceted/smooth paths (see its comment
        // on why), so this branches the same way rather than picking one and getting Helix backwards.
        const nrm = state.mode === 'helix'
          ? normalize3(cross3(tGen, tHeight))
          : normalize3(cross3(tHeight, tGen));
        normalPositions.push(x, yOut, z, x+nrm[0]*normalLen, yOut+nrm[1]*normalLen, z+nrm[2]*normalLen);
      }
    }
    const normalGeo = new THREE.BufferGeometry();
    normalGeo.setAttribute('position', new THREE.Float32BufferAttribute(normalPositions, 3));
    overlayGroup.add(new THREE.LineSegments(normalGeo, normalMat));
  }

  // Panel flatness / warp (v1.22.0) — stats are always computed (cheap: floors x edges, not
  // floors x render resolution) so the HUD number stays live even with the visual overlay off;
  // only the colored quad mesh itself is gated behind the toggle. Floors/floorHeightM for the first
  // five modes — a real architectural unit, matching floor lines/normals. Helix does NOT reuse
  // turns/pitch here the way floor lines does: a "panel" spanning one entire 360-degree turn isn't
  // a real fabrication unit the way a floor-to-floor curtain-wall panel is, and for the Line
  // generator specifically (only 2 profile points, 1 edge spanning the whole ribbon width) it broke
  // outright — the quad connecting a turn's start to its end lands at the SAME angle (one full
  // revolution later), so it rendered as a large flat plane slicing straight through the helix
  // instead of tracking the ribbon's actual curve (v1.24.0 user report/screenshot: a big green
  // plane where no such surface exists). Uses the render resolution (segs) instead, the same
  // per-slice granularity slice rings already show — small enough for the flat-quad approximation
  // to actually track the swept surface, and a genuine fabrication-relevant unit for a helical
  // ribbon/stair stringer (small flat segments are literally how one would be built from stock).
  {
    const loopCount = state.mode === 'helix' ? segs : state.floors;
    const stepM = state.mode === 'helix' ? h/segs : state.floorHeightM;
    // v1.28.0: subdivide each real edge into state.panelSubdiv narrower bays before measuring warp
    // — subPerEdge=1 is a no-op, returning the original profile/n unchanged.
    const { subProfile, subN } = subdivideProfileForPanels(profile, n, closed, state.panelSubdiv);
    const { panels, maxWarpM } = computePanelWarp(subProfile, layerPointFn, subN, closed, loopCount, stepM);
    lastMaxWarpM = maxWarpM;
    document.getElementById('hudPanelWarp').textContent =
      toDisplaySmallLen(maxWarpM).toFixed(1) + ' ' + smallLenUnit();
    if(panels.length){
      // Representative panel width (first panel's own edge length at the base) so the sidebar note
      // reads e.g. "~7.7ft wide panels" instead of leaving the user to guess what N bays means in
      // real units — recomputed every rebuild since it depends on the live footprint size too.
      const p0 = panels[0].p00, p1 = panels[0].p01;
      const panelWidthM = Math.hypot(p1[0]-p0[0], p1[1]-p0[1], p1[2]-p0[2]);
      document.getElementById('panelSubdivNote').textContent =
        `~${toDisplayLen(panelWidthM).toFixed(1)}${unitLabels().len} wide panels`;
    }

    const warpLegendEl = document.getElementById('warpLegend');
    if(state.overlays.panelwarp){
      // In-canvas color-scale legend, so the green->amber->red gradient on the model has a key
      // right next to it instead of only a single "max" number in the sidebar HUD — same 0-50mm
      // illustrative range warpColor() uses, converted to the active unit system (mm/in), matching
      // the finer-grained unit toDisplaySmallLen()/smallLenUnit() already use for the HUD row.
      warpLegendEl.classList.add('show');
      document.getElementById('warpLegendBar').classList.toggle('colorblind', state.overlays.colorblindPalette);
      const u2 = smallLenUnit();
      document.getElementById('warpLegendLo').textContent = '0';
      document.getElementById('warpLegendMid').textContent = toDisplaySmallLen(0.025).toFixed(0) + u2;
      document.getElementById('warpLegendHi').textContent = toDisplaySmallLen(0.05).toFixed(0) + u2 + '+';
      // v1.30.0: the gradient itself clamps at 50mm (every panel past that reads identically red),
      // so a marker on the bar plus an explicit "actual max" readout shows where THIS model's worst
      // panel actually falls — including well past the display range, which the color alone can't
      // distinguish (200mm and 51mm both render as solid red without this).
      const maxWarpMM = maxWarpM * 1000;
      const pct = Math.min(Math.max(maxWarpMM / 50, 0), 1) * 100;
      document.getElementById('warpLegendMarker').style.left = pct + '%';
      const actualStr = toDisplaySmallLen(maxWarpM).toFixed(1) + u2;
      document.getElementById('warpLegendActual').textContent =
        maxWarpMM > 50 ? `actual max: ${actualStr} (off scale)` : `actual max: ${actualStr}`;

      const positions = [], colors = [], outlinePositions = [];
      for(const panel of panels){
        const { p00, p01, p10, p11, warpAbsM } = panel;
        // Nudge every corner outward from the panel's own centroid, same technique slice rings
        // (v1.14.2) and floor lines (v1.21.0 unification) use to avoid z-fighting with the
        // coincident solid surface underneath.
        const cx = (p00[0]+p01[0]+p10[0]+p11[0])/4;
        const cy = (p00[1]+p01[1]+p10[1]+p11[1])/4;
        const cz = (p00[2]+p01[2]+p10[2]+p11[2])/4;
        const nudge = (p) => [ p[0]+(p[0]-cx)*0.03, p[1]+(p[1]-cy)*0.03, p[2]+(p[2]-cz)*0.03 ];
        const q00 = nudge(p00), q01 = nudge(p01), q10 = nudge(p10), q11 = nudge(p11);
        const col = warpColor(warpAbsM);
        // Two triangles per panel (00,01,11) and (00,11,10) — winding doesn't matter here since
        // the material is double-sided and unlit (color-coding, not shading, carries the meaning).
        positions.push(...q00, ...q01, ...q11, ...q00, ...q11, ...q10);
        for(let v=0; v<6; v++) colors.push(...col);
        // v1.29.0: user reported the panel boundaries were hard to read — with subdivideProfileForPanels
        // splitting a face into several bays, two neighboring panels often land at similar-enough warp
        // values to get near-identical fill colors, so without an explicit boundary the whole face read
        // as one undifferentiated wash of color instead of N distinct panels. Nudged slightly further out
        // than the fill itself (0.045 vs 0.03) so the outline never z-fights with its own panel fill.
        const outerNudge = (p) => [ p[0]+(p[0]-cx)*0.045, p[1]+(p[1]-cy)*0.045, p[2]+(p[2]-cz)*0.045 ];
        const o00 = outerNudge(p00), o01 = outerNudge(p01), o10 = outerNudge(p10), o11 = outerNudge(p11);
        outlinePositions.push(...o00,...o01, ...o01,...o11, ...o11,...o10, ...o10,...o00);
      }
      const warpGeo = new THREE.BufferGeometry();
      warpGeo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
      warpGeo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
      const warpMat = new THREE.MeshBasicMaterial({
        vertexColors: true, side: THREE.DoubleSide, transparent: true, opacity: 0.62, depthWrite: false
      });
      overlayGroup.add(new THREE.Mesh(warpGeo, warpMat));

      const outlineGeo = new THREE.BufferGeometry();
      outlineGeo.setAttribute('position', new THREE.Float32BufferAttribute(outlinePositions, 3));
      const outlineMat = new THREE.LineBasicMaterial({ color: 0x1a1a18, transparent: true, opacity: 0.55 });
      overlayGroup.add(new THREE.LineSegments(outlineGeo, outlineMat));
    } else {
      warpLegendEl.classList.remove('show');
    }
  }

  // FFD control lattice + draggable handles — always shown in this mode since dragging them IS
  // the interaction, not an optional decoration like the other overlays.
  ffdHandleMeshes = [];
  if(state.mode === 'ffd'){
    // Same footprintExtent-relative treatment as the axis cone/labels/normals above, for the same
    // reason — a handle sized off total height alone would over/undershoot on a tall, narrow box.
    const handleR = Math.max(footprintExtent*0.05, 0.15);
    const cageMat = new THREE.LineBasicMaterial({ color: 0x9c3226, transparent:true, opacity:0.55 });
    const cagePts = [];
    // 12 edges of the control cuboid, connecting adjacent corners (differ in exactly one index)
    for(let iu=0; iu<2; iu++) for(let iv=0; iv<2; iv++) for(let iw=0; iw<2; iw++){
      const here = params.cps[iu*4+iv*2+iw];
      if(iu===0){ const there=params.cps[1*4+iv*2+iw]; cagePts.push(new THREE.Vector3(...here), new THREE.Vector3(...there)); }
      if(iv===0){ const there=params.cps[iu*4+1*2+iw]; cagePts.push(new THREE.Vector3(...here), new THREE.Vector3(...there)); }
      if(iw===0){ const there=params.cps[iu*4+iv*2+1]; cagePts.push(new THREE.Vector3(...here), new THREE.Vector3(...there)); }
    }
    const cageGeo = new THREE.BufferGeometry().setFromPoints(cagePts);
    overlayGroup.add(new THREE.LineSegments(cageGeo, cageMat));

    for(let idx=0; idx<8; idx++){
      const cp = params.cps[idx];
      const handle = new THREE.Mesh(
        new THREE.SphereGeometry(handleR, 16, 12),
        new THREE.MeshStandardMaterial({ color: 0x9c3226, metalness:0.1, roughness:0.5 })
      );
      handle.position.set(cp[0], cp[1], cp[2]);
      handle.userData.ffdIndex = idx;
      overlayGroup.add(handle);
      ffdHandleMeshes.push(handle);
    }
  }

  // HUD numbers — unit-aware and mode-aware. Helix branches out entirely here: it isn't a solid (the
  // common helicoid has a hole around the axis and zero thickness), so there's no volume to report —
  // the volume rows are repurposed to surface area (measured, like FFD's volume, since no closed form
  // exists for an arbitrary helical sweep either) and generator length, and the Cavalieri-style match
  // row is repurposed to name which book figure/surface is currently showing.
  const u = unitLabels();

  if(state.mode === 'helix'){
    document.getElementById('hudParam1Label').textContent = 'turns';
    document.getElementById('hudParam1').textContent = state.helixTurns;
    document.getElementById('hudParam2Label').textContent = 'pitch (rise/turn)';
    document.getElementById('hudParam2').textContent = toDisplayLen(state.helixPitchM).toFixed(1) + ' ' + u.len;
    document.getElementById('hudHeight').textContent = toDisplayLen(h).toFixed(1) + ' ' + u.len;

    const genLen = state.helixGenerator === 'line'
      ? (helixROuterC - state.helixRInnerM)
      : (2*Math.PI*state.helixTubeRM); // same circumference formula for 'circle' and 'pipe'
    document.getElementById('hudAreaLabel').textContent = 'generator length';
    document.getElementById('hudArea').textContent = toDisplayLen(genLen).toFixed(2) + ' ' + u.len;

    const surfaceArea = computeMeshSurfaceArea(sideGeo, helixCapA, helixCapB);
    document.getElementById('hudVolTwistLabel').textContent = 'surface area';
    document.getElementById('hudVolTwist').textContent = toDisplayArea(surfaceArea).toFixed(2) + ' ' + u.area;
    document.getElementById('hudVolStraightLabel').textContent = 'generator';
    document.getElementById('hudVolStraight').textContent =
      state.helixGenerator === 'line' ? 'line (ramp)'
      : state.helixGenerator === 'circle' ? 'circle (tube)'
      : 'circle ⊥ tangent (pipe)';

    const matchEl = document.getElementById('hudMatch');
    matchEl.textContent =
      state.helixGenerator === 'line' ? 'common helicoid — open ruled surface (no volume to preserve)'
      : state.helixGenerator === 'circle' ? 'circle swept in the meridian plane — winding tube'
      : 'circle held orthogonal to the tangent (Frenet frame) — true constant-radius pipe';
  } else {
    document.getElementById('hudAreaLabel').textContent = 'base area';
    document.getElementById('hudVolTwistLabel').textContent = 'deformed volume';
    document.getElementById('hudVolStraightLabel').textContent = 'prism volume';

    const baseArea = polygonArea(profile);
    // v1.50.0: computeDeformedVolume's closed forms (Cavalieri-preserved for twist/shear/bend, the
    // quadratic formula for taper) were each derived for a SINGLE operation — chaining two changes
    // the actual math (e.g. Twist then Taper does scale volume, unlike Twist alone) without a new
    // closed form being worth deriving, so this falls back to the same numeric mesh integration FFD
    // already uses whenever compounding is active, regardless of which two operations are chained.
    const volDeformed = (state.mode === 'ffd' || state.mode === 'morph' || state.compoundMode)
      ? computeMeshVolume(sideGeo, bottomCap, topCap)
      : computeDeformedVolume(state.mode, params, baseArea, h);
    const volPrism = baseArea * h;
    lastVolDeformed = volDeformed;
    lastVolPrism = volPrism;

    if(state.mode === 'taper'){
      document.getElementById('hudParam1Label').textContent = 'v (x-scale @ top)';
      document.getElementById('hudParam1').textContent = state.taperV.toFixed(2);
      document.getElementById('hudParam2Label').textContent = 'w (y-scale @ top)';
      document.getElementById('hudParam2').textContent = state.taperW.toFixed(2);
    } else if(state.mode === 'shear'){
      document.getElementById('hudParam1Label').textContent = 'Δx @ top';
      document.getElementById('hudParam1').textContent = toDisplayLen(state.shearDXM).toFixed(1) + ' ' + u.len;
      document.getElementById('hudParam2Label').textContent = 'Δy @ top';
      document.getElementById('hudParam2').textContent = toDisplayLen(state.shearDYM).toFixed(1) + ' ' + u.len;
    } else if(state.mode === 'bend'){
      const betaRad = state.bendBetaMax * Math.PI/180;
      const R = Math.abs(betaRad) < 1e-6 ? Infinity : h/betaRad;
      document.getElementById('hudParam1Label').textContent = 'β_max';
      document.getElementById('hudParam1').textContent = state.bendBetaMax.toFixed(0) + '°';
      document.getElementById('hudParam2Label').textContent = 'radius R (h/β)';
      document.getElementById('hudParam2').textContent = Number.isFinite(R) ? toDisplayLen(Math.abs(R)).toFixed(1) + ' ' + u.len : '∞ (straight)';
    } else if(state.mode === 'ffd'){
      const maxOffset = Math.max(0, ...state.ffdOffsets.map(o=>Math.hypot(o.dx,o.dy,o.dz)));
      document.getElementById('hudParam1Label').textContent = 'degree';
      document.getElementById('hudParam1').textContent = '(1,1,1) trilinear';
      document.getElementById('hudParam2Label').textContent = 'max handle offset';
      document.getElementById('hudParam2').textContent = toDisplayLen(maxOffset).toFixed(1) + ' ' + u.len;
    } else if(state.mode === 'morph'){
      document.getElementById('hudParam1Label').textContent = 'from shape';
      document.getElementById('hudParam1').textContent = PRESET_LABELS[state.preset];
      document.getElementById('hudParam2Label').textContent = 'to shape';
      document.getElementById('hudParam2').textContent = PRESET_LABELS[state.morphToPreset];
    } else {
      document.getElementById('hudParam1Label').textContent = 'α_max';
      document.getElementById('hudParam1').textContent = state.alphaMax.toFixed(0) + '°';
      document.getElementById('hudParam2Label').textContent = 'α at h/2';
      document.getElementById('hudParam2').textContent = (state.alphaMax/2).toFixed(1) + '°';
    }
    const hudCompoundRow = document.getElementById('hudCompoundRow');
    if(state.compoundMode){
      hudCompoundRow.style.display = '';
      document.getElementById('hudCompound').textContent = modeParamSummary(state.compoundMode);
    } else {
      hudCompoundRow.style.display = 'none';
    }
    document.getElementById('hudHeight').textContent = toDisplayLen(h).toFixed(1) + ' ' + u.len;
    document.getElementById('hudArea').textContent = toDisplayArea(baseArea).toFixed(2) + ' ' + u.area;
    document.getElementById('hudVolTwist').textContent = toDisplayVol(volDeformed).toFixed(2) + ' ' + u.vol;
    document.getElementById('hudVolStraight').textContent = toDisplayVol(volPrism).toFixed(2) + ' ' + u.vol;

    const matchEl = document.getElementById('hudMatch');
    const ratio = volPrism > 0 ? volDeformed / volPrism : 1;
    if(Math.abs(ratio - 1) < 0.001){
      matchEl.innerHTML = 'volumes match — <span class="term" data-term="cavalieri">Cavalieri holds</span>';
    } else {
      matchEl.textContent = `deformed volume is ${(ratio*100).toFixed(0)}% of the prism — this operation doesn't preserve volume`;
    }
  }

  // v1.24.0: this used to unconditionally call controls.target.set(0, h/2, 0) here on every single
  // rebuild() — every slider tick, every overlay checkbox — which silently snapped any panning the
  // user had done back to dead-center, since OrbitControls.update() runs every animation frame
  // regardless (see animate() below) and picks up the new target on the very next frame. Reported
  // as "canvas frame jumps/shift" after toggling Panel flatness off, but the toggle itself was
  // incidental — ANY rebuild-triggering interaction after panning would have caused the same jump.
  // frameCameraDefault() already sets controls.target correctly (to the actual box center) and only
  // runs when pendingReframe is true, so it alone is responsible for target now — consistent with
  // camera position/distance, which likewise only move on an actual reframe, never on a plain
  // slider drag or toggle.
  // Factored out so the same short-form text works for the primary operation (as before) and, when
  // compounding, the secondary one too — one formatting rule instead of two copies to keep in sync.
  function modeParamSummary(mode){
    return mode === 'taper' ? `Taper v${state.taperV.toFixed(2)} w${state.taperW.toFixed(2)}`
      : mode === 'shear' ? `Shear Δx${toDisplayLen(state.shearDXM).toFixed(1)}${u.len} Δy${toDisplayLen(state.shearDYM).toFixed(1)}${u.len}`
      : mode === 'bend' ? `Bend β_max ${state.bendBetaMax}°`
      : mode === 'morph' ? `Morph ${PRESET_LABELS[state.preset]}→${PRESET_LABELS[state.morphToPreset]}`
      : `Twist α_max ${state.alphaMax}°`;
  }
  const paramSummary = state.mode === 'ffd'
    ? `Free (1,1,1) FFD`
    : state.mode === 'helix'
    ? `Helix ${state.helixGenerator} ${state.helixTurns}× p${toDisplayLen(state.helixPitchM).toFixed(1)}${u.len}`
    : modeParamSummary(state.mode) + (state.compoundMode ? ` → then ${modeParamSummary(state.compoundMode)}` : '');
  const helixGenFooterLabel = { line:'Line generator', circle:'Circle generator', pipe:'Pipe generator' }[state.helixGenerator];
  document.getElementById('footRight').textContent = state.mode === 'helix'
    ? `${helixGenFooterLabel} · ${paramSummary} · ${state.helixTurns} turns · h ${toDisplayLen(h).toFixed(1)}${u.len} · ${segs} segments`
    : `${PRESET_LABELS[state.preset]} · ${paramSummary} · ${state.floors} floors · h ${toDisplayLen(h).toFixed(1)}${u.len} · ${state.segments} slices`;

  if(pendingReframe){ frameCameraDefault(); pendingReframe = false; }

  // Keep lastModelRadius current every rebuild (not just on an actual reframe) so animate()'s
  // per-frame near/far always has an up-to-date buffer, even for changes that don't reframe the
  // camera (e.g. dragging floors or footprint sliders, which deliberately don't disturb the view).
  const radiusBox = new THREE.Box3().setFromObject(solidGroup);
  if(!radiusBox.isEmpty()) lastModelRadius = radiusBox.getSize(new THREE.Vector3()).length() / 2;
  syncGroundGridExtent(lastModelRadius);
}

// ---------- UI wiring ----------
const presetGrid = document.getElementById('presetGrid');
Object.keys(PROFILES).forEach(key=>{
  const btn = document.createElement('button');
  btn.className = 'preset-btn' + (state.preset===key ? ' active':'');
  btn.textContent = PRESET_LABELS[key];
  btn.dataset.preset = key;
  btn.addEventListener('click', ()=>{
    state.preset = key;
    [...presetGrid.children].forEach(c=>c.classList.remove('active'));
    btn.classList.add('active');
    pendingReframe = true;
    persist(); rebuild();
    applyModeChrome(); // refreshes the tagline if this was Morph's From-shape picker
    toast(PRESET_LABELS[key] + ' profile loaded');
  });
  presetGrid.appendChild(btn);
});

const morphToGrid = document.getElementById('morphToGrid');
Object.keys(PROFILES).forEach(key=>{
  const btn = document.createElement('button');
  btn.className = 'preset-btn' + (state.morphToPreset===key ? ' active':'');
  btn.textContent = PRESET_LABELS[key];
  btn.dataset.morphto = key;
  btn.addEventListener('click', ()=>{
    state.morphToPreset = key;
    [...morphToGrid.children].forEach(c=>c.classList.remove('active'));
    btn.classList.add('active');
    pendingReframe = true;
    persist(); rebuild();
    applyModeChrome(); // refreshes the tagline to reflect the new To-shape
    toast('To shape: ' + PRESET_LABELS[key]);
  });
  morphToGrid.appendChild(btn);
});

const alphaSlider = document.getElementById('alphaSlider');
const taperVSlider = document.getElementById('taperVSlider');
const taperWSlider = document.getElementById('taperWSlider');
const shearDXSlider = document.getElementById('shearDXSlider');
const shearDYSlider = document.getElementById('shearDYSlider');
const bendBetaSlider = document.getElementById('bendBetaSlider');
const floorsSlider = document.getElementById('floorsSlider');
const floorHeightSlider = document.getElementById('floorHeightSlider');
const resSlider = document.getElementById('resSlider');
const loftProfileCountSlider = document.getElementById('loftProfileCountSlider');
const helixTurnsSlider = document.getElementById('helixTurnsSlider');
const helixPitchSlider = document.getElementById('helixPitchSlider');
const helixRInnerSlider = document.getElementById('helixRInnerSlider');
const helixROuterSlider = document.getElementById('helixROuterSlider');
const helixTubeRSlider = document.getElementById('helixTubeRSlider');
const helixTubeOffsetSlider = document.getElementById('helixTubeOffsetSlider');
const footprintWidthSlider = document.getElementById('footprintWidthSlider');
const footprintDepthSlider = document.getElementById('footprintDepthSlider');
const morphToWidthSlider = document.getElementById('morphToWidthSlider');
const morphToDepthSlider = document.getElementById('morphToDepthSlider');
const panelSubdivSlider = document.getElementById('panelSubdivSlider');
const toleranceTargetSlider = document.getElementById('toleranceTargetSlider');
alphaSlider.value = state.alphaMax;
taperVSlider.value = state.taperV;
taperWSlider.value = state.taperW;
bendBetaSlider.value = state.bendBetaMax;
floorsSlider.value = state.floors;
resSlider.value = state.segments;
loftProfileCountSlider.value = state.loftProfileCount;
helixTurnsSlider.value = state.helixTurns;
panelSubdivSlider.value = state.panelSubdiv;
document.getElementById('panelSubdivVal').textContent = state.panelSubdiv + (state.panelSubdiv===1 ? ' panel' : ' panels');
toleranceTargetSlider.value = state.toleranceTargetMM;
function syncToleranceTargetLabel(){
  document.getElementById('toleranceTargetVal').textContent =
    toDisplaySmallLen(state.toleranceTargetMM/1000).toFixed(0) + smallLenUnit();
}
syncToleranceTargetLabel();

// v1.34.0: sliders that can change the model's actual size/shape extent (as opposed to purely
// visual density — resolution, loft profile count, panel subdivision) previously never triggered a
// reframe at all, even on a huge change (e.g. floors 8 -> 100). Only the button-triggered actions
// (Operation, preset, case study, Reset values) set pendingReframe (v1.23.0) — deliberately, so a
// live drag never yanks the camera mid-gesture. But that meant dragging floors, footprint, or any
// deformation parameter far enough could leave the model stuck outside the frame with no recovery
// short of manually clicking Home. The 'change' event (fires once when the drag is released, unlike
// 'input' which fires continuously during it) is the right hook: it preserves the live-drag
// experience completely — the camera never moves while dragging — but re-fits once the user lets
// go, so a big change doesn't strand the model off-screen. Same list of fields (length/count/ratio,
// not resolution) also gets this via bindEditableValue's commit() below, for typed values.
const SIZE_AFFECTING_SLIDERS = [
  alphaSlider, taperVSlider, taperWSlider, shearDXSlider, shearDYSlider, bendBetaSlider,
  floorsSlider, floorHeightSlider, helixTurnsSlider, helixPitchSlider, helixRInnerSlider,
  helixROuterSlider, helixTubeRSlider, helixTubeOffsetSlider, footprintWidthSlider, footprintDepthSlider
];
SIZE_AFFECTING_SLIDERS.forEach(sliderEl=>{
  sliderEl.addEventListener('change', ()=>{ pendingReframe = true; rebuild(); });
});

const REFERENCE_TEXT = {
  twist: `Twist keeps a base plane B and a vertical axis A fixed, and rotates every horizontal slice at
    height z by α(z) = (z/h)·α_max — a linear ramp from 0° at the base to α_max at the top. Straight
    vertical edges become helices, since each one traces a rotating radius as it rises; a flat wall
    through the axis becomes a <span class="term" data-term="helicoid">helicoid</span>, the same
    <span class="term" data-term="ruled">ruled surface</span> behind twisted towers like the Turning
    Torso. Because rotating a slice never changes its area,
    <span class="term" data-term="cavalieri">Cavalieri's principle</span> guarantees the twisted
    volume exactly equals the straight prism's — the HUD's "volumes match" line is that guarantee
    playing out. Try α_max = 90° or 180° to see a quarter or half turn, or push past 360° for
    multiple full turns.`,
  taper: `Taper also keeps base plane B and axis A fixed, but scales each slice instead of rotating
    it — independently, by v(z) in x and w(z) in y, both ramping linearly from 1 at the base to v, w
    at the top. It looks like it should stay linear, but a line that isn't parallel or perpendicular
    to the axis actually traces a parabola as it scales; only the profile's own vertical edges stay
    straight. And unlike twisting, tapering does not preserve volume: try v = w = 0.5 for a simple
    frustum, or set v and w apart for an asymmetric taper.`,
  shear: `Shear is the only operation here where the axis itself moves: base plane B stays fixed, but
    each slice is simply translated within its own horizontal plane, linear from (0,0) at the base
    to (Δx,Δy) at the top — so the axis's image A₁ (shown in brick) leans away from the original A
    (shown dashed). Because a translation never changes a slice's shape or area,
    <span class="term" data-term="cavalieri">Cavalieri's principle</span> applies again: shear
    preserves volume exactly, the same as twist.`,
  bend: `Bend also moves the axis, but to a circular arc A₁ instead of a straight line — radius
    R = h/β, chosen so the arc is exactly as long as the original axis segment h. Each slice rotates
    and translates into the plane normal to that arc, with the profile's local x carried straight
    through, so it's really a 2D bend extended along x. Because each slice only rotates and
    translates, never scales, bending preserves volume too. Try β_max = 180° for a full U-shaped
    bend, or push toward 360° to watch it curl back on itself. Turn on "Panel flatness (warp)" and
    compare it against Twist: Bend's floor-to-floor panels come out exactly flat regardless of angle
    or cross-section, since local x is never rotated — it's a true cylindrical bend of a flat sheet
    (a <span class="term" data-term="developable">developable surface</span>), unlike Twist's
    helicoid, which warps every non-degenerate panel.`,
  ffd: `Free is the odd one out: unlike every other operation here, there's no axis and no fixed base
    plane at all — the whole solid sits inside a cuboid with 8 control points at its corners, and
    every point inside is a trilinear (1,1,1) Bézier blend of all 8. Drag any brick handle in the
    viewport to reshape it live. This looks like it should stay linear too, but a straight line not
    parallel to an edge becomes a cubic curve, and volume changes however the control points move —
    there's no <span class="term" data-term="closedform">closed-form</span> guarantee of
    preservation the way there is for twist, shear, and bend.`,
  morph: `Morph is a different construction from the other operations: instead of moving a single
    fixed cross-section, it blends TWO different shapes together — the FROM shape at the base, the TO
    shape at the top — point for point, <span class="term" data-term="lerp">linearly</span> with
    height. Both shapes are resampled to the same
    point count at evenly spaced angles around the vertical axis before blending, so corresponding
    points always sit at the same angle in both shapes (a square's corner and a circle's nearest
    point at that angle, for instance), which is what keeps the blend from twisting against itself.
    Because the cross-section's own shape changes, not just its size, position, or rotation, there's
    no <span class="term" data-term="closedform">closed-form</span> volume the way twist/shear/bend
    have — the volume shown is measured directly off the built mesh, same as Free. Try Square → Ellipse for the classic "square base, round top"
    silhouette (SOM's Lotte Super Tower case study), or push the two To-size sliders far apart from
    the base's own footprint sliders for a shape that narrows or widens as it morphs.`,
  helix: `Helix is a different construction from the other five, which all deform a solid — here a
    generator curve is swept by true helical motion: rotate by u about axis A while translating p·u
    along it (x=X(v)cosu, z=X(v)sinu, y=Y(v)+p·u). "Line" sweeps a straight segment orthogonal to A —
    the common/right <span class="term" data-term="helicoid">helicoid</span>, the classic open spiral
    ramp or staircase — try a small inner radius for a central newel void. "Circle" sweeps a circle
    lying flat in the meridian plane, producing a winding tube or screw column. "Pipe" is the true
    constant-radius pipe — the circle instead rides a Frenet frame along the helix centerline, always
    held orthogonal to the local tangent, so unlike "Circle" its cross-section never distorts as the
    pitch steepens. Because a <span class="term" data-term="helicoid">helicoid</span> isn't a solid
    (the line generator in particular leaves a hole around the axis with zero thickness), there's no
    volume to report — the HUD shows surface area instead.`
};
const FORMULA_HTML = {
  twist: 'α(z) = (z/h)·α<sub>max</sub>',
  taper: 'v(z)=1+z(v−1)/h, w(z)=1+z(w−1)/h',
  shear: 'x₁=x+Δx·(z/h), y₁=y+Δy·(z/h)',
  bend: 'R=h/β, θ(z)=β·(z/h)',
  ffd: 'b(u,v,w) = Σ B<sub>i</sub>(u)B<sub>j</sub>(v)B<sub>k</sub>(w)·b<sub>ijk</sub>',
  helix: 'x=X(v)cosu, z=X(v)sinu, y=Y(v)+p·u',
  morph: 'P(z) = P_from + (z/h)·(P_to − P_from)'
};
const HUD_FORMULA_HTML = {
  twist: 'α(z) = (z / h) · α<sub>max</sub>',
  taper: 'v(z) = 1 + z·(v−1)/h',
  shear: 'x₁ = x + Δx·(z/h)',
  bend: 'θ(z) = β · (z/h), R = h/β',
  ffd: 'trilinear blend of 8 control points',
  helix: 'helical sweep of generator m(v)',
  morph: 'lerp(shape_from, shape_to, z/h)'
};
const TAGLINES = { twist: 'twist deformation, live', taper: 'taper deformation, live', shear: 'shear deformation, live', bend: 'bend deformation, live', ffd: 'freeform deformation, live', helix: 'helical sweep, live' };
// Morph's tagline isn't a fixed string like the other modes — it names the actual pair of shapes
// currently loaded (e.g. "Square → Ellipse, live"), so it stays accurate as the From/To pickers
// change rather than the generic "shape morph, live" placeholder it shipped with in v1.51.0.
function morphTagline(){ return `${PRESET_LABELS[state.preset]} → ${PRESET_LABELS[state.morphToPreset]}, live`; }
const MODE_LABEL = { twist:'Twist', taper:'Taper', shear:'Shear', bend:'Bend', ffd:'Free', helix:'Helix', morph:'Morph' };

const modeGrid = document.getElementById('modeGrid');
function updateReferenceText(){
  const base = REFERENCE_TEXT[state.mode];
  const compoundNote = state.compoundMode
    ? ` Compounded: this shape is the result above, THEN run through ${MODE_LABEL[state.compoundMode]}'s own operation as a second pass — the same math, just applied twice in sequence.`
    : '';
  document.getElementById('referenceText').innerHTML = base + compoundNote;
}
function applyModeChrome(){
  document.getElementById('modeTagline').textContent = state.mode === 'morph' ? morphTagline() : TAGLINES[state.mode];
  document.getElementById('formulaBadge').innerHTML = FORMULA_HTML[state.mode];
  document.getElementById('hudFormula').innerHTML = HUD_FORMULA_HTML[state.mode];
  updateReferenceText();
  document.getElementById('twistParamsBlock').style.display = state.mode === 'twist' ? '' : 'none';
  document.getElementById('taperParamsBlock').style.display = state.mode === 'taper' ? '' : 'none';
  document.getElementById('shearParamsBlock').style.display = state.mode === 'shear' ? '' : 'none';
  document.getElementById('bendParamsBlock').style.display = state.mode === 'bend' ? '' : 'none';
  document.getElementById('ffdParamsBlock').style.display = state.mode === 'ffd' ? '' : 'none';
  document.getElementById('helixParamsBlock').style.display = state.mode === 'helix' ? '' : 'none';
  document.getElementById('morphParamsBlock').style.display = state.mode === 'morph' ? '' : 'none';
  // Helix has no cross-section footprint and no floors — swap those blocks for its own turns/pitch
  // block, and reuse the "Floor lines" toggle's label text as "Turn lines" while in this mode.
  document.getElementById('crossSectionSection').style.display = state.mode === 'helix' ? 'none' : '';
  document.getElementById('crossSectionHeading').textContent = state.mode === 'morph'
    ? 'Cross-section — FROM shape (base)'
    : 'Cross-section (profile in plane B)';
  document.getElementById('commonHeightBlock').style.display = state.mode === 'helix' ? 'none' : '';
  document.getElementById('helixHeightBlock').style.display = state.mode === 'helix' ? '' : 'none';
  document.getElementById('floorLinesLabel').textContent = state.mode === 'helix' ? 'Turn lines (per revolution)' : 'Floor lines (per floor)';
  if(state.mode === 'helix'){
    document.getElementById('helixLineParams').style.display = state.helixGenerator === 'line' ? '' : 'none';
    document.getElementById('helixCircleParams').style.display = state.helixGenerator === 'line' ? 'none' : '';
    [...document.getElementById('helixGenGrid').children].forEach(b=>b.classList.toggle('active', b.dataset.helixgen === state.helixGenerator));
  }
  [...modeGrid.children].forEach(b=>b.classList.toggle('active', b.dataset.mode === state.mode));
  applyCompoundUI();
}
[...modeGrid.children].forEach(btn=>{
  btn.addEventListener('click', ()=>{
    if(animPlayer) stopAnimation();
    state.mode = btn.dataset.mode;
    if(state.compoundMode === state.mode) state.compoundMode = null; // can't compound a mode with itself
    if(state.mode === 'bend' || state.mode === 'ffd' || state.mode === 'helix') state.compoundMode = null; // bend can't be followed by anything; ffd/helix don't support compounding at all (morph now does, v1.51.5 — it preserves y at each layer just like twist/taper/shear)
    applyModeChrome();
    syncSliderLabels();
    pendingReframe = true;
    persist(); rebuild();
    toast(MODE_LABEL[state.mode] + ' mode');
  });
});
applyModeChrome();

const helixGenGrid = document.getElementById('helixGenGrid');
[...helixGenGrid.children].forEach(btn=>{
  btn.addEventListener('click', ()=>{
    state.helixGenerator = btn.dataset.helixgen;
    applyModeChrome();
    pendingReframe = true;
    persist(); rebuild();
    const genLabel = { line:'Line', circle:'Circle', pipe:'Pipe' }[state.helixGenerator];
    toast(genLabel + ' generator');
  });
});

// ---------- compound operations (v1.50.0) ----------
// Shows/hides the whole Compound section (twist/taper/shear only — never bend/ffd/helix, see
// computeLayerPointCompound above for why), filters out whichever mode is currently primary from the
// choices (compounding a mode with itself isn't a coherent second step), and shows exactly the one
// compact parameter block matching state.compoundMode. Called from inside applyModeChrome() itself
// (not a separate call site added everywhere applyModeChrome already runs), so every existing caller
// — mode switch, case-study load, Reset, unit toggle, Helix generator switch — keeps this in sync for
// free.
function applyCompoundUI(){
  const compoundSection = document.getElementById('compoundSection');
  const compoundGrid = document.getElementById('compoundGrid');
  const bendNote = document.getElementById('compoundBendUnavailableNote');
  const canCompound = state.mode === 'twist' || state.mode === 'taper' || state.mode === 'shear' || state.mode === 'morph';
  compoundSection.style.display = (canCompound || state.mode === 'bend') ? '' : 'none';
  if(state.mode === 'bend'){
    compoundGrid.style.display = 'none';
    bendNote.style.display = '';
  } else {
    compoundGrid.style.display = '';
    bendNote.style.display = 'none';
  }
  [...compoundGrid.children].forEach(btn=>{
    const m = btn.dataset.compound;
    btn.style.display = (m === state.mode) ? 'none' : ''; // can't compound a mode with itself
    btn.classList.toggle('active', m === (state.compoundMode || ''));
  });
  ['Twist','Taper','Shear','Bend'].forEach(label=>{
    document.getElementById('compound' + label + 'Block').style.display =
      (state.compoundMode === label.toLowerCase()) ? '' : 'none';
  });
}
const compoundGrid = document.getElementById('compoundGrid');
[...compoundGrid.children].forEach(btn=>{
  btn.addEventListener('click', ()=>{
    const m = btn.dataset.compound || null;
    if(m === state.mode || m === state.compoundMode) return; // no-op: same as primary, or already selected
    if(animPlayer) stopAnimation();
    state.compoundMode = m;
    applyCompoundUI();
    updateReferenceText();
    pendingReframe = true;
    persist(); rebuild();
    toast(m ? `Compound: then ${MODE_LABEL[m]}` : 'Compound cleared');
  });
});
const compoundAlphaSlider = document.getElementById('compoundAlphaSlider');
const compoundTaperVSlider = document.getElementById('compoundTaperVSlider');
const compoundTaperWSlider = document.getElementById('compoundTaperWSlider');
const compoundShearDXSlider = document.getElementById('compoundShearDXSlider');
const compoundShearDYSlider = document.getElementById('compoundShearDYSlider');
const compoundBendBetaSlider = document.getElementById('compoundBendBetaSlider');
// Each writes to the SAME state field its primary counterpart uses (state.alphaMax, state.taperV,
// etc.) — safe because the Compound picker above never allows the same mode to be both primary and
// secondary, so a compound slider and its primary counterpart are never live at the same time for
// the same field. syncSliderLabels() (already updated to cover both directions) keeps whichever one
// is currently hidden in sync too, so switching primary later shows the correct value immediately.
compoundAlphaSlider.addEventListener('input', e=>{
  state.alphaMax = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
compoundTaperVSlider.addEventListener('input', e=>{
  state.taperV = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
compoundTaperWSlider.addEventListener('input', e=>{
  state.taperW = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
compoundShearDXSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.shearDXM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
compoundShearDYSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.shearDYM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
compoundBendBetaSlider.addEventListener('input', e=>{
  state.bendBetaMax = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});

const unitsGrid = document.getElementById('unitsGrid');
[...unitsGrid.children].forEach(btn=>{
  btn.classList.toggle('active', btn.dataset.units === state.units);
  btn.addEventListener('click', ()=>{
    state.units = btn.dataset.units;
    [...unitsGrid.children].forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    syncFloorHeightSliderRange();
    syncShearSliderRange();
    syncHelixSliderRanges();
    syncFootprintSliderRange();
    syncSliderLabels(); syncToleranceTargetLabel(); persist(); rebuild();
    toast(state.units === 'metric' ? 'Metric units' : 'Imperial units');
  });
});

const projectionGrid = document.getElementById('projectionGrid');
[...projectionGrid.children].forEach(btn=>{
  btn.classList.toggle('active', btn.dataset.projection === state.projection);
  btn.addEventListener('click', ()=>{
    if(btn.dataset.projection === state.projection) return;
    switchProjection(btn.dataset.projection);
    [...projectionGrid.children].forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    toast(state.projection === 'orthographic' ? 'Orthographic projection' : 'Perspective projection');
  });
});

// ---------- UI preferences: Simple/Advanced mode + resizable sidebar (v1.44.0) ----------
// Deliberately kept OUT of the `state` object (and so out of localStorage's 'spira-state' key,
// Reset Values, and the shareable-URL encoding) — these are this browser's own screen/workflow
// preferences, not part of "the model configuration" the way mode/preset/deformation params are.
// A share link is supposed to hand someone else your BUILDING, not force your sidebar width or
// Simple/Advanced choice onto their screen. Persisted separately under its own localStorage key.
const uiPrefs = { uiMode: 'simple', sidebarWidthPx: 300, theme: 'dark' };
try{
  const savedUI = JSON.parse(localStorage.getItem('spira-ui-prefs') || 'null');
  if(savedUI){
    if(savedUI.uiMode === 'simple' || savedUI.uiMode === 'advanced') uiPrefs.uiMode = savedUI.uiMode;
    if(Number.isFinite(savedUI.sidebarWidthPx)) uiPrefs.sidebarWidthPx = savedUI.sidebarWidthPx;
    if(savedUI.theme === 'light' || savedUI.theme === 'dark') uiPrefs.theme = savedUI.theme;
  }
}catch(e){}
function persistUIPrefs(){
  localStorage.setItem('spira-ui-prefs', JSON.stringify(uiPrefs));
}

// Sections that only ever add clutter for someone just exploring a shape: unit/projection choice,
// render-resolution tuning, every overlay (including the whole panel-warp toolchain), and every
// export path. Simple mode hides exactly these four, consistently, regardless of which Operation is
// selected — Operation/Cross-section/Deformation-parameters/Reference stay visible in both modes,
// since those are "the shape itself," not tooling around it.
const ADVANCED_ONLY_IDS = ['unitsSection', 'projectionSection', 'resolutionBlock', 'overlaysSection', 'compareSection', 'exportSection'];
function applyUIMode(mode){
  uiPrefs.uiMode = mode;
  const showAdvanced = mode === 'advanced';
  ADVANCED_ONLY_IDS.forEach(id=>{
    const el = document.getElementById(id);
    if(el) el.style.display = showAdvanced ? '' : 'none';
  });
  [...uiModeGrid.children].forEach(b=>b.classList.toggle('active', b.dataset.uimode === mode));
  persistUIPrefs();
}
const uiModeGrid = document.getElementById('uiModeGrid');
[...uiModeGrid.children].forEach(btn=>{
  btn.addEventListener('click', ()=>{
    if(btn.dataset.uimode === uiPrefs.uiMode) return;
    applyUIMode(btn.dataset.uimode);
    toast(uiPrefs.uiMode === 'advanced' ? 'Advanced view' : 'Simple view');
  });
});
applyUIMode(uiPrefs.uiMode);

// ---------- theme: Light / Blueprint (v1.45.0) ----------
// Same "not part of the model" reasoning as uiMode/sidebarWidthPx above — a screen preference,
// persisted in the same uiPrefs object/localStorage key, excluded from Reset Values and the
// shareable-URL encoding. CSS custom properties handle every DOM color automatically via the
// [data-theme="dark"] override block; the two things CSS can't reach are the Three.js scene
// background and the ground-grid helper below, so those are kept in sync here explicitly.
const THEME_COLORS = {
  light: { sceneBg: 0xf4f1ea, gridLine: 0xd8d3c4, metaThemeColor: '#f4f1ea' },
  dark:  { sceneBg: 0x0b3350, gridLine: 0x2f5878, metaThemeColor: '#0b3350' },
};
// "Graph-paper" ground grid — a literal drafting-table grid the model sits on, not a flat screen-space
// backdrop. Chosen over a CanvasTexture-as-scene.background approach specifically to sidestep that
// technique's tiling/repeat behavior being version- and mapping-dependent in three.js; THREE.GridHelper
// is a single well-defined built-in primitive with no such ambiguity. Lives directly in `scene` (NOT
// overlayGroup), so Simple/Advanced view and every Overlays toggle leave it alone — it's theme, not
// data.
//
// v1.51.0: the extent used to be a FIXED 300 world units (5-unit cells at 60 divisions), sized for
// the old 30m/100ft footprint cap. Two things broke that assumption: footprint sliders widened to
// 80m for Lotte Super Tower, AND Bend's own R=h/β sweeps arbitrarily wide as β_max shrinks toward
// 0° regardless of footprint size — a user screenshot showed the grid plane visibly cut off short of
// the actual solid's edges in exactly that case. Extent is now resynced every rebuild() from the
// real built geometry's own bounding box (fitBoxDistance(), the same Box3 the camera-fit buttons
// use), with 60% headroom beyond the circumscribed diameter so the grid always reads as "the floor
// extends past the building," never "the building outgrew its floor." Clamped to [300, 4000] — 300
// keeps small default models looking the same as before, 4000 is a sane ceiling against Bend's
// β_max→0° case genuinely wanting an unbounded plane. Divisions track extent (5-unit cells) but cap
// at 200 so a maxed-out extent doesn't quietly balloon the line count.
let groundGrid = null;
let groundGridExtent = 300;
function buildGroundGrid(theme, extent){
  const divisions = Math.min(200, Math.max(20, Math.round(extent/5)));
  const g = new THREE.GridHelper(extent, divisions, THEME_COLORS[theme].gridLine, THEME_COLORS[theme].gridLine);
  g.material.transparent = true;
  g.material.opacity = 0.35;
  g.position.y = -0.05; // nudged below y=0 so it never z-fights with Base plane B or floor lines
  return g;
}
function replaceGroundGrid(theme, extent){
  if(groundGrid){ scene.remove(groundGrid); groundGrid.geometry.dispose(); groundGrid.material.dispose(); }
  groundGrid = buildGroundGrid(theme, extent);
  scene.add(groundGrid);
}
// Called at the end of rebuild(), after solidGroup is populated AND the camera has already been
// repositioned for this frame (frameCameraDefault(), if pendingReframe, runs before this in
// rebuild()) — resizes the grid only when it actually needs more (or less) room than it currently
// has, so a plain slider tick doesn't rebuild grid geometry on every frame for no visual change.
//
// v1.51.4: the v1.51.1 fix (diameter*1.6 off the model's own bounding radius) still cut off
// visibly for very tall, thin buildings like the Lotte Super Tower case study — verified with a
// real headless-browser render + raycasting the camera's actual 4 viewport corners against the
// ground plane: the BOTTOM corners landed at ~450m (within a 910-unit grid, fine), but the TOP
// corners — shallow, near-horizontal rays, an unavoidable consequence of pulling the camera back
// far enough to fit a 555m-tall, ~100m-wide tower in frame — landed at ~4640m, more than 4x
// further than the model-radius formula ever sized for. That's not a model-size problem at all;
// it's a camera-angle problem the old formula had no way to see. Fixed by actually measuring the
// current view: raycast the 4 viewport corners through the camera against y=-0.05 (the grid's own
// plane) and take the farthest valid downward hit, with the old diameter*1.6 kept only as a floor
// for degenerate/near-horizontal views (e.g. Front) where an upper corner ray may not hit the
// ground plane at all. Cap raised 4000->20000 to actually cover cases like this one instead of
// silently re-clamping the fix away.
function computeVisibleGroundExtent(){
  // Caught by headless-browser testing, not visible from math alone: this runs synchronously right
  // after positionCameraForFit() sets camera.position, before any render pass has called
  // updateMatrixWorld() on it -- without this explicit call, raycaster.setFromCamera() unprojects
  // through the camera's STALE matrixWorld (i.e. wherever it was pointed on the previous frame),
  // silently under-sizing the grid for exactly one rebuild after any camera move.
  camera.updateMatrixWorld();
  const raycaster = new THREE.Raycaster();
  const plane = new THREE.Plane(new THREE.Vector3(0,1,0), 0.05); // matches groundGrid's y=-0.05
  let maxDist = 0;
  for(const nx of [-1,1]) for(const ny of [-1,1]){
    raycaster.setFromCamera({x:nx, y:ny}, camera);
    const hit = new THREE.Vector3();
    if(raycaster.ray.intersectPlane(plane, hit)){
      const d = Math.hypot(hit.x, hit.z);
      if(isFinite(d) && d > maxDist) maxDist = d;
    }
  }
  return maxDist;
}
function syncGroundGridExtent(radius){
  const diameter = (radius || 0)*2;
  const radiusFloor = diameter*1.6;
  const visible = computeVisibleGroundExtent() * 1.1; // 10% headroom beyond the farthest actual hit
  const desired = Math.min(20000, Math.max(300, Math.ceil(Math.max(radiusFloor, visible)/10)*10));
  if(Math.abs(desired - groundGridExtent) > 1e-6){
    groundGridExtent = desired;
    replaceGroundGrid(uiPrefs.theme, groundGridExtent);
  }
}
function applyTheme(theme){
  uiPrefs.theme = theme;
  if(theme === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
  else document.documentElement.removeAttribute('data-theme');
  document.getElementById('themeColorMeta').setAttribute('content', THEME_COLORS[theme].metaThemeColor);
  scene.background = new THREE.Color(THEME_COLORS[theme].sceneBg);
  replaceGroundGrid(theme, groundGridExtent);
  [...themeGrid.children].forEach(b=>b.classList.toggle('active', b.dataset.themechoice === theme));
  persistUIPrefs();
}
const themeGrid = document.getElementById('themeGrid');
[...themeGrid.children].forEach(btn=>{
  btn.addEventListener('click', ()=>{
    if(btn.dataset.themechoice === uiPrefs.theme) return;
    applyTheme(btn.dataset.themechoice);
    toast(uiPrefs.theme === 'dark' ? 'Blueprint theme' : 'Light theme');
  });
});
applyTheme(uiPrefs.theme);

// ---------- resizable sidebar (v1.44.0) ----------
// Drag #sidebarResizeHandle to resize <aside> via a CSS variable rather than fighting flexbox's own
// width math directly — one property to read/write, and the existing `width:var(--sidebar-width,
// 300px)` rule (set on <aside> itself) picks it up with no other CSS changes needed. Pointer Events
// (not mousedown/mousemove) so the same code handles touch/pen without a separate touch listener
// path, and setPointerCapture keeps receiving move events even if the pointer leaves the thin
// 6px handle mid-drag, which mouse events alone would lose.
(function setupSidebarResize(){
  const handle = document.getElementById('sidebarResizeHandle');
  const asideEl = document.querySelector('aside');
  function clampWidth(px){
    const maxW = Math.min(640, window.innerWidth * 0.6);
    return Math.max(260, Math.min(maxW, px));
  }
  function applyWidth(px){
    document.documentElement.style.setProperty('--sidebar-width', px + 'px');
  }
  applyWidth(clampWidth(uiPrefs.sidebarWidthPx));

  let dragging = false, startX = 0, startWidth = 0;
  handle.addEventListener('pointerdown', (e)=>{
    dragging = true;
    startX = e.clientX;
    startWidth = asideEl.getBoundingClientRect().width;
    handle.classList.add('dragging');
    handle.setPointerCapture(e.pointerId);
    e.preventDefault();
  });
  handle.addEventListener('pointermove', (e)=>{
    if(!dragging) return;
    // aside sits to the right of the handle, so dragging left (negative dx) should grow it.
    const dx = e.clientX - startX;
    applyWidth(clampWidth(startWidth - dx));
    resize(); // cheap (aspect + renderer.setSize) — live-updates the 3D viewport while dragging
  });
  function endDrag(e){
    if(!dragging) return;
    dragging = false;
    handle.classList.remove('dragging');
    uiPrefs.sidebarWidthPx = clampWidth(asideEl.getBoundingClientRect().width);
    persistUIPrefs();
  }
  handle.addEventListener('pointerup', endDrag);
  handle.addEventListener('pointercancel', endDrag);
  // If the window itself shrinks below the current sidebar width (e.g. resizing a browser window
  // narrower), re-clamp so the sidebar can't leave the viewport unusably wide.
  window.addEventListener('resize', ()=>{ applyWidth(clampWidth(uiPrefs.sidebarWidthPx)); });
})();

function syncFloorHeightSliderRange(){
  if(state.units === 'metric'){
    floorHeightSlider.min = 2.5; floorHeightSlider.max = 6; floorHeightSlider.step = 0.1;
    floorHeightSlider.value = state.floorHeightM.toFixed(1);
  } else {
    floorHeightSlider.min = 8; floorHeightSlider.max = 20; floorHeightSlider.step = 0.5;
    floorHeightSlider.value = (state.floorHeightM * M_TO_FT).toFixed(1);
  }
}
syncFloorHeightSliderRange();

function syncShearSliderRange(){
  if(state.units === 'metric'){
    shearDXSlider.min = -60; shearDXSlider.max = 60; shearDXSlider.step = 0.1;
    shearDYSlider.min = -60; shearDYSlider.max = 60; shearDYSlider.step = 0.1;
    shearDXSlider.value = state.shearDXM.toFixed(1);
    shearDYSlider.value = state.shearDYM.toFixed(1);
    compoundShearDXSlider.min = -60; compoundShearDXSlider.max = 60; compoundShearDXSlider.step = 0.1;
    compoundShearDYSlider.min = -60; compoundShearDYSlider.max = 60; compoundShearDYSlider.step = 0.1;
    compoundShearDXSlider.value = state.shearDXM.toFixed(1);
    compoundShearDYSlider.value = state.shearDYM.toFixed(1);
  } else {
    shearDXSlider.min = -200; shearDXSlider.max = 200; shearDXSlider.step = 0.5;
    shearDYSlider.min = -200; shearDYSlider.max = 200; shearDYSlider.step = 0.5;
    shearDXSlider.value = (state.shearDXM * M_TO_FT).toFixed(1);
    shearDYSlider.value = (state.shearDYM * M_TO_FT).toFixed(1);
    compoundShearDXSlider.min = -200; compoundShearDXSlider.max = 200; compoundShearDXSlider.step = 0.5;
    compoundShearDYSlider.min = -200; compoundShearDYSlider.max = 200; compoundShearDYSlider.step = 0.5;
    compoundShearDXSlider.value = (state.shearDXM * M_TO_FT).toFixed(1);
    compoundShearDYSlider.value = (state.shearDYM * M_TO_FT).toFixed(1);
  }
}
syncShearSliderRange();

function syncHelixSliderRanges(){
  if(state.units === 'metric'){
    helixPitchSlider.min = 0.5; helixPitchSlider.max = 8; helixPitchSlider.step = 0.1;
    helixRInnerSlider.min = 0; helixRInnerSlider.max = 5; helixRInnerSlider.step = 0.1;
    helixROuterSlider.min = 0.5; helixROuterSlider.max = 20; helixROuterSlider.step = 0.1;
    helixTubeRSlider.min = 0.05; helixTubeRSlider.max = 1; helixTubeRSlider.step = 0.01;
    helixTubeOffsetSlider.min = 0; helixTubeOffsetSlider.max = 4; helixTubeOffsetSlider.step = 0.1;
    helixPitchSlider.value = state.helixPitchM.toFixed(1);
    helixRInnerSlider.value = state.helixRInnerM.toFixed(1);
    helixROuterSlider.value = state.helixROuterM.toFixed(1);
    helixTubeRSlider.value = state.helixTubeRM.toFixed(2);
    helixTubeOffsetSlider.value = state.helixTubeOffsetM.toFixed(1);
  } else {
    helixPitchSlider.min = 1.5; helixPitchSlider.max = 26; helixPitchSlider.step = 0.5;
    helixRInnerSlider.min = 0; helixRInnerSlider.max = 16; helixRInnerSlider.step = 0.5;
    helixROuterSlider.min = 1.5; helixROuterSlider.max = 65; helixROuterSlider.step = 0.5;
    helixTubeRSlider.min = 0.15; helixTubeRSlider.max = 3; helixTubeRSlider.step = 0.05;
    helixTubeOffsetSlider.min = 0; helixTubeOffsetSlider.max = 13; helixTubeOffsetSlider.step = 0.5;
    helixPitchSlider.value = (state.helixPitchM * M_TO_FT).toFixed(1);
    helixRInnerSlider.value = (state.helixRInnerM * M_TO_FT).toFixed(1);
    helixROuterSlider.value = (state.helixROuterM * M_TO_FT).toFixed(1);
    helixTubeRSlider.value = (state.helixTubeRM * M_TO_FT).toFixed(2);
    helixTubeOffsetSlider.value = (state.helixTubeOffsetM * M_TO_FT).toFixed(1);
  }
}
syncHelixSliderRanges();

function syncFootprintSliderRange(){
  // v1.51.0: widened 30m/100ft -> 80m/260ft to fit Lotte Super Tower's sourced 70m square base —
  // same reasoning v1.47.0 used to widen Helix's radius sliders for Guggenheim's outer radius.
  // Morph's To-size sliders share this range so the FROM/TO ends stay comparable at a glance.
  if(state.units === 'metric'){
    footprintWidthSlider.min = 0.5; footprintWidthSlider.max = 80; footprintWidthSlider.step = 0.1;
    footprintDepthSlider.min = 0.5; footprintDepthSlider.max = 80; footprintDepthSlider.step = 0.1;
    footprintWidthSlider.value = state.footprintWidthM.toFixed(1);
    footprintDepthSlider.value = state.footprintDepthM.toFixed(1);
    morphToWidthSlider.min = 0.5; morphToWidthSlider.max = 80; morphToWidthSlider.step = 0.1;
    morphToDepthSlider.min = 0.5; morphToDepthSlider.max = 80; morphToDepthSlider.step = 0.1;
    morphToWidthSlider.value = state.morphToWidthM.toFixed(1);
    morphToDepthSlider.value = state.morphToDepthM.toFixed(1);
  } else {
    footprintWidthSlider.min = 1.5; footprintWidthSlider.max = 260; footprintWidthSlider.step = 0.5;
    footprintDepthSlider.min = 1.5; footprintDepthSlider.max = 260; footprintDepthSlider.step = 0.5;
    footprintWidthSlider.value = (state.footprintWidthM * M_TO_FT).toFixed(1);
    footprintDepthSlider.value = (state.footprintDepthM * M_TO_FT).toFixed(1);
    morphToWidthSlider.min = 1.5; morphToWidthSlider.max = 260; morphToWidthSlider.step = 0.5;
    morphToDepthSlider.min = 1.5; morphToDepthSlider.max = 260; morphToDepthSlider.step = 0.5;
    morphToWidthSlider.value = (state.morphToWidthM * M_TO_FT).toFixed(1);
    morphToDepthSlider.value = (state.morphToDepthM * M_TO_FT).toFixed(1);
  }
}
syncFootprintSliderRange();

function syncSliderLabels(){
  const u = unitLabels();
  document.getElementById('alphaVal').textContent = state.alphaMax + '°';
  alphaSlider.value = state.alphaMax;
  document.getElementById('taperVVal').textContent = state.taperV.toFixed(2);
  taperVSlider.value = state.taperV;
  document.getElementById('taperWVal').textContent = state.taperW.toFixed(2);
  taperWSlider.value = state.taperW;
  document.getElementById('shearDXVal').textContent = toDisplayLen(state.shearDXM).toFixed(1) + ' ' + u.len;
  shearDXSlider.value = state.shearDXM;
  document.getElementById('shearDYVal').textContent = toDisplayLen(state.shearDYM).toFixed(1) + ' ' + u.len;
  shearDYSlider.value = state.shearDYM;
  document.getElementById('bendBetaVal').textContent = state.bendBetaMax + '°';
  bendBetaSlider.value = state.bendBetaMax;
  document.getElementById('floorsVal').textContent = state.floors;
  document.getElementById('floorHeightVal').textContent = toDisplayLen(state.floorHeightM).toFixed(1) + ' ' + u.len;
  document.getElementById('resVal').textContent = state.segments;
  document.getElementById('loftProfileCountVal').textContent = state.loftProfileCount;
  document.getElementById('totalHeightNote').textContent =
    `= ${state.floors} × ${toDisplayLen(state.floorHeightM).toFixed(1)}${u.len} = ${toDisplayLen(state.floors*state.floorHeightM).toFixed(1)}${u.len} total`;
  document.getElementById('helixTurnsVal').textContent = state.helixTurns;
  document.getElementById('helixPitchVal').textContent = toDisplayLen(state.helixPitchM).toFixed(1) + ' ' + u.len;
  document.getElementById('helixRInnerVal').textContent = toDisplayLen(state.helixRInnerM).toFixed(1) + ' ' + u.len;
  document.getElementById('helixROuterVal').textContent = toDisplayLen(state.helixROuterM).toFixed(1) + ' ' + u.len;
  document.getElementById('helixTubeRVal').textContent = toDisplayLen(state.helixTubeRM).toFixed(2) + ' ' + u.len;
  document.getElementById('helixTubeOffsetVal').textContent = toDisplayLen(state.helixTubeOffsetM).toFixed(1) + ' ' + u.len;
  document.getElementById('helixTotalRiseNote').textContent =
    `= ${state.helixTurns} × ${toDisplayLen(state.helixPitchM).toFixed(1)}${u.len} = ${toDisplayLen(state.helixTurns*state.helixPitchM).toFixed(1)}${u.len} total rise`;
  document.getElementById('footprintWidthVal').textContent = toDisplayLen(state.footprintWidthM).toFixed(1) + ' ' + u.len;
  document.getElementById('footprintDepthVal').textContent = toDisplayLen(state.footprintDepthM).toFixed(1) + ' ' + u.len;
  document.getElementById('morphToWidthVal').textContent = toDisplayLen(state.morphToWidthM).toFixed(1) + ' ' + u.len;
  document.getElementById('morphToDepthVal').textContent = toDisplayLen(state.morphToDepthM).toFixed(1) + ' ' + u.len;
  // Compound sliders are separate DOM elements sharing the SAME state fields as their primary
  // counterparts (see computeLayerPointCompound above for why that's safe — primary and compound
  // are always different modes) — so every change needs both label text AND slider position kept in
  // sync here, not just the label the way the primary sliders' own 'input' handlers already do for
  // themselves natively via the browser.
  document.getElementById('compoundAlphaVal').textContent = state.alphaMax + '°';
  compoundAlphaSlider.value = state.alphaMax;
  document.getElementById('compoundTaperVVal').textContent = state.taperV.toFixed(2);
  compoundTaperVSlider.value = state.taperV;
  document.getElementById('compoundTaperWVal').textContent = state.taperW.toFixed(2);
  compoundTaperWSlider.value = state.taperW;
  document.getElementById('compoundShearDXVal').textContent = toDisplayLen(state.shearDXM).toFixed(1) + ' ' + u.len;
  compoundShearDXSlider.value = state.shearDXM;
  document.getElementById('compoundShearDYVal').textContent = toDisplayLen(state.shearDYM).toFixed(1) + ' ' + u.len;
  compoundShearDYSlider.value = state.shearDYM;
  document.getElementById('compoundBendBetaVal').textContent = state.bendBetaMax + '°';
  compoundBendBetaSlider.value = state.bendBetaMax;
}
syncSliderLabels();

alphaSlider.addEventListener('input', e=>{
  state.alphaMax = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
taperVSlider.addEventListener('input', e=>{
  state.taperV = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
taperWSlider.addEventListener('input', e=>{
  state.taperW = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
shearDXSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.shearDXM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
shearDYSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.shearDYM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
bendBetaSlider.addEventListener('input', e=>{
  state.bendBetaMax = parseFloat(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
floorsSlider.addEventListener('input', e=>{
  state.floors = parseInt(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
floorHeightSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.floorHeightM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
resSlider.addEventListener('input', e=>{
  state.segments = parseInt(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
loftProfileCountSlider.addEventListener('input', e=>{
  state.loftProfileCount = parseInt(e.target.value);
  document.getElementById('loftProfileCountVal').textContent = state.loftProfileCount;
  persist();
});
helixTurnsSlider.addEventListener('input', e=>{
  state.helixTurns = parseInt(e.target.value);
  syncSliderLabels(); persist(); rebuild();
});
helixPitchSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.helixPitchM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
helixRInnerSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.helixRInnerM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
helixROuterSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.helixROuterM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
helixTubeRSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.helixTubeRM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
helixTubeOffsetSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.helixTubeOffsetM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
footprintWidthSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.footprintWidthM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
footprintDepthSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.footprintDepthM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
morphToWidthSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.morphToWidthM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
morphToDepthSlider.addEventListener('input', e=>{
  const v = parseFloat(e.target.value);
  state.morphToDepthM = state.units === 'metric' ? v : v / M_TO_FT;
  syncSliderLabels(); persist(); rebuild();
});
panelSubdivSlider.addEventListener('input', e=>{
  state.panelSubdiv = parseInt(e.target.value);
  document.getElementById('panelSubdivVal').textContent = state.panelSubdiv + (state.panelSubdiv===1 ? ' panel' : ' panels');
  persist(); rebuild();
});

toleranceTargetSlider.addEventListener('input', e=>{
  state.toleranceTargetMM = parseInt(e.target.value);
  syncToleranceTargetLabel();
  persist();
  document.getElementById('toleranceSolverResult').classList.remove('caveat');
  document.getElementById('toleranceSolverResult').textContent = ''; // stale once the target moves
});

// v1.37.0: "Solve for minimum panels" — inverse of the subdivision slider (v1.28.0). Given a target
// max warp, sweeps N=1..12 through the exact same subdivideProfileForPanels()/computePanelWarp()
// calls the live overlay uses (never assumes the roughly-linear warp-vs-width relationship that
// motivated adding this — verifies each N directly, since that relationship is only approximate
// for non-axis-aligned edges) and reports the smallest N that meets the target, with a one-click
// Apply. An explicit button rather than a live sweep on every rebuild(), deliberately — sweeping up
// to 12 full panel-warp computations on every slider tick during a live drag (Helix at high
// resolution especially) risked reintroducing exactly the kind of frame-rate jank the v1.24.0/
// v1.33.0/v1.34.0 fixes were about avoiding, for a result that's only actually needed once, on
// request, not continuously.
function solveTolerance(){
  const resultEl = document.getElementById('toleranceSolverResult');
  if(!lastBuild){ resultEl.classList.remove('caveat'); resultEl.textContent = 'Nothing to solve yet'; return; }
  const { mode, profile, h, closed, n, segs, evalPoint } = lastBuild;
  const loopCount = mode === 'helix' ? segs : state.floors;
  const stepM = mode === 'helix' ? h/segs : state.floorHeightM;
  const u2 = smallLenUnit();
  const targetDisp = toDisplaySmallLen(state.toleranceTargetMM/1000).toFixed(0) + u2;
  let found = null, bestMM = Infinity, bestN = 1;
  for(let N=1; N<=12; N++){
    const { subProfile, subN } = subdivideProfileForPanels(profile, n, closed, N);
    const { maxWarpM } = computePanelWarp(subProfile, evalPoint, subN, closed, loopCount, stepM);
    const maxWarpMM = maxWarpM*1000;
    if(maxWarpMM < bestMM){ bestMM = maxWarpMM; bestN = N; }
    if(found === null && maxWarpMM <= state.toleranceTargetMM) found = N;
  }
  if(found !== null){
    resultEl.classList.remove('caveat');
    resultEl.innerHTML = `Use <strong>${found}</strong> panel${found===1?'':'s'} per face to stay under ${targetDisp}. ` +
      `<a href="#" id="applyToleranceBtn" style="text-decoration:underline; cursor:pointer; color:var(--prussian);">Apply</a>`;
    document.getElementById('applyToleranceBtn').addEventListener('click', (e)=>{
      e.preventDefault();
      state.panelSubdiv = found;
      panelSubdivSlider.value = found;
      document.getElementById('panelSubdivVal').textContent = found + (found===1?' panel':' panels');
      persist(); rebuild();
    });
  } else {
    resultEl.classList.add('caveat');
    resultEl.textContent = `Not achievable up to 12 panels/face — best is ${toDisplaySmallLen(bestMM/1000).toFixed(1)}${u2} at ${bestN} panels. Try a looser target.`;
  }
}
document.getElementById('solveToleranceBtn').addEventListener('click', solveTolerance);

document.querySelectorAll('.switch').forEach(sw=>{
  const key = sw.dataset.toggle;
  // v1.43.0: was `if(state.overlays[key]) sw.classList.add('on')` — only ever ADDED the 'on' class,
  // never removed it. Five of these nine switches (axis/plane/rulings/slicerings/floorlines) default
  // to true and have class="switch on" hardcoded in the static markup, so a saved session or shared
  // link where one of THOSE FIVE is false left the switch looking on (blue) while functionally off —
  // a real visual/state mismatch, not just a one-off. classList.toggle's second argument forces the
  // class to match a boolean exactly in either direction, so this now works whichever way state
  // differs from markup, for all nine switches uniformly.
  sw.classList.toggle('on', !!state.overlays[key]);
  sw.addEventListener('click', ()=>{
    state.overlays[key] = !state.overlays[key];
    sw.classList.toggle('on');
    if(key === 'panelwarp') syncPanelwarpDependentUI();
    persist(); rebuild();
  });
});
// v1.30.0: Panel flatness (v1.27.0) hides the solid itself while it's on, so the Wireframe toggle
// has nothing left to wireframe and silently does nothing — dimming it (rather than leaving a
// switch that flips with no visible effect) tells the user why, instead of leaving them to wonder
// if it's broken. Same panelwarp-dependent-UI update also covers the subdivision slider (v1.28.0),
// the colorblind-safe palette toggle (v1.35.0), and the tolerance solver (v1.37.0) — all only
// meaningful while Panel flatness is on.
function syncPanelwarpDependentUI(){
  document.getElementById('panelSubdivBlock').style.display = state.overlays.panelwarp ? '' : 'none';
  document.getElementById('wireframeRow').classList.toggle('disabled', state.overlays.panelwarp);
  document.getElementById('colorblindPaletteRow').style.display = state.overlays.panelwarp ? '' : 'none';
  document.getElementById('exportPanelScheduleBtn').style.display = state.overlays.panelwarp ? '' : 'none';
  document.getElementById('toleranceSolverBlock').style.display = state.overlays.panelwarp ? '' : 'none';
}
syncPanelwarpDependentUI();

// apply saved preset button state
[...presetGrid.children].forEach(c=>{
  c.classList.toggle('active', c.dataset.preset === state.preset);
});

// ---------- reset values ----------
// Per-mode defaults, matching the state object's own initial values exactly — kept as a separate
// constant (rather than re-reading from `state` itself, which would just return whatever's been
// changed) so "reset" always means "back to what this mode looked like on first load," not "back to
// whatever it was a moment ago." twist/taper/shear/bend also reset the shared floors/floor-height
// AND footprint width/depth, since those are what "this operation's values" visibly means to someone
// looking at the sidebar; Helix's own turns/pitch/radii serve the same role for it, so its floors/
// floor-height/footprint aren't touched (it doesn't use them). ffd is handled separately below since
// its "value" is the 8-point offset array, not a flat set of fields.
//
// v1.42.0: footprintWidthM/footprintDepthM were NOT in this list before, even though they're exactly
// as much "this mode's values" as floors/floor-height already were. Real bug this caused, reported
// with a screenshot: load a case study (or just hand-edit footprint) with a large footprint, switch
// to Bend, click Reset — Bend's own values (β_max, floors, floor-height) reset fine, but the stale
// large footprint survives untouched, and combined with Bend's β_max=180° default produces a
// self-overlapping fan/pac-man shape instead of a tower. Root cause, confirmed by the math in
// computeLayerPoint's bend case: worldY = (R − p[1]) · sinθ, where p[1] is the profile's own
// half-depth extent and R = h/β is the bend radius — the moment the footprint's half-extent exceeds
// R, (R − p[1]) goes negative and the profile inverts through the bend axis, folding the swept solid
// back on itself. At the true fresh-load defaults (footprint 2×2m, h=28m, β=180° → R=h/π≈8.91m),
// the profile's half-extent (1m) sits comfortably under R (ratio ≈0.11), so the shape was always
// fine at first load — the fan only appeared once footprint drifted away from that default and
// Reset had no way to know to put it back. Every mode's Reset now restores footprint alongside its
// own deformation parameters, closing that gap for all four (not just Bend, since Taper/Shear can
// look equally wrong at the wrong footprint scale even if they don't have Bend's hard inversion
// failure mode).
const MODE_DEFAULTS = {
  twist: { alphaMax: 120, floors: 8, floorHeightM: 3.5, footprintWidthM: 2.0, footprintDepthM: 2.0 },
  taper: { taperV: 0.5, taperW: 0.5, floors: 8, floorHeightM: 3.5, footprintWidthM: 2.0, footprintDepthM: 2.0 },
  shear: { shearDXM: 3.0, shearDYM: 1.0, floors: 8, floorHeightM: 3.5, footprintWidthM: 2.0, footprintDepthM: 2.0 },
  bend: { bendBetaMax: 180, floors: 8, floorHeightM: 3.5, footprintWidthM: 2.0, footprintDepthM: 2.0 },
  helix: { helixGenerator: 'line', helixTurns: 3, helixPitchM: 3.0, helixRInnerM: 0.3, helixROuterM: 2.2, helixTubeRM: 0.25, helixTubeOffsetM: 1.5 },
  morph: { preset: 'square', footprintWidthM: 2.0, footprintDepthM: 2.0, morphToPreset: 'ellipse', morphToWidthM: 2.0, morphToDepthM: 2.0, morphBlend: 1.0, floors: 8, floorHeightM: 3.5 },
};
function resetModeValues(mode){
  if(animPlayer) stopAnimation();
  if(mode === 'ffd'){
    state.ffdOffsets = [0,0,0,0,0,0,0,0].map(()=>({dx:0, dy:0, dz:0}));
  } else {
    Object.assign(state, MODE_DEFAULTS[mode]);
  }
  // Reposition every slider to match the now-reset state, reusing the same unit-aware sync
  // functions the metric/imperial toggle already relies on, so a reset while in imperial mode still
  // lands sliders at the right thumb position rather than the raw metric default numbers.
  alphaSlider.value = state.alphaMax;
  taperVSlider.value = state.taperV;
  taperWSlider.value = state.taperW;
  bendBetaSlider.value = state.bendBetaMax;
  floorsSlider.value = state.floors;
  helixTurnsSlider.value = state.helixTurns;
  if(mode === 'morph'){
    [...presetGrid.children].forEach(c=>c.classList.toggle('active', c.dataset.preset === state.preset));
    [...morphToGrid.children].forEach(c=>c.classList.toggle('active', c.dataset.morphto === state.morphToPreset));
  }
  syncFloorHeightSliderRange();
  syncFootprintSliderRange();
  syncShearSliderRange();
  syncHelixSliderRanges();
  applyModeChrome(); // in case helixGenerator changed, so the Line/Circle sub-toggle display follows
  syncSliderLabels(); pendingReframe = true; persist(); rebuild();
  toast((mode === 'ffd' ? 'Control points' : MODE_LABEL[mode] + ' values') + ' reset');
}
document.querySelectorAll('.reset-btn').forEach(btn=>{
  btn.addEventListener('click', ()=> resetModeValues(btn.dataset.resetmode));
});

// ---------- case studies (real buildings) ----------
// Height, floor count, and the mode's headline deformation figure (twist angle / lean angle) are
// sourced, documented figures for each building. Footprint width/depth are NOT sourced from a
// published plan dimension — they're a rough illustrative estimate sized to look proportionate,
// called out as such in the UI (see the note under the case-study buttons) rather than presented as
// if they were verified. Buildings are only added here when a SINGLE SPIRA operation genuinely
// represents their real form — Shanghai Tower (twists AND tapers) was deliberately left out of
// Twist's case studies for this reason, and the same bar applies to every mode: a building that
// combines two deformations, or whose real motion isn't the one this mode models (e.g. The Bow in
// Calgary curves in PLAN — a crescent footprint extruded straight up — not along its axis the way
// Bend does; it was investigated and rejected for exactly this reason), doesn't get a preset just to
// have more of them.
//
// v1.41.0: Capital Gate (RMJM, Abu Dhabi) was added in v1.17.0 as Shear's case study on the
// strength of its sourced 18° lean, with an in-app caveat that the real lean isn't linear from the
// base. Removed after user feedback ("not even close to what the actual project is in real life")
// prompted a closer look: the real building's floor plates don't just lean — they change SHAPE and
// orientation with height ("curved triangular" to "curved rectangular", per Skyscraper Center and
// RMJM's own case study), and the form itself is described as curved/organic throughout, not a
// straight-edged cross-section translated along a straight lean the way Shear models it. That's the
// same compound-deformation mismatch that got Shanghai Tower and The Bow rejected — the original
// caveat (nonlinear lean rate) understated how far off the geometry actually is. Shear had no case
// study for a while after that (see v1.49.0 below for what replaced it).
//
// v1.47.0: searched specifically for a real single-axis Bend candidate (a tower that curves along
// its vertical axis without also twisting or tapering) — came up empty. Real "curved" supertalls
// almost always compound bend with something else (twist, taper, or an in-plan crescent like The
// Bow), the same pattern that's already rejected several buildings above; nothing held up as an
// honest single-operation match. Left without a case study rather than force a compound building in
// with an understated caveat, the exact mistake Capital Gate was. Helix, previously also empty, now
// has one: the Guggenheim Museum NYC's spiral ramp (see its entry below).
//
// v1.49.0: Shear now has a case study — the Leaning Tower of Pisa (see its entry below), whose
// sourced figures independently cross-check (height×tan(lean) ≈ the separately-sourced top offset).
// Also investigated and rejected two more this round before either got this far: the Transamerica
// Pyramid (Taper — asymmetric wing buttresses partway up plus a separate spire) and Absolute
// World/"Marilyn Monroe" (Twist — also tapers inward then back out, a waist, not twist-only). Bend
// remains the only mode with no case study.
const CASE_STUDIES = {
  turningtorso: {
    mode: 'twist', label: 'Turning Torso',
    fields: { preset:'square', alphaMax:90, floors:54, floorHeightM:190/54, footprintWidthM:23, footprintDepthM:23 },
    toast: 'Turning Torso — 190m, 54 floors, 90° twist (Calatrava, Malmö, 2005)'
  },
  cayantower: {
    mode: 'twist', label: 'Cayan Tower',
    fields: { preset:'hexagon', alphaMax:90, floors:73, floorHeightM:306/73, footprintWidthM:22, footprintDepthM:22 },
    toast: 'Cayan Tower — 306m, 73 floors, 90° twist (SOM, Dubai, 2013)'
  },
  theshard: {
    mode: 'taper', label: 'The Shard',
    // Height and floor count are sourced (Wikipedia, Skyscraper Center, WSP's own engineering
    // write-up); taperV/taperW are NOT — no published base-width/top-width ratio was found despite
    // several searches, so this is an illustrative estimate, not a sourced figure. v1.19.1: the
    // first estimate (0.15) was wrong, not just imprecise — a user screenshot showed a needle-thin
    // spike with no resemblance to the real building ("very big spire that does not exist"). The
    // actual Shard stays visibly broad through most of its height and only narrows sharply in the
    // top ~15 (largely unoccupied, structural) floors of its ~95 — a single LINEAR taper across the
    // WHOLE height forced to reach 0.15x width at the top exaggerates that narrowing across the
    // entire building instead of concentrating it near the top the way the real silhouette does.
    // 0.4 is a considerably blunter, more visually plausible compromise for a single linear taper;
    // still an estimate, not a sourced ratio.
    fields: { preset:'square', taperV:0.4, taperW:0.4, floors:95, floorHeightM:309.6/95, footprintWidthM:28, footprintDepthM:28 },
    toast: 'The Shard — 309.6m, 95 floors, tapers to a near-point (Piano, London, 2012)'
  },
  pisa: {
    mode: 'shear', label: 'Leaning Tower of Pisa',
    // Shear's first case study — Capital Gate was removed here in v1.41.0 for exactly the kind of
    // compound mismatch this bar exists to catch. Investigated two other candidates for OTHER modes
    // this same round and rejected both before they got anywhere near this file: the Transamerica
    // Pyramid (Taper) has two asymmetric "wing" buttresses that appear partway up and don't taper
    // with the rest of the building, plus a separate 65m spire — a single linear taper can't
    // honestly represent that. Absolute World/"Marilyn Monroe" (Twist) turned out to also taper
    // inward then back out ("much narrower in the middle, in the waist") — the same twist+taper
    // compound that got Shanghai Tower rejected, just not obvious from the headline "twists 209°"
    // stat alone.
    //
    // Pisa is different: height (~56m), lean angle (~3.97°), floor count (8), and base diameter
    // (~15.5m) are all independently sourced, and they cross-check — height×tan(lean) computes to
    // ~3.89m, matching the ~3.9m horizontal top offset multiple sources cite directly, rather than
    // one figure being derived from the other. Real-building caveat: the lean isn't one straight
    // line from base to top the way linear Shear is — later floors were built at a slight corrective
    // counter-angle once the tilt was noticed during construction — but that's a deviation in the
    // SAME operation (translation along an axis), not a different one, the same single-parameter
    // simplification already accepted for The Shard's taper.
    fields: { preset:'ellipse', shearDXM: 56*Math.tan(3.97*Math.PI/180), shearDYM:0, floors:8, floorHeightM:56/8, footprintWidthM:15.5, footprintDepthM:15.5 },
    toast: 'Leaning Tower of Pisa — 56m, 8 floors, 3.97° lean (Pisa, Italy, 1372)'
  },
  guggenheim: {
    mode: 'helix', label: 'Guggenheim NYC',
    // Helix's first case study — Bend and Shear currently have none; see the rejection-criteria
    // comment above CASE_STUDIES for why (Bend specifically: searched for a real single-axis-curve
    // tower with no twist/taper compounded in, found nothing that held up — most "curved" supertalls
    // combine bend with twist or taper the same way Shanghai Tower combines twist+taper).
    //
    // Turns (6) and rise (~92ft/28m to the oculus, giving pitch = height/turns) are sourced across
    // multiple sources. Outer radius is sourced too, but only as an AVERAGE: the real ramp is not a
    // constant radius — published bottom/top diameters are 100ft and 128ft, i.e. the ramp genuinely
    // widens as it climbs, which Helix's Line generator (fixed inner/outer radius for the whole
    // sweep) can't represent — same kind of single-parameter simplification as The Shard's taper
    // estimate above, not the compound-geometry mismatch that got Capital Gate/Shanghai Tower
    // rejected outright. Inner (void) radius has no published figure and is a genuine illustrative
    // estimate, same status as every other case study's footprint size. helixROuterSlider/
    // helixRInnerSlider were widened this version (previously capped at 6m/3m, a "generic explorer"
    // scale) specifically because this building's sourced outer radius (~17.4m) exceeded the old cap
    // — same reasoning that already sized footprint sliders up to 30m for real buildings.
    fields: { helixGenerator:'line', helixTurns:6, helixPitchM:(92*0.3048)/6, helixRInnerM:4.5, helixROuterM:(114/2)*0.3048 },
    toast: 'Guggenheim Museum NYC — 6-turn spiral ramp, ~28m/92ft rise (Frank Lloyd Wright, 1959)'
  },
  lottesupertower: {
    mode: 'morph', label: 'Lotte Super Tower',
    // Morph's first case study — an unbuilt SOM proposal (design finish 2008, Seoul), distinct from
    // the built, KPF-designed Lotte World Tower. Rejected outright as a candidate for every OTHER
    // mode here, including compound: SOM's own description is that the tower rises "from a 70-meter
    // square base to a 40-meter diameter circle at its top" — a cross-section TOPOLOGY change (4-gon
    // to round), not a scaling/twisting/shearing of one consistent profile shape the way even a
    // compound twist+taper is. That's exactly the gap Morph exists to fill.
    //
    // Height (555m), story count (112), base (70m square), and top (40m diameter circle) are all
    // sourced directly from SOM's project page. floorHeightM is derived (555/112), not independently
    // sourced — same status as every other case study's per-floor height. No published figure
    // describes HOW the square-to-circle transition is distributed with height (linear vs.
    // concentrated near the top, the way The Shard's real taper concentrates near its spire) — Morph
    // only supports a linear blend in this release, so this is a simplification, not a literal match,
    // the same treatment already given to The Shard's taper and Pisa's lean.
    fields: { preset:'square', footprintWidthM:70, footprintDepthM:70, morphToPreset:'ellipse', morphToWidthM:40, morphToDepthM:40, floors:112, floorHeightM:555/112 },
    toast: 'Lotte Super Tower — 555m, 112 floors, square base to circular top (SOM, unbuilt, 2008)'
  }
};
function loadCaseStudy(key){
  const cs = CASE_STUDIES[key];
  if(!cs) return;
  if(animPlayer) stopAnimation();
  state.mode = cs.mode;
  state.compoundMode = null; // every case study is a specific real building's single-operation
                              // figure — compounding on top would misrepresent it as something the
                              // sourced facts don't actually describe
  Object.assign(state, cs.fields);
  // Reposition every affected control to match, same approach resetModeValues uses — unit-aware
  // sync functions so this lands correctly whether the sidebar is currently metric or imperial.
  // Sliders belonging to modes other than cs.mode are harmless to update even while hidden.
  [...presetGrid.children].forEach(c=>c.classList.toggle('active', c.dataset.preset === state.preset));
  [...morphToGrid.children].forEach(c=>c.classList.toggle('active', c.dataset.morphto === state.morphToPreset));
  alphaSlider.value = state.alphaMax;
  taperVSlider.value = state.taperV;
  taperWSlider.value = state.taperW;
  shearDXSlider.value = state.shearDXM;
  shearDYSlider.value = state.shearDYM;
  floorsSlider.value = state.floors;
  helixTurnsSlider.value = state.helixTurns;
  syncFloorHeightSliderRange();
  syncFootprintSliderRange();
  syncShearSliderRange();
  syncHelixSliderRanges();
  applyModeChrome();
  syncSliderLabels(); pendingReframe = true; persist(); rebuild();
  toast(cs.toast);
}
document.querySelectorAll('[data-casestudy]').forEach(btn=>{
  btn.addEventListener('click', ()=> loadCaseStudy(btn.dataset.casestudy));
});

// ---------- animation (v1.47.0) ----------
// One Play/Pause button (top of Deformation parameters, mode-agnostic — not duplicated per mode)
// ping-pongs the CURRENT mode's own primary deformation parameter(s) between a neutral starting
// value and whatever's currently dialed in, so the deformation can be watched happening instead of
// only ever compared as two static slider positions.
//
// Deliberately mutates `state` directly each animation frame and restores the exact pre-animation
// values on stop, rather than threading a temporary override through computeLayerPoint/
// buildDeformedGeometry — every geometry function already reads straight from `state`, and
// duplicating that plumbing just to avoid a few frames of temporary mutation would be a much larger,
// riskier change to code that's already verified correct elsewhere. Runs inside the existing
// animate() rAF loop (not a second one) and calls the very same rebuild() FFD handle dragging
// already calls on every single pointermove (see that section below) — so a full rebuild() every
// animation frame isn't a new class of per-frame cost this app takes on, just a new source of an
// already-accepted one.
const ANIMATABLE_PARAMS = {
  twist: [{key:'alphaMax', from:0}],
  taper: [{key:'taperV', from:1}, {key:'taperW', from:1}],
  shear: [{key:'shearDXM', from:0}, {key:'shearDYM', from:0}],
  bend:  [{key:'bendBetaMax', from:0}],
  // 0 turns would degenerate to a zero-length sweep; a small non-zero floor keeps the geometry
  // well-defined at the very start of the loop instead of a one-frame flash of nothing.
  helix: [{key:'helixTurns', from:0.05}],
  // v1.51.2: animates morphBlend, NOT the To-shape/To-size fields directly — 0 means "no blend at
  // any height" (a straight extrusion of the FROM shape, the same kind of neutral start every other
  // mode's animation uses), 1 is the fully configured morph. Letting Play ping-pong the FROM-size's
  // own extrusion into the real TO shape and back is a genuinely legible "watch it morph" animation,
  // unlike trying to animate morphToWidthM/DepthM toward some computed neutral (which wouldn't even
  // BE neutral whenever fromPreset !== toPreset — the shapes differ regardless of matched sizing).
  morph: [{key:'morphBlend', from:0}],
};
const ANIM_HALF_CYCLE_MS = 2200; // one direction of the ping-pong; full loop is double this
let animPlayer = null; // null when not animating

function easeInOutCubic(t){ return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2; }

const playPauseBtn = document.getElementById('playPauseBtn');
function startAnimation(){
  if(state.mode === 'ffd'){
    // Free has no single scalar deformation parameter the way every other mode does — 8
    // independently-draggable control points instead. "Animate toward the current target" still
    // makes sense generically (scale every offset by the same 0->1 blend factor, same idea as every
    // other mode's 0->dialed-in-value), but ONLY once at least one handle has actually been moved;
    // starting from Free's own default/Reset state (all 8 offsets exactly zero) would animate
    // toward a target that's also zero — Play would flip to Pause and visibly do nothing, which
    // read as broken rather than as "there's nothing to animate yet." Caught by user testing.
    const hasOffset = state.ffdOffsets.some(o => Math.hypot(o.dx, o.dy, o.dz) > 0.01);
    if(!hasOffset){
      toast('Drag a corner handle first — nothing to animate yet');
      return;
    }
    animPlayer = { startedAt: performance.now(), targetOffsets: state.ffdOffsets.map(o=>({...o})) };
  } else {
    const params = ANIMATABLE_PARAMS[state.mode] || [];
    if(params.length === 0) return; // every mode is covered above; defensive only
    animPlayer = { startedAt: performance.now(), params: params.map(p=>({ key:p.key, from:p.from, to:state[p.key] })) };
  }
  playPauseBtn.textContent = '⏸ Pause';
  playPauseBtn.classList.add('active');
}
function stopAnimation(){
  if(!animPlayer) return;
  // Restore the real dialed-in values exactly (not whatever the easing curve last landed on) —
  // stopping mid-cycle must never leave the sliders and `state` disagreeing.
  if(animPlayer.params) animPlayer.params.forEach(p=>{ state[p.key] = p.to; });
  else if(animPlayer.targetOffsets) state.ffdOffsets = animPlayer.targetOffsets;
  animPlayer = null;
  playPauseBtn.textContent = '▶ Play';
  playPauseBtn.classList.remove('active');
  rebuild();
}
function tickAnimation(){
  if(!animPlayer) return;
  const elapsed = performance.now() - animPlayer.startedAt;
  const cyclePos = (elapsed % (ANIM_HALF_CYCLE_MS*2)) / ANIM_HALF_CYCLE_MS; // 0..2
  const t = easeInOutCubic(cyclePos <= 1 ? cyclePos : (2 - cyclePos)); // ping-pong 0->1->0, eased
  if(animPlayer.params) animPlayer.params.forEach(p=>{ state[p.key] = p.from + (p.to - p.from) * t; });
  else if(animPlayer.targetOffsets) state.ffdOffsets = animPlayer.targetOffsets.map(o=>({ dx:o.dx*t, dy:o.dy*t, dz:o.dz*t }));
  rebuild();
}
playPauseBtn.addEventListener('click', ()=>{
  if(animPlayer) stopAnimation(); else startAnimation();
});
// A manual slider drag mid-animation would otherwise fight the animation loop for the same `state`
// field every frame — stop first so the drag wins outright, same as any other interaction would.
// pointerdown always fires before any subsequent 'input'/'change' from the same drag, so this is
// safe regardless of other listener registration order on the same element.
document.querySelectorAll('aside input[type="range"]').forEach(sl=>{
  sl.addEventListener('pointerdown', ()=>{ if(animPlayer) stopAnimation(); });
});
// Switching Operation, loading a case study, or Reset mid-animation is handled by calling
// stopAnimation() from inside those functions themselves (loadCaseStudy, resetModeValues, and the
// mode-switch handler) rather than via separately-registered listeners here — a second listener
// isn't guaranteed to run before the feature's own handler on the same click, and running after
// would restore stale pre-switch values over whatever the switch just set.

// ---------- loft profiles (.json) export ----------
// ---------- view (.png) export ----------
// v1.39.0: captures exactly what's rendered on the WebGL canvas at the moment of the click —
// current camera angle/projection (Perspective or Orthographic, v1.38.0), the solid, and every
// overlay that lives inside the Three.js scene itself (axis, base plane, rulings, slice rings,
// floor lines, point/origin labels — all real Sprite/Mesh/LineSegments objects in the scene, so
// they render into the canvas like anything else). The sidebar HUD panel and the panel-warp legend
// are separate HTML elements positioned on top of the canvas via CSS, not part of the WebGL scene,
// so canvas.toBlob() can't see them — disclosed in the button's own description rather than
// silently producing a screenshot that's missing something the user might expect. Forces one fresh
// renderer.render() immediately before capture so the exported image reflects state that's fully
// current — animate()'s requestAnimationFrame loop means the canvas already shows the latest frame
// in practice, but a direct re-render right before reading removes any doubt (and costs nothing:
// this is what animate() calls every 16ms anyway).
function exportViewPNG(){
  renderer.render(scene, camera);
  renderer.domElement.toBlob((blob)=>{
    if(!blob){ toast('Could not export image'); return; }
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    const stamp = new Date().toISOString().slice(0,19).replace(/[:T]/g,'-');
    a.href = url;
    a.download = `SPIRA_${state.mode}_view_${stamp}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toast('Exported view as PNG');
  }, 'image/png');
}
document.getElementById('exportViewPngBtn').addEventListener('click', exportViewPNG);
document.getElementById('copyShareLinkBtn').addEventListener('click', copyShareLink);

// ---------- comparison mode (v1.47.0) ----------
// "Save snapshot" clones the CURRENT solid as a translucent ghost sitting in the scene alongside the
// live model, so changing parameters after saving shows exactly how the new shape differs — overlaid
// in the same view, not a second synced viewport. A literal side-by-side implementation would need a
// second independent scene/camera/renderer/controls stack; this app's architecture (one of each,
// referenced directly throughout rebuild() and every overlay function) was never built to host more
// than one, and duplicating that whole stack would be a much larger, riskier restructuring than the
// feature is worth. The overlay approach instead reuses the existing rebuild() pipeline completely
// unchanged, for the snapshot exactly as much as the live model.
//
// Ghost geometry: temporarily swap `state` to the snapshot's captured values, call the real
// unmodified rebuild() (so the snapshot goes through exactly the same, already-verified geometry
// path as the live model — helix's different builder, FFD's trilinear blend, any mode — with zero
// duplicated geometry logic), clone solidGroup's resulting mesh(es) into ghostGroup, then swap state
// back and call rebuild() again for the live geometry. Costs two rebuild() calls, but only once, at
// the moment "Save snapshot" is clicked — not per frame, unlike animation's continuous rebuild().
//
// pendingReframe is explicitly held off during the snapshot's own rebuild() and restored before the
// live one: rebuild() reframes the camera itself when pendingReframe is true (v1.23.0), and since
// both calls share that one global flag, letting the snapshot's rebuild() consume it would frame the
// camera to the SNAPSHOT's bounding box and leave the live geometry's own pending reframe silently
// dropped.
const MODEL_STATE_KEYS = Object.keys(state); // every field that defines "the shape" — the same
                                               // universe encodeStateToURL() and localStorage
                                               // persistence already treat as "the model"
let snapshotState = null;   // captured model fields at the moment of the last "Save snapshot"
let snapshotHeightM = null; // captured alongside it, for the delta readout
const ghostGroup = new THREE.Group();
scene.add(ghostGroup); // scene directly, not solidGroup/overlayGroup — same reasoning as groundGrid:
                        // it must survive solidGroup being cleared every rebuild(), and must not be
                        // swept into camera-fit Box3 calculations (both fit functions scope to
                        // solidGroup only, exactly the property this relies on).
const ghostMaterial = new THREE.MeshStandardMaterial({
  color: 0xb23a2e, transparent: true, opacity: 0.28, depthWrite: false, side: THREE.DoubleSide
}); // hardcoded to --brick's light-theme hex rather than a CSS var — three.js materials need an
    // actual numeric color, and "reference/before" is the same role brick already carries in the
    // UI; letting it shift with the Blueprint theme would work against that reused meaning.
function disposeGhostGroup(){
  ghostGroup.children.forEach(m=>m.geometry.dispose());
  while(ghostGroup.children.length) ghostGroup.remove(ghostGroup.children[0]);
}
function updateCompareDeltaNote(){
  const note = document.getElementById('compareDeltaNote');
  if(!snapshotState){ note.textContent = ''; return; }
  const u = unitLabels();
  const liveH = totalHeightM();
  const deltaH = liveH - snapshotHeightM;
  const sign = deltaH >= 0 ? '+' : '';
  note.textContent = `Snapshot height ${toDisplayLen(snapshotHeightM).toFixed(1)}${u.len} · ` +
    `live ${toDisplayLen(liveH).toFixed(1)}${u.len} · Δ ${sign}${toDisplayLen(deltaH).toFixed(1)}${u.len}`;
}
function rebuildGhostFromSnapshot(){
  if(!snapshotState) return;
  disposeGhostGroup();
  const liveBackup = {};
  MODEL_STATE_KEYS.forEach(k=>{ liveBackup[k] = state[k]; });
  const hadPendingReframe = pendingReframe;
  pendingReframe = false; // this rebuild() is the snapshot's — must not drive the camera
  Object.assign(state, snapshotState);
  rebuild();
  solidGroup.children.forEach(m=>{
    const clone = m.clone();
    clone.material = ghostMaterial;
    clone.visible = true; // force visible even if Panel flatness had auto-hidden the solid when the snapshot was saved
    ghostGroup.add(clone);
  });
  Object.assign(state, liveBackup);
  pendingReframe = hadPendingReframe; // now let the LIVE rebuild() honor whatever was actually pending
  rebuild();
  updateCompareDeltaNote();
}
function saveSnapshot(){
  if(animPlayer) stopAnimation(); // otherwise this would capture a random mid-animation frame,
                                    // not the dialed-in target values the user actually set
  snapshotState = {};
  MODEL_STATE_KEYS.forEach(k=>{
    const v = state[k];
    snapshotState[k] = (v && typeof v === 'object') ? JSON.parse(JSON.stringify(v)) : v; // deep-copy ffdOffsets/overlays
  });
  snapshotHeightM = totalHeightM();
  rebuildGhostFromSnapshot();
  showComparison = true;
  ghostGroup.visible = true;
  document.getElementById('showComparisonSwitch').classList.add('on');
  toast('Snapshot saved — showing comparison');
}
let showComparison = false;
document.getElementById('saveSnapshotBtn').addEventListener('click', saveSnapshot);
document.getElementById('showComparisonSwitch').addEventListener('click', ()=>{
  if(!snapshotState){ toast('Save a snapshot first'); return; }
  showComparison = !showComparison;
  ghostGroup.visible = showComparison;
  document.getElementById('showComparisonSwitch').classList.toggle('on', showComparison);
});

// ---------- loft profiles (.json) export ----------
// Exports N evenly spaced cross-section profiles up the height, meant to be consumed by a script
// running inside the target application (a Dynamo Python Script node — see the bundled
// spira_import_loft_dynamo.py, downloadable below) that builds a genuine native loft through them,
// letting Revit's own kernel fit a true curved surface rather than approximating one with flat
// facets. Reuses lastBuild + computeLayerPoint, the exact same source of truth the render mesh
// uses, so the sampled profiles are guaranteed to match what's on screen rather than risking a
// second, drifting implementation of the same math inside whatever script consumes this file.
function round6(v){ return Math.round(v*1e6)/1e6; }

function buildLoftProfilesJSON(){
  if(!lastBuild) return null;
  const { mode, profile, h, closed, n, evalPoint } = lastBuild;
  const N = Math.max(2, state.loftProfileCount);
  const MM = 1000;
  const levels = [];
  for(let k=0;k<N;k++){
    const t = N === 1 ? 0 : k/(N-1);
    const y = t*h;
    const points = profile.map(p=>{
      const [x, yOut, z] = evalPoint(y, p);
      // Y-up (Three.js/SPIRA) -> Z-up (Revit/AutoCAD/ACIS convention): (x,y,z) -> (x,-z,y), a pure
      // rotation, so downstream consumers of this JSON don't need to re-derive or re-check it.
      return [ round6(x*MM), round6(-z*MM), round6(yOut*MM) ];
    });
    levels.push({ t: round6(t), height_mm: round6(y*MM), points });
  }
  const payload = {
    schema: 'spira-loft-profiles-v1',
    app_version: APP_VERSION,
    mode,
    units: 'mm',
    axis_convention: 'Z-up (Revit/AutoCAD/ACIS) — remapped from SPIRA internal Y-up via (x,y,z) -> (x,-z,y)',
    closed,                    // false only for Helix's open 'line' generator — build an open
                                // polyline/spline per level instead of a closed loop
    profile_point_count: n,
    height_mm: round6(h*MM),
    level_count: N,
    levels                     // each level: { t, height_mm, points: [[x,y,z], ...] }, points in
                                // profile order — connect consecutive levels' same-index points as
                                // loft rail lines if a script wants ruled continuity, or hand each
                                // level's point loop straight to a loft/sweep API as a profile curve
  };
  return { json: JSON.stringify(payload, null, 2), levelCount: N };
}

function exportLoftProfilesJSON(){
  const result = buildLoftProfilesJSON();
  if(!result){ toast('Nothing to export yet'); return; }
  const blob = new Blob([result.json], {type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  const stamp = new Date().toISOString().slice(0,19).replace(/[:T]/g,'-');
  a.href = url;
  a.download = `SPIRA_${state.mode}_loftprofiles_${stamp}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  toast(`Exported loft profiles — ${result.levelCount} levels`);
}
document.getElementById('exportLoftJsonBtn').addEventListener('click', exportLoftProfilesJSON);

// ---------- panel schedule (.csv) export ----------
// v1.36.0: a fabrication-usable schedule of every panel Panel flatness (warp) is currently
// analyzing — one row per panel, with its real-world width, warp, a severity band matching the
// overlay's own color thresholds, and all 4 corner coordinates (same Y-up->Z-up remap as the loft
// profiles export, for the same reason: downstream CAD/BIM tools expect Z-up). Recomputes fresh
// from lastBuild via computePanelWarp/subdivideProfileForPanels — the exact same functions and
// inputs (current floors/floorHeightM or Helix segs, current panelSubdiv) the live overlay and HUD
// use, so the export always matches what's on screen rather than risking a second, drifting
// implementation of the same math (same principle buildLoftProfilesJSON follows above).
function buildPanelScheduleCSV(){
  if(!lastBuild) return null;
  const { mode, profile, h, closed, n, segs, evalPoint } = lastBuild;
  const loopCount = mode === 'helix' ? segs : state.floors;
  const stepM = mode === 'helix' ? h/segs : state.floorHeightM;
  const { subProfile, subN } = subdivideProfileForPanels(profile, n, closed, state.panelSubdiv);
  const { panels } = computePanelWarp(subProfile, evalPoint, subN, closed, loopCount, stepM);
  const MM = 1000;
  const toRow = (p) => [p[0]*MM, -p[2]*MM, p[1]*MM].map(round6); // Y-up -> Z-up, same as loft export
  const header = [
    'panel_id','floor_index','edge_index','width_mm','width_ft','warp_mm','warp_in','severity',
    'corner00_x_mm','corner00_y_mm','corner00_z_mm','corner01_x_mm','corner01_y_mm','corner01_z_mm',
    'corner10_x_mm','corner10_y_mm','corner10_z_mm','corner11_x_mm','corner11_y_mm','corner11_z_mm'
  ];
  const numEdges = closed ? subN : subN-1;
  const rows = panels.map((panel, idx)=>{
    const { p00, p01, warpAbsM } = panel;
    const widthM = Math.hypot(p01[0]-p00[0], p01[1]-p00[1], p01[2]-p00[2]);
    const warpMM = warpAbsM*1000;
    // Same thresholds warpColor() uses (0/25/50mm green/amber/red stops), so a row's severity label
    // always matches the color the corresponding panel is actually drawn with on screen.
    const severity = warpMM < 25 ? 'green' : warpMM < 50 ? 'amber' : 'red';
    return [
      idx+1, Math.floor(idx/numEdges), idx%numEdges,
      round6(widthM*MM), round6(widthM*M_TO_FT),
      round6(warpMM), round6(warpAbsM*M_TO_FT*12),
      severity,
      ...toRow(panel.p00), ...toRow(panel.p01), ...toRow(panel.p10), ...toRow(panel.p11)
    ].join(',');
  });
  return { csv: [header.join(','), ...rows].join('\n'), panelCount: panels.length };
}
function exportPanelScheduleCSV(){
  const result = buildPanelScheduleCSV();
  if(!result){ toast('Nothing to export yet'); return; }
  const blob = new Blob([result.csv], {type:'text/csv'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  const stamp = new Date().toISOString().slice(0,19).replace(/[:T]/g,'-');
  a.href = url;
  a.download = `SPIRA_${state.mode}_panelschedule_${stamp}.csv`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  toast(`Exported panel schedule — ${result.panelCount} panels`);
}
document.getElementById('exportPanelScheduleBtn').addEventListener('click', exportPanelScheduleCSV);

// ---------- Dynamo import script download ----------
// Bundles the companion Dynamo Python-node script (see loftProfileCount export above) directly
// into the app, so it's self-contained and discoverable without needing outside docs. Static
// content (not per-export generated) -- update this string when the script itself is revised.
const DYNAMO_IMPORT_SCRIPT_PY = `# -*- coding: utf-8 -*-
"""
Import a SPIRA "loft profiles" JSON export as a native Revit solid -- Dynamo version.

Builds a genuine Revit-kernel solid through SPIRA's exported cross-section
profiles via GeometryCreationUtilities.CreateLoftGeometry. Because Revit's own
kernel fits the loft, a curved operation (Twist/Taper/Bend) comes in as real
curved faces -- pick one side and you get the whole side, not one triangle out
of a few hundred, which is what a flat-faceted import would give for those modes.

WHERE THE GEOMETRY GOES depends on what document is active when you run this:
  - A Conceptual Mass FAMILY document (File -> New -> Family -> Conceptual
    Mass template, or an already-open one): builds a real FreeFormElement --
    a genuine Mass Form, the same kind of element the Family Editor's own
    form tools create. Save the family and use "Load into Project" to bring
    a real, reusable, loadable Mass Family into any project.
  - A regular PROJECT document: falls back to a DirectShape in the Mass
    category, placed directly in that project -- pickable by Wall/Curtain/
    Roof by Face, but a one-off element in this project only, not a loadable
    family.

Run Dynamo directly from whichever document you want the geometry to end up
in -- open Family1.rfa (or a fresh Conceptual Mass family) and launch Dynamo
from THAT document's own Manage tab if you want a Mass Form; launch it from
a project if you want the DirectShape. Each Dynamo session stays attached to
whichever document was active when it was launched.

SETUP (one-time, ~2 minutes):
  1. With the target document active (family or project): Manage tab -> Dynamo -> New.
  2. Add a "File Path" node, click its file icon, browse to a SPIRA .json export.
  3. Add a "Python Script" node, wire File Path's output into its IN[0].
  4. Double-click the Python Script node, select all the placeholder code,
     paste this entire file in its place.
  5. Run the graph (checkmark / Run button in the top toolbar).

Re-running with a different file path (or re-picking the file) imports a
different export without touching the graph itself.

A note on an earlier, overstated caution: this uses a Python Script node
making direct RevitAPI calls, not Dynamo's built-in Revit nodes (Wall.ByFace
etc., which really are project-oriented and less reliable in a family
document) -- a Python node talks to the RevitAPI the same way regardless of
which kind of document is active, so it should work fine here too.

SCOPE, v1: only closed cross-sections (Twist/Taper/Shear/Bend/Free, and
Helix's 'circle' generator). Helix's open 'line' generator (a ribbon, not a
solid) needs a surface-building approach instead of CreateLoftGeometry and
isn't handled here -- the node errors out with a clear message rather than
silently building the wrong thing.
"""

import clr
clr.AddReference('RevitAPI')
clr.AddReference('RevitServices')
clr.AddReference('RevitNodes')
import Revit
clr.ImportExtensions(Revit.GeometryConversion)  # adds .ToProtoType() to RevitAPI geometry --
                                                  # the raw Autodesk.Revit.DB.Solid this script
                                                  # builds is opaque to Dynamo's own 3D canvas,
                                                  # which only draws its native geometry types
from Autodesk.Revit.DB import (
    XYZ, Line, CurveLoop, GeometryCreationUtilities, SolidOptions,
    ElementId, BuiltInCategory, DirectShape, FreeFormElement,
)
from RevitServices.Persistence import DocumentManager
from RevitServices.Transactions import TransactionManager

import json

doc = DocumentManager.Instance.CurrentDBDocument

MM_PER_FOOT = 304.8


def mm_to_ft(value_mm):
    return value_mm / MM_PER_FOOT


def load_spira_json(path):
    with open(path, "r") as f:
        data = json.load(f)

    schema = data.get("schema")
    if schema != "spira-loft-profiles-v1":
        raise ValueError(
            "Not a SPIRA loft-profiles export (expected schema "
            "'spira-loft-profiles-v1', got '{}'). Export it from SPIRA's "
            "sidebar: Export section -> 'Export loft profiles (.json)'.".format(schema)
        )

    levels = data.get("levels", [])
    if len(levels) < 2:
        raise ValueError("Only {} level(s) in this export -- need at least 2 "
                          "to loft through.".format(len(levels)))

    point_counts = set(len(lv["points"]) for lv in levels)
    if len(point_counts) != 1:
        raise ValueError("Levels have inconsistent profile point counts: {} "
                          "-- that shouldn't happen from a normal SPIRA "
                          "export.".format(sorted(point_counts)))

    return data


def build_curve_loop(points_mm, closed):
    """One level's profile points -> a Revit CurveLoop of straight Line segments.

    SPIRA's cross-sections are already straight-edged polygons, so each level
    only needs straight lines between its own points -- the *loft* across
    levels is where CreateLoftGeometry does the actual curve fitting for
    Twist/Taper/Bend, not anything at the single-level/cross-section level.
    """
    pts_ft = [
        XYZ(mm_to_ft(p[0]), mm_to_ft(p[1]), mm_to_ft(p[2]))
        for p in points_mm
    ]
    n = len(pts_ft)
    edge_count = n if closed else n - 1

    loop = CurveLoop()
    for i in range(edge_count):
        a = pts_ft[i]
        b = pts_ft[(i + 1) % n]
        if a.DistanceTo(b) < 1e-9:
            continue  # skip a degenerate zero-length edge rather than crash
        loop.Append(Line.CreateBound(a, b))
    return loop


def build_loft_solid(data):
    closed = data.get("closed", True)
    if not closed:
        raise ValueError(
            "This export is an open profile (closed: false) -- SPIRA's "
            "Helix 'line' generator, which has no solid interior to loft. "
            "This script only builds closed-profile solids (Twist/Taper/"
            "Shear/Bend/Free, and Helix's 'circle' generator)."
        )

    loops = [build_curve_loop(level["points"], closed) for level in data["levels"]]

    solid_options = SolidOptions(ElementId.InvalidElementId, ElementId.InvalidElementId)
    try:
        solid = GeometryCreationUtilities.CreateLoftGeometry(loops, solid_options)
    except Exception as ex:
        raise ValueError(
            "Revit's loft builder rejected these profiles: {}\\n\\n"
            "This can happen with a large twist/bend angle and too few loft "
            "profiles -- try raising SPIRA's 'loft profiles' slider before "
            "re-exporting, or reducing the deformation angle.".format(ex)
        )

    return solid


def place_geometry(doc, solid, data):
    label = "SPIRA {} loft ({} levels)".format(
        data.get("mode", "?"), data.get("level_count", len(data["levels"]))
    )

    if doc.IsFamilyDocument:
        owner_category_id = doc.OwnerFamily.FamilyCategory.Id
        mass_category_id = ElementId(BuiltInCategory.OST_Mass)
        if owner_category_id != mass_category_id:
            raise ValueError(
                "This family document's category is '{}', not Mass. "
                "FreeFormElement.Create (the API for adding a genuine Mass "
                "Form) needs a Conceptual Mass family -- start a new family "
                "from the Conceptual Mass template (File -> New -> Family) "
                "and run this graph with that document active instead.".format(
                    doc.OwnerFamily.FamilyCategory.Name
                )
            )

        # A genuine Mass Form -- the same kind of element the Family Editor's
        # own form tools (Extrude, Loft, etc.) create. Once this family is
        # saved and loaded into a project ("Load into Project" on the ribbon),
        # it's a real, reusable, loadable Mass Family with pickable faces --
        # not a one-off element tied to a single project the way a DirectShape is.
        TransactionManager.Instance.EnsureInTransaction(doc)
        ffe = FreeFormElement.Create(doc, solid)
        TransactionManager.Instance.TransactionTaskDone()
        return ffe, "FreeFormElement (Mass Form) inside this family document"

    else:
        # Regular project document: no family/form concept to build into, so
        # fall back to a DirectShape in the Mass category -- pickable by Wall/
        # Curtain/Roof by Face same as a Mass Form, but a one-off element
        # local to this project, not a loadable family.
        category_id = ElementId(BuiltInCategory.OST_Mass)
        TransactionManager.Instance.EnsureInTransaction(doc)
        ds = DirectShape.CreateElement(doc, category_id)
        ds.SetShape([solid])
        ds.Name = label
        TransactionManager.Instance.TransactionTaskDone()
        return ds, "DirectShape (Mass category) in this project -- not a loadable family"


# ---- Dynamo node entry point ----
# IN[0]: file path string, wired from a "File Path" node (see setup notes above)
path = IN[0]

spira_data = load_spira_json(path)
loft_solid = build_loft_solid(spira_data)
element, placement_desc = place_geometry(doc, loft_solid, spira_data)

status = "Imported {} -- mode '{}', {} levels, {:.1f} m tall. Placed as {}. Element id {}.".format(
    path, spira_data.get("mode", "?"), spira_data.get("level_count", len(spira_data["levels"])),
    spira_data.get("height_mm", 0) / 1000.0, placement_desc, element.Id
)
if doc.IsFamilyDocument:
    status += " Next: save this family, then use Load into Project to bring it into a project."
print(status)

# Returning the Solid is what lets Dynamo draw it, but only once converted to
# Dynamo's own geometry type via ToProtoType() -- the raw RevitAPI Solid that
# FreeFormElement/DirectShape actually used above is a different type Dynamo's
# canvas can't render directly. The document element itself was already built
# from the original (unconverted) solid, so this conversion only affects the
# preview, not what got placed in the model.
OUT = loft_solid.ToProtoType()
`;

function downloadDynamoScript(){
  const blob = new Blob([DYNAMO_IMPORT_SCRIPT_PY], {type:'text/x-python'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'spira_import_loft_dynamo.py';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  toast('Downloaded Dynamo import script');
}
document.getElementById('downloadDynamoScriptBtn').addEventListener('click', downloadDynamoScript);

document.getElementById('viewTopBtn').addEventListener('click', ()=>{ frameCameraTop(); syncGroundGridExtent(lastModelRadius); toast('Top view'); });
document.getElementById('viewFrontBtn').addEventListener('click', ()=>{ frameCameraFront(); syncGroundGridExtent(lastModelRadius); toast('Front / elevation view'); });
document.getElementById('viewHomeBtn').addEventListener('click', ()=>{ frameCameraDefault(); syncGroundGridExtent(lastModelRadius); toast('Home view'); });

// ---------- FFD handle dragging ----------
// Standard screen-facing-plane drag: on pointerdown over a handle, build a plane through that
// handle's current position facing the camera, then on pointermove intersect the pointer ray with
// that fixed plane — gives intuitive free 3D dragging from ordinary 2D pointer input. Disables
// OrbitControls for the duration so orbiting doesn't fight the drag.
const raycaster = new THREE.Raycaster();
const pointerNDC = new THREE.Vector2();
const dragPlane = new THREE.Plane();
const dragPoint = new THREE.Vector3();
let draggingIndex = -1;
let dragBoxCorner = null;

function setPointerNDC(evt){
  const rect = renderer.domElement.getBoundingClientRect();
  pointerNDC.x = ((evt.clientX - rect.left) / rect.width) * 2 - 1;
  pointerNDC.y = -((evt.clientY - rect.top) / rect.height) * 2 + 1;
}

renderer.domElement.addEventListener('pointerdown', (evt)=>{
  if(state.mode !== 'ffd') return;
  setPointerNDC(evt);
  raycaster.setFromCamera(pointerNDC, camera);
  const hits = raycaster.intersectObjects(ffdHandleMeshes);
  if(hits.length === 0) return;
  draggingIndex = hits[0].object.userData.ffdIndex;
  const iu = Math.floor(draggingIndex/4), iv = Math.floor((draggingIndex%4)/2), iw = draggingIndex%2;
  const h = totalHeightM();
  const profile = scaledProfile(state.preset, state.footprintWidthM, state.footprintDepthM);
  const box = {
    minX: Math.min(...profile.map(p=>p[0])), maxX: Math.max(...profile.map(p=>p[0])),
    minZ: Math.min(...profile.map(p=>p[1])), maxZ: Math.max(...profile.map(p=>p[1]))
  };
  dragBoxCorner = ffdDefaultCP(box, h, iu, iv, iw);
  const camDir = new THREE.Vector3();
  camera.getWorldDirection(camDir);
  dragPlane.setFromNormalAndCoplanarPoint(camDir, hits[0].object.position);
  controls.enabled = false;
  renderer.domElement.style.cursor = 'grabbing';
  evt.preventDefault();
});

renderer.domElement.addEventListener('pointermove', (evt)=>{
  if(state.mode === 'ffd' && draggingIndex === -1){
    // hover feedback: show a grab cursor over a handle even before dragging
    setPointerNDC(evt);
    raycaster.setFromCamera(pointerNDC, camera);
    renderer.domElement.style.cursor = raycaster.intersectObjects(ffdHandleMeshes).length ? 'grab' : 'auto';
  }
  if(draggingIndex === -1) return;
  setPointerNDC(evt);
  raycaster.setFromCamera(pointerNDC, camera);
  if(raycaster.ray.intersectPlane(dragPlane, dragPoint)){
    state.ffdOffsets[draggingIndex] = {
      dx: dragPoint.x - dragBoxCorner[0],
      dy: dragPoint.y - dragBoxCorner[1],
      dz: dragPoint.z - dragBoxCorner[2]
    };
    rebuild();
  }
  evt.preventDefault();
});

function endFfdDrag(){
  if(draggingIndex === -1) return;
  draggingIndex = -1;
  dragBoxCorner = null;
  controls.enabled = true;
  renderer.domElement.style.cursor = 'auto';
  persist();
}
renderer.domElement.addEventListener('pointerup', endFfdDrag);
renderer.domElement.addEventListener('pointerleave', endFfdDrag);

// ---------- click-to-type value entry ----------
// Every slider's readout is also a direct-entry field: click it, type a number (or, for a length
// field in imperial mode, feet-inches like 8'-6"), Enter/blur commits, Escape cancels. One generic
// binder driven by a declarative config per field, rather than duplicating click/parse/commit logic
// for each of the ~19 fields — 'length' fields store meters and accept feet-inches; 'angle' and
// 'ratio' are plain decimals; 'count' rounds to an integer. Committing re-runs the exact same
// syncSliderLabels/persist/rebuild sequence the slider's own 'input' listener uses, and moves the
// slider thumb to match, so typing a value and dragging the slider stay in perfect sync either way.
const EDITABLE_FIELDS = [
  { valId:'alphaVal', sliderEl:alphaSlider, type:'angle', get:()=>state.alphaMax, set:v=>{state.alphaMax=v;} },
  { valId:'bendBetaVal', sliderEl:bendBetaSlider, type:'angle', get:()=>state.bendBetaMax, set:v=>{state.bendBetaMax=v;} },
  { valId:'taperVVal', sliderEl:taperVSlider, type:'ratio', get:()=>state.taperV, set:v=>{state.taperV=v;} },
  { valId:'taperWVal', sliderEl:taperWSlider, type:'ratio', get:()=>state.taperW, set:v=>{state.taperW=v;} },
  { valId:'shearDXVal', sliderEl:shearDXSlider, type:'length', getM:()=>state.shearDXM, setM:v=>{state.shearDXM=v;} },
  { valId:'shearDYVal', sliderEl:shearDYSlider, type:'length', getM:()=>state.shearDYM, setM:v=>{state.shearDYM=v;} },
  { valId:'floorsVal', sliderEl:floorsSlider, type:'count', get:()=>state.floors, set:v=>{state.floors=v;} },
  { valId:'floorHeightVal', sliderEl:floorHeightSlider, type:'length', getM:()=>state.floorHeightM, setM:v=>{state.floorHeightM=v;} },
  { valId:'resVal', sliderEl:resSlider, type:'count', get:()=>state.segments, set:v=>{state.segments=v;} },
  { valId:'helixTurnsVal', sliderEl:helixTurnsSlider, type:'count', get:()=>state.helixTurns, set:v=>{state.helixTurns=v;} },
  { valId:'helixPitchVal', sliderEl:helixPitchSlider, type:'length', getM:()=>state.helixPitchM, setM:v=>{state.helixPitchM=v;} },
  { valId:'helixRInnerVal', sliderEl:helixRInnerSlider, type:'length', getM:()=>state.helixRInnerM, setM:v=>{state.helixRInnerM=v;} },
  { valId:'helixROuterVal', sliderEl:helixROuterSlider, type:'length', getM:()=>state.helixROuterM, setM:v=>{state.helixROuterM=v;} },
  { valId:'helixTubeRVal', sliderEl:helixTubeRSlider, type:'length', getM:()=>state.helixTubeRM, setM:v=>{state.helixTubeRM=v;} },
  { valId:'helixTubeOffsetVal', sliderEl:helixTubeOffsetSlider, type:'length', getM:()=>state.helixTubeOffsetM, setM:v=>{state.helixTubeOffsetM=v;} },
  { valId:'footprintWidthVal', sliderEl:footprintWidthSlider, type:'length', getM:()=>state.footprintWidthM, setM:v=>{state.footprintWidthM=v;} },
  { valId:'footprintDepthVal', sliderEl:footprintDepthSlider, type:'length', getM:()=>state.footprintDepthM, setM:v=>{state.footprintDepthM=v;} },
  { valId:'morphToWidthVal', sliderEl:morphToWidthSlider, type:'length', getM:()=>state.morphToWidthM, setM:v=>{state.morphToWidthM=v;} },
  { valId:'morphToDepthVal', sliderEl:morphToDepthSlider, type:'length', getM:()=>state.morphToDepthM, setM:v=>{state.morphToDepthM=v;} },
];

function bindEditableValue(cfg){
  const valEl = document.getElementById(cfg.valId);
  valEl.title = 'Click to type a value';
  valEl.addEventListener('click', ()=>{
    if(valEl.querySelector('input')) return; // already editing

    let currentRaw;
    if(cfg.type === 'length'){
      const m = cfg.getM();
      currentRaw = state.units === 'imperial' ? formatFeetInches(m*M_TO_FT) : toDisplayLen(m).toFixed(2);
    } else if(cfg.type === 'ratio'){
      currentRaw = cfg.get().toFixed(2);
    } else {
      currentRaw = String(cfg.get());
    }

    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'val-edit-input';
    input.value = currentRaw;

    let committed = false;
    function commit(){
      if(committed) return;
      committed = true;
      const raw = input.value.trim();
      let ok = false;
      if(cfg.type === 'length'){
        const parsedDisplay = parseLengthInput(raw, state.units === 'imperial');
        if(parsedDisplay !== null){
          let m = state.units === 'imperial' ? parsedDisplay / M_TO_FT : parsedDisplay;
          const minM = state.units === 'imperial' ? parseFloat(cfg.sliderEl.min)/M_TO_FT : parseFloat(cfg.sliderEl.min);
          const maxM = state.units === 'imperial' ? parseFloat(cfg.sliderEl.max)/M_TO_FT : parseFloat(cfg.sliderEl.max);
          m = Math.min(maxM, Math.max(minM, m));
          cfg.setM(m);
          cfg.sliderEl.value = state.units === 'imperial' ? (m*M_TO_FT).toFixed(2) : m.toFixed(2);
          ok = true;
        }
      } else {
        const n = parseFloat(raw);
        if(Number.isFinite(n)){
          let v = cfg.type === 'count' ? Math.round(n) : n;
          const min = parseFloat(cfg.sliderEl.min), max = parseFloat(cfg.sliderEl.max);
          v = Math.min(max, Math.max(min, v));
          cfg.set(v);
          cfg.sliderEl.value = v;
          ok = true;
        }
      }
      if(ok){ if(cfg.valId !== 'resVal') pendingReframe = true; persist(); rebuild(); }
      syncSliderLabels(); // restores the span's text either way — the committed value if ok, unchanged if not
    }
    input.addEventListener('keydown', e=>{
      if(e.key === 'Enter') commit();
      else if(e.key === 'Escape'){ committed = true; syncSliderLabels(); }
      e.stopPropagation();
    });
    input.addEventListener('blur', commit);
    input.addEventListener('click', e=>e.stopPropagation());

    valEl.textContent = '';
    valEl.appendChild(input);
    input.focus();
    input.select();
  });
}
EDITABLE_FIELDS.forEach(bindEditableValue);

// ---------- render loop ----------
function animate(){
  requestAnimationFrame(animate);
  // v1.53.1: the whole app (including the canvas) is display:none behind #mobileBlock below 760px
  // — still requestAnimationFrame every frame (cheap, and means rendering resumes instantly if the
  // window's resized back above the breakpoint) but skip the actual per-frame work, so a phone
  // doesn't keep a full WebGL render loop running against a screen nobody can see.
  if(window.matchMedia('(max-width: 760px)').matches) return;
  if(animPlayer) tickAnimation();
  // v1.33.0: near/far used to only ever be set once per view-fit (Home/Top/Front/rebuild), sized
  // for that fit's own distance — scrolling to manually zoom out further than that could exceed
  // the far plane and clip the model out of view entirely, which read as "can't zoom out any
  // further" even though OrbitControls itself has no maxDistance limit; the camera could keep
  // moving back, the model just vanished. Recomputed every frame from the camera's actual live
  // distance to the orbit target instead, so near/far always bracket the visible content correctly
  // at any zoom level, in or out, with no artificial ceiling.
  const distToTarget = camera.position.distanceTo(controls.target);
  camera.near = Math.max(distToTarget * 0.005, 0.01);
  camera.far = distToTarget + Math.max(lastModelRadius * 2, 50);
  camera.updateProjectionMatrix();
  controls.update();
  renderer.render(scene, camera);
}

// ==================== v1.52.0: teaching content ====================
// Three additions, all reusing existing state/computation rather than duplicating it: glossary
// tooltips woven into the Reference panel (already existed, see REFERENCE_TEXT above) and the HUD's
// Cavalieri line; a self-checking Exercises list graded against the exact cached values
// (lastMaxWarpM/lastVolDeformed/lastVolPrism, set at their one real computation site inside
// rebuild() — see those assignments above) the HUD itself displays; and a guided first-visit tour.

// ---------- glossary tooltips ----------
const GLOSSARY = {
  cavalieri: { name: "Cavalieri's principle", def: "If two solids have equal cross-sectional area at every height, they have equal volume. Twist and Shear both rotate/translate each slice without changing its area, so this guarantees their deformed volume exactly equals the straight prism's — no integration needed. It's what the HUD's \u201Cvolumes match\u201D readout is confirming." },
  developable: { name: 'Developable surface', def: 'A surface that can be unrolled flat onto a plane with no stretching or tearing — real sheet material (metal panel, paper) can only exactly take this shape. Bend is the one operation in SPIRA that stays developable at every angle; every other curved mode warps.' },
  ruled: { name: 'Ruled surface', def: "A surface built entirely from straight lines (rulings) connecting one curve to another. Every operation in SPIRA builds a ruled surface between consecutive floor plates — being ruled doesn't by itself mean flat/developable, though: Bend's rulings happen to stay planar, Twist's don't." },
  helicoid: { name: 'Helicoid', def: "The surface swept by a straight line rotating at a constant rate while translating along its own axis — picture a spiral ramp with zero-width steps. Twist's side faces approximate one locally; Helix's \u201CLine\u201D generator sweeps a true one directly." },
  lerp: { name: 'Lerp (linear interpolation)', def: "Blending smoothly between two values in direct proportion to a parameter — here, almost always the fraction of the building's height, z/h. Morph lerps between two whole cross-section shapes; Twist/Taper/Shear each lerp a single number (angle, scale, offset)." },
  closedform: { name: 'Closed-form (vs. numeric) volume', def: "A closed-form formula computes the exact volume directly from the parameters. Twist/Taper/Shear/Bend each have one. Free-form, Helix, Morph, and any Compound combination don't — SPIRA falls back to summing the volume of many thin numerical slices instead, exact in the limit but not an algebraic formula." },
};
function showTermPopover(el){
  const g = GLOSSARY[el.dataset.term];
  if(!g) return;
  const pop = document.getElementById('termPopover');
  pop.innerHTML = `<span class="termName">${g.name}</span>${g.def}`;
  pop.style.display = 'block';
  const r = el.getBoundingClientRect();
  const popW = 280; // matches CSS max-width
  let left = Math.max(12, Math.min(r.left, window.innerWidth - popW - 12));
  pop.style.left = left + 'px';
  const approxHeight = pop.getBoundingClientRect().height || 90;
  const below = r.bottom + 8;
  pop.style.top = (below + approxHeight > window.innerHeight ? Math.max(12, r.top - approxHeight - 8) : below) + 'px';
}
document.addEventListener('click', (e)=>{
  const term = e.target.closest('.term[data-term]');
  const pop = document.getElementById('termPopover');
  if(term){ showTermPopover(term); e.stopPropagation(); return; }
  if(!e.target.closest('#termPopover')) pop.style.display = 'none';
});
document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape') document.getElementById('termPopover').style.display = 'none'; });

// ---------- exercises ----------
// Each check() reads live `state` plus the cached lastMaxWarpM/lastVolDeformed/lastVolPrism —
// never re-derives its own copy of the math, so an exercise can never silently drift out of sync
// with what the HUD is actually showing the student.
const EXERCISES = [
  { id:'cavalieri', title:'1. Confirm Cavalieri', prompt:'Switch to <b>Twist</b>, dial α_max to anything other than 0°, and confirm the HUD\'s two volume numbers match exactly — that\'s <span class="term" data-term="cavalieri">Cavalieri\'s principle</span> in action.',
    check: ()=>{
      if(state.mode !== 'twist') return { pass:false, msg:'Switch the Operation to Twist first.' };
      if(state.alphaMax === 0) return { pass:false, msg:'α_max is 0° right now — that\'s just a straight prism twisted by nothing. Dial it to something nonzero.' };
      const ratio = lastVolPrism > 0 ? lastVolDeformed/lastVolPrism : 1;
      return Math.abs(ratio-1) < 0.001
        ? { pass:true, msg:`Confirmed — deformed and prism volume match at α_max=${state.alphaMax}°, exactly as Cavalieri predicts.` }
        : { pass:false, msg:'Volumes don\'t match right now — is a Compound operation active? Clear it and try Twist alone.' };
    } },
  { id:'developable', title:'2. Find the flat panels', prompt:'Switch to <b>Bend</b>, any angle, and confirm the HUD\'s max panel warp reads at (or extremely close to) zero — the signature of a <span class="term" data-term="developable">developable surface</span>.',
    check: ()=>{
      if(state.mode !== 'bend') return { pass:false, msg:'Switch the Operation to Bend first.' };
      return lastMaxWarpM < 0.0005
        ? { pass:true, msg:`Confirmed — max panel warp is ${(lastMaxWarpM*1000).toFixed(2)}mm, effectively zero. Bend really is developable at any angle.` }
        : { pass:false, msg:`Max panel warp is currently ${(lastMaxWarpM*1000).toFixed(1)}mm — not quite zero. Double-check no Compound operation is layered on top (a second step can reintroduce warp).` };
    } },
  { id:'taperdirection', title:'3. Taper and volume', prompt:'Switch to <b>Taper</b> and set the top width (v) below 1.0 (tapering inward) — confirm the HUD\'s deformed volume comes out LESS than the prism volume, unlike Twist/Shear.',
    check: ()=>{
      if(state.mode !== 'taper') return { pass:false, msg:'Switch the Operation to Taper first.' };
      if(state.taperV >= 1) return { pass:false, msg:'v is at ' + state.taperV.toFixed(2) + ' — drag the v slider below 1.0 to taper inward.' };
      return lastVolDeformed < lastVolPrism - 1
        ? { pass:true, msg:`Confirmed — tapering to v=${state.taperV.toFixed(2)} shrinks the deformed volume below the prism's, unlike Twist or Shear.` }
        : { pass:false, msg:'Volumes are too close together — try a smaller v for a more visible taper.' };
    } },
  { id:'compoundmorph', title:'4. Compound a topology change', prompt:'Load the <b>Lotte Super Tower</b> case study (Morph), then set its Compound to <b>Bend</b> — confirm both a shape-topology change AND a curved axis are active on the same building at once.',
    check: ()=>{
      if(state.mode !== 'morph') return { pass:false, msg:'Load the Lotte Super Tower case study (under Morph\'s Deformation parameters) first.' };
      return state.compoundMode === 'bend'
        ? { pass:true, msg:'Confirmed — Morph as the primary operation, Bend compounded on top. Two genuinely different kinds of deformation, stacked.' }
        : { pass:false, msg:'Compound isn\'t set to Bend yet — open the Compound section and pick Bend.' };
    } },
  { id:'helixline', title:'5. Open vs. closed surfaces', prompt:'Switch to <b>Helix</b> with the "Line" generator — confirm the HUD explains it as an open <span class="term" data-term="helicoid">helicoid</span> with no volume to report, unlike every solid-building mode above it.',
    check: ()=>{
      if(state.mode !== 'helix') return { pass:false, msg:'Switch the Operation to Helix first.' };
      return state.helixGenerator === 'line'
        ? { pass:true, msg:'Confirmed — the "Line" generator sweeps an open helicoid (a spiral ramp), which is a surface with no interior volume, not a solid.' }
        : { pass:false, msg:'Pick the "Line" generator specifically (Circle/Pipe both sweep a closed loop instead).' };
    } },
];
let currentExercise = null;
function renderExerciseGrid(){
  const grid = document.getElementById('exerciseGrid');
  grid.innerHTML = '';
  EXERCISES.forEach(ex=>{
    const btn = document.createElement('button');
    btn.className = 'preset-btn' + (currentExercise === ex.id ? ' active' : '');
    btn.textContent = ex.title;
    btn.addEventListener('click', ()=> selectExercise(ex.id));
    grid.appendChild(btn);
  });
}
function selectExercise(id){
  currentExercise = id;
  const ex = EXERCISES.find(e=>e.id===id);
  document.getElementById('exercisePrompt').innerHTML = ex.prompt;
  document.getElementById('exerciseResult').style.display = 'none';
  renderExerciseGrid();
}
document.getElementById('exerciseCheckBtn').addEventListener('click', ()=>{
  if(!currentExercise){ toast('Pick an exercise above first'); return; }
  const ex = EXERCISES.find(e=>e.id===currentExercise);
  const result = ex.check();
  const el = document.getElementById('exerciseResult');
  el.className = result.pass ? 'pass' : 'fail';
  el.textContent = (result.pass ? '✓ ' : '✗ ') + result.msg;
  el.style.display = 'block';
});
renderExerciseGrid();
selectExercise(EXERCISES[0].id);

// ---------- guided tour ----------
// Targets existing, already-stable element ids rather than any teaching-specific markup, so the
// tour can't drift out of sync with the real UI the way a hand-maintained screenshot walkthrough
// would. Closes (rather than re-tracking) on window resize — see the CSS comment for why.
const TOUR_STEPS = [
  { sel:'#modeGrid', title:'Operations', body:'Seven ways to deform a straight prism: Twist, Taper, Shear, Bend, Free-form, Helix, and Morph. Pick one to start — the whole app reconfigures around it.' },
  { sel:'#crossSectionSection', title:'Cross-section', body:'The 2D shape (in plane B) that gets extruded and deformed. Square is the default, but try Star or Hexagon once you have a feel for an operation.' },
  { sel:'#deformationParamsSection', title:'Deformation parameters', body:'The sliders that actually drive the math — and the Reference panel further down explains exactly what each one does, with clickable terms for anything unfamiliar.' },
  { sel:'#hud', title:'Live readout', body:'Height, area, and volume update live as you drag any slider — including whether the deformed volume still matches the straight prism\'s, per Cavalieri\'s principle.' },
  { sel:'#exercisesSection', title:'Exercises', body:'Self-checking challenges — build the described design, then hit "Check my design" to see if it matches, graded against the exact same numbers the HUD shows you.' },
  { sel:'#compoundSection', title:'Compound', body:'Chain a second operation after the first — e.g. Twist a building, then Bend the whole result. Not every combination is possible; the panel explains which and why.' },
  { sel:'#viewControls', title:'Camera', body:'Drag to orbit, scroll to zoom. Top/Front/Home jump to standard architectural views — Home also re-fits the camera to whatever\'s currently built.' },
  { sel:'#exportSection', title:'Export', body:'Save a PNG, a shareable link, or real fabrication/BIM data — a panel schedule (.csv) or loft profiles for the bundled Dynamo/Revit script.' },
];
let tourStep = -1;
function positionTourStep(){
  if(tourStep < 0 || tourStep >= TOUR_STEPS.length) return;
  const step = TOUR_STEPS[tourStep];
  const target = document.querySelector(step.sel);
  const spotlight = document.getElementById('tourSpotlight');
  const callout = document.getElementById('tourCallout');
  if(!target){ nextTourStep(); return; } // target not present in this view (e.g. collapsed) — skip
  // Scroll BEFORE measuring, not after — an element below the fold needs to actually be in view
  // before getBoundingClientRect() means anything; scrolling afterward (as this originally did)
  // left the spotlight/callout positioned from stale, pre-scroll coordinates for any lower-sidebar
  // step, putting both entirely off-screen. 'auto' (instant) rather than 'smooth' so the scroll is
  // settled synchronously by the time the very next line measures it, not still animating.
  target.scrollIntoView({ block:'nearest', behavior:'auto' });
  const r = target.getBoundingClientRect();
  const pad = 6;
  spotlight.style.left = (r.left - pad) + 'px';
  spotlight.style.top = (r.top - pad) + 'px';
  spotlight.style.width = (r.width + pad*2) + 'px';
  spotlight.style.height = (r.height + pad*2) + 'px';
  spotlight.style.display = 'block';
  callout.innerHTML = `<h4>${step.title}</h4><div>${step.body}</div>
    <div class="tourFoot">
      <span class="tourStepCount">${tourStep+1} / ${TOUR_STEPS.length}</span>
      <div class="tourBtns">
        <button class="btn secondary" id="tourSkipBtn" style="padding:4px 10px;">Skip</button>
        ${tourStep>0 ? '<button class="btn secondary" id="tourBackBtn" style="padding:4px 10px;">Back</button>' : ''}
        <button class="btn secondary" id="tourNextBtn" style="padding:4px 10px;">${tourStep===TOUR_STEPS.length-1?'Done':'Next'}</button>
      </div>
    </div>`;
  callout.style.display = 'block';
  // Prefer the callout to the right of the spotlight; flip to the left if that would run off-screen,
  // and clamp vertically so it never falls off the top/bottom of a short viewport. Measures the
  // callout's OWN actual rendered height (varies with each step's body text length) rather than a
  // fixed guess — a guess that ran short here left the Next/Back buttons rendering partially below
  // the viewport, off-screen and unclickable, for any step with longer-than-average body text.
  const calloutW = 300, calloutH = callout.getBoundingClientRect().height;
  let calLeft = r.right + 16;
  if(calLeft + calloutW > window.innerWidth - 12) calLeft = Math.max(12, r.left - calloutW - 16);
  let calTop = Math.max(12, Math.min(Math.max(12, r.top), window.innerHeight - calloutH - 12));
  callout.style.left = calLeft + 'px';
  callout.style.top = calTop + 'px';
  document.getElementById('tourSkipBtn').addEventListener('click', endTour);
  document.getElementById('tourNextBtn').addEventListener('click', nextTourStep);
  const backBtn = document.getElementById('tourBackBtn');
  if(backBtn) backBtn.addEventListener('click', prevTourStep);
}
function nextTourStep(){ tourStep++; if(tourStep >= TOUR_STEPS.length){ endTour(); return; } positionTourStep(); }
function prevTourStep(){ tourStep = Math.max(0, tourStep-1); positionTourStep(); }
function startTour(){
  tourStep = 0;
  document.getElementById('uiModeGrid').querySelector('[data-uimode="advanced"]').click(); // Compound/etc need Advanced visible to be tour-able
  positionTourStep();
}
function endTour(){
  tourStep = -1;
  document.getElementById('tourSpotlight').style.display = 'none';
  document.getElementById('tourCallout').style.display = 'none';
}
window.addEventListener('resize', ()=>{ if(tourStep >= 0) endTour(); });
document.getElementById('tourBtn').addEventListener('click', startTour);

resize();
rebuild();
startTour(); // v1.53.0: always open on the Tour, every load — no longer gated by a "seen before" flag
animate();
</script>

</body>
</html>