@delmaredigital/payload-puck 0.1.0 → 0.1.1

package/dist/editor/index.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var iconsReact = require('@tabler/icons-react');
+var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -54,7 +54,7 @@ var __export = (target, all) => {
 };
 function LoadingState({ message = "Loading editor..." }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-screen flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: message })
   ] }) });
 }
@@ -182,9 +182,9 @@ var init_VersionHistory = __esm({
             disabled,
             className: `${secondaryBtn} disabled:opacity-50 disabled:cursor-not-allowed`,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHistory, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "History",
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "h-3 w-3 ml-1 flex-shrink-0" })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3 ml-1 flex-shrink-0" })
             ]
           }
         ),
@@ -205,7 +205,7 @@ var init_VersionHistory = __esm({
                         type: "button",
                         onClick: () => setIsOpen(false),
                         className: "text-gray-400 hover:text-gray-600 transition-colors p-1",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
                       }
                     )
                   ]
@@ -215,7 +215,7 @@ var init_VersionHistory = __esm({
                 "div",
                 {
                   className: "flex items-center justify-center p-8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-5 w-5 animate-spin text-gray-400" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" })
                 }
               ) : error ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -282,12 +282,12 @@ var init_VersionHistory = __esm({
                         disabled: isRestoring,
                         className: "text-xs font-medium text-blue-600 hover:text-blue-800 transition-colors disabled:opacity-50 flex items-center gap-1 px-2 py-1 flex-shrink-0",
                         children: [
-                          isRestoring ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconRotate, { className: "h-3 w-3" }),
+                          isRestoring ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "h-3 w-3" }),
                           "Restore"
                         ]
                       }
                     ),
-                    index === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "h-4 w-4" }) })
+                    index === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) })
                   ]
                 },
                 version.id
@@ -366,7 +366,7 @@ var init_HeaderActions = __esm({
             onClick: onBack,
             className: cn(btnBase, "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowLeft, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Back"
             ]
           }
@@ -406,7 +406,7 @@ var init_HeaderActions = __esm({
                 !isInteractive ? "bg-blue-500 text-white border-blue-500" : "bg-gray-100 text-gray-500 border-gray-200"
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPointer, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer, { className: "h-3.5 w-3.5" }),
                 "Edit"
               ]
             }
@@ -421,14 +421,14 @@ var init_HeaderActions = __esm({
                 isInteractive ? "bg-blue-500 text-white border-blue-500" : "bg-gray-100 text-gray-500 border-gray-200"
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHandClick, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointerClick, { className: "h-3.5 w-3.5" }),
                 "Interactive"
               ]
             }
           )
         ] }),
         lastSaved && !saveError && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-1 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "h-3 w-3 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 flex-shrink-0" }),
           "Saved ",
           lastSaved.toLocaleTimeString()
         ] }),
@@ -441,7 +441,7 @@ var init_HeaderActions = __esm({
             },
             className: "flex items-center gap-1.5 px-2.5 py-1.5 bg-red-50 border border-red-200 rounded-md text-red-700 text-xs font-medium",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
               "Error"
             ]
           }
@@ -458,7 +458,7 @@ var init_HeaderActions = __esm({
                 onClick: (e) => e.stopPropagation(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-red-50", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, { className: "h-5 w-5 text-red-600" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-red-600" }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Save Failed" }),
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Unable to save your changes" })
@@ -490,7 +490,7 @@ var init_HeaderActions = __esm({
               "px-3 py-1.5 bg-blue-600 text-white border border-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEye, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Preview"
             ]
           }
@@ -502,7 +502,7 @@ var init_HeaderActions = __esm({
             onClick: onPreview,
             className: cn(btnBase, "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconExternalLink, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "View"
             ]
           }
@@ -526,7 +526,7 @@ var init_HeaderActions = __esm({
               "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             children: [
-              isSaving ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconDeviceFloppy, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              isSaving ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Save"
             ]
           }
@@ -542,7 +542,7 @@ var init_HeaderActions = __esm({
               "px-3 py-1.5 bg-blue-600 text-white border border-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             children: [
-              isSaving ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLoader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconUpload, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              isSaving ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Publish"
             ]
           }
@@ -877,7 +877,7 @@ function transformValueToCSS(transform) {
 }
 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()}`);
@@ -903,7 +903,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);
@@ -919,24 +919,41 @@ function responsiveValueToCSS(value, converter, uniqueId) {
 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");
@@ -1204,7 +1221,7 @@ var init_shared = __esm({
       baseline: "items-baseline"
     };
     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 },
@@ -1468,7 +1485,7 @@ var init_dialog = __esm({
           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" })
             ] })
           ]
@@ -1491,7 +1508,7 @@ var init_dialog = __esm({
             /* @__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" })
             ] })
           ]
@@ -2909,7 +2926,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" })
         }
       )
     ] }),
@@ -3437,7 +3454,7 @@ function AccordionItem({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.title }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            iconsReact.IconChevronDown,
+            lucideReact.ChevronDown,
             {
               className: cn2(
                 "h-4 w-4 shrink-0 transition-transform duration-200",
@@ -3787,7 +3804,7 @@ var init_PreviewModal = __esm({
                     className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 rounded-md transition-colors",
                     title: "Close preview (Esc)",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
                       "Close Preview"
                     ]
                   }
@@ -3800,7 +3817,7 @@ var init_PreviewModal = __esm({
                     className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors",
                     title: "Open published page in new tab",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconExternalLink, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" }),
                       "View Page"
                     ]
                   }
@@ -3823,7 +3840,7 @@ var init_PreviewModal = __esm({
                 onClick: (e) => e.stopPropagation(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-amber-50", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, { className: "h-5 w-5 text-amber-600" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-amber-600" }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Navigate away?" }),
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "This will close the preview" })