@delmaredigital/payload-puck 0.6.12 → 0.6.13

package/dist/editor/components/PreviewModeToggle.js

@@ -9,7 +9,7 @@ const styles = {
         gap: '2px',
         padding: '2px',
         backgroundColor: 'var(--puck-color-grey-11, #e8e8e8)',
-        borderRadius: '6px',
+        borderRadius: '6px'
     },
     button: {
         display: 'flex',
@@ -20,21 +20,21 @@ const styles = {
         border: 'none',
         borderRadius: '4px',
         cursor: 'pointer',
-        transition: 'background-color 0.15s, color 0.15s',
+        transition: 'background-color 0.15s, color 0.15s'
     },
     buttonActive: {
         backgroundColor: 'var(--puck-color-white, #ffffff)',
         color: 'var(--puck-color-grey-02, #3d3d3d)',
-        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
     },
     buttonInactive: {
         backgroundColor: 'transparent',
-        color: 'var(--puck-color-grey-05, #8f8f8f)',
+        color: 'var(--puck-color-grey-05, #8f8f8f)'
     },
     icon: {
         width: '14px',
-        height: '14px',
-    },
+        height: '14px'
+    }
 };
 /**
  * Toggle button for switching preview iframe between light/dark modes.
@@ -51,17 +51,45 @@ const styles = {
  *   onToggle={setPreviewDarkMode}
  * />
  * ```
- */
-export const PreviewModeToggle = memo(function PreviewModeToggle({ isDarkMode, onToggle, disabled = false, }) {
-    return (_jsxs("div", { style: {
+ */ export const PreviewModeToggle = /*#__PURE__*/ memo(function PreviewModeToggle({ isDarkMode, onToggle, disabled = false }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
             ...styles.container,
-            ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}),
-        }, title: "Toggle preview dark/light mode", children: [_jsx("button", { type: "button", onClick: () => onToggle(false), style: {
+            ...disabled ? {
+                opacity: 0.5,
+                pointerEvents: 'none'
+            } : {}
+        },
+        title: "Toggle preview dark/light mode",
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>onToggle(false),
+                style: {
                     ...styles.button,
-                    ...(!isDarkMode ? styles.buttonActive : styles.buttonInactive),
-                }, "aria-label": "Light mode preview", "aria-pressed": !isDarkMode, children: _jsx(Sun, { style: styles.icon }) }), _jsx("button", { type: "button", onClick: () => onToggle(true), style: {
+                    ...!isDarkMode ? styles.buttonActive : styles.buttonInactive
+                },
+                "aria-label": "Light mode preview",
+                "aria-pressed": !isDarkMode,
+                children: /*#__PURE__*/ _jsx(Sun, {
+                    style: styles.icon
+                })
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>onToggle(true),
+                style: {
                     ...styles.button,
-                    ...(isDarkMode ? styles.buttonActive : styles.buttonInactive),
-                }, "aria-label": "Dark mode preview", "aria-pressed": isDarkMode, children: _jsx(Moon, { style: styles.icon }) })] }));
+                    ...isDarkMode ? styles.buttonActive : styles.buttonInactive
+                },
+                "aria-label": "Dark mode preview",
+                "aria-pressed": isDarkMode,
+                children: /*#__PURE__*/ _jsx(Moon, {
+                    style: styles.icon
+                })
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=PreviewModeToggle.js.map

package/dist/editor/components/PreviewModeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewModeToggle.js","sourceRoot":"","sources":["../../../src/editor/components/PreviewModeToggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,EAAsB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,MAAM,GAAG;IACb,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,KAAK;QACd,eAAe,EAAE,oCAAoC;QACrD,YAAY,EAAE,KAAK;KACH;IAClB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,qCAAqC;KACjC;IAClB,YAAY,EAAE;QACZ,eAAe,EAAE,kCAAkC;QACnD,KAAK,EAAE,oCAAoC;QAC3C,SAAS,EAAE,+BAA+B;KAC1B;IAClB,cAAc,EAAE;QACd,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,oCAAoC;KAC3B;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACE;CACnB,CAAA;AAiBD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC,EAC/D,UAAU,EACV,QAAQ,EACR,QAAQ,GAAG,KAAK,GACO;IACvB,OAAO,CACL,eACE,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,SAAS;YACnB,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC7D,EACD,KAAK,EAAC,gCAAgC,aAEtC,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE;oBACL,GAAG,MAAM,CAAC,MAAM;oBAChB,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;iBAC/D,gBACU,oBAAoB,kBACjB,CAAC,UAAU,YAEzB,KAAC,GAAG,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,GAAI,GACpB,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,KAAK,EAAE;oBACL,GAAG,MAAM,CAAC,MAAM;oBAChB,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;iBAC9D,gBACU,mBAAmB,kBAChB,UAAU,YAExB,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,GAAI,GACrB,IACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"sources":["../../../src/editor/components/PreviewModeToggle.tsx"],"sourcesContent":["'use client'\n\nimport { memo, type CSSProperties } from 'react'\nimport { Sun, Moon } from 'lucide-react'\n\nconst styles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2px',\n    padding: '2px',\n    backgroundColor: 'var(--puck-color-grey-11, #e8e8e8)',\n    borderRadius: '6px',\n  } as CSSProperties,\n  button: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '28px',\n    height: '28px',\n    border: 'none',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s, color 0.15s',\n  } as CSSProperties,\n  buttonActive: {\n    backgroundColor: 'var(--puck-color-white, #ffffff)',\n    color: 'var(--puck-color-grey-02, #3d3d3d)',\n    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',\n  } as CSSProperties,\n  buttonInactive: {\n    backgroundColor: 'transparent',\n    color: 'var(--puck-color-grey-05, #8f8f8f)',\n  } as CSSProperties,\n  icon: {\n    width: '14px',\n    height: '14px',\n  } as CSSProperties,\n}\n\nexport interface PreviewModeToggleProps {\n  /**\n   * Whether dark mode is currently enabled in the preview\n   */\n  isDarkMode: boolean\n  /**\n   * Callback when the mode is toggled\n   */\n  onToggle: (isDarkMode: boolean) => void\n  /**\n   * Whether the toggle is disabled\n   */\n  disabled?: boolean\n}\n\n/**\n * Toggle button for switching preview iframe between light/dark modes.\n *\n * This controls the preview content's dark mode independently from the\n * editor UI dark mode. Useful for testing how the page looks in both modes.\n *\n * @example\n * ```tsx\n * const [previewDarkMode, setPreviewDarkMode] = useState(false)\n *\n * <PreviewModeToggle\n *   isDarkMode={previewDarkMode}\n *   onToggle={setPreviewDarkMode}\n * />\n * ```\n */\nexport const PreviewModeToggle = memo(function PreviewModeToggle({\n  isDarkMode,\n  onToggle,\n  disabled = false,\n}: PreviewModeToggleProps) {\n  return (\n    <div\n      style={{\n        ...styles.container,\n        ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}),\n      }}\n      title=\"Toggle preview dark/light mode\"\n    >\n      <button\n        type=\"button\"\n        onClick={() => onToggle(false)}\n        style={{\n          ...styles.button,\n          ...(!isDarkMode ? styles.buttonActive : styles.buttonInactive),\n        }}\n        aria-label=\"Light mode preview\"\n        aria-pressed={!isDarkMode}\n      >\n        <Sun style={styles.icon} />\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => onToggle(true)}\n        style={{\n          ...styles.button,\n          ...(isDarkMode ? styles.buttonActive : styles.buttonInactive),\n        }}\n        aria-label=\"Dark mode preview\"\n        aria-pressed={isDarkMode}\n      >\n        <Moon style={styles.icon} />\n      </button>\n    </div>\n  )\n})\n"],"names":["memo","Sun","Moon","styles","container","display","alignItems","gap","padding","backgroundColor","borderRadius","button","justifyContent","width","height","border","cursor","transition","buttonActive","color","boxShadow","buttonInactive","icon","PreviewModeToggle","isDarkMode","onToggle","disabled","div","style","opacity","pointerEvents","title","type","onClick","aria-label","aria-pressed"],"mappings":"AAAA;;AAEA,SAASA,IAAI,QAA4B,QAAO;AAChD,SAASC,GAAG,EAAEC,IAAI,QAAQ,eAAc;AAExC,MAAMC,SAAS;IACbC,WAAW;QACTC,SAAS;QACTC,YAAY;QACZC,KAAK;QACLC,SAAS;QACTC,iBAAiB;QACjBC,cAAc;IAChB;IACAC,QAAQ;QACNN,SAAS;QACTC,YAAY;QACZM,gBAAgB;QAChBC,OAAO;QACPC,QAAQ;QACRC,QAAQ;QACRL,cAAc;QACdM,QAAQ;QACRC,YAAY;IACd;IACAC,cAAc;QACZT,iBAAiB;QACjBU,OAAO;QACPC,WAAW;IACb;IACAC,gBAAgB;QACdZ,iBAAiB;QACjBU,OAAO;IACT;IACAG,MAAM;QACJT,OAAO;QACPC,QAAQ;IACV;AACF;AAiBA;;;;;;;;;;;;;;;CAeC,GACD,OAAO,MAAMS,kCAAoBvB,KAAK,SAASuB,kBAAkB,EAC/DC,UAAU,EACVC,QAAQ,EACRC,WAAW,KAAK,EACO;IACvB,qBACE,MAACC;QACCC,OAAO;YACL,GAAGzB,OAAOC,SAAS;YACnB,GAAIsB,WAAW;gBAAEG,SAAS;gBAAKC,eAAe;YAAO,IAAI,CAAC,CAAC;QAC7D;QACAC,OAAM;;0BAEN,KAACpB;gBACCqB,MAAK;gBACLC,SAAS,IAAMR,SAAS;gBACxBG,OAAO;oBACL,GAAGzB,OAAOQ,MAAM;oBAChB,GAAI,CAACa,aAAarB,OAAOe,YAAY,GAAGf,OAAOkB,cAAc;gBAC/D;gBACAa,cAAW;gBACXC,gBAAc,CAACX;0BAEf,cAAA,KAACvB;oBAAI2B,OAAOzB,OAAOmB,IAAI;;;0BAEzB,KAACX;gBACCqB,MAAK;gBACLC,SAAS,IAAMR,SAAS;gBACxBG,OAAO;oBACL,GAAGzB,OAAOQ,MAAM;oBAChB,GAAIa,aAAarB,OAAOe,YAAY,GAAGf,OAAOkB,cAAc;gBAC9D;gBACAa,cAAW;gBACXC,gBAAcX;0BAEd,cAAA,KAACtB;oBAAK0B,OAAOzB,OAAOmB,IAAI;;;;;AAIhC,GAAE"}

package/dist/editor/components/VersionHistory.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef, memo } from 'react';
-import { History, Loader2, Check, RotateCcw, X, ChevronDown, } from 'lucide-react';
+import { History, Loader2, Check, RotateCcw, X, ChevronDown } from 'lucide-react';
 // Shared styles
 const styles = {
     container: {
-        position: 'relative',
+        position: 'relative'
     },
     button: {
         display: 'inline-flex',
@@ -19,23 +19,23 @@ const styles = {
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
         border: '1px solid var(--theme-elevation-200)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     icon: {
         width: '16px',
         height: '16px',
         marginRight: '4px',
-        flexShrink: 0,
+        flexShrink: 0
     },
     iconSmall: {
         width: '12px',
         height: '12px',
         marginLeft: '4px',
-        flexShrink: 0,
+        flexShrink: 0
     },
     dropdown: {
         position: 'absolute',
@@ -49,19 +49,19 @@ const styles = {
         zIndex: 50,
         width: '320px',
         maxHeight: '400px',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     header: {
         borderBottom: '1px solid var(--theme-elevation-200)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        padding: '12px 16px',
+        padding: '12px 16px'
     },
     headerTitle: {
         fontWeight: 500,
         fontSize: '14px',
-        color: 'var(--theme-elevation-900)',
+        color: 'var(--theme-elevation-900)'
     },
     closeButton: {
         color: 'var(--theme-elevation-400)',
@@ -69,38 +69,38 @@ const styles = {
         padding: '4px',
         background: 'none',
         border: 'none',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     content: {
         maxHeight: '340px',
-        overflowY: 'auto',
+        overflowY: 'auto'
     },
     loadingContainer: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: '32px',
+        padding: '32px'
     },
     loadingIcon: {
         width: '20px',
         height: '20px',
         color: 'var(--theme-elevation-400)',
-        animation: 'spin 1s linear infinite',
+        animation: 'spin 1s linear infinite'
     },
     errorText: {
         fontSize: '14px',
         color: 'var(--theme-error-600)',
         padding: '16px',
-        textAlign: 'center',
+        textAlign: 'center'
     },
     emptyText: {
         fontSize: '14px',
         color: 'var(--theme-elevation-500)',
         padding: '16px',
-        textAlign: 'center',
+        textAlign: 'center'
     },
     listContainer: {
-        padding: '8px',
+        padding: '8px'
     },
     versionItem: {
         borderRadius: '6px',
@@ -109,21 +109,21 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'space-between',
         padding: '10px 12px',
-        gap: '12px',
+        gap: '12px'
     },
     versionInfo: {
         flex: 1,
-        minWidth: 0,
+        minWidth: 0
     },
     versionHeader: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     versionDate: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-900)',
+        color: 'var(--theme-elevation-900)'
     },
     badgeCurrent: {
         fontSize: '12px',
@@ -131,7 +131,7 @@ const styles = {
         borderRadius: '9999px',
         padding: '2px 8px',
         backgroundColor: 'var(--theme-elevation-100)',
-        color: 'var(--theme-elevation-700)',
+        color: 'var(--theme-elevation-700)'
     },
     badgePublished: {
         fontSize: '12px',
@@ -139,16 +139,16 @@ const styles = {
         borderRadius: '9999px',
         padding: '2px 8px',
         backgroundColor: 'var(--theme-success-100)',
-        color: 'var(--theme-success-700)',
+        color: 'var(--theme-success-700)'
     },
     autosaveText: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-400)',
+        color: 'var(--theme-elevation-400)'
     },
     versionDetails: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        marginTop: '2px',
+        marginTop: '2px'
     },
     restoreButton: {
         fontSize: '12px',
@@ -162,25 +162,24 @@ const styles = {
         flexShrink: 0,
         background: 'none',
         border: 'none',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     restoreButtonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     checkIcon: {
         width: '16px',
         height: '16px',
         color: 'var(--theme-elevation-400)',
-        flexShrink: 0,
-    },
+        flexShrink: 0
+    }
 };
 /**
  * Version history dropdown for the Puck editor
  *
  * Shows a list of previous versions with the ability to restore them.
- */
-export const VersionHistory = memo(function VersionHistory({ pageId, apiEndpoint = '/api/puck/pages', onRestore, disabled, }) {
+ */ export const VersionHistory = /*#__PURE__*/ memo(function VersionHistory({ pageId, apiEndpoint = '/api/puck/pages', onRestore, disabled }) {
     const [isOpen, setIsOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [isRestoring, setIsRestoring] = useState(false);
@@ -190,32 +189,34 @@ export const VersionHistory = memo(function VersionHistory({ pageId, apiEndpoint
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const dropdownRef = useRef(null);
     // Check if versions endpoint is available on mount
-    useEffect(() => {
+    useEffect(()=>{
         async function checkAvailability() {
             try {
                 const response = await fetch(`${apiEndpoint}/${pageId}/versions?limit=1`, {
-                    method: 'GET',
+                    method: 'GET'
                 });
                 setIsAvailable(response.status !== 404);
-            }
-            catch {
+            } catch  {
                 setIsAvailable(false);
             }
         }
         checkAvailability();
-    }, [apiEndpoint, pageId]);
+    }, [
+        apiEndpoint,
+        pageId
+    ]);
     // Close on outside click
-    useEffect(() => {
+    useEffect(()=>{
         function handleClickOutside(event) {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         }
         document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
+        return ()=>document.removeEventListener('mousedown', handleClickOutside);
     }, []);
     // Fetch versions when dropdown opens
-    const fetchVersions = useCallback(async () => {
+    const fetchVersions = useCallback(async ()=>{
         setIsLoading(true);
         setError(null);
         try {
@@ -225,23 +226,27 @@ export const VersionHistory = memo(function VersionHistory({ pageId, apiEndpoint
             }
             const data = await response.json();
             setVersions(data.docs || []);
-        }
-        catch (err) {
+        } catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to load versions');
             console.error('Error fetching versions:', err);
-        }
-        finally {
+        } finally{
             setIsLoading(false);
         }
-    }, [apiEndpoint, pageId]);
+    }, [
+        apiEndpoint,
+        pageId
+    ]);
     // Fetch versions when opening
-    useEffect(() => {
+    useEffect(()=>{
         if (isOpen) {
             fetchVersions();
         }
-    }, [isOpen, fetchVersions]);
+    }, [
+        isOpen,
+        fetchVersions
+    ]);
     // Handle version restore
-    const handleRestore = useCallback(async (version) => {
+    const handleRestore = useCallback(async (version)=>{
         if (!confirm(`Restore this version from ${formatDate(version.updatedAt)}? This will overwrite current changes.`)) {
             return;
         }
@@ -249,8 +254,12 @@ export const VersionHistory = memo(function VersionHistory({ pageId, apiEndpoint
         try {
             const response = await fetch(`${apiEndpoint}/${pageId}/versions`, {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ versionId: version.id }),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    versionId: version.id
+                })
             });
             if (!response.ok) {
                 throw new Error('Failed to restore version');
@@ -258,15 +267,17 @@ export const VersionHistory = memo(function VersionHistory({ pageId, apiEndpoint
             onRestore?.(version);
             setIsOpen(false);
             window.location.reload();
-        }
-        catch (err) {
+        } catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to restore version');
             console.error('Error restoring version:', err);
-        }
-        finally {
+        } finally{
             setIsRestoring(false);
         }
-    }, [apiEndpoint, pageId, onRestore]);
+    }, [
+        apiEndpoint,
+        pageId,
+        onRestore
+    ]);
     // Format date for display
     function formatDate(dateStr) {
         const date = new Date(dateStr);
@@ -275,34 +286,171 @@ export const VersionHistory = memo(function VersionHistory({ pageId, apiEndpoint
         const diffMins = Math.floor(diffMs / 60000);
         const diffHours = Math.floor(diffMs / 3600000);
         const diffDays = Math.floor(diffMs / 86400000);
-        if (diffMins < 1)
-            return 'Just now';
-        if (diffMins < 60)
-            return `${diffMins}m ago`;
-        if (diffHours < 24)
-            return `${diffHours}h ago`;
-        if (diffDays < 7)
-            return `${diffDays}d ago`;
+        if (diffMins < 1) return 'Just now';
+        if (diffMins < 60) return `${diffMins}m ago`;
+        if (diffHours < 24) return `${diffHours}h ago`;
+        if (diffDays < 7) return `${diffDays}d ago`;
         return date.toLocaleDateString();
     }
     // Format time for display
     function formatTime(dateStr) {
         const date = new Date(dateStr);
-        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
     }
     // Don't render if versions endpoint is not available or still checking
     if (isAvailable !== true) {
         return null;
     }
-    return (_jsxs("div", { ref: dropdownRef, style: styles.container, children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), disabled: disabled, style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: dropdownRef,
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: ()=>setIsOpen(!isOpen),
+                disabled: disabled,
+                style: {
                     ...styles.button,
-                    ...(disabled ? styles.buttonDisabled : {}),
-                }, children: [_jsx(History, { style: styles.icon }), "History", _jsx(ChevronDown, { style: styles.iconSmall })] }), isOpen && (_jsxs("div", { style: styles.dropdown, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: styles.headerTitle, children: "Version History" }), _jsx("button", { type: "button", onClick: () => setIsOpen(false), style: styles.closeButton, children: _jsx(X, { style: { width: '16px', height: '16px' } }) })] }), _jsx("div", { style: styles.content, children: isLoading ? (_jsx("div", { style: styles.loadingContainer, children: _jsx(Loader2, { style: styles.loadingIcon }) })) : error ? (_jsx("div", { style: styles.errorText, children: error })) : versions.length === 0 ? (_jsx("div", { style: styles.emptyText, children: "No version history available" })) : (_jsx("div", { style: styles.listContainer, children: versions.map((version, index) => (_jsxs("div", { style: {
-                                    ...styles.versionItem,
-                                    backgroundColor: hoveredIndex === index ? 'var(--theme-elevation-50)' : 'transparent',
-                                }, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), children: [_jsxs("div", { style: styles.versionInfo, children: [_jsxs("div", { style: styles.versionHeader, children: [_jsx("span", { style: styles.versionDate, children: formatDate(version.updatedAt) }), index === 0 && (_jsx("span", { style: styles.badgeCurrent, children: "Current" })), version.version._status === 'published' && (_jsx("span", { style: styles.badgePublished, children: "Published" })), version.autosave && (_jsx("span", { style: styles.autosaveText, title: "Autosaved", children: "(auto)" }))] }), _jsxs("div", { style: styles.versionDetails, children: [formatTime(version.updatedAt), version.version.title && (_jsxs("span", { children: [" \u00B7 ", version.version.title] }))] })] }), index > 0 && (_jsxs("button", { type: "button", onClick: () => handleRestore(version), disabled: isRestoring, style: {
-                                            ...styles.restoreButton,
-                                            ...(isRestoring ? styles.restoreButtonDisabled : {}),
-                                        }, children: [isRestoring ? (_jsx(Loader2, { style: { width: '12px', height: '12px', animation: 'spin 1s linear infinite' } })) : (_jsx(RotateCcw, { style: { width: '12px', height: '12px' } })), "Restore"] })), index === 0 && (_jsx("span", { style: { flexShrink: 0 }, children: _jsx(Check, { style: styles.checkIcon }) }))] }, version.id))) })) })] }))] }));
+                    ...disabled ? styles.buttonDisabled : {}
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(History, {
+                        style: styles.icon
+                    }),
+                    "History",
+                    /*#__PURE__*/ _jsx(ChevronDown, {
+                        style: styles.iconSmall
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ _jsxs("div", {
+                style: styles.dropdown,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.header,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                style: styles.headerTitle,
+                                children: "Version History"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: ()=>setIsOpen(false),
+                                style: styles.closeButton,
+                                children: /*#__PURE__*/ _jsx(X, {
+                                    style: {
+                                        width: '16px',
+                                        height: '16px'
+                                    }
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: styles.content,
+                        children: isLoading ? /*#__PURE__*/ _jsx("div", {
+                            style: styles.loadingContainer,
+                            children: /*#__PURE__*/ _jsx(Loader2, {
+                                style: styles.loadingIcon
+                            })
+                        }) : error ? /*#__PURE__*/ _jsx("div", {
+                            style: styles.errorText,
+                            children: error
+                        }) : versions.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                            style: styles.emptyText,
+                            children: "No version history available"
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            style: styles.listContainer,
+                            children: versions.map((version, index)=>/*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        ...styles.versionItem,
+                                        backgroundColor: hoveredIndex === index ? 'var(--theme-elevation-50)' : 'transparent'
+                                    },
+                                    onMouseEnter: ()=>setHoveredIndex(index),
+                                    onMouseLeave: ()=>setHoveredIndex(null),
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            style: styles.versionInfo,
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    style: styles.versionHeader,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            style: styles.versionDate,
+                                                            children: formatDate(version.updatedAt)
+                                                        }),
+                                                        index === 0 && /*#__PURE__*/ _jsx("span", {
+                                                            style: styles.badgeCurrent,
+                                                            children: "Current"
+                                                        }),
+                                                        version.version._status === 'published' && /*#__PURE__*/ _jsx("span", {
+                                                            style: styles.badgePublished,
+                                                            children: "Published"
+                                                        }),
+                                                        version.autosave && /*#__PURE__*/ _jsx("span", {
+                                                            style: styles.autosaveText,
+                                                            title: "Autosaved",
+                                                            children: "(auto)"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    style: styles.versionDetails,
+                                                    children: [
+                                                        formatTime(version.updatedAt),
+                                                        version.version.title && /*#__PURE__*/ _jsxs("span", {
+                                                            children: [
+                                                                "· ",
+                                                                version.version.title
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        index > 0 && /*#__PURE__*/ _jsxs("button", {
+                                            type: "button",
+                                            onClick: ()=>handleRestore(version),
+                                            disabled: isRestoring,
+                                            style: {
+                                                ...styles.restoreButton,
+                                                ...isRestoring ? styles.restoreButtonDisabled : {}
+                                            },
+                                            children: [
+                                                isRestoring ? /*#__PURE__*/ _jsx(Loader2, {
+                                                    style: {
+                                                        width: '12px',
+                                                        height: '12px',
+                                                        animation: 'spin 1s linear infinite'
+                                                    }
+                                                }) : /*#__PURE__*/ _jsx(RotateCcw, {
+                                                    style: {
+                                                        width: '12px',
+                                                        height: '12px'
+                                                    }
+                                                }),
+                                                "Restore"
+                                            ]
+                                        }),
+                                        index === 0 && /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                flexShrink: 0
+                                            },
+                                            children: /*#__PURE__*/ _jsx(Check, {
+                                                style: styles.checkIcon
+                                            })
+                                        })
+                                    ]
+                                }, version.id))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=VersionHistory.js.map