@kilivi/payloadcms-theme-management 0.2.11 → 0.2.13

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, Plugin } from 'payload'\nimport { createThemeConfigurationField } from './fields/themeConfigurationField.js'\nimport type { SiteThemeConfiguration } from './payload-types.js'\nimport type { ThemePreset } from './presets.js'\nimport { defaultThemePresets } from './presets.js'\nimport type {\n  FetchThemeConfigurationOptions,\n  ThemeManagementPluginOptions,\n} from './types.js'\n\nconst THEME_TAB_NAME = 'themeConfiguration'\n\ninterface TabConfig {\n  name: string\n  label: { en: string; cs: string }\n  description?: { en: string; cs: string }\n  fields: Field[]\n}\n\n/**\n * Remove existing theme tab from tabs field\n */\nconst removeExistingThemeTab = (tabs: TabConfig[]): TabConfig[] =>\n  tabs.filter((tab) => tab?.name !== THEME_TAB_NAME)\n\n/**\n * Add theme configuration tab to existing tabs field or create fields array\n */\nconst upsertThemeTab = (\n  fields: Field[] | undefined,\n  themeTabConfig: TabConfig,\n  enableLogging: boolean,\n): Field[] => {\n  const existingFields = fields ?? []\n\n  // Find existing tabs field\n  const tabsFieldIndex = existingFields.findIndex(\n    (field) => 'type' in field && field.type === 'tabs',\n  )\n\n  if (tabsFieldIndex === -1) {\n    // No tabs field exists - add theme configuration as group field instead\n    if (enableLogging) {\n      console.log(\n        '🎨 Theme Management Plugin: No tabs field found, adding theme configuration as group field',\n      )\n    }\n\n    return [\n      ...existingFields,\n      {\n        name: THEME_TAB_NAME,\n        type: 'group',\n        label: themeTabConfig.label,\n        admin: {\n          description: themeTabConfig.description,\n        },\n        fields: themeTabConfig.fields,\n      },\n    ]\n  }\n\n  // Tabs field exists - inject our tab into it\n  if (enableLogging) {\n    console.log(\n      '🎨 Theme Management Plugin: Adding theme configuration tab to existing tabs',\n    )\n  }\n\n  const tabsField = existingFields[tabsFieldIndex]\n  \n  if (!('tabs' in tabsField)) {\n    console.warn('🎨 Theme Management Plugin: Found tabs field but it has no tabs property')\n    return existingFields\n  }\n\n  const existingTabs = (tabsField.tabs as TabConfig[]) || []\n\n  // Remove existing theme tab if present\n  const sanitizedTabs = removeExistingThemeTab(existingTabs)\n\n  // Create new tabs field with our tab added\n  const updatedTabsField = {\n    ...tabsField,\n    tabs: [...sanitizedTabs, themeTabConfig],\n  }\n\n  // Return fields array with updated tabs field\n  const newFields = [...existingFields]\n  newFields[tabsFieldIndex] = updatedTabsField\n\n  return newFields\n}\n\nconst ensureCollectionsArray = (collections: Config['collections']): CollectionConfig[] =>\n  Array.isArray(collections) ? collections : []\n\nexport const themeManagementPlugin = (options: ThemeManagementPluginOptions = {}): Plugin => {\n  return (config: Config): Config => {\n    const {\n      enabled = true,\n      targetCollection = 'site-settings',\n      themePresets = defaultThemePresets,\n      defaultTheme = 'cool',\n      includeColorModeToggle = true,\n      includeCustomCSS = true,\n      includeBrandIdentity = false,\n      enableAdvancedFeatures = true,\n      enableLogging = false,\n    } = options\n\n    if (!enabled) {\n      if (enableLogging) {\n  console.log('🎨 Theme Management Plugin: disabled via options, skipping.')\n      }\n      return config\n    }\n\n    const themeTabConfig = createThemeConfigurationField({\n      themePresets,\n      defaultTheme,\n      includeColorModeToggle,\n      includeCustomCSS,\n      includeBrandIdentity: includeBrandIdentity ?? false,\n      enableAdvancedFeatures,\n    })\n\n    let collectionTouched = false\n\n    const collections = ensureCollectionsArray(config.collections).map((collection) => {\n      if (collection.slug !== targetCollection) {\n        return collection\n      }\n\n      collectionTouched = true\n\n      if (enableLogging) {\n        console.log(\n          `🎨 Theme Management Plugin: enhancing collection \"${collection.slug}\"`,\n        )\n      }\n\n      const existingFields = Array.isArray(collection.fields) ? collection.fields : []\n\n      const fields = upsertThemeTab(existingFields, themeTabConfig, enableLogging)\n\n      return {\n        ...collection,\n        fields,\n      }\n    })\n\n    if (!collectionTouched) {\n      if (enableLogging) {\n        console.warn(\n          `🎨 Theme Management Plugin: collection \"${targetCollection}\" was not found, leaving config untouched.`,\n        )\n      }\n      return config\n    }\n\n    // Add custom admin view for theme preview\n    const admin = {\n      ...config.admin,\n      components: {\n        ...config.admin?.components,\n        views: {\n          ...config.admin?.components?.views,\n          themePreview: {\n            Component: '@kilivi/payloadcms-theme-management/views/ThemePreviewView#default',\n            path: '/theme-preview' as `/${string}`,\n            exact: true,\n            meta: {\n              title: 'Theme Preview',\n              description: 'Real-time preview of your theme configuration',\n            },\n          },\n        },\n      },\n    }\n\n    return {\n      ...config,\n      collections,\n      admin,\n    }\n  }\n}\n\ntype FetchOptionsInput = string | FetchThemeConfigurationOptions\n\nexport const fetchThemeConfiguration = async (\n  options?: FetchOptionsInput,\n): Promise<SiteThemeConfiguration | null> => {\n  const normalizedOptions =\n    typeof options === 'string'\n      ? { tenantSlug: options }\n      : options ?? {}\n\n  const {\n    tenantSlug,\n    collectionSlug = 'site-settings',\n    depth,\n    locale,\n    draft,\n    queryParams = {},\n  } = normalizedOptions\n\n  const params = new URLSearchParams({ limit: '1' })\n\n  if (typeof depth === 'number') params.set('depth', String(depth))\n  if (tenantSlug) params.set('tenant', tenantSlug)\n  if (locale) params.set('locale', locale)\n  if (draft) params.set('draft', 'true')\n\n  Object.entries(queryParams).forEach(([key, value]) => {\n    if (value === undefined) return\n    params.set(key, String(value))\n  })\n\n  const url = `/api/${collectionSlug}?${params.toString()}`\n\n  try {\n    const response = await fetch(url)\n    if (!response.ok) {\n      throw new Error(`Failed to fetch theme configuration (status ${response.status})`)\n    }\n\n    const data = (await response.json()) as {\n      docs?: Array<{ themeConfiguration?: SiteThemeConfiguration }>\n    }\n\n    const doc = data.docs?.[0]\n\n    return doc?.themeConfiguration ?? null\n  } catch (error) {\n    console.warn('Failed to fetch theme configuration:', error)\n    return null\n  }\n}\n\nexport const getThemePreset = (themeName: string): ThemePreset | null => {\n  return defaultThemePresets.find((preset) => preset.name === themeName) || null\n}\n\nexport const getAvailableThemePresets = (): ThemePreset[] => {\n  return defaultThemePresets\n}\n\n\n\nexport { defaultThemePresets } from './presets.js'\nexport type { ThemePreset, ThemeTypographyPreset } from './presets.js'\nexport { \n  extendedThemePresets,\n  allExtendedThemePresets,\n  extendedThemeToCSSVariables,\n} from './extended-presets.js'\nexport type { ExtendedThemePreset, ShadcnColorTokens } from './extended-presets.js'\nexport {\n  applyExtendedTheme,\n  generateExtendedThemeCSS,\n  resetExtendedTheme,\n  getExtendedThemeTokens,\n  createUseExtendedTheme,\n  getTailwindVarReferences,\n} from './utils/extendedThemeHelpers.js'\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\nexport {\n  DEFAULT_THEME_CONFIGURATION,\n  resolveThemeConfiguration,\n} from './utils/resolveThemeConfiguration.js'\nexport type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\nexport { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js'\n\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\nexport { ThemeProvider } from './providers/Theme/index.js'\n\n// Components\nexport { ThemeLivePreview } from './fields/ThemeLivePreview.js'\n\nexport const ThemeManagementPlugin = themeManagementPlugin\n/** @deprecated use {@link themeManagementPlugin} */\nexport const themeConfigurationPlugin = themeManagementPlugin\n\nexport default themeManagementPlugin"],"names":["createThemeConfigurationField","defaultThemePresets","THEME_TAB_NAME","removeExistingThemeTab","tabs","filter","tab","name","upsertThemeTab","fields","themeTabConfig","enableLogging","existingFields","tabsFieldIndex","findIndex","field","type","console","log","label","admin","description","tabsField","warn","existingTabs","sanitizedTabs","updatedTabsField","newFields","ensureCollectionsArray","collections","Array","isArray","themeManagementPlugin","options","config","enabled","targetCollection","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","includeBrandIdentity","enableAdvancedFeatures","collectionTouched","map","collection","slug","components","views","themePreview","Component","path","exact","meta","title","fetchThemeConfiguration","normalizedOptions","tenantSlug","collectionSlug","depth","locale","draft","queryParams","params","URLSearchParams","limit","set","String","Object","entries","forEach","key","value","undefined","url","toString","response","fetch","ok","Error","status","data","json","doc","docs","themeConfiguration","error","getThemePreset","themeName","find","preset","getAvailableThemePresets","extendedThemePresets","allExtendedThemePresets","extendedThemeToCSSVariables","applyExtendedTheme","generateExtendedThemeCSS","resetExtendedTheme","getExtendedThemeTokens","createUseExtendedTheme","getTailwindVarReferences","DEFAULT_THEME_CONFIGURATION","resolveThemeConfiguration","generateThemeColorsCss","hexToHsl","generateThemeCSS","getThemeStyles","getThemeHtmlAttributes","ThemeProvider","ThemeLivePreview","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"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"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, Plugin } from 'payload'\nimport { createThemeConfigurationField } from './fields/themeConfigurationField.js'\nimport type { SiteThemeConfiguration } from './payload-types.js'\nimport type { ThemePreset } from './presets.js'\nimport { defaultThemePresets } from './presets.js'\nimport type { FetchThemeConfigurationOptions, ThemeManagementPluginOptions } from './types.js'\n\nconst THEME_TAB_NAME = 'themeConfiguration'\n\ninterface TabConfig {\n  name: string\n  label: { en: string; cs: string }\n  description?: { en: string; cs: string }\n  fields: Field[]\n}\n\n/**\n * Remove existing theme tab from tabs field\n */\nconst removeExistingThemeTab = (tabs: TabConfig[]): TabConfig[] =>\n  tabs.filter((tab) => tab?.name !== THEME_TAB_NAME)\n\n/**\n * Add theme configuration tab to existing tabs field or create fields array\n */\nconst upsertThemeTab = (\n  fields: Field[] | undefined,\n  themeTabConfig: TabConfig,\n  enableLogging: boolean,\n): Field[] => {\n  const existingFields = fields ?? []\n\n  // Find existing tabs field\n  const tabsFieldIndex = existingFields.findIndex(\n    (field) => 'type' in field && field.type === 'tabs',\n  )\n\n  if (tabsFieldIndex === -1) {\n    // No tabs field exists - add theme configuration as group field instead\n    if (enableLogging) {\n      console.log(\n        '🎨 Theme Management Plugin: No tabs field found, adding theme configuration as group field',\n      )\n    }\n\n    return [\n      ...existingFields,\n      {\n        name: THEME_TAB_NAME,\n        type: 'group',\n        label: themeTabConfig.label,\n        admin: {\n          description: themeTabConfig.description,\n        },\n        fields: themeTabConfig.fields,\n      },\n    ]\n  }\n\n  // Tabs field exists - inject our tab into it\n  if (enableLogging) {\n    console.log('🎨 Theme Management Plugin: Adding theme configuration tab to existing tabs')\n  }\n\n  const tabsField = existingFields[tabsFieldIndex]\n\n  if (!('tabs' in tabsField)) {\n    console.warn('🎨 Theme Management Plugin: Found tabs field but it has no tabs property')\n    return existingFields\n  }\n\n  const existingTabs = (tabsField.tabs as TabConfig[]) || []\n\n  // Remove existing theme tab if present\n  const sanitizedTabs = removeExistingThemeTab(existingTabs)\n\n  // Create new tabs field with our tab added\n  const updatedTabsField = {\n    ...tabsField,\n    tabs: [...sanitizedTabs, themeTabConfig],\n  }\n\n  // Return fields array with updated tabs field\n  const newFields = [...existingFields]\n  newFields[tabsFieldIndex] = updatedTabsField\n\n  return newFields\n}\n\nconst ensureCollectionsArray = (collections: Config['collections']): CollectionConfig[] =>\n  Array.isArray(collections) ? collections : []\n\nexport const themeManagementPlugin = (options: ThemeManagementPluginOptions = {}): Plugin => {\n  return (config: Config): Config => {\n    const {\n      enabled = true,\n      targetCollection = 'site-settings',\n      themePresets = defaultThemePresets,\n      defaultTheme = 'cool',\n      includeColorModeToggle = true,\n      includeCustomCSS = true,\n      includeBrandIdentity = false,\n      enableAdvancedFeatures = true,\n      enableLogging = false,\n    } = options\n\n    if (!enabled) {\n      if (enableLogging) {\n        console.log('🎨 Theme Management Plugin: disabled via options, skipping.')\n      }\n      return config\n    }\n\n    const themeTabConfig = createThemeConfigurationField({\n      themePresets,\n      defaultTheme,\n      includeColorModeToggle,\n      includeCustomCSS,\n      includeBrandIdentity: includeBrandIdentity ?? false,\n      enableAdvancedFeatures,\n    })\n\n    let collectionTouched = false\n\n    const collections = ensureCollectionsArray(config.collections).map((collection) => {\n      if (collection.slug !== targetCollection) {\n        return collection\n      }\n\n      collectionTouched = true\n\n      if (enableLogging) {\n        console.log(`🎨 Theme Management Plugin: enhancing collection \"${collection.slug}\"`)\n      }\n\n      const existingFields = Array.isArray(collection.fields) ? collection.fields : []\n\n      const fields = upsertThemeTab(existingFields, themeTabConfig, enableLogging)\n\n      return {\n        ...collection,\n        fields,\n      }\n    })\n\n    if (!collectionTouched) {\n      if (enableLogging) {\n        console.warn(\n          `🎨 Theme Management Plugin: collection \"${targetCollection}\" was not found, leaving config untouched.`,\n        )\n      }\n      return config\n    }\n\n    // Add custom admin view for theme preview\n    const admin = {\n      ...config.admin,\n      components: {\n        ...config.admin?.components,\n        views: {\n          ...config.admin?.components?.views,\n          themePreview: {\n            Component: '@kilivi/payloadcms-theme-management/views/ThemePreviewView#default',\n            path: '/theme-preview' as `/${string}`,\n            exact: true,\n            meta: {\n              title: 'Theme Preview',\n              description: 'Real-time preview of your theme configuration',\n            },\n          },\n        },\n      },\n    }\n\n    return {\n      ...config,\n      collections,\n      admin,\n    }\n  }\n}\n\ntype FetchOptionsInput = string | FetchThemeConfigurationOptions\n\nexport const fetchThemeConfiguration = async (\n  options?: FetchOptionsInput,\n): Promise<SiteThemeConfiguration | null> => {\n  const normalizedOptions = typeof options === 'string' ? { tenantSlug: options } : (options ?? {})\n\n  const {\n    tenantSlug,\n    collectionSlug = 'site-settings',\n    depth,\n    locale,\n    draft,\n    queryParams = {},\n  } = normalizedOptions\n\n  const params = new URLSearchParams({ limit: '1' })\n\n  if (typeof depth === 'number') params.set('depth', String(depth))\n  if (tenantSlug) params.set('tenant', tenantSlug)\n  if (locale) params.set('locale', locale)\n  if (draft) params.set('draft', 'true')\n\n  Object.entries(queryParams).forEach(([key, value]) => {\n    if (value === undefined) return\n    params.set(key, String(value))\n  })\n\n  const url = `/api/${collectionSlug}?${params.toString()}`\n\n  try {\n    const response = await fetch(url)\n    if (!response.ok) {\n      throw new Error(`Failed to fetch theme configuration (status ${response.status})`)\n    }\n\n    const data = (await response.json()) as {\n      docs?: Array<{ themeConfiguration?: SiteThemeConfiguration }>\n    }\n\n    const doc = data.docs?.[0]\n\n    return doc?.themeConfiguration ?? null\n  } catch (error) {\n    console.warn('Failed to fetch theme configuration:', error)\n    return null\n  }\n}\n\nexport const getThemePreset = (themeName: string): ThemePreset | null => {\n  return defaultThemePresets.find((preset) => preset.name === themeName) || null\n}\n\nexport const getAvailableThemePresets = (): ThemePreset[] => {\n  return defaultThemePresets\n}\n\nexport { defaultThemePresets } from './presets.js'\nexport type { ThemePreset, ThemeTypographyPreset } from './presets.js'\nexport {\n  extendedThemePresets,\n  allExtendedThemePresets,\n  extendedThemeToCSSVariables,\n} from './extended-presets.js'\nexport type { ExtendedThemePreset, ShadcnColorTokens } from './extended-presets.js'\nexport {\n  applyExtendedTheme,\n  generateExtendedThemeCSS,\n  resetExtendedTheme,\n  getExtendedThemeTokens,\n  createUseExtendedTheme,\n  getTailwindVarReferences,\n} from './utils/extendedThemeHelpers.js'\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\nexport {\n  DEFAULT_THEME_CONFIGURATION,\n  resolveThemeConfiguration,\n} from './utils/resolveThemeConfiguration.js'\nexport type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\nexport { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js'\n\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\nexport { ThemeProvider } from './providers/Theme/index.js'\n\n// Font loading utilities for Next.js integration\nexport {\n  getFontLoaderCode,\n  getThemeFontFamilies,\n  ThemeFontProvider,\n  useThemeFonts,\n  FONT_IMPORT_MAP,\n} from './providers/font-loader.js'\n\n// Components\nexport { ThemeLivePreview } from './fields/ThemeLivePreview.js'\n\nexport const ThemeManagementPlugin = themeManagementPlugin\n/** @deprecated use {@link themeManagementPlugin} */\nexport const themeConfigurationPlugin = themeManagementPlugin\n\nexport default themeManagementPlugin\n"],"names":["createThemeConfigurationField","defaultThemePresets","THEME_TAB_NAME","removeExistingThemeTab","tabs","filter","tab","name","upsertThemeTab","fields","themeTabConfig","enableLogging","existingFields","tabsFieldIndex","findIndex","field","type","console","log","label","admin","description","tabsField","warn","existingTabs","sanitizedTabs","updatedTabsField","newFields","ensureCollectionsArray","collections","Array","isArray","themeManagementPlugin","options","config","enabled","targetCollection","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","includeBrandIdentity","enableAdvancedFeatures","collectionTouched","map","collection","slug","components","views","themePreview","Component","path","exact","meta","title","fetchThemeConfiguration","normalizedOptions","tenantSlug","collectionSlug","depth","locale","draft","queryParams","params","URLSearchParams","limit","set","String","Object","entries","forEach","key","value","undefined","url","toString","response","fetch","ok","Error","status","data","json","doc","docs","themeConfiguration","error","getThemePreset","themeName","find","preset","getAvailableThemePresets","extendedThemePresets","allExtendedThemePresets","extendedThemeToCSSVariables","applyExtendedTheme","generateExtendedThemeCSS","resetExtendedTheme","getExtendedThemeTokens","createUseExtendedTheme","getTailwindVarReferences","DEFAULT_THEME_CONFIGURATION","resolveThemeConfiguration","generateThemeColorsCss","hexToHsl","generateThemeCSS","getThemeStyles","getThemeHtmlAttributes","ThemeProvider","getFontLoaderCode","getThemeFontFamilies","ThemeFontProvider","useThemeFonts","FONT_IMPORT_MAP","ThemeLivePreview","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"AACA,SAASA,6BAA6B,QAAQ,sCAAqC;AAGnF,SAASC,mBAAmB,QAAQ,eAAc;AAGlD,MAAMC,iBAAiB;AASvB;;CAEC,GACD,MAAMC,yBAAyB,CAACC,OAC9BA,KAAKC,MAAM,CAAC,CAACC,MAAQA,KAAKC,SAASL;AAErC;;CAEC,GACD,MAAMM,iBAAiB,CACrBC,QACAC,gBACAC;IAEA,MAAMC,iBAAiBH,UAAU,EAAE;IAEnC,2BAA2B;IAC3B,MAAMI,iBAAiBD,eAAeE,SAAS,CAC7C,CAACC,QAAU,UAAUA,SAASA,MAAMC,IAAI,KAAK;IAG/C,IAAIH,mBAAmB,CAAC,GAAG;QACzB,wEAAwE;QACxE,IAAIF,eAAe;YACjBM,QAAQC,GAAG,CACT;QAEJ;QAEA,OAAO;eACFN;YACH;gBACEL,MAAML;gBACNc,MAAM;gBACNG,OAAOT,eAAeS,KAAK;gBAC3BC,OAAO;oBACLC,aAAaX,eAAeW,WAAW;gBACzC;gBACAZ,QAAQC,eAAeD,MAAM;YAC/B;SACD;IACH;IAEA,6CAA6C;IAC7C,IAAIE,eAAe;QACjBM,QAAQC,GAAG,CAAC;IACd;IAEA,MAAMI,YAAYV,cAAc,CAACC,eAAe;IAEhD,IAAI,CAAE,CAAA,UAAUS,SAAQ,GAAI;QAC1BL,QAAQM,IAAI,CAAC;QACb,OAAOX;IACT;IAEA,MAAMY,eAAe,AAACF,UAAUlB,IAAI,IAAoB,EAAE;IAE1D,uCAAuC;IACvC,MAAMqB,gBAAgBtB,uBAAuBqB;IAE7C,2CAA2C;IAC3C,MAAME,mBAAmB;QACvB,GAAGJ,SAAS;QACZlB,MAAM;eAAIqB;YAAef;SAAe;IAC1C;IAEA,8CAA8C;IAC9C,MAAMiB,YAAY;WAAIf;KAAe;IACrCe,SAAS,CAACd,eAAe,GAAGa;IAE5B,OAAOC;AACT;AAEA,MAAMC,yBAAyB,CAACC,cAC9BC,MAAMC,OAAO,CAACF,eAAeA,cAAc,EAAE;AAE/C,OAAO,MAAMG,wBAAwB,CAACC,UAAwC,CAAC,CAAC;IAC9E,OAAO,CAACC;QACN,MAAM,EACJC,UAAU,IAAI,EACdC,mBAAmB,eAAe,EAClCC,eAAepC,mBAAmB,EAClCqC,eAAe,MAAM,EACrBC,yBAAyB,IAAI,EAC7BC,mBAAmB,IAAI,EACvBC,uBAAuB,KAAK,EAC5BC,yBAAyB,IAAI,EAC7B/B,gBAAgB,KAAK,EACtB,GAAGsB;QAEJ,IAAI,CAACE,SAAS;YACZ,IAAIxB,eAAe;gBACjBM,QAAQC,GAAG,CAAC;YACd;YACA,OAAOgB;QACT;QAEA,MAAMxB,iBAAiBV,8BAA8B;YACnDqC;YACAC;YACAC;YACAC;YACAC,sBAAsBA,wBAAwB;YAC9CC;QACF;QAEA,IAAIC,oBAAoB;QAExB,MAAMd,cAAcD,uBAAuBM,OAAOL,WAAW,EAAEe,GAAG,CAAC,CAACC;YAClE,IAAIA,WAAWC,IAAI,KAAKV,kBAAkB;gBACxC,OAAOS;YACT;YAEAF,oBAAoB;YAEpB,IAAIhC,eAAe;gBACjBM,QAAQC,GAAG,CAAC,CAAC,kDAAkD,EAAE2B,WAAWC,IAAI,CAAC,CAAC,CAAC;YACrF;YAEA,MAAMlC,iBAAiBkB,MAAMC,OAAO,CAACc,WAAWpC,MAAM,IAAIoC,WAAWpC,MAAM,GAAG,EAAE;YAEhF,MAAMA,SAASD,eAAeI,gBAAgBF,gBAAgBC;YAE9D,OAAO;gBACL,GAAGkC,UAAU;gBACbpC;YACF;QACF;QAEA,IAAI,CAACkC,mBAAmB;YACtB,IAAIhC,eAAe;gBACjBM,QAAQM,IAAI,CACV,CAAC,wCAAwC,EAAEa,iBAAiB,0CAA0C,CAAC;YAE3G;YACA,OAAOF;QACT;QAEA,0CAA0C;QAC1C,MAAMd,QAAQ;YACZ,GAAGc,OAAOd,KAAK;YACf2B,YAAY;gBACV,GAAGb,OAAOd,KAAK,EAAE2B,UAAU;gBAC3BC,OAAO;oBACL,GAAGd,OAAOd,KAAK,EAAE2B,YAAYC,KAAK;oBAClCC,cAAc;wBACZC,WAAW;wBACXC,MAAM;wBACNC,OAAO;wBACPC,MAAM;4BACJC,OAAO;4BACPjC,aAAa;wBACf;oBACF;gBACF;YACF;QACF;QAEA,OAAO;YACL,GAAGa,MAAM;YACTL;YACAT;QACF;IACF;AACF,EAAC;AAID,OAAO,MAAMmC,0BAA0B,OACrCtB;IAEA,MAAMuB,oBAAoB,OAAOvB,YAAY,WAAW;QAAEwB,YAAYxB;IAAQ,IAAKA,WAAW,CAAC;IAE/F,MAAM,EACJwB,UAAU,EACVC,iBAAiB,eAAe,EAChCC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,cAAc,CAAC,CAAC,EACjB,GAAGN;IAEJ,MAAMO,SAAS,IAAIC,gBAAgB;QAAEC,OAAO;IAAI;IAEhD,IAAI,OAAON,UAAU,UAAUI,OAAOG,GAAG,CAAC,SAASC,OAAOR;IAC1D,IAAIF,YAAYM,OAAOG,GAAG,CAAC,UAAUT;IACrC,IAAIG,QAAQG,OAAOG,GAAG,CAAC,UAAUN;IACjC,IAAIC,OAAOE,OAAOG,GAAG,CAAC,SAAS;IAE/BE,OAAOC,OAAO,CAACP,aAAaQ,OAAO,CAAC,CAAC,CAACC,KAAKC,MAAM;QAC/C,IAAIA,UAAUC,WAAW;QACzBV,OAAOG,GAAG,CAACK,KAAKJ,OAAOK;IACzB;IAEA,MAAME,MAAM,CAAC,KAAK,EAAEhB,eAAe,CAAC,EAAEK,OAAOY,QAAQ,IAAI;IAEzD,IAAI;QACF,MAAMC,WAAW,MAAMC,MAAMH;QAC7B,IAAI,CAACE,SAASE,EAAE,EAAE;YAChB,MAAM,IAAIC,MAAM,CAAC,4CAA4C,EAAEH,SAASI,MAAM,CAAC,CAAC,CAAC;QACnF;QAEA,MAAMC,OAAQ,MAAML,SAASM,IAAI;QAIjC,MAAMC,MAAMF,KAAKG,IAAI,EAAE,CAAC,EAAE;QAE1B,OAAOD,KAAKE,sBAAsB;IACpC,EAAE,OAAOC,OAAO;QACdrE,QAAQM,IAAI,CAAC,wCAAwC+D;QACrD,OAAO;IACT;AACF,EAAC;AAED,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,OAAOvF,oBAAoBwF,IAAI,CAAC,CAACC,SAAWA,OAAOnF,IAAI,KAAKiF,cAAc;AAC5E,EAAC;AAED,OAAO,MAAMG,2BAA2B;IACtC,OAAO1F;AACT,EAAC;AAED,SAASA,mBAAmB,QAAQ,eAAc;AAElD,SACE2F,oBAAoB,EACpBC,uBAAuB,EACvBC,2BAA2B,QACtB,wBAAuB;AAE9B,SACEC,kBAAkB,EAClBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,EACtBC,wBAAwB,QACnB,kCAAiC;AAExC,SACEC,2BAA2B,EAC3BC,yBAAyB,QACpB,uCAAsC;AAE7C,SAASC,sBAAsB,EAAEC,QAAQ,QAAQ,yBAAwB;AACzE,SAASC,gBAAgB,EAAEC,cAAc,QAAQ,wBAAuB;AACxE,SAASC,sBAAsB,QAAQ,iCAAgC;AAGvE,SAASC,aAAa,QAAQ,6BAA4B;AAE1D,iDAAiD;AACjD,SACEC,iBAAiB,EACjBC,oBAAoB,EACpBC,iBAAiB,EACjBC,aAAa,EACbC,eAAe,QACV,6BAA4B;AAEnC,aAAa;AACb,SAASC,gBAAgB,QAAQ,+BAA8B;AAE/D,OAAO,MAAMC,wBAAwBnF,sBAAqB;AAC1D,kDAAkD,GAClD,OAAO,MAAMoF,2BAA2BpF,sBAAqB;AAE7D,eAAeA,sBAAqB"}

package/dist/providers/font-loader.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Next.js Font Loader Utilities
+ *
+ * This file provides utilities for loading Google Fonts in Next.js applications
+ * based on theme configuration from the CMS.
+ *
+ * ## Usage Guide
+ *
+ * ### 1. Static Font Loading (Recommended)
+ *
+ * In your Next.js app's root layout:
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * import { Inter, Playfair_Display } from 'next/font/google'
+ *
+ * const inter = Inter({
+ *   subsets: ['latin'],
+ *   variable: '--font-body',
+ *   display: 'swap',
+ * })
+ *
+ * const playfair = Playfair_Display({
+ *   subsets: ['latin'],
+ *   variable: '--font-heading',
+ *   display: 'swap',
+ * })
+ *
+ * export default function RootLayout({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
+ *       <body>{children}</body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ *
+ * ### 2. CSS Variables Usage
+ *
+ * In your global CSS:
+ *
+ * ```css
+ * :root {
+ *   --font-body: var(--font-inter), system-ui, sans-serif;
+ *   --font-heading: var(--font-playfair), Georgia, serif;
+ * }
+ *
+ * body {
+ *   font-family: var(--font-body);
+ * }
+ *
+ * h1, h2, h3, h4, h5, h6 {
+ *   font-family: var(--font-heading);
+ * }
+ * ```
+ *
+ * ### 3. Dynamic Font Loading
+ *
+ * Use the helper functions below to generate font loader code:
+ *
+ * ```tsx
+ * import { getFontLoaderCode } from '@kilivi/payloadcms-theme-management/providers/font-loader'
+ *
+ * const themeConfig = await getThemeConfig()
+ * const fontCode = getFontLoaderCode(themeConfig)
+ * console.log(fontCode) // Copy this to your layout.tsx
+ * ```
+ */
+interface ThemeConfig {
+    bodyFont?: string;
+    headingFont?: string;
+    bodyFontCustom?: string;
+    headingFontCustom?: string;
+}
+/**
+ * Font mapping for next/font/google imports
+ * Maps theme font values to Next.js font imports
+ */
+export declare const FONT_IMPORT_MAP: Record<string, {
+    import: string;
+    variable: string;
+}>;
+/**
+ * Generate Next.js font loader code for your layout
+ *
+ * @param config - Theme configuration from CMS
+ * @returns String with complete Next.js font loading code
+ *
+ * @example
+ * ```tsx
+ * const code = getFontLoaderCode({ bodyFont: 'Inter', headingFont: 'Playfair Display' })
+ * console.log(code)
+ * // Copy the output to your app/layout.tsx file
+ * ```
+ */
+export declare function getFontLoaderCode(config: ThemeConfig): string;
+/**
+ * Get font family CSS strings for inline styles
+ *
+ * @param config - Theme configuration
+ * @returns Object with bodyFont and headingFont CSS font-family strings
+ */
+export declare function getThemeFontFamilies(config: ThemeConfig): {
+    bodyFont?: string;
+    headingFont?: string;
+};
+/**
+ * React component wrapper for font variables
+ * Use this to inject font CSS variables into your app
+ */
+export declare function ThemeFontProvider({ children, bodyFont, headingFont, bodyFontCustom, headingFontCustom, }: {
+    children: React.ReactNode;
+    bodyFont?: string;
+    headingFont?: string;
+    bodyFontCustom?: string;
+    headingFontCustom?: string;
+}): import("react").JSX.Element;
+/**
+ * Client-side hook for accessing theme fonts
+ * Use this in client components to read font CSS variables
+ */
+export declare function useThemeFonts(): {
+    bodyFont: string;
+    headingFont: string;
+};
+export {};
+//# sourceMappingURL=font-loader.d.ts.map

package/dist/providers/font-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-loader.d.ts","sourceRoot":"","sources":["../../src/providers/font-loader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAyChF,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CA+B7D;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,WAAW,GAAG;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAkBA;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,+BAeA;AAED;;;GAGG;AACH,wBAAgB,aAAa;;;EAY5B"}

package/dist/providers/font-loader.js

@@ -0,0 +1,212 @@
+/**
+ * Next.js Font Loader Utilities
+ *
+ * This file provides utilities for loading Google Fonts in Next.js applications
+ * based on theme configuration from the CMS.
+ *
+ * ## Usage Guide
+ *
+ * ### 1. Static Font Loading (Recommended)
+ *
+ * In your Next.js app's root layout:
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * import { Inter, Playfair_Display } from 'next/font/google'
+ *
+ * const inter = Inter({
+ *   subsets: ['latin'],
+ *   variable: '--font-body',
+ *   display: 'swap',
+ * })
+ *
+ * const playfair = Playfair_Display({
+ *   subsets: ['latin'],
+ *   variable: '--font-heading',
+ *   display: 'swap',
+ * })
+ *
+ * export default function RootLayout({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
+ *       <body>{children}</body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ *
+ * ### 2. CSS Variables Usage
+ *
+ * In your global CSS:
+ *
+ * ```css
+ * :root {
+ *   --font-body: var(--font-inter), system-ui, sans-serif;
+ *   --font-heading: var(--font-playfair), Georgia, serif;
+ * }
+ *
+ * body {
+ *   font-family: var(--font-body);
+ * }
+ *
+ * h1, h2, h3, h4, h5, h6 {
+ *   font-family: var(--font-heading);
+ * }
+ * ```
+ *
+ * ### 3. Dynamic Font Loading
+ *
+ * Use the helper functions below to generate font loader code:
+ *
+ * ```tsx
+ * import { getFontLoaderCode } from '@kilivi/payloadcms-theme-management/providers/font-loader'
+ *
+ * const themeConfig = await getThemeConfig()
+ * const fontCode = getFontLoaderCode(themeConfig)
+ * console.log(fontCode) // Copy this to your layout.tsx
+ * ```
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Font mapping for next/font/google imports
+ * Maps theme font values to Next.js font imports
+ */ export const FONT_IMPORT_MAP = {
+    Inter: {
+        import: `import { Inter } from 'next/font/google'\nconst inter = Inter({ subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'inter.variable'
+    },
+    Roboto: {
+        import: `import { Roboto } from 'next/font/google'\nconst roboto = Roboto({ weight: ['400', '500', '700'], subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'roboto.variable'
+    },
+    'Open Sans': {
+        import: `import { Open_Sans } from 'next/font/google'\nconst openSans = Open_Sans({ subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'openSans.variable'
+    },
+    Lato: {
+        import: `import { Lato } from 'next/font/google'\nconst lato = Lato({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'lato.variable'
+    },
+    Montserrat: {
+        import: `import { Montserrat } from 'next/font/google'\nconst montserrat = Montserrat({ subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'montserrat.variable'
+    },
+    Poppins: {
+        import: `import { Poppins } from 'next/font/google'\nconst poppins = Poppins({ weight: ['400', '500', '600', '700'], subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'poppins.variable'
+    },
+    'Playfair Display': {
+        import: `import { Playfair_Display } from 'next/font/google'\nconst playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'playfair.variable'
+    },
+    Merriweather: {
+        import: `import { Merriweather } from 'next/font/google'\nconst merriweather = Merriweather({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'merriweather.variable'
+    },
+    Lora: {
+        import: `import { Lora } from 'next/font/google'\nconst lora = Lora({ subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'lora.variable'
+    },
+    'Crimson Text': {
+        import: `import { Crimson_Text } from 'next/font/google'\nconst crimsonText = Crimson_Text({ weight: ['400', '600', '700'], subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'crimsonText.variable'
+    }
+};
+/**
+ * Generate Next.js font loader code for your layout
+ *
+ * @param config - Theme configuration from CMS
+ * @returns String with complete Next.js font loading code
+ *
+ * @example
+ * ```tsx
+ * const code = getFontLoaderCode({ bodyFont: 'Inter', headingFont: 'Playfair Display' })
+ * console.log(code)
+ * // Copy the output to your app/layout.tsx file
+ * ```
+ */ export function getFontLoaderCode(config) {
+    const imports = [];
+    const variables = [];
+    if (config.bodyFont && config.bodyFont !== 'preset' && config.bodyFont !== 'custom') {
+        const fontConfig = FONT_IMPORT_MAP[config.bodyFont];
+        if (fontConfig) {
+            imports.push(fontConfig.import);
+            variables.push(fontConfig.variable);
+        }
+    }
+    if (config.headingFont && config.headingFont !== 'preset' && config.headingFont !== 'custom') {
+        const fontConfig = FONT_IMPORT_MAP[config.headingFont];
+        if (fontConfig) {
+            imports.push(fontConfig.import);
+            variables.push(fontConfig.variable);
+        }
+    }
+    return `// app/layout.tsx
+${imports.join('\n\n')}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={\`${variables.join(' ')}\`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+`;
+}
+/**
+ * Get font family CSS strings for inline styles
+ *
+ * @param config - Theme configuration
+ * @returns Object with bodyFont and headingFont CSS font-family strings
+ */ export function getThemeFontFamilies(config) {
+    const result = {};
+    // Body font
+    if (config.bodyFont === 'custom' && config.bodyFontCustom) {
+        result.bodyFont = config.bodyFontCustom;
+    } else if (config.bodyFont && config.bodyFont !== 'preset') {
+        result.bodyFont = `var(--font-body), ${config.bodyFont}, sans-serif`;
+    }
+    // Heading font
+    if (config.headingFont === 'custom' && config.headingFontCustom) {
+        result.headingFont = config.headingFontCustom;
+    } else if (config.headingFont && config.headingFont !== 'preset') {
+        result.headingFont = `var(--font-heading), ${config.headingFont}, serif`;
+    }
+    return result;
+}
+/**
+ * React component wrapper for font variables
+ * Use this to inject font CSS variables into your app
+ */ export function ThemeFontProvider({ children, bodyFont, headingFont, bodyFontCustom, headingFontCustom }) {
+    const fonts = getThemeFontFamilies({
+        bodyFont,
+        headingFont,
+        bodyFontCustom,
+        headingFontCustom
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            '--font-body': fonts.bodyFont,
+            '--font-heading': fonts.headingFont
+        },
+        children: children
+    });
+}
+/**
+ * Client-side hook for accessing theme fonts
+ * Use this in client components to read font CSS variables
+ */ export function useThemeFonts() {
+    if (typeof window === 'undefined') {
+        return {
+            bodyFont: undefined,
+            headingFont: undefined
+        };
+    }
+    const bodyFont = getComputedStyle(document.documentElement).getPropertyValue('--font-body');
+    const headingFont = getComputedStyle(document.documentElement).getPropertyValue('--font-heading');
+    return {
+        bodyFont: bodyFont || undefined,
+        headingFont: headingFont || undefined
+    };
+}
+
+//# sourceMappingURL=font-loader.js.map

package/dist/providers/font-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/font-loader.tsx"],"sourcesContent":["/**\n * Next.js Font Loader Utilities\n *\n * This file provides utilities for loading Google Fonts in Next.js applications\n * based on theme configuration from the CMS.\n *\n * ## Usage Guide\n *\n * ### 1. Static Font Loading (Recommended)\n *\n * In your Next.js app's root layout:\n *\n * ```tsx\n * // app/layout.tsx\n * import { Inter, Playfair_Display } from 'next/font/google'\n *\n * const inter = Inter({\n *   subsets: ['latin'],\n *   variable: '--font-body',\n *   display: 'swap',\n * })\n *\n * const playfair = Playfair_Display({\n *   subsets: ['latin'],\n *   variable: '--font-heading',\n *   display: 'swap',\n * })\n *\n * export default function RootLayout({ children }: { children: React.ReactNode }) {\n *   return (\n *     <html lang=\"en\" className={`${inter.variable} ${playfair.variable}`}>\n *       <body>{children}</body>\n *     </html>\n *   )\n * }\n * ```\n *\n * ### 2. CSS Variables Usage\n *\n * In your global CSS:\n *\n * ```css\n * :root {\n *   --font-body: var(--font-inter), system-ui, sans-serif;\n *   --font-heading: var(--font-playfair), Georgia, serif;\n * }\n *\n * body {\n *   font-family: var(--font-body);\n * }\n *\n * h1, h2, h3, h4, h5, h6 {\n *   font-family: var(--font-heading);\n * }\n * ```\n *\n * ### 3. Dynamic Font Loading\n *\n * Use the helper functions below to generate font loader code:\n *\n * ```tsx\n * import { getFontLoaderCode } from '@kilivi/payloadcms-theme-management/providers/font-loader'\n *\n * const themeConfig = await getThemeConfig()\n * const fontCode = getFontLoaderCode(themeConfig)\n * console.log(fontCode) // Copy this to your layout.tsx\n * ```\n */\n\ninterface ThemeConfig {\n  bodyFont?: string\n  headingFont?: string\n  bodyFontCustom?: string\n  headingFontCustom?: string\n}\n\n/**\n * Font mapping for next/font/google imports\n * Maps theme font values to Next.js font imports\n */\nexport const FONT_IMPORT_MAP: Record<string, { import: string; variable: string }> = {\n  Inter: {\n    import: `import { Inter } from 'next/font/google'\\nconst inter = Inter({ subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'inter.variable',\n  },\n  Roboto: {\n    import: `import { Roboto } from 'next/font/google'\\nconst roboto = Roboto({ weight: ['400', '500', '700'], subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'roboto.variable',\n  },\n  'Open Sans': {\n    import: `import { Open_Sans } from 'next/font/google'\\nconst openSans = Open_Sans({ subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'openSans.variable',\n  },\n  Lato: {\n    import: `import { Lato } from 'next/font/google'\\nconst lato = Lato({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'lato.variable',\n  },\n  Montserrat: {\n    import: `import { Montserrat } from 'next/font/google'\\nconst montserrat = Montserrat({ subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'montserrat.variable',\n  },\n  Poppins: {\n    import: `import { Poppins } from 'next/font/google'\\nconst poppins = Poppins({ weight: ['400', '500', '600', '700'], subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'poppins.variable',\n  },\n  'Playfair Display': {\n    import: `import { Playfair_Display } from 'next/font/google'\\nconst playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'playfair.variable',\n  },\n  Merriweather: {\n    import: `import { Merriweather } from 'next/font/google'\\nconst merriweather = Merriweather({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'merriweather.variable',\n  },\n  Lora: {\n    import: `import { Lora } from 'next/font/google'\\nconst lora = Lora({ subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'lora.variable',\n  },\n  'Crimson Text': {\n    import: `import { Crimson_Text } from 'next/font/google'\\nconst crimsonText = Crimson_Text({ weight: ['400', '600', '700'], subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'crimsonText.variable',\n  },\n}\n\n/**\n * Generate Next.js font loader code for your layout\n *\n * @param config - Theme configuration from CMS\n * @returns String with complete Next.js font loading code\n *\n * @example\n * ```tsx\n * const code = getFontLoaderCode({ bodyFont: 'Inter', headingFont: 'Playfair Display' })\n * console.log(code)\n * // Copy the output to your app/layout.tsx file\n * ```\n */\nexport function getFontLoaderCode(config: ThemeConfig): string {\n  const imports: string[] = []\n  const variables: string[] = []\n\n  if (config.bodyFont && config.bodyFont !== 'preset' && config.bodyFont !== 'custom') {\n    const fontConfig = FONT_IMPORT_MAP[config.bodyFont]\n    if (fontConfig) {\n      imports.push(fontConfig.import)\n      variables.push(fontConfig.variable)\n    }\n  }\n\n  if (config.headingFont && config.headingFont !== 'preset' && config.headingFont !== 'custom') {\n    const fontConfig = FONT_IMPORT_MAP[config.headingFont]\n    if (fontConfig) {\n      imports.push(fontConfig.import)\n      variables.push(fontConfig.variable)\n    }\n  }\n\n  return `// app/layout.tsx\n${imports.join('\\n\\n')}\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\" className={\\`${variables.join(' ')}\\`}>\n      <body>{children}</body>\n    </html>\n  )\n}\n`\n}\n\n/**\n * Get font family CSS strings for inline styles\n *\n * @param config - Theme configuration\n * @returns Object with bodyFont and headingFont CSS font-family strings\n */\nexport function getThemeFontFamilies(config: ThemeConfig): {\n  bodyFont?: string\n  headingFont?: string\n} {\n  const result: { bodyFont?: string; headingFont?: string } = {}\n\n  // Body font\n  if (config.bodyFont === 'custom' && config.bodyFontCustom) {\n    result.bodyFont = config.bodyFontCustom\n  } else if (config.bodyFont && config.bodyFont !== 'preset') {\n    result.bodyFont = `var(--font-body), ${config.bodyFont}, sans-serif`\n  }\n\n  // Heading font\n  if (config.headingFont === 'custom' && config.headingFontCustom) {\n    result.headingFont = config.headingFontCustom\n  } else if (config.headingFont && config.headingFont !== 'preset') {\n    result.headingFont = `var(--font-heading), ${config.headingFont}, serif`\n  }\n\n  return result\n}\n\n/**\n * React component wrapper for font variables\n * Use this to inject font CSS variables into your app\n */\nexport function ThemeFontProvider({\n  children,\n  bodyFont,\n  headingFont,\n  bodyFontCustom,\n  headingFontCustom,\n}: {\n  children: React.ReactNode\n  bodyFont?: string\n  headingFont?: string\n  bodyFontCustom?: string\n  headingFontCustom?: string\n}) {\n  const fonts = getThemeFontFamilies({ bodyFont, headingFont, bodyFontCustom, headingFontCustom })\n\n  return (\n    <div\n      style={\n        {\n          '--font-body': fonts.bodyFont,\n          '--font-heading': fonts.headingFont,\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * Client-side hook for accessing theme fonts\n * Use this in client components to read font CSS variables\n */\nexport function useThemeFonts() {\n  if (typeof window === 'undefined') {\n    return { bodyFont: undefined, headingFont: undefined }\n  }\n\n  const bodyFont = getComputedStyle(document.documentElement).getPropertyValue('--font-body')\n  const headingFont = getComputedStyle(document.documentElement).getPropertyValue('--font-heading')\n\n  return {\n    bodyFont: bodyFont || undefined,\n    headingFont: headingFont || undefined,\n  }\n}\n"],"names":["FONT_IMPORT_MAP","Inter","import","variable","Roboto","Lato","Montserrat","Poppins","Merriweather","Lora","getFontLoaderCode","config","imports","variables","bodyFont","fontConfig","push","headingFont","join","getThemeFontFamilies","result","bodyFontCustom","headingFontCustom","ThemeFontProvider","children","fonts","div","style","useThemeFonts","window","undefined","getComputedStyle","document","documentElement","getPropertyValue"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilivi/payloadcms-theme-management",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Theme configuration plugin for Payload CMS v3",
   "type": "module",
   "main": "./dist/index.js",

package/dist/fields/ThemePresetSelectField.d.ts

@@ -1,4 +0,0 @@
-import type { SelectFieldClientComponent } from 'payload';
-declare const ThemePresetSelectField: SelectFieldClientComponent;
-export default ThemePresetSelectField;
-//# sourceMappingURL=ThemePresetSelectField.d.ts.map

package/dist/fields/ThemePresetSelectField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemePresetSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePresetSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAIzD,QAAA,MAAM,sBAAsB,EAAE,0BAsO7B,CAAA;AAED,eAAe,sBAAsB,CAAA"}