Woodshop Designer — Living Docs

Bug fixes + assemblies + CSV + Print + top-bar Recalculate (UX #4)

• Bug fix — 3D view "way down": radius was max_dim * 2.5 + 30, putting the camera ~110" away with the cabinet at ~46% of viewport. Now uses the bounding-box diagonal with a tighter multiplier (diag * 1.4 + 10), so the cabinet fills the view properly and sits at the visual center.
• Bug fix — caster controls: the height input had no label next to the checkbox, making it unclear what it was. Split into two clearly-labeled rows: "Casters" (checkbox) and "Caster height" (number).
• Top-bar Recalculate (UX #4 resolved): the calc summary and Recalculate button are now pinned to the top bar, always visible: 36" − 4" casters − 1" top − 0" toe kick = 31" → Left Side [Recalculate]. Removed from the Cut List header to declutter that panel.
• Editable assemblies: add/edit/delete with name + X/Y/Z position. Each part card now has an Assembly dropdown in its expanded body. Deleting a non-empty assembly reassigns its parts to the next available assembly (or creates a default one).
• CSV export: "CSV" button in the Cut List header downloads a clean cut list (Material, Part, Assembly, W, H, D, Grain, Quantity) ready for Numbers/Excel.
• Print Cut List: "Print" button opens a print-friendly view with header (project name + date + recalc summary), cut list grouped by material with sheet/board-foot summaries, and a constraints table. Uses @media print + a hidden #print-view div — no UI chrome on paper.
• New helpers: refreshPartAssemblyDropdowns(), buildPrintViewHTML(), csvEscape().

Editable materials — color picker, type, sheet dims, delete with reassign

• Materials panel uses the same card pattern as parts. Always visible: color swatch · name · type badge · ⋮ toggle.
• Click ⋮ to expand and edit type (sheet/lumber), thickness, sheet width, sheet length. The sheet-dim fields hide automatically when type is lumber.
• Color picker is native HTML5 (input[type=color]) and updates the 3D scene live while you drag — instant feedback, the painterly part of designing.
• + Add Material at the bottom appends a new material with sensible defaults, expands it, focuses the name. Part dropdowns refresh automatically.
• Delete on a material that's in use shows a confirm with a note like "3 parts use this material and will be reassigned to '3/4 Birch Ply'" — pick the next material as fallback. Cleaner than letting parts go dangling. (Bends the brief, which says "flag an error" — but for DIY users, broken state is worse than auto-reassign.)
• If you delete the last material, dependent parts get materialId: null; meshes fall back to gray and the cut list groups them under "?". The user can then add a new material and reassign in the part cards.
• New helper: refreshPartMaterialDropdowns() — surgical update of every part card's material <select> options without rebuilding the cards. Called from recalculate() so material name edits propagate to part dropdowns instantly.
• Auto-recalc fires on blur of material text/numeric fields (per brief). Color and type changes apply immediately.

Save / Load / New + project rename

• Save downloads the current project as <projectname>.woodshop.json. Filename is auto-derived from the project name (spaces → hyphens, special chars stripped).
• Load opens a file picker, parses the JSON, and replaces the in-memory project. Forgiving of slightly malformed files: missing arrays default to empty; missing constraints default to the default-cart's; mismatched version shows a confirm dialog instead of crashing.
• New shows a confirm dialog and resets to the default Mobile Tool Cart.
• Project name in the top bar is now click-to-rename: contenteditable on click, Enter commits, Escape reverts. Updates browser tab title too.
• applyLoadedProject() mutates the existing project object in place rather than reassigning, so all closures keep working.
• New // === IO === section in JS holds save / load / new / rename / sanitize.
• This is the first form of persistence — no localStorage (per brief), so saving is the only way to keep work across sessions. The Save button is now prominent in the top bar.

Editable constraints panel — Recalculate height-driven logic now visible

• Constraints panel is now an editable form: target height/width/depth (nullable), casters toggle + height, top allowance, toe kick, primary part dropdown, calc summary, notes textarea.
• Auto-recalc fires on blur of any constraint input (per brief). Toggling casters or picking a different primary recalcs immediately.
• The 3D view now visibly responds to constraint changes: change caster height from 4 → 5, Tab away, the Left Side shrinks by 1" to keep total at 36".
• New updateConstraintsUI() does surgical updates (calc summary, primary-part dropdown options, caster-height disabled state, primary part's H input) instead of replacing the whole panel — preserves focus while tabbing through inputs and avoids the "browser loses focus mid-Tab" bug.
• Toggling Height-driven off on a part that was the primary auto-clears primaryHeightPart, so the dropdown stays consistent.
• Constraint listeners are attached once via event delegation on the panel container (no listener stacking on re-render).
• Known M2 limitation: turning casters on/off doesn't move part positions — Y values are hardcoded numbers in M2. Once formulas land in M3, parts that reference constraint("casterHeight") in their position will shift correctly.

Help link in app + Getting Started + visual mockups

• Top bar of index.html now has a Help link that opens DOCS.html in a new tab.
• DOCS gained a Getting Started section: what the tool is, how to open it, what you see, your first edit, adding/duplicating parts, collapsing panels, tips.
• DOCS gained a Visual reference section: quick-reference mockups of the layout, view bar, part cards (collapsed + expanded), Recalculate states.
• "Screenshots" are CSS recreations of the actual UI rather than image files — they update with the docs and don't bloat the repo.
• Cross-doc links at the top of DOCS now point to App / Plan / UX / Brief.

Editable parts cards + Recalculate dirty state (UX #2, #3 resolved)

• Parts panel is now an editable list of cards. Each card always shows: Name (text), Material (dropdown), W / H / D (numeric). Click ⋮ to expand for X / Y / Z, Grain, Height-driven, Notes, Duplicate, Delete.
• Tab navigation between fields just works (native browser behavior). Focusing a numeric field highlights it; invalid values turn red until corrected and revert on blur.
• Add Part button at the bottom appends a new part with sensible defaults, expands it, and focuses the name input.
• Duplicate on each card clones the part (with "(copy)" suffix and a 2" X-offset so it's not on top of the original) — covers UX #3.
• Delete with a confirm dialog. If the deleted part was the primary height part, that pointer is cleared.
• Recalculate button is now live. Clean state: white "Recalculate". After any field edit: orange "Recalculate ●". Clicking it applies primary-height-driven logic, rebuilds the 3D scene, refreshes the cut list and constraints summary, and clears the dirty state.
• Add / duplicate / delete auto-recalc immediately (per brief). Field edits set dirty until you click Recalculate.
• Expanded-card state is preserved across re-renders via an expandedCards Set — no card collapses unexpectedly when the list rebuilds.
• New section in JS: parts cards live inside UI, recalculate / dirty machinery is at the bottom of UI.

Iso → 3D + Reset View (UX #7 resolved)

• Replaced the redundant Iso and Orbit buttons with a single 3D button (perspective + drag-orbit) and a separate Reset action.
• 3D mode preserves the camera angle when you switch away and back; Reset snaps it to the default iso angle.
• setView('3d', { reset: true }) is the single entry point for both initial boot and the Reset button.
• Internal currentView values are now: 'front' | 'top' | 'side' | '3d'. Drag-orbit only fires when currentView === '3d'.
• Bends the brief (which listed 5 view buttons including Iso); spirit preserved — flat views + 3D + a one-click reset.

Collapsible side panels (UX #1 resolved)

• Each side panel now has a thin "rail" at the top with a collapse toggle (◀ / ▶).
• When collapsed, the panel folds to a 36px-wide strip showing only the rail; the 3D viewport flexes to fill the recovered space.
• Toggling triggers a viewport resize and refits the ortho frustum so the 3D view stays correct.
• CSS is driven by --left-w / --right-w custom properties on :root, swapped by body.left-collapsed / body.right-collapsed classes.

Initial skeleton — render-only

• Created index.html (~795 lines, single self-contained file, Three.js r128 from CDN).
• Three-column layout (320 / flex / 380) with top bar and status bar.
• Default Mobile Tool Cart project hardcoded with all five parts, three materials, one assembly, full constraints panel.
• Three.js scene: ortho camera for Front/Top/Side, perspective for Iso/Orbit. Camera object swaps; one renderer / one scene.
• Custom orbit controls (no OrbitControls import) — drag rotates only in Iso/Orbit, mouse wheel zooms in all views.
• Grid floor at Y=0: fine 1" grid + bolder 12" grid, layered.
• Axis indicator (X/Y/Z arrows + sprite labels) rendered as bottom-left scissor-test inset, mirrors active camera direction.
• Cut list grouped by material, sorted by area desc, quantity-collapsed, sheet-count w/ 15% waste buffer for sheet goods, board feet for lumber.
• Section banners in JS: DATA, RESOLVE, RENDER, UI, BOOT.
• resolve(value) chokepoint in place — every dim/position read goes through it. M3 will swap in the parser without touching callsites.
• Created plan.html with milestone breakdown.

Single resolve(value) chokepoint

Every dim and position is read through one function. M1–M2 it returns numbers; M3 swaps in the formula parser without touching any callsite. Why: avoids a rewrite when formulas land.

Data model frozen at brief shape

Materials, Parts, Assemblies, Constraints, top-level Project with version: 1. Any change here breaks save files. Why: save format must round-trip from M2 onward.

One renderer, one scene, swap the camera object

Ortho for Front/Top/Side, perspective for Iso/Orbit. Custom orbit controls — no OrbitControls import (single CDN script tag rule). Why: simplest mental model, no juggling render targets.

No eval(), no browser storage, single HTML file

Hard requirements from the brief. Not negotiable.

Section banners in JS

DATA · RESOLVE · RENDER · UI · IO · BOOT. New code goes in the matching section; cross-section calls go through the documented entry points only.