fix(studio): ship component styles as their own stylesheet for embedders - #4393

What changes

A page that embeds Studio's components can now style them. Studio's component rules (timeline clips and their labels, loaders, range inputs, toasts, preset shelf, CodeMirror overrides and the rest) lived only in Studio's app stylesheet. An embedder that imports @hyperframes/studio/theme.css got none of them: timeline clips drew as bare boxes, most disappeared against the row, and clip labels rendered black on a dark background.

Those rules now live in packages/studio/src/styles/components.css, exported as @hyperframes/studio/components.css. studio.css keeps the app shell (Tailwind, palette reset, theme, @source, the button cursor, color scheme, body, #root) and imports components.css, so each rule has one home and Studio itself is unchanged.

An embedder on Tailwind v4 imports:

@import "tailwindcss";
@import "@hyperframes/studio/theme.css";
@import "@hyperframes/studio/components.css";

The class names and @keyframes names in components.css are global, as they are in Studio: timeline-* and hf-* prefixed, so a clash with the host page is unlikely but not impossible.

How

• The rules moved byte for byte. Nothing in them changed.
• The export is added to exports, publishConfig.exports and package-subpaths.json, shaped like the existing ./theme.css (served from src).
• hex-baseline.json: the 48 colour literals are now counted under the new file. The total is unchanged.
• scripts/contrast-pairs.json: the 33 source pointers into studio.css now point at the same lines in components.css. Each one was checked by line content, not by arithmetic.
• Two existing tests that read studio.css as text for rules that moved (VolumeControl.styles.test.ts, timelineMotionStyles.test.ts) now read components.css.
• New componentStyles.test.ts:
  • studio.css may define no class rules at any depth, including inside @layer and @media, so a component rule can't drift back where an embedder never sees it.
  • Tailwind, theme.css and components.css alone must yield the timeline clip label rule.
  • Each was checked by breaking the code: a toast rule added to studio.css at top level and inside @layer base, the label rule added back, and the label rule removed from components.css each fail the matching test.

Evidence

• Every Studio test file that references a stylesheet (17 files) passes one by one, as do the three typechecks and the package-subpath check.
• Studio's compiled dist/styles.css, built before and after: the same 2 280 rules (identical as a multiset; only the order changed, because the imported rules now come before body and #root, which target different elements).
• Studio screenshots on a 24-scene project, before and after, with scene thumbnails hidden (they finish loading at different times on every run): one before/after pair is byte-identical. The other runs differ by at most 30 pixels, the same as two runs of one build.
• Embedder: a page with only Tailwind, theme.css and Studio's real timeline markup. The clip label's computed colour is rgb(0, 0, 0) before and rgb(255, 255, 255) after.

Before

Timeline markup embedded with theme.css only (today's embedder):

After

The same markup with theme.css and components.css:

Studio is unchanged

The same 24-scene project in Studio, scene thumbnails hidden. main's screenshot and this branch's screenshot are byte-identical (md5 412b74d27e7c2f8716ae46fa1b9e2245 for both), so it appears once:

Review

An independent adversarial review over three passes:

• Pass 1 found one blocker: two existing tests read studio.css as text for rules that moved. It also flagged a guard test that missed classes applied outside className literals, and a stale comment. All three are fixed here.
• Pass 2 found that the guard missed class rules nested inside @layer or @media. That is fixed too.
• At this head: no blockers, no majors, no minors.

The review also confirmed:

• the byte-for-byte move (rebuilding the old file from the two new ones gives an empty diff);
• equal compiled output apart from order;
• that the order change cannot change any cascade winner;
• that nothing page-global moved into components.css;
• the published export;
• the colour-literal and contrast-pointer updates.