devframes · SaKaNa-Y · Aug 22, 2026
diff --git a/packages/json-render-ui/.storybook/preview.ts b/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'
 

diff --git a/packages/json-render-ui/package.json b/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",

diff --git a/packages/json-render-ui/src/JsonRender.stories.ts b/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() {

diff --git a/packages/json-render-ui/src/spa/main.ts b/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'
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml