Measured

What works

The success side of the pair. 54 components from 6 third-party libraries across five styling architectures were run through one pipeline and scored against the original package rendering: 89.6% mean computed-style equality, exact string match, no tolerance, over 379,861 style cells. In the other direction a 599-variant Figma kit converted to code scores 92.70% over the 537 statically scorable variants. What that does not say: those 54 components are 6.0% of the 893 components in the libraries they came from, and they were picked because they were the tractable ones.

Every figure above and below is parsed at build time out of docs/24-what-works.md, which is generated from the committed artifacts — no number on this page is typed in, and the coverage figure is printed at the same size as the flattering ones on purpose.

The denominator, first Generated

Every mean below is an average over captured components. This is which components, and what fraction of each library they are — printed before the results rather than after them.

Read every percentage on this page as “on the easy 6.0%.” The 54 measured components were chosen because they were tractable, not at random — Button, Badge, Chip, Card, Checkbox, Tag, Avatar, Divider and their siblings. Data grid, tree, virtualized list, date picker, rich text and charts appear in zero committed contracts. A mean over this slice is a statement about this slice.

The size denominators are the one set of numbers here that is not machine-derived: they come from one-off extractor runs recorded in docs/22 §8.3, and they count helpers and utility directories, so they lean against us. The true percentages are a little higher; the order of magnitude is the finding. This page also uses the stricter column — components with a measured scorecard (54), not contracts committed (62) — because the fidelity numbers describe only the measured ones.

Three more corpora exist and are deliberately not counted above, because they are not third-party captures:

Fidelity — code → contract → rendering Generated

The measurement: an enriched contract is emitted to HTML by core/emit-html and compared against the original npm package rendering in the same pinned Chromium, per prop combination × interaction state. Computed-style equality is an exact string match over the styled channel set, with no tolerance and no whitelist — the browser's full longhand set is enumerated, and a channel the pipeline never opened still counts against it.

Two means, both printed, because they answer different questions. The unweighted mean (89.6%) treats a 16-cell Spinner and an 83,520-cell Button as equals; the cell-weighted figure (88.6%) is what fraction of every style cell in the corpus actually matched. Neither is quoted alone. 31/54 components are at ≥90%, 47/54 at ≥80%.

Every measured component, worst first

No component is omitted, and the worst row in the corpus is at the top. A success page that showed only its best rows would be the exact failure this project exists to catch.

The synthetic fixture, held out of every average above

extract/computed/out/conformance/ holds 50 more scorecards at a mean of 96.1%. They are excluded from the table above entirely and must never be folded into a library mean: they are synthetic single-construct cases this repo wrote to probe one CSS or DOM feature each, not components from anyone's design system. Including them would raise the headline by averaging in a fixture we built to be measurable — the shape of every overclaim this repo has caught. The corpus is partitioned by directory before any mean is taken.

Fidelity — canvas → code Generated

The reverse journey, measured on a real Figma community kit. Variants are proposed from the canvas into contracts, emitted as static HTML, rendered, and scored against the exported reference image of the same variant.

The unscored rows are named rather than dropped, and they are not all one thing:

An interaction-state rendering is produced by CSS at runtime, so a static export cannot be scored against it — that is an instrument limit. The rest is a carriage gap: an axis the pipeline did not carry. They are counted separately rather than folded into the same excuse.

Denominator for that table: these are the sets in one community kit that were imported at all. The kit's un-imported sets do not appear as low scores — they do not appear.

The round trip closes — and it is not lossless Generated

Canvas → code → canvas, on the same kit. The claim is not that the round trip preserves everything. It is that it closes: it runs to completion on every component, and every fact lands in exactly one of four buckets, so a loss is a row in a table rather than an absence.

47.4% matched is the honest headline, and it is not high. The value of this instrument is the classification, not the ratio — and the largest single divergence class is an artifact of the comparison rather than a loss: auto-layout-inert accounts for 940 of the 960 layout.mode divergences. A frame with one child, or with children the designer positioned absolutely, has no observable auto-layout direction to read back; the engine writes a direction the original canvas did not record. It is tagged as its own class precisely so it cannot be counted as a fidelity loss. The remaining ones are real.

The (untagged) rows are the honest hole in this instrument: those facts are classified into a bucket but carry no reason, so nothing here can say whether they are engine defects or comparison artifacts. They are printed rather than excluded from the denominator.

The honesty instruments, counted as features Generated

These are the numbers this project is least tempted to publish and most needs to. Each one counts something the engine could not do and said so. They belong in a capability report because a conversion tool without them is not more capable — it is just quieter.

Dropped-fact receipts

When the plugin engine compiles a contract and cannot carry a fact onto the canvas, it emits a receipt naming the fact. Across the committed corpora there are 70 such receipts, and the count is pinned exactly, in both directions — fewer receipts is not automatically progress, because it is either a real fix or a refusal path that quietly stopped firing, and both require a human to look.

Named refusals — the construct vocabularies

Two hand-authored manifests are the independent denominators for “what can the engine be asked to do”. Both are deliberately not derived from the code that decides carriage: an instrument whose denominator comes from the same filter that decides carriage scores 100% on a channel it never opened. A construct that is neither carried nor named-refused is a hard failure of the suite — “it silently did nothing” is not an allowed outcome.

Reproducibility — the part that is not a percentage Generated

A fidelity number you cannot reproduce is an anecdote. These are the pins that make everything above re-derivable, and each is enforced by a gate rather than asserted in prose.

The undefined executable claims are not all “does it work”. They are classified by what they claim, and the largest classes after extraction are detection and refusal — gates that fail if the engine stops saying no. An engine that carries everything is not a better engine; it is one that has stopped telling you what it could not do.

What it costs

Not restated here, deliberately — a summary of the limitations written by the success document is a summary written by the interested party. The complete inventory is docs/23-known-limitations.md — Known Limitations, and it is the longer of the two. It answers the three questions this page cannot: how long a library takes to onboard, how much of the work is expert-configured rather than automatic, and whether any of this holds past the 6.0% in the denominator table.

This page is a rendering of docs/24-what-works.md, generated by npm run capability:report from ten committed artifacts and refused by npm run capability:fresh if the committed bytes differ from a rebuild — one of the undefined evals runs that refusal. Every table above is parsed out of that file at build time; a section or a row that stops existing fails this build by name rather than rendering a blank. The report also cross-checks its own corpus twice from independent files — 54 scorecards, 62 committed contracts, and the capture double-sweep receipts (104/104 runs) — against a document written months earlier for a different purpose, and prints any disagreement instead of resolving it toward the more flattering value.