@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/TransformField.js

@@ -11,10 +11,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - Translate X/Y inputs with unit selector
  * - Transform origin 3x3 grid selector
  * - Collapsible 3D section (perspective, rotateX, rotateY)
- */
-import { useCallback, memo, useState } from 'react';
-import { Link, Unlink, RotateCw, Maximize2, X, ChevronDown, ChevronRight, Box, } from 'lucide-react';
-import { DEFAULT_TRANSFORM, transformValueToCSS } from './shared';
+ */ import React, { useCallback, memo, useState } from 'react';
+import { Link, Unlink, RotateCw, Maximize2, X, ChevronDown, ChevronRight, Box } from 'lucide-react';
+import { DEFAULT_TRANSFORM, transformValueToCSS } from './shared.js';
 // =============================================================================
 // Styles
 // =============================================================================
@@ -22,17 +21,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '16px',
+        gap: '16px'
     },
     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',
@@ -45,7 +44,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     preview: {
         height: '96px',
@@ -55,7 +54,7 @@ const styles = {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     previewBox: {
         width: '48px',
@@ -68,7 +67,7 @@ const styles = {
         color: 'var(--theme-bg)',
         fontSize: '12px',
         fontWeight: 500,
-        transition: 'transform 0.2s',
+        transition: 'transform 0.2s'
     },
     section: {
         display: 'flex',
@@ -76,22 +75,22 @@ const styles = {
         gap: '12px',
         padding: '12px',
         backgroundColor: 'var(--theme-elevation-50)',
-        borderRadius: '6px',
+        borderRadius: '6px'
     },
     sectionHeader: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     sectionTitle: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     sectionLabel: {
         fontSize: '12px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-700)',
+        color: 'var(--theme-elevation-700)'
     },
     linkButton: {
         display: 'flex',
@@ -104,7 +103,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     linkButtonActive: {
         display: 'flex',
@@ -117,46 +116,46 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     grid: {
         display: 'grid',
         gridTemplateColumns: '1fr 1fr',
-        gap: '12px',
+        gap: '12px'
     },
     sliderGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '4px',
+        gap: '4px'
     },
     sliderHeader: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     sliderLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     sliderValue: {
         fontSize: '12px',
         fontFamily: 'monospace',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     slider: {
         width: '100%',
         height: '6px',
         accentColor: 'var(--theme-elevation-800)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     translateRow: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     select: {
         height: '28px',
@@ -167,18 +166,18 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-input-bg)',
         color: 'var(--theme-elevation-800)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     inputGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '4px',
+        gap: '4px'
     },
     inputLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     input: {
         height: '32px',
@@ -188,13 +187,13 @@ 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)'
     },
     originGrid: {
         display: 'grid',
         gridTemplateColumns: 'repeat(3, 1fr)',
         gap: '4px',
-        width: 'fit-content',
+        width: 'fit-content'
     },
     originButton: {
         width: '24px',
@@ -206,7 +205,7 @@ const styles = {
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'center'
     },
     originButtonActive: {
         width: '24px',
@@ -218,34 +217,34 @@ const styles = {
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'center'
     },
     originDot: {
         width: '8px',
         height: '8px',
         borderRadius: '50%',
-        backgroundColor: 'var(--theme-elevation-400)',
+        backgroundColor: 'var(--theme-elevation-400)'
     },
     originDotActive: {
         width: '8px',
         height: '8px',
         borderRadius: '50%',
-        backgroundColor: 'var(--theme-bg)',
+        backgroundColor: 'var(--theme-bg)'
     },
     originRow: {
         display: 'flex',
         alignItems: 'center',
-        gap: '16px',
+        gap: '16px'
     },
     originLabel: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        textTransform: 'capitalize',
+        textTransform: 'capitalize'
     },
     collapsible: {
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '6px',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     collapsibleHeader: {
         width: '100%',
@@ -255,132 +254,567 @@ const styles = {
         padding: '12px',
         border: 'none',
         backgroundColor: 'var(--theme-elevation-50)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     collapsibleTitle: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     collapsibleContent: {
         padding: '12px',
         display: 'flex',
         flexDirection: 'column',
         gap: '12px',
-        borderTop: '1px solid var(--theme-elevation-150)',
+        borderTop: '1px solid var(--theme-elevation-150)'
     },
     checkboxRow: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     checkbox: {
         width: '16px',
         height: '16px',
         accentColor: 'var(--theme-elevation-800)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     checkboxLabel: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
-    },
+        cursor: 'pointer'
+    }
 };
 const ORIGIN_POSITIONS = [
-    'top-left', 'top', 'top-right',
-    'left', 'center', 'right',
-    'bottom-left', 'bottom', 'bottom-right',
+    'top-left',
+    'top',
+    'top-right',
+    'left',
+    'center',
+    'right',
+    'bottom-left',
+    'bottom',
+    'bottom-right'
 ];
 function OriginGrid({ value, onChange, disabled }) {
-    return (_jsx("div", { style: styles.originGrid, children: ORIGIN_POSITIONS.map((origin) => {
+    return /*#__PURE__*/ _jsx("div", {
+        style: styles.originGrid,
+        children: ORIGIN_POSITIONS.map((origin)=>{
             const isActive = value === origin;
-            return (_jsx("button", { type: "button", onClick: () => onChange(origin), disabled: disabled, style: {
-                    ...(isActive ? styles.originButtonActive : styles.originButton),
-                    ...(disabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}),
-                }, title: origin.replace('-', ' '), children: _jsx("span", { style: isActive ? styles.originDotActive : styles.originDot }) }, origin));
-        }) }));
+            return /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>onChange(origin),
+                disabled: disabled,
+                style: {
+                    ...isActive ? styles.originButtonActive : styles.originButton,
+                    ...disabled ? {
+                        opacity: 0.5,
+                        cursor: 'not-allowed'
+                    } : {}
+                },
+                title: origin.replace('-', ' '),
+                children: /*#__PURE__*/ _jsx("span", {
+                    style: isActive ? styles.originDotActive : styles.originDot
+                })
+            }, origin);
+        })
+    });
 }
-function SliderInput({ value, onChange, min, max, step = 1, disabled, label, unit = '', }) {
-    return (_jsxs("div", { style: styles.sliderGroup, children: [label && (_jsxs("div", { style: styles.sliderHeader, children: [_jsx("label", { style: styles.sliderLabel, children: label }), _jsxs("span", { style: styles.sliderValue, children: [value, unit] })] })), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange(Number(e.target.value)), disabled: disabled, style: {
+function SliderInput({ value, onChange, min, max, step = 1, disabled, label, unit = '' }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        style: styles.sliderGroup,
+        children: [
+            label && /*#__PURE__*/ _jsxs("div", {
+                style: styles.sliderHeader,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: styles.sliderLabel,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        style: styles.sliderValue,
+                        children: [
+                            value,
+                            unit
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                type: "range",
+                min: min,
+                max: max,
+                step: step,
+                value: value,
+                onChange: (e)=>onChange(Number(e.target.value)),
+                disabled: disabled,
+                style: {
                     ...styles.slider,
-                    ...(disabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}),
-                } })] }));
+                    ...disabled ? {
+                        opacity: 0.5,
+                        cursor: 'not-allowed'
+                    } : {}
+                }
+            })
+        ]
+    });
 }
 // =============================================================================
 // TransformField Component
 // =============================================================================
-function TransformFieldInner({ value, onChange, label, readOnly, }) {
+function TransformFieldInner({ value, onChange, label, readOnly }) {
     const [show3D, setShow3D] = useState(value?.enable3D ?? false);
     // Use default if no value
     const currentValue = value || DEFAULT_TRANSFORM;
     // Handle individual value changes
-    const handleChange = useCallback((key, newValue) => {
+    const handleChange = useCallback((key, newValue)=>{
         onChange({
             ...currentValue,
-            [key]: newValue,
+            [key]: newValue
         });
-    }, [currentValue, onChange]);
+    }, [
+        currentValue,
+        onChange
+    ]);
     // Handle scale change with locking
-    const handleScaleChange = useCallback((axis, newValue) => {
+    const handleScaleChange = useCallback((axis, newValue)=>{
         if (currentValue.scaleLocked) {
             onChange({
                 ...currentValue,
                 scaleX: newValue,
-                scaleY: newValue,
+                scaleY: newValue
             });
-        }
-        else {
+        } else {
             onChange({
                 ...currentValue,
-                [axis]: newValue,
+                [axis]: newValue
             });
         }
-    }, [currentValue, onChange]);
+    }, [
+        currentValue,
+        onChange
+    ]);
     // Handle scale lock toggle
-    const handleScaleLockToggle = useCallback(() => {
+    const handleScaleLockToggle = useCallback(()=>{
         if (!currentValue.scaleLocked) {
             // When locking, sync both to X value
             onChange({
                 ...currentValue,
                 scaleLocked: true,
-                scaleY: currentValue.scaleX,
+                scaleY: currentValue.scaleX
             });
-        }
-        else {
+        } else {
             onChange({
                 ...currentValue,
-                scaleLocked: false,
+                scaleLocked: false
             });
         }
-    }, [currentValue, onChange]);
+    }, [
+        currentValue,
+        onChange
+    ]);
     // Handle 3D toggle
-    const handle3DToggle = useCallback((enabled) => {
+    const handle3DToggle = useCallback((enabled)=>{
         setShow3D(enabled);
         onChange({
             ...currentValue,
-            enable3D: enabled,
+            enable3D: enabled
         });
-    }, [currentValue, onChange]);
+    }, [
+        currentValue,
+        onChange
+    ]);
     // Handle clear
-    const handleClear = useCallback(() => {
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     // Get preview styles
     const previewStyles = transformValueToCSS(currentValue) || {};
-    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 transform", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.preview, children: _jsx("div", { style: { ...styles.previewBox, ...previewStyles }, children: "Aa" }) }), _jsxs("div", { style: styles.section, children: [_jsxs("div", { style: styles.sectionTitle, children: [_jsx(RotateCw, { style: { width: '16px', height: '16px', color: 'var(--theme-elevation-500)' } }), _jsx("label", { style: styles.sectionLabel, children: "Rotate" })] }), _jsx(SliderInput, { value: currentValue.rotate, onChange: (v) => handleChange('rotate', v), min: -360, max: 360, disabled: readOnly, unit: "deg" })] }), _jsxs("div", { style: styles.section, children: [_jsxs("div", { style: styles.sectionHeader, children: [_jsxs("div", { style: styles.sectionTitle, children: [_jsx(Maximize2, { style: { width: '16px', height: '16px', color: 'var(--theme-elevation-500)' } }), _jsx("label", { style: styles.sectionLabel, children: "Scale" })] }), !readOnly && (_jsx("button", { type: "button", onClick: handleScaleLockToggle, style: currentValue.scaleLocked ? styles.linkButtonActive : styles.linkButton, title: currentValue.scaleLocked ? 'Click to unlink X and Y scale' : 'Click to link X and Y scale', children: currentValue.scaleLocked ? (_jsx(Link, { style: { width: '12px', height: '12px' } })) : (_jsx(Unlink, { style: { width: '12px', height: '12px' } })) }))] }), _jsxs("div", { style: currentValue.scaleLocked ? {} : styles.grid, children: [_jsx(SliderInput, { label: currentValue.scaleLocked ? 'Scale' : 'Scale X', value: currentValue.scaleX, onChange: (v) => handleScaleChange('scaleX', v), min: 0.1, max: 3, step: 0.1, disabled: readOnly }), !currentValue.scaleLocked && (_jsx(SliderInput, { label: "Scale Y", value: currentValue.scaleY, onChange: (v) => handleScaleChange('scaleY', v), min: 0.1, max: 3, step: 0.1, disabled: readOnly }))] })] }), _jsxs("div", { style: styles.section, children: [_jsx("label", { style: styles.sectionLabel, children: "Skew" }), _jsxs("div", { style: styles.grid, children: [_jsx(SliderInput, { label: "Skew X", value: currentValue.skewX, onChange: (v) => handleChange('skewX', v), min: -45, max: 45, disabled: readOnly, unit: "deg" }), _jsx(SliderInput, { label: "Skew Y", value: currentValue.skewY, onChange: (v) => handleChange('skewY', v), min: -45, max: 45, disabled: readOnly, unit: "deg" })] })] }), _jsxs("div", { style: styles.section, children: [_jsxs("div", { style: styles.translateRow, children: [_jsx("label", { style: styles.sectionLabel, children: "Translate" }), _jsxs("select", { value: currentValue.translateUnit, onChange: (e) => handleChange('translateUnit', e.target.value), disabled: readOnly, style: styles.select, children: [_jsx("option", { value: "px", children: "px" }), _jsx("option", { value: "rem", children: "rem" }), _jsx("option", { value: "%", children: "%" })] })] }), _jsxs("div", { style: styles.grid, children: [_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "X" }), _jsx("input", { type: "number", value: currentValue.translateX, onChange: (e) => handleChange('translateX', parseFloat(e.target.value) || 0), disabled: readOnly, style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Y" }), _jsx("input", { type: "number", value: currentValue.translateY, onChange: (e) => handleChange('translateY', parseFloat(e.target.value) || 0), disabled: readOnly, style: styles.input })] })] })] }), _jsxs("div", { style: styles.section, children: [_jsx("label", { style: styles.sectionLabel, children: "Transform Origin" }), _jsxs("div", { style: styles.originRow, children: [_jsx(OriginGrid, { value: currentValue.origin, onChange: (v) => handleChange('origin', v), disabled: readOnly }), _jsx("span", { style: styles.originLabel, children: currentValue.origin.replace('-', ' ') })] })] }), _jsxs("div", { style: styles.collapsible, children: [_jsxs("button", { type: "button", onClick: () => setShow3D(!show3D), style: styles.collapsibleHeader, children: [_jsxs("div", { style: styles.collapsibleTitle, children: [_jsx(Box, { style: { width: '16px', height: '16px', color: 'var(--theme-elevation-500)' } }), _jsx("label", { style: styles.sectionLabel, children: "3D Transforms" })] }), show3D ? (_jsx(ChevronDown, { style: { width: '16px', height: '16px', color: 'var(--theme-elevation-500)' } })) : (_jsx(ChevronRight, { style: { width: '16px', height: '16px', color: 'var(--theme-elevation-500)' } }))] }), show3D && (_jsxs("div", { style: styles.collapsibleContent, children: [_jsxs("div", { style: styles.checkboxRow, children: [_jsx("input", { type: "checkbox", id: "enable3d", checked: currentValue.enable3D, onChange: (e) => handle3DToggle(e.target.checked), disabled: readOnly, style: styles.checkbox }), _jsx("label", { htmlFor: "enable3d", style: styles.checkboxLabel, children: "Enable 3D Transforms" })] }), currentValue.enable3D && (_jsxs(_Fragment, { children: [_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Perspective (px)" }), _jsx("input", { type: "number", min: 100, max: 2000, value: currentValue.perspective ?? 1000, onChange: (e) => handleChange('perspective', parseInt(e.target.value, 10) || 1000), disabled: readOnly, style: styles.input })] }), _jsxs("div", { style: styles.grid, children: [_jsx(SliderInput, { label: "Rotate X", value: currentValue.rotateX ?? 0, onChange: (v) => handleChange('rotateX', v), min: -180, max: 180, disabled: readOnly, unit: "deg" }), _jsx(SliderInput, { label: "Rotate Y", value: currentValue.rotateY ?? 0, onChange: (v) => handleChange('rotateY', v), min: -180, max: 180, disabled: readOnly, unit: "deg" })] })] }))] }))] })] }));
+    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 transform",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.preview,
+                children: /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        ...styles.previewBox,
+                        ...previewStyles
+                    },
+                    children: "Aa"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.section,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.sectionTitle,
+                        children: [
+                            /*#__PURE__*/ _jsx(RotateCw, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px',
+                                    color: 'var(--theme-elevation-500)'
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.sectionLabel,
+                                children: "Rotate"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(SliderInput, {
+                        value: currentValue.rotate,
+                        onChange: (v)=>handleChange('rotate', v),
+                        min: -360,
+                        max: 360,
+                        disabled: readOnly,
+                        unit: "deg"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.section,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.sectionHeader,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.sectionTitle,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Maximize2, {
+                                        style: {
+                                            width: '16px',
+                                            height: '16px',
+                                            color: 'var(--theme-elevation-500)'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.sectionLabel,
+                                        children: "Scale"
+                                    })
+                                ]
+                            }),
+                            !readOnly && /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleScaleLockToggle,
+                                style: currentValue.scaleLocked ? styles.linkButtonActive : styles.linkButton,
+                                title: currentValue.scaleLocked ? 'Click to unlink X and Y scale' : 'Click to link X and Y scale',
+                                children: currentValue.scaleLocked ? /*#__PURE__*/ _jsx(Link, {
+                                    style: {
+                                        width: '12px',
+                                        height: '12px'
+                                    }
+                                }) : /*#__PURE__*/ _jsx(Unlink, {
+                                    style: {
+                                        width: '12px',
+                                        height: '12px'
+                                    }
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: currentValue.scaleLocked ? {} : styles.grid,
+                        children: [
+                            /*#__PURE__*/ _jsx(SliderInput, {
+                                label: currentValue.scaleLocked ? 'Scale' : 'Scale X',
+                                value: currentValue.scaleX,
+                                onChange: (v)=>handleScaleChange('scaleX', v),
+                                min: 0.1,
+                                max: 3,
+                                step: 0.1,
+                                disabled: readOnly
+                            }),
+                            !currentValue.scaleLocked && /*#__PURE__*/ _jsx(SliderInput, {
+                                label: "Scale Y",
+                                value: currentValue.scaleY,
+                                onChange: (v)=>handleScaleChange('scaleY', v),
+                                min: 0.1,
+                                max: 3,
+                                step: 0.1,
+                                disabled: readOnly
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.section,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: styles.sectionLabel,
+                        children: "Skew"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.grid,
+                        children: [
+                            /*#__PURE__*/ _jsx(SliderInput, {
+                                label: "Skew X",
+                                value: currentValue.skewX,
+                                onChange: (v)=>handleChange('skewX', v),
+                                min: -45,
+                                max: 45,
+                                disabled: readOnly,
+                                unit: "deg"
+                            }),
+                            /*#__PURE__*/ _jsx(SliderInput, {
+                                label: "Skew Y",
+                                value: currentValue.skewY,
+                                onChange: (v)=>handleChange('skewY', v),
+                                min: -45,
+                                max: 45,
+                                disabled: readOnly,
+                                unit: "deg"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.section,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.translateRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.sectionLabel,
+                                children: "Translate"
+                            }),
+                            /*#__PURE__*/ _jsxs("select", {
+                                value: currentValue.translateUnit,
+                                onChange: (e)=>handleChange('translateUnit', e.target.value),
+                                disabled: readOnly,
+                                style: styles.select,
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "px",
+                                        children: "px"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "rem",
+                                        children: "rem"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "%",
+                                        children: "%"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.grid,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "X"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        value: currentValue.translateX,
+                                        onChange: (e)=>handleChange('translateX', parseFloat(e.target.value) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Y"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        value: currentValue.translateY,
+                                        onChange: (e)=>handleChange('translateY', parseFloat(e.target.value) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.section,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: styles.sectionLabel,
+                        children: "Transform Origin"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.originRow,
+                        children: [
+                            /*#__PURE__*/ _jsx(OriginGrid, {
+                                value: currentValue.origin,
+                                onChange: (v)=>handleChange('origin', v),
+                                disabled: readOnly
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                style: styles.originLabel,
+                                children: currentValue.origin.replace('-', ' ')
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.collapsible,
+                children: [
+                    /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>setShow3D(!show3D),
+                        style: styles.collapsibleHeader,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.collapsibleTitle,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        style: {
+                                            width: '16px',
+                                            height: '16px',
+                                            color: 'var(--theme-elevation-500)'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.sectionLabel,
+                                        children: "3D Transforms"
+                                    })
+                                ]
+                            }),
+                            show3D ? /*#__PURE__*/ _jsx(ChevronDown, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px',
+                                    color: 'var(--theme-elevation-500)'
+                                }
+                            }) : /*#__PURE__*/ _jsx(ChevronRight, {
+                                style: {
+                                    width: '16px',
+                                    height: '16px',
+                                    color: 'var(--theme-elevation-500)'
+                                }
+                            })
+                        ]
+                    }),
+                    show3D && /*#__PURE__*/ _jsxs("div", {
+                        style: styles.collapsibleContent,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.checkboxRow,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "checkbox",
+                                        id: "enable3d",
+                                        checked: currentValue.enable3D,
+                                        onChange: (e)=>handle3DToggle(e.target.checked),
+                                        disabled: readOnly,
+                                        style: styles.checkbox
+                                    }),
+                                    /*#__PURE__*/ _jsx("label", {
+                                        htmlFor: "enable3d",
+                                        style: styles.checkboxLabel,
+                                        children: "Enable 3D Transforms"
+                                    })
+                                ]
+                            }),
+                            currentValue.enable3D && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: styles.inputGroup,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("label", {
+                                                style: styles.inputLabel,
+                                                children: "Perspective (px)"
+                                            }),
+                                            /*#__PURE__*/ _jsx("input", {
+                                                type: "number",
+                                                min: 100,
+                                                max: 2000,
+                                                value: currentValue.perspective ?? 1000,
+                                                onChange: (e)=>handleChange('perspective', parseInt(e.target.value, 10) || 1000),
+                                                disabled: readOnly,
+                                                style: styles.input
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: styles.grid,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(SliderInput, {
+                                                label: "Rotate X",
+                                                value: currentValue.rotateX ?? 0,
+                                                onChange: (v)=>handleChange('rotateX', v),
+                                                min: -180,
+                                                max: 180,
+                                                disabled: readOnly,
+                                                unit: "deg"
+                                            }),
+                                            /*#__PURE__*/ _jsx(SliderInput, {
+                                                label: "Rotate Y",
+                                                value: currentValue.rotateY ?? 0,
+                                                onChange: (v)=>handleChange('rotateY', v),
+                                                min: -180,
+                                                max: 180,
+                                                disabled: readOnly,
+                                                unit: "deg"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const TransformField = memo(TransformFieldInner);
+export const TransformField = /*#__PURE__*/ memo(TransformFieldInner);
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for CSS transforms
- */
-export function createTransformField(config) {
+ */ export function createTransformField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(TransformField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(TransformField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly
+            })
     };
 }
-//# sourceMappingURL=TransformField.js.map