@kilivi/payloadcms-theme-management 2.1.0 → 2.2.0

package/dist/fields/StylePresetField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/StylePresetField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\nimport { useCallback, useMemo } from 'react'\nimport { X } from 'lucide-react'\nimport { AppearanceUndoBar } from '../components/AppearanceSessionControls.js'\nimport {\n  createBulkWriter,\n  getAppearanceSession,\n  useAppearanceSession,\n} from '../hooks/useAppearanceSession.js'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport { allStylePresets, stylePresetCategories } from '../style-presets.js'\nimport type { StylePreset } from '../style-presets.js'\n\nconst VF_KEYS = [\n  'effectStyle',\n  'shadowIntensity',\n  'backdropBlur',\n  'borderStyle',\n  'borderWidth',\n  'glassOpacity',\n] as const\n\nconst CS_KEYS = ['buttonVariant', 'cardStyle', 'cardHoverEffect', 'navbarStyle'] as const\n\nconst TYPO_KEYS = [\n  'bodyFont',\n  'headingFont',\n  'baseFontSize',\n  'lineHeight',\n  'letterSpacing',\n  'headingWeight',\n] as const\n\n// Visual preview config for each effect style\nconst EFFECT_PREVIEW: Record<\n  string,\n  { containerBg: string; bg: string; border: string; shadow: string; radius: string; label: string }\n> = {\n  glass: {\n    containerBg: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%)',\n    bg: 'rgba(255,255,255,0.22)',\n    border: '1px solid rgba(255,255,255,0.5)',\n    shadow: '0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.3)',\n    radius: '10px',\n    label: 'glass',\n  },\n  neumorphic: {\n    containerBg: '#dde1e7',\n    bg: '#dde1e7',\n    border: 'none',\n    shadow: '5px 5px 10px rgba(0,0,0,0.18), -4px -4px 9px rgba(255,255,255,0.88)',\n    radius: '10px',\n    label: 'soft',\n  },\n  clay: {\n    containerBg: 'linear-gradient(135deg, #bfdbfe 0%, #bbf7d0 100%)',\n    bg: 'linear-gradient(135deg, #818cf8 0%, #22d3ee 100%)',\n    border: 'none',\n    shadow: '4px 4px 0 rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.12)',\n    radius: '16px',\n    label: 'clay',\n  },\n  elevated: {\n    containerBg: '#f1f5f9',\n    bg: '#ffffff',\n    border: '1px solid #e2e8f0',\n    shadow: '0 6px 18px rgba(0,0,0,0.12)',\n    radius: '8px',\n    label: 'lift',\n  },\n  flat: {\n    containerBg: '#f8fafc',\n    bg: '#f1f5f9',\n    border: '1px solid #94a3b8',\n    shadow: 'none',\n    radius: '3px',\n    label: 'flat',\n  },\n}\n\n// Map preset → preview style\nfunction getPreviewStyle(preset: StylePreset): React.CSSProperties {\n  const effect = preset.visualEffects?.effectStyle ?? 'elevated'\n  const config = EFFECT_PREVIEW[effect] ?? EFFECT_PREVIEW.elevated!\n\n  // brutalism: hard offset border\n  if (preset.componentStyles?.cardStyle === 'bordered') {\n    return {\n      background: '#fff',\n      border: `${preset.visualEffects?.borderWidth ?? '2px'} solid #0f172a`,\n      boxShadow: `3px 3px 0 #0f172a`,\n      borderRadius: 0,\n    }\n  }\n  // gradient-border preset\n  if (preset.componentStyles?.cardStyle === 'gradient-border') {\n    return {\n      background: 'linear-gradient(135deg, #f0abfc, #818cf8, #38bdf8)',\n      border: 'none',\n      boxShadow: '0 0 14px rgba(129,140,248,0.45)',\n      borderRadius: '8px',\n    }\n  }\n  return {\n    background: config.bg,\n    border: config.border,\n    boxShadow: config.shadow,\n    borderRadius:\n      preset.borderRadius === 'none' ? 0 : preset.borderRadius === 'xl' ? '18px' : config.radius,\n  }\n}\n\n// Container background for the swatch area — matches the effect's visual context\nfunction getContainerBg(preset: StylePreset): string {\n  if (preset.componentStyles?.cardStyle === 'bordered') return '#f8fafc'\n  if (preset.componentStyles?.cardStyle === 'gradient-border') {\n    return 'linear-gradient(135deg, #f0abfc 0%, #818cf8 50%, #38bdf8 100%)'\n  }\n  const effect = preset.visualEffects?.effectStyle ?? 'elevated'\n  return EFFECT_PREVIEW[effect]?.containerBg ?? '#f1f5f9'\n}\n\n// Selection uses Payload's own contrast token so it reads in both admin themes.\nconst SELECTED_ACCENT = 'var(--theme-elevation-800)'\n// The thumbnail is always drawn on a light surface, so its sample button keeps a fixed dark fill.\nconst THUMB_BUTTON = '#334155'\n\nexport default function StylePresetField(props: TextFieldClientProps) {\n  const { path } = props\n  const { value: selectedPreset, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const lang = useThemeLanguage() as 'en' | 'cs'\n  const t = useThemeTranslations()\n\n  const { setModified } = useForm()\n  const formFields = useFormFields(([state]) => state) as Record<string, { value?: unknown } | undefined>\n  const { locks } = useAppearanceSession()\n  const fullyLocked = locks.style && locks.fonts\n\n  /**\n   * Write a style preset, honouring the session locks: typography is skipped with\n   * the Fonts lock, and effects / components / radius / motion / spacing with the\n   * Style lock. Colours are never touched by a style preset.\n   */\n  const applyStylePreset = useCallback(\n    (preset: StylePreset, writer: ReturnType<typeof createBulkWriter>) => {\n      const basePath = path.substring(0, path.lastIndexOf('.'))\n      const { locks: current } = getAppearanceSession()\n\n      if (!current.style) {\n        if (preset.borderRadius !== undefined) writer.write(`${basePath}.borderRadius`, preset.borderRadius)\n        if (preset.animationLevel !== undefined)\n          writer.write(`${basePath}.animationLevel`, preset.animationLevel)\n        if (preset.spacing !== undefined) writer.write(`${basePath}.spacing`, preset.spacing)\n\n        VF_KEYS.forEach((key) => {\n          const value = preset.visualEffects?.[key]\n          if (value !== undefined) writer.write(`${basePath}.visualEffects.${key}`, value)\n        })\n        CS_KEYS.forEach((key) => {\n          const value = preset.componentStyles?.[key]\n          if (value !== undefined) writer.write(`${basePath}.componentStyles.${key}`, value)\n        })\n      }\n\n      if (!current.fonts) {\n        TYPO_KEYS.forEach((key) => {\n          const value = preset.typography?.[key]\n          if (value !== undefined) writer.write(`${basePath}.typography.${key}`, value)\n        })\n      }\n    },\n    [path],\n  )\n\n  const handleSelect = useCallback(\n    (preset: StylePreset, label: string) => {\n      if (getAppearanceSession().locks.style && getAppearanceSession().locks.fonts) return\n      const writer = createBulkWriter(formFields, dispatchFields)\n      writer.write(path, preset.name)\n      applyStylePreset(preset, writer)\n      setModified(true)\n      writer.commit('style', label)\n    },\n    [formFields, dispatchFields, path, applyStylePreset, setModified],\n  )\n\n  const groupedPresets = useMemo(\n    () =>\n      stylePresetCategories.map((cat) => ({\n        ...cat,\n        presets: allStylePresets.filter((p) => p.category === cat.name),\n      })),\n    [],\n  )\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>\n      {/* Header */}\n      <p\n        style={{\n          margin: '0 0 16px',\n          fontSize: '12px',\n          color: 'var(--theme-elevation-600)',\n          lineHeight: 1.6,\n        }}\n      >\n        {t.stylePreset.description}\n      </p>\n\n      {fullyLocked ? <p className=\"tm-locked-note\">{t.appearance.styleLocked}</p> : null}\n      <AppearanceUndoBar sources={['style']} />\n\n      {groupedPresets.map((category) => {\n        const accent = SELECTED_ACCENT\n        const catLabel =\n          typeof category.label === 'object'\n            ? (category.label[lang] ?? category.label.en)\n            : category.label\n        return (\n          <div key={category.name} style={{ marginBottom: '20px' }}>\n            {/* Category header */}\n            <div\n              id={`${path}-${category.name}-heading`}\n              style={{\n                marginBottom: '10px',\n                fontSize: '13px',\n                fontWeight: 600,\n                color: 'var(--theme-elevation-800)',\n              }}\n            >\n              {catLabel}\n            </div>\n\n            {/* Preset grid */}\n            <div\n              role=\"group\"\n              aria-labelledby={`${path}-${category.name}-heading`}\n              style={{\n                display: 'grid',\n                gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',\n                gap: '8px',\n              }}\n            >\n              {category.presets.map((preset) => {\n                const isSelected = selectedPreset === preset.name\n                const labelText =\n                  typeof preset.label === 'object'\n                    ? (preset.label[lang] ?? preset.label.en)\n                    : preset.label\n                const descText =\n                  typeof preset.description === 'object'\n                    ? (preset.description[lang] ?? preset.description.en)\n                    : preset.description\n                const previewStyle = getPreviewStyle(preset)\n                const containerBg = getContainerBg(preset)\n\n                return (\n                  <button\n                    key={preset.name}\n                    type=\"button\"\n                    aria-pressed={isSelected}\n                    aria-disabled={fullyLocked || undefined}\n                    onClick={() => handleSelect(preset, labelText)}\n                    style={{\n                      display: 'flex',\n                      flexDirection: 'column',\n                      gap: '0',\n                      padding: '0',\n                      borderRadius: '10px',\n                      border: isSelected ? `2px solid ${accent}` : '2px solid var(--theme-elevation-150)',\n                      background: 'var(--theme-elevation-50)',\n                      cursor: fullyLocked ? 'not-allowed' : 'pointer',\n                      opacity: fullyLocked && !isSelected ? 0.6 : 1,\n                      textAlign: 'left',\n                      overflow: 'hidden',\n                      transition: 'border-color 140ms ease-out, box-shadow 140ms ease-out',\n                      boxShadow: isSelected\n                        ? '0 4px 12px rgba(0,0,0,0.12)'\n                        : '0 1px 3px rgba(0,0,0,0.06)',\n                    }}\n                  >\n                    {/* Visual preview swatch: a fixed light miniature, hidden from assistive tech */}\n                    <div\n                      aria-hidden=\"true\"\n                      style={{\n                        height: '52px',\n                        background: containerBg,\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        padding: '10px',\n                        gap: '6px',\n                        position: 'relative',\n                      }}\n                    >\n                      {/* Mini card preview */}\n                      <div\n                        style={{\n                          width: '52px',\n                          height: '32px',\n                          ...previewStyle,\n                          display: 'flex',\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          flexShrink: 0,\n                        }}\n                      >\n                        {/* Tiny inner content lines */}\n                        <div\n                          style={{\n                            display: 'flex',\n                            flexDirection: 'column',\n                            gap: '3px',\n                            padding: '4px',\n                          }}\n                        >\n                          <div\n                            style={{\n                              width: '30px',\n                              height: '3px',\n                              borderRadius: '2px',\n                              background: 'rgba(0,0,0,0.18)',\n                            }}\n                          />\n                          <div\n                            style={{\n                              width: '22px',\n                              height: '2px',\n                              borderRadius: '2px',\n                              background: 'rgba(0,0,0,0.10)',\n                            }}\n                          />\n                        </div>\n                      </div>\n\n                      {/* Mini button preview */}\n                      <div\n                        style={{\n                          padding: '3px 8px',\n                          borderRadius:\n                            preset.borderRadius === 'none'\n                              ? 0\n                              : preset.componentStyles?.buttonVariant === 'pill'\n                                ? '999px'\n                                : '5px',\n                          background:\n                            preset.componentStyles?.buttonVariant === 'brutal'\n                              ? 'transparent'\n                              : THUMB_BUTTON,\n                          border:\n                            preset.componentStyles?.buttonVariant === 'brutal'\n                              ? `2px solid #0f172a`\n                              : 'none',\n                          boxShadow:\n                            preset.componentStyles?.buttonVariant === 'brutal'\n                              ? '2px 2px 0 #0f172a'\n                              : 'none',\n                          fontSize: '8px',\n                          fontWeight: 700,\n                          color:\n                            preset.componentStyles?.buttonVariant === 'brutal' ? '#0f172a' : '#fff',\n                          letterSpacing: '0.03em',\n                          flexShrink: 0,\n                        }}\n                      >\n                        BTN\n                      </div>\n\n                      {/* Selected checkmark */}\n                      {isSelected && (\n                        <div\n                          style={{\n                            position: 'absolute',\n                            top: '6px',\n                            right: '6px',\n                            width: '16px',\n                            height: '16px',\n                            borderRadius: '50%',\n                            background: accent,\n                            display: 'flex',\n                            alignItems: 'center',\n                            justifyContent: 'center',\n                          }}\n                        >\n                          <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n                            <path\n                              d=\"M1.5 4.5L3.5 6.5L7.5 2.5\"\n                              stroke=\"var(--theme-elevation-0)\"\n                              strokeWidth=\"1.5\"\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                            />\n                          </svg>\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Text content */}\n                    <div style={{ padding: '8px 10px 10px' }}>\n                      <div\n                        style={{\n                          fontSize: '12px',\n                          fontWeight: 600,\n                          color: isSelected ? accent : 'var(--theme-elevation-800, #1e293b)',\n                          marginBottom: '2px',\n                          lineHeight: 1.3,\n                        }}\n                      >\n                        {labelText}\n                      </div>\n                      {/* Font sample row */}\n                      {preset.typography && (\n                        <div\n                          style={{\n                            display: 'flex',\n                            gap: '6px',\n                            alignItems: 'baseline',\n                            marginBottom: '3px',\n                            overflow: 'hidden',\n                          }}\n                        >\n                          <span\n                            style={{\n                              fontFamily: preset.typography.headingFont ?? 'inherit',\n                              fontWeight: preset.typography.headingWeight ?? '700',\n                              fontSize: '12px',\n                              color: 'var(--theme-elevation-800)',\n                              whiteSpace: 'nowrap',\n                              overflow: 'hidden',\n                              textOverflow: 'ellipsis',\n                              maxWidth: '70px',\n                              flexShrink: 0,\n                            }}\n                            title={preset.typography.headingFont}\n                          >\n                            {(preset.typography.headingFont ?? '')\n                              .split(',')[0]\n                              ?.split(' ')\n                              .slice(0, 2)\n                              .join(' ') || 'Heading'}\n                          </span>\n                          {preset.typography.bodyFont !== preset.typography.headingFont && (\n                            <span\n                              style={{\n                                fontFamily: preset.typography.bodyFont ?? 'inherit',\n                                fontSize: '11px',\n                                color: 'var(--theme-elevation-600)',\n                                whiteSpace: 'nowrap',\n                                overflow: 'hidden',\n                                textOverflow: 'ellipsis',\n                                maxWidth: '70px',\n                              }}\n                              title={preset.typography.bodyFont}\n                            >\n                              {(preset.typography.bodyFont ?? '')\n                                .split(',')[0]\n                                ?.split(' ')\n                                .slice(0, 2)\n                                .join(' ') || 'Body'}\n                            </span>\n                          )}\n                          {preset.spacing && (\n                            <span\n                              style={{\n                                marginLeft: 'auto',\n                                fontSize: '11px',\n                                color: 'var(--theme-elevation-600)',\n                                flexShrink: 0,\n                              }}\n                            >\n                              {preset.spacing}\n                            </span>\n                          )}\n                        </div>\n                      )}\n                      {descText && (\n                        <div\n                          style={{\n                            fontSize: '12px',\n                            color: 'var(--theme-elevation-600)',\n                            lineHeight: 1.4,\n                            display: '-webkit-box',\n                            WebkitLineClamp: 2,\n                            WebkitBoxOrient: 'vertical' as const,\n                            overflow: 'hidden',\n                          }}\n                        >\n                          {descText}\n                        </div>\n                      )}\n                    </div>\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n        )\n      })}\n\n      {/* Clear button */}\n      {selectedPreset && (\n        <button\n          type=\"button\"\n          onClick={() => setValue('')}\n          style={{\n            alignSelf: 'flex-start',\n            marginTop: '4px',\n            display: 'inline-flex',\n            alignItems: 'center',\n            gap: '6px',\n            minHeight: '28px',\n            padding: '5px 12px',\n            fontSize: '12px',\n            borderRadius: '6px',\n            border: '1px solid var(--theme-elevation-200)',\n            background: 'transparent',\n            color: 'var(--theme-elevation-700)',\n            cursor: 'pointer',\n          }}\n        >\n          <X size={14} aria-hidden />\n          {t.ui.clearSelection}\n        </button>\n      )}\n    </div>\n  )\n}\n"],"names":["useField","useForm","useFormFields","useCallback","useMemo","X","AppearanceUndoBar","createBulkWriter","getAppearanceSession","useAppearanceSession","useThemeLanguage","useThemeTranslations","allStylePresets","stylePresetCategories","VF_KEYS","CS_KEYS","TYPO_KEYS","EFFECT_PREVIEW","glass","containerBg","bg","border","shadow","radius","label","neumorphic","clay","elevated","flat","getPreviewStyle","preset","effect","visualEffects","effectStyle","config","componentStyles","cardStyle","background","borderWidth","boxShadow","borderRadius","getContainerBg","SELECTED_ACCENT","THUMB_BUTTON","StylePresetField","props","path","value","selectedPreset","setValue","dispatchFields","lang","t","setModified","formFields","state","locks","fullyLocked","style","fonts","applyStylePreset","writer","basePath","substring","lastIndexOf","current","undefined","write","animationLevel","spacing","forEach","key","typography","handleSelect","name","commit","groupedPresets","map","cat","presets","filter","p","category","div","display","flexDirection","gap","margin","fontSize","color","lineHeight","stylePreset","description","className","appearance","styleLocked","sources","accent","catLabel","en","marginBottom","id","fontWeight","role","aria-labelledby","gridTemplateColumns","isSelected","labelText","descText","previewStyle","button","type","aria-pressed","aria-disabled","onClick","padding","cursor","opacity","textAlign","overflow","transition","aria-hidden","height","alignItems","justifyContent","position","width","flexShrink","buttonVariant","letterSpacing","top","right","svg","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","span","fontFamily","headingFont","headingWeight","whiteSpace","textOverflow","maxWidth","title","split","slice","join","bodyFont","marginLeft","WebkitLineClamp","WebkitBoxOrient","alignSelf","marginTop","minHeight","size","ui","clearSelection"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/StylePresetField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\nimport { useCallback, useMemo } from 'react'\nimport { X } from 'lucide-react'\nimport { AppearanceUndoBar } from '../components/AppearanceSessionControls.js'\nimport {\n  createBulkWriter,\n  getAppearanceSession,\n  useAppearanceSession,\n} from '../hooks/useAppearanceSession.js'\nimport { getFontCatalogEntry } from '../constants/themeFonts.js'\nimport { useThemeFonts } from '../hooks/useThemeFonts.js'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport {\n  allStylePresets,\n  normalizeStylePresetValue,\n  stylePresetCategories,\n} from '../style-presets.js'\nimport type { StylePreset } from '../style-presets.js'\n\nconst VF_KEYS = [\n  'effectStyle',\n  'shadowIntensity',\n  'backdropBlur',\n  'borderStyle',\n  'borderWidth',\n  'glassOpacity',\n] as const\n\nconst CS_KEYS = [\n  'buttonVariant',\n  'buttonSize',\n  'cardStyle',\n  'cardHoverEffect',\n  'navbarStyle',\n  'footerStyle',\n  'imageStyle',\n  'linkStyle',\n] as const\n\nconst TYPO_KEYS = [\n  'bodyFont',\n  'headingFont',\n  'baseFontSize',\n  'lineHeight',\n  'letterSpacing',\n  'headingWeight',\n] as const\n\n// Visual preview config for each effect style\nconst EFFECT_PREVIEW: Record<\n  string,\n  { containerBg: string; bg: string; border: string; shadow: string; radius: string; label: string }\n> = {\n  glass: {\n    containerBg: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%)',\n    bg: 'rgba(255,255,255,0.22)',\n    border: '1px solid rgba(255,255,255,0.5)',\n    shadow: '0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.3)',\n    radius: '10px',\n    label: 'glass',\n  },\n  neumorphic: {\n    containerBg: '#dde1e7',\n    bg: '#dde1e7',\n    border: 'none',\n    shadow: '5px 5px 10px rgba(0,0,0,0.18), -4px -4px 9px rgba(255,255,255,0.88)',\n    radius: '10px',\n    label: 'soft',\n  },\n  clay: {\n    containerBg: 'linear-gradient(135deg, #bfdbfe 0%, #bbf7d0 100%)',\n    bg: 'linear-gradient(135deg, #818cf8 0%, #22d3ee 100%)',\n    border: 'none',\n    shadow: '4px 4px 0 rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.12)',\n    radius: '16px',\n    label: 'clay',\n  },\n  elevated: {\n    containerBg: '#f1f5f9',\n    bg: '#ffffff',\n    border: '1px solid #e2e8f0',\n    shadow: '0 6px 18px rgba(0,0,0,0.12)',\n    radius: '8px',\n    label: 'lift',\n  },\n  flat: {\n    containerBg: '#f8fafc',\n    bg: '#f1f5f9',\n    border: '1px solid #94a3b8',\n    shadow: 'none',\n    radius: '3px',\n    label: 'flat',\n  },\n}\n\n// Map preset → preview style\nfunction getPreviewStyle(preset: StylePreset): React.CSSProperties {\n  const effect = preset.visualEffects?.effectStyle ?? 'elevated'\n  const config = EFFECT_PREVIEW[effect] ?? EFFECT_PREVIEW.elevated!\n\n  // brutalism: hard offset border\n  if (preset.componentStyles?.cardStyle === 'bordered') {\n    return {\n      background: '#fff',\n      border: `${preset.visualEffects?.borderWidth ?? '2px'} solid #0f172a`,\n      boxShadow: `3px 3px 0 #0f172a`,\n      borderRadius: 0,\n    }\n  }\n  // gradient-border preset\n  if (preset.componentStyles?.cardStyle === 'gradient-border') {\n    return {\n      background: 'linear-gradient(135deg, #f0abfc, #818cf8, #38bdf8)',\n      border: 'none',\n      boxShadow: '0 0 14px rgba(129,140,248,0.45)',\n      borderRadius: '8px',\n    }\n  }\n  return {\n    background: config.bg,\n    border: config.border,\n    boxShadow: config.shadow,\n    borderRadius:\n      preset.borderRadius === 'none' ? 0 : preset.borderRadius === 'xl' ? '18px' : config.radius,\n  }\n}\n\n// Container background for the swatch area — matches the effect's visual context\nfunction getContainerBg(preset: StylePreset): string {\n  if (preset.componentStyles?.cardStyle === 'bordered') return '#f8fafc'\n  if (preset.componentStyles?.cardStyle === 'gradient-border') {\n    return 'linear-gradient(135deg, #f0abfc 0%, #818cf8 50%, #38bdf8 100%)'\n  }\n  const effect = preset.visualEffects?.effectStyle ?? 'elevated'\n  return EFFECT_PREVIEW[effect]?.containerBg ?? '#f1f5f9'\n}\n\nconst ALL_PRESET_FONTS = allStylePresets.flatMap((preset) => [\n  preset.typography?.bodyFont,\n  preset.typography?.headingFont,\n])\n\nconst fontStack = (value?: string) => getFontCatalogEntry(value)?.fontFamily ?? 'inherit'\nconst fontName = (value?: string) =>\n  value === 'helvetica' ? 'Helvetica' : value === 'system-ui' ? 'System' : (value ?? '')\n\n// Selection uses Payload's own contrast token so it reads in both admin themes.\nconst SELECTED_ACCENT = 'var(--theme-elevation-800)'\n// The thumbnail is always drawn on a light surface, so its sample button keeps a fixed dark fill.\nconst THUMB_BUTTON = '#334155'\n\nexport default function StylePresetField(props: TextFieldClientProps) {\n  const { path } = props\n  const { value: selectedPreset, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const lang = useThemeLanguage() as 'en' | 'cs'\n  const t = useThemeTranslations()\n\n  const { setModified } = useForm()\n  const formFields = useFormFields(([state]) => state) as Record<string, { value?: unknown } | undefined>\n  const { locks } = useAppearanceSession()\n  const fullyLocked = locks.style && locks.fonts\n  // The cards show each style's real fonts.\n  useThemeFonts(ALL_PRESET_FONTS)\n\n  /**\n   * Write a style preset, honouring the session locks: typography is skipped with\n   * the Fonts lock, and effects / components / radius / motion / spacing with the\n   * Style lock. Colours are never touched by a style preset.\n   */\n  const applyStylePreset = useCallback(\n    (preset: StylePreset, writer: ReturnType<typeof createBulkWriter>) => {\n      const basePath = path.substring(0, path.lastIndexOf('.'))\n      const { locks: current } = getAppearanceSession()\n\n      if (!current.style) {\n        if (preset.borderRadius !== undefined) writer.write(`${basePath}.borderRadius`, preset.borderRadius)\n        if (preset.animationLevel !== undefined)\n          writer.write(`${basePath}.animationLevel`, preset.animationLevel)\n        if (preset.spacing !== undefined)\n          writer.write(`${basePath}.spacing`, normalizeStylePresetValue('spacing', preset.spacing))\n\n        VF_KEYS.forEach((key) => {\n          const value = preset.visualEffects?.[key]\n          if (value !== undefined) writer.write(`${basePath}.visualEffects.${key}`, value)\n        })\n        CS_KEYS.forEach((key) => {\n          const value = preset.componentStyles?.[key]\n          if (value !== undefined) writer.write(`${basePath}.componentStyles.${key}`, value)\n        })\n      }\n\n      if (!current.fonts) {\n        TYPO_KEYS.forEach((key) => {\n          const value = preset.typography?.[key]\n          if (value !== undefined)\n            writer.write(\n              `${basePath}.typography.${key}`,\n              normalizeStylePresetValue(`typography.${key}`, value),\n            )\n        })\n      }\n    },\n    [path],\n  )\n\n  const handleSelect = useCallback(\n    (preset: StylePreset, label: string) => {\n      if (getAppearanceSession().locks.style && getAppearanceSession().locks.fonts) return\n      const writer = createBulkWriter(formFields, dispatchFields)\n      writer.write(path, preset.name)\n      applyStylePreset(preset, writer)\n      setModified(true)\n      writer.commit('style', label)\n    },\n    [formFields, dispatchFields, path, applyStylePreset, setModified],\n  )\n\n  const groupedPresets = useMemo(\n    () =>\n      stylePresetCategories.map((cat) => ({\n        ...cat,\n        presets: allStylePresets.filter((p) => p.category === cat.name),\n      })),\n    [],\n  )\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>\n      {/* Header */}\n      <p\n        style={{\n          margin: '0 0 16px',\n          fontSize: '12px',\n          color: 'var(--theme-elevation-600)',\n          lineHeight: 1.6,\n        }}\n      >\n        {t.stylePreset.description}\n      </p>\n\n      {fullyLocked ? <p className=\"tm-locked-note\">{t.appearance.styleLocked}</p> : null}\n      <AppearanceUndoBar sources={['style']} />\n\n      {groupedPresets.map((category) => {\n        const accent = SELECTED_ACCENT\n        const catLabel =\n          typeof category.label === 'object'\n            ? (category.label[lang] ?? category.label.en)\n            : category.label\n        return (\n          <div key={category.name} style={{ marginBottom: '20px' }}>\n            {/* Category header */}\n            <div\n              id={`${path}-${category.name}-heading`}\n              style={{\n                marginBottom: '10px',\n                fontSize: '13px',\n                fontWeight: 600,\n                color: 'var(--theme-elevation-800)',\n              }}\n            >\n              {catLabel}\n            </div>\n\n            {/* Preset grid */}\n            <div\n              role=\"group\"\n              aria-labelledby={`${path}-${category.name}-heading`}\n              style={{\n                display: 'grid',\n                gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',\n                gap: '8px',\n              }}\n            >\n              {category.presets.map((preset) => {\n                const isSelected = selectedPreset === preset.name\n                const labelText =\n                  typeof preset.label === 'object'\n                    ? (preset.label[lang] ?? preset.label.en)\n                    : preset.label\n                const descText =\n                  typeof preset.description === 'object'\n                    ? (preset.description[lang] ?? preset.description.en)\n                    : preset.description\n                const previewStyle = getPreviewStyle(preset)\n                const containerBg = getContainerBg(preset)\n\n                return (\n                  <button\n                    key={preset.name}\n                    type=\"button\"\n                    aria-pressed={isSelected}\n                    aria-disabled={fullyLocked || undefined}\n                    onClick={() => handleSelect(preset, labelText)}\n                    style={{\n                      display: 'flex',\n                      flexDirection: 'column',\n                      gap: '0',\n                      padding: '0',\n                      borderRadius: '10px',\n                      border: isSelected ? `2px solid ${accent}` : '2px solid var(--theme-elevation-150)',\n                      background: 'var(--theme-elevation-50)',\n                      cursor: fullyLocked ? 'not-allowed' : 'pointer',\n                      opacity: fullyLocked && !isSelected ? 0.6 : 1,\n                      textAlign: 'left',\n                      overflow: 'hidden',\n                      transition: 'border-color 140ms ease-out, box-shadow 140ms ease-out',\n                      boxShadow: isSelected\n                        ? '0 4px 12px rgba(0,0,0,0.12)'\n                        : '0 1px 3px rgba(0,0,0,0.06)',\n                    }}\n                  >\n                    {/* Visual preview swatch: a fixed light miniature, hidden from assistive tech */}\n                    <div\n                      aria-hidden=\"true\"\n                      style={{\n                        height: '52px',\n                        background: containerBg,\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        padding: '10px',\n                        gap: '6px',\n                        position: 'relative',\n                      }}\n                    >\n                      {/* Mini card preview */}\n                      <div\n                        style={{\n                          width: '52px',\n                          height: '32px',\n                          ...previewStyle,\n                          display: 'flex',\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          flexShrink: 0,\n                        }}\n                      >\n                        {/* Tiny inner content lines */}\n                        <div\n                          style={{\n                            display: 'flex',\n                            flexDirection: 'column',\n                            gap: '3px',\n                            padding: '4px',\n                          }}\n                        >\n                          <div\n                            style={{\n                              width: '30px',\n                              height: '3px',\n                              borderRadius: '2px',\n                              background: 'rgba(0,0,0,0.18)',\n                            }}\n                          />\n                          <div\n                            style={{\n                              width: '22px',\n                              height: '2px',\n                              borderRadius: '2px',\n                              background: 'rgba(0,0,0,0.10)',\n                            }}\n                          />\n                        </div>\n                      </div>\n\n                      {/* Mini button preview */}\n                      <div\n                        style={{\n                          padding: '3px 8px',\n                          borderRadius:\n                            preset.borderRadius === 'none'\n                              ? 0\n                              : preset.componentStyles?.buttonVariant === 'pill'\n                                ? '999px'\n                                : '5px',\n                          background:\n                            preset.componentStyles?.buttonVariant === 'brutal'\n                              ? 'transparent'\n                              : THUMB_BUTTON,\n                          border:\n                            preset.componentStyles?.buttonVariant === 'brutal'\n                              ? `2px solid #0f172a`\n                              : 'none',\n                          boxShadow:\n                            preset.componentStyles?.buttonVariant === 'brutal'\n                              ? '2px 2px 0 #0f172a'\n                              : 'none',\n                          fontSize: '8px',\n                          fontWeight: 700,\n                          color:\n                            preset.componentStyles?.buttonVariant === 'brutal' ? '#0f172a' : '#fff',\n                          letterSpacing: '0.03em',\n                          flexShrink: 0,\n                        }}\n                      >\n                        BTN\n                      </div>\n\n                      {/* Selected checkmark */}\n                      {isSelected && (\n                        <div\n                          style={{\n                            position: 'absolute',\n                            top: '6px',\n                            right: '6px',\n                            width: '16px',\n                            height: '16px',\n                            borderRadius: '50%',\n                            background: accent,\n                            display: 'flex',\n                            alignItems: 'center',\n                            justifyContent: 'center',\n                          }}\n                        >\n                          <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n                            <path\n                              d=\"M1.5 4.5L3.5 6.5L7.5 2.5\"\n                              stroke=\"var(--theme-elevation-0)\"\n                              strokeWidth=\"1.5\"\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                            />\n                          </svg>\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Text content */}\n                    <div style={{ padding: '8px 10px 10px' }}>\n                      <div\n                        style={{\n                          fontSize: '12px',\n                          fontWeight: 600,\n                          color: isSelected ? accent : 'var(--theme-elevation-800, #1e293b)',\n                          marginBottom: '2px',\n                          lineHeight: 1.3,\n                        }}\n                      >\n                        {labelText}\n                      </div>\n                      {/* Font sample: the heading face set as the style would set it, plus font names */}\n                      {preset.typography && (\n                        <div\n                          style={{\n                            display: 'flex',\n                            gap: '8px',\n                            alignItems: 'baseline',\n                            marginBottom: '4px',\n                            minWidth: 0,\n                          }}\n                        >\n                          <span\n                            aria-hidden=\"true\"\n                            style={{\n                              fontFamily: fontStack(preset.typography.headingFont),\n                              fontWeight: preset.typography.headingWeight ?? '700',\n                              textTransform:\n                                preset.typography.letterSpacing === 'wider' ? 'uppercase' : 'none',\n                              fontSize: '20px',\n                              lineHeight: 1,\n                              color: 'var(--theme-elevation-800)',\n                              flexShrink: 0,\n                            }}\n                          >\n                            Aa\n                          </span>\n                          <span\n                            style={{\n                              fontSize: '12px',\n                              color: 'var(--theme-elevation-600)',\n                              whiteSpace: 'nowrap',\n                              overflow: 'hidden',\n                              textOverflow: 'ellipsis',\n                              minWidth: 0,\n                            }}\n                          >\n                            {preset.typography.bodyFont === preset.typography.headingFont\n                              ? fontName(preset.typography.headingFont)\n                              : `${fontName(preset.typography.headingFont)} · ${fontName(preset.typography.bodyFont)}`}\n                          </span>\n                        </div>\n                      )}\n                      {descText && (\n                        <div\n                          style={{\n                            fontSize: '12px',\n                            color: 'var(--theme-elevation-600)',\n                            lineHeight: 1.4,\n                            display: '-webkit-box',\n                            WebkitLineClamp: 2,\n                            WebkitBoxOrient: 'vertical' as const,\n                            overflow: 'hidden',\n                          }}\n                        >\n                          {descText}\n                        </div>\n                      )}\n                    </div>\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n        )\n      })}\n\n      {/* Clear button */}\n      {selectedPreset && (\n        <button\n          type=\"button\"\n          onClick={() => setValue('')}\n          style={{\n            alignSelf: 'flex-start',\n            marginTop: '4px',\n            display: 'inline-flex',\n            alignItems: 'center',\n            gap: '6px',\n            minHeight: '28px',\n            padding: '5px 12px',\n            fontSize: '12px',\n            borderRadius: '6px',\n            border: '1px solid var(--theme-elevation-200)',\n            background: 'transparent',\n            color: 'var(--theme-elevation-700)',\n            cursor: 'pointer',\n          }}\n        >\n          <X size={14} aria-hidden />\n          {t.ui.clearSelection}\n        </button>\n      )}\n    </div>\n  )\n}\n"],"names":["useField","useForm","useFormFields","useCallback","useMemo","X","AppearanceUndoBar","createBulkWriter","getAppearanceSession","useAppearanceSession","getFontCatalogEntry","useThemeFonts","useThemeLanguage","useThemeTranslations","allStylePresets","normalizeStylePresetValue","stylePresetCategories","VF_KEYS","CS_KEYS","TYPO_KEYS","EFFECT_PREVIEW","glass","containerBg","bg","border","shadow","radius","label","neumorphic","clay","elevated","flat","getPreviewStyle","preset","effect","visualEffects","effectStyle","config","componentStyles","cardStyle","background","borderWidth","boxShadow","borderRadius","getContainerBg","ALL_PRESET_FONTS","flatMap","typography","bodyFont","headingFont","fontStack","value","fontFamily","fontName","SELECTED_ACCENT","THUMB_BUTTON","StylePresetField","props","path","selectedPreset","setValue","dispatchFields","lang","t","setModified","formFields","state","locks","fullyLocked","style","fonts","applyStylePreset","writer","basePath","substring","lastIndexOf","current","undefined","write","animationLevel","spacing","forEach","key","handleSelect","name","commit","groupedPresets","map","cat","presets","filter","p","category","div","display","flexDirection","gap","margin","fontSize","color","lineHeight","stylePreset","description","className","appearance","styleLocked","sources","accent","catLabel","en","marginBottom","id","fontWeight","role","aria-labelledby","gridTemplateColumns","isSelected","labelText","descText","previewStyle","button","type","aria-pressed","aria-disabled","onClick","padding","cursor","opacity","textAlign","overflow","transition","aria-hidden","height","alignItems","justifyContent","position","width","flexShrink","buttonVariant","letterSpacing","top","right","svg","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","minWidth","span","headingWeight","textTransform","whiteSpace","textOverflow","WebkitLineClamp","WebkitBoxOrient","alignSelf","marginTop","minHeight","size","ui","clearSelection"],"mappings":"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"}

package/dist/fields/ThemePreviewField.css

@@ -430,8 +430,70 @@
   margin-bottom: 20px;
 }
 
+/* Shown instead of the mock preview when Payload's native Live Preview is available. */
+.tm-native-preview-hint {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 12px 14px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-m, 8px);
+  background: var(--theme-elevation-50);
+}
+
+.tm-native-preview-hint__text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 240px;
+}
+
+.tm-native-preview-hint__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-elevation-800);
+}
+
+.tm-native-preview-hint__body {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--theme-elevation-650, var(--theme-elevation-600));
+}
+
+.tm-native-preview-hint__action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 6px 12px;
+  border: 1px solid var(--theme-elevation-800);
+  border-radius: var(--style-radius-s, 6px);
+  background: var(--theme-elevation-800);
+  color: var(--theme-elevation-0);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.tm-native-preview-hint__action:hover {
+  background: var(--theme-elevation-900);
+}
+
+.tm-native-preview-hint__action:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-elevation-800));
+  outline-offset: 2px;
+}
+
+/* Two columns only while the mock preview is actually rendered; with native Live
+   Preview the controls take the full width. */
 @container tm-appearance (min-width: 960px) {
-  .tm-appearance > .group-field__wrap > .render-fields {
+  .tm-appearance > .group-field__wrap > .render-fields:has(> .tm-live-preview-slot) {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(340px, 42%);
     column-gap: 28px;

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

@@ -1 +1 @@
-{"version":3,"file":"ThemePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePreviewField.tsx"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,CAAA;AAIhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAwRrD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAqftE"}
+{"version":3,"file":"ThemePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePreviewField.tsx"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AA0QrD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAqftE"}

package/dist/fields/ThemePreviewField.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './ThemePreviewField.css';
 import { useField, useForm, useFormFields } from '@payloadcms/ui';
-import * as _PayloadUI from '@payloadcms/ui';
 import { ChevronDown, ChevronRight, Moon, Palette, Sun } from 'lucide-react';
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { resolveTypographyPreview } from '../components/typographyPreviewUtils.js';
@@ -15,9 +14,7 @@ import { parseThemePresetInput } from '../utils/customThemePresets.js';
 import { resolveLocalizedText } from '../utils/localizedText.js';
 import { AppearanceLocks, AppearanceUndoBar } from '../components/AppearanceSessionControls.js';
 import { createBulkWriter, getAppearanceSession } from '../hooks/useAppearanceSession.js';
-const _useLivePreviewContext = _PayloadUI.useLivePreviewContext ?? function useLivePreviewContextFallback() {
-    return {};
-};
+import { useNativeLivePreview } from '../hooks/useNativeLivePreview.js';
 // FALLBACK_THEME and runtime theme presets are computed inside the component
 const colorKeys = Object.keys(lightModeDefaults);
 function ModePreview({ icon: Icon, title, colors, typography, radius }) {
@@ -249,7 +246,7 @@ export default function ThemePreviewField(props) {
     // isLivePreviewing: true only when the user actively clicked Preview and the iframe/popup is open.
     // While editing (before clicking Preview), the panel is always shown regardless of livePreview config.
     // Default context value is false, so the panel shows by default even without LivePreview provider.
-    const { isLivePreviewing } = _useLivePreviewContext();
+    const { isOpen: isLivePreviewing } = useNativeLivePreview();
     const showPreviewPanel = configuredShowPreview && !isLivePreviewing;
     // If the plugin provided theme presets via admin config, prefer those;
     // support both `field.admin.themePresets` (legacy) and `field.admin.custom.themePresets`

package/dist/fields/ThemePreviewField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\n\nimport './ThemePreviewField.css'\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport * as _PayloadUI from '@payloadcms/ui'\nimport { ChevronDown, ChevronRight, Moon, Palette, Sun, type LucideIcon } from 'lucide-react'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type {\n  ResolvedTypographyPreview,\n  TypographySelection,\n} from '../components/typographyPreviewUtils.js'\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\nimport { allThemePresets } from '../index.js'\nimport type { ThemePreset, ThemeTypographyPreset } from '../presets.js'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport PaletteGeneratorField from './PaletteGeneratorField.js'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.js'\nimport { parseThemePresetInput } from '../utils/customThemePresets.js'\nimport { resolveLocalizedText } from '../utils/localizedText.js'\nimport { AppearanceLocks, AppearanceUndoBar } from '../components/AppearanceSessionControls.js'\nimport { createBulkWriter, getAppearanceSession } from '../hooks/useAppearanceSession.js'\n\n// useLivePreviewContext is exported from @payloadcms/ui at runtime but TypeScript fails to resolve\n// the re-export chain (context.js → context.d.ts) in pnpm symlinked node_modules.\n// Fall back to a no-op so the component never crashes when the export is absent.\n//\n// Context fields (from packages/ui/src/providers/LivePreview/context.ts):\n//   isLivePreviewEnabled – whether livePreview is configured for this document in Payload config\n//   isLivePreviewing     – whether the user has actively clicked Preview (iframe/popup is open)\ntype _LivePreviewCtxResult = { isLivePreviewEnabled?: boolean; isLivePreviewing?: boolean }\nconst _useLivePreviewContext: () => _LivePreviewCtxResult =\n  (_PayloadUI as unknown as { useLivePreviewContext?: () => _LivePreviewCtxResult })\n    .useLivePreviewContext ??\n  function useLivePreviewContextFallback() {\n    return {}\n  }\n\ninterface ColorModeColors {\n  background?: string\n  foreground?: string\n  card?: string\n  cardForeground?: string\n  popover?: string\n  popoverForeground?: string\n  primary?: string\n  primaryForeground?: string\n  secondary?: string\n  secondaryForeground?: string\n  muted?: string\n  mutedForeground?: string\n  accent?: string\n  accentForeground?: string\n  destructive?: string\n  destructiveForeground?: string\n  border?: string\n  input?: string\n  ring?: string\n}\n\ninterface ThemePresetDefinition {\n  label: string\n  lightMode: ColorModeColors\n  darkMode: ColorModeColors\n  typography?: ThemeTypographyPreset\n  borderRadius: 'none' | 'small' | 'medium' | 'large' | 'xl'\n  visualEffects?: ThemePreset['visualEffects']\n}\n\n// FALLBACK_THEME and runtime theme presets are computed inside the component\n\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\n\n// translations and swatches will be computed inside the component to respect admin language at runtime\n\ninterface ModePreviewProps {\n  icon: LucideIcon\n  title: string\n  colors: ColorModeColors\n  typography: ResolvedTypographyPreview\n  radius: {\n    card: string\n    chip: string\n    pill: string\n  }\n}\n\nfunction ModePreview({ icon: Icon, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\n  const t = useThemeTranslations()\n  const background = colors.background ?? '#ffffff'\n  const foreground = colors.foreground ?? '#0a0a0a'\n  const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)'\n  const cardBackground = colors.card ?? background\n  const cardForeground = colors.cardForeground ?? foreground\n  const primary = colors.primary ?? foreground\n  const primaryForeground = colors.primaryForeground ?? background\n  const secondary = colors.secondary ?? '#f4f4f5'\n  const secondaryForeground = colors.secondaryForeground ?? foreground\n  const muted = colors.muted ?? secondary\n  const mutedForeground = colors.mutedForeground ?? secondaryForeground\n  const accent = colors.accent ?? secondary\n  const accentForeground = colors.accentForeground ?? secondaryForeground\n  const headingFont = typography.headingFont\n  const bodyFont = typography.bodyFont\n  const baseFontSize = typography.baseFontSize\n  const lineHeight = typography.lineHeight\n\n  return (\n    <div\n      // A picture of the site: its sample buttons must not become dead tab stops.\n      ref={(el) => el?.setAttribute('inert', '')}\n      style={{\n        display: 'grid',\n        gap: '16px',\n        padding: '18px',\n        borderRadius: '12px',\n        backgroundColor: background,\n        color: foreground,\n        border: `1px solid ${borderColor}`,\n        boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',\n        fontFamily: bodyFont,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.08em',\n          textTransform: 'uppercase',\n          opacity: 0.7,\n        }}\n      >\n        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>\n          <Icon size={13} aria-hidden />\n          {title}\n        </span>\n        <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>\n          {background.toUpperCase()}\n        </span>\n      </div>\n\n      <div\n        style={{\n          backgroundColor: cardBackground,\n          color: cardForeground,\n          borderRadius: radius.card,\n          border: `1px solid ${borderColor}`,\n          padding: '16px',\n          display: 'flex',\n          gap: '12px',\n          flexWrap: 'wrap',\n        }}\n      >\n        <button\n          type=\"button\"\n          style={{\n            padding: '10px 18px',\n            borderRadius: radius.pill,\n            border: 'none',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: 600,\n            letterSpacing: '0.02em',\n            backgroundColor: primary,\n            color: primaryForeground,\n            boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',\n          }}\n        >\n          {t.ui.primaryAction}\n        </button>\n        <button\n          type=\"button\"\n          style={{\n            padding: '10px 18px',\n            borderRadius: radius.chip,\n            border: '1px solid transparent',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: 600,\n            letterSpacing: '0.02em',\n            backgroundColor: secondary,\n            color: secondaryForeground,\n            boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',\n          }}\n        >\n          {t.ui.secondaryAction}\n        </button>\n      </div>\n\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\n          gap: '10px',\n        }}\n      >\n        <div\n          style={{\n            borderRadius: radius.chip,\n            padding: '10px 12px',\n            fontSize: '12px',\n            fontWeight: 500,\n            backgroundColor: muted,\n            color: mutedForeground,\n          }}\n        >\n          {t.ui.mutedSample}\n        </div>\n        <div\n          style={{\n            borderRadius: radius.chip,\n            padding: '10px 12px',\n            fontSize: '12px',\n            fontWeight: 500,\n            backgroundColor: accent,\n            color: accentForeground,\n          }}\n        >\n          {t.ui.accentSample}\n        </div>\n      </div>\n\n      <div\n        style={{\n          display: 'grid',\n          gap: '8px',\n          borderRadius: '10px',\n          border: `1px dashed ${borderColor}`,\n          padding: '14px',\n          backgroundColor: 'rgba(148, 163, 184, 0.08)',\n        }}\n      >\n        <div\n          style={{\n            fontFamily: headingFont,\n            fontSize: 'clamp(24px, 3vw, 32px)',\n            fontWeight: 600,\n            lineHeight: 1.2,\n          }}\n        >\n          {t.ui.headingSample}\n        </div>\n        <p\n          style={{\n            margin: 0,\n            fontFamily: bodyFont,\n            fontSize: baseFontSize,\n            lineHeight,\n            color: foreground,\n            opacity: 0.85,\n          }}\n        >\n          {t.ui.bodySample}\n        </p>\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '10px',\n            fontSize: '12px',\n            // Follow the previewed palette so the meta line stays readable in dark mode.\n            color: mutedForeground,\n          }}\n        >\n          <span>\n            {t.ui.bodyFontLabel}: {typography.bodyLabel}\n          </span>\n          <span>\n            {t.ui.headingFontLabel}: {typography.headingLabel}\n          </span>\n          <span>\n            {t.ui.baseSizeLabel}: {baseFontSize}\n          </span>\n          <span>\n            {t.ui.lineHeightLabel}: {lineHeight}\n          </span>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\n  const { field, path } = props\n  // useThemePreviewField: explicit opt-out via admin.custom.useThemePreviewField = false\n  // Plugin always passes true; advanced users can override to permanently hide the panel.\n  const configuredShowPreview =\n    (field?.admin?.custom as unknown as { useThemePreviewField?: boolean })?.useThemePreviewField ??\n    true\n  // isLivePreviewing: true only when the user actively clicked Preview and the iframe/popup is open.\n  // While editing (before clicking Preview), the panel is always shown regardless of livePreview config.\n  // Default context value is false, so the panel shows by default even without LivePreview provider.\n  const { isLivePreviewing } = _useLivePreviewContext()\n  const showPreviewPanel = configuredShowPreview && !isLivePreviewing\n  // If the plugin provided theme presets via admin config, prefer those;\n  // support both `field.admin.themePresets` (legacy) and `field.admin.custom.themePresets`\n  // otherwise fallback to `allThemePresets`.\n  // Prefer presets passed via `admin.custom.themePresets` (set by the field factory / plugin).\n  // Fall back to legacy `admin.themePresets` for backwards compatibility, then to `allThemePresets`.\n  const configuredThemePresets =\n    (field?.admin?.custom as unknown as { themePresets?: ThemePreset[] })?.themePresets ??\n    (field?.admin as unknown as { themePresets?: ThemePreset[] })?.themePresets ??\n    allThemePresets\n  // Presets imported through the \"Custom Theme Presets\" JSON field live next to\n  // this field. Merge them in (overriding built-ins by name) so they show up in\n  // the picker as soon as they are imported.\n  const customPresetsPath = [...path.split('.').slice(0, -1), 'customThemePresets'].join('.')\n  const customPresetsValue = useFormFields(\n    ([formState]: any) => formState?.[customPresetsPath]?.value as unknown,\n  )\n  const baseThemePresets = useMemo(() => {\n    const custom = parseThemePresetInput(customPresetsValue)\n    if (custom.length === 0) return configuredThemePresets\n    const byName = new Map(configuredThemePresets.map((preset) => [preset.name, preset]))\n    custom.forEach((preset) => byName.set(preset.name, preset))\n    return [...byName.values()]\n  }, [configuredThemePresets, customPresetsValue])\n  const runtimeThemePresets = useMemo(() => {\n    return (baseThemePresets as ThemePreset[]).reduce<Record<string, ThemePresetDefinition>>(\n      (acc, preset) => {\n        acc[preset.name] = {\n          label: preset.label,\n          lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },\n          darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },\n          typography: preset.typography,\n          borderRadius: preset.borderRadius,\n          visualEffects: preset.visualEffects,\n        }\n        return acc\n      },\n      {},\n    )\n  }, [baseThemePresets])\n  const fallbackTheme = baseThemePresets[0]?.name ?? 'cool'\n  const { value: selectedTheme, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const formFields = useFormFields(([formState]: any) => formState)\n  const hasAppliedInitialPresetRef = useRef(false)\n  const [previewOpen, setPreviewOpen] = useState(true)\n  // Preset list starts collapsed once a theme is already selected so the\n  // preview panel — not the long preset list — dominates the layout.\n  const [presetsOpen, setPresetsOpen] = useState(false)\n\n  const { setModified } = useForm()\n\n  /**\n   * Write a theme preset into the form, honouring the session locks:\n   * colours (Colours lock), visual effects (Style lock). Theme fonts apply\n   * implicitly through the \"Use theme preset\" font option, so with the Fonts lock\n   * on we pin the current preset font as a custom value before switching.\n   */\n  const applyPreset = useCallback(\n    (presetName: string, writer: ReturnType<typeof createBulkWriter>) => {\n      const preset = runtimeThemePresets[presetName]\n      if (!preset) {\n        return\n      }\n      const { locks } = getAppearanceSession()\n\n      if (!locks.colors) {\n        colorKeys.forEach((key) => {\n          const lightValue = preset.lightMode[key]\n          const darkValue = preset.darkMode[key]\n          if (lightValue) writer.write(`themeConfiguration.lightMode.${key}`, lightValue)\n          if (darkValue) writer.write(`themeConfiguration.darkMode.${key}`, darkValue)\n        })\n      }\n\n      if (locks.fonts && selectedTheme) {\n        const typographyValue = (key: string) =>\n          formFields?.[`themeConfiguration.typography.${key}`]?.value as string | undefined\n        const current = resolveTypographyPreview(\n          {\n            bodyFont: typographyValue('bodyFont'),\n            headingFont: typographyValue('headingFont'),\n          },\n          selectedTheme,\n        )\n        const pin = (key: 'bodyFont' | 'headingFont', family: string) => {\n          const value = typographyValue(key)\n          if (!value || value === 'preset') {\n            writer.write(`themeConfiguration.typography.${key}`, 'custom')\n            writer.write(`themeConfiguration.typography.${key}Custom`, family)\n          }\n        }\n        pin('bodyFont', current.bodyFont)\n        pin('headingFont', current.headingFont)\n      }\n\n      if (!locks.style && preset.visualEffects) {\n        const vfKeys = [\n          'effectStyle',\n          'shadowIntensity',\n          'backdropBlur',\n          'borderStyle',\n          'borderWidth',\n          'glassOpacity',\n        ] as const\n        vfKeys.forEach((key) => {\n          const value = preset.visualEffects?.[key]\n          if (value !== undefined) writer.write(`themeConfiguration.visualEffects.${key}`, value)\n        })\n      }\n    },\n    [runtimeThemePresets, formFields, selectedTheme],\n  )\n\n  const handleThemeSelect = useCallback(\n    (value: string) => {\n      if (!value) {\n        setValue(value)\n        return\n      }\n\n      hasAppliedInitialPresetRef.current = true\n      const writer = createBulkWriter(formFields, dispatchFields)\n      writer.write(path, value)\n      applyPreset(value, writer)\n      setModified(true)\n      writer.commit('theme', runtimeThemePresets[value]?.label ?? value)\n    },\n    [applyPreset, setValue, formFields, dispatchFields, path, setModified, runtimeThemePresets],\n  )\n\n  useEffect(() => {\n    if (!selectedTheme) {\n      return\n    }\n\n    if (runtimeThemePresets[selectedTheme]) {\n      return\n    }\n\n    hasAppliedInitialPresetRef.current = false\n    setValue(fallbackTheme)\n  }, [selectedTheme, setValue])\n\n  useEffect(() => {\n    if (hasAppliedInitialPresetRef.current) {\n      return\n    }\n\n    if (!selectedTheme) {\n      return\n    }\n\n    if (!formFields) {\n      return\n    }\n\n    const preset = runtimeThemePresets[selectedTheme]\n    if (!preset) {\n      hasAppliedInitialPresetRef.current = true\n      return\n    }\n\n    const hasExistingValues = colorKeys.some((key) => {\n      const lightField = formFields[`themeConfiguration.lightMode.${key}`]\n      const darkField = formFields[`themeConfiguration.darkMode.${key}`]\n\n      const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0\n      const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0\n\n      return lightValue || darkValue\n    })\n\n    if (hasExistingValues) {\n      hasAppliedInitialPresetRef.current = true\n      return\n    }\n\n    // First-time fill of empty colour fields: not an editor action, so no undo entry.\n    applyPreset(selectedTheme, createBulkWriter(formFields, dispatchFields))\n    hasAppliedInitialPresetRef.current = true\n  }, [selectedTheme, formFields, applyPreset])\n\n  const lightModeColors = useMemo(() => {\n    const presetLightMode = selectedTheme\n      ? runtimeThemePresets[selectedTheme]?.lightMode\n      : undefined\n\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\n      const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`]\n      const rawValue =\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n          ? fieldState.value\n          : undefined\n\n      acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key]\n      return acc\n    }, {} as ColorModeColors)\n  }, [formFields, selectedTheme])\n\n  const darkModeColors = useMemo(() => {\n    const presetDarkMode = selectedTheme ? runtimeThemePresets[selectedTheme]?.darkMode : undefined\n\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\n      const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`]\n      const rawValue =\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n          ? fieldState.value\n          : undefined\n\n      acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key]\n      return acc\n    }, {} as ColorModeColors)\n  }, [formFields, selectedTheme])\n\n  const activePreset = selectedTheme ? runtimeThemePresets[selectedTheme] : undefined\n  const formTypographySelection = useMemo<TypographySelection | null>(() => {\n    if (!formFields) {\n      return null\n    }\n\n    const getValue = (key: string) => formFields[`themeConfiguration.typography.${key}`]?.value\n\n    return {\n      bodyFont: (getValue('bodyFont') as string | undefined) ?? undefined,\n      headingFont: (getValue('headingFont') as string | undefined) ?? undefined,\n      bodyFontCustom: (getValue('bodyFontCustom') as string | undefined) ?? undefined,\n      headingFontCustom: (getValue('headingFontCustom') as string | undefined) ?? undefined,\n      baseFontSize: (getValue('baseFontSize') as string | undefined) ?? undefined,\n      lineHeight: (getValue('lineHeight') as string | undefined) ?? undefined,\n    }\n  }, [formFields])\n\n  const previewTypography = useMemo<ResolvedTypographyPreview>(() => {\n    return resolveTypographyPreview(formTypographySelection, selectedTheme)\n  }, [formTypographySelection, selectedTheme])\n\n  const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value\n  const presetRadius = activePreset?.borderRadius ?? 'medium'\n  const resolvedBorderRadius = (\n    typeof borderRadiusValue === 'string' && borderRadiusValue.length\n      ? borderRadiusValue\n      : presetRadius\n  ) as keyof typeof borderRadiusPresets\n  const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium\n  const borderRadiusCSS =\n    typeof borderRadiusPreset.css === 'string'\n      ? { '--radius-default': borderRadiusPreset.css }\n      : (borderRadiusPreset.css as Record<string, string>)\n  const previewRadius = {\n    card: borderRadiusCSS['--radius-large'] ?? '1rem',\n    chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',\n    pill: borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\n  }\n\n  // Translate labels at runtime based on the active Payload admin language\n  const t = useThemeTranslations()\n  const fieldId = `tm-theme-${useId().replace(/:/g, '')}`\n  // Explicitly type keys as `keyof ColorModeColors` to satisfy TypeScript when indexing `lightMode`/`darkMode`\n  const highlightSwatches: { key: keyof ColorModeColors; label: string }[] = [\n    { key: 'primary', label: t.colors.primary },\n    { key: 'secondary', label: t.colors.secondary },\n    { key: 'accent', label: t.colors.accent },\n    { key: 'background', label: t.colors.background },\n    { key: 'foreground', label: t.colors.foreground },\n  ]\n\n  const presetCount = Object.keys(runtimeThemePresets).length\n  const summarySwatches = highlightSwatches\n    .map(({ key }) => (activePreset ? activePreset.lightMode[key] : lightModeColors[key]))\n    .filter((v): v is string => typeof v === 'string' && v.trim().length > 0)\n\n  // Field labels/descriptions arrive as `{ en, cs, … }` objects. Resolve them\n  // against the active admin language (Payload i18n) instead of hard-coding `en`,\n  // otherwise the theme selection stays English in every locale.\n  const adminLanguage = useThemeLanguage()\n  const resolveLocalized = (\n    value: string | Record<string, string> | null | undefined,\n    fallback = '',\n  ): string => resolveLocalizedText(value, adminLanguage, fallback)\n\n  const fieldLabel = resolveLocalized(\n    field.label as string | Record<string, string> | undefined,\n    'Theme',\n  )\n  const fieldDescription = resolveLocalized(\n    field.admin?.description as string | Record<string, string> | undefined,\n  )\n\n  return (\n    <div style={{ marginBottom: '24px' }}>\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          marginBottom: '10px',\n        }}\n      >\n        <div\n          id={`${fieldId}-label`}\n          style={{\n            fontSize: '13px',\n            fontWeight: 600,\n            color: 'var(--theme-elevation-800)',\n          }}\n        >\n          {fieldLabel}\n        </div>\n        {showPreviewPanel && (\n          <button\n            type=\"button\"\n            onClick={() => setPreviewOpen((v) => !v)}\n            className=\"theme-preview-toggle\"\n            aria-expanded={previewOpen}\n            aria-controls={`${fieldId}-preview`}\n          >\n            {previewOpen ? (\n              <ChevronDown size={12} aria-hidden />\n            ) : (\n              <ChevronRight size={12} aria-hidden />\n            )}\n            {previewOpen ? t.ui.hidePreview : t.ui.showPreview}\n          </button>\n        )}\n      </div>\n\n      <div\n        className={`theme-preview-layout${\n          showPreviewPanel && previewOpen ? '' : ' theme-preview-layout--single'\n        }`}\n      >\n        <div className=\"theme-preset-column\">\n          {/* Palette generator lives in the same column as the preset picker:\n              editors either generate a palette from a brand colour / logo, or\n              pick a ready-made preset right below it. */}\n          <AppearanceLocks />\n          <AppearanceUndoBar sources={['theme', 'palette']} />\n          <PaletteGeneratorField />\n\n          {/* Collapsible preset picker — collapsed by default so the live preview\n              stays the focal point; the summary row keeps the active preset visible. */}\n          <button\n            type=\"button\"\n            className={`theme-preset-summary${presetsOpen ? ' is-open' : ''}`}\n            onClick={() => setPresetsOpen((v) => !v)}\n            aria-expanded={presetsOpen}\n            aria-controls={`${fieldId}-presets`}\n            aria-label={\n              activePreset ? `${t.ui.choosePreset}: ${activePreset.label}` : t.ui.choosePreset\n            }\n          >\n            {presetsOpen ? (\n              <ChevronDown size={14} aria-hidden />\n            ) : (\n              <ChevronRight size={14} aria-hidden />\n            )}\n            <span className=\"theme-preset-summary__info\">\n              <span className=\"theme-label\">{activePreset?.label ?? t.ui.choosePreset}</span>\n              <span className=\"theme-name\">\n                {`${presetCount} ${t.ui.presetCount}`}\n              </span>\n            </span>\n            <span className=\"theme-swatches\" aria-hidden=\"true\">\n              {summarySwatches.map((color, index) => (\n                <span\n                  key={`summary-swatch-${color}-${index}`}\n                  className=\"color-swatch\"\n                  style={{ backgroundColor: color }}\n                />\n              ))}\n            </span>\n          </button>\n\n          {presetsOpen && (\n            <div\n              className=\"theme-preset-list\"\n              id={`${fieldId}-presets`}\n              role=\"group\"\n              aria-labelledby={`${fieldId}-label`}\n            >\n              {Object.entries(runtimeThemePresets).map(([key, preset]) => {\n                const isSelected = key === selectedTheme\n                const swatches = highlightSwatches\n                  .map(({ key: colorKey }) => preset.lightMode[colorKey] as string | undefined)\n                  .filter((v): v is string => typeof v === 'string' && v.trim().length > 0)\n\n                return (\n                  <button\n                    key={key}\n                    type=\"button\"\n                    aria-pressed={isSelected}\n                    onClick={() => handleThemeSelect(key)}\n                    className={`theme-preset-button ${isSelected ? 'selected' : ''}`}\n                  >\n                    <div className=\"theme-info\">\n                      <span className=\"theme-label\">{preset.label}</span>\n                    </div>\n                    <div className=\"theme-swatches\" aria-hidden=\"true\">\n                      {swatches.map((color, index) => (\n                        <span\n                          key={`${key}-swatch-${color}-${index}`}\n                          className=\"color-swatch\"\n                          style={{ backgroundColor: color }}\n                        />\n                      ))}\n                    </div>\n                  </button>\n                )\n              })}\n            </div>\n          )}\n\n          {fieldDescription && (\n            <div\n              style={{\n                fontSize: '12px',\n                color: 'var(--theme-elevation-600)',\n                lineHeight: 1.5,\n              }}\n            >\n              {fieldDescription}\n            </div>\n          )}\n        </div>\n\n        {showPreviewPanel && previewOpen && (\n          <div className=\"theme-preview-panel\" id={`${fieldId}-preview`}>\n            <div\n              style={{\n                width: '100%',\n                borderRadius: '16px',\n                border: '1px solid var(--theme-elevation-200)',\n                backgroundColor: 'var(--theme-elevation-25)',\n                padding: '20px',\n                display: 'grid',\n                gap: '18px',\n                maxHeight: 'calc(100vh - 140px)',\n                overflowY: 'auto',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  fontWeight: 600,\n                  fontSize: '13px',\n                  color: 'var(--theme-elevation-800)',\n                }}\n              >\n                {/* Role label — this panel is dedicated to COLOURS + TYPOGRAPHY.\n                    Effects & component structure live in the separate\n                    \"Effects & components\" preview (AppearancePreviewField). */}\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>\n                  <Palette size={14} aria-hidden />\n                  {t.ui.colorsAndTypography}\n                </span>\n                <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\n                  {activePreset ? activePreset.label : t.preview.customPalette}\n                </span>\n              </div>\n\n              <div\n                style={{\n                  display: 'grid',\n                  gap: '16px',\n                }}\n              >\n                <ModePreview\n                  icon={Sun}\n                  title={t.ui.lightMode}\n                  colors={lightModeColors}\n                  typography={previewTypography}\n                  radius={previewRadius}\n                />\n                <ModePreview\n                  icon={Moon}\n                  title={t.ui.darkMode}\n                  colors={darkModeColors}\n                  typography={previewTypography}\n                  radius={previewRadius}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useForm","useFormFields","_PayloadUI","ChevronDown","ChevronRight","Moon","Palette","Sun","useCallback","useEffect","useId","useMemo","useRef","useState","resolveTypographyPreview","allThemePresets","useThemeLanguage","useThemeTranslations","PaletteGeneratorField","borderRadiusPresets","darkModeDefaults","lightModeDefaults","parseThemePresetInput","resolveLocalizedText","AppearanceLocks","AppearanceUndoBar","createBulkWriter","getAppearanceSession","_useLivePreviewContext","useLivePreviewContext","useLivePreviewContextFallback","colorKeys","Object","keys","ModePreview","icon","Icon","title","colors","typography","radius","t","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","ref","el","setAttribute","style","display","gap","padding","borderRadius","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","size","aria-hidden","toUpperCase","flexWrap","button","type","pill","cursor","ui","primaryAction","chip","secondaryAction","gridTemplateColumns","mutedSample","accentSample","headingSample","p","margin","bodySample","bodyFontLabel","bodyLabel","headingFontLabel","headingLabel","baseSizeLabel","lineHeightLabel","ThemePreviewField","props","field","path","configuredShowPreview","admin","custom","useThemePreviewField","isLivePreviewing","showPreviewPanel","configuredThemePresets","themePresets","customPresetsPath","split","slice","join","customPresetsValue","formState","value","baseThemePresets","length","byName","Map","map","preset","name","forEach","set","values","runtimeThemePresets","reduce","acc","label","lightMode","darkMode","visualEffects","fallbackTheme","selectedTheme","setValue","dispatchFields","formFields","hasAppliedInitialPresetRef","previewOpen","setPreviewOpen","presetsOpen","setPresetsOpen","setModified","applyPreset","presetName","writer","locks","key","lightValue","darkValue","write","fonts","typographyValue","current","pin","family","vfKeys","undefined","handleThemeSelect","commit","hasExistingValues","some","lightField","darkField","trim","lightModeColors","presetLightMode","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","fieldId","replace","highlightSwatches","presetCount","summarySwatches","filter","v","adminLanguage","resolveLocalized","fallback","fieldLabel","fieldDescription","description","marginBottom","id","onClick","className","aria-expanded","aria-controls","hidePreview","showPreview","sources","aria-label","choosePreset","index","role","aria-labelledby","entries","isSelected","swatches","colorKey","aria-pressed","width","maxHeight","overflowY","colorsAndTypography","preview","customPalette"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\n\nimport './ThemePreviewField.css'\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport { ChevronDown, ChevronRight, Moon, Palette, Sun, type LucideIcon } from 'lucide-react'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type {\n  ResolvedTypographyPreview,\n  TypographySelection,\n} from '../components/typographyPreviewUtils.js'\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\nimport { allThemePresets } from '../index.js'\nimport type { ThemePreset, ThemeTypographyPreset } from '../presets.js'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport PaletteGeneratorField from './PaletteGeneratorField.js'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.js'\nimport { parseThemePresetInput } from '../utils/customThemePresets.js'\nimport { resolveLocalizedText } from '../utils/localizedText.js'\nimport { AppearanceLocks, AppearanceUndoBar } from '../components/AppearanceSessionControls.js'\nimport { createBulkWriter, getAppearanceSession } from '../hooks/useAppearanceSession.js'\nimport { useNativeLivePreview } from '../hooks/useNativeLivePreview.js'\n\ninterface ColorModeColors {\n  background?: string\n  foreground?: string\n  card?: string\n  cardForeground?: string\n  popover?: string\n  popoverForeground?: string\n  primary?: string\n  primaryForeground?: string\n  secondary?: string\n  secondaryForeground?: string\n  muted?: string\n  mutedForeground?: string\n  accent?: string\n  accentForeground?: string\n  destructive?: string\n  destructiveForeground?: string\n  border?: string\n  input?: string\n  ring?: string\n}\n\ninterface ThemePresetDefinition {\n  label: string\n  lightMode: ColorModeColors\n  darkMode: ColorModeColors\n  typography?: ThemeTypographyPreset\n  borderRadius: 'none' | 'small' | 'medium' | 'large' | 'xl'\n  visualEffects?: ThemePreset['visualEffects']\n}\n\n// FALLBACK_THEME and runtime theme presets are computed inside the component\n\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\n\n// translations and swatches will be computed inside the component to respect admin language at runtime\n\ninterface ModePreviewProps {\n  icon: LucideIcon\n  title: string\n  colors: ColorModeColors\n  typography: ResolvedTypographyPreview\n  radius: {\n    card: string\n    chip: string\n    pill: string\n  }\n}\n\nfunction ModePreview({ icon: Icon, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\n  const t = useThemeTranslations()\n  const background = colors.background ?? '#ffffff'\n  const foreground = colors.foreground ?? '#0a0a0a'\n  const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)'\n  const cardBackground = colors.card ?? background\n  const cardForeground = colors.cardForeground ?? foreground\n  const primary = colors.primary ?? foreground\n  const primaryForeground = colors.primaryForeground ?? background\n  const secondary = colors.secondary ?? '#f4f4f5'\n  const secondaryForeground = colors.secondaryForeground ?? foreground\n  const muted = colors.muted ?? secondary\n  const mutedForeground = colors.mutedForeground ?? secondaryForeground\n  const accent = colors.accent ?? secondary\n  const accentForeground = colors.accentForeground ?? secondaryForeground\n  const headingFont = typography.headingFont\n  const bodyFont = typography.bodyFont\n  const baseFontSize = typography.baseFontSize\n  const lineHeight = typography.lineHeight\n\n  return (\n    <div\n      // A picture of the site: its sample buttons must not become dead tab stops.\n      ref={(el) => el?.setAttribute('inert', '')}\n      style={{\n        display: 'grid',\n        gap: '16px',\n        padding: '18px',\n        borderRadius: '12px',\n        backgroundColor: background,\n        color: foreground,\n        border: `1px solid ${borderColor}`,\n        boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',\n        fontFamily: bodyFont,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.08em',\n          textTransform: 'uppercase',\n          opacity: 0.7,\n        }}\n      >\n        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>\n          <Icon size={13} aria-hidden />\n          {title}\n        </span>\n        <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>\n          {background.toUpperCase()}\n        </span>\n      </div>\n\n      <div\n        style={{\n          backgroundColor: cardBackground,\n          color: cardForeground,\n          borderRadius: radius.card,\n          border: `1px solid ${borderColor}`,\n          padding: '16px',\n          display: 'flex',\n          gap: '12px',\n          flexWrap: 'wrap',\n        }}\n      >\n        <button\n          type=\"button\"\n          style={{\n            padding: '10px 18px',\n            borderRadius: radius.pill,\n            border: 'none',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: 600,\n            letterSpacing: '0.02em',\n            backgroundColor: primary,\n            color: primaryForeground,\n            boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',\n          }}\n        >\n          {t.ui.primaryAction}\n        </button>\n        <button\n          type=\"button\"\n          style={{\n            padding: '10px 18px',\n            borderRadius: radius.chip,\n            border: '1px solid transparent',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: 600,\n            letterSpacing: '0.02em',\n            backgroundColor: secondary,\n            color: secondaryForeground,\n            boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',\n          }}\n        >\n          {t.ui.secondaryAction}\n        </button>\n      </div>\n\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\n          gap: '10px',\n        }}\n      >\n        <div\n          style={{\n            borderRadius: radius.chip,\n            padding: '10px 12px',\n            fontSize: '12px',\n            fontWeight: 500,\n            backgroundColor: muted,\n            color: mutedForeground,\n          }}\n        >\n          {t.ui.mutedSample}\n        </div>\n        <div\n          style={{\n            borderRadius: radius.chip,\n            padding: '10px 12px',\n            fontSize: '12px',\n            fontWeight: 500,\n            backgroundColor: accent,\n            color: accentForeground,\n          }}\n        >\n          {t.ui.accentSample}\n        </div>\n      </div>\n\n      <div\n        style={{\n          display: 'grid',\n          gap: '8px',\n          borderRadius: '10px',\n          border: `1px dashed ${borderColor}`,\n          padding: '14px',\n          backgroundColor: 'rgba(148, 163, 184, 0.08)',\n        }}\n      >\n        <div\n          style={{\n            fontFamily: headingFont,\n            fontSize: 'clamp(24px, 3vw, 32px)',\n            fontWeight: 600,\n            lineHeight: 1.2,\n          }}\n        >\n          {t.ui.headingSample}\n        </div>\n        <p\n          style={{\n            margin: 0,\n            fontFamily: bodyFont,\n            fontSize: baseFontSize,\n            lineHeight,\n            color: foreground,\n            opacity: 0.85,\n          }}\n        >\n          {t.ui.bodySample}\n        </p>\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '10px',\n            fontSize: '12px',\n            // Follow the previewed palette so the meta line stays readable in dark mode.\n            color: mutedForeground,\n          }}\n        >\n          <span>\n            {t.ui.bodyFontLabel}: {typography.bodyLabel}\n          </span>\n          <span>\n            {t.ui.headingFontLabel}: {typography.headingLabel}\n          </span>\n          <span>\n            {t.ui.baseSizeLabel}: {baseFontSize}\n          </span>\n          <span>\n            {t.ui.lineHeightLabel}: {lineHeight}\n          </span>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\n  const { field, path } = props\n  // useThemePreviewField: explicit opt-out via admin.custom.useThemePreviewField = false\n  // Plugin always passes true; advanced users can override to permanently hide the panel.\n  const configuredShowPreview =\n    (field?.admin?.custom as unknown as { useThemePreviewField?: boolean })?.useThemePreviewField ??\n    true\n  // isLivePreviewing: true only when the user actively clicked Preview and the iframe/popup is open.\n  // While editing (before clicking Preview), the panel is always shown regardless of livePreview config.\n  // Default context value is false, so the panel shows by default even without LivePreview provider.\n  const { isOpen: isLivePreviewing } = useNativeLivePreview()\n  const showPreviewPanel = configuredShowPreview && !isLivePreviewing\n  // If the plugin provided theme presets via admin config, prefer those;\n  // support both `field.admin.themePresets` (legacy) and `field.admin.custom.themePresets`\n  // otherwise fallback to `allThemePresets`.\n  // Prefer presets passed via `admin.custom.themePresets` (set by the field factory / plugin).\n  // Fall back to legacy `admin.themePresets` for backwards compatibility, then to `allThemePresets`.\n  const configuredThemePresets =\n    (field?.admin?.custom as unknown as { themePresets?: ThemePreset[] })?.themePresets ??\n    (field?.admin as unknown as { themePresets?: ThemePreset[] })?.themePresets ??\n    allThemePresets\n  // Presets imported through the \"Custom Theme Presets\" JSON field live next to\n  // this field. Merge them in (overriding built-ins by name) so they show up in\n  // the picker as soon as they are imported.\n  const customPresetsPath = [...path.split('.').slice(0, -1), 'customThemePresets'].join('.')\n  const customPresetsValue = useFormFields(\n    ([formState]: any) => formState?.[customPresetsPath]?.value as unknown,\n  )\n  const baseThemePresets = useMemo(() => {\n    const custom = parseThemePresetInput(customPresetsValue)\n    if (custom.length === 0) return configuredThemePresets\n    const byName = new Map(configuredThemePresets.map((preset) => [preset.name, preset]))\n    custom.forEach((preset) => byName.set(preset.name, preset))\n    return [...byName.values()]\n  }, [configuredThemePresets, customPresetsValue])\n  const runtimeThemePresets = useMemo(() => {\n    return (baseThemePresets as ThemePreset[]).reduce<Record<string, ThemePresetDefinition>>(\n      (acc, preset) => {\n        acc[preset.name] = {\n          label: preset.label,\n          lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },\n          darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },\n          typography: preset.typography,\n          borderRadius: preset.borderRadius,\n          visualEffects: preset.visualEffects,\n        }\n        return acc\n      },\n      {},\n    )\n  }, [baseThemePresets])\n  const fallbackTheme = baseThemePresets[0]?.name ?? 'cool'\n  const { value: selectedTheme, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const formFields = useFormFields(([formState]: any) => formState)\n  const hasAppliedInitialPresetRef = useRef(false)\n  const [previewOpen, setPreviewOpen] = useState(true)\n  // Preset list starts collapsed once a theme is already selected so the\n  // preview panel — not the long preset list — dominates the layout.\n  const [presetsOpen, setPresetsOpen] = useState(false)\n\n  const { setModified } = useForm()\n\n  /**\n   * Write a theme preset into the form, honouring the session locks:\n   * colours (Colours lock), visual effects (Style lock). Theme fonts apply\n   * implicitly through the \"Use theme preset\" font option, so with the Fonts lock\n   * on we pin the current preset font as a custom value before switching.\n   */\n  const applyPreset = useCallback(\n    (presetName: string, writer: ReturnType<typeof createBulkWriter>) => {\n      const preset = runtimeThemePresets[presetName]\n      if (!preset) {\n        return\n      }\n      const { locks } = getAppearanceSession()\n\n      if (!locks.colors) {\n        colorKeys.forEach((key) => {\n          const lightValue = preset.lightMode[key]\n          const darkValue = preset.darkMode[key]\n          if (lightValue) writer.write(`themeConfiguration.lightMode.${key}`, lightValue)\n          if (darkValue) writer.write(`themeConfiguration.darkMode.${key}`, darkValue)\n        })\n      }\n\n      if (locks.fonts && selectedTheme) {\n        const typographyValue = (key: string) =>\n          formFields?.[`themeConfiguration.typography.${key}`]?.value as string | undefined\n        const current = resolveTypographyPreview(\n          {\n            bodyFont: typographyValue('bodyFont'),\n            headingFont: typographyValue('headingFont'),\n          },\n          selectedTheme,\n        )\n        const pin = (key: 'bodyFont' | 'headingFont', family: string) => {\n          const value = typographyValue(key)\n          if (!value || value === 'preset') {\n            writer.write(`themeConfiguration.typography.${key}`, 'custom')\n            writer.write(`themeConfiguration.typography.${key}Custom`, family)\n          }\n        }\n        pin('bodyFont', current.bodyFont)\n        pin('headingFont', current.headingFont)\n      }\n\n      if (!locks.style && preset.visualEffects) {\n        const vfKeys = [\n          'effectStyle',\n          'shadowIntensity',\n          'backdropBlur',\n          'borderStyle',\n          'borderWidth',\n          'glassOpacity',\n        ] as const\n        vfKeys.forEach((key) => {\n          const value = preset.visualEffects?.[key]\n          if (value !== undefined) writer.write(`themeConfiguration.visualEffects.${key}`, value)\n        })\n      }\n    },\n    [runtimeThemePresets, formFields, selectedTheme],\n  )\n\n  const handleThemeSelect = useCallback(\n    (value: string) => {\n      if (!value) {\n        setValue(value)\n        return\n      }\n\n      hasAppliedInitialPresetRef.current = true\n      const writer = createBulkWriter(formFields, dispatchFields)\n      writer.write(path, value)\n      applyPreset(value, writer)\n      setModified(true)\n      writer.commit('theme', runtimeThemePresets[value]?.label ?? value)\n    },\n    [applyPreset, setValue, formFields, dispatchFields, path, setModified, runtimeThemePresets],\n  )\n\n  useEffect(() => {\n    if (!selectedTheme) {\n      return\n    }\n\n    if (runtimeThemePresets[selectedTheme]) {\n      return\n    }\n\n    hasAppliedInitialPresetRef.current = false\n    setValue(fallbackTheme)\n  }, [selectedTheme, setValue])\n\n  useEffect(() => {\n    if (hasAppliedInitialPresetRef.current) {\n      return\n    }\n\n    if (!selectedTheme) {\n      return\n    }\n\n    if (!formFields) {\n      return\n    }\n\n    const preset = runtimeThemePresets[selectedTheme]\n    if (!preset) {\n      hasAppliedInitialPresetRef.current = true\n      return\n    }\n\n    const hasExistingValues = colorKeys.some((key) => {\n      const lightField = formFields[`themeConfiguration.lightMode.${key}`]\n      const darkField = formFields[`themeConfiguration.darkMode.${key}`]\n\n      const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0\n      const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0\n\n      return lightValue || darkValue\n    })\n\n    if (hasExistingValues) {\n      hasAppliedInitialPresetRef.current = true\n      return\n    }\n\n    // First-time fill of empty colour fields: not an editor action, so no undo entry.\n    applyPreset(selectedTheme, createBulkWriter(formFields, dispatchFields))\n    hasAppliedInitialPresetRef.current = true\n  }, [selectedTheme, formFields, applyPreset])\n\n  const lightModeColors = useMemo(() => {\n    const presetLightMode = selectedTheme\n      ? runtimeThemePresets[selectedTheme]?.lightMode\n      : undefined\n\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\n      const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`]\n      const rawValue =\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n          ? fieldState.value\n          : undefined\n\n      acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key]\n      return acc\n    }, {} as ColorModeColors)\n  }, [formFields, selectedTheme])\n\n  const darkModeColors = useMemo(() => {\n    const presetDarkMode = selectedTheme ? runtimeThemePresets[selectedTheme]?.darkMode : undefined\n\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\n      const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`]\n      const rawValue =\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n          ? fieldState.value\n          : undefined\n\n      acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key]\n      return acc\n    }, {} as ColorModeColors)\n  }, [formFields, selectedTheme])\n\n  const activePreset = selectedTheme ? runtimeThemePresets[selectedTheme] : undefined\n  const formTypographySelection = useMemo<TypographySelection | null>(() => {\n    if (!formFields) {\n      return null\n    }\n\n    const getValue = (key: string) => formFields[`themeConfiguration.typography.${key}`]?.value\n\n    return {\n      bodyFont: (getValue('bodyFont') as string | undefined) ?? undefined,\n      headingFont: (getValue('headingFont') as string | undefined) ?? undefined,\n      bodyFontCustom: (getValue('bodyFontCustom') as string | undefined) ?? undefined,\n      headingFontCustom: (getValue('headingFontCustom') as string | undefined) ?? undefined,\n      baseFontSize: (getValue('baseFontSize') as string | undefined) ?? undefined,\n      lineHeight: (getValue('lineHeight') as string | undefined) ?? undefined,\n    }\n  }, [formFields])\n\n  const previewTypography = useMemo<ResolvedTypographyPreview>(() => {\n    return resolveTypographyPreview(formTypographySelection, selectedTheme)\n  }, [formTypographySelection, selectedTheme])\n\n  const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value\n  const presetRadius = activePreset?.borderRadius ?? 'medium'\n  const resolvedBorderRadius = (\n    typeof borderRadiusValue === 'string' && borderRadiusValue.length\n      ? borderRadiusValue\n      : presetRadius\n  ) as keyof typeof borderRadiusPresets\n  const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium\n  const borderRadiusCSS =\n    typeof borderRadiusPreset.css === 'string'\n      ? { '--radius-default': borderRadiusPreset.css }\n      : (borderRadiusPreset.css as Record<string, string>)\n  const previewRadius = {\n    card: borderRadiusCSS['--radius-large'] ?? '1rem',\n    chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',\n    pill: borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\n  }\n\n  // Translate labels at runtime based on the active Payload admin language\n  const t = useThemeTranslations()\n  const fieldId = `tm-theme-${useId().replace(/:/g, '')}`\n  // Explicitly type keys as `keyof ColorModeColors` to satisfy TypeScript when indexing `lightMode`/`darkMode`\n  const highlightSwatches: { key: keyof ColorModeColors; label: string }[] = [\n    { key: 'primary', label: t.colors.primary },\n    { key: 'secondary', label: t.colors.secondary },\n    { key: 'accent', label: t.colors.accent },\n    { key: 'background', label: t.colors.background },\n    { key: 'foreground', label: t.colors.foreground },\n  ]\n\n  const presetCount = Object.keys(runtimeThemePresets).length\n  const summarySwatches = highlightSwatches\n    .map(({ key }) => (activePreset ? activePreset.lightMode[key] : lightModeColors[key]))\n    .filter((v): v is string => typeof v === 'string' && v.trim().length > 0)\n\n  // Field labels/descriptions arrive as `{ en, cs, … }` objects. Resolve them\n  // against the active admin language (Payload i18n) instead of hard-coding `en`,\n  // otherwise the theme selection stays English in every locale.\n  const adminLanguage = useThemeLanguage()\n  const resolveLocalized = (\n    value: string | Record<string, string> | null | undefined,\n    fallback = '',\n  ): string => resolveLocalizedText(value, adminLanguage, fallback)\n\n  const fieldLabel = resolveLocalized(\n    field.label as string | Record<string, string> | undefined,\n    'Theme',\n  )\n  const fieldDescription = resolveLocalized(\n    field.admin?.description as string | Record<string, string> | undefined,\n  )\n\n  return (\n    <div style={{ marginBottom: '24px' }}>\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          marginBottom: '10px',\n        }}\n      >\n        <div\n          id={`${fieldId}-label`}\n          style={{\n            fontSize: '13px',\n            fontWeight: 600,\n            color: 'var(--theme-elevation-800)',\n          }}\n        >\n          {fieldLabel}\n        </div>\n        {showPreviewPanel && (\n          <button\n            type=\"button\"\n            onClick={() => setPreviewOpen((v) => !v)}\n            className=\"theme-preview-toggle\"\n            aria-expanded={previewOpen}\n            aria-controls={`${fieldId}-preview`}\n          >\n            {previewOpen ? (\n              <ChevronDown size={12} aria-hidden />\n            ) : (\n              <ChevronRight size={12} aria-hidden />\n            )}\n            {previewOpen ? t.ui.hidePreview : t.ui.showPreview}\n          </button>\n        )}\n      </div>\n\n      <div\n        className={`theme-preview-layout${\n          showPreviewPanel && previewOpen ? '' : ' theme-preview-layout--single'\n        }`}\n      >\n        <div className=\"theme-preset-column\">\n          {/* Palette generator lives in the same column as the preset picker:\n              editors either generate a palette from a brand colour / logo, or\n              pick a ready-made preset right below it. */}\n          <AppearanceLocks />\n          <AppearanceUndoBar sources={['theme', 'palette']} />\n          <PaletteGeneratorField />\n\n          {/* Collapsible preset picker — collapsed by default so the live preview\n              stays the focal point; the summary row keeps the active preset visible. */}\n          <button\n            type=\"button\"\n            className={`theme-preset-summary${presetsOpen ? ' is-open' : ''}`}\n            onClick={() => setPresetsOpen((v) => !v)}\n            aria-expanded={presetsOpen}\n            aria-controls={`${fieldId}-presets`}\n            aria-label={\n              activePreset ? `${t.ui.choosePreset}: ${activePreset.label}` : t.ui.choosePreset\n            }\n          >\n            {presetsOpen ? (\n              <ChevronDown size={14} aria-hidden />\n            ) : (\n              <ChevronRight size={14} aria-hidden />\n            )}\n            <span className=\"theme-preset-summary__info\">\n              <span className=\"theme-label\">{activePreset?.label ?? t.ui.choosePreset}</span>\n              <span className=\"theme-name\">\n                {`${presetCount} ${t.ui.presetCount}`}\n              </span>\n            </span>\n            <span className=\"theme-swatches\" aria-hidden=\"true\">\n              {summarySwatches.map((color, index) => (\n                <span\n                  key={`summary-swatch-${color}-${index}`}\n                  className=\"color-swatch\"\n                  style={{ backgroundColor: color }}\n                />\n              ))}\n            </span>\n          </button>\n\n          {presetsOpen && (\n            <div\n              className=\"theme-preset-list\"\n              id={`${fieldId}-presets`}\n              role=\"group\"\n              aria-labelledby={`${fieldId}-label`}\n            >\n              {Object.entries(runtimeThemePresets).map(([key, preset]) => {\n                const isSelected = key === selectedTheme\n                const swatches = highlightSwatches\n                  .map(({ key: colorKey }) => preset.lightMode[colorKey] as string | undefined)\n                  .filter((v): v is string => typeof v === 'string' && v.trim().length > 0)\n\n                return (\n                  <button\n                    key={key}\n                    type=\"button\"\n                    aria-pressed={isSelected}\n                    onClick={() => handleThemeSelect(key)}\n                    className={`theme-preset-button ${isSelected ? 'selected' : ''}`}\n                  >\n                    <div className=\"theme-info\">\n                      <span className=\"theme-label\">{preset.label}</span>\n                    </div>\n                    <div className=\"theme-swatches\" aria-hidden=\"true\">\n                      {swatches.map((color, index) => (\n                        <span\n                          key={`${key}-swatch-${color}-${index}`}\n                          className=\"color-swatch\"\n                          style={{ backgroundColor: color }}\n                        />\n                      ))}\n                    </div>\n                  </button>\n                )\n              })}\n            </div>\n          )}\n\n          {fieldDescription && (\n            <div\n              style={{\n                fontSize: '12px',\n                color: 'var(--theme-elevation-600)',\n                lineHeight: 1.5,\n              }}\n            >\n              {fieldDescription}\n            </div>\n          )}\n        </div>\n\n        {showPreviewPanel && previewOpen && (\n          <div className=\"theme-preview-panel\" id={`${fieldId}-preview`}>\n            <div\n              style={{\n                width: '100%',\n                borderRadius: '16px',\n                border: '1px solid var(--theme-elevation-200)',\n                backgroundColor: 'var(--theme-elevation-25)',\n                padding: '20px',\n                display: 'grid',\n                gap: '18px',\n                maxHeight: 'calc(100vh - 140px)',\n                overflowY: 'auto',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  fontWeight: 600,\n                  fontSize: '13px',\n                  color: 'var(--theme-elevation-800)',\n                }}\n              >\n                {/* Role label — this panel is dedicated to COLOURS + TYPOGRAPHY.\n                    Effects & component structure live in the separate\n                    \"Effects & components\" preview (AppearancePreviewField). */}\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>\n                  <Palette size={14} aria-hidden />\n                  {t.ui.colorsAndTypography}\n                </span>\n                <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\n                  {activePreset ? activePreset.label : t.preview.customPalette}\n                </span>\n              </div>\n\n              <div\n                style={{\n                  display: 'grid',\n                  gap: '16px',\n                }}\n              >\n                <ModePreview\n                  icon={Sun}\n                  title={t.ui.lightMode}\n                  colors={lightModeColors}\n                  typography={previewTypography}\n                  radius={previewRadius}\n                />\n                <ModePreview\n                  icon={Moon}\n                  title={t.ui.darkMode}\n                  colors={darkModeColors}\n                  typography={previewTypography}\n                  radius={previewRadius}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useForm","useFormFields","ChevronDown","ChevronRight","Moon","Palette","Sun","useCallback","useEffect","useId","useMemo","useRef","useState","resolveTypographyPreview","allThemePresets","useThemeLanguage","useThemeTranslations","PaletteGeneratorField","borderRadiusPresets","darkModeDefaults","lightModeDefaults","parseThemePresetInput","resolveLocalizedText","AppearanceLocks","AppearanceUndoBar","createBulkWriter","getAppearanceSession","useNativeLivePreview","colorKeys","Object","keys","ModePreview","icon","Icon","title","colors","typography","radius","t","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","ref","el","setAttribute","style","display","gap","padding","borderRadius","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","size","aria-hidden","toUpperCase","flexWrap","button","type","pill","cursor","ui","primaryAction","chip","secondaryAction","gridTemplateColumns","mutedSample","accentSample","headingSample","p","margin","bodySample","bodyFontLabel","bodyLabel","headingFontLabel","headingLabel","baseSizeLabel","lineHeightLabel","ThemePreviewField","props","field","path","configuredShowPreview","admin","custom","useThemePreviewField","isOpen","isLivePreviewing","showPreviewPanel","configuredThemePresets","themePresets","customPresetsPath","split","slice","join","customPresetsValue","formState","value","baseThemePresets","length","byName","Map","map","preset","name","forEach","set","values","runtimeThemePresets","reduce","acc","label","lightMode","darkMode","visualEffects","fallbackTheme","selectedTheme","setValue","dispatchFields","formFields","hasAppliedInitialPresetRef","previewOpen","setPreviewOpen","presetsOpen","setPresetsOpen","setModified","applyPreset","presetName","writer","locks","key","lightValue","darkValue","write","fonts","typographyValue","current","pin","family","vfKeys","undefined","handleThemeSelect","commit","hasExistingValues","some","lightField","darkField","trim","lightModeColors","presetLightMode","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","fieldId","replace","highlightSwatches","presetCount","summarySwatches","filter","v","adminLanguage","resolveLocalized","fallback","fieldLabel","fieldDescription","description","marginBottom","id","onClick","className","aria-expanded","aria-controls","hidePreview","showPreview","sources","aria-label","choosePreset","index","role","aria-labelledby","entries","isSelected","swatches","colorKey","aria-pressed","width","maxHeight","overflowY","colorsAndTypography","preview","customPalette"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,8BAA8B,CAAC,EAAE,KAAK,EAAE,CAAA;IACxC,gCAAgC,CAAC,EAAE,KAAK,CAAC;QACvC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACtC,MAAM,EAAE,KAAK,EAAE,CAAA;QACf,aAAa,CAAC,EAAE,OAAO,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAC9C,CAAC,CAAA;CACH;AASD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,QAAQ,CAu/B/F"}
+{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAS/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,8BAA8B,CAAC,EAAE,KAAK,EAAE,CAAA;IACxC,gCAAgC,CAAC,EAAE,KAAK,CAAC;QACvC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACtC,MAAM,EAAE,KAAK,EAAE,CAAA;QACf,aAAa,CAAC,EAAE,OAAO,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAC9C,CAAC,CAAA;CACH;AASD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,QAAQ,CAoiC/F"}