variantkit 0.1.0

package/variantkit/patches/dialkit+1.2.0.patch

@@ -0,0 +1,32 @@
+diff --git a/node_modules/dialkit/dist/index.cjs b/node_modules/dialkit/dist/index.cjs
+index d9f4837..4bf4e6d 100644
+--- a/node_modules/dialkit/dist/index.cjs
++++ b/node_modules/dialkit/dist/index.cjs
+@@ -1006,8 +1006,9 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
+         style: panelStyle,
+         onClick: !isOpen ? handleToggle : void 0,
+         "data-collapsed": isCollapsed,
+-        whileTap: !isOpen ? { scale: 0.9 } : void 0,
+-        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
++        whileHover: !isOpen ? { scale: 1.06, boxShadow: "0 10px 28px rgba(0,0,0,0.34)" } : void 0,
++        whileTap: !isOpen ? { scale: 0.88 } : void 0,
++        transition: isOpen ? { type: "spring", visualDuration: 0.44, bounce: 0.26 } : { type: "spring", visualDuration: 0.3, bounce: 0.14 },
+         children: folderContent
+       }
+     );
+diff --git a/node_modules/dialkit/dist/index.js b/node_modules/dialkit/dist/index.js
+index f8d8baf..7a0e7b3 100644
+--- a/node_modules/dialkit/dist/index.js
++++ b/node_modules/dialkit/dist/index.js
+@@ -966,8 +966,9 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
+         style: panelStyle,
+         onClick: !isOpen ? handleToggle : void 0,
+         "data-collapsed": isCollapsed,
+-        whileTap: !isOpen ? { scale: 0.9 } : void 0,
+-        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
++        whileHover: !isOpen ? { scale: 1.06, boxShadow: "0 10px 28px rgba(0,0,0,0.34)" } : void 0,
++        whileTap: !isOpen ? { scale: 0.88 } : void 0,
++        transition: isOpen ? { type: "spring", visualDuration: 0.44, bounce: 0.26 } : { type: "spring", visualDuration: 0.3, bounce: 0.14 },
+         children: folderContent
+       }
+     );

package/variantkit/react/VariantBar.tsx

@@ -0,0 +1,208 @@
+'use client'
+// VariantBar — VariantKit's own chrome: a slim bottom-center bar with variant tabs,
+// compare toggle, and Finalize. Mount once next to <DialRoot/>. Dev-only (hidden in
+// production builds).
+//
+// Zero wiring: it discovers variant sets straight from DialKit's documented store —
+// a `variant` select paired with a `finalize` action, either at a panel's top level
+// (the classic shell) or inside a folder (the Studio's one-folder-per-element layout).
+// Tabs drive DialStore.updateValue; Finalize fires the shell's own finalize action via
+// DialStore.triggerAction, so the decision path is identical to clicking it in the panel.
+//
+// Keys: 1..9 switch variants of the active set (ignored while typing).
+
+import { useEffect, useReducer, useState, type CSSProperties } from 'react'
+import { DialStore } from 'dialkit'
+import { vkStore, IS_PROD } from './vkStore'
+
+type Option = { value: string; label: string }
+
+interface VariantSet {
+  panelId: string
+  name: string
+  options: Option[]
+  active: string
+  variantPath: string
+  finalizePath: string
+}
+
+type ControlNode = {
+  type: string
+  path: string
+  label: string
+  children?: ControlNode[]
+  options?: (string | { value: string; label: string })[]
+}
+
+function setFrom(panelId: string, name: string, scope: ControlNode[], prefix: string, values: Record<string, unknown>): VariantSet | null {
+  const variantPath = prefix ? `${prefix}.variant` : 'variant'
+  const finalizePath = prefix ? `${prefix}.finalize` : 'finalize'
+  const variant = scope.find((c) => c.path === variantPath && c.type === 'select')
+  const finalize = scope.find((c) => c.path === finalizePath && c.type === 'action')
+  if (!variant || !finalize || !variant.options) return null
+  const options = variant.options.map((o) =>
+    typeof o === 'string' ? { value: o, label: o } : { value: o.value, label: o.label },
+  )
+  return { panelId, name, options, active: String(values[variantPath] ?? ''), variantPath, finalizePath }
+}
+
+function findVariantSets(): VariantSet[] {
+  const sets: VariantSet[] = []
+  for (const panel of DialStore.getPanels()) {
+    const controls = panel.controls as unknown as ControlNode[]
+    const root = setFrom(panel.id, panel.name, controls, '', panel.values)
+    if (root) sets.push(root)
+    // Studio layout: one folder per element, each with its own variant+finalize.
+    for (const c of controls) {
+      if (c.type !== 'folder' || !c.children) continue
+      const folder = setFrom(panel.id, c.label, c.children, c.path, panel.values)
+      if (folder) sets.push(folder)
+    }
+  }
+  return sets
+}
+
+function isTyping(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null
+  if (!el) return false
+  const tag = el.tagName
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable
+}
+
+const font = "system-ui, -apple-system, 'Segoe UI', sans-serif"
+
+const barStyle: CSSProperties = {
+  position: 'fixed',
+  bottom: 16,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 99998,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  padding: 4,
+  borderRadius: 12,
+  background: 'rgba(20, 20, 22, 0.92)',
+  backdropFilter: 'blur(12px)',
+  WebkitBackdropFilter: 'blur(12px)',
+  boxShadow: '0 12px 32px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.08)',
+  fontFamily: font,
+  fontSize: 12,
+  fontVariantNumeric: 'tabular-nums',
+  WebkitFontSmoothing: 'antialiased',
+  color: '#d4d4d8',
+  userSelect: 'none',
+}
+
+const tabStyle = (active: boolean): CSSProperties => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  padding: '6px 10px',
+  borderRadius: 8, // concentric: bar 12 - padding 4
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: font,
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1,
+  background: active ? 'rgba(255,255,255,0.14)' : 'transparent',
+  color: active ? '#fafafa' : '#a1a1aa',
+  transition: 'background-color 0.15s ease, color 0.15s ease',
+})
+
+const keyHintStyle: CSSProperties = {
+  fontSize: 10,
+  opacity: 0.55,
+  fontVariantNumeric: 'tabular-nums',
+}
+
+const dividerStyle: CSSProperties = {
+  width: 1,
+  height: 16,
+  background: 'rgba(255,255,255,0.12)',
+  margin: '0 2px',
+}
+
+export function VariantBar() {
+  const [, force] = useReducer((c: number) => c + 1, 0)
+  const [setIndex, setSetIndex] = useState(0)
+
+  // Re-render on panel add/remove and on value changes of every variant panel.
+  useEffect(() => DialStore.subscribeGlobal(force), [])
+  const sets = findVariantSets()
+  const panelKey = sets.map((s) => s.panelId + ':' + s.variantPath).join('|')
+  useEffect(() => {
+    const ids = Array.from(new Set(sets.map((s) => s.panelId)))
+    const unsubs = ids.map((id) => DialStore.subscribe(id, force))
+    return () => unsubs.forEach((u) => u())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [panelKey])
+
+  const current = sets[Math.min(setIndex, Math.max(sets.length - 1, 0))]
+
+  // Keyboard: 1..9 switch variants of the active set.
+  useEffect(() => {
+    if (!current) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.metaKey || e.ctrlKey || e.altKey || isTyping(e.target)) return
+      const n = Number(e.key)
+      if (!Number.isInteger(n) || n < 1 || n > current.options.length) return
+      DialStore.updateValue(current.panelId, current.variantPath, current.options[n - 1].value)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current?.panelId, current?.options.length])
+
+  if (IS_PROD || !current) return null
+
+  const comparing = vkStore.isCompare(current.name)
+
+  return (
+    <div style={barStyle}>
+      {sets.length > 1 && (
+        <button
+          style={{ ...tabStyle(false), fontWeight: 600, color: '#fafafa' }}
+          title="Switch variant set"
+          onClick={() => setSetIndex((i) => (i + 1) % sets.length)}
+        >
+          {current.name} ▾
+        </button>
+      )}
+      {sets.length > 1 && <div style={dividerStyle} />}
+      {current.options.map((o, i) => (
+        <button
+          key={o.value}
+          style={tabStyle(o.value === current.active)}
+          onClick={() => DialStore.updateValue(current.panelId, current.variantPath, o.value)}
+        >
+          <span style={keyHintStyle}>{i + 1}</span>
+          {o.label}
+        </button>
+      ))}
+      <div style={dividerStyle} />
+      <button
+        style={tabStyle(comparing)}
+        title="Compare all variants side by side"
+        onClick={() => vkStore.toggleCompare(current.name)}
+      >
+        Compare
+      </button>
+      <button
+        style={{
+          ...tabStyle(false),
+          background: '#fafafa',
+          color: '#18181b',
+          fontWeight: 600,
+        }}
+        title="Finalize this variant — writes the decision for your agent"
+        onClick={() => DialStore.triggerAction(current.panelId, current.finalizePath)}
+      >
+        Finalize
+      </button>
+    </div>
+  )
+}
+
+export default VariantBar

package/variantkit/react/VariantStage.tsx

@@ -0,0 +1,92 @@
+'use client'
+// VariantStage — renders the active variant normally, or ALL variants in a live
+// side-by-side grid when compare mode is on (toggled from VariantBar). Every cell
+// reacts to panel tweaks in real time; clicking a cell selects that variant.
+//
+// The shell renders it in place of the bare <Active/>:
+//
+//   <VariantStage name="PricingCard" registry={registry} active={String(v.variant)}
+//     props={variantProps} />
+//
+// Lives only in the shell, so it prunes away with the rest of the wiring.
+
+import { useEffect, useReducer, type ComponentType, type CSSProperties } from 'react'
+import { DialStore } from 'dialkit'
+import { vkStore, IS_PROD } from './vkStore'
+
+const font = "system-ui, -apple-system, 'Segoe UI', sans-serif"
+
+const gridStyle: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+  gap: 24,
+  alignItems: 'start',
+  width: '100%',
+}
+
+const cellStyle = (active: boolean): CSSProperties => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  padding: 12,
+  borderRadius: 14,
+  cursor: 'pointer',
+  outline: active ? '2px solid #18181b' : '1px solid rgba(0,0,0,0.08)',
+  outlineOffset: 2,
+  transition: 'outline-color 0.15s ease',
+})
+
+const captionStyle = (active: boolean): CSSProperties => ({
+  fontFamily: font,
+  fontSize: 12,
+  fontWeight: active ? 600 : 500,
+  color: active ? '#18181b' : '#71717a',
+  WebkitFontSmoothing: 'antialiased',
+})
+
+function selectVariant(name: string, key: string): void {
+  const panel = DialStore.getPanels().find(
+    (p) => p.name === name && p.controls.some((c) => c.path === 'variant' && c.type === 'select'),
+  )
+  if (panel) DialStore.updateValue(panel.id, 'variant', key)
+}
+
+export function VariantStage<P extends object>({
+  name,
+  registry,
+  active,
+  props,
+}: {
+  name: string
+  registry: Record<string, { component: ComponentType<P>; label: string }>
+  active: string
+  props: P
+}) {
+  const [, force] = useReducer((c: number) => c + 1, 0)
+  useEffect(() => vkStore.subscribe(force), [])
+
+  const entries = Object.entries(registry)
+  const comparing = !IS_PROD && vkStore.isCompare(name)
+
+  if (!comparing) {
+    const Active = registry[active]?.component
+    return Active ? <Active {...props} /> : null
+  }
+
+  return (
+    <div style={gridStyle}>
+      {entries.map(([key, { component, label }]) => {
+        const C = component
+        const isActive = key === active
+        return (
+          <div key={key} style={cellStyle(isActive)} onClick={() => selectVariant(name, key)}>
+            <span style={captionStyle(isActive)}>{label}</span>
+            <C {...props} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default VariantStage

package/variantkit/react/vkStore.ts

@@ -0,0 +1,38 @@
+// Tiny module-level store shared by VariantBar and VariantStage (same import instance
+// inside the project). Tracks which variant sets are in compare mode.
+
+type Listener = () => void
+
+const compare = new Set<string>()
+const listeners = new Set<Listener>()
+
+function emit(): void {
+  for (const l of listeners) l()
+}
+
+export const vkStore = {
+  isCompare(name: string): boolean {
+    return compare.has(name)
+  },
+  toggleCompare(name: string): void {
+    if (compare.has(name)) compare.delete(name)
+    else compare.add(name)
+    emit()
+  },
+  subscribe(l: Listener): () => void {
+    listeners.add(l)
+    return () => listeners.delete(l)
+  },
+}
+
+// Production guard shared by the dev chrome. Vite/Next statically replace
+// process.env.NODE_ENV; plain browsers without `process` land in the catch.
+export const IS_PROD: boolean = (() => {
+  try {
+    // @ts-ignore -- `process` may be untyped in browser-only projects; bundlers
+    // statically replace process.env.NODE_ENV so the prod check still inlines.
+    return process.env.NODE_ENV === 'production'
+  } catch {
+    return false
+  }
+})()

package/variantkit/react.tsx

@@ -0,0 +1,234 @@
+// VariantKit React helper — one reusable component instead of hand-writing a studio per
+// project. Folds N elements into ONE DialKit panel (a folder each), routes each element's
+// finalize, and optionally focuses the folder of the element you hover (panel-side only —
+// nothing is ever drawn over the project's UI).
+//
+//   import { Studio } from './variantkit/react'
+//   <Studio elements={[
+//     { name: 'Hero', keys: ['centered','split','minimal'],
+//       controls: { headline: 'Ship faster', align: { type: 'select', options: ['left','center'], default: 'left' } },
+//       render: (variant, v) => <Hero .../> },
+//   ]} focusOnHover />
+//
+// `controls` is authored per element by whoever builds it — any controls DialKit supports
+// (slider, select, toggle, color, text, spring, nested folders…), with defaults taken from
+// the project's own design system. VariantKit only adds the variant select (when there are
+// 2+ variants) and the finalize action.
+//
+// Requires <DialRoot/> mounted once in the app root (DialKit), plus dialkit/styles.css and
+// (recommended) ./dialkit-clean.css.
+import { useEffect, useRef, useState, type ReactElement, type ReactNode } from 'react'
+import { motion, MotionConfig } from 'motion/react'
+import { useDialKit } from 'dialkit'
+import { panelConfig, defaultsOf, regOf, type PanelConfig } from './configs'
+import { buildDecision, submitDecision, type ParamValue } from './buildDecision'
+
+export interface ElementDef {
+  /** Component name — becomes the folder title and the decision's component. */
+  name: string
+  /** Variant keys. A single key renders no variant dropdown — just the controls. */
+  keys: string[]
+  /**
+   * The element's own controls — contextual, authored for THIS element (any DialKit control:
+   * slider, select, boolean toggle, color, text, spring, nested folder groups…). VariantKit
+   * adds `variant` + `finalize` around them; it never decides what these are.
+   */
+  controls?: PanelConfig
+  /** Render the active variant from its resolved values. */
+  render: (variant: string, values: Record<string, ParamValue>) => ReactNode
+  /** Optional full config override (replaces the assembled variant+controls+finalize). */
+  config?: PanelConfig
+}
+
+export interface StudioProps {
+  elements: ElementDef[]
+  /** Panel title. */
+  name?: string
+  /** Expand the panel folder of the element you hover (panel-side only; no overlay on the UI). */
+  focusOnHover?: boolean
+  /** Called after an element is finalized (decision already submitted/copied). */
+  onFinalize?: (decision: ReturnType<typeof buildDecision>) => void
+}
+
+const cfgFor = (e: ElementDef): PanelConfig =>
+  e.config ?? panelConfig(e.controls ?? {}, e.keys, { component: e.name })
+
+// Match DialKit's humanized folder title ("Pricing Card") back to an element name.
+const norm = (s: string) => s.replace(/\s+/g, '').toLowerCase()
+
+function focusFolder(name: string | null) {
+  if (!name) return
+  // NEVER touch the root folder — clicking its header collapses the whole panel. Only the
+  // per-element folders (the ones with a title) are toggled.
+  document.querySelectorAll('.dialkit-folder:not(.dialkit-folder-root)').forEach((f) => {
+    const title = f.querySelector('.dialkit-folder-title')?.textContent?.trim()
+    if (!title) return
+    const header = f.querySelector<HTMLElement>('.dialkit-folder-header')
+    if (!header) return
+    const expanded = !!f.querySelector('.dialkit-folder-content')
+    const shouldExpand = norm(title) === norm(name)
+    if (shouldExpand && !expanded) header.click()
+    else if (!shouldExpand && expanded) header.click()
+  })
+}
+
+export function Studio({ elements, name = 'VariantKit', focusOnHover, onFinalize }: StudioProps) {
+  const [focused, setFocused] = useState<string | null>(null)
+  const elsRef = useRef(elements)
+  elsRef.current = elements
+
+  // One combined config: a folder per element, first open and the rest collapsed. The
+  // finalize button's "✓ Copied" feedback is handled inside copyDecision (panel-side, no
+  // overlay), so the label stays a plain "Finalize <name>" here.
+  const combined: Record<string, unknown> = {}
+  elements.forEach((e, i) => {
+    const base = cfgFor(e)
+    const finalize = { ...(base.finalize as object), label: `Finalize ${e.name}` }
+    combined[e.name] = { ...base, finalize, _collapsed: i !== 0 }
+  })
+
+  const all = useDialKit(name, combined as never, {
+    onAction: (path: string) => {
+      const elName = path.split('.')[0]
+      const e = elsRef.current.find((x) => x.name === elName)
+      if (!e) return
+      const slice = (all as Record<string, Record<string, ParamValue>>)[elName]
+      const decision = buildDecision(elName, slice, defaultsOf(cfgFor(e)), regOf(e.keys))
+      // Dev transport first ("✓ Saved" -> .variantkit/decisions/), clipboard fallback ("✓ Copied").
+      submitDecision(decision)
+      onFinalize?.(decision)
+    },
+  }) as Record<string, Record<string, ParamValue>>
+
+  useEffect(() => {
+    if (focusOnHover) focusFolder(focused)
+  }, [focused, focusOnHover])
+
+  // Render the elements as-is — VariantKit adds no layout, spacing, alignment, rings, or
+  // badges around the project's UI. The host page owns presentation entirely.
+  return (
+    <MotionConfig reducedMotion="user">
+      {elements.map((e) => {
+        const slice = all[e.name]
+        if (!slice) return null
+        const variant = e.keys.length > 1 ? String(slice.variant) : e.keys[0]
+        return (
+          <section
+            key={e.name}
+            className="vk-section"
+            onMouseEnter={focusOnHover ? () => setFocused(e.name) : undefined}
+            style={{ display: 'contents' }}
+          >
+            {/* Variant switch is frequent → keep the settle tiny and fast. (This div is the
+                only wrapper box VariantKit adds; it carries zero styling of its own.) */}
+            <motion.div
+              key={variant}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.18, ease: [0.23, 1, 0.32, 1] }}
+            >
+              {e.render(variant, slice) as ReactElement}
+            </motion.div>
+          </section>
+        )
+      })}
+    </MotionConfig>
+  )
+}
+
+// ── Panel theme toggle ──────────────────────────────────────────────────────────────────
+// DialKit ships light only; this manages the panel's light/dark theme AND injects a small
+// sun/moon toggle into the panel header (DialKit has no slot for it, so we append one).
+// Requires dialkit-dark.css imported. Returns { theme, setTheme } if you also want a custom UI.
+
+const MOON =
+  '<svg class="vk-swap" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
+const SUN =
+  '<svg class="vk-swap" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>'
+
+export function useDialkitTheme(initial: 'light' | 'dark' = 'light') {
+  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+    try {
+      const s = localStorage.getItem('vk-theme')
+      if (s === 'light' || s === 'dark') return s
+    } catch {
+      /* no storage */
+    }
+    return initial
+  })
+  const themeRef = useRef(theme)
+  themeRef.current = theme
+
+  useEffect(() => {
+    const flip = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))
+
+    // The actual DOM work. Guarded two ways so it can NEVER cause a runaway observer loop:
+    // (1) it only writes when something actually differs, (2) the observer is paused around
+    // these writes (see below) so our own mutations don't retrigger it.
+    const sync = () => {
+      document.querySelectorAll('.dialkit-root').forEach((el) => {
+        if (el.getAttribute('data-theme') !== themeRef.current) el.setAttribute('data-theme', themeRef.current)
+      })
+      document.querySelectorAll<HTMLElement>('.dialkit-panel-header').forEach((hdr) => {
+        const titleRow = hdr.querySelector<HTMLElement>('.dialkit-folder-header-top') ?? hdr
+        // Keep exactly one toggle (hot-reload can leave a stale node behind).
+        const existing = titleRow.querySelectorAll<HTMLButtonElement>('.vk-theme-toggle')
+        for (let i = 1; i < existing.length; i++) existing[i].remove()
+        let btn = existing[0] ?? null
+        if (!btn) {
+          btn = document.createElement('button')
+          // Absolute, just left of DialKit's settings icon (which is absolute at right:12).
+          btn.className = 'vk-theme-toggle'
+          btn.type = 'button'
+          btn.setAttribute('aria-label', 'Toggle panel theme')
+          const stop = (e: Event) => e.stopPropagation()
+          btn.addEventListener('pointerdown', stop)
+          btn.addEventListener('mousedown', stop)
+          btn.addEventListener('click', (e) => {
+            e.stopPropagation()
+            flip()
+          })
+          titleRow.appendChild(btn)
+        }
+        if (btn.dataset.vkTheme !== themeRef.current) {
+          btn.dataset.vkTheme = themeRef.current
+          btn.innerHTML = themeRef.current === 'dark' ? SUN : MOON // fresh <svg class="vk-swap"> animates in
+        }
+      })
+    }
+
+    // Coalesce mutation bursts into one sync per frame, and pause the observer while WE write,
+    // so our own DOM changes can't re-trigger it. Belt and suspenders against the freeze.
+    let frame = 0
+    const mo = new MutationObserver(() => {
+      if (frame) return
+      frame = requestAnimationFrame(() => {
+        frame = 0
+        mo.disconnect()
+        sync()
+        mo.observe(document.body, { childList: true, subtree: true })
+      })
+    })
+
+    // Delightful theme switch: add `.vk-theming` so the panel cross-fades its colors (the
+    // class scopes a transition that only exists during the switch — see motion.css), then
+    // flip the value via sync(). First mount sets the same value, so nothing animates.
+    const panels = document.querySelectorAll('.dialkit-root')
+    panels.forEach((p) => p.classList.add('vk-theming'))
+    sync()
+    const settle = setTimeout(() => panels.forEach((p) => p.classList.remove('vk-theming')), 420)
+    mo.observe(document.body, { childList: true, subtree: true })
+    try {
+      localStorage.setItem('vk-theme', theme)
+    } catch {
+      /* no storage */
+    }
+    return () => {
+      if (frame) cancelAnimationFrame(frame)
+      clearTimeout(settle)
+      mo.disconnect()
+    }
+  }, [theme])
+
+  return { theme, setTheme }
+}