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

`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`. Without a CSS reset the UA
default `button { background-color: buttonface }` therefore wins, and every
non-primary button renders as a solid light-grey box on the dark canvas.

`scripts/build-css.ts` prepends `@unocss/reset/tailwind.css` to the
shadow-root stylesheet, so the dock renderer was never affected. The two
light-DOM surfaces have to import the reset themselves and neither did:
the shipped SPA bundle and the Storybook canvas both contained zero reset
rules (`-webkit-appearance:button`, `background-image:none`,
`box-sizing:border-box` all absent from the built CSS).

`packages/hub-ui/.storybook/preview.ts` already does exactly this, with a
comment describing the same symptom; `json-render-ui` simply never got the
same line. `hub-ui` ships no light-DOM SPA, so it is not affected.

Author: SaKaNa-Y

packages/json-render-ui/.storybook/preview.ts

@@ -1,4 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
+// Before `virtual:uno.css`, mirroring the SPA entry and the shadow-root build —
+// see `src/spa/main.ts` for why the reset is load-bearing here.
+import '@unocss/reset/tailwind.css'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
 

packages/json-render-ui/package.json

@@ -58,6 +58,7 @@
     "@storybook/addon-docs": "catalog:storybook",
     "@storybook/vue3-vite": "catalog:storybook",
     "@unocss/preset-icons": "catalog:frontend",
+    "@unocss/reset": "catalog:frontend",
     "@vitejs/plugin-vue": "catalog:build",
     "devframe": "workspace:*",
     "storybook": "catalog:storybook",

packages/json-render-ui/src/JsonRender.stories.ts

@@ -127,7 +127,16 @@ const dockRendererContext = {
   rpc: { call: rpc.call, connectionMeta: undefined },
 } as unknown as Parameters<typeof jsonRenderDockRenderer>[0]['context']
 
-/** Mounts the shipped dock renderer so the story exercises its shadow root and adopted stylesheet. */
+/**
+ * Mounts the shipped dock renderer so the story exercises its shadow root and
+ * adopted stylesheet.
+ *
+ * It renders `gallerySpec`, so it should look **the same** as `Gallery` — the
+ * two differ only in how the stylesheet reaches the components (Storybook's
+ * `virtual:uno.css` in the light DOM vs. the prebuilt `.generated/css` adopted
+ * into a shadow root). A visible divergence between them means one of the two
+ * pipelines has drifted, not that the shadow root is "styled differently".
+ */
 export const InShadowRoot: StoryObj = {
   render: () => ({
     setup() {

packages/json-render-ui/src/spa/main.ts

@@ -4,6 +4,17 @@ import { JSON_RENDER_INDEX_KEY } from '@devframes/json-render'
 import { connectDevframe } from 'devframe/client'
 import { computed, createApp, defineComponent, h, ref, shallowReactive, shallowRef, watch } from 'vue'
 import { JsonRenderView } from '../renderer'
+// The same Tailwind preflight `scripts/build-css.ts` prepends to the shipped
+// shadow-root stylesheet — first, so `virtual:uno.css`'s utilities win over its
+// resets, matching the production build's `[reset, userStyle, unoCss]` order.
+// The `@antfu/design` component ports depend on it: `btn-action` (what
+// `Button.ts` maps `secondary`/`ghost` onto) sets a border and `op75` but *no*
+// base `background-color` — only one on `:hover` — so without the reset the UA
+// default `button { background-color: buttonface }` wins and every non-primary
+// button renders as a solid light-grey box. The dock renderer never showed this
+// because its stylesheet is built with the reset baked in; this SPA and the
+// Storybook canvas are the two surfaces that have to import it themselves.
+import '@unocss/reset/tailwind.css'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'