@pilotiq/pilotiq 0.23.1 → 0.24.2

package/src/react/schemaRenderer/table/formatCell.tsx

@@ -1,264 +0,0 @@
-import React, { useState } from 'react'
-import { CheckIcon, CircleIcon, CopyIcon } from 'lucide-react'
-import type { ElementMeta } from '../../../schema/Element.js'
-import {
-  BADGE_COLOR_CLASSES,
-  COLUMN_COLOR_CLASSES,
-  COLUMN_WEIGHT_CLASSES,
-} from '../constants.js'
-import { resolveIcon } from '../helpers.js'
-import { applyColumnFormat } from '../columnFormat.js'
-
-// ─── Table cell rendering ───────────────────────────────────
-//
-// `formatCell` is the column-type dispatch (text / badge / icon /
-// image / color + array variants). `wrapCell` and `wrapCellList`
-// apply the shared text chrome (color / weight / tooltip / line-clamp /
-// wrap / copy-to-clipboard) so every column-type path stays consistent.
-
-/** Render a cell. Honors the column's `columnType` (badge/icon/boolean/
- * image), built-in `format` spec, and per-row `_formatted[name]`
- * overrides from server-side `formatStateUsing` callbacks. */
-export function formatCell(
-  value: unknown,
-  col?:  ElementMeta,
-  row?:  Record<string, unknown>,
-): React.ReactNode {
-  if (col === undefined) {
-    // Legacy raw-value fallback for non-column callsites.
-    if (value === null || value === undefined) return <span className="text-muted-foreground">—</span>
-    if (value instanceof Date)               return value.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
-    if (typeof value === 'boolean')          return value ? 'Yes' : 'No'
-    if (typeof value === 'object')           return JSON.stringify(value)
-    return String(value)
-  }
-
-  const columnType = String(col['columnType'] ?? 'text')
-  const fallback   = (col['default'] as string | undefined)
-
-  // Per-row server-eval result wins over everything.
-  const colName    = String(col['name'] ?? '')
-  const formatted  = (row?.['_formatted'] as Record<string, string> | undefined)?.[colName]
-  const richtext   = (row?.['_richtextCells'] as Record<string, true> | undefined)?.[colName] === true
-  const isBlank    = value === null || value === undefined || value === ''
-
-  if (formatted !== undefined && formatted !== '') {
-    return wrapCell(formatted, col, richtext)
-  }
-  if (isBlank) {
-    return <span className="text-muted-foreground">{fallback ?? '—'}</span>
-  }
-
-  switch (columnType) {
-    case 'badge': {
-      const map  = (col['badgeColors'] as Record<string, string> | undefined) ?? {}
-      const color = map[String(value)] ?? 'gray'
-      const cls  = BADGE_COLOR_CLASSES[color] ?? BADGE_COLOR_CLASSES['gray']
-      return (
-        <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>
-          {String(value)}
-        </span>
-      )
-    }
-    case 'icon':
-    case 'boolean': {
-      const map  = (col['iconOptions'] as Record<string, { icon: string; color?: string }> | undefined) ?? {}
-      const opt  = map[String(value)]
-      if (!opt) return <span className="text-muted-foreground">—</span>
-      const Icon = resolveIcon(opt.icon) ?? CircleIcon
-      const colorClass = opt.color ? (COLUMN_COLOR_CLASSES[opt.color] ?? '') : ''
-      return <Icon className={`size-4 inline ${colorClass}`} aria-label={String(value)} />
-    }
-    case 'image': {
-      const url = String(value)
-      const size = (col['imageSize'] as number | undefined) ?? 32
-      const shape = col['imageShape'] === 'circle' ? 'rounded-full' : 'rounded-md'
-      return (
-        <img
-          src={url}
-          alt=""
-          width={size}
-          height={size}
-          className={`${shape} object-cover`}
-        />
-      )
-    }
-    case 'color': {
-      const css = String(value)
-      const shape = col['colorShape'] as 'rounded' | 'square' | 'circle' | undefined
-      const shapeClass =
-        shape === 'circle' ? 'rounded-full' :
-        shape === 'square' ? 'rounded-none' : 'rounded'
-      const hideValue = col['colorHideValue'] === true
-      return (
-        <span className="inline-flex items-center gap-2">
-          <span
-            className={`size-4 border border-border ${shapeClass}`}
-            style={{ backgroundColor: css }}
-            aria-hidden="true"
-          />
-          {!hideValue && <span className="text-sm">{css}</span>}
-        </span>
-      )
-    }
-    default: {
-      // Array-valued cells — `bulleted()` wins over `listWithLineBreaks()`
-      // when both are set. Falls through to the standard string path for
-      // non-array values so the per-cell formatters keep working.
-      if (Array.isArray(value)) {
-        const items = value.map(v => String(v))
-        if (col['bulleted'] === true) {
-          return wrapCellList(items, col, 'bulleted')
-        }
-        if (col['listWithLineBreaks'] === true) {
-          return wrapCellList(items, col, 'lines')
-        }
-        // Bare array — comma-join (matches the existing legacy fallback).
-        return wrapCell(items.join(', '), col)
-      }
-      // Text column — apply built-in format, then wrapper.
-      const fmt = col['format'] as { kind: string; [k: string]: unknown } | undefined
-      const display = fmt ? applyColumnFormat(value, fmt) : String(value)
-      return wrapCell(display, col)
-    }
-  }
-}
-
-/** Apply text-rendering chrome (color, weight, line-clamp, wrap, tooltip)
- * to a stringified cell value. Used by the text and per-row formatter
- * paths so styling stays consistent. When `asHtml` is true the content
- * is server-rendered HTML (e.g. from the registered richtext renderer)
- * and gets injected via `dangerouslySetInnerHTML`. */
-function wrapCell(content: string, col: ElementMeta, asHtml = false): React.ReactNode {
-  const color    = col['color']    as string | undefined
-  const weight   = col['weight']   as string | undefined
-  const tooltip  = col['tooltip']  as string | undefined
-  const wrapping = Boolean(col['wrap'])
-  const clamp    = col['lineClamp'] as number | undefined
-  const copyMsg  = col['copyMessage'] as string | undefined
-
-  const colorCls   = color  ? (COLUMN_COLOR_CLASSES[color]  ?? '') : ''
-  const weightCls  = weight ? (COLUMN_WEIGHT_CLASSES[weight] ?? '') : ''
-  const wrapCls    = wrapping ? 'whitespace-normal' : ''
-  const clampStyle = clamp !== undefined
-    ? { display: '-webkit-box', WebkitLineClamp: String(clamp), WebkitBoxOrient: 'vertical' as const, overflow: 'hidden' }
-    : undefined
-
-  const valueNode = asHtml
-    ? (
-        <span
-          className={`prose prose-sm max-w-none dark:prose-invert ${colorCls} ${weightCls} ${wrapCls}`.trim()}
-          title={tooltip}
-          style={clampStyle}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-      )
-    : (
-        <span
-          className={`${colorCls} ${weightCls} ${wrapCls}`.trim()}
-          title={tooltip}
-          style={clampStyle}
-        >
-          {content}
-        </span>
-      )
-
-  if (copyMsg === undefined) return valueNode
-
-  // Copy-to-clipboard trigger — copies the rendered text. For richtext
-  // cells the underlying source isn't separately stamped on the wire
-  // (would double the row payload), so the rendered HTML is what gets
-  // copied; admins comfortable with HTML still get something usable.
-  return (
-    <span className="inline-flex items-center gap-1.5">
-      {valueNode}
-      <CellCopyButton text={content} label={copyMsg} />
-    </span>
-  )
-}
-
-/** Tabular-list rendering used by `Column.bulleted()` /
- * `Column.listWithLineBreaks()`. `mode='bulleted'` mounts a `<ul>` with
- * bullet markers; `mode='lines'` separates entries with `<br>`. Both
- * inherit the same color / weight / wrap / tooltip / clamp chrome as
- * the text path. Empty arrays fall through to the muted dash. */
-function wrapCellList(
-  items: string[],
-  col:   ElementMeta,
-  mode:  'bulleted' | 'lines',
-): React.ReactNode {
-  if (items.length === 0) {
-    const fallback = (col['default'] as string | undefined) ?? '—'
-    return <span className="text-muted-foreground">{fallback}</span>
-  }
-  const color    = col['color']   as string | undefined
-  const weight   = col['weight']  as string | undefined
-  const tooltip  = col['tooltip'] as string | undefined
-
-  const colorCls   = color  ? (COLUMN_COLOR_CLASSES[color]  ?? '') : ''
-  const weightCls  = weight ? (COLUMN_WEIGHT_CLASSES[weight] ?? '') : ''
-
-  if (mode === 'bulleted') {
-    return (
-      <ul
-        className={`list-disc pl-4 space-y-0.5 ${colorCls} ${weightCls}`.trim()}
-        title={tooltip}
-      >
-        {items.map((s, i) => <li key={i}>{s}</li>)}
-      </ul>
-    )
-  }
-  return (
-    <span
-      className={`${colorCls} ${weightCls}`.trim()}
-      title={tooltip}
-    >
-      {items.map((s, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && <br />}
-          {s}
-        </React.Fragment>
-      ))}
-    </span>
-  )
-}
-
-/** Slim copy-to-clipboard button used by `Column.copyMessage()`. The
- * label doubles as the toast text. Mirrors `EntryCopyButton`'s shape
- * but compact enough to live inline next to a cell value. */
-function CellCopyButton({ text, label }: { text: string; label: string }): React.ReactNode {
-  const [copied, setCopied] = useState(false)
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    if (typeof navigator !== 'undefined' && navigator.clipboard) {
-      navigator.clipboard.writeText(text).then(() => {
-        setCopied(true)
-        setTimeout(() => setCopied(false), 1500)
-      }).catch(() => { /* ignore — older browser / permission denied */ })
-    }
-  }
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      aria-label={copied ? label : 'Copy'}
-      title={copied ? label : 'Copy'}
-      data-no-row-nav
-      className="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted"
-    >
-      {copied ? <CheckIcon className="size-3" /> : <CopyIcon className="size-3" />}
-    </button>
-  )
-}
-
-/** Resolve a stable row identifier — prefers the row's `id` field, falls
- *  back to the row index for rows missing one. Used as the React key
- *  in table bodies and as the `:id` substitution for row actions. */
-export function rowId(row: unknown, index: number): string {
-  if (row && typeof row === 'object' && 'id' in row) {
-    const id = (row as { id?: unknown }).id
-    if (id !== undefined && id !== null) return String(id)
-  }
-  return String(index)
-}

package/src/react/schemaRenderer/table/links.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import type { NavigateFn } from '../../navigate.js'
-
-// ─── Inline link chrome ─────────────────────────────────────
-//
-// Three small chrome components used by the table body:
-//   - RecordCellLink wraps each row-data cell in a real <a href> so
-//     cmd-click / right-click "open in new tab" works; plain clicks
-//     SPA-nav via useNavigate.
-//   - ActiveGroupKeyChip surfaces the current `?groupKey=` drill-in
-//     state above the table with an × that clears it.
-//   - GroupHeadingLink turns a banded group's heading into a clickable
-//     drill-in trigger when the group is scopable.
-
-/**
- * Modifier-aware SPA-nav click handler. Plain left-click intercepts to
- * `navigate(href)`; cmd / ctrl / shift / alt-click and middle-click
- * fall through to the browser so "open in new tab" / "save link as"
- * semantics keep working on every real `<a href>` in the table body.
- */
-export function useSpaNavClick(
-  href:     string,
-  navigate: NavigateFn,
-): (e: React.MouseEvent<HTMLAnchorElement>) => void {
-  return (e) => {
-    if (e.button !== 0) return
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
-    e.preventDefault()
-    void navigate(href)
-  }
-}
-
-export function RecordCellLink({
-  href, navigate, children,
-}: {
-  href:     string
-  navigate: NavigateFn
-  children: React.ReactNode
-}) {
-  const onClick = useSpaNavClick(href, navigate)
-  return (
-    <a
-      href={href}
-      onClick={onClick}
-      className="block px-2 py-2 text-inherit no-underline hover:text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
-    >
-      {children}
-    </a>
-  )
-}
-
-/**
- * "Drilled into <Label>: <Value>" chip above the table when a group
- * heading has been clicked. The × clears `?<prefix>groupKey=`, returning
- * the table to its banded view. Real `<a href>` with `useNavigate()`
- * intercept on plain left-click so cmd-click / middle-click open a
- * fresh tab (rare but valid for sharing the banded view URL).
- */
-export function ActiveGroupKeyChip({
-  label, value, displayValue, clearHref, navigate,
-}: {
-  label:        string
-  value:        string
-  displayValue: string
-  clearHref:    string
-  navigate:     NavigateFn
-}) {
-  const onClick = useSpaNavClick(clearHref, navigate)
-  return (
-    <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm">
-      <span className="text-muted-foreground">Drilled into</span>
-      <span className="font-medium text-foreground">
-        {label ? `${label}: ` : ''}{displayValue || value}
-      </span>
-      <a
-        href={clearHref}
-        onClick={onClick}
-        aria-label="Clear drill-in"
-        className="ms-auto text-muted-foreground hover:text-foreground"
-      >
-        ×
-      </a>
-    </div>
-  )
-}
-
-/**
- * Group-heading text wrapped in a real `<a href>` that SPA-navs into the
- * drilled-in URL. Plain left-click intercepts for `useNavigate()`;
- * cmd/ctrl/shift-click + middle-click fall through to the browser so
- * "open in new tab" semantics work. Visually inherits the heading
- * styling — the link adds underline-on-hover affordance without
- * disturbing the surrounding text-transform / size.
- */
-export function GroupHeadingLink({
-  href, navigate, children,
-}: {
-  href:     string
-  navigate: NavigateFn
-  children: React.ReactNode
-}) {
-  const onClick = useSpaNavClick(href, navigate)
-  return (
-    <a
-      href={href}
-      onClick={onClick}
-      className="inline-flex items-center gap-1 text-inherit no-underline hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
-    >
-      {children}
-    </a>
-  )
-}

package/src/react/schemaRenderer/table/renderRowActions.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import type { ElementMeta } from '../../../schema/Element.js'
-import type { RenderActionOptions } from '../action/buttons.js'
-
-// ─── Row-action chrome ──────────────────────────────────────
-//
-// Inline action strip mounted in the trailing cell of each table row.
-// Per-row visibility and disabled state come from the server-side eval
-// inside `dispatchTable` (`_visibleActions` / `_disabledActions` keys on
-// the row); we just consume the stamped allow/disallow sets here.
-//
-// The dispatch (link / fetch+JSON / modal / confirm) lives on the
-// action layer — `renderActionLike` is injected to keep the cycle
-// between this module and `SchemaRenderer.tsx`'s top-level dispatch
-// clean.
-
-type RenderActionLike = (el: ElementMeta, index: number, opts?: RenderActionOptions) => React.ReactNode
-
-/**
- * Render row actions inline. Each Action becomes a small button next to
- * the others; an `ActionGroup` placed in row position keeps its dropdown
- * via `ActionGroupTrigger` (the dropdown UX is opt-in via grouping, not
- * a default). The `:id` substitution comes from `opts.ids = [rowId]`.
- */
-export function renderRowActions(
-  rowId:            string,
-  rowRecord:        Record<string, unknown> | undefined,
-  actions:          ElementMeta[],
-  renderActionLike: RenderActionLike,
-): React.ReactNode {
-  const rowVisibleSet  = new Set((rowRecord?.['_visibleActions']  as string[] | undefined) ?? [])
-  const rowDisabledSet = new Set((rowRecord?.['_disabledActions'] as string[] | undefined) ?? [])
-
-  const visible = actions.filter(a => {
-    if (!a['conditional']) return true
-    return rowVisibleSet.has(String(a['name'] ?? ''))
-  })
-
-  const decorate = (a: ElementMeta): ElementMeta => {
-    const name = String(a['name'] ?? '')
-    if (rowDisabledSet.has(name)) {
-      return { ...a, disabled: true }
-    }
-    return a
-  }
-
-  return (
-    <div className="flex items-center justify-end gap-1">
-      {visible.map((a, i) => renderActionLike(decorate(a), i, { ids: [rowId], size: 'sm' }))}
-    </div>
-  )
-}

package/src/react/schemaRenderer/table/url.tsx

@@ -1,143 +0,0 @@
-import React from 'react'
-import type { NavigateFn } from '../../navigate.js'
-
-// ─── Table URL helpers ──────────────────────────────────────
-//
-// The table renderer mirrors its current sort / search / page / group
-// state to the URL query string. These helpers build / parse / dedupe
-// that slice without dragging the server-side dispatcher into the
-// client bundle.
-
-export interface TableUrlState {
-  search?: string
-  sort?:   { column: string; direction: 'asc' | 'desc' }
-  page?:   number
-  /** Active group column for `?group=`. Empty string means an explicit
-   * "no grouping" override (set on the URL when the user picks "None"
-   * in the dropdown to override `defaultGroup`); `undefined` omits the
-   * key entirely so the configured default takes over. */
-  group?:  string
-  /** Drilled-in group key for `?groupKey=`. `undefined` omits — the
-   * heading is banded (or no group at all); empty string explicitly
-   * clears (used by the chip's × so a stale URL value doesn't return
-   * via foreign-param round-trip). */
-  groupKey?: string
-}
-
-// Mirror of `prefixedKey` in `elements/dispatchTable.ts`. Kept inline so
-// SchemaRenderer doesn't drag the server-side dispatcher into the client
-// bundle.
-export function prefixK(prefix: string | undefined, key: string): string {
-  return prefix === undefined || prefix === '' ? key : `${prefix}_${key}`
-}
-
-let cachedSearchString: string | null = null
-let cachedSearchParams: URLSearchParams | null = null
-
-export function getCurrentSearchParams(): URLSearchParams | null {
-  if (typeof window === 'undefined') return null
-  const s = window.location.search
-  if (s === cachedSearchString && cachedSearchParams) return cachedSearchParams
-  cachedSearchString = s
-  cachedSearchParams = new URLSearchParams(s)
-  return cachedSearchParams
-}
-
-export function SearchFormHiddenInputs({ prefix }: { prefix: string | undefined }): React.ReactElement {
-  const sp = getCurrentSearchParams()
-  if (!sp) return <></>
-  const searchKey = prefixK(prefix, 'search')
-  const pageKey = prefixK(prefix, 'page')
-  const inputs: React.ReactElement[] = []
-  let i = 0
-  for (const [k, v] of sp) {
-    if (k === searchKey || k === pageKey) continue
-    inputs.push(<input key={i++} type="hidden" name={k} value={v} />)
-  }
-  return <>{inputs}</>
-}
-
-export function buildTableQuery(
-  state:        TableUrlState,
-  override:     TableUrlState,
-  pathname:     string,
-  filterValues: Record<string, string> = {},
-  prefix?:      string,
-): string {
-  const merged: TableUrlState = { ...state, ...override }
-  const params = new URLSearchParams()
-  // Foreign URL params (other tables' state, app-level params) round-trip
-  // verbatim so this builder only ever rewrites its own slice.
-  const currentParams = getCurrentSearchParams()
-  if (currentParams) {
-    const ours = new Set([
-      prefixK(prefix, 'search'),
-      prefixK(prefix, 'sort'),
-      prefixK(prefix, 'page'),
-      prefixK(prefix, 'perPage'),
-      prefixK(prefix, 'group'),
-      prefixK(prefix, 'groupKey'),
-      ...Object.keys(filterValues).map(n => prefixK(prefix, n)),
-    ])
-    for (const [k, v] of currentParams) {
-      if (ours.has(k)) continue
-      params.set(k, v)
-    }
-  }
-  // Carry forward active filter values so sort/pagination links don't
-  // accidentally clear them. Filter names can't collide with reserved
-  // keys (search/sort/page/perPage/group) — that's enforced upstream.
-  for (const [name, val] of Object.entries(filterValues)) {
-    if (val) params.set(prefixK(prefix, name), val)
-  }
-  if (merged.search)    params.set(prefixK(prefix, 'search'), merged.search)
-  if (merged.sort)      params.set(prefixK(prefix, 'sort'), `${merged.sort.column}:${merged.sort.direction}`)
-  if (merged.page && merged.page > 1) params.set(prefixK(prefix, 'page'), String(merged.page))
-  if (merged.group !== undefined) params.set(prefixK(prefix, 'group'), merged.group)
-  // groupKey is sparse — only writes when the override sets a non-empty
-  // value. Drill-out (chip ×) passes `''` to clear; the foreign-param
-  // dedupe set above already filtered the stale value out, so an empty
-  // override produces a URL without the key.
-  if (merged.groupKey) params.set(prefixK(prefix, 'groupKey'), merged.groupKey)
-  const qs = params.toString()
-  // Always anchor to a real pathname — Vike's client-side router treats
-  // a bare `?qs` href as a fresh URL with empty pathname, which routes
-  // to the dashboard and blanks the page during SPA navigation.
-  const base = pathname || (typeof window !== 'undefined' ? window.location.pathname : '')
-  return qs ? `${base}?${qs}` : (base || '#')
-}
-
-/**
- * SPA-navigate to the current URL with the filter slice patched in
- * place. `null` or empty-string values delete the key; non-empty values
- * set it. The accompanying `?page` is always cleared so users land on
- * the first page of the relaxed / tightened set. No-op on SSR.
- *
- * Used by every filter widget's "apply" / "clear" path (FilterSelect /
- * MultiSelect / DateRange / Form / QueryBuilder + ActiveFiltersBar).
- */
-export function patchFilterUrl(
-  navigate: NavigateFn,
-  prefix:   string | undefined,
-  patches:  Record<string, string | null>,
-): void {
-  if (typeof window === 'undefined') return
-  const url = new URL(window.location.href)
-  for (const [name, value] of Object.entries(patches)) {
-    const k = prefixK(prefix, name)
-    if (value === null || value === '') url.searchParams.delete(k)
-    else                                 url.searchParams.set(k, value)
-  }
-  url.searchParams.delete(prefixK(prefix, 'page'))
-  void navigate(url.pathname + url.search)
-}
-
-export function nextSortDir(
-  current: TableUrlState['sort'],
-  column:  string,
-): { column: string; direction: 'asc' | 'desc' } {
-  if (current?.column === column) {
-    return { column, direction: current.direction === 'asc' ? 'desc' : 'asc' }
-  }
-  return { column, direction: 'asc' }
-}

package/src/react/theme-preview/apply.ts

@@ -1,99 +0,0 @@
-import { resolveTheme } from '../../theme/resolve.js'
-import { generateThemeCSS } from '../../theme/generate-css.js'
-import type { ThemeConfig } from '../../theme/types.js'
-
-const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
-
-// Fontshare overrides for fonts not on Google Fonts.
-const FONTSHARE_URLS: Record<string, string> = {
-  Satoshi: 'https://api.fontshare.com/v2/css?f[]=satoshi@300,500,700&display=swap',
-}
-
-export function fontStylesheetUrl(family: string): string {
-  return FONTSHARE_URLS[family]
-    ?? `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, '+')}:wght@400;500;600;700&display=swap`
-}
-
-/** Apply theme to parent page immediately — updates the <style> tag AND inline styles. */
-export function applyToParent(config: Partial<ThemeConfig>) {
-  const merged: ThemeConfig = { preset: 'vega', ...config }
-  const resolved = resolveTheme(merged)
-  const css = generateThemeCSS(resolved)
-
-  // Update the ThemeProvider's <style> tag so both light and dark mode vars are current
-  const id = 'pilotiq-theme'
-  let style = document.getElementById(id) as HTMLStyleElement | null
-  if (!style) {
-    style = document.createElement('style')
-    style.id = id
-    document.head.appendChild(style)
-  }
-  style.textContent = css
-
-  // Also set inline styles for immediate visual feedback (overrides @layer)
-  const root = document.documentElement
-  const isDark = root.classList.contains('dark')
-  const vars = isDark ? resolved.dark : resolved.light
-
-  for (const [key, value] of Object.entries(vars)) {
-    root.style.setProperty(key, value)
-  }
-  root.style.setProperty('--radius', resolved.radius)
-  root.style.setProperty('--spacing', resolved.spacing)
-  if (resolved.fontFamily?.body) {
-    root.style.setProperty('--font-sans', resolved.fontFamily.body)
-    root.style.setProperty('--default-font-family', resolved.fontFamily.body)
-  }
-  if (resolved.fontFamily?.heading) {
-    root.style.setProperty('--font-heading', resolved.fontFamily.heading)
-  }
-}
-
-/**
- * Apply config changes to a live preview document — patches CSS vars, font
- * links, mode class, and preset fingerprint text WITHOUT reloading the iframe.
- * Called on every config/mode change so the user's scroll position survives.
- */
-export function applyConfigToDoc(doc: Document, config: Partial<ThemeConfig>, mode: 'light' | 'dark') {
-  const merged: ThemeConfig = { preset: 'vega', ...config }
-  const resolved = resolveTheme(merged)
-  const themeCSS = generateThemeCSS(resolved)
-
-  // Light/dark switch — generateThemeCSS emits `.dark { ... }`, so toggling
-  // the class on <html> picks up the right var set without a re-render.
-  doc.documentElement.className = mode
-
-  // Theme CSS — single <style id="pilotiq-theme"> we keep refilling.
-  let style = doc.getElementById('pilotiq-theme') as HTMLStyleElement | null
-  if (!style) {
-    style = doc.createElement('style')
-    style.id = 'pilotiq-theme'
-    doc.head.appendChild(style)
-  }
-  style.textContent = themeCSS
-
-  // Font links — diff against current set so the browser doesn't re-fetch
-  // already-loaded stylesheets (avoids the brief FOIT on every config change).
-  const wanted = new Set<string>()
-  if (resolved.fonts?.body) wanted.add(resolved.fonts.body)
-  if (resolved.fonts?.heading) wanted.add(resolved.fonts.heading)
-  const existing = doc.querySelectorAll<HTMLLinkElement>('link[data-pilotiq-font]')
-  const haveSet = new Set<string>()
-  existing.forEach(link => {
-    const family = link.dataset.pilotiqFont ?? ''
-    if (!wanted.has(family)) link.remove()
-    else haveSet.add(family)
-  })
-  for (const family of wanted) {
-    if (haveSet.has(family)) continue
-    const link = doc.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = fontStylesheetUrl(family)
-    link.dataset.pilotiqFont = family
-    doc.head.appendChild(link)
-  }
-
-  // Preset fingerprint heading — only piece of body text that depends on config.
-  const fp = doc.getElementById('preset-fingerprint')
-  if (fp) fp.textContent = `${cap(config.preset ?? 'vega')} - ${resolved.fonts?.heading ?? 'System'}`
-}