* perf(studio): light ui and player entries for a host's first screen
* perf(studio): the ui entry's logo no longer loads the studio header
* test(studio): refuse only packages studio itself depends on
* test(studio): the light entries also refuse the hf-ids parser
* fix(studio): ship component styles as their own stylesheet for embedders
Studio's component rules (timeline clips, loaders, range inputs, toasts and
the rest) lived only in the app sheet, so a page that embeds Studio's
components with theme.css got unstyled clips and dark-on-dark labels. They
move unchanged into components.css, exported as
@hyperframes/studio/components.css; studio.css keeps the app shell and
imports it, so Studio's compiled CSS has the same rules.
* test(studio): read moved component rules from components.css
* test(studio): catch class rules nested in the app sheet's layers and media blocks
A host mounting Studio's header reuses HyperframesLogo and buttonSizes for
matching chrome, and imports the compiled stylesheet as a fixed-name package
export instead of a hash that changes on every rebuild.
* feat(studio): move every design value into one theme file
Studio's design values lived in three places: a JS Tailwind preset, an
inline @theme block, and raw hex and pixel literals in markup and CSS.
theme.css is now the single owner. Tailwind v4 turns it into both the
utility classes and the CSS custom properties, so markup, plain CSS and
canvas code all read the same number.
- semantic colour palette (background levels, surfaces, borders, text
levels, accent, selection, playhead, danger, media, container), radii,
control heights, the micro type scale, font stacks, shadows, easings
and motion durations
- the stock Tailwind palette is cleared with --color-*: initial, so a
colour that is not a Studio token cannot be reached from markup; the
entries Studio's markup still names are re-declared as deprecated
aliases and removed once the sweep converts them
- motion durations ship as @utility rules that zero themselves under
prefers-reduced-motion, since Tailwind has no duration namespace
- Phosphor icons get one default size and weight, read off the theme at
the app root; icons that pass their own still win
- published as @hyperframes/studio/theme.css; the JS preset export stays
as a deprecated shim for v3 consumers, with a test that fails if the
two drift apart
* docs(studio): trim theme token comments to pass the comment-length gate
* docs(studio): shorten theme test docblock to fit the comment gate
* refactor(studio): collapse the duration utilities into one functional rule
* refactor(studio): trim theme.css comments to three lines
* test(studio): fail when a legacy palette entry is not a Tailwind default
* fix(studio): keep the palette reset out of the exported theme.css
* style(studio): format theme.css with the repo formatter
* fix(studio): declare theme.css browser-only so the packed-consumer smoke does not import it in node
Miguel Ángel