@delmaredigital/payload-puck 0.6.10 → 0.6.13

package/dist/fields/WidthField.js

@@ -8,9 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Custom max-width input with unit selector (px, %, rem, vw)
  * - Content alignment (left, center, right)
  * - Preset quick-select buttons for common widths
- */
-import { useCallback, memo } from 'react';
-import { X, AlignLeft, AlignCenter, AlignRight, MoveHorizontal, Container, SlidersHorizontal, } from 'lucide-react';
+ */ import React, { useCallback, memo } from 'react';
+import { X, AlignLeft, AlignCenter, AlignRight, MoveHorizontal, Container, SlidersHorizontal } from 'lucide-react';
 // =============================================================================
 // Default Value
 // =============================================================================
@@ -18,16 +17,28 @@ const DEFAULT_VALUE = {
     mode: 'contained',
     maxWidth: 1200,
     unit: 'px',
-    alignment: 'center',
+    alignment: 'center'
 };
 // =============================================================================
 // Preset Widths
 // =============================================================================
 const WIDTH_PRESETS = [
-    { label: 'Narrow', value: 680 },
-    { label: 'Medium', value: 960 },
-    { label: 'Wide', value: 1200 },
-    { label: 'XL', value: 1440 },
+    {
+        label: 'Narrow',
+        value: 680
+    },
+    {
+        label: 'Medium',
+        value: 960
+    },
+    {
+        label: 'Wide',
+        value: 1200
+    },
+    {
+        label: 'XL',
+        value: 1440
+    }
 ];
 // =============================================================================
 // Styles
@@ -36,17 +47,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '12px',
+        gap: '12px'
     },
     header: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     label: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     clearButton: {
         display: 'flex',
@@ -59,12 +70,12 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     modeGroup: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     modeButton: {
         display: 'inline-flex',
@@ -77,7 +88,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     modeButtonActive: {
         display: 'inline-flex',
@@ -90,7 +101,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     controlsPanel: {
         display: 'flex',
@@ -98,23 +109,23 @@ const styles = {
         gap: '12px',
         padding: '12px',
         backgroundColor: 'var(--theme-elevation-50)',
-        borderRadius: '6px',
+        borderRadius: '6px'
     },
     sectionLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     presetGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '6px',
+        gap: '6px'
     },
     presetButtons: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     presetButton: {
         height: '28px',
@@ -124,7 +135,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     presetButtonActive: {
         height: '28px',
@@ -134,18 +145,18 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     inputGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '6px',
+        gap: '6px'
     },
     inputRow: {
         display: 'flex',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     input: {
         flex: 1,
@@ -157,12 +168,12 @@ 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)'
     },
     unitGroup: {
         display: 'flex',
         flexShrink: 0,
-        gap: '4px',
+        gap: '4px'
     },
     unitButton: {
         height: '32px',
@@ -173,7 +184,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     unitButtonActive: {
         height: '32px',
@@ -184,28 +195,28 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     footer: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     alignGroup: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     alignLabel: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        flexShrink: 0,
+        flexShrink: 0
     },
     alignButtons: {
         display: 'flex',
-        gap: '4px',
+        gap: '4px'
     },
     alignButton: {
         display: 'flex',
@@ -218,7 +229,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     alignButtonActive: {
         display: 'flex',
@@ -231,109 +242,295 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     alignButtonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     summary: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        fontFamily: 'monospace',
-    },
+        fontFamily: 'monospace'
+    }
 };
 // =============================================================================
 // WidthField Component
 // =============================================================================
-function WidthFieldInner({ value, onChange, label, readOnly, }) {
+function WidthFieldInner({ value, onChange, label, readOnly }) {
     const currentValue = value || DEFAULT_VALUE;
-    const handleModeChange = useCallback((mode) => {
+    const handleModeChange = useCallback((mode)=>{
         if (mode === 'full') {
             onChange({
                 ...currentValue,
                 mode,
-                alignment: 'center',
+                alignment: 'center'
             });
-        }
-        else {
+        } else {
             onChange({
                 ...currentValue,
-                mode,
+                mode
             });
         }
-    }, [currentValue, onChange]);
-    const handleMaxWidthChange = useCallback((maxWidth) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleMaxWidthChange = useCallback((maxWidth)=>{
         onChange({
             ...currentValue,
-            maxWidth,
+            maxWidth
         });
-    }, [currentValue, onChange]);
-    const handleUnitChange = useCallback((unit) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleUnitChange = useCallback((unit)=>{
         onChange({
             ...currentValue,
-            unit,
+            unit
         });
-    }, [currentValue, onChange]);
-    const handleAlignmentChange = useCallback((alignment) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleAlignmentChange = useCallback((alignment)=>{
         onChange({
             ...currentValue,
-            alignment,
+            alignment
         });
-    }, [currentValue, onChange]);
-    const handlePresetSelect = useCallback((presetValue) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handlePresetSelect = useCallback((presetValue)=>{
         onChange({
             ...currentValue,
             mode: 'contained',
             maxWidth: presetValue,
-            unit: 'px',
+            unit: 'px'
         });
-    }, [currentValue, onChange]);
-    const handleClear = useCallback(() => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const modeConfig = [
-        { mode: 'full', icon: MoveHorizontal, label: 'Full', title: 'Full width (100%)' },
-        { mode: 'contained', icon: Container, label: 'Contain', title: 'Contained (centered with max-width)' },
-        { mode: 'custom', icon: SlidersHorizontal, label: 'Custom', title: 'Custom width settings' },
+        {
+            mode: 'full',
+            icon: MoveHorizontal,
+            label: 'Full',
+            title: 'Full width (100%)'
+        },
+        {
+            mode: 'contained',
+            icon: Container,
+            label: 'Contain',
+            title: 'Contained (centered with max-width)'
+        },
+        {
+            mode: 'custom',
+            icon: SlidersHorizontal,
+            label: 'Custom',
+            title: 'Custom width settings'
+        }
     ];
     const alignmentConfig = [
-        { alignment: 'left', icon: AlignLeft, title: 'Align left' },
-        { alignment: 'center', icon: AlignCenter, title: 'Align center' },
-        { alignment: 'right', icon: AlignRight, title: 'Align right' },
+        {
+            alignment: 'left',
+            icon: AlignLeft,
+            title: 'Align left'
+        },
+        {
+            alignment: 'center',
+            icon: AlignCenter,
+            title: 'Align center'
+        },
+        {
+            alignment: 'right',
+            icon: AlignRight,
+            title: 'Align right'
+        }
     ];
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [label && (_jsx("label", { style: styles.label, children: label })), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClear, style: styles.clearButton, title: "Reset to default", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.modeGroup, children: modeConfig.map(({ mode, icon: Icon, label: modeLabel, title }) => {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    label && /*#__PURE__*/ _jsx("label", {
+                        style: styles.label,
+                        children: label
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        style: styles.clearButton,
+                        title: "Reset to default",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.modeGroup,
+                children: modeConfig.map(({ mode, icon: Icon, label: modeLabel, title })=>{
                     const isActive = currentValue.mode === mode;
-                    return (_jsxs("button", { type: "button", onClick: () => handleModeChange(mode), disabled: readOnly, style: isActive ? styles.modeButtonActive : styles.modeButton, title: title, children: [_jsx(Icon, { style: { width: '14px', height: '14px' } }), modeLabel] }, mode));
-                }) }), currentValue.mode !== 'full' && (_jsxs("div", { style: styles.controlsPanel, children: [_jsxs("div", { style: styles.presetGroup, children: [_jsx("label", { style: styles.sectionLabel, children: "Presets" }), _jsx("div", { style: styles.presetButtons, children: WIDTH_PRESETS.map((preset) => {
+                    return /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>handleModeChange(mode),
+                        disabled: readOnly,
+                        style: isActive ? styles.modeButtonActive : styles.modeButton,
+                        title: title,
+                        children: [
+                            /*#__PURE__*/ _jsx(Icon, {
+                                style: {
+                                    width: '14px',
+                                    height: '14px'
+                                }
+                            }),
+                            modeLabel
+                        ]
+                    }, mode);
+                })
+            }),
+            currentValue.mode !== 'full' && /*#__PURE__*/ _jsxs("div", {
+                style: styles.controlsPanel,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.presetGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.sectionLabel,
+                                children: "Presets"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.presetButtons,
+                                children: WIDTH_PRESETS.map((preset)=>{
                                     const isActive = currentValue.maxWidth === preset.value && currentValue.unit === 'px';
-                                    return (_jsx("button", { type: "button", onClick: () => handlePresetSelect(preset.value), disabled: readOnly, style: isActive ? styles.presetButtonActive : styles.presetButton, children: preset.label }, preset.value));
-                                }) })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.sectionLabel, children: "Max Width" }), _jsxs("div", { style: styles.inputRow, children: [_jsx("input", { type: "number", min: 0, value: currentValue.maxWidth, onChange: (e) => handleMaxWidthChange(parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input }), _jsx("div", { style: styles.unitGroup, children: ['px', '%', 'rem', 'vw'].map((unit) => {
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handlePresetSelect(preset.value),
+                                        disabled: readOnly,
+                                        style: isActive ? styles.presetButtonActive : styles.presetButton,
+                                        children: preset.label
+                                    }, preset.value);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.inputGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.sectionLabel,
+                                children: "Max Width"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputRow,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.maxWidth,
+                                        onChange: (e)=>handleMaxWidthChange(parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        style: styles.unitGroup,
+                                        children: [
+                                            'px',
+                                            '%',
+                                            'rem',
+                                            'vw'
+                                        ].map((unit)=>{
                                             const isActive = currentValue.unit === unit;
-                                            return (_jsx("button", { type: "button", onClick: () => handleUnitChange(unit), disabled: readOnly, style: isActive ? styles.unitButtonActive : styles.unitButton, children: unit }, unit));
-                                        }) })] })] })] })), _jsxs("div", { style: styles.footer, children: [_jsxs("div", { style: styles.alignGroup, children: [_jsx("label", { style: styles.alignLabel, children: "Align:" }), _jsx("div", { style: styles.alignButtons, children: alignmentConfig.map(({ alignment, icon: Icon, title }) => {
+                                            return /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>handleUnitChange(unit),
+                                                disabled: readOnly,
+                                                style: isActive ? styles.unitButtonActive : styles.unitButton,
+                                                children: unit
+                                            }, unit);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.footer,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.alignGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.alignLabel,
+                                children: "Align:"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.alignButtons,
+                                children: alignmentConfig.map(({ alignment, icon: Icon, title })=>{
                                     const isActive = currentValue.alignment === alignment;
                                     const isDisabled = readOnly || currentValue.mode === 'full';
-                                    return (_jsx("button", { type: "button", onClick: () => handleAlignmentChange(alignment), disabled: isDisabled, style: {
-                                            ...(isActive ? styles.alignButtonActive : styles.alignButton),
-                                            ...(isDisabled ? styles.alignButtonDisabled : {}),
-                                        }, title: title, children: _jsx(Icon, { style: { width: '14px', height: '14px' } }) }, alignment));
-                                }) })] }), _jsx("span", { style: styles.summary, children: currentValue.mode === 'full'
-                            ? '100%'
-                            : `${currentValue.maxWidth}${currentValue.unit}` })] })] }));
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleAlignmentChange(alignment),
+                                        disabled: isDisabled,
+                                        style: {
+                                            ...isActive ? styles.alignButtonActive : styles.alignButton,
+                                            ...isDisabled ? styles.alignButtonDisabled : {}
+                                        },
+                                        title: title,
+                                        children: /*#__PURE__*/ _jsx(Icon, {
+                                            style: {
+                                                width: '14px',
+                                                height: '14px'
+                                            }
+                                        })
+                                    }, alignment);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        style: styles.summary,
+                        children: currentValue.mode === 'full' ? '100%' : `${currentValue.maxWidth}${currentValue.unit}`
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const WidthField = memo(WidthFieldInner);
+export const WidthField = /*#__PURE__*/ memo(WidthFieldInner);
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for width control
- */
-export function createWidthField(config) {
+ */ export function createWidthField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(WidthField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(WidthField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly
+            })
     };
 }
+
 //# sourceMappingURL=WidthField.js.map

package/dist/fields/WidthField.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidthField.js","sourceRoot":"","sources":["../../src/fields/WidthField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/WidthField.tsx"],"sourcesContent":["'use client'\n\n/**\n * WidthField - Custom Puck field for flexible width control\n *\n * This component provides:\n * - Width mode selector (Full, Contained, Custom)\n * - Custom max-width input with unit selector (px, %, rem, vw)\n * - Content alignment (left, center, right)\n * - Preset quick-select buttons for common widths\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport {\n  X,\n  AlignLeft,\n  AlignCenter,\n  AlignRight,\n  MoveHorizontal,\n  Container,\n  SlidersHorizontal,\n} from 'lucide-react'\nimport type { WidthValue } from './shared.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype WidthUnit = 'px' | 'rem' | '%' | 'vw'\ntype WidthMode = 'full' | 'contained' | 'custom'\ntype ContentAlignment = 'left' | 'center' | 'right'\n\ninterface WidthFieldProps {\n  value: WidthValue | null\n  onChange: (value: WidthValue | null) => void\n  label?: string\n  readOnly?: boolean\n}\n\n// =============================================================================\n// Default Value\n// =============================================================================\n\nconst DEFAULT_VALUE: WidthValue = {\n  mode: 'contained',\n  maxWidth: 1200,\n  unit: 'px',\n  alignment: 'center',\n}\n\n// =============================================================================\n// Preset Widths\n// =============================================================================\n\nconst WIDTH_PRESETS = [\n  { label: 'Narrow', value: 680 },\n  { label: 'Medium', value: 960 },\n  { label: 'Wide', value: 1200 },\n  { label: 'XL', value: 1440 },\n]\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  modeGroup: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n  } as CSSProperties,\n  modeButton: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '4px',\n    padding: '4px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  modeButtonActive: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '4px',\n    padding: '4px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  controlsPanel: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n    padding: '12px',\n    backgroundColor: 'var(--theme-elevation-50)',\n    borderRadius: '6px',\n  } as CSSProperties,\n  sectionLabel: {\n    fontSize: '10px',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  presetGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '6px',\n  } as CSSProperties,\n  presetButtons: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n  } as CSSProperties,\n  presetButton: {\n    height: '28px',\n    padding: '0 12px',\n    fontSize: '12px',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  presetButtonActive: {\n    height: '28px',\n    padding: '0 12px',\n    fontSize: '12px',\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  inputGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '6px',\n  } as CSSProperties,\n  inputRow: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  input: {\n    flex: 1,\n    minWidth: '80px',\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  unitGroup: {\n    display: 'flex',\n    flexShrink: 0,\n    gap: '4px',\n  } as CSSProperties,\n  unitButton: {\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  unitButtonActive: {\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  footer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  alignGroup: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as CSSProperties,\n  alignLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    flexShrink: 0,\n  } as CSSProperties,\n  alignButtons: {\n    display: 'flex',\n    gap: '4px',\n  } as CSSProperties,\n  alignButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  alignButtonActive: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  alignButtonDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n  summary: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    fontFamily: 'monospace',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// WidthField Component\n// =============================================================================\n\nfunction WidthFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n}: WidthFieldProps) {\n  const currentValue = value || DEFAULT_VALUE\n\n  const handleModeChange = useCallback((mode: WidthMode) => {\n    if (mode === 'full') {\n      onChange({\n        ...currentValue,\n        mode,\n        alignment: 'center',\n      })\n    } else {\n      onChange({\n        ...currentValue,\n        mode,\n      })\n    }\n  }, [currentValue, onChange])\n\n  const handleMaxWidthChange = useCallback((maxWidth: number) => {\n    onChange({\n      ...currentValue,\n      maxWidth,\n    })\n  }, [currentValue, onChange])\n\n  const handleUnitChange = useCallback((unit: WidthUnit) => {\n    onChange({\n      ...currentValue,\n      unit,\n    })\n  }, [currentValue, onChange])\n\n  const handleAlignmentChange = useCallback((alignment: ContentAlignment) => {\n    onChange({\n      ...currentValue,\n      alignment,\n    })\n  }, [currentValue, onChange])\n\n  const handlePresetSelect = useCallback((presetValue: number) => {\n    onChange({\n      ...currentValue,\n      mode: 'contained',\n      maxWidth: presetValue,\n      unit: 'px',\n    })\n  }, [currentValue, onChange])\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const modeConfig = [\n    { mode: 'full' as WidthMode, icon: MoveHorizontal, label: 'Full', title: 'Full width (100%)' },\n    { mode: 'contained' as WidthMode, icon: Container, label: 'Contain', title: 'Contained (centered with max-width)' },\n    { mode: 'custom' as WidthMode, icon: SlidersHorizontal, label: 'Custom', title: 'Custom width settings' },\n  ]\n\n  const alignmentConfig = [\n    { alignment: 'left' as ContentAlignment, icon: AlignLeft, title: 'Align left' },\n    { alignment: 'center' as ContentAlignment, icon: AlignCenter, title: 'Align center' },\n    { alignment: 'right' as ContentAlignment, icon: AlignRight, title: 'Align right' },\n  ]\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header with label and clear */}\n      <div style={styles.header}>\n        {label && (\n          <label style={styles.label}>{label}</label>\n        )}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Reset to default\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Width Mode Selector */}\n      <div style={styles.modeGroup}>\n        {modeConfig.map(({ mode, icon: Icon, label: modeLabel, title }) => {\n          const isActive = currentValue.mode === mode\n          return (\n            <button\n              key={mode}\n              type=\"button\"\n              onClick={() => handleModeChange(mode)}\n              disabled={readOnly}\n              style={isActive ? styles.modeButtonActive : styles.modeButton}\n              title={title}\n            >\n              <Icon style={{ width: '14px', height: '14px' }} />\n              {modeLabel}\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Max Width Controls */}\n      {currentValue.mode !== 'full' && (\n        <div style={styles.controlsPanel as CSSProperties}>\n          {/* Preset Quick Selects */}\n          <div style={styles.presetGroup as CSSProperties}>\n            <label style={styles.sectionLabel as CSSProperties}>Presets</label>\n            <div style={styles.presetButtons}>\n              {WIDTH_PRESETS.map((preset) => {\n                const isActive = currentValue.maxWidth === preset.value && currentValue.unit === 'px'\n                return (\n                  <button\n                    key={preset.value}\n                    type=\"button\"\n                    onClick={() => handlePresetSelect(preset.value)}\n                    disabled={readOnly}\n                    style={isActive ? styles.presetButtonActive : styles.presetButton}\n                  >\n                    {preset.label}\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n\n          {/* Custom Width Input */}\n          <div style={styles.inputGroup as CSSProperties}>\n            <label style={styles.sectionLabel as CSSProperties}>Max Width</label>\n            <div style={styles.inputRow}>\n              <input\n                type=\"number\"\n                min={0}\n                value={currentValue.maxWidth}\n                onChange={(e) => handleMaxWidthChange(parseInt(e.target.value, 10) || 0)}\n                disabled={readOnly}\n                style={styles.input}\n              />\n              <div style={styles.unitGroup}>\n                {(['px', '%', 'rem', 'vw'] as WidthUnit[]).map((unit) => {\n                  const isActive = currentValue.unit === unit\n                  return (\n                    <button\n                      key={unit}\n                      type=\"button\"\n                      onClick={() => handleUnitChange(unit)}\n                      disabled={readOnly}\n                      style={isActive ? styles.unitButtonActive : styles.unitButton}\n                    >\n                      {unit}\n                    </button>\n                  )\n                })}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Alignment Controls */}\n      <div style={styles.footer}>\n        <div style={styles.alignGroup}>\n          <label style={styles.alignLabel}>Align:</label>\n          <div style={styles.alignButtons}>\n            {alignmentConfig.map(({ alignment, icon: Icon, title }) => {\n              const isActive = currentValue.alignment === alignment\n              const isDisabled = readOnly || currentValue.mode === 'full'\n              return (\n                <button\n                  key={alignment}\n                  type=\"button\"\n                  onClick={() => handleAlignmentChange(alignment)}\n                  disabled={isDisabled}\n                  style={{\n                    ...(isActive ? styles.alignButtonActive : styles.alignButton),\n                    ...(isDisabled ? styles.alignButtonDisabled : {}),\n                  }}\n                  title={title}\n                >\n                  <Icon style={{ width: '14px', height: '14px' }} />\n                </button>\n              )\n            })}\n          </div>\n        </div>\n        {/* Current value summary */}\n        <span style={styles.summary}>\n          {currentValue.mode === 'full'\n            ? '100%'\n            : `${currentValue.maxWidth}${currentValue.unit}`\n          }\n        </span>\n      </div>\n    </div>\n  )\n}\n\nexport const WidthField = memo(WidthFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\n/**\n * Creates a Puck field configuration for width control\n */\nexport function createWidthField(config: {\n  label?: string\n}): CustomField<WidthValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <WidthField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","X","AlignLeft","AlignCenter","AlignRight","MoveHorizontal","Container","SlidersHorizontal","DEFAULT_VALUE","mode","maxWidth","unit","alignment","WIDTH_PRESETS","label","value","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","fontSize","fontWeight","color","clearButton","width","height","padding","border","borderRadius","backgroundColor","cursor","modeGroup","flexWrap","modeButton","modeButtonActive","controlsPanel","sectionLabel","textTransform","letterSpacing","presetGroup","presetButtons","presetButton","presetButtonActive","inputGroup","inputRow","input","flex","minWidth","fontFamily","unitGroup","flexShrink","unitButton","unitButtonActive","footer","alignGroup","alignLabel","alignButtons","alignButton","alignButtonActive","alignButtonDisabled","opacity","summary","WidthFieldInner","onChange","readOnly","currentValue","handleModeChange","handleMaxWidthChange","handleUnitChange","handleAlignmentChange","handlePresetSelect","presetValue","handleClear","modeConfig","icon","title","alignmentConfig","div","className","style","button","type","onClick","map","Icon","modeLabel","isActive","disabled","preset","min","e","parseInt","target","isDisabled","span","WidthField","createWidthField","config","render"],"mappings":"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"}