@refactico/pages 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -884,7 +884,7 @@ const AlignRightIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsxRun
     ]
   }
 );
-const CheckIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsxRuntime.jsx(
+const CheckIcon$1 = ({ className = "", size = 20 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     className,
@@ -1729,13 +1729,20 @@ const CodeBlock = ({
   const [copied, setCopied] = react.useState(false);
   const textareaRef = react.useRef(null);
   const isDark = theme === "dark";
-  const handleCodeChange = (e) => {
-    onUpdate({ ...block, code: e.target.value });
+  const resizeTextarea = () => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
     }
   };
+  react.useEffect(() => {
+    if (!readOnly) {
+      resizeTextarea();
+    }
+  }, [block.code, readOnly]);
+  const handleCodeChange = (e) => {
+    onUpdate({ ...block, code: e.target.value });
+  };
   const handleLanguageChange = (e) => {
     onUpdate({ ...block, language: e.target.value });
   };
@@ -1816,7 +1823,7 @@ const CodeBlock = ({
                     onClick: copyToClipboard,
                     className: "p-1.5 rounded-lg hover:bg-slate-700 text-slate-400 hover:text-white transition-colors",
                     title: "Copy code",
-                    children: copied ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { size: 16 })
+                    children: copied ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { size: 16 })
                   }
                 )
               ] })
@@ -2485,7 +2492,7 @@ const ListBlock = ({
                       onClick: () => toggleChecked(index),
                       disabled: readOnly,
                       className: `flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${block.checkedItems?.[index] ? "bg-indigo-500 border-indigo-500 text-white" : isDark ? "border-slate-500 hover:border-indigo-400" : "border-slate-300 hover:border-indigo-400"}`,
-                      children: block.checkedItems?.[index] && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 12 })
+                      children: block.checkedItems?.[index] && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { size: 12 })
                     }
                   ),
                   readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3471,16 +3478,943 @@ const DIVIDER_STYLE_CLASSES = {
   dotted: "border-dotted"
 };
 
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== typeof b) return false;
+  if (a === null || b === null) return a === b;
+  if (typeof a !== "object") return false;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every((item, index) => deepEqual(item, b[index]));
+  }
+  if (Array.isArray(a) || Array.isArray(b)) return false;
+  const aObj = a;
+  const bObj = b;
+  const aKeys = Object.keys(aObj);
+  const bKeys = Object.keys(bObj);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((key) => deepEqual(aObj[key], bObj[key]));
+}
+function getPropertyChanges(oldBlock, newBlock) {
+  const changes = [];
+  const oldObj = oldBlock;
+  const newObj = newBlock;
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);
+  for (const key of allKeys) {
+    if (key === "id") continue;
+    const oldValue = oldObj[key];
+    const newValue = newObj[key];
+    if (!deepEqual(oldValue, newValue)) {
+      changes.push({ path: key, oldValue, newValue });
+    }
+  }
+  return changes;
+}
+function compareEditorData(oldData, newData) {
+  const oldBlocks = oldData.blocks;
+  const newBlocks = newData.blocks;
+  const blockDiffs = [];
+  const oldBlockMap = new Map(oldBlocks.map((b) => [b.id, b]));
+  const processedIds = /* @__PURE__ */ new Set();
+  for (const newBlock of newBlocks) {
+    const oldBlock = oldBlockMap.get(newBlock.id);
+    processedIds.add(newBlock.id);
+    if (!oldBlock) {
+      blockDiffs.push({ type: "added", newBlock });
+    } else {
+      const changes = getPropertyChanges(oldBlock, newBlock);
+      if (changes.length > 0) {
+        blockDiffs.push({ type: "modified", oldBlock, newBlock, changes });
+      } else {
+        blockDiffs.push({ type: "unchanged", oldBlock, newBlock });
+      }
+    }
+  }
+  for (const oldBlock of oldBlocks) {
+    if (!processedIds.has(oldBlock.id)) {
+      blockDiffs.push({ type: "removed", oldBlock });
+    }
+  }
+  const summary = {
+    added: blockDiffs.filter((d) => d.type === "added").length,
+    removed: blockDiffs.filter((d) => d.type === "removed").length,
+    modified: blockDiffs.filter((d) => d.type === "modified").length,
+    unchanged: blockDiffs.filter((d) => d.type === "unchanged").length
+  };
+  return { blocks: blockDiffs, summary };
+}
+function formatValue(value) {
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+function getBlockTypeLabel(block) {
+  const labels = {
+    text: "Text",
+    heading: "Heading",
+    image: "Image",
+    code: "Code",
+    table: "Table",
+    divider: "Divider",
+    quote: "Quote",
+    list: "List",
+    callout: "Callout"
+  };
+  return labels[block.type] || block.type;
+}
+function getBlockPreview(block, maxLength = 50) {
+  switch (block.type) {
+    case "text":
+    case "heading":
+    case "quote":
+    case "callout": {
+      const content = block.content || "";
+      return content.length > maxLength ? content.substring(0, maxLength) + "..." : content;
+    }
+    case "code":
+      return block.language || "code";
+    case "image":
+      return block.alt || "Image";
+    case "list":
+      return `${block.items.length} items`;
+    case "table":
+      return `${block.rows.length} rows`;
+    case "divider":
+      return block.style || "solid";
+    default:
+      return "";
+  }
+}
+
+function BlockRenderer({ block, theme }) {
+  const noop = () => {
+  };
+  switch (block.type) {
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TextBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "heading":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        HeadingBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ImageBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "code":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CodeBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "table":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TableBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "divider":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DividerBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "quote":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        QuoteBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "list":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ListBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    case "callout":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CalloutBlock,
+        {
+          block,
+          onUpdate: noop,
+          readOnly: true,
+          theme
+        }
+      );
+    default:
+      return null;
+  }
+}
+
+const PlusCircleIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: "12",
+          y1: "8",
+          x2: "12",
+          y2: "16"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: "8",
+          y1: "12",
+          x2: "16",
+          y2: "12"
+        }
+      )
+    ]
+  }
+);
+const MinusCircleIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: "8",
+          y1: "12",
+          x2: "16",
+          y2: "12"
+        }
+      )
+    ]
+  }
+);
+const EditIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+    ]
+  }
+);
+const CheckIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+const SplitIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: "3",
+          y: "3",
+          width: "18",
+          height: "18",
+          rx: "2"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: "12",
+          y1: "3",
+          x2: "12",
+          y2: "21"
+        }
+      )
+    ]
+  }
+);
+const UnifiedIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: "3",
+          y: "3",
+          width: "18",
+          height: "18",
+          rx: "2"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: "3",
+          y1: "9",
+          x2: "21",
+          y2: "9"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: "3",
+          y1: "15",
+          x2: "21",
+          y2: "15"
+        }
+      )
+    ]
+  }
+);
+const GripVerticalIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "9",
+          cy: "5",
+          r: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "15",
+          cy: "5",
+          r: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "9",
+          cy: "12",
+          r: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "15",
+          cy: "12",
+          r: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "9",
+          cy: "19",
+          r: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "15",
+          cy: "19",
+          r: "1.5"
+        }
+      )
+    ]
+  }
+);
+const UndoIcon = ({ size = 16, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 7v6h6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })
+    ]
+  }
+);
+
+const useIsMobile = () => {
+  const [isMobile, setIsMobile] = react.useState(false);
+  react.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  return isMobile;
+};
+function JsonDiff({
+  oldData,
+  newData,
+  onChange,
+  theme = "light",
+  className = "",
+  initialSplitPosition = 50,
+  minPanelWidth = 20,
+  allowRevert = true
+}) {
+  const isDark = theme === "dark";
+  const isMobile = useIsMobile();
+  const [viewMode, setViewMode] = react.useState(isMobile ? "unified" : "split");
+  const [splitPosition, setSplitPosition] = react.useState(initialSplitPosition);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [currentData, setCurrentData] = react.useState(newData);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    setCurrentData(newData);
+  }, [newData]);
+  react.useEffect(() => {
+    if (isMobile && viewMode === "split") {
+      setViewMode("unified");
+    }
+  }, [isMobile, viewMode]);
+  const diffResult = react.useMemo(() => compareEditorData(oldData, currentData), [oldData, currentData]);
+  const handleMouseDown = react.useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleMouseMove = react.useCallback(
+    (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const newPosition = (e.clientX - rect.left) / rect.width * 100;
+      const clampedPosition = Math.max(minPanelWidth, Math.min(100 - minPanelWidth, newPosition));
+      setSplitPosition(clampedPosition);
+    },
+    [isDragging, minPanelWidth]
+  );
+  const handleMouseUp = react.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  react.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleRevert = react.useCallback(
+    (diff) => {
+      let newBlocks;
+      if (diff.type === "added" && diff.newBlock) {
+        newBlocks = currentData.blocks.filter((b) => b.id !== diff.newBlock.id);
+      } else if (diff.type === "removed" && diff.oldBlock) {
+        const oldIndex = oldData.blocks.findIndex((b) => b.id === diff.oldBlock.id);
+        newBlocks = [...currentData.blocks];
+        let insertIndex = newBlocks.length;
+        for (let i = oldIndex - 1; i >= 0; i--) {
+          const prevBlock = oldData.blocks[i];
+          const prevIndexInCurrent = newBlocks.findIndex((b) => b.id === prevBlock?.id);
+          if (prevIndexInCurrent !== -1) {
+            insertIndex = prevIndexInCurrent + 1;
+            break;
+          }
+        }
+        newBlocks.splice(insertIndex, 0, diff.oldBlock);
+      } else if (diff.type === "modified" && diff.oldBlock && diff.newBlock) {
+        newBlocks = currentData.blocks.map(
+          (b) => b.id === diff.newBlock.id ? diff.oldBlock : b
+        );
+      } else {
+        return;
+      }
+      const updatedData = {
+        ...currentData,
+        blocks: newBlocks,
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setCurrentData(updatedData);
+      onChange?.(updatedData);
+    },
+    [currentData, oldData, onChange]
+  );
+  const getDiffStyles = (type) => {
+    const styles = {
+      added: {
+        bg: isDark ? "bg-emerald-950/30" : "bg-emerald-50",
+        border: isDark ? "border-emerald-600" : "border-emerald-400",
+        badge: isDark ? "bg-emerald-900 text-emerald-300" : "bg-emerald-100 text-emerald-700",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(PlusCircleIcon, { size: 14 }),
+        label: "Added",
+        revertLabel: "Remove"
+      },
+      removed: {
+        bg: isDark ? "bg-red-950/30" : "bg-red-50",
+        border: isDark ? "border-red-600" : "border-red-400",
+        badge: isDark ? "bg-red-900 text-red-300" : "bg-red-100 text-red-700",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(MinusCircleIcon, { size: 14 }),
+        label: "Removed",
+        revertLabel: "Restore"
+      },
+      modified: {
+        bg: isDark ? "bg-amber-950/30" : "bg-amber-50",
+        border: isDark ? "border-amber-600" : "border-amber-400",
+        badge: isDark ? "bg-amber-900 text-amber-300" : "bg-amber-100 text-amber-700",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { size: 14 }),
+        label: "Modified",
+        revertLabel: "Revert"
+      },
+      unchanged: {
+        bg: "bg-transparent",
+        border: isDark ? "border-slate-700" : "border-slate-200",
+        badge: isDark ? "bg-slate-800 text-slate-400" : "bg-slate-100 text-slate-500",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 14 }),
+        label: "Unchanged",
+        revertLabel: ""
+      }
+    };
+    return styles[type];
+  };
+  const renderBlockContent = (block, diffType, showBadge, badgeLabel, diff) => {
+    const style = getDiffStyles(diffType);
+    const showRevert = allowRevert && diff && diffType !== "unchanged";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `relative rounded-xl border-2 ${style.border} ${style.bg} overflow-hidden h-full`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `flex items-center justify-between px-4 py-2 border-b ${isDark ? "border-slate-700" : "border-slate-200"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: `text-xs font-medium uppercase tracking-wide ${isDark ? "text-slate-400" : "text-slate-500"}`,
+                    children: getBlockTypeLabel(block)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  showBadge && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: `flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${style.badge}`,
+                      children: [
+                        style.icon,
+                        badgeLabel || style.label
+                      ]
+                    }
+                  ),
+                  showRevert && diff && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      onClick: () => handleRevert(diff),
+                      className: `flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-colors ${isDark ? "bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white" : "bg-slate-200 text-slate-600 hover:bg-slate-300 hover:text-slate-900"}`,
+                      title: style.revertLabel,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(UndoIcon, { size: 12 }),
+                        style.revertLabel
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            BlockRenderer,
+            {
+              block,
+              theme
+            }
+          ) })
+        ]
+      }
+    );
+  };
+  const renderPlaceholder = (message, diff, showRevert) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `h-full min-h-[100px] rounded-xl border-2 border-dashed flex flex-col items-center justify-center gap-3 ${isDark ? "border-slate-700 bg-slate-800/30" : "border-slate-200 bg-slate-50"}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${isDark ? "text-slate-500" : "text-slate-400"}`, children: message }),
+        allowRevert && diff && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleRevert(diff),
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${isDark ? "bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white" : "bg-slate-200 text-slate-600 hover:bg-slate-300 hover:text-slate-900"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(UndoIcon, { size: 12 }),
+              diff.type === "added" ? "Remove this block" : "Restore this block"
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const renderUnifiedDiffItem = (diff, index) => {
+    if (diff.type === "unchanged") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "opacity-60",
+          children: renderBlockContent(diff.oldBlock, "unchanged", false)
+        },
+        diff.oldBlock?.id || index
+      );
+    }
+    if (diff.type === "added") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderBlockContent(diff.newBlock, "added", true, void 0, diff) }, diff.newBlock?.id || index);
+    }
+    if (diff.type === "removed") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderBlockContent(diff.oldBlock, "removed", true, void 0, diff) }, diff.oldBlock?.id || index);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `absolute left-0 top-0 bottom-0 w-1 rounded-full ${isDark ? "bg-red-500" : "bg-red-400"}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-80", children: renderBlockContent(diff.oldBlock, "removed", true, "Before") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `absolute left-0 top-0 bottom-0 w-1 rounded-full ${isDark ? "bg-emerald-500" : "bg-emerald-400"}`
+              }
+            ),
+            renderBlockContent(diff.newBlock, "added", true, "After", diff)
+          ] })
+        ]
+      },
+      diff.oldBlock?.id || index
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `json-diff w-full h-full flex flex-col ${isDark ? "bg-slate-900" : "bg-white"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `flex-shrink-0 flex flex-wrap items-center justify-between gap-4 p-4 border-b ${isDark ? "border-slate-700" : "border-slate-200"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm font-medium ${isDark ? "text-slate-300" : "text-slate-700"}`, children: "Changes:" }),
+                diffResult.summary.added > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: `inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-full ${isDark ? "bg-emerald-900/50 text-emerald-400" : "bg-emerald-100 text-emerald-700"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(PlusCircleIcon, { size: 12 }),
+                      diffResult.summary.added,
+                      " added"
+                    ]
+                  }
+                ),
+                diffResult.summary.removed > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: `inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-full ${isDark ? "bg-red-900/50 text-red-400" : "bg-red-100 text-red-700"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(MinusCircleIcon, { size: 12 }),
+                      diffResult.summary.removed,
+                      " removed"
+                    ]
+                  }
+                ),
+                diffResult.summary.modified > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: `inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-full ${isDark ? "bg-amber-900/50 text-amber-400" : "bg-amber-100 text-amber-700"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { size: 12 }),
+                      diffResult.summary.modified,
+                      " modified"
+                    ]
+                  }
+                ),
+                diffResult.summary.added === 0 && diffResult.summary.removed === 0 && diffResult.summary.modified === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${isDark ? "text-slate-400" : "text-slate-500"}`, children: "No changes detected" })
+              ] }),
+              !isMobile && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `flex items-center rounded-lg p-1 ${isDark ? "bg-slate-800" : "bg-slate-100"}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => setViewMode("split"),
+                        className: `flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${viewMode === "split" ? isDark ? "bg-slate-700 text-white" : "bg-white text-slate-900 shadow-sm" : isDark ? "text-slate-400 hover:text-slate-200" : "text-slate-600 hover:text-slate-900"}`,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(SplitIcon, { size: 14 }),
+                          "Split"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => setViewMode("unified"),
+                        className: `flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${viewMode === "unified" ? isDark ? "bg-slate-700 text-white" : "bg-white text-slate-900 shadow-sm" : isDark ? "text-slate-400 hover:text-slate-200" : "text-slate-600 hover:text-slate-900"}`,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(UnifiedIcon, { size: 14 }),
+                          "Unified"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto relative", children: viewMode === "split" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "sticky top-1/2 -translate-y-1/2 z-30 pointer-events-none",
+              style: { marginLeft: `calc(${splitPosition}% - 20px)`, height: 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `pointer-events-auto w-10 h-10 rounded-xl cursor-col-resize flex items-center justify-center transition-all ${isDragging ? "bg-indigo-500 scale-110 shadow-lg" : isDark ? "bg-slate-700 hover:bg-indigo-500 shadow-md" : "bg-slate-200 hover:bg-indigo-500 shadow-md"}`,
+                  onMouseDown: handleMouseDown,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    GripVerticalIcon,
+                    {
+                      size: 18,
+                      className: `transition-colors ${isDragging ? "text-white" : isDark ? "text-slate-400" : "text-slate-500"}`
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `absolute top-0 bottom-0 w-px transition-colors ${isDragging ? "bg-indigo-500" : isDark ? "bg-slate-700" : "bg-slate-300"}`,
+              style: { left: `${splitPosition}%` }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex mb-4 sticky top-0 z-20 py-2 -mx-4 px-4",
+                style: {
+                  background: isDark ? "rgb(15 23 42)" : "white"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: { width: `${splitPosition}%` },
+                      className: `flex-shrink-0 pr-6 pb-2 border-b ${isDark ? "border-slate-700" : "border-slate-200"}`,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "h3",
+                        {
+                          className: `text-sm font-semibold uppercase tracking-wide ${isDark ? "text-slate-400" : "text-slate-500"}`,
+                          children: "📄 Original"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: { width: `${100 - splitPosition}%` },
+                      className: `flex-shrink-0 pl-6 pb-2 border-b ${isDark ? "border-slate-700" : "border-slate-200"}`,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "h3",
+                        {
+                          className: `text-sm font-semibold uppercase tracking-wide ${isDark ? "text-slate-400" : "text-slate-500"}`,
+                          children: "✨ Modified"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: diffResult.blocks.map((diff, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: { width: `${splitPosition}%` },
+                      className: "flex-shrink-0 pr-6",
+                      children: diff.type === "added" ? renderPlaceholder("New block added →", diff) : diff.type === "removed" ? renderBlockContent(diff.oldBlock, "removed", true, void 0, diff) : diff.type === "modified" ? renderBlockContent(diff.oldBlock, "modified", true, "Before") : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60 h-full", children: renderBlockContent(diff.oldBlock, "unchanged", false) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: { width: `${100 - splitPosition}%` },
+                      className: "flex-shrink-0 pl-6",
+                      children: diff.type === "removed" ? renderPlaceholder("← Block removed", diff) : diff.type === "added" ? renderBlockContent(diff.newBlock, "added", true, void 0, diff) : diff.type === "modified" ? renderBlockContent(diff.newBlock, "modified", true, "After", diff) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60 h-full", children: renderBlockContent(diff.newBlock, "unchanged", false) })
+                    }
+                  )
+                ]
+              },
+              diff.oldBlock?.id || diff.newBlock?.id || idx
+            )) })
+          ] })
+        ] }) : (
+          /* Unified View */
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 max-w-4xl mx-auto", children: diffResult.blocks.map((diff, idx) => renderUnifiedDiffItem(diff, idx)) }) })
+        ) })
+      ]
+    }
+  );
+}
+
 exports.ALIGNMENT_CLASSES = ALIGNMENT_CLASSES;
+exports.BlockRenderer = BlockRenderer;
 exports.CALLOUT_ICONS = CALLOUT_ICONS;
 exports.CALLOUT_LABELS = CALLOUT_LABELS;
 exports.CALLOUT_VARIANT_STYLES = CALLOUT_VARIANT_STYLES;
 exports.DIVIDER_STYLE_CLASSES = DIVIDER_STYLE_CLASSES;
 exports.FONT_SIZE_CLASSES = FONT_SIZE_CLASSES;
+exports.JsonDiff = JsonDiff;
 exports.PagesEditor = PagesEditor;
 exports.QUOTE_STYLE_CLASSES = QUOTE_STYLE_CLASSES;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 exports.cloneBlock = cloneBlock;
+exports.compareEditorData = compareEditorData;
 exports.createCalloutBlock = createCalloutBlock;
 exports.createCodeBlock = createCodeBlock;
 exports.createDividerBlock = createDividerBlock;
@@ -3491,11 +4425,16 @@ exports.createListBlock = createListBlock;
 exports.createQuoteBlock = createQuoteBlock;
 exports.createTableBlock = createTableBlock;
 exports.createTextBlock = createTextBlock;
+exports.deepEqual = deepEqual;
 exports.fileToBase64 = fileToBase64;
+exports.formatValue = formatValue;
 exports.generateId = generateId;
+exports.getBlockPreview = getBlockPreview;
+exports.getBlockTypeLabel = getBlockTypeLabel;
 exports.getMutedTextClass = getMutedTextClass;
 exports.getPlaceholderClass = getPlaceholderClass;
 exports.getPrimaryTextClass = getPrimaryTextClass;
+exports.getPropertyChanges = getPropertyChanges;
 exports.getSecondaryTextClass = getSecondaryTextClass;
 exports.getSmallToolbarButtonClass = getSmallToolbarButtonClass;
 exports.getToolbarButtonClass = getToolbarButtonClass;