@delmaredigital/payload-puck 0.1.0 → 0.1.1

package/dist/components/index.js

@@ -3,7 +3,7 @@
 
 var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var iconsReact = require('@tabler/icons-react');
+var lucideReact = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -548,7 +548,7 @@ function transformValueToCSS(transform) {
   return Object.keys(style).length > 0 ? style : void 0;
 }
 var BREAKPOINTS = [
-  { key: "base", label: "Base", minWidth: null },
+  { key: "xs", label: "XS", minWidth: null },
   { key: "sm", label: "SM", minWidth: 640 },
   { key: "md", label: "MD", minWidth: 768 },
   { key: "lg", label: "LG", minWidth: 1024 },
@@ -556,7 +556,7 @@ var BREAKPOINTS = [
 ];
 function isResponsiveValue(value) {
   if (!value || typeof value !== "object") return false;
-  return "base" in value;
+  return "xs" in value;
 }
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
@@ -582,7 +582,7 @@ function responsiveValueToCSS(value, converter, uniqueId) {
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
-    if (bp.key === "base") {
+    if (bp.key === "xs") {
       baseStyles = cssProps;
     } else {
       const styleString = cssPropertiesToString(cssProps);
@@ -596,29 +596,50 @@ function responsiveValueToCSS(value, converter, uniqueId) {
   return { baseStyles, mediaQueryCSS: mediaQueries.join("\n") };
 }
 var DEFAULT_VISIBILITY = {
-  base: true
+  xs: true,
+  sm: true,
+  md: true,
+  lg: true,
+  xl: true
 };
 function visibilityValueToCSS(visibility, uniqueId) {
   if (!visibility) return "";
   const mediaQueries = [];
-  if (visibility.base === false) {
-    mediaQueries.push(`.${uniqueId} { display: none; }`);
+  const breakpointWidths = {
+    xs: null,
+    // 0px
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+  };
+  const getNextBreakpointWidth = (bp) => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const index = order.indexOf(bp);
+    if (index === -1 || index === order.length - 1) return null;
+    return breakpointWidths[order[index + 1]];
+  };
+  if (visibility.xs === false) {
+    const nextWidth = getNextBreakpointWidth("xs");
+    if (nextWidth) {
+      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
+    } else {
+      mediaQueries.push(`.${uniqueId} { display: none; }`);
+    }
   }
-  let lastVisibility = visibility.base;
   BREAKPOINTS.slice(1).forEach((bp) => {
-    const bpValue = visibility[bp.key];
-    if (bpValue === void 0) return;
-    if (bpValue !== lastVisibility) {
-      if (bpValue === false) {
+    if (visibility[bp.key] === false) {
+      const minWidth = breakpointWidths[bp.key];
+      const maxWidth = getNextBreakpointWidth(bp.key);
+      if (minWidth && maxWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: none; } }`
+          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
         );
-      } else {
+      } else if (minWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: block; } }`
+          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
         );
       }
-      lastVisibility = bpValue;
     }
   });
   return mediaQueries.join("\n");
@@ -1228,7 +1249,7 @@ function PaddingFieldInner({
             isLinked ? "" : "text-muted-foreground"
           ),
           title: isLinked ? "Click to unlink (set sides individually)" : "Click to link (all sides same value)",
-          children: isLinked ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLinkOff, { className: "h-4 w-4" })
+          children: isLinked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlink, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -1472,7 +1493,7 @@ function ColorPickerFieldInner({
           onClick: handleClear,
           title: "Clear color",
           className: "flex items-center justify-center w-8 h-8 rounded border-none bg-transparent cursor-pointer text-muted-foreground flex-shrink-0 hover:bg-accent hover:text-destructive",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -1584,7 +1605,7 @@ var SelectTrigger = React6__namespace.forwardRef(({ className, children, ...prop
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
@@ -1598,7 +1619,7 @@ var SelectScrollUpButton = React6__namespace.forwardRef(({ className, ...props }
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
@@ -1611,7 +1632,7 @@ var SelectScrollDownButton = React6__namespace.forwardRef(({ className, ...props
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
@@ -1662,7 +1683,7 @@ var SelectItem = React6__namespace.forwardRef(({ className, children, ...props }
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
     ]
   }
@@ -1754,7 +1775,7 @@ function BorderFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Clear border",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -1857,7 +1878,7 @@ function BorderFieldInner({
               currentValue.sides.top && "bg-primary hover:bg-primary/90"
             ),
             title: "Top border",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBorderTop, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1872,7 +1893,7 @@ function BorderFieldInner({
               currentValue.sides.right && "bg-primary hover:bg-primary/90"
             ),
             title: "Right border",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBorderRight, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1887,7 +1908,7 @@ function BorderFieldInner({
               currentValue.sides.bottom && "bg-primary hover:bg-primary/90"
             ),
             title: "Bottom border",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBorderBottom, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1902,7 +1923,7 @@ function BorderFieldInner({
               currentValue.sides.left && "bg-primary hover:bg-primary/90"
             ),
             title: "Left border",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBorderLeft, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" })
           }
         )
       ] }),
@@ -2190,14 +2211,14 @@ function DimensionsFieldInner({
     });
   }, [advancedMode, currentValue, onChange]);
   const modeConfig = [
-    { mode: "full", icon: iconsReact.IconArrowsHorizontal, label: "Full", title: "Full width (100%)" },
-    { mode: "contained", icon: iconsReact.IconContainer, label: "Contain", title: "Contained (centered with max-width)" },
-    { mode: "custom", icon: iconsReact.IconAdjustments, label: "Custom", title: "Custom width settings" }
+    { mode: "full", icon: lucideReact.MoveHorizontal, label: "Full", title: "Full width (100%)" },
+    { mode: "contained", icon: lucideReact.Square, label: "Contain", title: "Contained (centered with max-width)" },
+    { mode: "custom", icon: lucideReact.SlidersHorizontal, label: "Custom", title: "Custom width settings" }
   ];
   const alignmentConfig = [
-    { alignment: "left", icon: iconsReact.IconLayoutAlignLeft, title: "Align left" },
-    { alignment: "center", icon: iconsReact.IconLayoutAlignCenter, title: "Align center" },
-    { alignment: "right", icon: iconsReact.IconLayoutAlignRight, title: "Align right" }
+    { alignment: "left", icon: lucideReact.AlignStartHorizontal, title: "Align left" },
+    { alignment: "center", icon: lucideReact.AlignCenterHorizontal, title: "Align center" },
+    { alignment: "right", icon: lucideReact.AlignEndHorizontal, title: "Align right" }
   ];
   const showWidthControls = currentValue.mode !== "full";
   showHeightControls && (advancedMode || currentValue.minHeight?.enabled || currentValue.maxHeight?.enabled);
@@ -2213,7 +2234,7 @@ function DimensionsFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -2416,10 +2437,10 @@ function DimensionsFieldInner({
         disabled: readOnly,
         className: "w-full text-xs text-muted-foreground hover:text-foreground",
         children: advancedMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronUp, { className: "h-3.5 w-3.5 mr-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3.5 w-3.5 mr-1" }),
           "Hide Advanced"
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "h-3.5 w-3.5 mr-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 mr-1" }),
           "Show Advanced"
         ] })
       }
@@ -2532,7 +2553,7 @@ function MarginFieldInner({
             isLinked ? "" : "text-muted-foreground"
           ),
           title: isLinked ? "Click to unlink (set sides individually)" : "Click to link (all sides same value)",
-          children: isLinked ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLinkOff, { className: "h-4 w-4" })
+          children: isLinked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlink, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -2601,7 +2622,7 @@ function ResetFieldInner({
       disabled,
       className: "w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 gap-1.5",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconRefresh, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-3.5 w-3.5" }),
         label
       ]
     }
@@ -2698,7 +2719,7 @@ var DialogContent = React6__namespace.forwardRef(({ className, children, ...prop
       children: [
         children,
         /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
@@ -2721,7 +2742,7 @@ var DialogContentFullscreen = React6__namespace.forwardRef(({ className, childre
         /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "sr-only", children: accessibleTitle }),
         children,
         !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
@@ -2995,10 +3016,10 @@ function MediaFieldInner({
               onClick: handleRemove,
               className: "absolute -top-2 -right-2 p-1 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity",
               "aria-label": "Remove image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
             }
           )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-24 bg-muted rounded-md border border-dashed border-input flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPhoto, { className: "h-8 w-8 text-muted-foreground" }) }),
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-24 bg-muted rounded-md border border-dashed border-input flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "h-8 w-8 text-muted-foreground" }) }),
         !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -3022,7 +3043,7 @@ function MediaFieldInner({
         ] })
       ] }),
       value?.url && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: "h-3 w-3 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-3 w-3 flex-shrink-0" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[280px]", title: value.url, children: value.url })
       ] })
     ] }),
@@ -3067,7 +3088,7 @@ function MediaFieldInner({
         )
       ] }),
       activeTab === "browse" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
@@ -3113,7 +3134,7 @@ function MediaFieldInner({
               onClick: handleLoadMore,
               disabled: loading,
               children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
                 "Loading..."
               ] }) : "Load More"
             }
@@ -3143,15 +3164,15 @@ function MediaFieldInner({
             ] })
           ] }),
           uploadState.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-destructive/10 border border-destructive/30 rounded-md text-destructive text-sm flex items-start gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: uploadState.error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleUpload, disabled: uploadState.uploading, children: uploadState.uploading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
               "Uploading..."
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconUpload, { className: "h-4 w-4 mr-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4 mr-2" }),
               "Upload & Select"
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -3165,7 +3186,7 @@ function MediaFieldInner({
             )
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPhoto, { className: "h-16 w-16 text-muted mx-auto mb-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "h-16 w-16 text-muted mx-auto mb-4" }),
           /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cursor-pointer", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Select Image" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -3185,7 +3206,7 @@ function MediaFieldInner({
         /* URL Tab */
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: "h-12 w-12 text-muted-foreground mx-auto mb-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-12 w-12 text-muted-foreground mx-auto mb-2" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Enter an image URL from an external source" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -3223,10 +3244,10 @@ function MediaFieldInner({
                 onError: handleUrlPreviewError
               }
             ),
-            !urlState.previewLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
+            !urlState.previewLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
           ] }),
           urlState.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-destructive/10 border border-destructive/30 rounded-md text-destructive text-sm flex items-start gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: urlState.error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
@@ -3236,7 +3257,7 @@ function MediaFieldInner({
                 onClick: handleUrlSubmit,
                 disabled: !urlState.url || urlState.loading,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: "h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-4 w-4 mr-2" }),
                   "Use This URL"
                 ]
               }
@@ -3389,7 +3410,7 @@ function GradientStopEditorInner({
           onClick: () => onDelete(index),
           className: "p-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded flex-shrink-0",
           title: "Remove stop",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTrash, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -3603,7 +3624,7 @@ function GradientEditorInner({ value, onChange, readOnly }) {
             onClick: handleAddStop,
             className: "h-6 text-xs px-2",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPlus, { className: "w-3 h-3 mr-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 mr-1" }),
               "Add Stop"
             ]
           }
@@ -4092,7 +4113,7 @@ function BackgroundFieldInner({
           onClick: handleClear,
           title: "Clear background",
           className: "flex items-center justify-center w-6 h-6 rounded border-none bg-transparent cursor-pointer text-muted-foreground hover:bg-accent hover:text-destructive",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -4270,7 +4291,7 @@ function CollapsibleSection({ title, defaultOpen = false, children }) {
         className: "w-full flex items-center justify-between px-3 py-2 bg-muted/30 hover:bg-muted/50 transition-colors",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }),
-          isOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
@@ -4404,7 +4425,7 @@ function AnimationFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -4680,11 +4701,11 @@ function createAnimationField(config = {}) {
   };
 }
 var BREAKPOINT_ICONS = {
-  base: iconsReact.IconDevices,
-  sm: iconsReact.IconDeviceMobile,
-  md: iconsReact.IconDeviceTablet,
-  lg: iconsReact.IconDeviceLaptop,
-  xl: iconsReact.IconDeviceDesktop
+  xs: lucideReact.Smartphone,
+  sm: lucideReact.Smartphone,
+  md: lucideReact.Tablet,
+  lg: lucideReact.Laptop,
+  xl: lucideReact.Monitor
 };
 function BreakpointTab({
   breakpoint,
@@ -4724,17 +4745,17 @@ function ResponsiveFieldInner({
   renderInnerField,
   defaultValue
 }) {
-  const [activeBreakpoint, setActiveBreakpoint] = React6.useState("base");
+  const [activeBreakpoint, setActiveBreakpoint] = React6.useState("xs");
   const getCurrentValue = React6.useCallback(() => {
     if (!value) return defaultValue ?? null;
-    if (activeBreakpoint === "base") {
-      return value.base ?? defaultValue ?? null;
+    if (activeBreakpoint === "xs") {
+      return value.xs ?? defaultValue ?? null;
     }
     const override = value[activeBreakpoint];
     if (override !== void 0) {
       return override;
     }
-    const breakpointOrder = ["xl", "lg", "md", "sm", "base"];
+    const breakpointOrder = ["xl", "lg", "md", "sm", "xs"];
     const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
     for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
       const bp = breakpointOrder[i];
@@ -4748,18 +4769,18 @@ function ResponsiveFieldInner({
   const hasOverride = React6.useCallback(
     (breakpoint) => {
       if (!value) return false;
-      if (breakpoint === "base") return value.base !== void 0;
+      if (breakpoint === "xs") return value.xs !== void 0;
       return value[breakpoint] !== void 0;
     },
     [value]
   );
   const handleInnerChange = React6.useCallback(
     (newValue) => {
-      if (activeBreakpoint === "base") {
+      if (activeBreakpoint === "xs") {
         if (newValue === null && defaultValue !== void 0) {
-          onChange({ ...value, base: defaultValue });
+          onChange({ ...value, xs: defaultValue });
         } else if (newValue !== null) {
-          onChange({ ...value, base: newValue });
+          onChange({ ...value, xs: newValue });
         }
       } else {
         if (newValue === null) {
@@ -4767,11 +4788,11 @@ function ResponsiveFieldInner({
           delete newResponsive[activeBreakpoint];
           onChange(newResponsive);
         } else {
-          const base = value?.base ?? defaultValue;
-          if (base === void 0) return;
+          const xs = value?.xs ?? defaultValue;
+          if (xs === void 0) return;
           onChange({
             ...value,
-            base,
+            xs,
             [activeBreakpoint]: newValue
           });
         }
@@ -4780,7 +4801,7 @@ function ResponsiveFieldInner({
     [value, onChange, activeBreakpoint, defaultValue]
   );
   const handleClearOverride = React6.useCallback(() => {
-    if (activeBreakpoint === "base" || !value) return;
+    if (activeBreakpoint === "xs" || !value) return;
     const newResponsive = { ...value };
     delete newResponsive[activeBreakpoint];
     onChange(newResponsive);
@@ -4789,7 +4810,7 @@ function ResponsiveFieldInner({
     onChange(null);
   }, [onChange]);
   const currentValue = getCurrentValue();
-  const isOverrideBreakpoint = activeBreakpoint !== "base";
+  const isOverrideBreakpoint = activeBreakpoint !== "xs";
   const currentHasOverride = hasOverride(activeBreakpoint);
   const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-3", children: [
@@ -4811,7 +4832,7 @@ function ResponsiveFieldInner({
           onClick: handleClearAll,
           className: "text-muted-foreground hover:text-destructive",
           title: "Clear all values",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -4829,10 +4850,10 @@ function ResponsiveFieldInner({
       bp.key
     )) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeBreakpoint === "base" ? "Default for all screen sizes" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeBreakpoint === "xs" ? "Extra small screens (0-639px)" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth,
         "px and up",
-        !currentHasOverride && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from base)" })
+        !currentHasOverride && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from xs)" })
       ] }) }),
       isOverrideBreakpoint && currentHasOverride && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -4885,18 +4906,17 @@ function createResponsiveField(config) {
   };
 }
 var BREAKPOINT_ICONS2 = {
-  base: iconsReact.IconDevices,
-  sm: iconsReact.IconDeviceMobile,
-  md: iconsReact.IconDeviceTablet,
-  lg: iconsReact.IconDeviceLaptop,
-  xl: iconsReact.IconDeviceDesktop
+  xs: lucideReact.Smartphone,
+  sm: lucideReact.Smartphone,
+  md: lucideReact.Tablet,
+  lg: lucideReact.Laptop,
+  xl: lucideReact.Monitor
 };
 function VisibilityToggle({
   breakpoint,
   label,
   minWidth,
   isVisible,
-  isInherited,
   onClick,
   disabled
 }) {
@@ -4907,18 +4927,16 @@ function VisibilityToggle({
       type: "button",
       onClick,
       disabled,
-      title: `${label}${minWidth ? ` (${minWidth}px+)` : ""}: ${isVisible ? "Visible" : "Hidden"}${isInherited ? " (inherited)" : ""}`,
+      title: `${label}${minWidth ? ` (${minWidth}px+)` : ""}: ${isVisible ? "Visible" : "Hidden"}`,
       className: cn2(
         "relative flex flex-col items-center justify-center gap-0.5 p-2 rounded-md transition-all flex-1 min-w-[52px]",
-        isVisible ? "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20 border border-emerald-500/30" : "bg-red-500/10 text-red-500 hover:bg-red-500/20 border border-red-500/30",
-        isInherited && "opacity-60",
+        isVisible ? "bg-emerald-500/15 text-emerald-600 hover:bg-emerald-500/25 border border-emerald-500/40" : "bg-red-500/15 text-red-500 hover:bg-red-500/25 border border-red-500/40",
         disabled && "opacity-50 cursor-not-allowed"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(DeviceIcon, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1", children: isVisible ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEyeOff, { className: "h-3 w-3" }) }),
-        isInherited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -bottom-0.5 left-1/2 -translate-x-1/2 text-[8px] text-muted-foreground", children: "\u2022" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1", children: isVisible ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-3 w-3" }) })
       ]
     }
   );
@@ -4929,85 +4947,46 @@ function ResponsiveVisibilityFieldInner({
   label,
   readOnly
 }) {
-  const getEffectiveVisibility = React6.useCallback(
+  const getVisibility = React6.useCallback(
     (breakpoint) => {
       const val = value ?? DEFAULT_VISIBILITY;
-      if (breakpoint === "base") {
-        return { visible: val.base, inherited: false };
-      }
-      const explicitValue = val[breakpoint];
-      if (explicitValue !== void 0) {
-        return { visible: explicitValue, inherited: false };
-      }
-      const breakpointOrder = ["xl", "lg", "md", "sm", "base"];
-      const currentIndex = breakpointOrder.indexOf(breakpoint);
-      for (let i = currentIndex + 1; i < breakpointOrder.length; i++) {
-        const bp = breakpointOrder[i];
-        const bpValue = val[bp];
-        if (bpValue !== void 0) {
-          return { visible: bpValue, inherited: true };
-        }
-      }
-      return { visible: val.base, inherited: true };
+      return val[breakpoint] ?? true;
     },
     [value]
   );
   const toggleVisibility = React6.useCallback(
     (breakpoint) => {
-      const current = getEffectiveVisibility(breakpoint);
-      const newVisible = !current.visible;
-      if (breakpoint === "base") {
-        onChange({
-          ...value ?? DEFAULT_VISIBILITY,
-          base: newVisible
-        });
-      } else {
-        const newValue = {
-          ...value ?? DEFAULT_VISIBILITY,
-          [breakpoint]: newVisible
-        };
-        onChange(newValue);
-      }
+      const currentVisible = getVisibility(breakpoint);
+      const newValue = {
+        ...value ?? DEFAULT_VISIBILITY,
+        [breakpoint]: !currentVisible
+      };
+      onChange(newValue);
     },
-    [value, onChange, getEffectiveVisibility]
+    [value, onChange, getVisibility]
   );
-  const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
-  const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => {
-    const { visible } = getEffectiveVisibility(bp.key);
-    return !visible;
-  });
+  const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => !getVisibility(bp.key));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
-        overrideCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: [
-          overrideCount,
-          " override",
-          overrideCount !== 1 ? "s" : ""
-        ] })
-      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
       hasHiddenBreakpoints && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-amber-600 flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEyeOff, { className: "h-3 w-3" }),
-        "Hidden"
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-3 w-3" }),
+        "Partially hidden"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: BREAKPOINTS.map((bp) => {
-      const { visible, inherited } = getEffectiveVisibility(bp.key);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        VisibilityToggle,
-        {
-          breakpoint: bp.key,
-          label: bp.label,
-          minWidth: bp.minWidth,
-          isVisible: visible,
-          isInherited: inherited,
-          onClick: () => toggleVisibility(bp.key),
-          disabled: readOnly
-        },
-        bp.key
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Click to toggle visibility. Changes cascade to larger breakpoints." })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: BREAKPOINTS.map((bp) => /* @__PURE__ */ jsxRuntime.jsx(
+      VisibilityToggle,
+      {
+        breakpoint: bp.key,
+        label: bp.label,
+        minWidth: bp.minWidth,
+        isVisible: getVisibility(bp.key),
+        onClick: () => toggleVisibility(bp.key),
+        disabled: readOnly
+      },
+      bp.key
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Toggle visibility per screen size. Each breakpoint is independent." })
   ] });
 }
 var ResponsiveVisibilityField = React6.memo(ResponsiveVisibilityFieldInner);
@@ -5190,11 +5169,11 @@ function JustifyContentFieldInner({
     onChange(null);
   }, [onChange]);
   const options = [
-    { value: "flex-start", icon: iconsReact.IconLayoutAlignLeft, title: "Start" },
-    { value: "center", icon: iconsReact.IconLayoutAlignCenter, title: "Center" },
-    { value: "flex-end", icon: iconsReact.IconLayoutAlignRight, title: "End" },
-    { value: "space-between", icon: iconsReact.IconLayoutDistributeHorizontal, title: "Space Between" },
-    { value: "space-around", icon: iconsReact.IconSpacingHorizontal, title: "Space Around" }
+    { value: "flex-start", icon: lucideReact.AlignLeft, title: "Start" },
+    { value: "center", icon: lucideReact.AlignCenter, title: "Center" },
+    { value: "flex-end", icon: lucideReact.AlignRight, title: "End" },
+    { value: "space-between", icon: lucideReact.AlignHorizontalDistributeCenter, title: "Space Between" },
+    { value: "space-around", icon: lucideReact.GripHorizontal, title: "Space Around" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -5208,7 +5187,7 @@ function JustifyContentFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -5250,10 +5229,10 @@ function AlignItemsFieldInner({
     onChange(null);
   }, [onChange]);
   const options = [
-    { value: "flex-start", icon: iconsReact.IconLayoutAlignTop, title: "Start" },
-    { value: "center", icon: iconsReact.IconLayoutAlignMiddle, title: "Center" },
-    { value: "flex-end", icon: iconsReact.IconLayoutAlignBottom, title: "End" },
-    { value: "stretch", icon: iconsReact.IconArrowsVertical, title: "Stretch" }
+    { value: "flex-start", icon: lucideReact.AlignStartVertical, title: "Start" },
+    { value: "center", icon: lucideReact.AlignCenterVertical, title: "Center" },
+    { value: "flex-end", icon: lucideReact.AlignEndVertical, title: "End" },
+    { value: "stretch", icon: lucideReact.MoveVertical, title: "Stretch" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -5267,7 +5246,7 @@ function AlignItemsFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -6163,7 +6142,7 @@ function TemplateFieldInner({
           onClick: handleClearTemplate,
           title: "Clear selection",
           className: "text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -6177,7 +6156,7 @@ function TemplateFieldInner({
           className: "flex-1 gap-1.5",
           disabled: loading || saveForm.saving,
           children: [
-            saveForm.expanded ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconDeviceFloppy, { className: "h-4 w-4" }),
+            saveForm.expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4" }),
             saveForm.expanded ? "Cancel" : "Save as Template"
           ]
         }
@@ -6191,7 +6170,7 @@ function TemplateFieldInner({
           className: "gap-1.5",
           disabled: loadingTemplate,
           children: [
-            loadingTemplate ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconDownload, { className: "h-4 w-4" }),
+            loadingTemplate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }),
             "Reload"
           ]
         }
@@ -6241,7 +6220,7 @@ function TemplateFieldInner({
         )
       ] }),
       saveForm.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 bg-destructive/10 border border-destructive/30 rounded-md text-destructive text-xs flex items-start gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertCircle, { className: "h-3.5 w-3.5 flex-shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3.5 w-3.5 flex-shrink-0 mt-0.5" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: saveForm.error })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -6252,17 +6231,17 @@ function TemplateFieldInner({
           size: "sm",
           className: "w-full gap-1.5",
           children: saveForm.saving ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
             "Saving..."
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconDeviceFloppy, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4" }),
             "Save Template"
           ] })
         }
       )
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 bg-destructive/10 border border-destructive/30 rounded-md text-destructive text-sm flex items-start gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
     ] })
   ] });
@@ -6475,9 +6454,9 @@ function AlignmentFieldInner({
     onChange(null);
   }, [onChange]);
   const alignments = [
-    { value: "left", icon: iconsReact.IconLayoutAlignLeft, title: "Align left" },
-    { value: "center", icon: iconsReact.IconLayoutAlignCenter, title: "Align center" },
-    { value: "right", icon: iconsReact.IconLayoutAlignRight, title: "Align right" }
+    { value: "left", icon: lucideReact.AlignLeft, title: "Align left" },
+    { value: "center", icon: lucideReact.AlignCenter, title: "Align center" },
+    { value: "right", icon: lucideReact.AlignRight, title: "Align right" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -6491,7 +6470,7 @@ function AlignmentFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -7147,7 +7126,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleBold().run(),
             isActive: formattingState?.isBold,
             title: "Bold",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBold, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7156,7 +7135,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleItalic().run(),
             isActive: formattingState?.isItalic,
             title: "Italic",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconItalic, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7165,7 +7144,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleUnderline().run(),
             isActive: formattingState?.isUnderline,
             title: "Underline",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconUnderline, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7174,7 +7153,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleStrike().run(),
             isActive: formattingState?.isStrike,
             title: "Strikethrough",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconStrikethrough, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7183,7 +7162,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleSuperscript().run(),
             isActive: formattingState?.isSuperscript,
             title: "Superscript",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSuperscript, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Superscript, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7192,7 +7171,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleSubscript().run(),
             isActive: formattingState?.isSubscript,
             title: "Subscript",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSubscript, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Subscript, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -7200,8 +7179,8 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           ToolbarDropdown,
           {
             trigger: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5", children: [
-              formattingState?.isH1 ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH1, { className: ICON_SIZE }) : formattingState?.isH2 ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH2, { className: ICON_SIZE }) : formattingState?.isH3 ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH3, { className: ICON_SIZE }) : formattingState?.isH4 ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH4, { className: ICON_SIZE }) : formattingState?.isH5 ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH5, { className: ICON_SIZE }) : formattingState?.isH6 ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH6, { className: ICON_SIZE }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLetterP, { className: ICON_SIZE }),
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "w-3 h-3" })
+              formattingState?.isH1 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading1, { className: ICON_SIZE }) : formattingState?.isH2 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { className: ICON_SIZE }) : formattingState?.isH3 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading3, { className: ICON_SIZE }) : formattingState?.isH4 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading4, { className: ICON_SIZE }) : formattingState?.isH5 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading5, { className: ICON_SIZE }) : formattingState?.isH6 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading6, { className: ICON_SIZE }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pilcrow, { className: ICON_SIZE }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3" })
             ] }),
             title: "Text Type",
             isActive: formattingState?.isH1 || formattingState?.isH2 || formattingState?.isH3 || formattingState?.isH4 || formattingState?.isH5 || formattingState?.isH6,
@@ -7210,7 +7189,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
                 editor.chain().focus().setParagraph().run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLetterP, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pilcrow, { className: cn2(ICON_SIZE, "mr-2") }),
                 "Paragraph"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(DropdownSeparator, {}),
@@ -7218,42 +7197,42 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
                 editor.chain().focus().toggleHeading({ level: 1 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH1, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading1, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-lg", children: "Heading 1" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 2 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH2, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-base", children: "Heading 2" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 3 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH3, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading3, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Heading 3" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 4 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH4, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading4, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: "Heading 4" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 5 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH5, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading5, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-xs", children: "Heading 5" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 6 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH6, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading6, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-xs text-gray-600", children: "Heading 6" })
               ] })
             ] })
@@ -7263,7 +7242,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarDropdown,
           {
-            trigger: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTextSize, { className: ICON_SIZE }),
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ALargeSmall, { className: ICON_SIZE }),
             title: "Font Size",
             children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(DropdownLabel, { children: "Presets" }),
@@ -7349,7 +7328,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleBulletList().run(),
             isActive: formattingState?.isBulletList,
             title: "Bullet List",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconList, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7358,7 +7337,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleOrderedList().run(),
             isActive: formattingState?.isOrderedList,
             title: "Numbered List",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconListNumbers, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7367,7 +7346,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleBlockquote().run(),
             isActive: formattingState?.isBlockquote,
             title: "Blockquote",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBlockquote, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -7377,7 +7356,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("left").run(),
             isActive: formattingState?.isAlignLeft,
             title: "Align Left",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignLeft, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7386,7 +7365,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("center").run(),
             isActive: formattingState?.isAlignCenter,
             title: "Align Center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignCenter, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7395,7 +7374,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("right").run(),
             isActive: formattingState?.isAlignRight,
             title: "Align Right",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignRight, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7404,7 +7383,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("justify").run(),
             isActive: formattingState?.isAlignJustify,
             title: "Justify",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignJustified, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustify, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -7415,7 +7394,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
               onClick: () => setIsLinkPopoverOpen(!isLinkPopoverOpen),
               isActive: formattingState?.isLink,
               title: "Add Link",
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: ICON_SIZE })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: ICON_SIZE })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -7431,7 +7410,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarDropdown,
           {
-            trigger: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPalette, { className: ICON_SIZE }),
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: ICON_SIZE }),
             title: "Text Color",
             children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { onClick: () => {
@@ -7488,7 +7467,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarDropdown,
           {
-            trigger: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHighlight, { className: ICON_SIZE }),
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Highlighter, { className: ICON_SIZE }),
             title: "Highlight",
             isActive: formattingState?.isHighlight,
             children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -7519,7 +7498,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           {
             onClick: () => editor.chain().focus().setHorizontalRule().run(),
             title: "Horizontal Rule",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSeparatorHorizontal, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7527,7 +7506,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           {
             onClick: () => editor.chain().focus().setHardBreak().run(),
             title: "Hard Break (Shift+Enter)",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCornerDownLeft, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -7536,7 +7515,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           {
             onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(),
             title: "Clear Formatting",
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconClearFormatting, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RemoveFormatting, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7559,7 +7538,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
               !showSource && "bg-transparent"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCode, { className: ICON_SIZE }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: ICON_SIZE }),
               "Source"
             ]
           }
@@ -7673,7 +7652,7 @@ function TiptapModal({ isOpen, onClose, value, onChange, title }) {
                         justifyContent: "center"
                       },
                       title: "Close (Esc)",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 20 })
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
                     }
                   )
                 ]
@@ -7800,7 +7779,7 @@ function TiptapModalFieldInner({ value, onChange, label }) {
               },
               title: "Open full-screen editor",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowsMaximize, { size: 14 }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { size: 14 }),
                 "Expand"
               ]
             }
@@ -8031,7 +8010,7 @@ function TransformFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset transform",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -8045,7 +8024,7 @@ function TransformFieldInner({
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-3 bg-muted/30 rounded-md", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconRotate, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { className: "h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-xs font-medium", children: "Rotate" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -8063,7 +8042,7 @@ function TransformFieldInner({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 p-3 bg-muted/30 rounded-md", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconResize, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-xs font-medium", children: "Scale" })
         ] }),
         !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8075,7 +8054,7 @@ function TransformFieldInner({
             onClick: handleScaleLockToggle,
             className: "h-6 w-6",
             title: currentValue.scaleLocked ? "Click to unlink X and Y scale" : "Click to link X and Y scale",
-            children: currentValue.scaleLocked ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLinkOff, { className: "h-3 w-3" })
+            children: currentValue.scaleLocked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlink, { className: "h-3 w-3" })
           }
         )
       ] }),
@@ -8207,10 +8186,10 @@ function TransformFieldInner({
           className: "w-full flex items-center justify-between p-3 bg-muted/30 hover:bg-muted/50 transition-colors",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.Icon3dCubeSphere, { className: "h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Box, { className: "h-4 w-4 text-muted-foreground" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-xs font-medium cursor-pointer", children: "3D Transforms" })
             ] }),
-            show3D ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+            show3D ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
           ]
         }
       ),
@@ -8485,7 +8464,7 @@ function SizeFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -8970,7 +8949,7 @@ function AccordionItem({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.title }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            iconsReact.IconChevronDown,
+            lucideReact.ChevronDown,
             {
               className: cn(
                 "h-4 w-4 shrink-0 transition-transform duration-200",