@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/components/AppearanceSessionControls.d.ts

@@ -0,0 +1,15 @@
+import { type AppearanceSource } from '../hooks/useAppearanceSession.js';
+export declare const formatTemplate: (template: string, values: Record<string, string | number>) => string;
+/**
+ * "Keep my: Colours · Fonts · Style" toggles. Locks apply to every bulk action
+ * (theme preset, style preset, palette generator) for the current editing session.
+ */
+export declare function AppearanceLocks(): import("react").JSX.Element;
+/**
+ * One-step undo for the last bulk change made from `source`. Stays for 10 s,
+ * paused while the pointer or keyboard focus is inside it.
+ */
+export declare function AppearanceUndoBar({ sources }: {
+    sources: AppearanceSource[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=AppearanceSessionControls.d.ts.map

package/dist/components/AppearanceSessionControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceSessionControls.d.ts","sourceRoot":"","sources":["../../src/components/AppearanceSessionControls.tsx"],"names":[],"mappings":"AAKA,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,kCAAkC,CAAA;AAMzC,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,WACF,CAAA;AAEtF;;;GAGG;AACH,wBAAgB,eAAe,gCA8B9B;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,gBAAgB,EAAE,CAAA;CAAE,+BA+D7E"}

package/dist/components/AppearanceSessionControls.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useForm } from '@payloadcms/ui';
+import { Lock, LockOpen, Undo2, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { clearAppearanceUndo, toggleAppearanceLock, useAppearanceSession } from '../hooks/useAppearanceSession.js';
+import { useThemeTranslations } from '../hooks/useThemeTranslations.js';
+const LOCKS = [
+    'colors',
+    'fonts',
+    'style'
+];
+const UNDO_TIMEOUT_MS = 10_000;
+export const formatTemplate = (template, values)=>template.replace(/\{(\w+)\}/g, (match, key)=>String(values[key] ?? match));
+/**
+ * "Keep my: Colours · Fonts · Style" toggles. Locks apply to every bulk action
+ * (theme preset, style preset, palette generator) for the current editing session.
+ */ export function AppearanceLocks() {
+    const { locks } = useAppearanceSession();
+    const t = useThemeTranslations().appearance;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "tm-appearance-locks",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "tm-appearance-locks__row",
+                role: "group",
+                "aria-label": t.locksLabel,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "tm-appearance-locks__label",
+                        "aria-hidden": "true",
+                        children: t.locksLabel
+                    }),
+                    LOCKS.map((lock)=>{
+                        const locked = locks[lock];
+                        const Icon = locked ? Lock : LockOpen;
+                        return /*#__PURE__*/ _jsxs("button", {
+                            type: "button",
+                            className: `tm-appearance-lock${locked ? ' is-locked' : ''}`,
+                            "aria-pressed": locked,
+                            onClick: ()=>toggleAppearanceLock(lock),
+                            children: [
+                                /*#__PURE__*/ _jsx(Icon, {
+                                    size: 14,
+                                    "aria-hidden": true
+                                }),
+                                t[lock]
+                            ]
+                        }, lock);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "tm-appearance-locks__hint",
+                children: t.locksHint
+            })
+        ]
+    });
+}
+/**
+ * One-step undo for the last bulk change made from `source`. Stays for 10 s,
+ * paused while the pointer or keyboard focus is inside it.
+ */ export function AppearanceUndoBar({ sources }) {
+    const { undo } = useAppearanceSession();
+    const { dispatchFields, setModified } = useForm();
+    const t = useThemeTranslations().appearance;
+    const [paused, setPaused] = useState(false);
+    const [announcement, setAnnouncement] = useState('');
+    const barRef = useRef(null);
+    const visible = undo !== null && sources.includes(undo.source);
+    useEffect(()=>{
+        if (!visible || paused || !undo) return;
+        const timer = window.setTimeout(()=>clearAppearanceUndo(undo.id), UNDO_TIMEOUT_MS);
+        return ()=>window.clearTimeout(timer);
+    }, [
+        visible,
+        paused,
+        undo
+    ]);
+    useEffect(()=>{
+        if (visible && undo) setAnnouncement(formatTemplate(t.applied, {
+            name: undo.label
+        }));
+    }, [
+        visible,
+        undo,
+        t.applied
+    ]);
+    const handleUndo = ()=>{
+        if (!undo) return;
+        undo.entries.forEach(({ path, value })=>dispatchFields({
+                type: 'UPDATE',
+                path,
+                value
+            }));
+        setModified(true);
+        clearAppearanceUndo(undo.id);
+        setAnnouncement(t.undone);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "tm-sr-only",
+                role: "status",
+                "aria-live": "polite",
+                children: announcement
+            }),
+            visible && undo ? /*#__PURE__*/ _jsxs("div", {
+                ref: barRef,
+                className: "tm-appearance-undo",
+                onPointerEnter: ()=>setPaused(true),
+                onPointerLeave: ()=>setPaused(false),
+                onFocus: ()=>setPaused(true),
+                onBlur: (event)=>{
+                    if (!barRef.current?.contains(event.relatedTarget)) setPaused(false);
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "tm-appearance-undo__text",
+                        children: formatTemplate(t.applied, {
+                            name: undo.label
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        className: "tm-appearance-undo__action",
+                        onClick: handleUndo,
+                        children: [
+                            /*#__PURE__*/ _jsx(Undo2, {
+                                size: 14,
+                                "aria-hidden": true
+                            }),
+                            t.undo
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        className: "tm-appearance-undo__dismiss",
+                        "aria-label": t.dismiss,
+                        onClick: ()=>clearAppearanceUndo(undo.id),
+                        children: /*#__PURE__*/ _jsx(X, {
+                            size: 14,
+                            "aria-hidden": true
+                        })
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+
+//# sourceMappingURL=AppearanceSessionControls.js.map

package/dist/components/AppearanceSessionControls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AppearanceSessionControls.tsx"],"sourcesContent":["'use client'\n\nimport { useForm } from '@payloadcms/ui'\nimport { Lock, LockOpen, Undo2, X } from 'lucide-react'\nimport { useEffect, useRef, useState } from 'react'\nimport {\n  clearAppearanceUndo,\n  toggleAppearanceLock,\n  useAppearanceSession,\n  type AppearanceLock,\n  type AppearanceSource,\n} from '../hooks/useAppearanceSession.js'\nimport { useThemeTranslations } from '../hooks/useThemeTranslations.js'\n\nconst LOCKS: AppearanceLock[] = ['colors', 'fonts', 'style']\nconst UNDO_TIMEOUT_MS = 10_000\n\nexport const formatTemplate = (template: string, values: Record<string, string | number>) =>\n  template.replace(/\\{(\\w+)\\}/g, (match, key: string) => String(values[key] ?? match))\n\n/**\n * \"Keep my: Colours · Fonts · Style\" toggles. Locks apply to every bulk action\n * (theme preset, style preset, palette generator) for the current editing session.\n */\nexport function AppearanceLocks() {\n  const { locks } = useAppearanceSession()\n  const t = useThemeTranslations().appearance\n\n  return (\n    <div className=\"tm-appearance-locks\">\n      <div className=\"tm-appearance-locks__row\" role=\"group\" aria-label={t.locksLabel}>\n        <span className=\"tm-appearance-locks__label\" aria-hidden=\"true\">\n          {t.locksLabel}\n        </span>\n        {LOCKS.map((lock) => {\n          const locked = locks[lock]\n          const Icon = locked ? Lock : LockOpen\n          return (\n            <button\n              key={lock}\n              type=\"button\"\n              className={`tm-appearance-lock${locked ? ' is-locked' : ''}`}\n              aria-pressed={locked}\n              onClick={() => toggleAppearanceLock(lock)}\n            >\n              <Icon size={14} aria-hidden />\n              {t[lock]}\n            </button>\n          )\n        })}\n      </div>\n      <p className=\"tm-appearance-locks__hint\">{t.locksHint}</p>\n    </div>\n  )\n}\n\n/**\n * One-step undo for the last bulk change made from `source`. Stays for 10 s,\n * paused while the pointer or keyboard focus is inside it.\n */\nexport function AppearanceUndoBar({ sources }: { sources: AppearanceSource[] }) {\n  const { undo } = useAppearanceSession()\n  const { dispatchFields, setModified } = useForm()\n  const t = useThemeTranslations().appearance\n  const [paused, setPaused] = useState(false)\n  const [announcement, setAnnouncement] = useState('')\n  const barRef = useRef<HTMLDivElement>(null)\n  const visible = undo !== null && sources.includes(undo.source)\n\n  useEffect(() => {\n    if (!visible || paused || !undo) return\n    const timer = window.setTimeout(() => clearAppearanceUndo(undo.id), UNDO_TIMEOUT_MS)\n    return () => window.clearTimeout(timer)\n  }, [visible, paused, undo])\n\n  useEffect(() => {\n    if (visible && undo) setAnnouncement(formatTemplate(t.applied, { name: undo.label }))\n  }, [visible, undo, t.applied])\n\n  const handleUndo = () => {\n    if (!undo) return\n    undo.entries.forEach(({ path, value }) => dispatchFields({ type: 'UPDATE', path, value }))\n    setModified(true)\n    clearAppearanceUndo(undo.id)\n    setAnnouncement(t.undone)\n  }\n\n  return (\n    <>\n      {/* Always-mounted live region so both \"applied\" and \"reverted\" are announced. */}\n      <span className=\"tm-sr-only\" role=\"status\" aria-live=\"polite\">\n        {announcement}\n      </span>\n      {visible && undo ? (\n        <div\n          ref={barRef}\n          className=\"tm-appearance-undo\"\n          onPointerEnter={() => setPaused(true)}\n          onPointerLeave={() => setPaused(false)}\n          onFocus={() => setPaused(true)}\n          onBlur={(event) => {\n            if (!barRef.current?.contains(event.relatedTarget as Node)) setPaused(false)\n          }}\n        >\n          <span className=\"tm-appearance-undo__text\">\n            {formatTemplate(t.applied, { name: undo.label })}\n          </span>\n          <button type=\"button\" className=\"tm-appearance-undo__action\" onClick={handleUndo}>\n            <Undo2 size={14} aria-hidden />\n            {t.undo}\n          </button>\n          <button\n            type=\"button\"\n            className=\"tm-appearance-undo__dismiss\"\n            aria-label={t.dismiss}\n            onClick={() => clearAppearanceUndo(undo.id)}\n          >\n            <X size={14} aria-hidden />\n          </button>\n        </div>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useForm","Lock","LockOpen","Undo2","X","useEffect","useRef","useState","clearAppearanceUndo","toggleAppearanceLock","useAppearanceSession","useThemeTranslations","LOCKS","UNDO_TIMEOUT_MS","formatTemplate","template","values","replace","match","key","String","AppearanceLocks","locks","t","appearance","div","className","role","aria-label","locksLabel","span","aria-hidden","map","lock","locked","Icon","button","type","aria-pressed","onClick","size","p","locksHint","AppearanceUndoBar","sources","undo","dispatchFields","setModified","paused","setPaused","announcement","setAnnouncement","barRef","visible","includes","source","timer","window","setTimeout","id","clearTimeout","applied","name","label","handleUndo","entries","forEach","path","value","undone","aria-live","ref","onPointerEnter","onPointerLeave","onFocus","onBlur","event","current","contains","relatedTarget","dismiss"],"mappings":"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"}

package/dist/components/ColorModeToggle.css

@@ -0,0 +1,42 @@
+/* View Transitions ripple for ColorModeToggle.
+   Disable the default cross-fade so the clip-path circle reveal is clean. */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* New (incoming) theme sits on top and is revealed by the expanding circle. */
+::view-transition-new(root) {
+  z-index: 1;
+}
+::view-transition-old(root) {
+  z-index: 0;
+}
+
+.tm-color-mode-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  line-height: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tm-color-mode-toggle:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
+}

package/dist/components/ColorModeToggle.d.ts

@@ -0,0 +1,40 @@
+import { type LucideIcon } from 'lucide-react';
+import React from 'react';
+import type { Mode } from '../providers/Theme/types.js';
+import './ColorModeToggle.css';
+export interface ColorModeToggleProps {
+    /** Extra class applied to the button (alongside `tm-color-mode-toggle`). */
+    className?: string;
+    style?: React.CSSProperties;
+    /** Icon size in px. Default 20. */
+    size?: number;
+    /**
+     * Cycle light → dark → auto on each click instead of a simple light/dark
+     * toggle. Default false.
+     */
+    includeAuto?: boolean;
+    /** Disable the View Transitions ripple (falls back to an instant switch). */
+    disableAnimation?: boolean;
+    /** Override the icons used for each mode. */
+    icons?: Partial<Record<Mode, LucideIcon>>;
+    'aria-label'?: string;
+}
+/**
+ * Drop-in, accessible light/dark (optionally auto) toggle for the front-end.
+ *
+ * Renders a single icon button wired to the plugin's `ThemeProvider`. When the
+ * browser supports the View Transitions API (and the user hasn't requested
+ * reduced motion) the theme change animates as a circular "ripple" expanding
+ * from the click position.
+ *
+ * Returns `null` when the admin has disabled the color-mode toggle.
+ *
+ * @example
+ * ```tsx
+ * import { ColorModeToggle } from '@kilivi/payloadcms-theme-management/components/ColorModeToggle'
+ * <ColorModeToggle />
+ * ```
+ */
+export declare const ColorModeToggle: React.FC<ColorModeToggleProps>;
+export default ColorModeToggle;
+//# sourceMappingURL=ColorModeToggle.d.ts.map

package/dist/components/ColorModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorModeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ColorModeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AACvD,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,oBAAoB;IACnC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAA;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAUD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqG1D,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/ColorModeToggle.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from 'lucide-react';
+import React, { useCallback } from 'react';
+import { useTheme } from '../providers/Theme/index.js';
+import './ColorModeToggle.css';
+const DEFAULT_ICONS = {
+    light: Sun,
+    dark: Moon,
+    auto: Monitor
+};
+/**
+ * Drop-in, accessible light/dark (optionally auto) toggle for the front-end.
+ *
+ * Renders a single icon button wired to the plugin's `ThemeProvider`. When the
+ * browser supports the View Transitions API (and the user hasn't requested
+ * reduced motion) the theme change animates as a circular "ripple" expanding
+ * from the click position.
+ *
+ * Returns `null` when the admin has disabled the color-mode toggle.
+ *
+ * @example
+ * ```tsx
+ * import { ColorModeToggle } from '@kilivi/payloadcms-theme-management/components/ColorModeToggle'
+ * <ColorModeToggle />
+ * ```
+ */ export const ColorModeToggle = ({ className, style, size = 20, includeAuto = false, disableAnimation = false, icons, 'aria-label': ariaLabel })=>{
+    const { mode, setMode, isColorModeToggleAllowed } = useTheme();
+    const resolvedCurrent = useCallback(()=>{
+        if (typeof document !== 'undefined') {
+            const attr = document.documentElement.getAttribute('data-theme-mode');
+            if (attr === 'dark' || attr === 'light') return attr;
+        }
+        return mode === 'dark' ? 'dark' : 'light';
+    }, [
+        mode
+    ]);
+    const getNextMode = useCallback(()=>{
+        if (includeAuto) {
+            if (mode === 'light') return 'dark';
+            if (mode === 'dark') return 'auto';
+            return 'light';
+        }
+        return resolvedCurrent() === 'dark' ? 'light' : 'dark';
+    }, [
+        includeAuto,
+        mode,
+        resolvedCurrent
+    ]);
+    const handleClick = useCallback((event)=>{
+        const next = getNextMode();
+        const prefersReduced = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const canAnimate = !disableAnimation && !prefersReduced && typeof document !== 'undefined' && 'startViewTransition' in document;
+        if (!canAnimate) {
+            setMode(next);
+            return;
+        }
+        const x = event.clientX;
+        const y = event.clientY;
+        const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+        const startViewTransition = document.startViewTransition;
+        const transition = startViewTransition(()=>{
+            setMode(next);
+        });
+        transition.ready.then(()=>{
+            document.documentElement.animate({
+                clipPath: [
+                    `circle(0px at ${x}px ${y}px)`,
+                    `circle(${endRadius}px at ${x}px ${y}px)`
+                ]
+            }, {
+                duration: 450,
+                easing: 'ease-in-out',
+                pseudoElement: '::view-transition-new(root)'
+            });
+        }).catch(()=>{
+        /* animation is best-effort; the mode change already applied */ });
+    }, [
+        disableAnimation,
+        getNextMode,
+        setMode
+    ]);
+    // Honour the admin "allow color mode toggle" switch.
+    if (isColorModeToggleAllowed === false) {
+        return null;
+    }
+    const iconSet = {
+        ...DEFAULT_ICONS,
+        ...icons
+    };
+    const activeMode = mode ?? 'light';
+    const Icon = iconSet[activeMode] ?? DEFAULT_ICONS.light;
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        onClick: handleClick,
+        className: [
+            'tm-color-mode-toggle',
+            className
+        ].filter(Boolean).join(' '),
+        style: style,
+        "aria-label": ariaLabel ?? `Switch color mode (current: ${activeMode})`,
+        title: ariaLabel ?? `Color mode: ${activeMode}`,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            size: size,
+            "aria-hidden": true
+        })
+    });
+};
+export default ColorModeToggle;
+
+//# sourceMappingURL=ColorModeToggle.js.map

package/dist/components/ColorModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ColorModeToggle.tsx"],"sourcesContent":["'use client'\n\nimport { Monitor, Moon, Sun, type LucideIcon } from 'lucide-react'\nimport React, { useCallback } from 'react'\nimport { useTheme } from '../providers/Theme/index.js'\nimport type { Mode } from '../providers/Theme/types.js'\nimport './ColorModeToggle.css'\n\nexport interface ColorModeToggleProps {\n  /** Extra class applied to the button (alongside `tm-color-mode-toggle`). */\n  className?: string\n  style?: React.CSSProperties\n  /** Icon size in px. Default 20. */\n  size?: number\n  /**\n   * Cycle light → dark → auto on each click instead of a simple light/dark\n   * toggle. Default false.\n   */\n  includeAuto?: boolean\n  /** Disable the View Transitions ripple (falls back to an instant switch). */\n  disableAnimation?: boolean\n  /** Override the icons used for each mode. */\n  icons?: Partial<Record<Mode, LucideIcon>>\n  'aria-label'?: string\n}\n\nconst DEFAULT_ICONS: Record<Mode, LucideIcon> = {\n  light: Sun,\n  dark: Moon,\n  auto: Monitor,\n}\n\ntype StartViewTransition = (callback: () => void) => { ready: Promise<void> }\n\n/**\n * Drop-in, accessible light/dark (optionally auto) toggle for the front-end.\n *\n * Renders a single icon button wired to the plugin's `ThemeProvider`. When the\n * browser supports the View Transitions API (and the user hasn't requested\n * reduced motion) the theme change animates as a circular \"ripple\" expanding\n * from the click position.\n *\n * Returns `null` when the admin has disabled the color-mode toggle.\n *\n * @example\n * ```tsx\n * import { ColorModeToggle } from '@kilivi/payloadcms-theme-management/components/ColorModeToggle'\n * <ColorModeToggle />\n * ```\n */\nexport const ColorModeToggle: React.FC<ColorModeToggleProps> = ({\n  className,\n  style,\n  size = 20,\n  includeAuto = false,\n  disableAnimation = false,\n  icons,\n  'aria-label': ariaLabel,\n}) => {\n  const { mode, setMode, isColorModeToggleAllowed } = useTheme()\n\n  const resolvedCurrent = useCallback((): 'light' | 'dark' => {\n    if (typeof document !== 'undefined') {\n      const attr = document.documentElement.getAttribute('data-theme-mode')\n      if (attr === 'dark' || attr === 'light') return attr\n    }\n    return mode === 'dark' ? 'dark' : 'light'\n  }, [mode])\n\n  const getNextMode = useCallback((): Mode => {\n    if (includeAuto) {\n      if (mode === 'light') return 'dark'\n      if (mode === 'dark') return 'auto'\n      return 'light'\n    }\n    return resolvedCurrent() === 'dark' ? 'light' : 'dark'\n  }, [includeAuto, mode, resolvedCurrent])\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const next = getNextMode()\n      const prefersReduced =\n        typeof window !== 'undefined' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches\n      const canAnimate =\n        !disableAnimation &&\n        !prefersReduced &&\n        typeof document !== 'undefined' &&\n        'startViewTransition' in document\n\n      if (!canAnimate) {\n        setMode(next)\n        return\n      }\n\n      const x = event.clientX\n      const y = event.clientY\n      const endRadius = Math.hypot(\n        Math.max(x, window.innerWidth - x),\n        Math.max(y, window.innerHeight - y),\n      )\n\n      const startViewTransition = (\n        document as unknown as { startViewTransition: StartViewTransition }\n      ).startViewTransition\n\n      const transition = startViewTransition(() => {\n        setMode(next)\n      })\n\n      transition.ready\n        .then(() => {\n          document.documentElement.animate(\n            {\n              clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`],\n            },\n            {\n              duration: 450,\n              easing: 'ease-in-out',\n              pseudoElement: '::view-transition-new(root)',\n            },\n          )\n        })\n        .catch(() => {\n          /* animation is best-effort; the mode change already applied */\n        })\n    },\n    [disableAnimation, getNextMode, setMode],\n  )\n\n  // Honour the admin \"allow color mode toggle\" switch.\n  if (isColorModeToggleAllowed === false) {\n    return null\n  }\n\n  const iconSet = { ...DEFAULT_ICONS, ...icons }\n  const activeMode: Mode = mode ?? 'light'\n  const Icon = iconSet[activeMode] ?? DEFAULT_ICONS.light\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      className={['tm-color-mode-toggle', className].filter(Boolean).join(' ')}\n      style={style}\n      aria-label={ariaLabel ?? `Switch color mode (current: ${activeMode})`}\n      title={ariaLabel ?? `Color mode: ${activeMode}`}\n    >\n      <Icon size={size} aria-hidden />\n    </button>\n  )\n}\n\nexport default ColorModeToggle\n"],"names":["Monitor","Moon","Sun","React","useCallback","useTheme","DEFAULT_ICONS","light","dark","auto","ColorModeToggle","className","style","size","includeAuto","disableAnimation","icons","ariaLabel","mode","setMode","isColorModeToggleAllowed","resolvedCurrent","document","attr","documentElement","getAttribute","getNextMode","handleClick","event","next","prefersReduced","window","matchMedia","matches","canAnimate","x","clientX","y","clientY","endRadius","Math","hypot","max","innerWidth","innerHeight","startViewTransition","transition","ready","then","animate","clipPath","duration","easing","pseudoElement","catch","iconSet","activeMode","Icon","button","type","onClick","filter","Boolean","join","aria-label","title","aria-hidden"],"mappings":"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"}

package/dist/components/ServerThemeInjector.d.ts

@@ -1,3 +1,4 @@
+import { type ThemeFontLoading } from '../constants/themeFonts.js';
 interface ServerThemeInjectorProps {
     /**
      * Theme configuration object from your site settings.
@@ -10,11 +11,22 @@ interface ServerThemeInjectorProps {
      * ```
      */
     themeConfiguration?: unknown;
+    /**
+     * How the body / heading fonts picked in the admin are loaded:
+     * - `'self-hosted'` (default) — served from your own origin by the plugin's
+     *   `/api/theme-fonts/*` endpoints; visitors never contact Google (GDPR-friendly).
+     * - `'google'` — straight from the Google Fonts CDN.
+     * - `'none'` — you load the faces yourself, e.g. with `next/font` exposing the
+     *   `--font-*` variables listed in `FONT_CATALOG` (they take precedence).
+     */
+    fontLoading?: ThemeFontLoading;
+    /** Payload `routes.api` when it is not '/api'. */
+    apiRoute?: string;
 }
 /**
  * Server-side theme CSS injector to prevent FOUC
  * This component injects critical theme CSS directly into the HTML head during SSR
  */
-export declare function ServerThemeInjector({ themeConfiguration, }: Readonly<ServerThemeInjectorProps>): Promise<import("react").JSX.Element>;
+export declare function ServerThemeInjector({ themeConfiguration, fontLoading, apiRoute, }: Readonly<ServerThemeInjectorProps>): Promise<import("react").JSX.Element>;
 export {};
 //# sourceMappingURL=ServerThemeInjector.d.ts.map

package/dist/components/ServerThemeInjector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerThemeInjector.d.ts","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"AAUA,UAAU,wBAAwB;IAChC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAMD;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,EACxC,kBAAkB,GACnB,EAAE,QAAQ,CAAC,wBAAwB,CAAC,wCAsFpC"}
+{"version":3,"file":"ServerThemeInjector.d.ts","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAWvF,UAAU,wBAAwB;IAChC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAMD;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,EACxC,kBAAkB,EAClB,WAA2B,EAC3B,QAAiB,GAClB,EAAE,QAAQ,CAAC,wBAAwB,CAAC,wCAiIpC"}

package/dist/components/ServerThemeInjector.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buildThemeFontsHref } from '../constants/themeFonts.js';
 import { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js';
 import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js';
 import { createFallbackCriticalCSS, getThemeCriticalCSS } from '../utils/themeAssets.js';
@@ -8,11 +9,14 @@ import { InitTheme } from './InitTheme.js';
 /**
  * Server-side theme CSS injector to prevent FOUC
  * This component injects critical theme CSS directly into the HTML head during SSR
- */ export async function ServerThemeInjector({ themeConfiguration }) {
-    // Accept unknown type to avoid type conflicts between app's payload-types and plugin's payload-types
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ */ export async function ServerThemeInjector({ themeConfiguration, fontLoading = 'self-hosted', apiRoute = '/api' }) {
+    // resolveThemeConfiguration accepts `unknown` — no cast needed
     const resolvedConfiguration = resolveThemeConfiguration(themeConfiguration);
-    const { theme, borderRadius, customCSS, lightMode, darkMode, fontScale, spacing, animationLevel, allowColorModeToggle, colorMode, typography } = resolvedConfiguration;
+    const fontsHref = buildThemeFontsHref(resolvedConfiguration.fontSelections ?? [], {
+        mode: fontLoading,
+        apiRoute
+    });
+    const { theme, borderRadius, customCSS, lightMode, darkMode, fontScale, spacing, animationLevel, allowColorModeToggle, colorMode, typography, visualEffects, componentStyles } = resolvedConfiguration;
     // Use resolved configuration directly
     const normalizedThemeConfiguration = {
         theme,
@@ -25,20 +29,13 @@ import { InitTheme } from './InitTheme.js';
         customCSS: customCSS ?? null,
         lightMode,
         darkMode,
-        typography: typography ?? undefined
+        typography: typography ?? undefined,
+        visualEffects: visualEffects ?? null,
+        componentStyles: componentStyles ?? null
     };
     let criticalCSS = await getThemeCriticalCSS(theme);
     criticalCSS ??= createFallbackCriticalCSS(theme);
-    const borderRadiusMap = {
-        none: 'none',
-        small: 'small',
-        medium: 'medium',
-        large: 'large',
-        xl: 'xl',
-        full: 'xl'
-    };
-    const mappedBorderRadius = borderRadiusMap[borderRadius ?? 'medium'] ?? 'medium';
-    const borderRadiusConfig = getBorderRadiusConfig(mappedBorderRadius);
+    const borderRadiusConfig = getBorderRadiusConfig(borderRadius ?? 'medium');
     const cssRecord = typeof borderRadiusConfig?.css === 'string' ? {
         '--radius-default': borderRadiusConfig.css
     } : borderRadiusConfig?.css ?? {};
@@ -53,16 +50,69 @@ ${borderRadiusCSS}
         darkMode
     });
     const customCSSBlock = typeof customCSS === 'string' ? customCSS.trim() : '';
+    // `color-scheme` makes native UI (form controls, scrollbars) match the theme and
+    // avoids a white flash on dark sites. Fixed mode → single scheme; toggle/auto → both.
+    const colorScheme = allowColorModeToggle === false ? colorMode === 'dark' ? 'dark' : 'light' : 'light dark';
+    const colorSchemeBlock = `:root {\n  color-scheme: ${colorScheme};\n}`;
     const combinedCSS = [
         criticalCSS,
+        colorSchemeBlock,
         borderRadiusBlock,
         themeConfigurationCSS,
         colorModesCSS,
         customCSSBlock
     ].filter((block)=>Boolean(block?.trim?.().length)).join('\n\n');
+    // <meta name="theme-color"> colours the mobile browser chrome to match the page
+    // background. Emit per-scheme variants when the mode can change, otherwise a
+    // single tag matching the fixed mode.
+    const pick = (mode, key)=>{
+        const value = mode?.[key];
+        return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;
+    };
+    const lightBg = pick(lightMode, 'background');
+    const darkBg = pick(darkMode, 'background');
+    const emitBothSchemes = allowColorModeToggle !== false || colorMode === 'auto';
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(InitTheme, {}),
+            fontsHref && fontLoading === 'google' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("link", {
+                        rel: "preconnect",
+                        href: "https://fonts.googleapis.com"
+                    }),
+                    /*#__PURE__*/ _jsx("link", {
+                        rel: "preconnect",
+                        href: "https://fonts.gstatic.com",
+                        crossOrigin: ""
+                    })
+                ]
+            }) : null,
+            fontsHref ? /*#__PURE__*/ _jsx("link", {
+                rel: "stylesheet",
+                href: fontsHref,
+                precedence: "theme-fonts"
+            }) : null,
+            emitBothSchemes ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    lightBg ? /*#__PURE__*/ _jsx("meta", {
+                        name: "theme-color",
+                        media: "(prefers-color-scheme: light)",
+                        content: lightBg
+                    }) : null,
+                    darkBg ? /*#__PURE__*/ _jsx("meta", {
+                        name: "theme-color",
+                        media: "(prefers-color-scheme: dark)",
+                        content: darkBg
+                    }) : null
+                ]
+            }) : (()=>{
+                const fixed = colorMode === 'dark' ? darkBg : lightBg;
+                return fixed ? /*#__PURE__*/ _jsx("meta", {
+                    name: "theme-color",
+                    content: fixed
+                }) : null;
+            })(),
             /*#__PURE__*/ _jsx("style", {
                 id: "theme-critical-css",
                 dangerouslySetInnerHTML: {

package/dist/components/ServerThemeInjector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ServerThemeInjector.tsx"],"sourcesContent":["import type { ThemeTypographyPreset } from '../presets.js'\nimport { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\nimport type { BorderRadiusPreset, ThemeDefaults } from '../providers/Theme/types.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport type { ResolvedThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport { createFallbackCriticalCSS, getThemeCriticalCSS } from '../utils/themeAssets.js'\nimport { generateThemeColorsCss } from '../utils/themeColors.js'\nimport { generateThemeCSS } from '../utils/themeUtils.js'\nimport { InitTheme } from './InitTheme.js'\n\ninterface ServerThemeInjectorProps {\n  /**\n   * Theme configuration object from your site settings.\n   * Pass the themeConfiguration field directly, not the entire site settings object.\n   *\n   * @example\n   * ```tsx\n   * const siteSettings = await payload.findGlobal({ slug: 'site-settings' })\n   * <ServerThemeInjector themeConfiguration={siteSettings.themeConfiguration} />\n   * ```\n   */\n  themeConfiguration?: unknown\n}\n\ntype RuntimeThemeConfiguration = Omit<ResolvedThemeConfiguration, 'typography'> & {\n  typography?: ThemeTypographyPreset | null\n}\n\n/**\n * Server-side theme CSS injector to prevent FOUC\n * This component injects critical theme CSS directly into the HTML head during SSR\n */\nexport async function ServerThemeInjector({\n  themeConfiguration,\n}: Readonly<ServerThemeInjectorProps>) {\n  // Accept unknown type to avoid type conflicts between app's payload-types and plugin's payload-types\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const resolvedConfiguration = resolveThemeConfiguration(themeConfiguration as any)\n  const {\n    theme,\n    borderRadius,\n    customCSS,\n    lightMode,\n    darkMode,\n    fontScale,\n    spacing,\n    animationLevel,\n    allowColorModeToggle,\n    colorMode,\n    typography,\n  } = resolvedConfiguration\n\n  // Use resolved configuration directly\n  const normalizedThemeConfiguration: RuntimeThemeConfiguration = {\n    theme,\n    colorMode,\n    allowColorModeToggle,\n    borderRadius,\n    fontScale,\n    spacing,\n    animationLevel,\n    customCSS: customCSS ?? null,\n    lightMode,\n    darkMode,\n    typography: typography ?? undefined,\n  }\n\n  let criticalCSS = await getThemeCriticalCSS(theme as ThemeDefaults)\n  criticalCSS ??= createFallbackCriticalCSS(theme as ThemeDefaults)\n\n  const borderRadiusMap: Record<string, BorderRadiusPreset> = {\n    none: 'none',\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    xl: 'xl',\n    full: 'xl',\n  }\n  const mappedBorderRadius = borderRadiusMap[borderRadius ?? 'medium'] ?? 'medium'\n  const borderRadiusConfig = getBorderRadiusConfig(mappedBorderRadius)\n  const cssRecord =\n    typeof borderRadiusConfig?.css === 'string'\n      ? { '--radius-default': borderRadiusConfig.css }\n      : (borderRadiusConfig?.css ?? {})\n\n  const borderRadiusCSS = Object.entries(cssRecord)\n    .map(([property, value]) => `  ${property}: ${value};`)\n    .join('\\n')\n\n  const borderRadiusBlock = borderRadiusCSS\n    ? `:root {\n${borderRadiusCSS}\n}`\n    : ''\n\n  const themeConfigurationCSS = generateThemeCSS(normalizedThemeConfiguration)\n  const colorModesCSS = generateThemeColorsCss({ themeName: theme, lightMode, darkMode })\n  const customCSSBlock = typeof customCSS === 'string' ? customCSS.trim() : ''\n\n  const combinedCSS = [\n    criticalCSS,\n    borderRadiusBlock,\n    themeConfigurationCSS,\n    colorModesCSS,\n    customCSSBlock,\n  ]\n    .filter((block) => Boolean(block?.trim?.().length))\n    .join('\\n\\n')\n\n  return (\n    <>\n      <InitTheme />\n      <style\n        id=\"theme-critical-css\"\n        dangerouslySetInnerHTML={{\n          __html: combinedCSS,\n        }}\n      />\n    </>\n  )\n}\n"],"names":["getBorderRadiusConfig","resolveThemeConfiguration","createFallbackCriticalCSS","getThemeCriticalCSS","generateThemeColorsCss","generateThemeCSS","InitTheme","ServerThemeInjector","themeConfiguration","resolvedConfiguration","theme","borderRadius","customCSS","lightMode","darkMode","fontScale","spacing","animationLevel","allowColorModeToggle","colorMode","typography","normalizedThemeConfiguration","undefined","criticalCSS","borderRadiusMap","none","small","medium","large","xl","full","mappedBorderRadius","borderRadiusConfig","cssRecord","css","borderRadiusCSS","Object","entries","map","property","value","join","borderRadiusBlock","themeConfigurationCSS","colorModesCSS","themeName","customCSSBlock","trim","combinedCSS","filter","block","Boolean","length","style","id","dangerouslySetInnerHTML","__html"],"mappings":";AACA,SAASA,qBAAqB,QAAQ,oCAAmC;AAEzE,SAASC,yBAAyB,QAAQ,wCAAuC;AAEjF,SAASC,yBAAyB,EAAEC,mBAAmB,QAAQ,0BAAyB;AACxF,SAASC,sBAAsB,QAAQ,0BAAyB;AAChE,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,SAAS,QAAQ,iBAAgB;AAoB1C;;;CAGC,GACD,OAAO,eAAeC,oBAAoB,EACxCC,kBAAkB,EACiB;IACnC,qGAAqG;IACrG,8DAA8D;IAC9D,MAAMC,wBAAwBR,0BAA0BO;IACxD,MAAM,EACJE,KAAK,EACLC,YAAY,EACZC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,EACdC,oBAAoB,EACpBC,SAAS,EACTC,UAAU,EACX,GAAGX;IAEJ,sCAAsC;IACtC,MAAMY,+BAA0D;QAC9DX;QACAS;QACAD;QACAP;QACAI;QACAC;QACAC;QACAL,WAAWA,aAAa;QACxBC;QACAC;QACAM,YAAYA,cAAcE;IAC5B;IAEA,IAAIC,cAAc,MAAMpB,oBAAoBO;IAC5Ca,gBAAgBrB,0BAA0BQ;IAE1C,MAAMc,kBAAsD;QAC1DC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,OAAO;QACPC,IAAI;QACJC,MAAM;IACR;IACA,MAAMC,qBAAqBP,eAAe,CAACb,gBAAgB,SAAS,IAAI;IACxE,MAAMqB,qBAAqBhC,sBAAsB+B;IACjD,MAAME,YACJ,OAAOD,oBAAoBE,QAAQ,WAC/B;QAAE,oBAAoBF,mBAAmBE,GAAG;IAAC,IAC5CF,oBAAoBE,OAAO,CAAC;IAEnC,MAAMC,kBAAkBC,OAAOC,OAAO,CAACJ,WACpCK,GAAG,CAAC,CAAC,CAACC,UAAUC,MAAM,GAAK,CAAC,EAAE,EAAED,SAAS,EAAE,EAAEC,MAAM,CAAC,CAAC,EACrDC,IAAI,CAAC;IAER,MAAMC,oBAAoBP,kBACtB,CAAC;AACP,EAAEA,gBAAgB;CACjB,CAAC,GACI;IAEJ,MAAMQ,wBAAwBtC,iBAAiBgB;IAC/C,MAAMuB,gBAAgBxC,uBAAuB;QAAEyC,WAAWnC;QAAOG;QAAWC;IAAS;IACrF,MAAMgC,iBAAiB,OAAOlC,cAAc,WAAWA,UAAUmC,IAAI,KAAK;IAE1E,MAAMC,cAAc;QAClBzB;QACAmB;QACAC;QACAC;QACAE;KACD,CACEG,MAAM,CAAC,CAACC,QAAUC,QAAQD,OAAOH,SAASK,SAC1CX,IAAI,CAAC;IAER,qBACE;;0BACE,KAACnC;0BACD,KAAC+C;gBACCC,IAAG;gBACHC,yBAAyB;oBACvBC,QAAQR;gBACV;;;;AAIR"}
+{"version":3,"sources":["../../src/components/ServerThemeInjector.tsx"],"sourcesContent":["import { buildThemeFontsHref, type ThemeFontLoading } from '../constants/themeFonts.js'\nimport type { ThemeTypographyPreset } from '../presets.js'\nimport { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\nimport type { ThemeDefaults } from '../providers/Theme/types.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport type { ResolvedThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport { createFallbackCriticalCSS, getThemeCriticalCSS } from '../utils/themeAssets.js'\nimport { generateThemeColorsCss } from '../utils/themeColors.js'\nimport { generateThemeCSS } from '../utils/themeUtils.js'\nimport { InitTheme } from './InitTheme.js'\n\ninterface ServerThemeInjectorProps {\n  /**\n   * Theme configuration object from your site settings.\n   * Pass the themeConfiguration field directly, not the entire site settings object.\n   *\n   * @example\n   * ```tsx\n   * const siteSettings = await payload.findGlobal({ slug: 'site-settings' })\n   * <ServerThemeInjector themeConfiguration={siteSettings.themeConfiguration} />\n   * ```\n   */\n  themeConfiguration?: unknown\n  /**\n   * How the body / heading fonts picked in the admin are loaded:\n   * - `'self-hosted'` (default) — served from your own origin by the plugin's\n   *   `/api/theme-fonts/*` endpoints; visitors never contact Google (GDPR-friendly).\n   * - `'google'` — straight from the Google Fonts CDN.\n   * - `'none'` — you load the faces yourself, e.g. with `next/font` exposing the\n   *   `--font-*` variables listed in `FONT_CATALOG` (they take precedence).\n   */\n  fontLoading?: ThemeFontLoading\n  /** Payload `routes.api` when it is not '/api'. */\n  apiRoute?: string\n}\n\ntype RuntimeThemeConfiguration = Omit<ResolvedThemeConfiguration, 'typography'> & {\n  typography?: ThemeTypographyPreset | null\n}\n\n/**\n * Server-side theme CSS injector to prevent FOUC\n * This component injects critical theme CSS directly into the HTML head during SSR\n */\nexport async function ServerThemeInjector({\n  themeConfiguration,\n  fontLoading = 'self-hosted',\n  apiRoute = '/api',\n}: Readonly<ServerThemeInjectorProps>) {\n  // resolveThemeConfiguration accepts `unknown` — no cast needed\n  const resolvedConfiguration = resolveThemeConfiguration(themeConfiguration)\n  const fontsHref = buildThemeFontsHref(resolvedConfiguration.fontSelections ?? [], {\n    mode: fontLoading,\n    apiRoute,\n  })\n  const {\n    theme,\n    borderRadius,\n    customCSS,\n    lightMode,\n    darkMode,\n    fontScale,\n    spacing,\n    animationLevel,\n    allowColorModeToggle,\n    colorMode,\n    typography,\n    visualEffects,\n    componentStyles,\n  } = resolvedConfiguration\n\n  // Use resolved configuration directly\n  const normalizedThemeConfiguration: RuntimeThemeConfiguration = {\n    theme,\n    colorMode,\n    allowColorModeToggle,\n    borderRadius,\n    fontScale,\n    spacing,\n    animationLevel,\n    customCSS: customCSS ?? null,\n    lightMode,\n    darkMode,\n    typography: typography ?? undefined,\n    visualEffects: visualEffects ?? null,\n    componentStyles: componentStyles ?? null,\n  }\n\n  let criticalCSS = await getThemeCriticalCSS(theme as ThemeDefaults)\n  criticalCSS ??= createFallbackCriticalCSS(theme as ThemeDefaults)\n\n  const borderRadiusConfig = getBorderRadiusConfig(borderRadius ?? 'medium')\n  const cssRecord =\n    typeof borderRadiusConfig?.css === 'string'\n      ? { '--radius-default': borderRadiusConfig.css }\n      : (borderRadiusConfig?.css ?? {})\n\n  const borderRadiusCSS = Object.entries(cssRecord)\n    .map(([property, value]) => `  ${property}: ${value};`)\n    .join('\\n')\n\n  const borderRadiusBlock = borderRadiusCSS\n    ? `:root {\n${borderRadiusCSS}\n}`\n    : ''\n\n  const themeConfigurationCSS = generateThemeCSS(normalizedThemeConfiguration)\n  const colorModesCSS = generateThemeColorsCss({ themeName: theme, lightMode, darkMode })\n  const customCSSBlock = typeof customCSS === 'string' ? customCSS.trim() : ''\n\n  // `color-scheme` makes native UI (form controls, scrollbars) match the theme and\n  // avoids a white flash on dark sites. Fixed mode → single scheme; toggle/auto → both.\n  const colorScheme =\n    allowColorModeToggle === false\n      ? colorMode === 'dark'\n        ? 'dark'\n        : 'light'\n      : 'light dark'\n  const colorSchemeBlock = `:root {\\n  color-scheme: ${colorScheme};\\n}`\n\n  const combinedCSS = [\n    criticalCSS,\n    colorSchemeBlock,\n    borderRadiusBlock,\n    themeConfigurationCSS,\n    colorModesCSS,\n    customCSSBlock,\n  ]\n    .filter((block) => Boolean(block?.trim?.().length))\n    .join('\\n\\n')\n\n  // <meta name=\"theme-color\"> colours the mobile browser chrome to match the page\n  // background. Emit per-scheme variants when the mode can change, otherwise a\n  // single tag matching the fixed mode.\n  const pick = (mode: typeof lightMode, key: 'background'): string | undefined => {\n    const value = (mode as Record<string, unknown> | null | undefined)?.[key]\n    return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined\n  }\n  const lightBg = pick(lightMode, 'background')\n  const darkBg = pick(darkMode, 'background')\n  const emitBothSchemes = allowColorModeToggle !== false || colorMode === 'auto'\n\n  return (\n    <>\n      <InitTheme />\n      {fontsHref && fontLoading === 'google' ? (\n        <>\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"\" />\n        </>\n      ) : null}\n      {/* `precedence` lets React 19 hoist the stylesheet into <head> and de-duplicate it. */}\n      {fontsHref ? <link rel=\"stylesheet\" href={fontsHref} precedence=\"theme-fonts\" /> : null}\n      {emitBothSchemes ? (\n        <>\n          {lightBg ? (\n            <meta name=\"theme-color\" media=\"(prefers-color-scheme: light)\" content={lightBg} />\n          ) : null}\n          {darkBg ? (\n            <meta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content={darkBg} />\n          ) : null}\n        </>\n      ) : (\n        (() => {\n          const fixed = colorMode === 'dark' ? darkBg : lightBg\n          return fixed ? <meta name=\"theme-color\" content={fixed} /> : null\n        })()\n      )}\n      <style\n        id=\"theme-critical-css\"\n        dangerouslySetInnerHTML={{\n          __html: combinedCSS,\n        }}\n      />\n    </>\n  )\n}\n"],"names":["buildThemeFontsHref","getBorderRadiusConfig","resolveThemeConfiguration","createFallbackCriticalCSS","getThemeCriticalCSS","generateThemeColorsCss","generateThemeCSS","InitTheme","ServerThemeInjector","themeConfiguration","fontLoading","apiRoute","resolvedConfiguration","fontsHref","fontSelections","mode","theme","borderRadius","customCSS","lightMode","darkMode","fontScale","spacing","animationLevel","allowColorModeToggle","colorMode","typography","visualEffects","componentStyles","normalizedThemeConfiguration","undefined","criticalCSS","borderRadiusConfig","cssRecord","css","borderRadiusCSS","Object","entries","map","property","value","join","borderRadiusBlock","themeConfigurationCSS","colorModesCSS","themeName","customCSSBlock","trim","colorScheme","colorSchemeBlock","combinedCSS","filter","block","Boolean","length","pick","key","lightBg","darkBg","emitBothSchemes","link","rel","href","crossOrigin","precedence","meta","name","media","content","fixed","style","id","dangerouslySetInnerHTML","__html"],"mappings":"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"}

package/dist/components/ThemeLivePreviewSync.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { ThemeFontLoading } from '../constants/themeFonts.js';
 interface ThemeLivePreviewSyncProps {
     initialData: Record<string, unknown>;
     serverURL: string;
@@ -5,6 +7,8 @@ interface ThemeLivePreviewSyncProps {
     depth?: number;
     themeConfigurationKey?: string;
     styleElementId?: string;
+    /** Same as ServerThemeInjector's `fontLoading`; use 'none' with next/font. */
+    fontLoading?: ThemeFontLoading;
 }
 export declare const ThemeLivePreviewSync: React.FC<ThemeLivePreviewSyncProps>;
 export {};

package/dist/components/ThemeLivePreviewSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeLivePreviewSync.d.ts","sourceRoot":"","sources":["../../src/components/ThemeLivePreviewSync.tsx"],"names":[],"mappings":"AASA,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA4CpE,CAAA"}
+{"version":3,"file":"ThemeLivePreviewSync.d.ts","sourceRoot":"","sources":["../../src/components/ThemeLivePreviewSync.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAMlE,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,gBAAgB,CAAA;CAC/B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA0EpE,CAAA"}