fix(editor): stop saved-block surfaces rendering with square corners

[orkhanahmadov]

Summary

Five saved-block surfaces rendered with square corners:

• the saved blocks browser's cards
• their keyboard focus ring
• the inline rename row
• the loading skeleton
• the save dialog's preview rows

All five read var(--tpl-radius-md), which is not one of the editor's radius tokens. They now read --tpl-radius-sm (7px).

Why it resolved to nothing

prefix(tpl) puts Tailwind's own theme variables in the same --tpl-* namespace as the SDK's tokens, so --tpl-radius-md named Tailwind's --radius-md. Tailwind saw the reference and emitted it:

:root, :host { --tpl-radius-md: calc(.375 * var(--tpl-base-size)); }

--tpl-base-size is declared only on .tpl, so at :root/:host that declaration is invalid at computed-value time. Every descendant inherits the invalid value, and border-radius falls back to 0. The name even appears in the built style.css, which is why it looked defined everywhere except in the computed style. I reproduced it in the playground: giving the shadow host a --tpl-base-size makes the cards settle at 6px.

Why --tpl-radius-sm

This was the owner's call:

• 7px sits beside the 6px tpl:rounded-md search box, filter, rename inputs and dialog buttons around these surfaces.
• It stays on the themable token layer, through the documented --tpl-user-radius-sm.
• It adds no new public hook.

Alternatives that were rejected:

• --tpl-radius (10px) is noticeably rounder than every control next to it.
• tpl:rounded-md ignores --tpl-user-radius*, and the overlay's <style> rule would have to spell out the calc.
• Defining a --tpl-radius-md token would sit below -sm at the 6px DESIGN.md mentions, and it would lock in the colliding name.

The focus overlay reads the same token as the card, so the ring follows the card's corners.

Guard

A new "Token references" group in design-system-conformance.test.ts requires every var(--tpl-*) in packages/editor/src to name one of these:

• a token styles/index.css declares
• one of four runtime tokens the editor sets from script (--tpl-drop-text, --tpl-doc-link-color, --tpl-doc-link-underline, --tpl-doc-paragraph-spacing), each mapped to the file that sets it. A stale-entry case keeps that map honest.
• a --tpl-user-* hook, but only inside styles/index.css. A component reading a hook directly would bypass the theme option and the dark namespace.

A self-test runs the detector on the exact shapes that shipped: the arbitrary-value class and the CSS rule.

The changeset also corrects the 0.7.0 notes, which gave --tpl-user-radius-md as an example theming hook. The editor has never read that hook.

Theming docs parity

apps/docs/tests/theming-hooks-parity.test.ts pins guide/theming.md and its German mirror to the editor's actual theming surface:

• The --tpl-user-* table lists exactly the hooks styles/index.css reads.
• A new Dark column marks exactly the hooks that have a --tpl-user-dark-* twin (29 of 36).
• The ThemeOverrides key table lists exactly that type's keys. These were already in parity, so this is a guard only.

The test failed on today's docs and caught two gaps, now fixed in EN and DE:

• --tpl-user-on-primary is read but was undocumented. It now has a row, plus a note: unset, it follows the active background; setting it fixes one color for both modes, and a near-white label fails contrast on the lighter dark-mode primary.
• The docs said "replace --tpl-user- with --tpl-user-dark- in any token name", but radius, radius-sm, radius-lg, base-size, font-family, transition and on-primary have no twin. The sentence now points at the ✓ rows.

The extra column narrowed the token-name column, so a few names wrapped at a hyphen. To win the width back, the base-size purpose cell's link text is shorter and the German header is "Dark". Measured at 1280px, EN wraps no names and DE the same two as on main.

public/llms-full.txt was regenerated. The editor README's stale "27 design tokens" now uses the root README's #751 wording with no count, and the existing house-style rule now covers both READMEs.

Linked issues

n/a. This is one of the two pre-existing issues listed as out of scope in #881.

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that changes existing behavior)
• Refactor (no functional change)
• Documentation
• Tests / tooling / CI
• Dependency update

Affected packages

@templatical/editor (source and README), apps/docs (theming guide EN+DE, tests, regenerated llms-full.txt), apps/playground (e2e only)

Checklist

• Tests added or updated, and they fail without the change. Before the doc fix, the theming parity test failed on the missing on-primary row and the absent dark marks. Before the fix, the guard failed listing exactly the 5 sites, and the e2e "keyboard focus rings the whole card" failed with 0px against the expected 7px in both projects.
• format:check, lint, typecheck (including the playground), build and test pass locally. Every package is green; the editor is at 3403/3403 and the docs at 621/621.
• e2e: saved-blocks.spec.ts and modal-theming.spec.ts pass locally in both projects (58/58). The full suite runs in CI.
• Docs updated: guide/theming.md and de/guide/theming.md, locked by the new parity test (it failed before the doc fix)
• i18n: n/a, no new strings
• Changeset added (patch)
• PR title is descriptive and follows the existing convention

Screenshots / recordings

I reviewed before/after captures locally (headless Chromium, 2x, both DOM modes). These are the computed values:

Surface	Before	After, shadow DOM	After, light DOM
Browser card	0px	7px	7px
Card focus overlay (::after)	0px	7px	7px
Rename row	0px	7px	7px
Loading skeleton row	0px	7px	7px
Save dialog preview row	0px	7px	7px

Notes for reviewers

• In SavedBlocksBrowserModal.vue this touches only the three radius classes and the focus-overlay rule, plus one sentence in that rule's comment. That keeps it disjoint from the in-flight delete-confirm wrap fix, which edits the card's bottom row.
• Tailwind emits the same :root,:host copies of --tpl-radius, --tpl-radius-sm, --tpl-radius-lg and --tpl-shadow-sm…xl, because the SDK reads those names too. They are harmless only because .tpl redeclares them. The guard now fails any reference that could resolve only through such a copy.

[cloudflare-workers-and-pages]

Deploying templatical-docs with    Cloudflare Pages

Latest commit:	893847f
Status:	✅  Deploy successful!
Preview URL:	https://a2a28731.templatical-docs.pages.dev
Branch Preview URL:	https://claude-radius-md-token-295e5.templatical-docs.pages.dev

View logs

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[cloudflare-workers-and-pages]

Deploying templatical-playground with    Cloudflare Pages

Latest commit:	893847f
Status:	✅  Deploy successful!
Preview URL:	https://8e55342c.templatical-playground.pages.dev
Branch Preview URL:	https://claude-radius-md-token-295e5.templatical-playground.pages.dev

View logs