Appearance
Milestone 1: Project Creation
Started: January 4-5, 2025Status: completed
To begin, let's capture the quintessense of this first milestone. eg, initial yarn installs, project creation, adding svelte, vitest, configuration issues, challenges. then i will massage it and do some more massaging, then i will know what i want the template to be.
Goal
Put this project on its feet and provide a proof of concept of 3D rendering and user interaction.
What Emerged
A working quaternion demo: two nested cubes, drag to rotate the outer, inner spins independently. Wireframe rendering with depth-based opacity. No gimbal lock.
But more than that: a development environment. Vite + Svelte 5 + TypeScript + vitest. A documentation system. A workflow that lets me pick up where I left off, even weeks later. A style guide so the code stays consistent.
The foundation for the CAD program I've been wanting to rebuild for twenty years.
What we did
The very first step was to describe the [[project]] and flesh out that description. Then a single index.html — cube rotating with quaternions, no gimbal lock. Drag to rotate. gl-matrix for the math, Canvas 2D for the lines. Proof that the pipeline worked.
Next day, promoted it to its own repo. yarn create vite di --template vanilla-ts. The name "di" for Design Intuition—compact, easy to type, evokes the old dream.
The Stack Decisions
Vite was obvious (already using it in webseriously). TypeScript mandatory. But then: add Svelte or stay vanilla? The POC was pure imperative canvas—no reactivity needed. But I knew UI would come eventually. Controls, panels, the stuff around the canvas. Added Svelte preemptively.
That triggered a cascade. Svelte 5 had just shipped. Why start with 4 and migrate later? So: Svelte 5 from day one, runes instead of stores, mount() instead of new Component(). Wrote a migration guide anyway [[svelte]] to document the resulting files, installs and configuration.
Architecture Emerges
The single-file POC exploded into managers: Scene, Camera, Render, Input, Animation. Each a singleton, lowercase export (scene, camera, render). Classes do the work, instances coordinate.
Types proliferated. Started with raw {x, y} objects, formalized into Point, Size, Rect. Added Point3 for vertices, Polar for angles. Angle.ts grew quadrant logic, cursor mappings. Migration plan tracked the conversion from scattered x/y to proper types.
The Workflow System
Most important outcome: the notes structure. notes/work/ for active tasks, notes/work/done/ for completed ones. notes/guides/ for living references. CLAUDE.MD as the entry point. Work tracking files that survive across chat sessions.
This isn't just documentation—it's the AI collaboration pattern. Define problem and goal upfront. Track progress in markdown. Resume points for continuity. The guides encode hard-won lessons (gotchas.md, debugging.md, style.md) so Claude doesn't repeat mistakes.
Testing Infrastructure
Added vitest. Not just to have tests, but to validate the foundational types. 206 tests across Coordinates, Angle, Colors, Extensions, Utilities. The tests discovered actual bugs—cursor_forAngle treating 0 as falsy, orientation_ofAngle wrong at quadrant boundaries. Fixed them. Testing pays for itself immediately.