feat(core): opt-in variant/interactive on json-render Card & Stack, fix dock scrollbar in dark mode (#477)

Author: dvcolomban

packages/core/src/client/webcomponents/.generated/css.ts

@@ -7,17 +7,20 @@ import { devtoolsRegistry, UnsupportedComponent } from './registry'
 /**
  * Render a json-render `Spec` with the DevTools registry, the same way
  * `ViewJsonRender` does at runtime — including the `UnsupportedComponent`
- * fallback for any element `type` absent from the registry.
+ * fallback for any element `type` absent from the registry. Accepts a getter
+ * instead of a plain `Spec` so stories can rebuild the spec from reactive
+ * Storybook `args` (e.g. toggling `variant`/`interactive` live via Controls).
  */
-function renderSpec(spec: Spec) {
+function renderSpec(specOrGetter: Spec | (() => Spec)) {
   return defineComponent({
     setup() {
-      const initialState = (spec as any).state ?? {}
+      const getSpec = typeof specOrGetter === 'function' ? specOrGetter : () => specOrGetter
+      const initialState = (getSpec() as any).state ?? {}
       return () => h(
         'div',
         { class: 'max-w-160 p6 bg-base color-base font-sans' },
         h(JSONUIProvider, { registry: devtoolsRegistry, handlers: {}, initialState }, {
-          default: () => h(Renderer, { spec, registry: devtoolsRegistry, fallback: UnsupportedComponent }),
+          default: () => h(Renderer, { spec: getSpec(), registry: devtoolsRegistry, fallback: UnsupportedComponent }),
         }),
       )
     },
@@ -78,18 +81,39 @@ export const Gallery: Story = {
   } as unknown as Spec),
 }
 
-/** A `Card` grouping content under a titled, bordered surface. */
-export const Card: Story = {
-  render: () => renderSpec({
+/**
+ * A `Card` grouping content under a titled, bordered surface. Toggle the
+ * Controls below to compare today's default (`primary`, non-`interactive` —
+ * unchanged from before this fix) against the new opt-in look: `variant`
+ * tints the background (`secondary`/`danger`) or leaves it untouched
+ * (`primary`/`ghost`); `interactive` strengthens the Card's border on hover
+ * and tints each row's (`Stack`) background on hover.
+ */
+interface CardArgs {
+  variant: 'primary' | 'secondary' | 'ghost' | 'danger'
+  interactive: boolean
+}
+
+export const Card: StoryObj<Meta<CardArgs>> = {
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'ghost', 'danger'] },
+    interactive: { control: 'boolean' },
+  },
+  args: { variant: 'primary', interactive: false },
+  render: args => renderSpec(() => ({
     root: 'root',
     state: {},
     elements: {
-      root: { type: 'Card', props: { title: 'Plugin', collapsible: false }, children: ['body'] },
-      body: { type: 'Stack', props: { direction: 'column', gap: 8, padding: 4 }, children: ['t', 'badge'] },
+      root: { type: 'Card', props: { title: 'Plugin', collapsible: false, variant: args.variant, interactive: args.interactive }, children: ['body'] },
+      body: { type: 'Stack', props: { direction: 'column', gap: 4, padding: 4 }, children: ['row1', 'row2'] },
+      row1: { type: 'Stack', props: { direction: 'row', gap: 8, align: 'center', interactive: args.interactive }, children: ['t', 'badge'] },
       t: { type: 'Text', props: { text: 'vite-plugin-inspect', variant: 'code' } },
       badge: { type: 'Badge', props: { text: 'enabled', variant: 'success' } },
+      row2: { type: 'Stack', props: { direction: 'row', gap: 8, align: 'center', interactive: args.interactive }, children: ['t2', 'badge2'] },
+      t2: { type: 'Text', props: { text: 'vite-plugin-vue', variant: 'code' } },
+      badge2: { type: 'Badge', props: { text: 'enabled', variant: 'success' } },
     },
-  } as unknown as Spec),
+  } as unknown as Spec)),
 }
 
 /**

packages/core/src/client/webcomponents/json-render/JsonRender.stories.ts

@@ -1,21 +1,38 @@
 import type { RegistryComponentProps } from './types'
 import { defineComponent, h, ref } from 'vue'
-import { border, borderSolid } from './tokens'
+import { border, borderSolid, borderStrong, colors, surfaceMuted } from './tokens'
+
+// Mirrors `ContainerCard.vue`'s (packages/ui) opt-in `variant` model: `primary`
+// (default) keeps today's fully transparent look, so existing specs render
+// unchanged; `ghost` is the same no-fill look under a more intentional name.
+const variantBackground: Record<string, string | undefined> = {
+  primary: undefined,
+  secondary: surfaceMuted,
+  ghost: undefined,
+  danger: colors.danger.bg,
+}
 
 export const Card = defineComponent({
   name: 'JrCard',
   props: ['element', 'emit', 'on', 'bindings', 'loading'],
   setup(ctx: RegistryComponentProps, { slots }) {
     const collapsed = ref(false)
     return () => {
-      const { title, collapsible } = ctx.element.props
+      const { title, collapsible, variant = 'primary', interactive = false } = ctx.element.props
       return h('div', {
         class: 'jr-card',
         style: {
           border: borderSolid(border),
           borderRadius: '6px',
           overflow: 'hidden',
+          backgroundColor: variantBackground[variant],
+          transition: interactive ? 'border-color 0.15s ease' : undefined,
         },
+        // `interactive` strengthens the border on hover rather than tinting
+        // the background (already set by `variant`) — same transition timing
+        // as Stack's row hover, just on `border-color` instead of `background`.
+        onMouseenter: interactive ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.borderColor = borderStrong } : undefined,
+        onMouseleave: interactive ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.borderColor = border } : undefined,
       }, [
         title && h('div', {
           class: 'jr-card-header',

packages/core/src/client/webcomponents/json-render/components/Card.ts

@@ -1,17 +1,29 @@
 import type { RegistryComponentProps } from './types'
 import { defineComponent, h } from 'vue'
+import { colors, surfaceMuted, surfaceSubtle } from './tokens'
 
 // Map the base catalog's `align` / `justify` enums onto CSS flexbox values.
 const alignMap: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' }
 const justifyMap: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between', around: 'space-around' }
 
+// Mirrors `ContainerCard.vue`'s (packages/ui) opt-in `variant` model: `primary`
+// (default) keeps today's fully transparent look, so existing specs render
+// unchanged; `ghost` is the same no-fill look under a more intentional name.
+const variantBackground: Record<string, string | undefined> = {
+  primary: undefined,
+  secondary: surfaceMuted,
+  ghost: undefined,
+  danger: colors.danger.bg,
+}
+
 export const Stack = defineComponent({
   name: 'JrStack',
   props: ['element', 'emit', 'on', 'bindings', 'loading'],
   setup(ctx: RegistryComponentProps, { slots }) {
     return () => {
-      const { direction = 'column', gap = 8, align, justify, padding, wrap, flex } = ctx.element.props
+      const { direction = 'column', gap = 8, align, justify, padding, wrap, flex, variant = 'primary', interactive = false } = ctx.element.props
       const isHorizontal = direction === 'row'
+      const restingBackground = variantBackground[variant]
       return h('div', {
         class: 'jr-stack',
         style: {
@@ -21,9 +33,21 @@ export const Stack = defineComponent({
           alignItems: align ? (alignMap[align] ?? align) : (isHorizontal ? 'center' : 'stretch'),
           justifyContent: justify ? (justifyMap[justify] ?? justify) : undefined,
           flexWrap: wrap ? 'wrap' : undefined,
-          padding: padding ? `${padding}px` : undefined,
+          // `interactive` rows get a small default padding/radius so the
+          // hover tint reads as a deliberate affordance instead of hugging
+          // the content edge-to-edge; an explicit `padding` prop still wins.
+          padding: padding ? `${padding}px` : (interactive ? '4px 6px' : undefined),
+          // Matches Card's own borderRadius so a row's hover tint reads
+          // consistently with the card surfaces it sits inside.
+          borderRadius: interactive ? '6px' : undefined,
+          transition: interactive ? 'background-color 0.15s ease' : undefined,
           flex: flex != null ? String(flex) : undefined,
+          backgroundColor: restingBackground,
         },
+        // `interactive` only ever tints on hover — Stack has no click/press
+        // semantics of its own, so rows built from it stay non-clickable.
+        onMouseenter: interactive ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.backgroundColor = surfaceSubtle } : undefined,
+        onMouseleave: interactive ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.backgroundColor = restingBackground ?? '' } : undefined,
       }, slots.default?.())
     }
   },

packages/core/src/client/webcomponents/json-render/components/Stack.ts

@@ -8,6 +8,8 @@ export const border = 'var(--jr-border, rgba(128,128,128,0.2))'
 export const borderSubtle = 'var(--jr-border, rgba(128,128,128,0.1))'
 export const borderMuted = 'var(--jr-border, rgba(128,128,128,0.08))'
 export const borderInput = 'var(--jr-border, rgba(128,128,128,0.3))'
+// Interactive-hover border (Card) — a clearer step up than borderInput, without going full `primary`.
+export const borderStrong = 'var(--jr-border, rgba(128,128,128,0.5))'
 // Keep in sync with the DevTools theme primary (packages/ui/src/unocss/theme.ts).
 export const primary = 'var(--jr-primary, #6b84fd)'
 export const bg = 'var(--jr-bg, inherit)'

packages/core/src/client/webcomponents/json-render/components/tokens.ts

@@ -2,6 +2,54 @@
   --un-text-opacity: 100%;
 }
 
+/*
+ * Thin/transparent scrollbar, matching packages/ui/src/styles/global.css —
+ * that stylesheet only reaches the Nuxt plugin apps, not this injected
+ * webcomponents shell, which otherwise falls back to the browser default
+ * (thick, opaque-gutter) scrollbar clashing with the translucent dock.
+ * `:host`, not `:root` — this stylesheet is adopted into the dock's shadow
+ * root (`defineCustomElement(..., { shadowRoot: true, styles: [css] })`),
+ * where `:root` only ever matches the top-level document's <html>.
+ * Rules below are unscoped (not `#vite-devtools-anchor ...`) since the
+ * shadow boundary already keeps them from leaking onto the host page, and
+ * scoping under the anchor's id would miss edge-docked mode entirely
+ * (`DockEmbedded.vue` renders `DockEdge`/`#vite-devtools-edge-panel` and
+ * `Dock`/`#vite-devtools-anchor` as mutually exclusive siblings).
+ */
+:host {
+  --app-scrollbar-size: 6px;
+  --app-scrollbar-radius: 1px;
+  --app-scrollbar-thumb: #8884;
+  --app-scrollbar-thumb-hover: #8885;
+}
+
+::-webkit-scrollbar {
+  width: var(--app-scrollbar-size);
+}
+
+::-webkit-scrollbar:horizontal {
+  height: var(--app-scrollbar-size);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--app-scrollbar-thumb);
+  transition: background 0.2s ease;
+  border-radius: var(--app-scrollbar-radius);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--app-scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-track {
+  border-radius: var(--app-scrollbar-radius);
+  background: transparent;
+}
+
 #vite-devtools-anchor {
   --uno: w-0 z-floating-anchor fixed origin-center font-sans text-[15px] box-border;
   transform: translate(-50%, -50%) rotate(0);