@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/fields/StylePresetField.js

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