@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/globals/ThemeSettings/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/globals/ThemeSettings/config.ts"],"sourcesContent":["import type { GlobalConfig } from 'payload'\n\n/**\n * ThemeSettings Global Configuration\n *\n * This global stores theme-related settings including:\n * - Active font family (selected via FontPicker)\n * - Google Fonts API key (optional, for extended font library)\n */\nexport const ThemeSettings: GlobalConfig = {\n  slug: 'themeSettings',\n  label: { en: 'Theme Settings', cs: 'Nastavení témat' },\n  admin: {\n    group: { en: 'Settings', cs: 'Nastavení' },\n  },\n  access: {\n    read: () => true,\n    update: ({ req }) => {\n      // Only admins can update theme settings\n      return req.user?.roles?.includes('admin') || false\n    },\n  },\n  fields: [\n    {\n      type: 'tabs',\n      tabs: [\n        {\n          label: { en: 'Typography', cs: 'Typografie' },\n          fields: [\n            {\n              name: 'activeFont',\n              type: 'text',\n              label: { en: 'Active Font Family', cs: 'Aktivní rodina písem' },\n              defaultValue: 'Inter',\n              admin: {\n                description: {\n                  en: 'The currently active font family for your website',\n                  cs: 'Aktuální rodina písem pro váš web',\n                },\n                components: {\n                  Field: '@kilivi/payloadcms-theme-management/globals/ThemeSettings/FontPicker',\n                },\n              },\n            },\n            {\n              name: 'googleFontsApiKey',\n              type: 'text',\n              label: { en: 'Google Fonts API Key', cs: 'Google Fonts API klíč' },\n              admin: {\n                description: {\n                  en: \"Optional: Add your Google Fonts API key to access the full library of 1400+ fonts. Without this, you'll have access to 35 popular fonts.\",\n                  cs: 'Volitelné: přidejte svůj Google Fonts API klíč pro přístup k plné knihovně 1400+ písem. Bez něj máte k dispozici 35 populárních písem.',\n                },\n                placeholder: 'AIzaSy...',\n              },\n            },\n\n            {\n              type: 'row',\n              fields: [\n                {\n                  name: 'fontWeightHeading',\n                  type: 'select',\n                  label: 'Heading Font Weight',\n                  defaultValue: '700',\n                  options: [\n                    { label: '100 - Thin', value: '100' },\n                    { label: '200 - Extra Light', value: '200' },\n                    { label: '300 - Light', value: '300' },\n                    { label: '400 - Regular', value: '400' },\n                    { label: '500 - Medium', value: '500' },\n                    { label: '600 - Semi Bold', value: '600' },\n                    { label: '700 - Bold', value: '700' },\n                    { label: '800 - Extra Bold', value: '800' },\n                    { label: '900 - Black', value: '900' },\n                  ],\n                },\n                {\n                  name: 'fontWeightBody',\n                  type: 'select',\n                  label: 'Body Font Weight',\n                  defaultValue: '400',\n                  options: [\n                    { label: '100 - Thin', value: '100' },\n                    { label: '200 - Extra Light', value: '200' },\n                    { label: '300 - Light', value: '300' },\n                    { label: '400 - Regular', value: '400' },\n                    { label: '500 - Medium', value: '500' },\n                    { label: '600 - Semi Bold', value: '600' },\n                    { label: '700 - Bold', value: '700' },\n                    { label: '800 - Extra Bold', value: '800' },\n                    { label: '900 - Black', value: '900' },\n                  ],\n                },\n              ],\n            },\n            {\n              type: 'ui',\n              name: 'typographyInfo',\n              admin: {\n                components: {\n                  Field:\n                    '@kilivi/payloadcms-theme-management/globals/ThemeSettings/fields/TypographyInfoField',\n                },\n              },\n            },\n          ],\n        },\n        {\n          label: { en: 'Font Loading', cs: 'Načítání písem' },\n          fields: [\n            {\n              type: 'ui',\n              name: 'fontLoadingGuide',\n              admin: {\n                components: {\n                  Field:\n                    '@kilivi/payloadcms-theme-management/globals/ThemeSettings/fields/FontLoadingGuideField',\n                },\n              },\n            },\n          ],\n        },\n      ],\n    },\n  ],\n}\n"],"names":["ThemeSettings","slug","label","en","cs","admin","group","access","read","update","req","user","roles","includes","fields","type","tabs","name","defaultValue","description","components","Field","placeholder","options","value"],"mappings":"AAEA;;;;;;CAMC,GACD,OAAO,MAAMA,gBAA8B;IACzCC,MAAM;IACNC,OAAO;QAAEC,IAAI;QAAkBC,IAAI;IAAkB;IACrDC,OAAO;QACLC,OAAO;YAAEH,IAAI;YAAYC,IAAI;QAAY;IAC3C;IACAG,QAAQ;QACNC,MAAM,IAAM;QACZC,QAAQ,CAAC,EAAEC,GAAG,EAAE;YACd,wCAAwC;YACxC,OAAOA,IAAIC,IAAI,EAAEC,OAAOC,SAAS,YAAY;QAC/C;IACF;IACAC,QAAQ;QACN;YACEC,MAAM;YACNC,MAAM;gBACJ;oBACEd,OAAO;wBAAEC,IAAI;wBAAcC,IAAI;oBAAa;oBAC5CU,QAAQ;wBACN;4BACEG,MAAM;4BACNF,MAAM;4BACNb,OAAO;gCAAEC,IAAI;gCAAsBC,IAAI;4BAAuB;4BAC9Dc,cAAc;4BACdb,OAAO;gCACLc,aAAa;oCACXhB,IAAI;oCACJC,IAAI;gCACN;gCACAgB,YAAY;oCACVC,OAAO;gCACT;4BACF;wBACF;wBACA;4BACEJ,MAAM;4BACNF,MAAM;4BACNb,OAAO;gCAAEC,IAAI;gCAAwBC,IAAI;4BAAwB;4BACjEC,OAAO;gCACLc,aAAa;oCACXhB,IAAI;oCACJC,IAAI;gCACN;gCACAkB,aAAa;4BACf;wBACF;wBAEA;4BACEP,MAAM;4BACND,QAAQ;gCACN;oCACEG,MAAM;oCACNF,MAAM;oCACNb,OAAO;oCACPgB,cAAc;oCACdK,SAAS;wCACP;4CAAErB,OAAO;4CAAcsB,OAAO;wCAAM;wCACpC;4CAAEtB,OAAO;4CAAqBsB,OAAO;wCAAM;wCAC3C;4CAAEtB,OAAO;4CAAesB,OAAO;wCAAM;wCACrC;4CAAEtB,OAAO;4CAAiBsB,OAAO;wCAAM;wCACvC;4CAAEtB,OAAO;4CAAgBsB,OAAO;wCAAM;wCACtC;4CAAEtB,OAAO;4CAAmBsB,OAAO;wCAAM;wCACzC;4CAAEtB,OAAO;4CAAcsB,OAAO;wCAAM;wCACpC;4CAAEtB,OAAO;4CAAoBsB,OAAO;wCAAM;wCAC1C;4CAAEtB,OAAO;4CAAesB,OAAO;wCAAM;qCACtC;gCACH;gCACA;oCACEP,MAAM;oCACNF,MAAM;oCACNb,OAAO;oCACPgB,cAAc;oCACdK,SAAS;wCACP;4CAAErB,OAAO;4CAAcsB,OAAO;wCAAM;wCACpC;4CAAEtB,OAAO;4CAAqBsB,OAAO;wCAAM;wCAC3C;4CAAEtB,OAAO;4CAAesB,OAAO;wCAAM;wCACrC;4CAAEtB,OAAO;4CAAiBsB,OAAO;wCAAM;wCACvC;4CAAEtB,OAAO;4CAAgBsB,OAAO;wCAAM;wCACtC;4CAAEtB,OAAO;4CAAmBsB,OAAO;wCAAM;wCACzC;4CAAEtB,OAAO;4CAAcsB,OAAO;wCAAM;wCACpC;4CAAEtB,OAAO;4CAAoBsB,OAAO;wCAAM;wCAC1C;4CAAEtB,OAAO;4CAAesB,OAAO;wCAAM;qCACtC;gCACH;6BACD;wBACH;wBACA;4BACET,MAAM;4BACNE,MAAM;4BACNZ,OAAO;gCACLe,YAAY;oCACVC,OACE;gCACJ;4BACF;wBACF;qBACD;gBACH;gBACA;oBACEnB,OAAO;wBAAEC,IAAI;wBAAgBC,IAAI;oBAAiB;oBAClDU,QAAQ;wBACN;4BACEC,MAAM;4BACNE,MAAM;4BACNZ,OAAO;gCACLe,YAAY;oCACVC,OACE;gCACJ;4BACF;wBACF;qBACD;gBACH;aACD;QACH;KACD;AACH,EAAC"}
+{"version":3,"sources":["../../../src/globals/ThemeSettings/config.ts"],"sourcesContent":["import type { GlobalConfig } from 'payload'\n\nconst fontWeightOptions = [\n  { value: '100', label: { en: '100 – Thin', cs: '100 – Vlasové' } },\n  { value: '200', label: { en: '200 – Extra light', cs: '200 – Extra tenké' } },\n  { value: '300', label: { en: '300 – Light', cs: '300 – Tenké' } },\n  { value: '400', label: { en: '400 – Regular', cs: '400 – Normální' } },\n  { value: '500', label: { en: '500 – Medium', cs: '500 – Střední' } },\n  { value: '600', label: { en: '600 – Semi bold', cs: '600 – Polotučné' } },\n  { value: '700', label: { en: '700 – Bold', cs: '700 – Tučné' } },\n  { value: '800', label: { en: '800 – Extra bold', cs: '800 – Extra tučné' } },\n  { value: '900', label: { en: '900 – Black', cs: '900 – Černé' } },\n]\n\n/**\n * ThemeSettings Global Configuration\n *\n * This global stores theme-related settings including:\n * - Active font family (selected via FontPicker)\n * - Google Fonts API key (optional, for extended font library)\n */\nexport const ThemeSettings: GlobalConfig = {\n  slug: 'themeSettings',\n  label: { en: 'Theme Settings', cs: 'Nastavení motivu' },\n  admin: {\n    group: { en: 'Settings', cs: 'Nastavení' },\n  },\n  access: {\n    read: () => true,\n    update: ({ req }) => {\n      // Only admins can update theme settings\n      return req.user?.roles?.includes('admin') || false\n    },\n  },\n  fields: [\n    {\n      type: 'tabs',\n      tabs: [\n        {\n          label: { en: 'Typography', cs: 'Typografie' },\n          fields: [\n            {\n              name: 'activeFont',\n              type: 'text',\n              label: { en: 'Active Font Family', cs: 'Aktivní rodina písem' },\n              defaultValue: 'Inter',\n              admin: {\n                description: {\n                  en: 'The currently active font family for your website',\n                  cs: 'Aktuální rodina písem pro váš web',\n                },\n                components: {\n                  Field: '@kilivi/payloadcms-theme-management/globals/ThemeSettings/FontPicker',\n                },\n              },\n            },\n            {\n              name: 'googleFontsApiKey',\n              type: 'text',\n              label: { en: 'Google Fonts API Key', cs: 'Google Fonts API klíč' },\n              admin: {\n                description: {\n                  en: \"Optional: Add your Google Fonts API key to access the full library of 1400+ fonts. Without this, you'll have access to 35 popular fonts.\",\n                  cs: 'Volitelné: přidejte svůj Google Fonts API klíč pro přístup k plné knihovně 1400+ písem. Bez něj máte k dispozici 35 populárních písem.',\n                },\n                placeholder: 'AIzaSy...',\n              },\n            },\n\n            {\n              type: 'row',\n              fields: [\n                {\n                  name: 'fontWeightHeading',\n                  type: 'select',\n                  label: { en: 'Heading font weight', cs: 'Tloušťka písma nadpisů' },\n                  defaultValue: '700',\n                  options: fontWeightOptions,\n                },\n                {\n                  name: 'fontWeightBody',\n                  type: 'select',\n                  label: { en: 'Body font weight', cs: 'Tloušťka písma textu' },\n                  defaultValue: '400',\n                  options: fontWeightOptions,\n                },\n              ],\n            },\n            {\n              type: 'ui',\n              name: 'typographyInfo',\n              admin: {\n                components: {\n                  Field:\n                    '@kilivi/payloadcms-theme-management/globals/ThemeSettings/fields/TypographyInfoField',\n                },\n              },\n            },\n          ],\n        },\n        {\n          label: { en: 'Font Loading', cs: 'Načítání písem' },\n          fields: [\n            {\n              type: 'ui',\n              name: 'fontLoadingGuide',\n              admin: {\n                components: {\n                  Field:\n                    '@kilivi/payloadcms-theme-management/globals/ThemeSettings/fields/FontLoadingGuideField',\n                },\n              },\n            },\n          ],\n        },\n      ],\n    },\n  ],\n}\n"],"names":["fontWeightOptions","value","label","en","cs","ThemeSettings","slug","admin","group","access","read","update","req","user","roles","includes","fields","type","tabs","name","defaultValue","description","components","Field","placeholder","options"],"mappings":"AAEA,MAAMA,oBAAoB;IACxB;QAAEC,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAcC,IAAI;QAAgB;IAAE;IACjE;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAqBC,IAAI;QAAoB;IAAE;IAC5E;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAeC,IAAI;QAAc;IAAE;IAChE;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAiBC,IAAI;QAAiB;IAAE;IACrE;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAgBC,IAAI;QAAgB;IAAE;IACnE;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAmBC,IAAI;QAAkB;IAAE;IACxE;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAcC,IAAI;QAAc;IAAE;IAC/D;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAoBC,IAAI;QAAoB;IAAE;IAC3E;QAAEH,OAAO;QAAOC,OAAO;YAAEC,IAAI;YAAeC,IAAI;QAAc;IAAE;CACjE;AAED;;;;;;CAMC,GACD,OAAO,MAAMC,gBAA8B;IACzCC,MAAM;IACNJ,OAAO;QAAEC,IAAI;QAAkBC,IAAI;IAAmB;IACtDG,OAAO;QACLC,OAAO;YAAEL,IAAI;YAAYC,IAAI;QAAY;IAC3C;IACAK,QAAQ;QACNC,MAAM,IAAM;QACZC,QAAQ,CAAC,EAAEC,GAAG,EAAE;YACd,wCAAwC;YACxC,OAAOA,IAAIC,IAAI,EAAEC,OAAOC,SAAS,YAAY;QAC/C;IACF;IACAC,QAAQ;QACN;YACEC,MAAM;YACNC,MAAM;gBACJ;oBACEhB,OAAO;wBAAEC,IAAI;wBAAcC,IAAI;oBAAa;oBAC5CY,QAAQ;wBACN;4BACEG,MAAM;4BACNF,MAAM;4BACNf,OAAO;gCAAEC,IAAI;gCAAsBC,IAAI;4BAAuB;4BAC9DgB,cAAc;4BACdb,OAAO;gCACLc,aAAa;oCACXlB,IAAI;oCACJC,IAAI;gCACN;gCACAkB,YAAY;oCACVC,OAAO;gCACT;4BACF;wBACF;wBACA;4BACEJ,MAAM;4BACNF,MAAM;4BACNf,OAAO;gCAAEC,IAAI;gCAAwBC,IAAI;4BAAwB;4BACjEG,OAAO;gCACLc,aAAa;oCACXlB,IAAI;oCACJC,IAAI;gCACN;gCACAoB,aAAa;4BACf;wBACF;wBAEA;4BACEP,MAAM;4BACND,QAAQ;gCACN;oCACEG,MAAM;oCACNF,MAAM;oCACNf,OAAO;wCAAEC,IAAI;wCAAuBC,IAAI;oCAAyB;oCACjEgB,cAAc;oCACdK,SAASzB;gCACX;gCACA;oCACEmB,MAAM;oCACNF,MAAM;oCACNf,OAAO;wCAAEC,IAAI;wCAAoBC,IAAI;oCAAuB;oCAC5DgB,cAAc;oCACdK,SAASzB;gCACX;6BACD;wBACH;wBACA;4BACEiB,MAAM;4BACNE,MAAM;4BACNZ,OAAO;gCACLe,YAAY;oCACVC,OACE;gCACJ;4BACF;wBACF;qBACD;gBACH;gBACA;oBACErB,OAAO;wBAAEC,IAAI;wBAAgBC,IAAI;oBAAiB;oBAClDY,QAAQ;wBACN;4BACEC,MAAM;4BACNE,MAAM;4BACNZ,OAAO;gCACLe,YAAY;oCACVC,OACE;gCACJ;4BACF;wBACF;qBACD;gBACH;aACD;QACH;KACD;AACH,EAAC"}

package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontLoadingGuideField.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/fields/FontLoadingGuideField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmHvD,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"FontLoadingGuideField.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/fields/FontLoadingGuideField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AA+BzB,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8FvD,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js

@@ -1,10 +1,39 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Globe, Package } from 'lucide-react';
 import React from 'react';
+import { useThemeTranslations } from '../../../hooks/useThemeTranslations.js';
+const PRE_IMPORTED_FONTS = [
+    'Inter',
+    'Nunito',
+    'Montserrat',
+    'Manrope',
+    'Mulish',
+    'Barlow',
+    'Raleway',
+    'Playfair Display'
+];
+const calloutStyle = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '8px',
+    padding: '16px',
+    marginBottom: '24px'
+};
+const calloutHeadingStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    margin: '0 0 8px 0',
+    fontSize: '16px',
+    fontWeight: 600
+};
 const FontLoadingGuideField = ()=>{
+    const t = useThemeTranslations().fontGuide;
     return /*#__PURE__*/ _jsxs("div", {
         style: {
-            padding: '24px'
+            padding: '24px',
+            color: 'var(--theme-text)'
         },
         children: [
             /*#__PURE__*/ _jsx("h2", {
@@ -13,24 +42,21 @@ const FontLoadingGuideField = ()=>{
                     fontSize: '20px',
                     fontWeight: 700
                 },
-                children: "Font Loading Strategy"
+                children: t.strategyTitle
             }),
             /*#__PURE__*/ _jsxs("div", {
-                style: {
-                    background: '#eff6ff',
-                    border: '1px solid #bfdbfe',
-                    borderRadius: '8px',
-                    padding: '16px',
-                    marginBottom: '24px'
-                },
+                style: calloutStyle,
                 children: [
-                    /*#__PURE__*/ _jsx("h3", {
-                        style: {
-                            margin: '0 0 8px 0',
-                            fontSize: '16px',
-                            fontWeight: 600
-                        },
-                        children: "📦 Pre-imported Fonts (Optimized)"
+                    /*#__PURE__*/ _jsxs("h3", {
+                        style: calloutHeadingStyle,
+                        children: [
+                            /*#__PURE__*/ _jsx(Package, {
+                                size: 16,
+                                color: "var(--theme-success-600)",
+                                "aria-hidden": true
+                            }),
+                            t.preImportedTitle
+                        ]
                     }),
                     /*#__PURE__*/ _jsx("p", {
                         style: {
@@ -38,59 +64,33 @@ const FontLoadingGuideField = ()=>{
                             fontSize: '14px',
                             lineHeight: '1.6'
                         },
-                        children: "These 8 popular fonts are pre-optimized via next/font/google for zero runtime loading:"
+                        children: t.preImportedCopy
                     }),
-                    /*#__PURE__*/ _jsxs("ul", {
+                    /*#__PURE__*/ _jsx("ul", {
                         style: {
                             margin: 0,
                             paddingLeft: '20px',
                             fontSize: '14px'
                         },
-                        children: [
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Inter"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Nunito"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Montserrat"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Manrope"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Mulish"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Barlow"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Raleway"
-                            }),
-                            /*#__PURE__*/ _jsx("li", {
-                                children: "Playfair Display"
-                            })
-                        ]
+                        children: PRE_IMPORTED_FONTS.map((font)=>/*#__PURE__*/ _jsx("li", {
+                                children: font
+                            }, font))
                     })
                 ]
             }),
             /*#__PURE__*/ _jsxs("div", {
-                style: {
-                    background: '#fef3c7',
-                    border: '1px solid #fde68a',
-                    borderRadius: '8px',
-                    padding: '16px',
-                    marginBottom: '24px'
-                },
+                style: calloutStyle,
                 children: [
-                    /*#__PURE__*/ _jsx("h3", {
-                        style: {
-                            margin: '0 0 8px 0',
-                            fontSize: '16px',
-                            fontWeight: 600
-                        },
-                        children: "🌐 Dynamic Fonts (Google Fonts CSS)"
+                    /*#__PURE__*/ _jsxs("h3", {
+                        style: calloutHeadingStyle,
+                        children: [
+                            /*#__PURE__*/ _jsx(Globe, {
+                                size: 16,
+                                color: "var(--theme-warning-600)",
+                                "aria-hidden": true
+                            }),
+                            t.dynamicTitle
+                        ]
                     }),
                     /*#__PURE__*/ _jsx("p", {
                         style: {
@@ -98,7 +98,7 @@ const FontLoadingGuideField = ()=>{
                             fontSize: '14px',
                             lineHeight: '1.6'
                         },
-                        children: "Other fonts are loaded dynamically via Google Fonts CSS link. This provides access to 1400+ fonts but requires runtime loading."
+                        children: t.dynamicCopy
                     })
                 ]
             }),
@@ -108,12 +108,13 @@ const FontLoadingGuideField = ()=>{
                     fontWeight: 600,
                     marginBottom: '12px'
                 },
-                children: "Implementation Example"
+                children: t.exampleTitle
             }),
             /*#__PURE__*/ _jsx("pre", {
                 style: {
-                    background: '#1f2937',
-                    color: '#f9fafb',
+                    // Inverted elevation tokens: the code block contrasts with the page in both admin themes.
+                    background: 'var(--theme-elevation-900)',
+                    color: 'var(--theme-elevation-50)',
                     padding: '16px',
                     borderRadius: '8px',
                     fontSize: '13px',

package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/globals/ThemeSettings/fields/FontLoadingGuideField.tsx"],"sourcesContent":["'use client'\n\nimport type { UIFieldClientProps } from 'payload'\nimport React from 'react'\n\nconst FontLoadingGuideField: React.FC<UIFieldClientProps> = () => {\n  return (\n    <div style={{ padding: '24px' }}>\n      <h2 style={{ marginTop: 0, fontSize: '20px', fontWeight: 700 }}>Font Loading Strategy</h2>\n\n      <div\n        style={{\n          background: '#eff6ff',\n          border: '1px solid #bfdbfe',\n          borderRadius: '8px',\n          padding: '16px',\n          marginBottom: '24px',\n        }}\n      >\n        <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: 600 }}>\n          📦 Pre-imported Fonts (Optimized)\n        </h3>\n        <p style={{ margin: '0 0 12px 0', fontSize: '14px', lineHeight: '1.6' }}>\n          These 8 popular fonts are pre-optimized via next/font/google for zero runtime loading:\n        </p>\n        <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '14px' }}>\n          <li>Inter</li>\n          <li>Nunito</li>\n          <li>Montserrat</li>\n          <li>Manrope</li>\n          <li>Mulish</li>\n          <li>Barlow</li>\n          <li>Raleway</li>\n          <li>Playfair Display</li>\n        </ul>\n      </div>\n\n      <div\n        style={{\n          background: '#fef3c7',\n          border: '1px solid #fde68a',\n          borderRadius: '8px',\n          padding: '16px',\n          marginBottom: '24px',\n        }}\n      >\n        <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: 600 }}>\n          🌐 Dynamic Fonts (Google Fonts CSS)\n        </h3>\n        <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.6' }}>\n          Other fonts are loaded dynamically via Google Fonts CSS link. This provides access to\n          1400+ fonts but requires runtime loading.\n        </p>\n      </div>\n\n      <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '12px' }}>\n        Implementation Example\n      </h3>\n      <pre\n        style={{\n          background: '#1f2937',\n          color: '#f9fafb',\n          padding: '16px',\n          borderRadius: '8px',\n          fontSize: '13px',\n          overflowX: 'auto',\n          lineHeight: '1.6',\n        }}\n      >\n        {`// app/layout.tsx\nimport { Inter, Nunito, Montserrat } from 'next/font/google'\nimport { getThemeSettings } from '@/utilities/getThemeSettings'\n\nconst inter = Inter({ subsets: ['latin'], variable: '--font-inter' })\nconst nunito = Nunito({ subsets: ['latin'], variable: '--font-nunito' })\nconst montserrat = Montserrat({ subsets: ['latin'], variable: '--font-montserrat' })\n\nexport default async function RootLayout({ children }) {\n  const themeSettings = await getThemeSettings()\n  const activeFont = themeSettings?.activeFont || 'Inter'\n  \n  const fontMap = {\n    'Inter': inter.variable,\n    'Nunito': nunito.variable,\n    'Montserrat': montserrat.variable,\n    // ... other pre-imported fonts\n  }\n  \n  const selectedFontClass = fontMap[activeFont] || ''\n  const isDynamicFont = !selectedFontClass\n  \n  return (\n    <html className={selectedFontClass || ''} \n          style={isDynamicFont ? {\n            '--font-primary': \\`'\\${activeFont}', sans-serif\\`\n          } : undefined}>\n      <head>\n        {isDynamicFont && (\n          <>\n            <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n            <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"\" />\n            <link \n              href={\\`https://fonts.googleapis.com/css2?family=\\${activeFont.replace(' ', '+')}:wght@300;400;500;600;700&display=swap\\`}\n              rel=\"stylesheet\" \n            />\n          </>\n        )}\n      </head>\n      <body className=\"font-primary\">{children}</body>\n    </html>\n  )\n}\n\n// CSS\n.font-primary {\n  font-family: var(--font-primary, 'Inter', sans-serif);\n}`}\n      </pre>\n    </div>\n  )\n}\n\nexport default FontLoadingGuideField\n"],"names":["React","FontLoadingGuideField","div","style","padding","h2","marginTop","fontSize","fontWeight","background","border","borderRadius","marginBottom","h3","margin","p","lineHeight","ul","paddingLeft","li","pre","color","overflowX"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,MAAMC,wBAAsD;IAC1D,qBACE,MAACC;QAAIC,OAAO;YAAEC,SAAS;QAAO;;0BAC5B,KAACC;gBAAGF,OAAO;oBAAEG,WAAW;oBAAGC,UAAU;oBAAQC,YAAY;gBAAI;0BAAG;;0BAEhE,MAACN;gBACCC,OAAO;oBACLM,YAAY;oBACZC,QAAQ;oBACRC,cAAc;oBACdP,SAAS;oBACTQ,cAAc;gBAChB;;kCAEA,KAACC;wBAAGV,OAAO;4BAAEW,QAAQ;4BAAaP,UAAU;4BAAQC,YAAY;wBAAI;kCAAG;;kCAGvE,KAACO;wBAAEZ,OAAO;4BAAEW,QAAQ;4BAAcP,UAAU;4BAAQS,YAAY;wBAAM;kCAAG;;kCAGzE,MAACC;wBAAGd,OAAO;4BAAEW,QAAQ;4BAAGI,aAAa;4BAAQX,UAAU;wBAAO;;0CAC5D,KAACY;0CAAG;;0CACJ,KAACA;0CAAG;;0CACJ,KAACA;0CAAG;;0CACJ,KAACA;0CAAG;;0CACJ,KAACA;0CAAG;;0CACJ,KAACA;0CAAG;;0CACJ,KAACA;0CAAG;;0CACJ,KAACA;0CAAG;;;;;;0BAIR,MAACjB;gBACCC,OAAO;oBACLM,YAAY;oBACZC,QAAQ;oBACRC,cAAc;oBACdP,SAAS;oBACTQ,cAAc;gBAChB;;kCAEA,KAACC;wBAAGV,OAAO;4BAAEW,QAAQ;4BAAaP,UAAU;4BAAQC,YAAY;wBAAI;kCAAG;;kCAGvE,KAACO;wBAAEZ,OAAO;4BAAEW,QAAQ;4BAAGP,UAAU;4BAAQS,YAAY;wBAAM;kCAAG;;;;0BAMhE,KAACH;gBAAGV,OAAO;oBAAEI,UAAU;oBAAQC,YAAY;oBAAKI,cAAc;gBAAO;0BAAG;;0BAGxE,KAACQ;gBACCjB,OAAO;oBACLM,YAAY;oBACZY,OAAO;oBACPjB,SAAS;oBACTO,cAAc;oBACdJ,UAAU;oBACVe,WAAW;oBACXN,YAAY;gBACd;0BAEC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CT,CAAC;;;;AAIF;AAEA,eAAef,sBAAqB"}
+{"version":3,"sources":["../../../../src/globals/ThemeSettings/fields/FontLoadingGuideField.tsx"],"sourcesContent":["'use client'\n\nimport { Globe, Package } from 'lucide-react'\nimport type { UIFieldClientProps } from 'payload'\nimport React from 'react'\nimport { useThemeTranslations } from '../../../hooks/useThemeTranslations.js'\n\nconst PRE_IMPORTED_FONTS = [\n  'Inter',\n  'Nunito',\n  'Montserrat',\n  'Manrope',\n  'Mulish',\n  'Barlow',\n  'Raleway',\n  'Playfair Display',\n]\n\nconst calloutStyle: React.CSSProperties = {\n  background: 'var(--theme-elevation-50)',\n  border: '1px solid var(--theme-elevation-150)',\n  borderRadius: '8px',\n  padding: '16px',\n  marginBottom: '24px',\n}\n\nconst calloutHeadingStyle: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  margin: '0 0 8px 0',\n  fontSize: '16px',\n  fontWeight: 600,\n}\n\nconst FontLoadingGuideField: React.FC<UIFieldClientProps> = () => {\n  const t = useThemeTranslations().fontGuide\n\n  return (\n    <div style={{ padding: '24px', color: 'var(--theme-text)' }}>\n      <h2 style={{ marginTop: 0, fontSize: '20px', fontWeight: 700 }}>{t.strategyTitle}</h2>\n\n      <div style={calloutStyle}>\n        <h3 style={calloutHeadingStyle}>\n          <Package size={16} color=\"var(--theme-success-600)\" aria-hidden />\n          {t.preImportedTitle}\n        </h3>\n        <p style={{ margin: '0 0 12px 0', fontSize: '14px', lineHeight: '1.6' }}>\n          {t.preImportedCopy}\n        </p>\n        <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '14px' }}>\n          {PRE_IMPORTED_FONTS.map((font) => (\n            <li key={font}>{font}</li>\n          ))}\n        </ul>\n      </div>\n\n      <div style={calloutStyle}>\n        <h3 style={calloutHeadingStyle}>\n          <Globe size={16} color=\"var(--theme-warning-600)\" aria-hidden />\n          {t.dynamicTitle}\n        </h3>\n        <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.6' }}>{t.dynamicCopy}</p>\n      </div>\n\n      <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '12px' }}>{t.exampleTitle}</h3>\n      <pre\n        style={{\n          // Inverted elevation tokens: the code block contrasts with the page in both admin themes.\n          background: 'var(--theme-elevation-900)',\n          color: 'var(--theme-elevation-50)',\n          padding: '16px',\n          borderRadius: '8px',\n          fontSize: '13px',\n          overflowX: 'auto',\n          lineHeight: '1.6',\n        }}\n      >\n        {`// app/layout.tsx\nimport { Inter, Nunito, Montserrat } from 'next/font/google'\nimport { getThemeSettings } from '@/utilities/getThemeSettings'\n\nconst inter = Inter({ subsets: ['latin'], variable: '--font-inter' })\nconst nunito = Nunito({ subsets: ['latin'], variable: '--font-nunito' })\nconst montserrat = Montserrat({ subsets: ['latin'], variable: '--font-montserrat' })\n\nexport default async function RootLayout({ children }) {\n  const themeSettings = await getThemeSettings()\n  const activeFont = themeSettings?.activeFont || 'Inter'\n  \n  const fontMap = {\n    'Inter': inter.variable,\n    'Nunito': nunito.variable,\n    'Montserrat': montserrat.variable,\n    // ... other pre-imported fonts\n  }\n  \n  const selectedFontClass = fontMap[activeFont] || ''\n  const isDynamicFont = !selectedFontClass\n  \n  return (\n    <html className={selectedFontClass || ''} \n          style={isDynamicFont ? {\n            '--font-primary': \\`'\\${activeFont}', sans-serif\\`\n          } : undefined}>\n      <head>\n        {isDynamicFont && (\n          <>\n            <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n            <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"\" />\n            <link \n              href={\\`https://fonts.googleapis.com/css2?family=\\${activeFont.replace(' ', '+')}:wght@300;400;500;600;700&display=swap\\`}\n              rel=\"stylesheet\" \n            />\n          </>\n        )}\n      </head>\n      <body className=\"font-primary\">{children}</body>\n    </html>\n  )\n}\n\n// CSS\n.font-primary {\n  font-family: var(--font-primary, 'Inter', sans-serif);\n}`}\n      </pre>\n    </div>\n  )\n}\n\nexport default FontLoadingGuideField\n"],"names":["Globe","Package","React","useThemeTranslations","PRE_IMPORTED_FONTS","calloutStyle","background","border","borderRadius","padding","marginBottom","calloutHeadingStyle","display","alignItems","gap","margin","fontSize","fontWeight","FontLoadingGuideField","t","fontGuide","div","style","color","h2","marginTop","strategyTitle","h3","size","aria-hidden","preImportedTitle","p","lineHeight","preImportedCopy","ul","paddingLeft","map","font","li","dynamicTitle","dynamicCopy","exampleTitle","pre","overflowX"],"mappings":"AAAA;;AAEA,SAASA,KAAK,EAAEC,OAAO,QAAQ,eAAc;AAE7C,OAAOC,WAAW,QAAO;AACzB,SAASC,oBAAoB,QAAQ,yCAAwC;AAE7E,MAAMC,qBAAqB;IACzB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,eAAoC;IACxCC,YAAY;IACZC,QAAQ;IACRC,cAAc;IACdC,SAAS;IACTC,cAAc;AAChB;AAEA,MAAMC,sBAA2C;IAC/CC,SAAS;IACTC,YAAY;IACZC,KAAK;IACLC,QAAQ;IACRC,UAAU;IACVC,YAAY;AACd;AAEA,MAAMC,wBAAsD;IAC1D,MAAMC,IAAIhB,uBAAuBiB,SAAS;IAE1C,qBACE,MAACC;QAAIC,OAAO;YAAEb,SAAS;YAAQc,OAAO;QAAoB;;0BACxD,KAACC;gBAAGF,OAAO;oBAAEG,WAAW;oBAAGT,UAAU;oBAAQC,YAAY;gBAAI;0BAAIE,EAAEO,aAAa;;0BAEhF,MAACL;gBAAIC,OAAOjB;;kCACV,MAACsB;wBAAGL,OAAOX;;0CACT,KAACV;gCAAQ2B,MAAM;gCAAIL,OAAM;gCAA2BM,aAAW;;4BAC9DV,EAAEW,gBAAgB;;;kCAErB,KAACC;wBAAET,OAAO;4BAAEP,QAAQ;4BAAcC,UAAU;4BAAQgB,YAAY;wBAAM;kCACnEb,EAAEc,eAAe;;kCAEpB,KAACC;wBAAGZ,OAAO;4BAAEP,QAAQ;4BAAGoB,aAAa;4BAAQnB,UAAU;wBAAO;kCAC3DZ,mBAAmBgC,GAAG,CAAC,CAACC,qBACvB,KAACC;0CAAeD;+BAAPA;;;;0BAKf,MAAChB;gBAAIC,OAAOjB;;kCACV,MAACsB;wBAAGL,OAAOX;;0CACT,KAACX;gCAAM4B,MAAM;gCAAIL,OAAM;gCAA2BM,aAAW;;4BAC5DV,EAAEoB,YAAY;;;kCAEjB,KAACR;wBAAET,OAAO;4BAAEP,QAAQ;4BAAGC,UAAU;4BAAQgB,YAAY;wBAAM;kCAAIb,EAAEqB,WAAW;;;;0BAG9E,KAACb;gBAAGL,OAAO;oBAAEN,UAAU;oBAAQC,YAAY;oBAAKP,cAAc;gBAAO;0BAAIS,EAAEsB,YAAY;;0BACvF,KAACC;gBACCpB,OAAO;oBACL,0FAA0F;oBAC1FhB,YAAY;oBACZiB,OAAO;oBACPd,SAAS;oBACTD,cAAc;oBACdQ,UAAU;oBACV2B,WAAW;oBACXX,YAAY;gBACd;0BAEC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CT,CAAC;;;;AAIF;AAEA,eAAed,sBAAqB"}

package/dist/globals/ThemeSettings/fields/TypographyInfoField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyInfoField.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/fields/TypographyInfoField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2DrD,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"TypographyInfoField.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/fields/TypographyInfoField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqCrD,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/globals/ThemeSettings/fields/TypographyInfoField.js

@@ -1,14 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { useThemeTranslations } from '../../../hooks/useThemeTranslations.js';
+const codeStyle = {
+    // Inverted elevation tokens: the code block contrasts with the page in both admin themes.
+    background: 'var(--theme-elevation-900)',
+    color: 'var(--theme-elevation-50)',
+    padding: '12px',
+    borderRadius: '6px',
+    fontSize: '12px',
+    marginTop: '8px',
+    overflowX: 'auto'
+};
 const TypographyInfoField = ()=>{
+    const t = useThemeTranslations().fontGuide;
     return /*#__PURE__*/ _jsxs("div", {
         style: {
             padding: '16px',
-            background: '#f3f4f6',
-            border: '1px solid #e5e7eb',
+            background: 'var(--theme-elevation-50)',
+            border: '1px solid var(--theme-elevation-150)',
             borderRadius: '8px',
-            marginTop: '16px'
+            marginTop: '16px',
+            color: 'var(--theme-text)'
         },
         children: [
             /*#__PURE__*/ _jsx("h3", {
@@ -17,7 +30,7 @@ const TypographyInfoField = ()=>{
                     fontSize: '14px',
                     fontWeight: 600
                 },
-                children: "How to Use Selected Font"
+                children: t.usageTitle
             }),
             /*#__PURE__*/ _jsx("p", {
                 style: {
@@ -25,7 +38,7 @@ const TypographyInfoField = ()=>{
                     fontSize: '13px',
                     lineHeight: '1.6'
                 },
-                children: "After selecting a font, you need to load it in your frontend application. Here are the recommended approaches:"
+                children: t.usageIntro
             }),
             /*#__PURE__*/ _jsxs("div", {
                 style: {
@@ -36,18 +49,10 @@ const TypographyInfoField = ()=>{
                         style: {
                             fontSize: '13px'
                         },
-                        children: "Option 1: next/font/google (Recommended)"
+                        children: t.optionNextFont
                     }),
                     /*#__PURE__*/ _jsx("pre", {
-                        style: {
-                            background: '#1f2937',
-                            color: '#f9fafb',
-                            padding: '12px',
-                            borderRadius: '6px',
-                            fontSize: '12px',
-                            marginTop: '8px',
-                            overflowX: 'auto'
-                        },
+                        style: codeStyle,
                         children: `import { Inter } from 'next/font/google'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -64,18 +69,10 @@ const inter = Inter({ subsets: ['latin'] })
                         style: {
                             fontSize: '13px'
                         },
-                        children: "Option 2: Google Fonts CSS Link"
+                        children: t.optionCssLink
                     }),
                     /*#__PURE__*/ _jsx("pre", {
-                        style: {
-                            background: '#1f2937',
-                            color: '#f9fafb',
-                            padding: '12px',
-                            borderRadius: '6px',
-                            fontSize: '12px',
-                            marginTop: '8px',
-                            overflowX: 'auto'
-                        },
+                        style: codeStyle,
                         children: `<link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">`
                     })

package/dist/globals/ThemeSettings/fields/TypographyInfoField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/globals/ThemeSettings/fields/TypographyInfoField.tsx"],"sourcesContent":["'use client'\n\nimport type { UIFieldClientProps } from 'payload'\nimport React from 'react'\n\nconst TypographyInfoField: React.FC<UIFieldClientProps> = () => {\n  return (\n    <div\n      style={{\n        padding: '16px',\n        background: '#f3f4f6',\n        border: '1px solid #e5e7eb',\n        borderRadius: '8px',\n        marginTop: '16px',\n      }}\n    >\n      <h3 style={{ margin: '0 0 8px 0', fontSize: '14px', fontWeight: 600 }}>\n        How to Use Selected Font\n      </h3>\n      <p style={{ margin: '0 0 12px 0', fontSize: '13px', lineHeight: '1.6' }}>\n        After selecting a font, you need to load it in your frontend application. Here are the\n        recommended approaches:\n      </p>\n      <div style={{ marginBottom: '12px' }}>\n        <strong style={{ fontSize: '13px' }}>Option 1: next/font/google (Recommended)</strong>\n        <pre\n          style={{\n            background: '#1f2937',\n            color: '#f9fafb',\n            padding: '12px',\n            borderRadius: '6px',\n            fontSize: '12px',\n            marginTop: '8px',\n            overflowX: 'auto',\n          }}\n        >\n          {`import { Inter } from 'next/font/google'\n\nconst inter = Inter({ subsets: ['latin'] })\n\n<html className={inter.variable}>\n  <body className=\"font-primary\">...</body>\n</html>`}\n        </pre>\n      </div>\n      <div>\n        <strong style={{ fontSize: '13px' }}>Option 2: Google Fonts CSS Link</strong>\n        <pre\n          style={{\n            background: '#1f2937',\n            color: '#f9fafb',\n            padding: '12px',\n            borderRadius: '6px',\n            fontSize: '12px',\n            marginTop: '8px',\n            overflowX: 'auto',\n          }}\n        >\n          {`<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">`}\n        </pre>\n      </div>\n    </div>\n  )\n}\n\nexport default TypographyInfoField\n"],"names":["React","TypographyInfoField","div","style","padding","background","border","borderRadius","marginTop","h3","margin","fontSize","fontWeight","p","lineHeight","marginBottom","strong","pre","color","overflowX"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,MAAMC,sBAAoD;IACxD,qBACE,MAACC;QACCC,OAAO;YACLC,SAAS;YACTC,YAAY;YACZC,QAAQ;YACRC,cAAc;YACdC,WAAW;QACb;;0BAEA,KAACC;gBAAGN,OAAO;oBAAEO,QAAQ;oBAAaC,UAAU;oBAAQC,YAAY;gBAAI;0BAAG;;0BAGvE,KAACC;gBAAEV,OAAO;oBAAEO,QAAQ;oBAAcC,UAAU;oBAAQG,YAAY;gBAAM;0BAAG;;0BAIzE,MAACZ;gBAAIC,OAAO;oBAAEY,cAAc;gBAAO;;kCACjC,KAACC;wBAAOb,OAAO;4BAAEQ,UAAU;wBAAO;kCAAG;;kCACrC,KAACM;wBACCd,OAAO;4BACLE,YAAY;4BACZa,OAAO;4BACPd,SAAS;4BACTG,cAAc;4BACdI,UAAU;4BACVH,WAAW;4BACXW,WAAW;wBACb;kCAEC,CAAC;;;;;;OAML,CAAC;;;;0BAGF,MAACjB;;kCACC,KAACc;wBAAOb,OAAO;4BAAEQ,UAAU;wBAAO;kCAAG;;kCACrC,KAACM;wBACCd,OAAO;4BACLE,YAAY;4BACZa,OAAO;4BACPd,SAAS;4BACTG,cAAc;4BACdI,UAAU;4BACVH,WAAW;4BACXW,WAAW;wBACb;kCAEC,CAAC;uGAC2F,CAAC;;;;;;AAKxG;AAEA,eAAelB,oBAAmB"}
+{"version":3,"sources":["../../../../src/globals/ThemeSettings/fields/TypographyInfoField.tsx"],"sourcesContent":["'use client'\n\nimport type { UIFieldClientProps } from 'payload'\nimport React from 'react'\nimport { useThemeTranslations } from '../../../hooks/useThemeTranslations.js'\n\nconst codeStyle: React.CSSProperties = {\n  // Inverted elevation tokens: the code block contrasts with the page in both admin themes.\n  background: 'var(--theme-elevation-900)',\n  color: 'var(--theme-elevation-50)',\n  padding: '12px',\n  borderRadius: '6px',\n  fontSize: '12px',\n  marginTop: '8px',\n  overflowX: 'auto',\n}\n\nconst TypographyInfoField: React.FC<UIFieldClientProps> = () => {\n  const t = useThemeTranslations().fontGuide\n\n  return (\n    <div\n      style={{\n        padding: '16px',\n        background: 'var(--theme-elevation-50)',\n        border: '1px solid var(--theme-elevation-150)',\n        borderRadius: '8px',\n        marginTop: '16px',\n        color: 'var(--theme-text)',\n      }}\n    >\n      <h3 style={{ margin: '0 0 8px 0', fontSize: '14px', fontWeight: 600 }}>{t.usageTitle}</h3>\n      <p style={{ margin: '0 0 12px 0', fontSize: '13px', lineHeight: '1.6' }}>{t.usageIntro}</p>\n      <div style={{ marginBottom: '12px' }}>\n        <strong style={{ fontSize: '13px' }}>{t.optionNextFont}</strong>\n        <pre style={codeStyle}>\n          {`import { Inter } from 'next/font/google'\n\nconst inter = Inter({ subsets: ['latin'] })\n\n<html className={inter.variable}>\n  <body className=\"font-primary\">...</body>\n</html>`}\n        </pre>\n      </div>\n      <div>\n        <strong style={{ fontSize: '13px' }}>{t.optionCssLink}</strong>\n        <pre style={codeStyle}>\n          {`<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">`}\n        </pre>\n      </div>\n    </div>\n  )\n}\n\nexport default TypographyInfoField\n"],"names":["React","useThemeTranslations","codeStyle","background","color","padding","borderRadius","fontSize","marginTop","overflowX","TypographyInfoField","t","fontGuide","div","style","border","h3","margin","fontWeight","usageTitle","p","lineHeight","usageIntro","marginBottom","strong","optionNextFont","pre","optionCssLink"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,oBAAoB,QAAQ,yCAAwC;AAE7E,MAAMC,YAAiC;IACrC,0FAA0F;IAC1FC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,cAAc;IACdC,UAAU;IACVC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,sBAAoD;IACxD,MAAMC,IAAIV,uBAAuBW,SAAS;IAE1C,qBACE,MAACC;QACCC,OAAO;YACLT,SAAS;YACTF,YAAY;YACZY,QAAQ;YACRT,cAAc;YACdE,WAAW;YACXJ,OAAO;QACT;;0BAEA,KAACY;gBAAGF,OAAO;oBAAEG,QAAQ;oBAAaV,UAAU;oBAAQW,YAAY;gBAAI;0BAAIP,EAAEQ,UAAU;;0BACpF,KAACC;gBAAEN,OAAO;oBAAEG,QAAQ;oBAAcV,UAAU;oBAAQc,YAAY;gBAAM;0BAAIV,EAAEW,UAAU;;0BACtF,MAACT;gBAAIC,OAAO;oBAAES,cAAc;gBAAO;;kCACjC,KAACC;wBAAOV,OAAO;4BAAEP,UAAU;wBAAO;kCAAII,EAAEc,cAAc;;kCACtD,KAACC;wBAAIZ,OAAOZ;kCACT,CAAC;;;;;;OAML,CAAC;;;;0BAGF,MAACW;;kCACC,KAACW;wBAAOV,OAAO;4BAAEP,UAAU;wBAAO;kCAAII,EAAEgB,aAAa;;kCACrD,KAACD;wBAAIZ,OAAOZ;kCACT,CAAC;uGAC2F,CAAC;;;;;;AAKxG;AAEA,eAAeQ,oBAAmB"}

package/dist/hooks/useAppearanceSession.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Editing-session state shared by the Appearance Settings fields: which parts of
+ * the look are locked, and a one-step undo snapshot of the last bulk change
+ * (theme preset, style preset or generated palette).
+ *
+ * Deliberately not persisted: locks reset on reload and nothing new is stored in
+ * the document. The fields live in separate React trees (Payload renders each
+ * custom field on its own), so the state sits in a tiny module-level store.
+ */
+export type AppearanceLock = 'colors' | 'fonts' | 'style';
+export type AppearanceSource = 'theme' | 'style' | 'palette';
+export interface UndoEntry {
+    path: string;
+    value: unknown;
+}
+export interface AppearanceUndo {
+    id: number;
+    source: AppearanceSource;
+    label: string;
+    entries: UndoEntry[];
+}
+interface AppearanceSessionState {
+    locks: Record<AppearanceLock, boolean>;
+    undo: AppearanceUndo | null;
+}
+export declare function toggleAppearanceLock(lock: AppearanceLock): void;
+export declare function recordAppearanceUndo(source: AppearanceSource, label: string, entries: UndoEntry[]): void;
+export declare function clearAppearanceUndo(id?: number): void;
+export declare function getAppearanceSession(): AppearanceSessionState;
+/** Test helper: restore the initial session state. */
+export declare function resetAppearanceSession(): void;
+export declare function useAppearanceSession(): AppearanceSessionState;
+type FormFieldsState = Record<string, {
+    value?: unknown;
+} | undefined> | undefined;
+type Dispatch = (action: {
+    type: 'UPDATE';
+    path: string;
+    value: unknown;
+}) => void;
+/**
+ * Collects field writes for one bulk action, remembering each field's previous
+ * value (first write wins) so the whole action can be undone in one step.
+ */
+export declare function createBulkWriter(formFields: FormFieldsState, dispatchFields: Dispatch): {
+    write(path: string, value: unknown): void;
+    commit(source: AppearanceSource, label: string): void;
+};
+export {};
+//# sourceMappingURL=useAppearanceSession.d.ts.map

package/dist/hooks/useAppearanceSession.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppearanceSession.d.ts","sourceRoot":"","sources":["../../src/hooks/useAppearanceSession.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,gBAAgB,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,EAAE,CAAA;CACrB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,CAAC,CAAA;IACtC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAA;CAC5B;AAmBD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,cAAc,QAExD;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAGjG;AAED,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,QAG9C;AAED,wBAAgB,oBAAoB,IAAI,sBAAsB,CAE7D;AAED,sDAAsD;AACtD,wBAAgB,sBAAsB,SAErC;AAED,wBAAgB,oBAAoB,IAAI,sBAAsB,CAE7D;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAAC,GAAG,SAAS,CAAA;AAClF,KAAK,QAAQ,GAAG,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,KAAK,IAAI,CAAA;AAElF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ;gBAItE,MAAM,SAAS,OAAO;mBAInB,gBAAgB,SAAS,MAAM;EAKjD"}

package/dist/hooks/useAppearanceSession.js

@@ -0,0 +1,91 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+let state = {
+    locks: {
+        colors: false,
+        fonts: false,
+        style: false
+    },
+    undo: null
+};
+let nextUndoId = 1;
+const listeners = new Set();
+function setState(next) {
+    state = next;
+    listeners.forEach((listener)=>listener());
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return ()=>listeners.delete(listener);
+}
+export function toggleAppearanceLock(lock) {
+    setState({
+        ...state,
+        locks: {
+            ...state.locks,
+            [lock]: !state.locks[lock]
+        }
+    });
+}
+export function recordAppearanceUndo(source, label, entries) {
+    if (entries.length === 0) return;
+    setState({
+        ...state,
+        undo: {
+            id: nextUndoId++,
+            source,
+            label,
+            entries
+        }
+    });
+}
+export function clearAppearanceUndo(id) {
+    if (!state.undo || id !== undefined && state.undo.id !== id) return;
+    setState({
+        ...state,
+        undo: null
+    });
+}
+export function getAppearanceSession() {
+    return state;
+}
+/** Test helper: restore the initial session state. */ export function resetAppearanceSession() {
+    setState({
+        locks: {
+            colors: false,
+            fonts: false,
+            style: false
+        },
+        undo: null
+    });
+}
+export function useAppearanceSession() {
+    return useSyncExternalStore(subscribe, getAppearanceSession, getAppearanceSession);
+}
+/**
+ * Collects field writes for one bulk action, remembering each field's previous
+ * value (first write wins) so the whole action can be undone in one step.
+ */ export function createBulkWriter(formFields, dispatchFields) {
+    const previous = new Map();
+    return {
+        write (path, value) {
+            if (!previous.has(path)) previous.set(path, formFields?.[path]?.value);
+            dispatchFields({
+                type: 'UPDATE',
+                path,
+                value
+            });
+        },
+        commit (source, label) {
+            const entries = [
+                ...previous.entries()
+            ].map(([path, value])=>({
+                    path,
+                    value
+                }));
+            recordAppearanceUndo(source, label, entries);
+        }
+    };
+}
+
+//# sourceMappingURL=useAppearanceSession.js.map

package/dist/hooks/useAppearanceSession.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useAppearanceSession.ts"],"sourcesContent":["'use client'\n\nimport { useSyncExternalStore } from 'react'\n\n/**\n * Editing-session state shared by the Appearance Settings fields: which parts of\n * the look are locked, and a one-step undo snapshot of the last bulk change\n * (theme preset, style preset or generated palette).\n *\n * Deliberately not persisted: locks reset on reload and nothing new is stored in\n * the document. The fields live in separate React trees (Payload renders each\n * custom field on its own), so the state sits in a tiny module-level store.\n */\n\nexport type AppearanceLock = 'colors' | 'fonts' | 'style'\nexport type AppearanceSource = 'theme' | 'style' | 'palette'\n\nexport interface UndoEntry {\n  path: string\n  value: unknown\n}\n\nexport interface AppearanceUndo {\n  id: number\n  source: AppearanceSource\n  label: string\n  entries: UndoEntry[]\n}\n\ninterface AppearanceSessionState {\n  locks: Record<AppearanceLock, boolean>\n  undo: AppearanceUndo | null\n}\n\nlet state: AppearanceSessionState = {\n  locks: { colors: false, fonts: false, style: false },\n  undo: null,\n}\nlet nextUndoId = 1\nconst listeners = new Set<() => void>()\n\nfunction setState(next: AppearanceSessionState) {\n  state = next\n  listeners.forEach((listener) => listener())\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener)\n  return () => listeners.delete(listener)\n}\n\nexport function toggleAppearanceLock(lock: AppearanceLock) {\n  setState({ ...state, locks: { ...state.locks, [lock]: !state.locks[lock] } })\n}\n\nexport function recordAppearanceUndo(source: AppearanceSource, label: string, entries: UndoEntry[]) {\n  if (entries.length === 0) return\n  setState({ ...state, undo: { id: nextUndoId++, source, label, entries } })\n}\n\nexport function clearAppearanceUndo(id?: number) {\n  if (!state.undo || (id !== undefined && state.undo.id !== id)) return\n  setState({ ...state, undo: null })\n}\n\nexport function getAppearanceSession(): AppearanceSessionState {\n  return state\n}\n\n/** Test helper: restore the initial session state. */\nexport function resetAppearanceSession() {\n  setState({ locks: { colors: false, fonts: false, style: false }, undo: null })\n}\n\nexport function useAppearanceSession(): AppearanceSessionState {\n  return useSyncExternalStore(subscribe, getAppearanceSession, getAppearanceSession)\n}\n\ntype FormFieldsState = Record<string, { value?: unknown } | undefined> | undefined\ntype Dispatch = (action: { type: 'UPDATE'; path: string; value: unknown }) => void\n\n/**\n * Collects field writes for one bulk action, remembering each field's previous\n * value (first write wins) so the whole action can be undone in one step.\n */\nexport function createBulkWriter(formFields: FormFieldsState, dispatchFields: Dispatch) {\n  const previous = new Map<string, unknown>()\n\n  return {\n    write(path: string, value: unknown) {\n      if (!previous.has(path)) previous.set(path, formFields?.[path]?.value)\n      dispatchFields({ type: 'UPDATE', path, value })\n    },\n    commit(source: AppearanceSource, label: string) {\n      const entries = [...previous.entries()].map(([path, value]) => ({ path, value }))\n      recordAppearanceUndo(source, label, entries)\n    },\n  }\n}\n"],"names":["useSyncExternalStore","state","locks","colors","fonts","style","undo","nextUndoId","listeners","Set","setState","next","forEach","listener","subscribe","add","delete","toggleAppearanceLock","lock","recordAppearanceUndo","source","label","entries","length","id","clearAppearanceUndo","undefined","getAppearanceSession","resetAppearanceSession","useAppearanceSession","createBulkWriter","formFields","dispatchFields","previous","Map","write","path","value","has","set","type","commit","map"],"mappings":"AAAA;AAEA,SAASA,oBAAoB,QAAQ,QAAO;AAgC5C,IAAIC,QAAgC;IAClCC,OAAO;QAAEC,QAAQ;QAAOC,OAAO;QAAOC,OAAO;IAAM;IACnDC,MAAM;AACR;AACA,IAAIC,aAAa;AACjB,MAAMC,YAAY,IAAIC;AAEtB,SAASC,SAASC,IAA4B;IAC5CV,QAAQU;IACRH,UAAUI,OAAO,CAAC,CAACC,WAAaA;AAClC;AAEA,SAASC,UAAUD,QAAoB;IACrCL,UAAUO,GAAG,CAACF;IACd,OAAO,IAAML,UAAUQ,MAAM,CAACH;AAChC;AAEA,OAAO,SAASI,qBAAqBC,IAAoB;IACvDR,SAAS;QAAE,GAAGT,KAAK;QAAEC,OAAO;YAAE,GAAGD,MAAMC,KAAK;YAAE,CAACgB,KAAK,EAAE,CAACjB,MAAMC,KAAK,CAACgB,KAAK;QAAC;IAAE;AAC7E;AAEA,OAAO,SAASC,qBAAqBC,MAAwB,EAAEC,KAAa,EAAEC,OAAoB;IAChG,IAAIA,QAAQC,MAAM,KAAK,GAAG;IAC1Bb,SAAS;QAAE,GAAGT,KAAK;QAAEK,MAAM;YAAEkB,IAAIjB;YAAca;YAAQC;YAAOC;QAAQ;IAAE;AAC1E;AAEA,OAAO,SAASG,oBAAoBD,EAAW;IAC7C,IAAI,CAACvB,MAAMK,IAAI,IAAKkB,OAAOE,aAAazB,MAAMK,IAAI,CAACkB,EAAE,KAAKA,IAAK;IAC/Dd,SAAS;QAAE,GAAGT,KAAK;QAAEK,MAAM;IAAK;AAClC;AAEA,OAAO,SAASqB;IACd,OAAO1B;AACT;AAEA,oDAAoD,GACpD,OAAO,SAAS2B;IACdlB,SAAS;QAAER,OAAO;YAAEC,QAAQ;YAAOC,OAAO;YAAOC,OAAO;QAAM;QAAGC,MAAM;IAAK;AAC9E;AAEA,OAAO,SAASuB;IACd,OAAO7B,qBAAqBc,WAAWa,sBAAsBA;AAC/D;AAKA;;;CAGC,GACD,OAAO,SAASG,iBAAiBC,UAA2B,EAAEC,cAAwB;IACpF,MAAMC,WAAW,IAAIC;IAErB,OAAO;QACLC,OAAMC,IAAY,EAAEC,KAAc;YAChC,IAAI,CAACJ,SAASK,GAAG,CAACF,OAAOH,SAASM,GAAG,CAACH,MAAML,YAAY,CAACK,KAAK,EAAEC;YAChEL,eAAe;gBAAEQ,MAAM;gBAAUJ;gBAAMC;YAAM;QAC/C;QACAI,QAAOrB,MAAwB,EAAEC,KAAa;YAC5C,MAAMC,UAAU;mBAAIW,SAASX,OAAO;aAAG,CAACoB,GAAG,CAAC,CAAC,CAACN,MAAMC,MAAM,GAAM,CAAA;oBAAED;oBAAMC;gBAAM,CAAA;YAC9ElB,qBAAqBC,QAAQC,OAAOC;QACtC;IACF;AACF"}

package/dist/hooks/useThemeTranslations.d.ts

@@ -0,0 +1,13 @@
+import { type PluginTranslations } from '../translations.js';
+/**
+ * Resolve the current Payload admin language using Payload's native i18n context
+ * (instead of sniffing `navigator.language`). Falls back to English.
+ */
+export declare function useThemeLanguage(): string;
+/**
+ * Return the plugin's translations for the active admin language, with English
+ * used as the fallback for any missing key. Use this in client field components
+ * so the strings follow the admin's selected locale natively.
+ */
+export declare function useThemeTranslations(): PluginTranslations;
+//# sourceMappingURL=useThemeTranslations.d.ts.map

package/dist/hooks/useThemeTranslations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeTranslations.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeTranslations.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAE7E;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAMzC;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,kBAAkB,CAEzD"}

package/dist/hooks/useThemeTranslations.js

@@ -0,0 +1,22 @@
+'use client';
+import { useTranslation } from '@payloadcms/ui';
+import { getTranslations } from '../translations.js';
+/**
+ * Resolve the current Payload admin language using Payload's native i18n context
+ * (instead of sniffing `navigator.language`). Falls back to English.
+ */ export function useThemeLanguage() {
+    // Tolerate `useTranslation()` returning undefined (e.g. outside an i18n provider
+    // or in unit tests with reset mocks) by falling back to English.
+    const result = useTranslation();
+    const language = result?.i18n?.language;
+    return typeof language === 'string' && language.length >= 2 ? language : 'en';
+}
+/**
+ * Return the plugin's translations for the active admin language, with English
+ * used as the fallback for any missing key. Use this in client field components
+ * so the strings follow the admin's selected locale natively.
+ */ export function useThemeTranslations() {
+    return getTranslations(useThemeLanguage());
+}
+
+//# sourceMappingURL=useThemeTranslations.js.map

package/dist/hooks/useThemeTranslations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useThemeTranslations.ts"],"sourcesContent":["'use client'\n\nimport { useTranslation } from '@payloadcms/ui'\nimport { getTranslations, type PluginTranslations } from '../translations.js'\n\n/**\n * Resolve the current Payload admin language using Payload's native i18n context\n * (instead of sniffing `navigator.language`). Falls back to English.\n */\nexport function useThemeLanguage(): string {\n  // Tolerate `useTranslation()` returning undefined (e.g. outside an i18n provider\n  // or in unit tests with reset mocks) by falling back to English.\n  const result = useTranslation() as { i18n?: { language?: string } } | undefined\n  const language = result?.i18n?.language\n  return typeof language === 'string' && language.length >= 2 ? language : 'en'\n}\n\n/**\n * Return the plugin's translations for the active admin language, with English\n * used as the fallback for any missing key. Use this in client field components\n * so the strings follow the admin's selected locale natively.\n */\nexport function useThemeTranslations(): PluginTranslations {\n  return getTranslations(useThemeLanguage())\n}\n"],"names":["useTranslation","getTranslations","useThemeLanguage","result","language","i18n","length","useThemeTranslations"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,SAASC,eAAe,QAAiC,qBAAoB;AAE7E;;;CAGC,GACD,OAAO,SAASC;IACd,iFAAiF;IACjF,iEAAiE;IACjE,MAAMC,SAASH;IACf,MAAMI,WAAWD,QAAQE,MAAMD;IAC/B,OAAO,OAAOA,aAAa,YAAYA,SAASE,MAAM,IAAI,IAAIF,WAAW;AAC3E;AAEA;;;;CAIC,GACD,OAAO,SAASG;IACd,OAAON,gBAAgBC;AACzB"}