Samraaj BathandClaude Fable 5
144e7ab16b
v.load() resets the media element's show-poster flag; pause cancels autoplay and the at-zero seek skip left nothing to clear it, so screenshots after a source re-selection rendered the poster instead of the new source's frame 0. Reloaded videos now force an epsilon seek (awaiting seeked, which also serves as the readiness signal on slow CDNs), and re-selection emits a video_source_reselected log event. 386 tests pass (4 new), typecheck clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ditto.site Compiler
This workspace contains the deterministic compiler used by ditto.site. It captures a source URL, builds a render IR, infers assets/fonts/tokens/sections/recipes/SEO, generates a Next.js App Router app by default or a Vite React app on request, and validates the result with deterministic gates.
The full architecture overview lives in ../README.md. This file keeps only compiler-local commands and notes.
Commands
cd compiler
npm install
npx playwright install chromium
npm run clone -- https://example.com/
npm run clone -- https://example.com/ --serve # then npm install + npm run dev
npm run clone -- https://example.com/ --open # ...and open the browser too
npm run clone -- https://example.com/ --mode=multi --styling=tailwind
npm run clone -- https://example.com/ --mode=single --framework=vite
npm run clone-site -- https://example.com/
npm run validate-site -- ../runs/site-example.com/<timestamp>
npm run clone -- https://example.com/ --mode=multi --concurrency=5
npm run clone -- https://example.com/ --mode=multi --validate --validate-concurrency=3 --viewport-concurrency=2
npm run validate-site -- ../runs/site-example.com/<timestamp> --validate-concurrency=3 --viewport-concurrency=2
npm run bench -- --tier=easy
npm run bench-site
npm run quality -- ../runs/example.com/<timestamp>
npm run audit -- ../runs/example.com/<timestamp>
npm test
npm run typecheck
Root-level scripts forward to these commands, so npm run clone -- <url> works
from the repository root too.
("Clone" here = generating a codebase from a live URL, not git clone; no source
repo required.) On success the CLI prints a copy-paste-safe summary: a single
quoted cd … && npm install && npm run dev line plus safe-to-edit pointers. Pass
--serve to run install + dev automatically, or --open to also launch the
browser. Without --out, a runs/<site>/latest symlink always points at the
newest run so paths aren't timestamp-fragile.
Multi-page generation defaults to the fast no-validation path. Use --validate
when the clone command itself should run the full build/render/gates QA pass, or
run validate-site separately. --concurrency controls source route capture;
--validate-concurrency controls how many routes validation grades at once; and
--viewport-concurrency controls how many clone viewports each route renders at
once.
Generated App Shape
Default Next generated apps use src/app/ditto.css and optional helpers under
src/app/ditto/. Vite generated apps use src/ditto.css and optional helpers
under src/ditto/, with multi-route pages under src/routes/. Validation builds
keep data-cid attributes for source/clone alignment; delivered apps strip those
validation ids and keep only required data-ditto-id anchors.