@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/components/ThemeLivePreviewSync.js

@@ -1,14 +1,15 @@
 'use client';
 import { useLivePreview } from '@payloadcms/live-preview-react';
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { buildLivePreviewThemeRuntime, extractThemeConfigurationFromLiveData } from '../utils/livePreviewThemeRuntime.js';
-export const ThemeLivePreviewSync = ({ initialData, serverURL, apiRoute, depth, themeConfigurationKey = 'themeConfiguration', styleElementId = 'theme-live-preview-css' })=>{
+export const ThemeLivePreviewSync = ({ initialData, serverURL, apiRoute, depth, themeConfigurationKey = 'themeConfiguration', styleElementId = 'theme-live-preview-css', fontLoading = 'self-hosted' })=>{
     const { data } = useLivePreview({
         apiRoute,
         depth,
         initialData,
         serverURL
     });
+    const appliedAttributes = useRef([]);
     const themeConfiguration = useMemo(()=>extractThemeConfigurationFromLiveData(data, themeConfigurationKey), [
         data,
         themeConfigurationKey
@@ -17,7 +18,7 @@ export const ThemeLivePreviewSync = ({ initialData, serverURL, apiRoute, depth,
         if (typeof document === 'undefined' || !themeConfiguration) {
             return;
         }
-        const runtime = buildLivePreviewThemeRuntime(themeConfiguration);
+        const runtime = buildLivePreviewThemeRuntime(themeConfiguration, apiRoute, fontLoading);
         let styleElement = document.getElementById(styleElementId);
         if (!styleElement) {
             styleElement = document.createElement('style');
@@ -25,6 +26,27 @@ export const ThemeLivePreviewSync = ({ initialData, serverURL, apiRoute, depth,
             document.head.appendChild(styleElement);
         }
         styleElement.innerHTML = runtime.css;
+        const fontsLinkId = `${styleElementId}-fonts`;
+        let fontsLink = document.getElementById(fontsLinkId);
+        const fontsAlreadyLoaded = runtime.fontsHref !== null && [
+            ...document.querySelectorAll('link[rel="stylesheet"]')
+        ].some((link)=>link !== fontsLink && link.getAttribute('href') === runtime.fontsHref);
+        if (runtime.fontsHref && !fontsAlreadyLoaded) {
+            if (!fontsLink) {
+                fontsLink = document.createElement('link');
+                fontsLink.id = fontsLinkId;
+                fontsLink.rel = 'stylesheet';
+                document.head.appendChild(fontsLink);
+            }
+            if (fontsLink.getAttribute('href') !== runtime.fontsHref) fontsLink.href = runtime.fontsHref;
+        } else {
+            fontsLink?.remove();
+        }
+        const root = document.documentElement;
+        // Drop style attributes that are no longer configured, then apply the current set.
+        appliedAttributes.current.filter((name)=>!(name in runtime.attributes)).forEach((name)=>root.removeAttribute(name));
+        Object.entries(runtime.attributes).forEach(([name, value])=>root.setAttribute(name, value));
+        appliedAttributes.current = Object.keys(runtime.attributes);
         document.documentElement.dataset.theme = runtime.theme;
         document.documentElement.dataset.colorMode = runtime.mode;
         document.documentElement.dataset.themeMode = runtime.mode;
@@ -32,7 +54,9 @@ export const ThemeLivePreviewSync = ({ initialData, serverURL, apiRoute, depth,
         document.documentElement.classList.add(runtime.mode);
     }, [
         themeConfiguration,
-        styleElementId
+        styleElementId,
+        apiRoute,
+        fontLoading
     ]);
     return null;
 };

package/dist/components/ThemeLivePreviewSync.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ThemeLivePreviewSync.tsx"],"sourcesContent":["'use client'\n\nimport { useLivePreview } from '@payloadcms/live-preview-react'\nimport { useEffect, useMemo } from 'react'\nimport {\n  buildLivePreviewThemeRuntime,\n  extractThemeConfigurationFromLiveData,\n} from '../utils/livePreviewThemeRuntime.js'\n\ninterface ThemeLivePreviewSyncProps {\n  initialData: Record<string, unknown>\n  serverURL: string\n  apiRoute?: string\n  depth?: number\n  themeConfigurationKey?: string\n  styleElementId?: string\n}\n\nexport const ThemeLivePreviewSync: React.FC<ThemeLivePreviewSyncProps> = ({\n  initialData,\n  serverURL,\n  apiRoute,\n  depth,\n  themeConfigurationKey = 'themeConfiguration',\n  styleElementId = 'theme-live-preview-css',\n}) => {\n  const { data } = useLivePreview<Record<string, unknown>>({\n    apiRoute,\n    depth,\n    initialData,\n    serverURL,\n  })\n\n  const themeConfiguration = useMemo(\n    () => extractThemeConfigurationFromLiveData(data, themeConfigurationKey),\n    [data, themeConfigurationKey],\n  )\n\n  useEffect(() => {\n    if (typeof document === 'undefined' || !themeConfiguration) {\n      return\n    }\n\n    const runtime = buildLivePreviewThemeRuntime(themeConfiguration)\n\n    let styleElement = document.getElementById(styleElementId) as HTMLStyleElement | null\n    if (!styleElement) {\n      styleElement = document.createElement('style')\n      styleElement.id = styleElementId\n      document.head.appendChild(styleElement)\n    }\n\n    styleElement.innerHTML = runtime.css\n\n    document.documentElement.dataset.theme = runtime.theme\n    document.documentElement.dataset.colorMode = runtime.mode\n    document.documentElement.dataset.themeMode = runtime.mode\n    document.documentElement.classList.remove('light', 'dark', 'auto')\n    document.documentElement.classList.add(runtime.mode)\n  }, [themeConfiguration, styleElementId])\n\n  return null\n}\n"],"names":["useLivePreview","useEffect","useMemo","buildLivePreviewThemeRuntime","extractThemeConfigurationFromLiveData","ThemeLivePreviewSync","initialData","serverURL","apiRoute","depth","themeConfigurationKey","styleElementId","data","themeConfiguration","document","runtime","styleElement","getElementById","createElement","id","head","appendChild","innerHTML","css","documentElement","dataset","theme","colorMode","mode","themeMode","classList","remove","add"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,iCAAgC;AAC/D,SAASC,SAAS,EAAEC,OAAO,QAAQ,QAAO;AAC1C,SACEC,4BAA4B,EAC5BC,qCAAqC,QAChC,sCAAqC;AAW5C,OAAO,MAAMC,uBAA4D,CAAC,EACxEC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,wBAAwB,oBAAoB,EAC5CC,iBAAiB,wBAAwB,EAC1C;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGZ,eAAwC;QACvDQ;QACAC;QACAH;QACAC;IACF;IAEA,MAAMM,qBAAqBX,QACzB,IAAME,sCAAsCQ,MAAMF,wBAClD;QAACE;QAAMF;KAAsB;IAG/BT,UAAU;QACR,IAAI,OAAOa,aAAa,eAAe,CAACD,oBAAoB;YAC1D;QACF;QAEA,MAAME,UAAUZ,6BAA6BU;QAE7C,IAAIG,eAAeF,SAASG,cAAc,CAACN;QAC3C,IAAI,CAACK,cAAc;YACjBA,eAAeF,SAASI,aAAa,CAAC;YACtCF,aAAaG,EAAE,GAAGR;YAClBG,SAASM,IAAI,CAACC,WAAW,CAACL;QAC5B;QAEAA,aAAaM,SAAS,GAAGP,QAAQQ,GAAG;QAEpCT,SAASU,eAAe,CAACC,OAAO,CAACC,KAAK,GAAGX,QAAQW,KAAK;QACtDZ,SAASU,eAAe,CAACC,OAAO,CAACE,SAAS,GAAGZ,QAAQa,IAAI;QACzDd,SAASU,eAAe,CAACC,OAAO,CAACI,SAAS,GAAGd,QAAQa,IAAI;QACzDd,SAASU,eAAe,CAACM,SAAS,CAACC,MAAM,CAAC,SAAS,QAAQ;QAC3DjB,SAASU,eAAe,CAACM,SAAS,CAACE,GAAG,CAACjB,QAAQa,IAAI;IACrD,GAAG;QAACf;QAAoBF;KAAe;IAEvC,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../src/components/ThemeLivePreviewSync.tsx"],"sourcesContent":["'use client'\n\nimport { useLivePreview } from '@payloadcms/live-preview-react'\nimport React, { useEffect, useMemo, useRef } from 'react'\nimport type { ThemeFontLoading } from '../constants/themeFonts.js'\nimport {\n  buildLivePreviewThemeRuntime,\n  extractThemeConfigurationFromLiveData,\n} from '../utils/livePreviewThemeRuntime.js'\n\ninterface ThemeLivePreviewSyncProps {\n  initialData: Record<string, unknown>\n  serverURL: string\n  apiRoute?: string\n  depth?: number\n  themeConfigurationKey?: string\n  styleElementId?: string\n  /** Same as ServerThemeInjector's `fontLoading`; use 'none' with next/font. */\n  fontLoading?: ThemeFontLoading\n}\n\nexport const ThemeLivePreviewSync: React.FC<ThemeLivePreviewSyncProps> = ({\n  initialData,\n  serverURL,\n  apiRoute,\n  depth,\n  themeConfigurationKey = 'themeConfiguration',\n  styleElementId = 'theme-live-preview-css',\n  fontLoading = 'self-hosted',\n}) => {\n  const { data } = useLivePreview<Record<string, unknown>>({\n    apiRoute,\n    depth,\n    initialData,\n    serverURL,\n  })\n\n  const appliedAttributes = useRef<string[]>([])\n\n  const themeConfiguration = useMemo(\n    () => extractThemeConfigurationFromLiveData(data, themeConfigurationKey),\n    [data, themeConfigurationKey],\n  )\n\n  useEffect(() => {\n    if (typeof document === 'undefined' || !themeConfiguration) {\n      return\n    }\n\n    const runtime = buildLivePreviewThemeRuntime(themeConfiguration, apiRoute, fontLoading)\n\n    let styleElement = document.getElementById(styleElementId) as HTMLStyleElement | null\n    if (!styleElement) {\n      styleElement = document.createElement('style')\n      styleElement.id = styleElementId\n      document.head.appendChild(styleElement)\n    }\n\n    styleElement.innerHTML = runtime.css\n\n    const fontsLinkId = `${styleElementId}-fonts`\n    let fontsLink = document.getElementById(fontsLinkId) as HTMLLinkElement | null\n    const fontsAlreadyLoaded =\n      runtime.fontsHref !== null &&\n      [...document.querySelectorAll<HTMLLinkElement>('link[rel=\"stylesheet\"]')].some(\n        (link) => link !== fontsLink && link.getAttribute('href') === runtime.fontsHref,\n      )\n    if (runtime.fontsHref && !fontsAlreadyLoaded) {\n      if (!fontsLink) {\n        fontsLink = document.createElement('link')\n        fontsLink.id = fontsLinkId\n        fontsLink.rel = 'stylesheet'\n        document.head.appendChild(fontsLink)\n      }\n      if (fontsLink.getAttribute('href') !== runtime.fontsHref) fontsLink.href = runtime.fontsHref\n    } else {\n      fontsLink?.remove()\n    }\n\n    const root = document.documentElement\n    // Drop style attributes that are no longer configured, then apply the current set.\n    appliedAttributes.current\n      .filter((name) => !(name in runtime.attributes))\n      .forEach((name) => root.removeAttribute(name))\n    Object.entries(runtime.attributes).forEach(([name, value]) => root.setAttribute(name, value))\n    appliedAttributes.current = Object.keys(runtime.attributes)\n\n    document.documentElement.dataset.theme = runtime.theme\n    document.documentElement.dataset.colorMode = runtime.mode\n    document.documentElement.dataset.themeMode = runtime.mode\n    document.documentElement.classList.remove('light', 'dark', 'auto')\n    document.documentElement.classList.add(runtime.mode)\n  }, [themeConfiguration, styleElementId, apiRoute, fontLoading])\n\n  return null\n}\n"],"names":["useLivePreview","React","useEffect","useMemo","useRef","buildLivePreviewThemeRuntime","extractThemeConfigurationFromLiveData","ThemeLivePreviewSync","initialData","serverURL","apiRoute","depth","themeConfigurationKey","styleElementId","fontLoading","data","appliedAttributes","themeConfiguration","document","runtime","styleElement","getElementById","createElement","id","head","appendChild","innerHTML","css","fontsLinkId","fontsLink","fontsAlreadyLoaded","fontsHref","querySelectorAll","some","link","getAttribute","rel","href","remove","root","documentElement","current","filter","name","attributes","forEach","removeAttribute","Object","entries","value","setAttribute","keys","dataset","theme","colorMode","mode","themeMode","classList","add"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,iCAAgC;AAC/D,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAO;AAEzD,SACEC,4BAA4B,EAC5BC,qCAAqC,QAChC,sCAAqC;AAa5C,OAAO,MAAMC,uBAA4D,CAAC,EACxEC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,wBAAwB,oBAAoB,EAC5CC,iBAAiB,wBAAwB,EACzCC,cAAc,aAAa,EAC5B;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGf,eAAwC;QACvDU;QACAC;QACAH;QACAC;IACF;IAEA,MAAMO,oBAAoBZ,OAAiB,EAAE;IAE7C,MAAMa,qBAAqBd,QACzB,IAAMG,sCAAsCS,MAAMH,wBAClD;QAACG;QAAMH;KAAsB;IAG/BV,UAAU;QACR,IAAI,OAAOgB,aAAa,eAAe,CAACD,oBAAoB;YAC1D;QACF;QAEA,MAAME,UAAUd,6BAA6BY,oBAAoBP,UAAUI;QAE3E,IAAIM,eAAeF,SAASG,cAAc,CAACR;QAC3C,IAAI,CAACO,cAAc;YACjBA,eAAeF,SAASI,aAAa,CAAC;YACtCF,aAAaG,EAAE,GAAGV;YAClBK,SAASM,IAAI,CAACC,WAAW,CAACL;QAC5B;QAEAA,aAAaM,SAAS,GAAGP,QAAQQ,GAAG;QAEpC,MAAMC,cAAc,GAAGf,eAAe,MAAM,CAAC;QAC7C,IAAIgB,YAAYX,SAASG,cAAc,CAACO;QACxC,MAAME,qBACJX,QAAQY,SAAS,KAAK,QACtB;eAAIb,SAASc,gBAAgB,CAAkB;SAA0B,CAACC,IAAI,CAC5E,CAACC,OAASA,SAASL,aAAaK,KAAKC,YAAY,CAAC,YAAYhB,QAAQY,SAAS;QAEnF,IAAIZ,QAAQY,SAAS,IAAI,CAACD,oBAAoB;YAC5C,IAAI,CAACD,WAAW;gBACdA,YAAYX,SAASI,aAAa,CAAC;gBACnCO,UAAUN,EAAE,GAAGK;gBACfC,UAAUO,GAAG,GAAG;gBAChBlB,SAASM,IAAI,CAACC,WAAW,CAACI;YAC5B;YACA,IAAIA,UAAUM,YAAY,CAAC,YAAYhB,QAAQY,SAAS,EAAEF,UAAUQ,IAAI,GAAGlB,QAAQY,SAAS;QAC9F,OAAO;YACLF,WAAWS;QACb;QAEA,MAAMC,OAAOrB,SAASsB,eAAe;QACrC,mFAAmF;QACnFxB,kBAAkByB,OAAO,CACtBC,MAAM,CAAC,CAACC,OAAS,CAAEA,CAAAA,QAAQxB,QAAQyB,UAAU,AAAD,GAC5CC,OAAO,CAAC,CAACF,OAASJ,KAAKO,eAAe,CAACH;QAC1CI,OAAOC,OAAO,CAAC7B,QAAQyB,UAAU,EAAEC,OAAO,CAAC,CAAC,CAACF,MAAMM,MAAM,GAAKV,KAAKW,YAAY,CAACP,MAAMM;QACtFjC,kBAAkByB,OAAO,GAAGM,OAAOI,IAAI,CAAChC,QAAQyB,UAAU;QAE1D1B,SAASsB,eAAe,CAACY,OAAO,CAACC,KAAK,GAAGlC,QAAQkC,KAAK;QACtDnC,SAASsB,eAAe,CAACY,OAAO,CAACE,SAAS,GAAGnC,QAAQoC,IAAI;QACzDrC,SAASsB,eAAe,CAACY,OAAO,CAACI,SAAS,GAAGrC,QAAQoC,IAAI;QACzDrC,SAASsB,eAAe,CAACiB,SAAS,CAACnB,MAAM,CAAC,SAAS,QAAQ;QAC3DpB,SAASsB,eAAe,CAACiB,SAAS,CAACC,GAAG,CAACvC,QAAQoC,IAAI;IACrD,GAAG;QAACtC;QAAoBJ;QAAgBH;QAAUI;KAAY;IAE9D,OAAO;AACT,EAAC"}

package/dist/components/ThemeSwitcher.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type ThemePreset } from '../presets.js';
+export type SwitchablePreset = Pick<ThemePreset, 'name' | 'label' | 'lightMode' | 'darkMode'>;
+export interface ThemeSwitcherProps {
+    /**
+     * Presets the visitor can switch between. Defaults to all bundled presets.
+     * Pass a curated subset for a focused switcher.
+     */
+    presets?: SwitchablePreset[];
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-label'?: string;
+    /** Persist the choice to localStorage and restore it on load. Default true. */
+    persist?: boolean;
+    /** Called after a preset is applied. */
+    onChange?: (presetName: string) => void;
+}
+/**
+ * Front-end theme-preset switcher. Lets visitors swap between bundled (or a
+ * curated subset of) theme presets at runtime by injecting the preset's colour
+ * CSS and updating `data-theme`. The choice is persisted to localStorage and
+ * restored on the next visit.
+ *
+ * Note: colour-mode (light/dark) is handled by {@link ColorModeToggle} and the
+ * SSR injector with no flash; preset switching re-applies on mount, so a brief
+ * flash to the SSR default can occur before the stored preset is restored.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeSwitcher } from '@kilivi/payloadcms-theme-management/components/ThemeSwitcher'
+ * <ThemeSwitcher presets={[oceanPreset, forestPreset]} />
+ * ```
+ */
+export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/ThemeSwitcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAMjE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAE7F,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAuBD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6DtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/components/ThemeSwitcher.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import { allThemePresets } from '../presets.js';
+import { themeLocalStorageKey } from '../providers/Theme/shared.js';
+import { generateThemeColorsCss } from '../utils/themeColors.js';
+const STYLE_ID = 'tm-theme-switcher-css';
+const applyPreset = (preset)=>{
+    if (typeof document === 'undefined') return;
+    // Generate with the preset name so selectors match `:root[data-theme='name']`
+    // and override the SSR-injected theme (same specificity, injected later wins).
+    const css = generateThemeColorsCss({
+        themeName: preset.name,
+        lightMode: preset.lightMode,
+        darkMode: preset.darkMode
+    });
+    let styleElement = document.getElementById(STYLE_ID);
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.id = STYLE_ID;
+        document.head.appendChild(styleElement);
+    }
+    styleElement.innerHTML = css;
+    document.documentElement.setAttribute('data-theme', preset.name);
+};
+/**
+ * Front-end theme-preset switcher. Lets visitors swap between bundled (or a
+ * curated subset of) theme presets at runtime by injecting the preset's colour
+ * CSS and updating `data-theme`. The choice is persisted to localStorage and
+ * restored on the next visit.
+ *
+ * Note: colour-mode (light/dark) is handled by {@link ColorModeToggle} and the
+ * SSR injector with no flash; preset switching re-applies on mount, so a brief
+ * flash to the SSR default can occur before the stored preset is restored.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeSwitcher } from '@kilivi/payloadcms-theme-management/components/ThemeSwitcher'
+ * <ThemeSwitcher presets={[oceanPreset, forestPreset]} />
+ * ```
+ */ export const ThemeSwitcher = ({ presets, className, style, 'aria-label': ariaLabel, persist = true, onChange })=>{
+    const list = presets && presets.length > 0 ? presets : allThemePresets;
+    const [selected, setSelected] = useState('');
+    // Restore the stored preset (or reflect the current data-theme) after mount.
+    useEffect(()=>{
+        if (typeof document === 'undefined') return;
+        const current = document.documentElement.getAttribute('data-theme') ?? '';
+        const stored = persist ? window.localStorage.getItem(themeLocalStorageKey) : null;
+        const initial = stored && list.some((p)=>p.name === stored) ? stored : current;
+        if (initial) {
+            setSelected(initial);
+            const preset = list.find((p)=>p.name === initial);
+            // Only re-inject when the stored preset differs from what SSR rendered.
+            if (preset && stored && stored !== current) {
+                applyPreset(preset);
+            }
+        }
+    // Intentionally run once on mount to restore the persisted preset.
+    }, []);
+    const handleChange = useCallback((event)=>{
+        const name = event.target.value;
+        const preset = list.find((p)=>p.name === name);
+        if (!preset) return;
+        setSelected(name);
+        applyPreset(preset);
+        if (persist) {
+            window.localStorage.setItem(themeLocalStorageKey, name);
+        }
+        onChange?.(name);
+    }, [
+        list,
+        persist,
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsx("select", {
+        value: selected,
+        onChange: handleChange,
+        className: className,
+        style: style,
+        "aria-label": ariaLabel ?? 'Select theme',
+        children: list.map((preset)=>/*#__PURE__*/ _jsx("option", {
+                value: preset.name,
+                children: preset.label
+            }, preset.name))
+    });
+};
+export default ThemeSwitcher;
+
+//# sourceMappingURL=ThemeSwitcher.js.map

package/dist/components/ThemeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ThemeSwitcher.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { allThemePresets, type ThemePreset } from '../presets.js'\nimport { themeLocalStorageKey } from '../providers/Theme/shared.js'\nimport { generateThemeColorsCss } from '../utils/themeColors.js'\n\nconst STYLE_ID = 'tm-theme-switcher-css'\n\nexport type SwitchablePreset = Pick<ThemePreset, 'name' | 'label' | 'lightMode' | 'darkMode'>\n\nexport interface ThemeSwitcherProps {\n  /**\n   * Presets the visitor can switch between. Defaults to all bundled presets.\n   * Pass a curated subset for a focused switcher.\n   */\n  presets?: SwitchablePreset[]\n  className?: string\n  style?: React.CSSProperties\n  'aria-label'?: string\n  /** Persist the choice to localStorage and restore it on load. Default true. */\n  persist?: boolean\n  /** Called after a preset is applied. */\n  onChange?: (presetName: string) => void\n}\n\nconst applyPreset = (preset: SwitchablePreset): void => {\n  if (typeof document === 'undefined') return\n\n  // Generate with the preset name so selectors match `:root[data-theme='name']`\n  // and override the SSR-injected theme (same specificity, injected later wins).\n  const css = generateThemeColorsCss({\n    themeName: preset.name,\n    lightMode: preset.lightMode,\n    darkMode: preset.darkMode,\n  })\n\n  let styleElement = document.getElementById(STYLE_ID) as HTMLStyleElement | null\n  if (!styleElement) {\n    styleElement = document.createElement('style')\n    styleElement.id = STYLE_ID\n    document.head.appendChild(styleElement)\n  }\n  styleElement.innerHTML = css\n  document.documentElement.setAttribute('data-theme', preset.name)\n}\n\n/**\n * Front-end theme-preset switcher. Lets visitors swap between bundled (or a\n * curated subset of) theme presets at runtime by injecting the preset's colour\n * CSS and updating `data-theme`. The choice is persisted to localStorage and\n * restored on the next visit.\n *\n * Note: colour-mode (light/dark) is handled by {@link ColorModeToggle} and the\n * SSR injector with no flash; preset switching re-applies on mount, so a brief\n * flash to the SSR default can occur before the stored preset is restored.\n *\n * @example\n * ```tsx\n * import { ThemeSwitcher } from '@kilivi/payloadcms-theme-management/components/ThemeSwitcher'\n * <ThemeSwitcher presets={[oceanPreset, forestPreset]} />\n * ```\n */\nexport const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({\n  presets,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  persist = true,\n  onChange,\n}) => {\n  const list: SwitchablePreset[] = presets && presets.length > 0 ? presets : allThemePresets\n  const [selected, setSelected] = useState<string>('')\n\n  // Restore the stored preset (or reflect the current data-theme) after mount.\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    const current = document.documentElement.getAttribute('data-theme') ?? ''\n    const stored = persist ? window.localStorage.getItem(themeLocalStorageKey) : null\n    const initial = stored && list.some((p) => p.name === stored) ? stored : current\n\n    if (initial) {\n      setSelected(initial)\n      const preset = list.find((p) => p.name === initial)\n      // Only re-inject when the stored preset differs from what SSR rendered.\n      if (preset && stored && stored !== current) {\n        applyPreset(preset)\n      }\n    }\n    // Intentionally run once on mount to restore the persisted preset.\n  }, [])\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) => {\n      const name = event.target.value\n      const preset = list.find((p) => p.name === name)\n      if (!preset) return\n\n      setSelected(name)\n      applyPreset(preset)\n      if (persist) {\n        window.localStorage.setItem(themeLocalStorageKey, name)\n      }\n      onChange?.(name)\n    },\n    [list, persist, onChange],\n  )\n\n  return (\n    <select\n      value={selected}\n      onChange={handleChange}\n      className={className}\n      style={style}\n      aria-label={ariaLabel ?? 'Select theme'}\n    >\n      {list.map((preset) => (\n        <option key={preset.name} value={preset.name}>\n          {preset.label}\n        </option>\n      ))}\n    </select>\n  )\n}\n\nexport default ThemeSwitcher\n"],"names":["React","useCallback","useEffect","useState","allThemePresets","themeLocalStorageKey","generateThemeColorsCss","STYLE_ID","applyPreset","preset","document","css","themeName","name","lightMode","darkMode","styleElement","getElementById","createElement","id","head","appendChild","innerHTML","documentElement","setAttribute","ThemeSwitcher","presets","className","style","ariaLabel","persist","onChange","list","length","selected","setSelected","current","getAttribute","stored","window","localStorage","getItem","initial","some","p","find","handleChange","event","target","value","setItem","select","aria-label","map","option","label"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAC/D,SAASC,eAAe,QAA0B,gBAAe;AACjE,SAASC,oBAAoB,QAAQ,+BAA8B;AACnE,SAASC,sBAAsB,QAAQ,0BAAyB;AAEhE,MAAMC,WAAW;AAmBjB,MAAMC,cAAc,CAACC;IACnB,IAAI,OAAOC,aAAa,aAAa;IAErC,8EAA8E;IAC9E,+EAA+E;IAC/E,MAAMC,MAAML,uBAAuB;QACjCM,WAAWH,OAAOI,IAAI;QACtBC,WAAWL,OAAOK,SAAS;QAC3BC,UAAUN,OAAOM,QAAQ;IAC3B;IAEA,IAAIC,eAAeN,SAASO,cAAc,CAACV;IAC3C,IAAI,CAACS,cAAc;QACjBA,eAAeN,SAASQ,aAAa,CAAC;QACtCF,aAAaG,EAAE,GAAGZ;QAClBG,SAASU,IAAI,CAACC,WAAW,CAACL;IAC5B;IACAA,aAAaM,SAAS,GAAGX;IACzBD,SAASa,eAAe,CAACC,YAAY,CAAC,cAAcf,OAAOI,IAAI;AACjE;AAEA;;;;;;;;;;;;;;;CAeC,GACD,OAAO,MAAMY,gBAA8C,CAAC,EAC1DC,OAAO,EACPC,SAAS,EACTC,KAAK,EACL,cAAcC,SAAS,EACvBC,UAAU,IAAI,EACdC,QAAQ,EACT;IACC,MAAMC,OAA2BN,WAAWA,QAAQO,MAAM,GAAG,IAAIP,UAAUtB;IAC3E,MAAM,CAAC8B,UAAUC,YAAY,GAAGhC,SAAiB;IAEjD,6EAA6E;IAC7ED,UAAU;QACR,IAAI,OAAOQ,aAAa,aAAa;QAErC,MAAM0B,UAAU1B,SAASa,eAAe,CAACc,YAAY,CAAC,iBAAiB;QACvE,MAAMC,SAASR,UAAUS,OAAOC,YAAY,CAACC,OAAO,CAACpC,wBAAwB;QAC7E,MAAMqC,UAAUJ,UAAUN,KAAKW,IAAI,CAAC,CAACC,IAAMA,EAAE/B,IAAI,KAAKyB,UAAUA,SAASF;QAEzE,IAAIM,SAAS;YACXP,YAAYO;YACZ,MAAMjC,SAASuB,KAAKa,IAAI,CAAC,CAACD,IAAMA,EAAE/B,IAAI,KAAK6B;YAC3C,wEAAwE;YACxE,IAAIjC,UAAU6B,UAAUA,WAAWF,SAAS;gBAC1C5B,YAAYC;YACd;QACF;IACA,mEAAmE;IACrE,GAAG,EAAE;IAEL,MAAMqC,eAAe7C,YACnB,CAAC8C;QACC,MAAMlC,OAAOkC,MAAMC,MAAM,CAACC,KAAK;QAC/B,MAAMxC,SAASuB,KAAKa,IAAI,CAAC,CAACD,IAAMA,EAAE/B,IAAI,KAAKA;QAC3C,IAAI,CAACJ,QAAQ;QAEb0B,YAAYtB;QACZL,YAAYC;QACZ,IAAIqB,SAAS;YACXS,OAAOC,YAAY,CAACU,OAAO,CAAC7C,sBAAsBQ;QACpD;QACAkB,WAAWlB;IACb,GACA;QAACmB;QAAMF;QAASC;KAAS;IAG3B,qBACE,KAACoB;QACCF,OAAOf;QACPH,UAAUe;QACVnB,WAAWA;QACXC,OAAOA;QACPwB,cAAYvB,aAAa;kBAExBG,KAAKqB,GAAG,CAAC,CAAC5C,uBACT,KAAC6C;gBAAyBL,OAAOxC,OAAOI,IAAI;0BACzCJ,OAAO8C,KAAK;eADF9C,OAAOI,IAAI;;AAMhC,EAAC;AAED,eAAeY,cAAa"}

package/dist/components/typographyPreviewUtils.d.ts

@@ -5,12 +5,17 @@ export interface TypographySelection {
     headingFontCustom?: string | null;
     baseFontSize?: string | null;
     lineHeight?: string | null;
+    headingWeight?: string | null;
+    letterSpacing?: string | null;
 }
 export interface ResolvedTypographyPreview {
     bodyFont: string;
     headingFont: string;
     baseFontSize: string;
     lineHeight: string;
+    headingWeight: string;
+    headingLetterSpacing: string;
+    headingTransform: 'none' | 'uppercase';
     bodyLabel: string;
     headingLabel: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"typographyPreviewUtils.d.ts","sourceRoot":"","sources":["../../src/components/typographyPreviewUtils.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAyED,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EACjD,SAAS,CAAC,EAAE,MAAM,GACjB,yBAAyB,CAmC3B"}
+{"version":3,"file":"typographyPreviewUtils.d.ts","sourceRoot":"","sources":["../../src/components/typographyPreviewUtils.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,GAAG,WAAW,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AA+ED,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EACjD,SAAS,CAAC,EAAE,MAAM,GACjB,yBAAyB,CAyC3B"}

package/dist/components/typographyPreviewUtils.js

@@ -1,24 +1,33 @@
-import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '../constants/themeFonts.js';
+import { BODY_FONT_OPTIONS, getFontCatalogEntry, HEADING_FONT_OPTIONS, LETTER_SPACING_TO_CSS, toFontSizeCss } from '../constants/themeFonts.js';
 import { defaultThemePresets } from '../presets.js';
 const FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool';
 const fallbackPreset = defaultThemePresets.find((preset)=>preset.name === FALLBACK_THEME) ?? defaultThemePresets[0];
 const FONT_VAR_FALLBACK = {
+    'var(--font-inter)': '"Inter", system-ui, sans-serif',
     'var(--font-geist-sans)': '"Geist Sans", system-ui, sans-serif',
     'var(--font-geist-mono)': '"Geist Mono", SFMono-Regular, ui-monospace, monospace',
-    'var(--font-inter)': '"Inter", system-ui, sans-serif',
+    'var(--font-roboto)': '"Roboto", system-ui, sans-serif',
+    'var(--font-open-sans)': '"Open Sans", system-ui, sans-serif',
+    'var(--font-lato)': '"Lato", system-ui, sans-serif',
+    'var(--font-montserrat)': '"Montserrat", system-ui, sans-serif',
+    'var(--font-poppins)': '"Poppins", system-ui, sans-serif',
     'var(--font-outfit)': '"Outfit", system-ui, sans-serif',
     'var(--font-playfair)': '"Playfair Display", "Times New Roman", serif',
+    'var(--font-merriweather)': '"Merriweather", "Times New Roman", serif',
+    'var(--font-raleway)': '"Raleway", system-ui, sans-serif',
     'var(--font-lora)': '"Lora", "Times New Roman", serif',
     'var(--font-manrope)': '"Manrope", system-ui, sans-serif',
     'var(--font-urbanist)': '"Urbanist", system-ui, sans-serif'
 };
 function withFallback(fontFamily, fallback) {
-    if (!fontFamily) return fallback;
-    if (fontFamily.startsWith('var(')) {
-        const mappedFallback = FONT_VAR_FALLBACK[fontFamily] ?? fallback;
-        return `${fontFamily}, ${mappedFallback}`;
-    }
-    return fontFamily;
+    const value = fontFamily?.trim() || fallback;
+    // A `var(--font-x)` without a fallback whose variable is not defined (always the
+    // case in the admin) makes the whole font-family declaration invalid. Give every
+    // such reference a fallback stack so the preview always renders a real face.
+    return value.replace(/var\((--[\w-]+)\)/g, (match, name)=>{
+        const mapped = FONT_VAR_FALLBACK[match] ?? 'system-ui, sans-serif';
+        return `var(${name}, ${mapped})`;
+    });
 }
 function getPresetTypography(themeName) {
     const preset = defaultThemePresets.find((item)=>item.name === themeName) ?? fallbackPreset;
@@ -34,9 +43,10 @@ function resolveFontFamily(value, customValue, fallback) {
         }
         return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif');
     }
-    const preconfigured = FONT_VALUE_TO_CSS[value];
+    // Catalog stacks are complete (variable with fallback + generic family).
+    const preconfigured = getFontCatalogEntry(value)?.fontFamily;
     if (preconfigured) {
-        return withFallback(preconfigured, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif');
+        return preconfigured;
     }
     return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif');
 }
@@ -60,13 +70,16 @@ export function resolveTypographyPreview(selection, themeName) {
     const headingFontCustom = selection?.headingFontCustom ?? undefined;
     const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody);
     const resolvedHeadingFont = resolveFontFamily(headingFontValue, headingFontCustom, fallbackHeading);
-    const baseFontSize = selection?.baseFontSize && selection.baseFontSize !== 'preset' ? selection.baseFontSize : fallbackSize;
+    const baseFontSize = toFontSizeCss(selection?.baseFontSize) ?? fallbackSize;
     const lineHeight = selection?.lineHeight && selection.lineHeight !== 'preset' ? selection.lineHeight : fallbackLineHeight;
     return {
         bodyFont: resolvedBodyFont,
         headingFont: resolvedHeadingFont,
         baseFontSize,
         lineHeight,
+        headingWeight: selection?.headingWeight && selection.headingWeight !== 'preset' ? selection.headingWeight : presetTypography?.headingWeight ?? '700',
+        headingLetterSpacing: (selection?.letterSpacing && LETTER_SPACING_TO_CSS[selection.letterSpacing]) ?? presetTypography?.headingLetterSpacing ?? 'normal',
+        headingTransform: selection?.letterSpacing === 'wider' ? 'uppercase' : 'none',
         bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),
         headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue)
     };

package/dist/components/typographyPreviewUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/typographyPreviewUtils.ts"],"sourcesContent":["import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '../constants/themeFonts.js'\nimport { defaultThemePresets } from '../presets.js'\n\nexport interface TypographySelection {\n  bodyFont?: string | null\n  headingFont?: string | null\n  bodyFontCustom?: string | null\n  headingFontCustom?: string | null\n  baseFontSize?: string | null\n  lineHeight?: string | null\n}\n\nexport interface ResolvedTypographyPreview {\n  bodyFont: string\n  headingFont: string\n  baseFontSize: string\n  lineHeight: string\n  bodyLabel: string\n  headingLabel: string\n}\n\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\nconst fallbackPreset =\n  defaultThemePresets.find((preset) => preset.name === FALLBACK_THEME) ?? defaultThemePresets[0]\n\nconst FONT_VAR_FALLBACK: Record<string, string> = {\n  'var(--font-geist-sans)': '\"Geist Sans\", system-ui, sans-serif',\n  'var(--font-geist-mono)': '\"Geist Mono\", SFMono-Regular, ui-monospace, monospace',\n  'var(--font-inter)': '\"Inter\", system-ui, sans-serif',\n  'var(--font-outfit)': '\"Outfit\", system-ui, sans-serif',\n  'var(--font-playfair)': '\"Playfair Display\", \"Times New Roman\", serif',\n  'var(--font-lora)': '\"Lora\", \"Times New Roman\", serif',\n  'var(--font-manrope)': '\"Manrope\", system-ui, sans-serif',\n  'var(--font-urbanist)': '\"Urbanist\", system-ui, sans-serif',\n}\n\nfunction withFallback(fontFamily: string, fallback: string): string {\n  if (!fontFamily) return fallback\n\n  if (fontFamily.startsWith('var(')) {\n    const mappedFallback = FONT_VAR_FALLBACK[fontFamily] ?? fallback\n    return `${fontFamily}, ${mappedFallback}`\n  }\n\n  return fontFamily\n}\n\nfunction getPresetTypography(themeName?: string) {\n  const preset = defaultThemePresets.find((item) => item.name === themeName) ?? fallbackPreset\n  return preset?.typography\n}\n\nfunction resolveFontFamily(\n  value: string | null | undefined,\n  customValue: string | null | undefined,\n  fallback: string,\n): string {\n  if (!value || value === 'preset') {\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n  }\n\n  if (value === 'custom') {\n    if (customValue && customValue.trim().length > 0) {\n      return customValue.trim()\n    }\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n  }\n\n  const preconfigured = FONT_VALUE_TO_CSS[value]\n  if (preconfigured) {\n    return withFallback(\n      preconfigured,\n      fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif',\n    )\n  }\n\n  return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n}\n\nfunction resolveOptionLabel(\n  options: ReadonlyArray<{ label: string | Record<string, string>; value: string }>,\n  value?: string | null,\n  locale: 'en' | 'cs' = 'en',\n): string {\n  const option = options.find((item) => item.value === value)\n  if (!option) return value ?? ''\n  if (typeof option.label === 'string') {\n    return option.label\n  }\n  return option.label?.[locale] ?? Object.values(option.label)[0] ?? option.value\n}\n\nexport function resolveTypographyPreview(\n  selection: TypographySelection | null | undefined,\n  themeName?: string,\n): ResolvedTypographyPreview {\n  const presetTypography = getPresetTypography(themeName)\n  const fallbackBody = presetTypography?.fontFamily ?? 'system-ui, sans-serif'\n  const fallbackHeading = presetTypography?.headingFamily ?? fallbackBody\n  const fallbackSize = presetTypography?.baseFontSize ?? '16px'\n  const fallbackLineHeight = presetTypography?.lineHeight ?? '1.6'\n\n  const bodyFontValue = selection?.bodyFont ?? 'preset'\n  const headingFontValue = selection?.headingFont ?? 'preset'\n  const bodyFontCustom = selection?.bodyFontCustom ?? undefined\n  const headingFontCustom = selection?.headingFontCustom ?? undefined\n  const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody)\n  const resolvedHeadingFont = resolveFontFamily(\n    headingFontValue,\n    headingFontCustom,\n    fallbackHeading,\n  )\n\n  const baseFontSize =\n    selection?.baseFontSize && selection.baseFontSize !== 'preset'\n      ? selection.baseFontSize\n      : fallbackSize\n  const lineHeight =\n    selection?.lineHeight && selection.lineHeight !== 'preset'\n      ? selection.lineHeight\n      : fallbackLineHeight\n\n  return {\n    bodyFont: resolvedBodyFont,\n    headingFont: resolvedHeadingFont,\n    baseFontSize,\n    lineHeight,\n    bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),\n    headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue),\n  }\n}\n"],"names":["BODY_FONT_OPTIONS","FONT_VALUE_TO_CSS","HEADING_FONT_OPTIONS","defaultThemePresets","FALLBACK_THEME","name","fallbackPreset","find","preset","FONT_VAR_FALLBACK","withFallback","fontFamily","fallback","startsWith","mappedFallback","getPresetTypography","themeName","item","typography","resolveFontFamily","value","customValue","trim","length","preconfigured","resolveOptionLabel","options","locale","option","label","Object","values","resolveTypographyPreview","selection","presetTypography","fallbackBody","fallbackHeading","headingFamily","fallbackSize","baseFontSize","fallbackLineHeight","lineHeight","bodyFontValue","bodyFont","headingFontValue","headingFont","bodyFontCustom","undefined","headingFontCustom","resolvedBodyFont","resolvedHeadingFont","bodyLabel","headingLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/typographyPreviewUtils.ts"],"sourcesContent":["import {\n  BODY_FONT_OPTIONS,\n  getFontCatalogEntry,\n  HEADING_FONT_OPTIONS,\n  LETTER_SPACING_TO_CSS,\n  toFontSizeCss,\n} from '../constants/themeFonts.js'\nimport { defaultThemePresets } from '../presets.js'\n\nexport interface TypographySelection {\n  bodyFont?: string | null\n  headingFont?: string | null\n  bodyFontCustom?: string | null\n  headingFontCustom?: string | null\n  baseFontSize?: string | null\n  lineHeight?: string | null\n  headingWeight?: string | null\n  letterSpacing?: string | null\n}\n\nexport interface ResolvedTypographyPreview {\n  bodyFont: string\n  headingFont: string\n  baseFontSize: string\n  lineHeight: string\n  headingWeight: string\n  headingLetterSpacing: string\n  headingTransform: 'none' | 'uppercase'\n  bodyLabel: string\n  headingLabel: string\n}\n\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\nconst fallbackPreset =\n  defaultThemePresets.find((preset) => preset.name === FALLBACK_THEME) ?? defaultThemePresets[0]\n\nconst FONT_VAR_FALLBACK: Record<string, string> = {\n  'var(--font-inter)': '\"Inter\", system-ui, sans-serif',\n  'var(--font-geist-sans)': '\"Geist Sans\", system-ui, sans-serif',\n  'var(--font-geist-mono)': '\"Geist Mono\", SFMono-Regular, ui-monospace, monospace',\n  'var(--font-roboto)': '\"Roboto\", system-ui, sans-serif',\n  'var(--font-open-sans)': '\"Open Sans\", system-ui, sans-serif',\n  'var(--font-lato)': '\"Lato\", system-ui, sans-serif',\n  'var(--font-montserrat)': '\"Montserrat\", system-ui, sans-serif',\n  'var(--font-poppins)': '\"Poppins\", system-ui, sans-serif',\n  'var(--font-outfit)': '\"Outfit\", system-ui, sans-serif',\n  'var(--font-playfair)': '\"Playfair Display\", \"Times New Roman\", serif',\n  'var(--font-merriweather)': '\"Merriweather\", \"Times New Roman\", serif',\n  'var(--font-raleway)': '\"Raleway\", system-ui, sans-serif',\n  'var(--font-lora)': '\"Lora\", \"Times New Roman\", serif',\n  'var(--font-manrope)': '\"Manrope\", system-ui, sans-serif',\n  'var(--font-urbanist)': '\"Urbanist\", system-ui, sans-serif',\n}\n\nfunction withFallback(fontFamily: string, fallback: string): string {\n  const value = fontFamily?.trim() || fallback\n\n  // A `var(--font-x)` without a fallback whose variable is not defined (always the\n  // case in the admin) makes the whole font-family declaration invalid. Give every\n  // such reference a fallback stack so the preview always renders a real face.\n  return value.replace(/var\\((--[\\w-]+)\\)/g, (match, name: string) => {\n    const mapped = FONT_VAR_FALLBACK[match] ?? 'system-ui, sans-serif'\n    return `var(${name}, ${mapped})`\n  })\n}\n\nfunction getPresetTypography(themeName?: string) {\n  const preset = defaultThemePresets.find((item) => item.name === themeName) ?? fallbackPreset\n  return preset?.typography\n}\n\nfunction resolveFontFamily(\n  value: string | null | undefined,\n  customValue: string | null | undefined,\n  fallback: string,\n): string {\n  if (!value || value === 'preset') {\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n  }\n\n  if (value === 'custom') {\n    if (customValue && customValue.trim().length > 0) {\n      return customValue.trim()\n    }\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n  }\n\n  // Catalog stacks are complete (variable with fallback + generic family).\n  const preconfigured = getFontCatalogEntry(value)?.fontFamily\n  if (preconfigured) {\n    return preconfigured\n  }\n\n  return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n}\n\nfunction resolveOptionLabel(\n  options: ReadonlyArray<{ label: string | Record<string, string>; value: string }>,\n  value?: string | null,\n  locale: 'en' | 'cs' = 'en',\n): string {\n  const option = options.find((item) => item.value === value)\n  if (!option) return value ?? ''\n  if (typeof option.label === 'string') {\n    return option.label\n  }\n  return option.label?.[locale] ?? Object.values(option.label)[0] ?? option.value\n}\n\nexport function resolveTypographyPreview(\n  selection: TypographySelection | null | undefined,\n  themeName?: string,\n): ResolvedTypographyPreview {\n  const presetTypography = getPresetTypography(themeName)\n  const fallbackBody = presetTypography?.fontFamily ?? 'system-ui, sans-serif'\n  const fallbackHeading = presetTypography?.headingFamily ?? fallbackBody\n  const fallbackSize = presetTypography?.baseFontSize ?? '16px'\n  const fallbackLineHeight = presetTypography?.lineHeight ?? '1.6'\n\n  const bodyFontValue = selection?.bodyFont ?? 'preset'\n  const headingFontValue = selection?.headingFont ?? 'preset'\n  const bodyFontCustom = selection?.bodyFontCustom ?? undefined\n  const headingFontCustom = selection?.headingFontCustom ?? undefined\n  const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody)\n  const resolvedHeadingFont = resolveFontFamily(\n    headingFontValue,\n    headingFontCustom,\n    fallbackHeading,\n  )\n\n  const baseFontSize = toFontSizeCss(selection?.baseFontSize) ?? fallbackSize\n  const lineHeight =\n    selection?.lineHeight && selection.lineHeight !== 'preset'\n      ? selection.lineHeight\n      : fallbackLineHeight\n\n  return {\n    bodyFont: resolvedBodyFont,\n    headingFont: resolvedHeadingFont,\n    baseFontSize,\n    lineHeight,\n    headingWeight:\n      selection?.headingWeight && selection.headingWeight !== 'preset'\n        ? selection.headingWeight\n        : (presetTypography?.headingWeight ?? '700'),\n    headingLetterSpacing:\n      (selection?.letterSpacing && LETTER_SPACING_TO_CSS[selection.letterSpacing]) ??\n      presetTypography?.headingLetterSpacing ??\n      'normal',\n    headingTransform: selection?.letterSpacing === 'wider' ? 'uppercase' : 'none',\n    bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),\n    headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue),\n  }\n}\n"],"names":["BODY_FONT_OPTIONS","getFontCatalogEntry","HEADING_FONT_OPTIONS","LETTER_SPACING_TO_CSS","toFontSizeCss","defaultThemePresets","FALLBACK_THEME","name","fallbackPreset","find","preset","FONT_VAR_FALLBACK","withFallback","fontFamily","fallback","value","trim","replace","match","mapped","getPresetTypography","themeName","item","typography","resolveFontFamily","customValue","length","preconfigured","resolveOptionLabel","options","locale","option","label","Object","values","resolveTypographyPreview","selection","presetTypography","fallbackBody","fallbackHeading","headingFamily","fallbackSize","baseFontSize","fallbackLineHeight","lineHeight","bodyFontValue","bodyFont","headingFontValue","headingFont","bodyFontCustom","undefined","headingFontCustom","resolvedBodyFont","resolvedHeadingFont","headingWeight","headingLetterSpacing","letterSpacing","headingTransform","bodyLabel","headingLabel"],"mappings":"AAAA,SACEA,iBAAiB,EACjBC,mBAAmB,EACnBC,oBAAoB,EACpBC,qBAAqB,EACrBC,aAAa,QACR,6BAA4B;AACnC,SAASC,mBAAmB,QAAQ,gBAAe;AAyBnD,MAAMC,iBAAiBD,mBAAmB,CAAC,EAAE,EAAEE,QAAQ;AACvD,MAAMC,iBACJH,oBAAoBI,IAAI,CAAC,CAACC,SAAWA,OAAOH,IAAI,KAAKD,mBAAmBD,mBAAmB,CAAC,EAAE;AAEhG,MAAMM,oBAA4C;IAChD,qBAAqB;IACrB,0BAA0B;IAC1B,0BAA0B;IAC1B,sBAAsB;IACtB,yBAAyB;IACzB,oBAAoB;IACpB,0BAA0B;IAC1B,uBAAuB;IACvB,sBAAsB;IACtB,wBAAwB;IACxB,4BAA4B;IAC5B,uBAAuB;IACvB,oBAAoB;IACpB,uBAAuB;IACvB,wBAAwB;AAC1B;AAEA,SAASC,aAAaC,UAAkB,EAAEC,QAAgB;IACxD,MAAMC,QAAQF,YAAYG,UAAUF;IAEpC,iFAAiF;IACjF,iFAAiF;IACjF,6EAA6E;IAC7E,OAAOC,MAAME,OAAO,CAAC,sBAAsB,CAACC,OAAOX;QACjD,MAAMY,SAASR,iBAAiB,CAACO,MAAM,IAAI;QAC3C,OAAO,CAAC,IAAI,EAAEX,KAAK,EAAE,EAAEY,OAAO,CAAC,CAAC;IAClC;AACF;AAEA,SAASC,oBAAoBC,SAAkB;IAC7C,MAAMX,SAASL,oBAAoBI,IAAI,CAAC,CAACa,OAASA,KAAKf,IAAI,KAAKc,cAAcb;IAC9E,OAAOE,QAAQa;AACjB;AAEA,SAASC,kBACPT,KAAgC,EAChCU,WAAsC,EACtCX,QAAgB;IAEhB,IAAI,CAACC,SAASA,UAAU,UAAU;QAChC,OAAOH,aAAaE,UAAUN,gBAAgBe,YAAYV,cAAc;IAC1E;IAEA,IAAIE,UAAU,UAAU;QACtB,IAAIU,eAAeA,YAAYT,IAAI,GAAGU,MAAM,GAAG,GAAG;YAChD,OAAOD,YAAYT,IAAI;QACzB;QACA,OAAOJ,aAAaE,UAAUN,gBAAgBe,YAAYV,cAAc;IAC1E;IAEA,yEAAyE;IACzE,MAAMc,gBAAgB1B,oBAAoBc,QAAQF;IAClD,IAAIc,eAAe;QACjB,OAAOA;IACT;IAEA,OAAOf,aAAaE,UAAUN,gBAAgBe,YAAYV,cAAc;AAC1E;AAEA,SAASe,mBACPC,OAAiF,EACjFd,KAAqB,EACrBe,SAAsB,IAAI;IAE1B,MAAMC,SAASF,QAAQpB,IAAI,CAAC,CAACa,OAASA,KAAKP,KAAK,KAAKA;IACrD,IAAI,CAACgB,QAAQ,OAAOhB,SAAS;IAC7B,IAAI,OAAOgB,OAAOC,KAAK,KAAK,UAAU;QACpC,OAAOD,OAAOC,KAAK;IACrB;IACA,OAAOD,OAAOC,KAAK,EAAE,CAACF,OAAO,IAAIG,OAAOC,MAAM,CAACH,OAAOC,KAAK,CAAC,CAAC,EAAE,IAAID,OAAOhB,KAAK;AACjF;AAEA,OAAO,SAASoB,yBACdC,SAAiD,EACjDf,SAAkB;IAElB,MAAMgB,mBAAmBjB,oBAAoBC;IAC7C,MAAMiB,eAAeD,kBAAkBxB,cAAc;IACrD,MAAM0B,kBAAkBF,kBAAkBG,iBAAiBF;IAC3D,MAAMG,eAAeJ,kBAAkBK,gBAAgB;IACvD,MAAMC,qBAAqBN,kBAAkBO,cAAc;IAE3D,MAAMC,gBAAgBT,WAAWU,YAAY;IAC7C,MAAMC,mBAAmBX,WAAWY,eAAe;IACnD,MAAMC,iBAAiBb,WAAWa,kBAAkBC;IACpD,MAAMC,oBAAoBf,WAAWe,qBAAqBD;IAC1D,MAAME,mBAAmB5B,kBAAkBqB,eAAeI,gBAAgBX;IAC1E,MAAMe,sBAAsB7B,kBAC1BuB,kBACAI,mBACAZ;IAGF,MAAMG,eAAetC,cAAcgC,WAAWM,iBAAiBD;IAC/D,MAAMG,aACJR,WAAWQ,cAAcR,UAAUQ,UAAU,KAAK,WAC9CR,UAAUQ,UAAU,GACpBD;IAEN,OAAO;QACLG,UAAUM;QACVJ,aAAaK;QACbX;QACAE;QACAU,eACElB,WAAWkB,iBAAiBlB,UAAUkB,aAAa,KAAK,WACpDlB,UAAUkB,aAAa,GACtBjB,kBAAkBiB,iBAAiB;QAC1CC,sBACE,AAACnB,CAAAA,WAAWoB,iBAAiBrD,qBAAqB,CAACiC,UAAUoB,aAAa,CAAC,AAAD,KAC1EnB,kBAAkBkB,wBAClB;QACFE,kBAAkBrB,WAAWoB,kBAAkB,UAAU,cAAc;QACvEE,WAAW9B,mBAAmB5B,mBAAmB6C;QACjDc,cAAc/B,mBAAmB1B,sBAAsB6C;IACzD;AACF"}

package/dist/constants/devicePreviews.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared device-preview definitions used by:
+ *  - the in-admin live preview panels (AppearancePreviewField / ThemePreviewField device switcher)
+ *  - the native Payload Live Preview toolbar (admin.livePreview.breakpoints)
+ *
+ * Keeping a single source of truth means the device chrome shown inside the
+ * theme editor matches the iframe sizes editors get in the real Live Preview.
+ */
+export type DevicePreviewId = 'mobile' | 'tablet' | 'desktop';
+export type DevicePreview = {
+    /** Stable identifier, also used as Payload breakpoint `name`. */
+    id: DevicePreviewId;
+    /** Human-readable label (bilingual handled at the UI layer). */
+    label: string;
+    /** Czech label for admin UI. */
+    labelCs: string;
+    /** Viewport width in px. */
+    width: number;
+    /** Viewport height in px. */
+    height: number;
+};
+export declare const DEVICE_PREVIEWS: readonly DevicePreview[];
+export declare const DEFAULT_DEVICE_PREVIEW_ID: DevicePreviewId;
+export declare const getDevicePreview: (id: DevicePreviewId) => DevicePreview;
+/**
+ * Default breakpoints for Payload's native Live Preview toolbar.
+ * Derived from DEVICE_PREVIEWS so both stay in sync.
+ */
+export declare const DEFAULT_LIVE_PREVIEW_BREAKPOINTS: Array<{
+    name: string;
+    label: string;
+    width: number;
+    height: number;
+}>;
+//# sourceMappingURL=devicePreviews.d.ts.map

package/dist/constants/devicePreviews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devicePreviews.d.ts","sourceRoot":"","sources":["../../src/constants/devicePreviews.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE7D,MAAM,MAAM,aAAa,GAAG;IAC1B,iEAAiE;IACjE,EAAE,EAAE,eAAe,CAAA;IACnB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAsB1C,CAAA;AAEV,eAAO,MAAM,yBAAyB,EAAE,eAA2B,CAAA;AAEnE,eAAO,MAAM,gBAAgB,GAAI,IAAI,eAAe,KAAG,aAC4C,CAAA;AAEnG;;;GAGG;AACH,eAAO,MAAM,gCAAgC,EAAE,KAAK,CAAC;IACnD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAKE,CAAA"}

package/dist/constants/devicePreviews.js

@@ -0,0 +1,43 @@
+/**
+ * Shared device-preview definitions used by:
+ *  - the in-admin live preview panels (AppearancePreviewField / ThemePreviewField device switcher)
+ *  - the native Payload Live Preview toolbar (admin.livePreview.breakpoints)
+ *
+ * Keeping a single source of truth means the device chrome shown inside the
+ * theme editor matches the iframe sizes editors get in the real Live Preview.
+ */ export const DEVICE_PREVIEWS = [
+    {
+        id: 'mobile',
+        label: 'Mobile',
+        labelCs: 'Mobil',
+        width: 390,
+        height: 844
+    },
+    {
+        id: 'tablet',
+        label: 'Tablet',
+        labelCs: 'Tablet',
+        width: 768,
+        height: 1024
+    },
+    {
+        id: 'desktop',
+        label: 'Desktop',
+        labelCs: 'Desktop',
+        width: 1440,
+        height: 900
+    }
+];
+export const DEFAULT_DEVICE_PREVIEW_ID = 'desktop';
+export const getDevicePreview = (id)=>DEVICE_PREVIEWS.find((device)=>device.id === id) ?? DEVICE_PREVIEWS[DEVICE_PREVIEWS.length - 1];
+/**
+ * Default breakpoints for Payload's native Live Preview toolbar.
+ * Derived from DEVICE_PREVIEWS so both stay in sync.
+ */ export const DEFAULT_LIVE_PREVIEW_BREAKPOINTS = DEVICE_PREVIEWS.map((device)=>({
+        name: device.id,
+        label: device.label,
+        width: device.width,
+        height: device.height
+    }));
+
+//# sourceMappingURL=devicePreviews.js.map

package/dist/constants/devicePreviews.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/devicePreviews.ts"],"sourcesContent":["/**\n * Shared device-preview definitions used by:\n *  - the in-admin live preview panels (AppearancePreviewField / ThemePreviewField device switcher)\n *  - the native Payload Live Preview toolbar (admin.livePreview.breakpoints)\n *\n * Keeping a single source of truth means the device chrome shown inside the\n * theme editor matches the iframe sizes editors get in the real Live Preview.\n */\n\nexport type DevicePreviewId = 'mobile' | 'tablet' | 'desktop'\n\nexport type DevicePreview = {\n  /** Stable identifier, also used as Payload breakpoint `name`. */\n  id: DevicePreviewId\n  /** Human-readable label (bilingual handled at the UI layer). */\n  label: string\n  /** Czech label for admin UI. */\n  labelCs: string\n  /** Viewport width in px. */\n  width: number\n  /** Viewport height in px. */\n  height: number\n}\n\nexport const DEVICE_PREVIEWS: readonly DevicePreview[] = [\n  {\n    id: 'mobile',\n    label: 'Mobile',\n    labelCs: 'Mobil',\n    width: 390,\n    height: 844,\n  },\n  {\n    id: 'tablet',\n    label: 'Tablet',\n    labelCs: 'Tablet',\n    width: 768,\n    height: 1024,\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n    labelCs: 'Desktop',\n    width: 1440,\n    height: 900,\n  },\n] as const\n\nexport const DEFAULT_DEVICE_PREVIEW_ID: DevicePreviewId = 'desktop'\n\nexport const getDevicePreview = (id: DevicePreviewId): DevicePreview =>\n  DEVICE_PREVIEWS.find((device) => device.id === id) ?? DEVICE_PREVIEWS[DEVICE_PREVIEWS.length - 1]\n\n/**\n * Default breakpoints for Payload's native Live Preview toolbar.\n * Derived from DEVICE_PREVIEWS so both stay in sync.\n */\nexport const DEFAULT_LIVE_PREVIEW_BREAKPOINTS: Array<{\n  name: string\n  label: string\n  width: number\n  height: number\n}> = DEVICE_PREVIEWS.map((device) => ({\n  name: device.id,\n  label: device.label,\n  width: device.width,\n  height: device.height,\n}))\n"],"names":["DEVICE_PREVIEWS","id","label","labelCs","width","height","DEFAULT_DEVICE_PREVIEW_ID","getDevicePreview","find","device","length","DEFAULT_LIVE_PREVIEW_BREAKPOINTS","map","name"],"mappings":"AAAA;;;;;;;CAOC,GAiBD,OAAO,MAAMA,kBAA4C;IACvD;QACEC,IAAI;QACJC,OAAO;QACPC,SAAS;QACTC,OAAO;QACPC,QAAQ;IACV;IACA;QACEJ,IAAI;QACJC,OAAO;QACPC,SAAS;QACTC,OAAO;QACPC,QAAQ;IACV;IACA;QACEJ,IAAI;QACJC,OAAO;QACPC,SAAS;QACTC,OAAO;QACPC,QAAQ;IACV;CACD,CAAS;AAEV,OAAO,MAAMC,4BAA6C,UAAS;AAEnE,OAAO,MAAMC,mBAAmB,CAACN,KAC/BD,gBAAgBQ,IAAI,CAAC,CAACC,SAAWA,OAAOR,EAAE,KAAKA,OAAOD,eAAe,CAACA,gBAAgBU,MAAM,GAAG,EAAE,CAAA;AAEnG;;;CAGC,GACD,OAAO,MAAMC,mCAKRX,gBAAgBY,GAAG,CAAC,CAACH,SAAY,CAAA;QACpCI,MAAMJ,OAAOR,EAAE;QACfC,OAAOO,OAAOP,KAAK;QACnBE,OAAOK,OAAOL,KAAK;QACnBC,QAAQI,OAAOJ,MAAM;IACvB,CAAA,GAAG"}