A progressively-growing feed panel (rows injected after cap tagging)
passed the rotator leaf guard - which only rejected containers with
CAPPED children - and the rotator runtime's textContent writes then
flattened 51 statically-emitted descendants to one text node. Three
layers: emission drops rotators whose IR target has element children;
the capture leaf guard rejects any element child (capped or not); the
DittoMotion runtime saves/restores cloned child nodes via
replaceChildren so even a misclassified rotator can't destroy structure.
425 tests pass (6 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Items never visible at the canonical viewport (carousel slides off-screen
at every captured width) now fall through to per-viewport geometry bands
when they occupy layout, instead of freezing canonical geometry
- The explicit-height probe trust excludes body/html/main and any wrapper
whose height matches the page scrollHeight - page-height nodes keep
flowing, and the layout height gate stays meaningful
- @font-face and style-rule url() harvesting resolves against the OWNING
stylesheet's href (walking @import nesting), not document.baseURI;
font bytes are magic-byte validated at the storage choke point (HTML
bodies from catch-all 200 routes are rejected); font-face dedup prefers
the variant whose source actually resolved, deterministically
415 tests pass (16 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Off-viewport in-flow items (carousel slides beyond the right edge) keep
their per-viewport geometry deltas - they occupy layout and set track
cross-sizes even when not visible
- Height chains: single-viewport probe verdicts accepted for nodes that
only paint at one band; un-probed picture/object-fit:cover children
filling the parent count as height-deriving; a node whose own probe says
authored-explicit keeps its height at emission (twin of the flow guard)
- Symmetric authored-width circular guard in the walker (height-only
before), harvesting shadow-root adopted/style sheets for custom elements
- Auto margins only when width is genuinely content-constrained; gutter-
inset full-width blocks keep literal margins
- grid-template-rows: subgrid never dropped; variant-only subgrid intent
re-enters via partial-coverage escape; grid-item percentage widths bail
to auto (they resolve against the track, not the container)
- Banded raw-prop detection counts non-raw band overrides so a banded
bg-none reset isn't beaten by an inlined gradient
399 tests pass (13 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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>
- Walker serializes the composed (flattened) tree: open shadow roots walk
as host children with <slot> replaced by its assigned light nodes (or
fallback), so custom-element content (product cards, web components) is
captured instead of arriving childless
- In-flow visibility:hidden nodes with a nonzero border box survive the
prune as sized invisible placeholders - ghost spacers carry load-bearing
geometry
- When pruning drops leading in-flow children of a horizontally-translated
track, the baked translateX is re-anchored by their aggregate margin-box
width (settled carousel tracks return to origin instead of pushing real
content off-screen); animation-owned transforms unaffected
- Circular-shrink slide guard counts block-level fill children as
width-deriving regardless of wAuto (block auto-width IS fill), pinning
library-sized slide widths uniformly
- javascript: hrefs emit as "#" and the link gate normalizes both sides
382 tests pass (18 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Capture:
- Hover/focus states are driven with CDP CSS.forcePseudoState instead of
moving the real cursor - transparent full-viewport overlay layers were
swallowing every pointer hover, silently capturing zero hover states on
hover-rich sites
- text-wrap (balance/pretty) captured and emitted (Tailwind text-balance/
text-pretty, arbitrary fallback)
- Videos re-run <source> selection per viewport before frame-0
normalization: resize-without-reload kept aspect-gated variants stuck on
the load-time choice, poisoning mobile ground-truth screenshots
- svg roots capture their computed paint; fill="none" with a computed
paint (the fill-current pattern) recovers the real color instead of
rendering blank
Tokens & naming:
- Full CSS-Color-4 parsing (oklab/oklch/lab/lch/hsl) so modern colors
cluster and earn semantic roles; visually-equal literals share one token;
decoration/gradient/shadow colors consult the palette before minting
opaque tokens (ridge: 45 opaque tokens -> 15, anthropic: 12 -> 7)
- Expanded role vocabulary (background/foreground/primary/accent/border/
surface/muted) with deterministic tiebreaks and a chroma guard
- Section names mine CMS section ids and js-* hooks with hashy-suffix
stripping (split_callout_JtTWTt -> split-callout-section)
364 tests pass (42 new), typecheck clean; determinism verified by
double-regen byte-comparison on two reference runs.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Overlay detection resolves effective z-index through stacking ancestors,
treats a zero-size max-z wrapper plus its full-viewport descendant as one
removable unit, pierces open shadow roots, and relaxes the z floor when
the page is scroll-locked; a lock persisting after dismissal reports
blocking even with no detected overlay
- clickDismiss runs in every frame (close buttons live in cross-origin
popup iframes), matches decline/no-thanks/aria-label close affordances,
and re-runs before every snapshot AND screenshot to catch late-mounting
dialogs
- rootUnclamp triggers from IR content extent (a scroll-lock collapses
captured scrollHeight) and strips vendor-injected body position/overflow
locks when firing
- Pollution gate fails on the scroll-lock contradiction: scrollHeight
pinned to one viewport while IR content spans multiple
- Frame graft skips popup-creative vendor hosts; inline embedded signup
forms remain graftable (regression-tested)
322 tests pass (24 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Visible canvases (>=48px) are captured as PNG stills at capture time
(toDataURL, element-screenshot fallback for tainted/webgl) and emitted as
cid-carrying <img> elements filling the captured box, so canvas-driven
bands no longer render blank
- Source AND clone full-page screenshots now capture via CDP
Page.captureScreenshot with captureBeyondViewport: no scroll-stitching,
no scroll events, so scroll-linked animations can't smear mid-scrub
states into perceptual evidence (pixel-identical to the old path on
static pages; Playwright fallback retained)
- DittoLottie's runtime overlay stays position:absolute/inset:0 for its
whole life and the host carries data-ditto-lottie with a scoped
svg/canvas fit rule, so the runtime animation always fills the pinned
per-viewport box instead of escaping to aspect height
259 tests pass (12 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Capture:
- Preserve real asset extensions (.lottie no longer truncated); extract the
default animation JSON from dotLottie ZIP containers at materialization
(minimal built-in ZIP reader, no new deps)
- Reset scroll + settle before every viewport snapshot so scroll-linked
styles can't bake into captured computed values
- Marquee detection now requires content overflow (>1.35x), sustained
velocity across separated windows, scroll independence (jiggle test), and
genuine content repetition — kills scroll-settle-lerp false positives
- Sizing probe trusts authored explicit heights (px/vh/calc) over circular
parent/child reflow verdicts, fixing dropped 100vh heroes
Normalize/generate:
- Canonicalize identity transforms to "none" per viewport; emit explicit
transform resets across bands when any band has a real transform
- DittoLottie keeps the captured placeholder until DOMLoaded; failed loads
no longer blank the container
- mx-auto only for true auto-margin centering; literal per-band margins are
preserved (fixes full-bleed regressions)
- Spacing-scale snap tightened to 0.25px (3.5px stays p-[3.5px]); emit
whitespace-nowrap for wrap-vulnerable single-line text leaves
- Grid recipes no longer override captured track counts or column spans;
responsive re-flow plans apply only when geometry agrees
Quality scoring:
- Rewritten 6-dimension rubric (payload, decomposition, duplication,
semantics, hygiene, runtime) with catastrophe caps and per-dimension
reporting; thresholds are documented calibration guides
218 tests pass (74 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- DittoWire/Accordion/DropdownMenu runtime templates: AbortController-based
listener cleanup, idempotent effects, orphan panel removal on unmount
- Emit a single src/lib/utils.ts cn() instead of a copy per component file
- Collapse captured whitespace runs under white-space:normal (pre* preserved)
- Tag source-injected font-metric probe nodes at capture; drop them from IR
- Snap sub-pixel arbitrary lengths (integer within 0.1px, else 1 decimal)
- Emit SITE_ORIGIN (src/lib/site.ts, env-overridable): sitemap/robots/
canonical/og:url/JSON-LD resolve against the clone's own origin instead of
the source domain
- Pin lottie-web in generated package.json whenever DittoLottie is emitted
144 tests pass (21 new), typecheck clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Three clone-fidelity fixes from manual review of the acceptance screenshots.
Fix 1 — mobile nav chip-strip overlap (generate/css.ts). A horizontally
scrollable flex strip (overflow-x:auto flex <ul>) of nowrap chips collapsed
because the base viewport reported min-width:0px on the chips (a mobile-only
strip that is 0-wide at desktop), so the generator emitted `min-w-0`, letting
the chips shrink below their content instead of overflowing — the nowrap text
then collided. Suppress `min-w-0` for a nowrap flex item whose flex parent
scrolls horizontally; scoped away from legitimate min-w-0 truncation (whose
parent does not scroll-x). Verified on a fresh ooni.com clone: 0 chip overlaps
at 375, scrollWidth 776 > clientWidth 375.
Fix 2 — reveal-replay stagger leaves tiles unpainted (generate/motion.ts).
DittoMotion re-hid each revealed element and replayed its entrance on
scroll-into-view preserving the captured delay/duration, so a fast scroll /
full-page screenshot caught most grid tiles mid-entrance. Cap the replayed
delay (<=300ms) and duration (<=600ms), settle each tile per-element a bounded
time after it enters view, and make the global failsafe settle (not re-animate)
so nothing stays hidden. Validator settle path (__dittoMotionStop) unchanged.
Verified: cropin cotton renders 12/12 crop tiles in a normal full-page pass;
motion gate reveals 24/24.
Fix 3 — scroll-linked text-fill frozen at end state (capture/stabilize.ts,
capture/capture.ts, generate/css.ts). A view-timeline text-fill
(animation-duration resolves to `auto`) was baked filled: the clone has no
scroll timeline, so emitting the animation made it jump to its end keyframe via
fill-mode:both. Capture-side, cancel scroll/view-timeline animations before each
snapshot so the DOM records the at-rest state; generation-side, suppress the
animation-* props when animation-duration is `auto` (we render the at-rest
state, never replay a scroll-linked animation). Teach the motion gate to exclude
these from the static-CSS expectation so the gate stays honest. Verified on a
fresh ooni clone: the "world's no.1 pizza ovens" em is white/gray (rgb 240,240,
240), not filled yellow, at rest; motion gate still passes.
Tests: +7 fixtures (css scroll-strip + scroll-timeline, reveal-replay caps,
motion-gate scroll-timeline exclusion); 123/123 compiler tests green, full test
suite green, typecheck clean. No gate regression on the fresh ooni run vs the
20260704-024247 baseline (all gate pass/fail unchanged; perceptual within
0.0004; motion restored to pass).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Round-3 fixes from gate validation + human visual review of fresh
cropin.com and ooni.com clones:
- app.ts: section data-var rename used an unanchored substring replace,
so Tile2_data matched inside MediaTile2_data and emitted a corrupted
Mediatile2Data usage (ReferenceError at prerender). Word-boundary
regex; every map site now shares one derivation.
- graft.ts: about:blank iframes were blanket-skipped, missing the
Klaviyo newsletter form (mounted into a blank same-origin frame via
JS) — the audit's #1 complaint. Blank frames now graft; the
visibility gate still excludes 0-size tracking pixels.
- walker.ts: isVisible() now rejects boxes wholly outside the viewport
(off-left always; off-right only when the page isn't horizontally
scrollable; fixed boxes fully above/below), so a closed slide-in
drawer's contents no longer count as expected text (91.8% -> 93.4%).
- css.ts: four sizing-regime corrections — pin captured px for
circular shrink-0 slides (Splide slide chain collapsed 0x0);
flex-basis:100% for full-width shrink-0 slides; keep fixed-px grid
templates for scrolling track lists (repeat(N,1fr) squished a
50-track carousel); single full-bleed fixed track -> minmax(0,1fr);
keep authored heights whose in-flow children are fill children
(aspect-video heroes inflated 240 -> 720px); width:100% for
inset-spanned aspect boxes.
Gate scores: ooni home 88.7 -> 93.3 (responsive 32 fails -> pass),
pizza-ovens 90.8 -> 97.6 (perceptual 46.7% -> 17.2%).
107/107 compiler tests, all workspaces green.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Two follow-ups to the single-page Lottie support:
1. Multi-page (clone-site). generateSiteApp emitted only DittoWire; it now wires
DittoLottie per route exactly like wires — builds the route's lottie spec,
emits the import + JSX, writes DittoLottie.tsx once, and injects lottie-web
into the site package.json when any route replays an animation (the write
moved after the route loop so the dep reflects actual usage). cloneSite now
captures motion on full route captures (motion: full) so lotties are observed;
light sibling probes skip it. Per-route gating verified: a route with no
animation gets no DittoLottie.
2. Inline animationData. When a lottie is only in memory (data-driven init, no
fetchable URL), capture now writes the JSON to the assets store as a real,
content-hashed .json so it materializes to /assets/cloned/lottie like any
source — instead of embedding the blob in the page spec. buildLottieSpec then
resolves it to a local path; the spec carries path, not animationData.
Verified end-to-end: a 2-page fixture emits DittoLottie only on the animated
route with lottie-web added; a data-driven inline fixture materializes
fd7c…json and the spec references it by path.
Co-Authored-By: claude-flow <ruv@ruv.net>
lottie-web renders vector animations from a JSON document at runtime. As
third-party JS it falls outside the declarative CSS path and the WAAPI / reveal /
marquee probes, so clones shipped the empty container and the animation was gone.
This adds a Lottie subset to Stage 5 motion: capture the deterministic part — the
source JSON (materialized local file, or inline animationData) plus playback
config — and emit a fixed DittoLottie client that re-mounts lottie-web on the
cid'd container.
Capture (compiler/src/capture/lottie.ts): in-page detector covering lottie-web's
registry (animationData in memory), <lottie-player>/<dotlottie-player>, Elementor
data-settings (source_json.url), and generic markup. Keyed by data-cid-cap.
motion.ts merges it into MotionCapture; capture.ts registers source URLs as assets
so the existing fallback fetch downloads + materializes them to /assets/cloned/lottie.
Generate (compiler/src/generate/lottie.ts): buildLottieSpec resolves cap->cid and
source URL->materialized local path (or embeds inline animationData), then emits
DittoLottie + wire/import helpers, mirroring DittoMotion. app.ts writes the
component, wires import+JSX, and injects lottie-web into the generated package.json.
Delivery (compiler/src/cli.ts): stripDeliveryDataCids now treats DittoLottie as a
runtime consumer, so its container keeps a semantic data-ditto-id anchor instead of
being stripped (without this the animation never finds its mount point).
Lottie-free clones stay byte-identical. Verified end-to-end: cloning a page with a
<lottie-player> scrapes the JSON, emits a wired DittoLottie, and lottie-web mounts
and plays the captured animation (rendered SVG viewBox matches the source JSON).
Unit tests cover buildLottieSpec resolution + drop rules.
Co-Authored-By: claude-flow <ruv@ruv.net>
