@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

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 type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useRef } 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 { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\nimport { getTranslations } from '../translations.js'\nimport { getAdminLanguage } from '../utils/getAdminLanguage.js'\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.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}\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: string\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, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\n  const t = getTranslations(getAdminLanguage())\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      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>\n          {icon} {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          Muted Card\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          Accent Tag\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          Nadpis / Heading preview\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          Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy.\n        </p>\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '10px',\n            fontSize: '11px',\n            color: 'rgba(15, 23, 42, 0.7)',\n          }}\n        >\n          <span>Body: {typography.bodyLabel}</span>\n          <span>Heading: {typography.headingLabel}</span>\n          <span>Base size: {baseFontSize}</span>\n          <span>Line height: {lineHeight}</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\n  const { field, path } = props\n  const showPreviewPanel =\n    (field?.admin?.custom as unknown as { useThemePreviewField?: boolean })?.useThemePreviewField ??\n    true\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 baseThemePresets =\n    (field?.admin?.custom as unknown as { themePresets?: ThemePreset[] })?.themePresets ??\n    (field?.admin as unknown as { themePresets?: ThemePreset[] })?.themePresets ??\n    allThemePresets\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        }\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\n  const applyPreset = useCallback(\n    (presetName: string) => {\n      const preset = runtimeThemePresets[presetName]\n      if (!preset) {\n        return\n      }\n\n      colorKeys.forEach((key) => {\n        const lightValue = preset.lightMode[key]\n        const darkValue = preset.darkMode[key]\n\n        if (lightValue) {\n          dispatchFields({\n            type: 'UPDATE',\n            path: `themeConfiguration.lightMode.${key}`,\n            value: lightValue,\n          })\n        }\n\n        if (darkValue) {\n          dispatchFields({\n            type: 'UPDATE',\n            path: `themeConfiguration.darkMode.${key}`,\n            value: darkValue,\n          })\n        }\n      })\n    },\n    [dispatchFields],\n  )\n\n  const handleThemeSelect = useCallback(\n    (value: string) => {\n      setValue(value)\n\n      if (!value) {\n        return\n      }\n\n      hasAppliedInitialPresetRef.current = true\n      applyPreset(value)\n    },\n    [applyPreset, setValue],\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    applyPreset(selectedTheme)\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 admin language\n  const t = getTranslations(getAdminLanguage())\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 fieldLabel =\n    typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme'\n\n  return (\n    <div style={{ marginBottom: '24px' }}>\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '10px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {fieldLabel}\n      </label>\n\n      <div\n        style={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '24px',\n          alignItems: 'flex-start',\n        }}\n      >\n        <div\n          style={{\n            flex: '0 0 320px',\n            minWidth: '260px',\n            maxWidth: '420px',\n            display: 'grid',\n            gap: '12px',\n          }}\n        >\n          <div className=\"theme-preset-list\">\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                  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                    <span className=\"theme-name\">{key}</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          {activePreset && (\n            <div\n              style={{\n                padding: '12px',\n                borderRadius: '10px',\n                border: '1px solid var(--theme-elevation-200)',\n                backgroundColor: 'var(--theme-elevation-50)',\n                display: 'grid',\n                gap: '8px',\n                fontSize: '12px',\n                color: 'var(--theme-elevation-600)',\n              }}\n            >\n              <div style={{ fontWeight: 600, color: 'var(--theme-elevation-800)' }}>\n                {activePreset.label}\n              </div>\n              <div>Primary color: {activePreset.lightMode.primary}</div>\n              <div>Accent color: {activePreset.lightMode.accent}</div>\n              <div\n                style={{\n                  display: 'flex',\n                  flexWrap: 'wrap',\n                  gap: '12px',\n                  marginTop: '4px',\n                }}\n              >\n                {highlightSwatches.map(({ key, label }) => {\n                  const swatchValue = activePreset.lightMode[key]\n\n                  if (!swatchValue) {\n                    return null\n                  }\n\n                  return (\n                    <div\n                      key={key}\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: '6px',\n                        minWidth: 'fit-content',\n                      }}\n                    >\n                      <span\n                        style={{\n                          width: '22px',\n                          height: '22px',\n                          borderRadius: '999px',\n                          border: '1px solid rgba(15, 23, 42, 0.12)',\n                          backgroundColor: swatchValue,\n                          boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)',\n                        }}\n                        aria-hidden=\"true\"\n                      />\n                      <span style={{ fontSize: '11px', color: 'var(--theme-elevation-700)' }}>\n                        {label}\n                      </span>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )}\n\n          {field.admin?.description && (\n            <div\n              style={{\n                fontSize: '12px',\n                color: 'var(--theme-elevation-600)',\n                lineHeight: 1.5,\n              }}\n            >\n              {typeof field.admin.description === 'string'\n                ? field.admin.description\n                : field.admin.description?.en || field.admin.description?.cs || ''}\n            </div>\n          )}\n        </div>\n\n        {showPreviewPanel && (\n          <div\n            style={{\n              flex: '1 1 420px',\n              minWidth: '320px',\n              position: 'sticky',\n              top: '96px',\n              alignSelf: 'flex-start',\n            }}\n          >\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                {/* safe translations for preview header */}\n                <span>{getTranslations('en').livePreview.smallTitle}</span>\n                <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\n                  {activePreset ? activePreset.label : getTranslations('en').preview.customPalette}\n                </span>\n              </div>\n\n              <div\n                style={{\n                  display: 'grid',\n                  gap: '16px',\n                }}\n              >\n                <ModePreview\n                  icon=\"☀️\"\n                  title={getTranslations('en').ui.lightMode}\n                  colors={lightModeColors}\n                  typography={previewTypography}\n                  radius={previewRadius}\n                />\n                <ModePreview\n                  icon=\"🌙\"\n                  title={getTranslations('en').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","useCallback","useEffect","useMemo","useRef","resolveTypographyPreview","allThemePresets","borderRadiusPresets","getTranslations","getAdminLanguage","darkModeDefaults","lightModeDefaults","colorKeys","Object","keys","ModePreview","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","style","display","gap","padding","borderRadius","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","toUpperCase","flexWrap","button","type","pill","cursor","ui","primaryAction","chip","secondaryAction","gridTemplateColumns","p","margin","bodyLabel","headingLabel","ThemePreviewField","props","field","path","showPreviewPanel","admin","custom","useThemePreviewField","baseThemePresets","themePresets","runtimeThemePresets","reduce","acc","preset","name","label","lightMode","darkMode","fallbackTheme","value","selectedTheme","setValue","dispatchFields","formFields","formState","hasAppliedInitialPresetRef","applyPreset","presetName","forEach","key","lightValue","darkValue","handleThemeSelect","current","hasExistingValues","some","lightField","darkField","trim","length","lightModeColors","presetLightMode","undefined","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","highlightSwatches","fieldLabel","en","cs","marginBottom","flex","minWidth","maxWidth","className","entries","map","isSelected","swatches","colorKey","filter","v","onClick","aria-hidden","index","marginTop","swatchValue","width","height","description","position","top","alignSelf","maxHeight","overflowY","livePreview","smallTitle","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/ThemeTokenSelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAgGrD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,+BAsS1E"}
+{"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiGrD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,+BA4c1E"}