fix(json-render-ui): add the missing CSS reset to the SPA and Storybook - #284

Problem

btn-action / btn-action-sm — what Button.ts maps the secondary and ghost variants onto — set a border and op75 but no base background-color, only one on :hover:

.btn-action-sm{--un-border-opacity:.13;border-width:1px;border-color:rgb(136 136 136/var(--un-border-opacity));opacity:.75;…}
.btn-action:hover,.btn-action-sm:hover{--un-bg-opacity:.13;background-color:rgb(136 136 136/var(--un-bg-opacity));opacity:1}

That is correct only if a CSS reset has neutralised the UA's button { background-color: buttonface }. Without one, the browser default wins and every non-primary button renders as a solid light-grey box with dark text on the dark canvas.

design/build-shadow-css.ts prepends @unocss/reset/tailwind.css to the shadow-root stylesheet, so the dock renderer was never affected — which is why this went unnoticed. The two light-DOM surfaces have to import the reset themselves, and neither did.

Evidence

Reset markers present in each pipeline's built CSS, before this change:

After this change all three rows read 1.

Note the middle row: this affects the shipped SPA bundle, not just the Storybook canvas.

Prior art in this repo

packages/hub-ui/.storybook/preview.ts already does exactly this, and its comment describes this precise symptom:

Without it, stories miss the reset (unstyled default <button>/<ul>/heading margins, …) real dock content never shows once mounted in its actual shadow root.

json-render-ui simply never got the same line. @unocss/reset is already in the catalog (pnpm-workspace.yaml:155) and already declared by the root package.json and by hub-ui; this adds the third declaration.

hub-ui itself is not affected — it ships no light-DOM SPA (virtual:uno.css appears only in its Storybook preview), so its two surfaces both already have the reset.

Changes

• src/spa/main.ts — import @unocss/reset/tailwind.css before virtual:uno.css, matching the shadow build's [reset, userStyle, unoCss] order, with the rationale inline.
• .storybook/preview.ts — same import, pointing at the SPA entry for the explanation.
• package.json — declare @unocss/reset: catalog:frontend rather than relying on transitive hoisting.
• JsonRender.stories.ts — comment on InShadowRoot noting it renders gallerySpec and should therefore look the same as Gallery; divergence means a pipeline drifted. The two stories now act as a cheap visual regression pair.

Verification

• tsc --noEmit passes; eslint clean on all changed files.
• SPA and Storybook both rebuilt; reset rules confirmed present in the output CSS.
• pnpm install --frozen-lockfile passes; the lockfile diff is three lines (the added dependency) and nothing else.

before:

now: