@kilivi/payloadcms-theme-management 0.1.6 → 0.1.8

package/dist/fields/ThemePreviewField.js

@@ -0,0 +1,558 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useForm, useFormFields } from '@payloadcms/ui';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
+import { resolveTypographyPreview } from '../components/typographyPreviewUtils.js';
+import { defaultThemePresets } from '../index.js';
+import { darkModeDefaults, lightModeDefaults } from './colorModeFields.js';
+const FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool';
+const themePresets = defaultThemePresets.reduce((acc, preset)=>{
+    acc[preset.name] = {
+        label: preset.label,
+        lightMode: {
+            ...lightModeDefaults,
+            ...preset.lightMode ?? {}
+        },
+        darkMode: {
+            ...darkModeDefaults,
+            ...preset.darkMode ?? {}
+        },
+        typography: preset.typography,
+        borderRadius: preset.borderRadius
+    };
+    return acc;
+}, {});
+const colorKeys = Object.keys(lightModeDefaults);
+function ModePreview({ icon, title, colors, typography, radius }) {
+    const background = colors.background ?? '#ffffff';
+    const foreground = colors.foreground ?? '#0a0a0a';
+    const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)';
+    const cardBackground = colors.card ?? background;
+    const cardForeground = colors.cardForeground ?? foreground;
+    const primary = colors.primary ?? foreground;
+    const primaryForeground = colors.primaryForeground ?? background;
+    const secondary = colors.secondary ?? '#f4f4f5';
+    const secondaryForeground = colors.secondaryForeground ?? foreground;
+    const muted = colors.muted ?? secondary;
+    const mutedForeground = colors.mutedForeground ?? secondaryForeground;
+    const accent = colors.accent ?? secondary;
+    const accentForeground = colors.accentForeground ?? secondaryForeground;
+    const headingFont = typography.headingFont;
+    const bodyFont = typography.bodyFont;
+    const baseFontSize = typography.baseFontSize;
+    const lineHeight = typography.lineHeight;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'grid',
+            gap: '16px',
+            padding: '18px',
+            borderRadius: '12px',
+            backgroundColor: background,
+            color: foreground,
+            border: `1px solid ${borderColor}`,
+            boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',
+            fontFamily: bodyFont
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    letterSpacing: '0.08em',
+                    textTransform: 'uppercase',
+                    opacity: 0.7
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            icon,
+                            " ",
+                            title
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontFamily: 'monospace',
+                            fontSize: '11px'
+                        },
+                        children: background.toUpperCase()
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    backgroundColor: cardBackground,
+                    color: cardForeground,
+                    borderRadius: radius.card,
+                    border: `1px solid ${borderColor}`,
+                    padding: '16px',
+                    display: 'flex',
+                    gap: '12px',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        style: {
+                            padding: '10px 18px',
+                            borderRadius: radius.pill,
+                            border: 'none',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            letterSpacing: '0.02em',
+                            backgroundColor: primary,
+                            color: primaryForeground,
+                            boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)'
+                        },
+                        children: "Primary Action"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        style: {
+                            padding: '10px 18px',
+                            borderRadius: radius.chip,
+                            border: '1px solid transparent',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            letterSpacing: '0.02em',
+                            backgroundColor: secondary,
+                            color: secondaryForeground,
+                            boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)'
+                        },
+                        children: "Secondary"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                    gap: '10px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            borderRadius: radius.chip,
+                            padding: '10px 12px',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            backgroundColor: muted,
+                            color: mutedForeground
+                        },
+                        children: "Muted Card"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            borderRadius: radius.chip,
+                            padding: '10px 12px',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            backgroundColor: accent,
+                            color: accentForeground
+                        },
+                        children: "Accent Tag"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'grid',
+                    gap: '8px',
+                    borderRadius: '10px',
+                    border: `1px dashed ${borderColor}`,
+                    padding: '14px',
+                    backgroundColor: 'rgba(148, 163, 184, 0.08)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            fontFamily: headingFont,
+                            fontSize: 'clamp(24px, 3vw, 32px)',
+                            fontWeight: 600,
+                            lineHeight: 1.2
+                        },
+                        children: "Nadpis / Heading preview"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontFamily: bodyFont,
+                            fontSize: baseFontSize,
+                            lineHeight,
+                            color: foreground,
+                            opacity: 0.85
+                        },
+                        children: "Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy."
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '10px',
+                            fontSize: '11px',
+                            color: 'rgba(15, 23, 42, 0.7)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    "Body: ",
+                                    typography.bodyLabel
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    "Heading: ",
+                                    typography.headingLabel
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    "Base size: ",
+                                    baseFontSize
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    "Line height: ",
+                                    lineHeight
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default function ThemePreviewField(props) {
+    const { field, path } = props;
+    const { value: selectedTheme, setValue } = useField({
+        path
+    });
+    const { dispatchFields } = useForm();
+    const formFields = useFormFields(([formState])=>formState);
+    const hasAppliedInitialPresetRef = useRef(false);
+    const applyPreset = useCallback((presetName)=>{
+        const preset = themePresets[presetName];
+        if (!preset) {
+            return;
+        }
+        colorKeys.forEach((key)=>{
+            const lightValue = preset.lightMode[key];
+            const darkValue = preset.darkMode[key];
+            if (lightValue) {
+                dispatchFields({
+                    type: 'UPDATE',
+                    path: `themeConfiguration.lightMode.${key}`,
+                    value: lightValue
+                });
+            }
+            if (darkValue) {
+                dispatchFields({
+                    type: 'UPDATE',
+                    path: `themeConfiguration.darkMode.${key}`,
+                    value: darkValue
+                });
+            }
+        });
+    }, [
+        dispatchFields
+    ]);
+    const handleThemeChange = useCallback((event)=>{
+        const value = event.target.value;
+        setValue(value);
+        if (!value) {
+            return;
+        }
+        hasAppliedInitialPresetRef.current = true;
+        applyPreset(value);
+    }, [
+        applyPreset,
+        setValue
+    ]);
+    useEffect(()=>{
+        if (!selectedTheme) {
+            return;
+        }
+        if (themePresets[selectedTheme]) {
+            return;
+        }
+        hasAppliedInitialPresetRef.current = false;
+        setValue(FALLBACK_THEME);
+    }, [
+        selectedTheme,
+        setValue
+    ]);
+    useEffect(()=>{
+        if (hasAppliedInitialPresetRef.current) {
+            return;
+        }
+        if (!selectedTheme) {
+            return;
+        }
+        if (!formFields) {
+            return;
+        }
+        const preset = themePresets[selectedTheme];
+        if (!preset) {
+            hasAppliedInitialPresetRef.current = true;
+            return;
+        }
+        const hasExistingValues = colorKeys.some((key)=>{
+            const lightField = formFields[`themeConfiguration.lightMode.${key}`];
+            const darkField = formFields[`themeConfiguration.darkMode.${key}`];
+            const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0;
+            const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0;
+            return lightValue || darkValue;
+        });
+        if (hasExistingValues) {
+            hasAppliedInitialPresetRef.current = true;
+            return;
+        }
+        applyPreset(selectedTheme);
+        hasAppliedInitialPresetRef.current = true;
+    }, [
+        selectedTheme,
+        formFields,
+        applyPreset
+    ]);
+    const lightModeColors = useMemo(()=>{
+        const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined;
+        return colorKeys.reduce((acc, key)=>{
+            const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`];
+            const rawValue = typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0 ? fieldState.value : undefined;
+            acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key];
+            return acc;
+        }, {});
+    }, [
+        formFields,
+        selectedTheme
+    ]);
+    const darkModeColors = useMemo(()=>{
+        const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined;
+        return colorKeys.reduce((acc, key)=>{
+            const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`];
+            const rawValue = typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0 ? fieldState.value : undefined;
+            acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key];
+            return acc;
+        }, {});
+    }, [
+        formFields,
+        selectedTheme
+    ]);
+    const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined;
+    const formTypographySelection = useMemo(()=>{
+        if (!formFields) {
+            return null;
+        }
+        const getValue = (key)=>formFields[`themeConfiguration.typography.${key}`]?.value;
+        return {
+            bodyFont: getValue('bodyFont') ?? undefined,
+            headingFont: getValue('headingFont') ?? undefined,
+            bodyFontCustom: getValue('bodyFontCustom') ?? undefined,
+            headingFontCustom: getValue('headingFontCustom') ?? undefined,
+            baseFontSize: getValue('baseFontSize') ?? undefined,
+            lineHeight: getValue('lineHeight') ?? undefined
+        };
+    }, [
+        formFields
+    ]);
+    const previewTypography = useMemo(()=>{
+        return resolveTypographyPreview(formTypographySelection, selectedTheme);
+    }, [
+        formTypographySelection,
+        selectedTheme
+    ]);
+    const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value;
+    const presetRadius = activePreset?.borderRadius ?? 'medium';
+    const resolvedBorderRadius = typeof borderRadiusValue === 'string' && borderRadiusValue.length ? borderRadiusValue : presetRadius;
+    const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium;
+    const borderRadiusCSS = typeof borderRadiusPreset.css === 'string' ? {
+        '--radius-default': borderRadiusPreset.css
+    } : borderRadiusPreset.css;
+    const previewRadius = {
+        card: borderRadiusCSS['--radius-large'] ?? '1rem',
+        chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',
+        pill: borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px'
+    };
+    const fieldLabel = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme';
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            marginBottom: '24px'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                style: {
+                    display: 'block',
+                    marginBottom: '10px',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-800)'
+                },
+                children: fieldLabel
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '24px',
+                    alignItems: 'flex-start'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            flex: '0 0 320px',
+                            minWidth: '260px',
+                            maxWidth: '420px',
+                            display: 'grid',
+                            gap: '12px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("select", {
+                                value: selectedTheme || '',
+                                onChange: handleThemeChange,
+                                style: {
+                                    width: '100%',
+                                    padding: '12px 14px',
+                                    fontSize: '14px',
+                                    borderRadius: '8px',
+                                    border: '1px solid var(--theme-elevation-250)',
+                                    backgroundColor: 'var(--theme-input-bg)',
+                                    color: 'var(--theme-elevation-800)',
+                                    cursor: 'pointer'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "",
+                                        children: "Select a theme…"
+                                    }),
+                                    Object.entries(themePresets).map(([key, preset])=>/*#__PURE__*/ _jsx("option", {
+                                            value: key,
+                                            children: preset.label
+                                        }, key))
+                                ]
+                            }),
+                            activePreset && /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '12px',
+                                    borderRadius: '10px',
+                                    border: '1px solid var(--theme-elevation-200)',
+                                    backgroundColor: 'var(--theme-elevation-50)',
+                                    display: 'grid',
+                                    gap: '6px',
+                                    fontSize: '12px',
+                                    color: 'var(--theme-elevation-600)'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            fontWeight: 600,
+                                            color: 'var(--theme-elevation-800)'
+                                        },
+                                        children: activePreset.label
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            "Primary color: ",
+                                            activePreset.lightMode.primary
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            "Accent color: ",
+                                            activePreset.lightMode.accent
+                                        ]
+                                    })
+                                ]
+                            }),
+                            field.admin?.description && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '12px',
+                                    color: 'var(--theme-elevation-600)',
+                                    lineHeight: 1.5
+                                },
+                                children: typeof field.admin.description === 'string' ? field.admin.description : field.admin.description?.en || field.admin.description?.cs || ''
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            flex: '1 1 420px',
+                            minWidth: '320px',
+                            position: 'sticky',
+                            top: '96px',
+                            alignSelf: 'flex-start'
+                        },
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                width: '100%',
+                                borderRadius: '16px',
+                                border: '1px solid var(--theme-elevation-200)',
+                                backgroundColor: 'var(--theme-elevation-25)',
+                                padding: '20px',
+                                display: 'grid',
+                                gap: '18px',
+                                maxHeight: 'calc(100vh - 140px)',
+                                overflowY: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        fontWeight: 600,
+                                        fontSize: '13px',
+                                        color: 'var(--theme-elevation-800)'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "🎨 Live Preview"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                fontSize: '12px',
+                                                color: 'var(--theme-elevation-600)'
+                                            },
+                                            children: activePreset ? activePreset.label : 'Custom palette'
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        display: 'grid',
+                                        gap: '16px'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ModePreview, {
+                                            icon: "☀️",
+                                            title: "Light Mode",
+                                            colors: lightModeColors,
+                                            typography: previewTypography,
+                                            radius: previewRadius
+                                        }),
+                                        /*#__PURE__*/ _jsx(ModePreview, {
+                                            icon: "🌙",
+                                            title: "Dark Mode",
+                                            colors: darkModeColors,
+                                            typography: previewTypography,
+                                            radius: previewRadius
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ThemePreviewField.js.map

package/dist/fields/ThemePreviewField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useRef, type ChangeEvent } from 'react'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\nimport type {\n  ResolvedTypographyPreview,\n  TypographySelection,\n} from '../components/typographyPreviewUtils.js'\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\nimport { defaultThemePresets } from '../index.js'\nimport type { ThemeTypographyPreset } from '../presets.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\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\n\nconst themePresets = defaultThemePresets.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\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\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 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          Primary Action\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          Secondary\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 { value: selectedTheme, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const formFields = useFormFields(([formState]) => formState)\n  const hasAppliedInitialPresetRef = useRef(false)\n\n  const applyPreset = useCallback(\n    (presetName: string) => {\n      const preset = themePresets[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 handleThemeChange = useCallback(\n    (event: ChangeEvent<HTMLSelectElement>) => {\n      const value = event.target.value\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 (themePresets[selectedTheme]) {\n      return\n    }\n\n    hasAppliedInitialPresetRef.current = false\n    setValue(FALLBACK_THEME)\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 = themePresets[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 ? themePresets[selectedTheme]?.lightMode : 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 ? themePresets[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 ? themePresets[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:\n      borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\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          <select\n            value={selectedTheme || ''}\n            onChange={handleThemeChange}\n            style={{\n              width: '100%',\n              padding: '12px 14px',\n              fontSize: '14px',\n              borderRadius: '8px',\n              border: '1px solid var(--theme-elevation-250)',\n              backgroundColor: 'var(--theme-input-bg)',\n              color: 'var(--theme-elevation-800)',\n              cursor: 'pointer',\n            }}\n          >\n            <option value=\"\">Select a theme…</option>\n            {Object.entries(themePresets).map(([key, preset]) => (\n              <option key={key} value={key}>\n                {preset.label}\n              </option>\n            ))}\n          </select>\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: '6px',\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          )}\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        <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              <span>🎨 Live Preview</span>\n              <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\n                {activePreset ? activePreset.label : 'Custom palette'}\n              </span>\n            </div>\n\n            <div\n              style={{\n                display: 'grid',\n                gap: '16px',\n              }}\n            >\n              <ModePreview\n                icon=\"☀️\"\n                title=\"Light Mode\"\n                colors={lightModeColors}\n                typography={previewTypography}\n                radius={previewRadius}\n              />\n              <ModePreview\n                icon=\"🌙\"\n                title=\"Dark Mode\"\n                colors={darkModeColors}\n                typography={previewTypography}\n                radius={previewRadius}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useForm","useFormFields","useCallback","useEffect","useMemo","useRef","borderRadiusPresets","resolveTypographyPreview","defaultThemePresets","darkModeDefaults","lightModeDefaults","FALLBACK_THEME","name","themePresets","reduce","acc","preset","label","lightMode","darkMode","typography","borderRadius","colorKeys","Object","keys","ModePreview","icon","title","colors","radius","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","style","display","gap","padding","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","toUpperCase","flexWrap","button","type","pill","cursor","chip","gridTemplateColumns","p","margin","bodyLabel","headingLabel","ThemePreviewField","props","field","path","value","selectedTheme","setValue","dispatchFields","formFields","formState","hasAppliedInitialPresetRef","applyPreset","presetName","forEach","key","lightValue","darkValue","handleThemeChange","event","target","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","fieldLabel","en","cs","marginBottom","flex","minWidth","maxWidth","select","onChange","width","option","entries","map","admin","description","position","top","alignSelf","maxHeight","overflowY"],"mappings":"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"}