@kilivi/payloadcms-theme-management 0.3.1 → 0.3.2

package/dist/fields/ThemeLivePreview.js

@@ -1,195 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Theme Live Preview Component
- * Real-time preview of theme configuration
- * Inspired by Payload CMS 3 Live Preview
- */ import { useFormFields } from '@payloadcms/ui';
-import { useState } from 'react';
-// Import CSS only in browser environment
-// This prevents Node.js from trying to import CSS directly
-// which causes ERR_UNKNOWN_FILE_EXTENSION error
-if (typeof window !== 'undefined') {
-    // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript
-    import('./ThemeLivePreview.css').catch((err)=>{
-        console.warn('Failed to load CSS file:', err);
-    });
-}
-export const ThemeLivePreview = ()=>{
-    const allFields = useFormFields(([fields])=>fields);
-    const [previewMode, setPreviewMode] = useState('light');
-    const themeConfig = allFields?.themeConfiguration?.value;
-    // Extract colors from theme configuration
-    // Support both basic (lightMode/darkMode) and extended (extendedLightMode/extendedDarkMode)
-    const lightMode = themeConfig?.extendedLightMode || themeConfig?.lightMode;
-    const darkMode = themeConfig?.extendedDarkMode || themeConfig?.darkMode;
-    const activeMode = previewMode === 'light' ? lightMode : darkMode;
-    if (!themeConfig) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: "theme-live-preview-empty",
-            children: /*#__PURE__*/ _jsx("p", {
-                children: "Configure your theme to see live preview"
-            })
-        });
-    }
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "theme-live-preview-container",
-        "data-mode": previewMode,
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "preview-header",
-                children: [
-                    /*#__PURE__*/ _jsx("h3", {
-                        children: "Live Theme Preview"
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "mode-toggle",
-                        children: [
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                className: previewMode === 'light' ? 'active' : '',
-                                onClick: ()=>setPreviewMode('light'),
-                                children: "☀️ Light"
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                className: previewMode === 'dark' ? 'active' : '',
-                                onClick: ()=>setPreviewMode('dark'),
-                                children: "🌙 Dark"
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "preview-content",
-                style: {
-                    backgroundColor: activeMode?.background || '#ffffff',
-                    color: activeMode?.foreground || '#000000'
-                },
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "preview-section",
-                        children: [
-                            /*#__PURE__*/ _jsx("h1", {
-                                style: {
-                                    color: activeMode?.foreground
-                                },
-                                children: "Welcome to Your Site"
-                            }),
-                            /*#__PURE__*/ _jsx("p", {
-                                style: {
-                                    color: activeMode?.mutedForeground
-                                },
-                                children: "This is a live preview of your theme configuration"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "preview-cards",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "preview-card",
-                                style: {
-                                    backgroundColor: activeMode?.card || '#ffffff',
-                                    color: activeMode?.cardForeground || '#000000',
-                                    borderColor: activeMode?.border || '#e2e8f0'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx("h3", {
-                                        children: "Featured Content"
-                                    }),
-                                    /*#__PURE__*/ _jsx("p", {
-                                        style: {
-                                            color: activeMode?.mutedForeground
-                                        },
-                                        children: "Card component with theme colors"
-                                    }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        className: "preview-btn-primary",
-                                        style: {
-                                            backgroundColor: activeMode?.primary || '#0070f3',
-                                            color: activeMode?.primaryForeground || '#ffffff'
-                                        },
-                                        children: "Primary Action"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "preview-card",
-                                style: {
-                                    backgroundColor: activeMode?.card || '#ffffff',
-                                    color: activeMode?.cardForeground || '#000000',
-                                    borderColor: activeMode?.border || '#e2e8f0'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx("h3", {
-                                        children: "Secondary Card"
-                                    }),
-                                    /*#__PURE__*/ _jsx("p", {
-                                        style: {
-                                            color: activeMode?.mutedForeground
-                                        },
-                                        children: "Another card to showcase your theme"
-                                    }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        className: "preview-btn-secondary",
-                                        style: {
-                                            backgroundColor: activeMode?.secondary || '#f1f5f9',
-                                            color: activeMode?.secondaryForeground || '#0f172a'
-                                        },
-                                        children: "Secondary"
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "preview-ui-elements",
-                        children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                type: "text",
-                                placeholder: "Input field",
-                                className: "preview-input",
-                                style: {
-                                    backgroundColor: activeMode?.background,
-                                    color: activeMode?.foreground,
-                                    borderColor: activeMode?.input || activeMode?.border
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: "preview-badge",
-                                style: {
-                                    backgroundColor: activeMode?.accent || '#f1f5f9',
-                                    color: activeMode?.accentForeground || '#0f172a'
-                                },
-                                children: "Accent Badge"
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                className: "preview-btn-destructive",
-                                style: {
-                                    backgroundColor: activeMode?.destructive || '#ef4444',
-                                    color: activeMode?.destructiveForeground || '#ffffff'
-                                },
-                                children: "Destructive"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "preview-muted",
-                        style: {
-                            backgroundColor: activeMode?.muted || '#f1f5f9',
-                            color: activeMode?.mutedForeground || '#64748b'
-                        },
-                        children: /*#__PURE__*/ _jsx("p", {
-                            children: "Muted background section for less prominent content"
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-};
-export default ThemeLivePreview;
-
-//# sourceMappingURL=ThemeLivePreview.js.map

package/dist/fields/ThemeLivePreview.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/ThemeLivePreview.tsx"],"sourcesContent":["'use client'\n\n/**\n * Theme Live Preview Component\n * Real-time preview of theme configuration\n * Inspired by Payload CMS 3 Live Preview\n */\nimport { useFormFields } from '@payloadcms/ui'\nimport { useState } from 'react'\n\n// Import CSS only in browser environment\n// This prevents Node.js from trying to import CSS directly\n// which causes ERR_UNKNOWN_FILE_EXTENSION error\nif (typeof window !== 'undefined') {\n  // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript\n  import('./ThemeLivePreview.css').catch((err) => {\n    console.warn('Failed to load CSS file:', err)\n  })\n}\n\nexport const ThemeLivePreview = () => {\n  const allFields = useFormFields(([fields]) => fields)\n  const [previewMode, setPreviewMode] = useState<'light' | 'dark'>('light')\n\n  const themeConfig = allFields?.themeConfiguration?.value as Record<string, unknown> | undefined\n\n  // Extract colors from theme configuration\n  // Support both basic (lightMode/darkMode) and extended (extendedLightMode/extendedDarkMode)\n  const lightMode = (themeConfig?.extendedLightMode || themeConfig?.lightMode) as\n    | Record<string, string>\n    | undefined\n  const darkMode = (themeConfig?.extendedDarkMode || themeConfig?.darkMode) as\n    | Record<string, string>\n    | undefined\n  const activeMode = previewMode === 'light' ? lightMode : darkMode\n\n  if (!themeConfig) {\n    return (\n      <div className=\"theme-live-preview-empty\">\n        <p>Configure your theme to see live preview</p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"theme-live-preview-container\" data-mode={previewMode}>\n      {/* Mode Toggle */}\n      <div className=\"preview-header\">\n        <h3>Live Theme Preview</h3>\n        <div className=\"mode-toggle\">\n          <button\n            type=\"button\"\n            className={previewMode === 'light' ? 'active' : ''}\n            onClick={() => setPreviewMode('light')}\n          >\n            ☀️ Light\n          </button>\n          <button\n            type=\"button\"\n            className={previewMode === 'dark' ? 'active' : ''}\n            onClick={() => setPreviewMode('dark')}\n          >\n            🌙 Dark\n          </button>\n        </div>\n      </div>\n\n      {/* Preview Content */}\n      <div\n        className=\"preview-content\"\n        style={{\n          backgroundColor: activeMode?.background || '#ffffff',\n          color: activeMode?.foreground || '#000000',\n        }}\n      >\n        {/* Header Section */}\n        <div className=\"preview-section\">\n          <h1 style={{ color: activeMode?.foreground }}>Welcome to Your Site</h1>\n          <p style={{ color: activeMode?.mutedForeground }}>\n            This is a live preview of your theme configuration\n          </p>\n        </div>\n\n        {/* Card Section */}\n        <div className=\"preview-cards\">\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: activeMode?.card || '#ffffff',\n              color: activeMode?.cardForeground || '#000000',\n              borderColor: activeMode?.border || '#e2e8f0',\n            }}\n          >\n            <h3>Featured Content</h3>\n            <p style={{ color: activeMode?.mutedForeground }}>Card component with theme colors</p>\n            <button\n              className=\"preview-btn-primary\"\n              style={{\n                backgroundColor: activeMode?.primary || '#0070f3',\n                color: activeMode?.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Action\n            </button>\n          </div>\n\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: activeMode?.card || '#ffffff',\n              color: activeMode?.cardForeground || '#000000',\n              borderColor: activeMode?.border || '#e2e8f0',\n            }}\n          >\n            <h3>Secondary Card</h3>\n            <p style={{ color: activeMode?.mutedForeground }}>\n              Another card to showcase your theme\n            </p>\n            <button\n              className=\"preview-btn-secondary\"\n              style={{\n                backgroundColor: activeMode?.secondary || '#f1f5f9',\n                color: activeMode?.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n\n        {/* UI Elements */}\n        <div className=\"preview-ui-elements\">\n          <input\n            type=\"text\"\n            placeholder=\"Input field\"\n            className=\"preview-input\"\n            style={{\n              backgroundColor: activeMode?.background,\n              color: activeMode?.foreground,\n              borderColor: activeMode?.input || activeMode?.border,\n            }}\n          />\n\n          <div\n            className=\"preview-badge\"\n            style={{\n              backgroundColor: activeMode?.accent || '#f1f5f9',\n              color: activeMode?.accentForeground || '#0f172a',\n            }}\n          >\n            Accent Badge\n          </div>\n\n          <button\n            className=\"preview-btn-destructive\"\n            style={{\n              backgroundColor: activeMode?.destructive || '#ef4444',\n              color: activeMode?.destructiveForeground || '#ffffff',\n            }}\n          >\n            Destructive\n          </button>\n        </div>\n\n        {/* Muted Section */}\n        <div\n          className=\"preview-muted\"\n          style={{\n            backgroundColor: activeMode?.muted || '#f1f5f9',\n            color: activeMode?.mutedForeground || '#64748b',\n          }}\n        >\n          <p>Muted background section for less prominent content</p>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ThemeLivePreview\n"],"names":["useFormFields","useState","window","catch","err","console","warn","ThemeLivePreview","allFields","fields","previewMode","setPreviewMode","themeConfig","themeConfiguration","value","lightMode","extendedLightMode","darkMode","extendedDarkMode","activeMode","div","className","p","data-mode","h3","button","type","onClick","style","backgroundColor","background","color","foreground","h1","mutedForeground","card","cardForeground","borderColor","border","primary","primaryForeground","secondary","secondaryForeground","input","placeholder","accent","accentForeground","destructive","destructiveForeground","muted"],"mappings":"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"}

package/dist/fields/VISUAL_EXAMPLES.d.ts

@@ -1,153 +0,0 @@
-/**
- * Enhanced Font Selector - Visual Examples
- *
- * This file demonstrates how the font selector appears with actual fonts
- */
-/**
- * BEFORE (Standard Payload Select):
- *
- * ┌──────────────────────────────┐
- * │ Body font             ▼      │
- * ├──────────────────────────────┤
- * │ System                       │
- * │ Inter                        │
- * │ Roboto                       │
- * │ Open Sans                    │
- * │ ...                          │
- * └──────────────────────────────┘
- *
- * Issues:
- * - No visual preview of fonts
- * - Can't see how font looks
- * - Generic dropdown appearance
- * - No distinction between fonts
- */
-/**
- * AFTER (Custom Font Selector):
- *
- * ┌────────────────────────────────────┐
- * │ Body font                          │
- * │ ┌────────────────────────────┐     │
- * │ │ Inter               ▼      │     │
- * │ └────────────────────────────┘     │
- * └────────────────────────────────────┘
- *
- * Opens dropdown:
- *
- * ┌────────────────────────────────────┐
- * │ ✓ Inter                            │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Inter font)         │
- * ├────────────────────────────────────┤
- * │   Roboto                           │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Roboto font)        │
- * ├────────────────────────────────────┤
- * │   Playfair Display                 │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Playfair font)      │
- * └────────────────────────────────────┘
- *
- * Features:
- * ✅ Live font preview
- * ✅ Check mark on selected
- * ✅ Hover effects
- * ✅ Smooth transitions
- * ✅ Font category badges
- */
-/**
- * Color Picker BEFORE (Inline Popover):
- *
- * ┌────────────────────────────────┐
- * │ Primary color                  │
- * │ ┌───┐ #3b82f6                  │
- * │ │███│ ────────────             │
- * │ └───┘                          │
- * │   ┌──────────────────┐         │
- * │   │  Color Picker    │         │
- * │   │  [Hex Wheel]     │         │
- * │   │  #3b82f6         │         │
- * │   └──────────────────┘         │
- * └────────────────────────────────┘
- *
- * Issues:
- * - Takes up inline space
- * - Hard to use on mobile
- * - No quick color swatches
- * - Click-outside handling complex
- */
-/**
- * Color Picker AFTER (Modal Drawer):
- *
- * Field:
- * ┌────────────────────────────────┐
- * │ Primary color                  │
- * │ ┌───┐ #3b82f6                  │
- * │ │███│ ────────────             │
- * │ └───┘                          │
- * └────────────────────────────────┘
- *
- * Click swatch → Opens Modal:
- *
- * ╔════════════════════════════════╗
- * ║ Choose Primary color      [×]  ║
- * ╠════════════════════════════════╣
- * ║                                ║
- * ║   ┌────────────────────┐       ║
- * ║   │                    │       ║
- * ║   │   [Color Wheel]    │       ║
- * ║   │                    │       ║
- * ║   └────────────────────┘       ║
- * ║                                ║
- * ║   #3b82f6          [Done]      ║
- * ║                                ║
- * ║   Quick Colors:                ║
- * ║   ┌──┬──┬──┬──┬──┬──┬──┬──┐   ║
- * ║   │██│██│██│██│██│██│██│██│   ║
- * ║   └──┴──┴──┴──┴──┴──┴──┴──┘   ║
- * ║                                ║
- * ╚════════════════════════════════╝
- *
- * Features:
- * ✅ Full-screen modal (Payload Drawer)
- * ✅ Larger color picker (220px)
- * ✅ Quick color swatches
- * ✅ Better mobile UX
- * ✅ Escape key to close
- */
-/**
- * Theme Preset Selector (Already Had Swatches!):
- *
- * ┌─────────────────────────────────────┐
- * │ Cool & Professional     ●●●●●       │
- * │ cool                                │
- * ├─────────────────────────────────────┤
- * │ Warm & Inviting        ●●●●●       │
- * │ warm                                │
- * ├─────────────────────────────────────┤
- * │ Dark & Modern          ●●●●●       │
- * │ dark                                │
- * └─────────────────────────────────────┘
- *
- * Legend:
- * ● = Color swatch for:
- *     - Primary
- *     - Secondary
- *     - Accent
- *     - Background
- *     - Foreground
- */
-export declare const examples: {
-    fontSelector: {
-        before: string;
-        after: string;
-    };
-    colorPicker: {
-        before: string;
-        after: string;
-    };
-    themePresets: {
-        status: string;
-    };
-};
-//# sourceMappingURL=VISUAL_EXAMPLES.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"VISUAL_EXAMPLES.d.ts","sourceRoot":"","sources":["../../src/fields/VISUAL_EXAMPLES.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAYpB,CAAA"}

package/dist/fields/VISUAL_EXAMPLES.js

@@ -1,148 +0,0 @@
-/**
- * Enhanced Font Selector - Visual Examples
- *
- * This file demonstrates how the font selector appears with actual fonts
- */ /**
- * BEFORE (Standard Payload Select):
- *
- * ┌──────────────────────────────┐
- * │ Body font             ▼      │
- * ├──────────────────────────────┤
- * │ System                       │
- * │ Inter                        │
- * │ Roboto                       │
- * │ Open Sans                    │
- * │ ...                          │
- * └──────────────────────────────┘
- *
- * Issues:
- * - No visual preview of fonts
- * - Can't see how font looks
- * - Generic dropdown appearance
- * - No distinction between fonts
- */ /**
- * AFTER (Custom Font Selector):
- *
- * ┌────────────────────────────────────┐
- * │ Body font                          │
- * │ ┌────────────────────────────┐     │
- * │ │ Inter               ▼      │     │
- * │ └────────────────────────────┘     │
- * └────────────────────────────────────┘
- *
- * Opens dropdown:
- *
- * ┌────────────────────────────────────┐
- * │ ✓ Inter                            │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Inter font)         │
- * ├────────────────────────────────────┤
- * │   Roboto                           │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Roboto font)        │
- * ├────────────────────────────────────┤
- * │   Playfair Display                 │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Playfair font)      │
- * └────────────────────────────────────┘
- *
- * Features:
- * ✅ Live font preview
- * ✅ Check mark on selected
- * ✅ Hover effects
- * ✅ Smooth transitions
- * ✅ Font category badges
- */ /**
- * Color Picker BEFORE (Inline Popover):
- *
- * ┌────────────────────────────────┐
- * │ Primary color                  │
- * │ ┌───┐ #3b82f6                  │
- * │ │███│ ────────────             │
- * │ └───┘                          │
- * │   ┌──────────────────┐         │
- * │   │  Color Picker    │         │
- * │   │  [Hex Wheel]     │         │
- * │   │  #3b82f6         │         │
- * │   └──────────────────┘         │
- * └────────────────────────────────┘
- *
- * Issues:
- * - Takes up inline space
- * - Hard to use on mobile
- * - No quick color swatches
- * - Click-outside handling complex
- */ /**
- * Color Picker AFTER (Modal Drawer):
- *
- * Field:
- * ┌────────────────────────────────┐
- * │ Primary color                  │
- * │ ┌───┐ #3b82f6                  │
- * │ │███│ ────────────             │
- * │ └───┘                          │
- * └────────────────────────────────┘
- *
- * Click swatch → Opens Modal:
- *
- * ╔════════════════════════════════╗
- * ║ Choose Primary color      [×]  ║
- * ╠════════════════════════════════╣
- * ║                                ║
- * ║   ┌────────────────────┐       ║
- * ║   │                    │       ║
- * ║   │   [Color Wheel]    │       ║
- * ║   │                    │       ║
- * ║   └────────────────────┘       ║
- * ║                                ║
- * ║   #3b82f6          [Done]      ║
- * ║                                ║
- * ║   Quick Colors:                ║
- * ║   ┌──┬──┬──┬──┬──┬──┬──┬──┐   ║
- * ║   │██│██│██│██│██│██│██│██│   ║
- * ║   └──┴──┴──┴──┴──┴──┴──┴──┘   ║
- * ║                                ║
- * ╚════════════════════════════════╝
- *
- * Features:
- * ✅ Full-screen modal (Payload Drawer)
- * ✅ Larger color picker (220px)
- * ✅ Quick color swatches
- * ✅ Better mobile UX
- * ✅ Escape key to close
- */ /**
- * Theme Preset Selector (Already Had Swatches!):
- *
- * ┌─────────────────────────────────────┐
- * │ Cool & Professional     ●●●●●       │
- * │ cool                                │
- * ├─────────────────────────────────────┤
- * │ Warm & Inviting        ●●●●●       │
- * │ warm                                │
- * ├─────────────────────────────────────┤
- * │ Dark & Modern          ●●●●●       │
- * │ dark                                │
- * └─────────────────────────────────────┘
- *
- * Legend:
- * ● = Color swatch for:
- *     - Primary
- *     - Secondary
- *     - Accent
- *     - Background
- *     - Foreground
- */ export const examples = {
-    fontSelector: {
-        before: 'Standard dropdown with no preview',
-        after: 'Custom component with live font rendering'
-    },
-    colorPicker: {
-        before: 'Inline popover',
-        after: 'Modal drawer with quick swatches'
-    },
-    themePresets: {
-        status: 'Already implemented with color swatches!'
-    }
-};
-
-//# sourceMappingURL=VISUAL_EXAMPLES.js.map

package/dist/fields/VISUAL_EXAMPLES.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/VISUAL_EXAMPLES.ts"],"sourcesContent":["/**\n * Enhanced Font Selector - Visual Examples\n *\n * This file demonstrates how the font selector appears with actual fonts\n */\n\n/**\n * BEFORE (Standard Payload Select):\n *\n * ┌──────────────────────────────┐\n * │ Body font             ▼      │\n * ├──────────────────────────────┤\n * │ System                       │\n * │ Inter                        │\n * │ Roboto                       │\n * │ Open Sans                    │\n * │ ...                          │\n * └──────────────────────────────┘\n *\n * Issues:\n * - No visual preview of fonts\n * - Can't see how font looks\n * - Generic dropdown appearance\n * - No distinction between fonts\n */\n\n/**\n * AFTER (Custom Font Selector):\n *\n * ┌────────────────────────────────────┐\n * │ Body font                          │\n * │ ┌────────────────────────────┐     │\n * │ │ Inter               ▼      │     │\n * │ └────────────────────────────┘     │\n * └────────────────────────────────────┘\n *\n * Opens dropdown:\n *\n * ┌────────────────────────────────────┐\n * │ ✓ Inter                            │\n * │   The quick brown fox jumps...     │\n * │   (rendered in Inter font)         │\n * ├────────────────────────────────────┤\n * │   Roboto                           │\n * │   The quick brown fox jumps...     │\n * │   (rendered in Roboto font)        │\n * ├────────────────────────────────────┤\n * │   Playfair Display                 │\n * │   The quick brown fox jumps...     │\n * │   (rendered in Playfair font)      │\n * └────────────────────────────────────┘\n *\n * Features:\n * ✅ Live font preview\n * ✅ Check mark on selected\n * ✅ Hover effects\n * ✅ Smooth transitions\n * ✅ Font category badges\n */\n\n/**\n * Color Picker BEFORE (Inline Popover):\n *\n * ┌────────────────────────────────┐\n * │ Primary color                  │\n * │ ┌───┐ #3b82f6                  │\n * │ │███│ ────────────             │\n * │ └───┘                          │\n * │   ┌──────────────────┐         │\n * │   │  Color Picker    │         │\n * │   │  [Hex Wheel]     │         │\n * │   │  #3b82f6         │         │\n * │   └──────────────────┘         │\n * └────────────────────────────────┘\n *\n * Issues:\n * - Takes up inline space\n * - Hard to use on mobile\n * - No quick color swatches\n * - Click-outside handling complex\n */\n\n/**\n * Color Picker AFTER (Modal Drawer):\n *\n * Field:\n * ┌────────────────────────────────┐\n * │ Primary color                  │\n * │ ┌───┐ #3b82f6                  │\n * │ │███│ ────────────             │\n * │ └───┘                          │\n * └────────────────────────────────┘\n *\n * Click swatch → Opens Modal:\n *\n * ╔════════════════════════════════╗\n * ║ Choose Primary color      [×]  ║\n * ╠════════════════════════════════╣\n * ║                                ║\n * ║   ┌────────────────────┐       ║\n * ║   │                    │       ║\n * ║   │   [Color Wheel]    │       ║\n * ║   │                    │       ║\n * ║   └────────────────────┘       ║\n * ║                                ║\n * ║   #3b82f6          [Done]      ║\n * ║                                ║\n * ║   Quick Colors:                ║\n * ║   ┌──┬──┬──┬──┬──┬──┬──┬──┐   ║\n * ║   │██│██│██│██│██│██│██│██│   ║\n * ║   └──┴──┴──┴──┴──┴──┴──┴──┘   ║\n * ║                                ║\n * ╚════════════════════════════════╝\n *\n * Features:\n * ✅ Full-screen modal (Payload Drawer)\n * ✅ Larger color picker (220px)\n * ✅ Quick color swatches\n * ✅ Better mobile UX\n * ✅ Escape key to close\n */\n\n/**\n * Theme Preset Selector (Already Had Swatches!):\n *\n * ┌─────────────────────────────────────┐\n * │ Cool & Professional     ●●●●●       │\n * │ cool                                │\n * ├─────────────────────────────────────┤\n * │ Warm & Inviting        ●●●●●       │\n * │ warm                                │\n * ├─────────────────────────────────────┤\n * │ Dark & Modern          ●●●●●       │\n * │ dark                                │\n * └─────────────────────────────────────┘\n *\n * Legend:\n * ● = Color swatch for:\n *     - Primary\n *     - Secondary\n *     - Accent\n *     - Background\n *     - Foreground\n */\n\nexport const examples = {\n  fontSelector: {\n    before: 'Standard dropdown with no preview',\n    after: 'Custom component with live font rendering',\n  },\n  colorPicker: {\n    before: 'Inline popover',\n    after: 'Modal drawer with quick swatches',\n  },\n  themePresets: {\n    status: 'Already implemented with color swatches!',\n  },\n}\n"],"names":["examples","fontSelector","before","after","colorPicker","themePresets","status"],"mappings":"AAAA;;;;CAIC,GAED;;;;;;;;;;;;;;;;;;CAkBC,GAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GAED;;;;;;;;;;;;;;;;;;;;CAoBC,GAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GAED;;;;;;;;;;;;;;;;;;;;;CAqBC,GAED,OAAO,MAAMA,WAAW;IACtBC,cAAc;QACZC,QAAQ;QACRC,OAAO;IACT;IACAC,aAAa;QACXF,QAAQ;QACRC,OAAO;IACT;IACAE,cAAc;QACZC,QAAQ;IACV;AACF,EAAC"}