figma-transformer: improve FSE responsive parity

[chubes4]

Summary

• extract responsive breakpoint media diffing and node matching into dedicated collaborators
• improve standalone HTML responsiveness with fluid breakpoint widths, safe auto-height flow containers, and shrinkable prose text boxes
• preserve component-clone vector composition offsets, source-local clone child offsets, and negative-ink SVG overflow for footer/logo parity
• harden static HTML semantics, form validity, explicit list marker rendering, and descendant-aware layout stacking around the FSE conversion path
• keep repeated card/content lists semantic without injecting visual bullets unless the source carries explicit list-marker evidence

Testing

• git diff --check
• php -l figma-transformer/src/Html/BreakpointMediaDiffBuilder.php
• php -l figma-transformer/src/Html/ResponsiveNodeMatcher.php
• php -l figma-transformer/src/Html/LayoutIntentClassifier.php
• php -l figma-transformer/src/Html/StaticHtmlEmitter.php
• php -l figma-transformer/src/Scenegraph/ScenegraphNormalizer.php
• php -l figma-transformer/tests/contract/run.php
• cd figma-transformer && composer test:contract
• full FSE fixture generation with configured zstd command: status=success_with_warnings, page_count=5, file_count=34
• generated HTML validity scan for nested anchors, buttons inside anchors, and nested forms

Notes

• The FSE fixture now exercises the standalone HTML path through five generated pages and shared CSS.
• Wave 9 improves homepage card/list marker behavior, footer/newsletter stacking, font materialization evidence, paragraph responsiveness, and the About page ordered-list structure.
• Remaining fidelity work is preserving explicit marker color/inline marker styling from visual list-marker nodes and synthesizing mobile-only hamburger/menu variant DOM.

AI assistance

• AI assistance: Yes
• Tool(s): OpenAI gpt-5.5 via OpenCode, with parallel coding/research agents
• Used for: Investigating FSE .fig conversion defects, drafting transformer changes and contracts, running verification, and preparing this PR.

[chubes4]

Added a second diagnostics/data wave in 1ab1b6c.

What changed:

• component clone non-emission diagnostics now report counts, omission reasons, and sample nodes
• decoded text and asset-bearing nodes now include structured omission reasons in transform diagnostics
• rectangleCornerRadiiIndependent is preserved through Kiwi decode, instance overrides, and normalized figma_box metadata
• contract docs and contract coverage were updated for the new diagnostic shapes

Verification:

• git diff --check
• php -l on touched PHP files
• cd figma-transformer && composer test:contract
• full FSE fixture generation with configured zstd command: status=success_with_warnings, page_count=5, file_count=34

Remaining known issue:

• The Trending section placement defect is still not fixed here. The fanout confirmed the collapse happens upstream of CSS/emission: 4166:4961/4166:4896 is already normalized with y=0, while the comparable sibling/source layout preserves the content frame at y=80. A safe fix needs to preserve variant/source child offsets before selected-frame source-map normalization collapses them; I did not keep a late clone-merge workaround because it did not fix the real trace and would be too sample-shaped.

[chubes4]

Added the clone-offset normalization fix in 3095d91.

Root cause:

• The FSE Trending section instance resolves from component variant source 4166:4927.
• Source child 4166:4896 has parent-local y=80 in raw/source geometry.
• The instance derivedSymbolData reports that same source child with transform.m12=0.
• The normalizer treated that as an override and collapsed the source-local child offset to y=0.

Fix:

• Preserve source-identified local component clone coordinates when an override collapses a non-zero source coordinate to zero.
• Added contract coverage for component-source clone child offsets through normalization, emitted CSS, and visual diagnostics.
• Refined clone omission diagnostics to include visible area and classify composed vector children as composed-into-parent.

Verification:

• git diff --check
• PHP syntax checks on touched files
• cd figma-transformer && composer test:contract
• full FSE fixture generation with configured zstd command: status=success_with_warnings, page_count=5, file_count=34
• real FSE output now emits 4166:4961/4166:4896 as top:80px

[chubes4]

Static-site viability wave pushed in 46b337451e3bcda1f03cc27b4e19ff34fd5c45a3.

What changed:

• Responsive breakpoint matching keeps source-identity mappings for reordered component children, with structural fallback matching for desktop/mobile variants using different source IDs.
• Full-width component sections and newsletter instances get fluid mobile widths from breakpoint geometry instead of remaining desktop-fixed.
• Static-site routing infers logo, nav, card-title, and pagination links from the page plan when Figma prototype links are absent.
• Search/newsletter/comment regions emit semantic form controls with stable static actions and no nested forms.
• Decorative generic vector layers are hidden from the accessibility tree while logo/brand vectors remain labeled.
• Multi-page output links shared style.css, and source-backed head metadata/canonical/social tags are supported.

Verification:

• git diff --check
• cd figma-transformer && composer test:contract
• Full FSE fixture generation: status=success_with_warnings, page_count=5, file_count=34
• Generated artifact check: no nested <form> elements detected.

Residual scale gaps remain around browser-level visual QA, broader fixture-matrix coverage, and source-backed image/SEO metadata beyond fields explicitly supplied by callers.

[chubes4]

Next static-site viability wave pushed in d7aeec424894effd7e9a2c715cef44354c62c525.

What changed:

• Prevented nested anchors by propagating link context during recursive emission.
• Converted linked button-like controls to structural elements inside anchors instead of emitting invalid a > button.
• Emits linked list items as li > a, preserving valid ul > li structure.
• Tightened form detection so large sections containing a search field are not accidentally emitted as giant search forms.
• Added semantic/accessibility improvements for explicit blockquote/comment containers, sibling-label form controls, and decorative generic Icon vectors.
• Added responsive safety fallbacks for unmatched header/nav/footer/newsletter shell nodes that otherwise kept desktop absolute geometry.
• Corrected omitted-text diagnostics so text under omitted parents is not misclassified as form-control conversion.

Verification:

• git diff --check
• cd figma-transformer && composer test:contract
• Full FSE fixture generation: status=success_with_warnings, page_count=5, file_count=34
• DOM validity scan across generated HTML: no nested anchors, no anchor-wrapped buttons, no nested forms, no direct non-li children under ul, and no accidental giant search form.

Residual scale gaps:

• Header/mobile visual quality still needs actual viewport/browser review.
• TOC/list/card semantics need stronger source context before converting more structures safely.
• Broader arbitrary-file confidence still needs fixture-matrix coverage beyond this FSE Pilot file.

[chubes4]

Static layout parity wave pushed in e16182125288537ce8cdcadcf7b4136bc7c73ca4.

What changed:

• Footer legal text now stays paragraph/legal copy across pages instead of being promoted to page-relative headings.
• Generic footer responsive safety handles absolute newsletter/footer-row shells more consistently across pages.
• Responsive centered flex/grid containers keep margin-left:auto;margin-right:auto, fixing archive card-grid/content centering when width becomes calc(100% - gutter).
• Overlapping child stacks get source/layer-order z-index and isolated parents, so newsletter artwork, featured images, and overlay stacks no longer rely on fragile DOM paint order.
• Source-backed FILL image crop transforms emit explicit background-size, background-position, and background-repeat:no-repeat when image transform/crop metadata is present.

Verification:

• git diff --check
• cd figma-transformer && composer test:contract
• Full FSE fixture generation: status=success_with_warnings, page_count=5, file_count=34
• Footer legal node 4184:7891 emits as p on all five pages.
• Archive card grid .figma-node-4194-1555-frame-16 emits width:calc(100% - 48px);max-width:1440px;margin-left:auto;margin-right:auto.
• Archive footer newsletter and row emit mobile-safe rules including height:auto, left:24px, and relative wrapping footer row.

Residual risks:

• Pages without responsive variants still rely on responsive-safety fallbacks instead of true cross-page source-id media propagation.
• Some hero images still use cover/center when the source has no explicit crop transform.
• Browser viewport review is still required before calling this production-grade visual parity.

[chubes4]

Wave 5 update pushed in 45941f2.

Verification:

• cd figma-transformer && composer test:contract passed.
• Full FSE Pilot .fig transform completed with status=success_with_warnings, page_count=5, file_count=34.
• Generated What Sets Us Apart section emits semantic <ol><li> content with marker-capable display:list-item CSS.
• Affected body list text is mixed case; inherited uppercase transform is not emitted on the list paragraph classes.
• Generated HTML scan passed for nested anchors, buttons inside anchors, and nested forms.
• Mixed absolute/flow containers create a local stacking context with isolation:isolate for safer layering.

[chubes4]

Refactor/abstraction fanout pushed in 45e6bfb.

What changed:

• Extracted responsive breakpoint node matching into ResponsiveNodeMatcher, preserving source-ID matching while adding unique structural signatures for reordered children with changed source IDs.
• Moved semantic content-list recognition, chrome-list context detection, ordered marker recognition, and local stacking/isolation predicates into LayoutIntentClassifier.
• Reduced StaticHtmlEmitter list/layout decision code to classifier-backed delegation.
• Preserved textCase through instance overrides so text normalization can generically clear stale inherited uppercase transforms.
• Added reusable contract helpers for CSS rule assertions and strengthened contracts for semantic lists, glyph SVG preservation, mixed-case overrides, responsive matching, and mixed absolute/flow stacking.

Verification:

• cd figma-transformer && composer test:contract passed.
• PHP syntax checks passed for changed production files.
• Full FSE Pilot .fig transform completed with status=success_with_warnings, page_count=5, file_count=34.
• Generated What Sets Us Apart section still emits semantic <ol><li> with marker-capable display:list-item and list marker CSS.
• Generated HTML scan passed for nested anchors, buttons inside anchors, and nested forms.

Note:

• The first full transform attempt used the default 120s shell timeout and was killed before writing output; the same command completed successfully with a longer timeout.

[chubes4]

Wave 8 evidence

• Fixed the homepage/archive regression where semantic list restoration used display:list-item and clobbered card layout display/positioning.
• Semantic list markers now render through pseudo markers, preserving the original list item layout and absolute-child positioning context.
• Pagination/control lists are excluded from content-list marker CSS so page controls do not inherit bullets or marker spacing.
• Full FSE generation completed with status=success_with_warnings, page_count=5, file_count=34.

Verification:

• cd figma-transformer && composer test:contract
• php -l figma-transformer/src/Html/LayoutIntentClassifier.php
• php -l figma-transformer/src/Html/StaticHtmlEmitter.php
• php -l figma-transformer/tests/contract/run.php
• git diff --check
• generated HTML validity scan for nested anchors, buttons inside anchors, and nested forms

Latest local artifact for operator review:

• /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-static-viability-wave8-20260702/site

[chubes4]

Wave 9 evidence

Ten focused minions investigated the next defect wave. This pass landed the safe, contract-backed fixes from that fanout:

• Homepage/archive repeated card lists stay semantic but no longer get implicit bullets or display:list-item layout side effects.
• Footer/newsletter sibling stacking now uses descendant visual bounds, so protruding footer underlays do not paint above the newsletter card.
• Prose text boxes in normal flow emit width:100%, intrinsic max-width, shrinkable flex behavior, and avoid derived desktop soft-wrap content/CSS.
• About page visual numbered-list rows emit semantic <ol><li> with generated counters and body paragraphs without baked word-split line breaks.
• Font materialization is present in the generated CSS; Wave 9 result reports missing_font_css: 0 for generated pages.

Verification:

• cd figma-transformer && composer test:contract
• php -l figma-transformer/src/Html/LayoutIntentClassifier.php
• php -l figma-transformer/src/Html/StaticHtmlEmitter.php
• php -l figma-transformer/tests/contract/run.php
• git diff --check
• generated HTML validity scan for nested anchors, buttons inside anchors, and nested forms
• full FSE generation: status=success_with_warnings, page_count=5, file_count=34

Latest local artifact for operator review on this machine:

• /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-static-viability-wave9-20260702/site

Known remaining fidelity gaps:

• Preserve explicit marker color/inline marker styling from visual list-marker nodes.
• Emit or synthesize mobile-only hamburger/menu variant DOM instead of only diffing CSS for nodes present in the desktop base DOM.

[chubes4]

Wave 10 evidence: arbitrary .fig scale pass

Ran a second real-world .fig through the same standalone HTML path:

• Source: /Users/chubes/Downloads/Yotako - Figma to WordPress - Playground (Autolayout demo).fig
• Output: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-autolayout-wave2-20260702/site
• Result: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-autolayout-wave2-20260702-result.json

What changed:

• Responsive grouping now treats _1440 / _375 suffixes as breakpoint tokens, so 6_Blog_1440 + 6_Blog_375 collapse into one responsive 6-blog.html page instead of separate desktop/mobile pages.
• Centered desktop page canvases with centered auto-layout now emit width:100%; max-width:1440px; margin-left:auto; margin-right:auto, preventing full-width output from pinning to the viewport's left edge.
• Landmark classification now treats explicit names as candidates, not unconditional tags. Page roots do not become landmarks, menu-item components do not become nested nav, and article-heavy bottom regions do not become footer just because they contain links/legal text deeper in the subtree.

Verification:

• cd figma-transformer && composer test:contract
• php -l figma-transformer/src/Scenegraph/ScenegraphFrameInspector.php
• php -l figma-transformer/src/Html/StaticHtmlEmitter.php
• php -l figma-transformer/tests/contract/run.php
• git diff --check
• DOM validity scans for Yotako and FSE generated HTML
• Yotako generation: status=success_with_warnings, page_count=2, both pages breakpoint_count=2, missing_font_css=0
• FSE generation: status=success_with_warnings, page_count=5, file_count=34, missing_font_css=0

Known remaining scale gap:

• Yotako still surfaces unsupported_vector_network_blob diagnostics. Parser evidence confirms the Kiwi fields are preserved; this is renderer coverage for vector-network blobs, not a page-structure blocker.

[chubes4]

Wave 11 evidence: full-bleed root correction

The Yotako scale pass proved responsive grouping and centering evidence, but the first root-centering fix capped the outer page frame at 1440px, which letterboxed full-bleed bands on wider viewports.

This correction keeps the document model generic:

• viewport/root stays full bleed: page roots emit width:100% without inferred max-width:1440px
• desktop artboard width remains layout evidence, not a root clamp
• centered content should be recognized on inner content shells/bands, not by constraining the outer page root
• responsive grouping and landmark gating from Wave 10 remain intact

Verification:

• cd figma-transformer && composer test:contract
• php -l figma-transformer/src/Html/StaticHtmlEmitter.php
• php -l figma-transformer/tests/contract/run.php
• git diff --check
• DOM validity scans for Yotako and FSE generated HTML
• Yotako generation: status=success_with_warnings, page_count=2, both pages breakpoint_count=2, roots are full bleed with no inferred max-width:1440px
• FSE generation: status=success_with_warnings, page_count=5, file_count=34, missing_font_css=0

Latest local artifacts:

• Yotako: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-autolayout-wave3-20260702/site
• FSE: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-static-viability-wave11-20260702/site

Remaining generic work from the minion trace:

• FSE Recent Posts/newsletter spacing needs a content-bearing flex/absolute-layout rule so text/card sections reserve real flow height instead of relying on fixed Figma boxes.
• FSE About image needs ordered image-layer diagnostics and crop reporting; the asset is present, but diagnostics should identify the top rendered layer and cover-crop behavior.

[chubes4]

Refactor wave: HTML/CSS -> Kiwi evidence-chain cleanup

Integrated five parallel minion commits focused on scalable .fig -> legitimate standalone HTML generation:

• 38c812d figma-transformer: sanitize emitted layout gaps
• 57ae192 figma-transformer: flag invalid css artifacts
• 2ea3d34 figma-transformer: extract layout frame role classifier
• 7c8fbf5 figma-transformer: materialize typography tokens
• 413fcec figma-transformer: centralize image visual evidence

Evidence chain used by minions:

• Started from emitted site artifacts, especially Yotako invalid CSS such as gap:NaNpx 130px and negative gap output.
• Traced affected nodes back through figma-node-trace.php against the raw Yotako .fig to confirm normalized layout evidence carried item_spacing / counter_axis_spacing data.
• Fixed generically at the pattern/contract layer instead of node-specific CSS patches.
• Added contracts so non-finite CSS numeric tokens become artifact-quality failures instead of allowing generated sites to report clean/pass.

Verification:

• php -l changed PHP files passed.
• cd figma-transformer && composer test:contract passed.
• Regenerated arbitrary Yotako .fig successfully:
  • artifact: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-refactor-wave-20260702/site
  • result: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-refactor-wave-20260702-result.json
  • status=success_with_warnings
  • page_count=2
  • missing_font_css=0
  • artifact quality clean/pass
  • invalid CSS numeric tokens 0
  • direct generated CSS scan found invalid_css_matches=0 for NaN, Infinity, INF, and negative gap tokens.

FSE note:

• Full FSE regeneration hit local shell timeouts at 120s and 300s during this run and produced no result JSON. Given the contract suite and Yotako full generation passed, I am treating that as local pressure/inconclusive rather than evidence of a transformer failure.

[chubes4]

Next wave: arbitrary .fig website evidence chain

Integrated five more parallel minion commits, each following the HTML/CSS -> normalized scenegraph/Kiwi -> generic pattern contract workflow:

• 70dd786 figma-transformer: recognize responsive centered shells
• 5d39608 figma-transformer: include materialized font families in diagnostics
• 22cd306 figma-transformer: diagnose emitted mask sources
• 8e56820 figma-transformer: report implicit route evidence
• d9d3db1 figma-transformer: link visual nodes to emitted artifacts

What this wave improves:

• Centered inner shells are recognized generically from symmetric raw gutters or symmetric padded content width, while full-bleed roots/bands stay width:100%.
• Font diagnostics now include materialized CSS/HTML-only font families, so generated CSS cannot reference hidden unresolved families while reporting complete font coverage.
• Mask source nodes that still emit into HTML are counted in transform diagnostics and artifact-quality summaries.
• Implicit route links now report route target evidence and current-page self-link suppression counts.
• Aggregate visual_node_map entries now link source nodes to emitted class/tag/page path for reviewer-grade traceability.

Verification:

• php -l changed PHP files passed.
• cd figma-transformer && composer test:contract passed.
• Yotako arbitrary .fig regenerated successfully:
  • artifact: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave2-integrated-20260702/site
  • result: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave2-integrated-20260702-result.json
  • status=success_with_warnings
  • page_count=2
  • missing_font_css=0
  • artifact quality clean/pass
  • invalid CSS numeric tokens 0
  • direct generated CSS scan found invalid_css_matches=0 for NaN, Infinity, INF, and negative gap tokens.
  • route diagnostics: implicit_route_links=7, implicit_route_self_suppressed=14
  • visual map traceability: visual_nodes=1068, visual_nodes_with_class=950, visual_nodes_with_page_path=950
• Bounded FSE regeneration completed with --max-pages=1:
  • artifact: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave2-integrated-max1-20260702/site
  • result: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave2-integrated-max1-20260702-result.json
  • status=success_with_warnings
  • page_count=1
  • artifact quality needs_review/warn
  • invalid CSS numeric tokens 0
  • direct generated CSS scan found fse_invalid_css_matches=0

FSE note:

• The bounded FSE run now reports missing_font_css=3. That is a new evidence-quality improvement from this wave: materialized CSS/HTML-only font references are no longer invisible to font diagnostics.

[chubes4]

Third wave: zstd .fig evidence-chain fixes

Integrated five more parallel minion commits using the same workflow: inspect emitted HTML/CSS, trace back through zstd-decoded .fig/Kiwi/normalized evidence, then fix generically with contracts.

• d6462db figma-transformer: resolve Apple system font families
• f5cd9ec figma-transformer: guard implicit entrypoint routes
• e15684c figma-transformer: suppress mask source operators
• 4ccce83 figma-transformer: trace aggregate visual nodes to pages
• 52883bc figma-transformer: use flow height for vertical fluid frames

Local generated sites:

• Yotako full site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave3-integrated-20260702/site
• Yotako home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave3-integrated-20260702/site/index.html
• Yotako blog: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave3-integrated-20260702/site/6-blog.html
• FSE bounded site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave3-integrated-max1-20260702/site
• FSE bounded home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave3-integrated-max1-20260702/site/index.html

Verification:

• php -l changed PHP files passed.
• cd figma-transformer && composer test:contract passed.
• Yotako arbitrary .fig full regeneration:
  • status=success_with_warnings
  • page_count=2
  • missing_font_css=0
  • artifact quality clean/pass
  • invalid CSS numeric tokens 0
  • direct CSS scan: yotako_invalid_css_matches=0
  • route diagnostics: implicit_route_links=7, implicit_route_unresolved=0
  • visual map traceability: visual_nodes=1068, visual_with_path=1068, visual_with_frame=1068
• Bounded FSE regeneration with --max-pages=1:
  • status=success_with_warnings
  • page_count=1
  • missing_font_css=0
  • artifact quality clean/pass
  • invalid CSS numeric tokens 0
  • direct CSS scan: fse_invalid_css_matches=0
  • emitted mask sources 0

Notable behavior changes:

• Apple system font families emitted from FSE CSS now resolve as system/web-safe instead of false-positive missing CSS.
• Low-confidence non-home labels no longer implicitly route to index.html; explicit Figma prototype/hyperlink evidence remains authoritative.
• Mask operator nodes are suppressed from visible HTML when source says they are masks, avoiding bogus visible mask layers and vector placeholder fallout.
• Fluid vertical page roots/bands/shells use flow-safe min-height instead of rigid fixed height when layout evidence indicates vertical content flow.

[chubes4]

Fourth wave: targeted Yotako/FSE visual regression fixes

Integrated four safe minion commits from the HTML/CSS -> zstd .fig/Kiwi -> generic pattern workflow:

• 8d5e431 figma-transformer: center responsive fluid shells
• 02f1222 figma-transformer: preserve responsive freeform footer flow
• 27d780b figma-transformer: preserve clone text typography
• 5c8b84e figma-transformer: add mobile responsive safety fallbacks

Local generated sites:

• Yotako full site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave4-integrated-20260702/site
• Yotako home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave4-integrated-20260702/site/index.html
• Yotako blog: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave4-integrated-20260702/site/6-blog.html
• FSE bounded site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave4-integrated-max1-20260702/site
• FSE bounded home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave4-integrated-max1-20260702/site/index.html

What changed:

• Yotako centered shells now emit explicit margin-left:auto;margin-right:auto, and full-bleed bands with large symmetric gutters emit responsive max(0px, calc((100% - content-width) / 2)) gutters instead of fixed desktop padding.
• FSE footer/read-next responsive flow now recognizes freeform footer children as positioned layers even when normalized positioning is implicit from geometry.
• Component clone text-only overrides preserve inherited figma_text.style, restoring typography for overridden clone headings such as newsletter/read-next titles.
• Mobile-only generic safety fallbacks fluidize oversized containers, stack oversized row flex containers, clamp large padding, and inset oversized absolute cards without name-specific Yotako/FSE selectors.

Verification:

• php -l changed PHP files passed.
• cd figma-transformer && composer test:contract passed.
• Yotako arbitrary .fig full regeneration:
  • status=success_with_warnings
  • page_count=2
  • missing_font_css=0
  • artifact quality clean/pass
  • invalid CSS numeric tokens 0
  • direct CSS scan: yotako_invalid_css_matches=0
• Bounded FSE regeneration with --max-pages=1:
  • status=success_with_warnings
  • page_count=1
  • missing_font_css=0
  • artifact quality clean/pass
  • invalid CSS numeric tokens 0
  • direct CSS scan: fse_invalid_css_matches=0

Logo/vector note:

• The FSE logo-eye detail minion stopped before committing. Its contract-passing vector changes did not affect the real mascot node, so I did not integrate that guess. The right next step is a diagnostics/instrumentation pass around VectorSvgRenderer::supportedVectorSvg() / isVectorOnlyContainer() for the footer mascot group to identify the exact false predicate before changing renderer behavior.

[chubes4]

Fifth wave: data parity improvements

Integrated five parallel minion commits using the HTML/CSS/SVG -> zstd .fig/Kiwi -> generic pattern workflow:

• 1d19fea figma-transformer: compose nested vector containers
• 9fb48d5 figma-transformer: hydrate offset text segments
• 963e3a5 figma-transformer: preserve layered image effects
• 78d4e59 figma-transformer: tighten responsive node parity matching
• ffd4ff1 figma-transformer: add source-loss coverage diagnostics

Local generated sites:

• Yotako full site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave5-data-parity-20260702/site
• Yotako home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave5-data-parity-20260702/site/index.html
• Yotako blog: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave5-data-parity-20260702/site/6-blog.html
• FSE bounded site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave5-data-parity-max1-20260702/site
• FSE bounded home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave5-data-parity-max1-20260702/site/index.html

What changed:

• Nested vector-only FRAME / COMPONENT / INSTANCE containers inside SVG-composed GROUPs are folded into parent SVGs, preserving source-local offsets and z-order. RECTANGLE / ROUNDED_RECTANGLE primitives now render as SVG rects inside vector compositions.
• Offset-only styled text segments are hydrated from decoded text, including Kiwi-shaped TextData segment arrays and fill/color fallback.
• Multi-layer image paints preserve duplicate layer order and per-layer crop/transform/blend metadata. Zero-spread image shadows render as filter:drop-shadow(...) for silhouette parity.
• Responsive node matching now prefers confident source/component/structural keys before ordinal fallback and suppresses ordinal mispatches when better evidence exists.
• Artifact quality now reports source_loss_coverage, so decoded/source nodes that fail to emit are visible in result summaries.

Verification:

• php -l changed PHP files passed.
• cd figma-transformer && composer test:contract passed.
• Yotako arbitrary .fig full regeneration:
  • status=success_with_warnings
  • page_count=2
  • artifact quality clean/pass
  • missing_font_css=0
  • invalid CSS numeric tokens 0
  • source-loss coverage ratio 1
  • direct CSS scan: yotako_invalid_css_matches=0
• Bounded FSE regeneration with --max-pages=1:
  • status=success_with_warnings
  • page_count=1
  • artifact quality clean/pass
  • missing_font_css=0
  • invalid CSS numeric tokens 0
  • source-loss coverage ratio 1
  • direct CSS scan: fse_invalid_css_matches=0

[chubes4]

Sixth wave: data parity iteration

Integrated four safe minion commits from the HTML/CSS/SVG -> zstd .fig/Kiwi -> generic pattern workflow:

• 5e29f51 figma-transformer: render normalized per-corner radii
• 6e49066 figma-transformer: preserve nested source text lists
• cb779a6 figma-transformer: compose simple mask clip paths
• c7027bc figma-transformer: summarize visual node map evidence

Held for follow-up:

• Responsive identity commit 29acb265 was not integrated because it was based on an older emitter path and reintroduced private breakpoint-diff methods that now belong in BreakpointMediaDiffBuilder. The idea is valid, but it needs a clean port into the extracted builder instead of duplicating the old path.

Local generated sites:

• Yotako full site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave6-data-parity-20260702/site
• Yotako home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave6-data-parity-20260702/site/index.html
• Yotako blog: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave6-data-parity-20260702/site/6-blog.html
• FSE bounded site: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave6-data-parity-max1-20260702/site
• FSE bounded home: file:///var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave6-data-parity-max1-20260702/site/index.html

What changed:

• Per-corner rounded rectangles now preserve decoded REST/Kiwi corner radii by rendering non-uniform rounded rects as SVG paths instead of collapsing all corners to one radius.
• Source-backed text lists now preserve nested TextLineData.indentationLevel, listStartOffset, mixed ordered/unordered nesting, and rich inline spans sliced by decoded character ranges.
• Simple sibling masks now compose to CSS clip-path for rectangle/frame and ellipse masks, using decoded source order rather than emitted render order.
• Transform diagnostics now summarize visual-node-map coverage so generated result JSON exposes emitted metadata/page-path traceability at scale.

Verification:

• php -l changed PHP files passed.
• cd figma-transformer && composer test:contract passed.
• Yotako arbitrary .fig full regeneration:
  • status=success_with_warnings
  • page_count=2
  • artifact quality clean/pass
  • missing_font_css=0
  • invalid CSS numeric tokens 0
  • source-loss coverage ratio 1
  • visual node map summary: visual_nodes=1068, nodes_with_emitted_metadata=929
  • direct CSS scan: yotako_invalid_css_matches=0
• Bounded FSE regeneration with --max-pages=1:
  • status=success_with_warnings
  • page_count=1
  • artifact quality clean/pass
  • missing_font_css=0
  • invalid CSS numeric tokens 0
  • source-loss coverage ratio 1
  • visual node map summary: visual_nodes=346, nodes_with_emitted_metadata=284
  • direct CSS scan: fse_invalid_css_matches=0

[chubes4]

Wave 7 integration pushed: Dr Aarti arbitrary .fig coverage.

Integrated commits:

• figma-transformer: filter duplicate route drafts
• figma-transformer: sanitize invalid layout CSS tokens
• figma-transformer: resolve token-only and SF system fonts
• figma-transformer: account for mask-source clone suppression
• figma-transformer: align token-only font contract

Verification:

• php -l changed PHP files: pass
• composer test:contract: pass
• git diff --check: pass

Generated artifacts:

• Dr Aarti: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/dr-aarti-wave7-integrated-20260703/site
• Yotako: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/yotako-wave7-integrated-20260703/site
• FSE bounded: /var/folders/lr/c_cmmt7s0592m4njz99v5yb40000gn/T/opencode/fse-wave7-integrated-max1-20260703/site

Artifact metrics:

• Dr Aarti: status=success_with_warnings, page_count=10, file_count=27, missing_font_css=0, invalid_css=0, invalid_numeric=0, source_loss_ratio=0.992, source_loss_missing=3, vector_placeholders=3, artifact=needs_review/fail.
• Yotako: status=success_with_warnings, page_count=2, file_count=70, missing_font_css=0, invalid_css=0, invalid_numeric=0, source_loss_ratio=1, source_loss_missing=0, vector_placeholders=0, artifact=clean/pass.
• FSE bounded: status=success_with_warnings, page_count=1, file_count=14, missing_font_css=0, invalid_css=0, invalid_numeric=0, source_loss_ratio=1, source_loss_missing=0, vector_placeholders=0, artifact=clean/pass.

CSS invalid token scan:

• Dr Aarti/Yotako/FSE generated CSS: no NaN, Infinity, INF, or gap:- matches.

Remaining Dr Aarti issue:

• The arbitrary .fig now clears the font and invalid-CSS failures, and page planning filters duplicate responsive/draft route frames.
• The remaining fail signal is vector coverage: 3 vector placeholders/source-loss nodes. This is the next generic vector-renderer coverage seam, not a Dr Aarti-specific CSS/page/font issue.