@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/fields/StylePresetField.js

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

package/dist/fields/StylePresetField.js.map

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