@delmaredigital/payload-puck 0.6.10 → 0.6.13

package/dist/fields/TemplateField.js

@@ -10,10 +10,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - When a template is selected, loads the saved components into the slot
  *
  * Uses Puck's usePuck hook to access and modify component slot data.
- */
-import { useState, useEffect, useCallback, memo } from 'react';
+ */ import React, { useState, useEffect, useCallback, memo } from 'react';
 import { createUsePuck } from '@puckeditor/core';
-import { Loader2, Save, Download, AlertCircle, ChevronUp, X, } from 'lucide-react';
+import { Loader2, Save, Download, AlertCircle, ChevronUp, X } from 'lucide-react';
 // Create usePuck hook for accessing editor state
 const usePuck = createUsePuck();
 // =============================================================================
@@ -23,17 +22,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '12px',
+        gap: '12px'
     },
     label: {
         display: 'block',
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     selectRow: {
         display: 'flex',
-        gap: '8px',
+        gap: '8px'
     },
     select: {
         flex: 1,
@@ -44,7 +43,7 @@ const styles = {
         borderRadius: '6px',
         backgroundColor: 'var(--theme-input-bg)',
         color: 'var(--theme-elevation-800)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     clearButton: {
         display: 'flex',
@@ -57,11 +56,11 @@ const styles = {
         borderRadius: '6px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonRow: {
         display: 'flex',
-        gap: '8px',
+        gap: '8px'
     },
     button: {
         display: 'flex',
@@ -77,11 +76,11 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     saveForm: {
         display: 'flex',
@@ -90,16 +89,16 @@ const styles = {
         padding: '12px',
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '6px',
-        backgroundColor: 'var(--theme-elevation-50)',
+        backgroundColor: 'var(--theme-elevation-50)'
     },
     inputGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '6px',
+        gap: '6px'
     },
     inputLabel: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-700)',
+        color: 'var(--theme-elevation-700)'
     },
     input: {
         height: '32px',
@@ -108,7 +107,7 @@ const styles = {
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '4px',
         backgroundColor: 'var(--theme-input-bg)',
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     errorBox: {
         display: 'flex',
@@ -119,7 +118,7 @@ const styles = {
         border: '1px solid rgba(239, 68, 68, 0.3)',
         borderRadius: '6px',
         color: 'var(--theme-error-500)',
-        fontSize: '12px',
+        fontSize: '12px'
     },
     submitButton: {
         display: 'flex',
@@ -135,25 +134,24 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
-    },
+        cursor: 'pointer'
+    }
 };
 // =============================================================================
 // Helper Functions
 // =============================================================================
 /**
  * Find and update a component's props in the Puck data tree.
- */
-function updateComponentInData(data, componentId, propsToMerge) {
-    const updateInArray = (items) => {
-        return items.map((item) => {
+ */ function updateComponentInData(data, componentId, propsToMerge) {
+    const updateInArray = (items)=>{
+        return items.map((item)=>{
             if (item.props?.id === componentId) {
                 return {
                     ...item,
                     props: {
                         ...item.props,
-                        ...propsToMerge,
-                    },
+                        ...propsToMerge
+                    }
                 };
             }
             if (item.props?.content && Array.isArray(item.props.content)) {
@@ -161,32 +159,30 @@ function updateComponentInData(data, componentId, propsToMerge) {
                     ...item,
                     props: {
                         ...item.props,
-                        content: updateInArray(item.props.content),
-                    },
+                        content: updateInArray(item.props.content)
+                    }
                 };
             }
             return item;
         });
     };
-    const updatedContent = data.content
-        ? updateInArray(data.content)
-        : [];
+    const updatedContent = data.content ? updateInArray(data.content) : [];
     const updatedZones = {};
     if (data.zones) {
-        for (const [zoneName, zoneContent] of Object.entries(data.zones)) {
+        for (const [zoneName, zoneContent] of Object.entries(data.zones)){
             updatedZones[zoneName] = updateInArray(zoneContent);
         }
     }
     return {
         ...data,
         content: updatedContent,
-        zones: updatedZones,
+        zones: updatedZones
     };
 }
 // =============================================================================
 // TemplateField Component
 // =============================================================================
-function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, apiEndpoint = '/api/puck-templates', }) {
+function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, apiEndpoint = '/api/puck-templates' }) {
     const [templates, setTemplates] = useState([]);
     const [loading, setLoading] = useState(false);
     const [loadingTemplate, setLoadingTemplate] = useState(false);
@@ -197,58 +193,57 @@ function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, api
         description: '',
         category: '',
         saving: false,
-        error: null,
+        error: null
     });
     // Puck state access
-    const appState = usePuck((s) => s.appState);
-    const dispatch = usePuck((s) => s.dispatch);
-    const selectedItem = usePuck((s) => s.selectedItem);
-    const getSelectorForId = usePuck((s) => s.getSelectorForId);
-    const getItemById = usePuck((s) => s.getItemById);
+    const appState = usePuck((s)=>s.appState);
+    const dispatch = usePuck((s)=>s.dispatch);
+    const selectedItem = usePuck((s)=>s.selectedItem);
+    const getSelectorForId = usePuck((s)=>s.getSelectorForId);
+    const getItemById = usePuck((s)=>s.getItemById);
     // Get current component ID
     const componentId = selectedItem?.props?.id;
     // Fetch templates from Payload API
-    const fetchTemplates = useCallback(async () => {
+    const fetchTemplates = useCallback(async ()=>{
         setLoading(true);
         setError(null);
         try {
             const params = new URLSearchParams({
                 limit: '100',
-                sort: '-updatedAt',
+                sort: '-updatedAt'
             });
             const response = await fetch(`${apiEndpoint}?${params}`);
-            if (!response.ok)
-                throw new Error('Failed to fetch templates');
+            if (!response.ok) throw new Error('Failed to fetch templates');
             const data = await response.json();
-            const items = (data.docs || []).map((doc) => ({
-                id: doc.id,
-                name: doc.name,
-                description: doc.description,
-                category: doc.category,
-                content: doc.content,
-                updatedAt: doc.updatedAt,
-            }));
+            const items = (data.docs || []).map((doc)=>({
+                    id: doc.id,
+                    name: doc.name,
+                    description: doc.description,
+                    category: doc.category,
+                    content: doc.content,
+                    updatedAt: doc.updatedAt
+                }));
             setTemplates(items);
-        }
-        catch (err) {
+        } catch (err) {
             console.error('Error fetching templates:', err);
             setError('Failed to load templates');
-        }
-        finally {
+        } finally{
             setLoading(false);
         }
-    }, [apiEndpoint]);
+    }, [
+        apiEndpoint
+    ]);
     // Load templates on mount
-    useEffect(() => {
+    useEffect(()=>{
         fetchTemplates();
-    }, [fetchTemplates]);
+    }, [
+        fetchTemplates
+    ]);
     // Handle template selection
-    const handleTemplateSelect = useCallback(async (templateId) => {
-        if (!componentId || !selectedItem)
-            return;
-        const template = templates.find((t) => String(t.id) === String(templateId));
-        if (!template)
-            return;
+    const handleTemplateSelect = useCallback(async (templateId)=>{
+        if (!componentId || !selectedItem) return;
+        const template = templates.find((t)=>String(t.id) === String(templateId));
+        if (!template) return;
         setLoadingTemplate(true);
         try {
             const selector = getSelectorForId(componentId);
@@ -262,64 +257,77 @@ function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, api
                         props: {
                             ...selectedItem.props,
                             content: template.content,
-                            templateId: templateId,
-                        },
-                    },
+                            templateId: templateId
+                        }
+                    }
+                });
+            } else {
+                const updatedData = updateComponentInData(appState.data, componentId, {
+                    content: template.content,
+                    templateId: templateId
                 });
-            }
-            else {
-                const updatedData = updateComponentInData(appState.data, componentId, { content: template.content, templateId: templateId });
                 dispatch({
                     type: 'setData',
-                    data: updatedData,
+                    data: updatedData
                 });
             }
             onChange(templateId);
-        }
-        catch (err) {
+        } catch (err) {
             console.error('Error loading template:', err);
             setError('Failed to load template');
-        }
-        finally {
+        } finally{
             setLoadingTemplate(false);
         }
-    }, [componentId, selectedItem, templates, getSelectorForId, appState.data, dispatch, onChange]);
+    }, [
+        componentId,
+        selectedItem,
+        templates,
+        getSelectorForId,
+        appState.data,
+        dispatch,
+        onChange
+    ]);
     // Handle clearing template selection
-    const handleClearTemplate = useCallback(() => {
+    const handleClearTemplate = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     // Toggle save form
-    const handleToggleSaveForm = useCallback(() => {
-        setSaveForm((prev) => ({
-            ...prev,
-            expanded: !prev.expanded,
-            error: null,
-        }));
+    const handleToggleSaveForm = useCallback(()=>{
+        setSaveForm((prev)=>({
+                ...prev,
+                expanded: !prev.expanded,
+                error: null
+            }));
     }, []);
     // Close save form
-    const handleCloseSaveForm = useCallback(() => {
+    const handleCloseSaveForm = useCallback(()=>{
         setSaveForm({
             expanded: false,
             name: '',
             description: '',
             category: '',
             saving: false,
-            error: null,
+            error: null
         });
     }, []);
     // Save current slot content as a new template
-    const handleSaveTemplate = useCallback(async () => {
-        if (!componentId)
-            return;
+    const handleSaveTemplate = useCallback(async ()=>{
+        if (!componentId) return;
         const name = saveForm.name.trim();
         if (!name) {
-            setSaveForm((prev) => ({
-                ...prev,
-                error: 'Please enter a template name',
-            }));
+            setSaveForm((prev)=>({
+                    ...prev,
+                    error: 'Please enter a template name'
+                }));
             return;
         }
-        setSaveForm((prev) => ({ ...prev, saving: true, error: null }));
+        setSaveForm((prev)=>({
+                ...prev,
+                saving: true,
+                error: null
+            }));
         try {
             // Use Puck's official getItemById API instead of manual tree traversal
             const component = getItemById(componentId);
@@ -330,17 +338,17 @@ function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, api
             const response = await fetch(apiEndpoint, {
                 method: 'POST',
                 headers: {
-                    'Content-Type': 'application/json',
+                    'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
                     name,
                     description: saveForm.description.trim() || undefined,
                     category: saveForm.category.trim() || undefined,
-                    content,
-                }),
+                    content
+                })
             });
             if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
+                const errorData = await response.json().catch(()=>({}));
                 throw new Error(errorData.message || errorData.errors?.[0]?.message || 'Failed to save template');
             }
             const data = await response.json();
@@ -351,25 +359,34 @@ function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, api
                 description: doc.description,
                 category: doc.category,
                 content: doc.content,
-                updatedAt: doc.updatedAt,
+                updatedAt: doc.updatedAt
             };
-            setTemplates((prev) => [newTemplate, ...prev]);
+            setTemplates((prev)=>[
+                    newTemplate,
+                    ...prev
+                ]);
             handleCloseSaveForm();
-            setTimeout(() => {
+            setTimeout(()=>{
                 onChange(newTemplate.id);
             }, 50);
-        }
-        catch (err) {
+        } catch (err) {
             console.error('Error saving template:', err);
-            setSaveForm((prev) => ({
-                ...prev,
-                saving: false,
-                error: err instanceof Error ? err.message : 'Failed to save template',
-            }));
+            setSaveForm((prev)=>({
+                    ...prev,
+                    saving: false,
+                    error: err instanceof Error ? err.message : 'Failed to save template'
+                }));
         }
-    }, [componentId, getItemById, apiEndpoint, saveForm, onChange, handleCloseSaveForm]);
+    }, [
+        componentId,
+        getItemById,
+        apiEndpoint,
+        saveForm,
+        onChange,
+        handleCloseSaveForm
+    ]);
     // Group templates by category
-    const categorizedTemplates = templates.reduce((acc, template) => {
+    const categorizedTemplates = templates.reduce((acc, template)=>{
         const category = template.category || 'Uncategorized';
         if (!acc[category]) {
             acc[category] = [];
@@ -377,31 +394,256 @@ function TemplateFieldInner({ value, onChange, label = 'Template', readOnly, api
         acc[category].push(template);
         return acc;
     }, {});
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [label && (_jsx("label", { style: styles.label, children: label })), _jsxs("div", { style: styles.selectRow, children: [_jsxs("select", { value: value || '', onChange: (e) => e.target.value && handleTemplateSelect(e.target.value), disabled: readOnly || loading || loadingTemplate, style: styles.select, children: [_jsx("option", { value: "", children: loading ? 'Loading...' : loadingTemplate ? 'Loading template...' : 'Select a template' }), Object.entries(categorizedTemplates).map(([category, items]) => (_jsx("optgroup", { label: category, children: items.map((template) => (_jsx("option", { value: template.id, children: template.name }, template.id))) }, category)))] }), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClearTemplate, style: styles.clearButton, title: "Clear selection", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), !readOnly && (_jsxs("div", { style: styles.buttonRow, children: [_jsxs("button", { type: "button", onClick: handleToggleSaveForm, disabled: loading || saveForm.saving, style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            label && /*#__PURE__*/ _jsx("label", {
+                style: styles.label,
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.selectRow,
+                children: [
+                    /*#__PURE__*/ _jsxs("select", {
+                        value: value || '',
+                        onChange: (e)=>e.target.value && handleTemplateSelect(e.target.value),
+                        disabled: readOnly || loading || loadingTemplate,
+                        style: styles.select,
+                        children: [
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                children: loading ? 'Loading...' : loadingTemplate ? 'Loading template...' : 'Select a template'
+                            }),
+                            Object.entries(categorizedTemplates).map(([category, items])=>/*#__PURE__*/ _jsx("optgroup", {
+                                    label: category,
+                                    children: items.map((template)=>/*#__PURE__*/ _jsx("option", {
+                                            value: template.id,
+                                            children: template.name
+                                        }, template.id))
+                                }, category))
+                        ]
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClearTemplate,
+                        style: styles.clearButton,
+                        title: "Clear selection",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            !readOnly && /*#__PURE__*/ _jsxs("div", {
+                style: styles.buttonRow,
+                children: [
+                    /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: handleToggleSaveForm,
+                        disabled: loading || saveForm.saving,
+                        style: {
                             ...styles.button,
-                            ...(loading || saveForm.saving ? styles.buttonDisabled : {}),
-                        }, children: [saveForm.expanded ? (_jsx(ChevronUp, { style: { width: '16px', height: '16px' } })) : (_jsx(Save, { style: { width: '16px', height: '16px' } })), saveForm.expanded ? 'Cancel' : 'Save as Template'] }), value && (_jsxs("button", { type: "button", onClick: () => handleTemplateSelect(value), disabled: loadingTemplate, style: {
+                            ...loading || saveForm.saving ? styles.buttonDisabled : {}
+                        },
+                        children: [
+                            saveForm.expanded ? /*#__PURE__*/ _jsx(ChevronUp, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px'
+                                }
+                            }) : /*#__PURE__*/ _jsx(Save, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px'
+                                }
+                            }),
+                            saveForm.expanded ? 'Cancel' : 'Save as Template'
+                        ]
+                    }),
+                    value && /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>handleTemplateSelect(value),
+                        disabled: loadingTemplate,
+                        style: {
                             ...styles.button,
                             flex: 'none',
-                            ...(loadingTemplate ? styles.buttonDisabled : {}),
-                        }, children: [loadingTemplate ? (_jsx(Loader2, { style: { width: '16px', height: '16px', animation: 'spin 1s linear infinite' } })) : (_jsx(Download, { style: { width: '16px', height: '16px' } })), "Reload"] }))] })), saveForm.expanded && (_jsxs("div", { style: styles.saveForm, children: [_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { htmlFor: "template-name", style: styles.inputLabel, children: "Template Name *" }), _jsx("input", { id: "template-name", placeholder: "e.g., Hero Section with CTA", value: saveForm.name, onChange: (e) => setSaveForm((prev) => ({ ...prev, name: e.target.value })), disabled: saveForm.saving, style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { htmlFor: "template-description", style: styles.inputLabel, children: "Description" }), _jsx("input", { id: "template-description", placeholder: "Optional description...", value: saveForm.description, onChange: (e) => setSaveForm((prev) => ({ ...prev, description: e.target.value })), disabled: saveForm.saving, style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { htmlFor: "template-category", style: styles.inputLabel, children: "Category" }), _jsx("input", { id: "template-category", placeholder: "e.g., Hero, Footer, CTA", value: saveForm.category, onChange: (e) => setSaveForm((prev) => ({ ...prev, category: e.target.value })), disabled: saveForm.saving, style: styles.input })] }), saveForm.error && (_jsxs("div", { style: styles.errorBox, children: [_jsx(AlertCircle, { style: { width: '14px', height: '14px', flexShrink: 0, marginTop: '2px' } }), _jsx("span", { children: saveForm.error })] })), _jsx("button", { type: "button", onClick: handleSaveTemplate, disabled: saveForm.saving, style: {
+                            ...loadingTemplate ? styles.buttonDisabled : {}
+                        },
+                        children: [
+                            loadingTemplate ? /*#__PURE__*/ _jsx(Loader2, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px',
+                                    animation: 'spin 1s linear infinite'
+                                }
+                            }) : /*#__PURE__*/ _jsx(Download, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px'
+                                }
+                            }),
+                            "Reload"
+                        ]
+                    })
+                ]
+            }),
+            saveForm.expanded && /*#__PURE__*/ _jsxs("div", {
+                style: styles.saveForm,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.inputGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                htmlFor: "template-name",
+                                style: styles.inputLabel,
+                                children: "Template Name *"
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                id: "template-name",
+                                placeholder: "e.g., Hero Section with CTA",
+                                value: saveForm.name,
+                                onChange: (e)=>setSaveForm((prev)=>({
+                                            ...prev,
+                                            name: e.target.value
+                                        })),
+                                disabled: saveForm.saving,
+                                style: styles.input
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.inputGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                htmlFor: "template-description",
+                                style: styles.inputLabel,
+                                children: "Description"
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                id: "template-description",
+                                placeholder: "Optional description...",
+                                value: saveForm.description,
+                                onChange: (e)=>setSaveForm((prev)=>({
+                                            ...prev,
+                                            description: e.target.value
+                                        })),
+                                disabled: saveForm.saving,
+                                style: styles.input
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.inputGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                htmlFor: "template-category",
+                                style: styles.inputLabel,
+                                children: "Category"
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                id: "template-category",
+                                placeholder: "e.g., Hero, Footer, CTA",
+                                value: saveForm.category,
+                                onChange: (e)=>setSaveForm((prev)=>({
+                                            ...prev,
+                                            category: e.target.value
+                                        })),
+                                disabled: saveForm.saving,
+                                style: styles.input
+                            })
+                        ]
+                    }),
+                    saveForm.error && /*#__PURE__*/ _jsxs("div", {
+                        style: styles.errorBox,
+                        children: [
+                            /*#__PURE__*/ _jsx(AlertCircle, {
+                                style: {
+                                    width: '14px',
+                                    height: '14px',
+                                    flexShrink: 0,
+                                    marginTop: '2px'
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: saveForm.error
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleSaveTemplate,
+                        disabled: saveForm.saving,
+                        style: {
                             ...styles.submitButton,
-                            ...(saveForm.saving ? styles.buttonDisabled : {}),
-                        }, children: saveForm.saving ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { style: { width: '16px', height: '16px', animation: 'spin 1s linear infinite' } }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { style: { width: '16px', height: '16px' } }), "Save Template"] })) })] })), error && (_jsxs("div", { style: styles.errorBox, children: [_jsx(AlertCircle, { style: { width: '16px', height: '16px', flexShrink: 0, marginTop: '2px' } }), _jsx("span", { children: error })] }))] }));
+                            ...saveForm.saving ? styles.buttonDisabled : {}
+                        },
+                        children: saveForm.saving ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Loader2, {
+                                    style: {
+                                        width: '16px',
+                                        height: '16px',
+                                        animation: 'spin 1s linear infinite'
+                                    }
+                                }),
+                                "Saving..."
+                            ]
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Save, {
+                                    style: {
+                                        width: '16px',
+                                        height: '16px'
+                                    }
+                                }),
+                                "Save Template"
+                            ]
+                        })
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ _jsxs("div", {
+                style: styles.errorBox,
+                children: [
+                    /*#__PURE__*/ _jsx(AlertCircle, {
+                        style: {
+                            width: '16px',
+                            height: '16px',
+                            flexShrink: 0,
+                            marginTop: '2px'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        children: error
+                    })
+                ]
+            })
+        ]
+    });
 }
 // Memoize to prevent unnecessary re-renders
-export const TemplateField = memo(TemplateFieldInner);
+export const TemplateField = /*#__PURE__*/ memo(TemplateFieldInner);
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for template selection
- */
-export function createTemplateField(config) {
+ */ export function createTemplateField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(TemplateField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, apiEndpoint: config.apiEndpoint })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(TemplateField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                apiEndpoint: config.apiEndpoint
+            })
     };
 }
+
 //# sourceMappingURL=TemplateField.js.map