@techrox/page-studio-form 1.0.0

package/dist/index.js

@@ -0,0 +1,2792 @@
+// src/PageStudioForm.jsx
+import { createContext, useContext, useEffect as useEffect3, useRef, useState as useState3, useTransition as useTransition2 } from "react";
+import {
+  Form as Form2,
+  Input as Input2,
+  Switch,
+  Button as Button3,
+  Space as Space3,
+  Tabs as Tabs2,
+  Alert as Alert2,
+  App as AntdApp2,
+  Popconfirm as Popconfirm2,
+  Typography as Typography3,
+  Card as Card2,
+  Segmented as Segmented2
+} from "antd";
+import {
+  ArrowLeftOutlined,
+  SaveOutlined,
+  DeleteOutlined as DeleteOutlined2,
+  PlusOutlined as PlusOutlined2,
+  MinusCircleOutlined,
+  EyeOutlined,
+  HolderOutlined,
+  ReloadOutlined as ReloadOutlined2,
+  DesktopOutlined,
+  MobileOutlined,
+  TabletOutlined
+} from "@ant-design/icons";
+import {
+  DndContext,
+  PointerSensor,
+  KeyboardSensor,
+  closestCenter,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// src/RichText.jsx
+import { useEffect, useMemo, useState } from "react";
+import {
+  useEditor,
+  EditorContent,
+  BubbleMenu,
+  FloatingMenu
+} from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import TextAlign from "@tiptap/extension-text-align";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import CharacterCount from "@tiptap/extension-character-count";
+import Typography from "@tiptap/extension-typography";
+import {
+  Button,
+  Divider,
+  Dropdown,
+  Form,
+  Input,
+  Modal,
+  Popover,
+  Space,
+  Tabs,
+  Tag,
+  Tooltip,
+  Typography as AntTypography,
+  Upload,
+  message as antdMessage
+} from "antd";
+import {
+  BoldOutlined,
+  ItalicOutlined,
+  UnderlineOutlined,
+  StrikethroughOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+  CheckSquareOutlined,
+  LinkOutlined,
+  PictureOutlined,
+  TableOutlined,
+  ClearOutlined,
+  UndoOutlined,
+  RedoOutlined,
+  AlignLeftOutlined,
+  AlignCenterOutlined,
+  AlignRightOutlined,
+  CodeOutlined,
+  BgColorsOutlined,
+  HighlightOutlined,
+  MinusOutlined,
+  BlockOutlined,
+  DownOutlined,
+  PlusOutlined,
+  UploadOutlined,
+  LoadingOutlined,
+  AppstoreOutlined,
+  ColumnWidthOutlined,
+  VerticalAlignTopOutlined,
+  VerticalAlignMiddleOutlined,
+  VerticalAlignBottomOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ShareAltOutlined,
+  MailOutlined,
+  ExclamationCircleOutlined
+} from "@ant-design/icons";
+
+// src/CustomBlocks.js
+import { Node, mergeAttributes } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+var vAlignAttrs = {
+  verticalAlign: {
+    default: "top",
+    parseHTML: (el) => el.style?.verticalAlign || el.getAttribute("data-valign") || "top",
+    renderHTML: (attrs) => ({
+      "data-valign": attrs.verticalAlign,
+      style: `vertical-align: ${attrs.verticalAlign};`
+    })
+  }
+};
+var CiqTableCell = TableCell.extend({
+  addAttributes() {
+    return { ...this.parent?.(), ...vAlignAttrs };
+  }
+});
+var CiqTableHeader = TableHeader.extend({
+  addAttributes() {
+    return { ...this.parent?.(), ...vAlignAttrs };
+  }
+});
+var CiqImage = Image.extend({
+  name: "ciqImage",
+  // Inline images don't get alignment — we use block images so we can wrap
+  // them in a container div and apply text-align.
+  inline: false,
+  group: "block",
+  draggable: true,
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: "center",
+        parseHTML: (el) => el.getAttribute("data-align") || "center",
+        renderHTML: (attrs) => ({ "data-align": attrs.align })
+      },
+      width: {
+        default: "medium",
+        // 'small' | 'medium' | 'large' | 'full'
+        parseHTML: (el) => el.getAttribute("data-width") || "medium",
+        renderHTML: (attrs) => ({ "data-width": attrs.width })
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    const { align, width, ...rest } = HTMLAttributes;
+    return [
+      "div",
+      {
+        class: `tps-block-image tps-img-${width || "medium"}`,
+        "data-align": align || "center"
+      },
+      ["img", mergeAttributes(this.options.HTMLAttributes, rest)]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div.tps-block-image > img",
+        getAttrs: (img) => {
+          const wrapper = img.closest(".tps-block-image");
+          return {
+            src: img.getAttribute("src"),
+            alt: img.getAttribute("alt"),
+            title: img.getAttribute("title"),
+            align: wrapper?.getAttribute("data-align") || "center",
+            width: wrapper?.className.match(/tps-img-(small|medium|large|full)/)?.[1] || "medium"
+          };
+        }
+      },
+      // Fallback: legacy plain <img> tags
+      { tag: 'img[src]:not([src^="data:"])' }
+    ];
+  }
+});
+var Column = Node.create({
+  name: "column",
+  group: "column",
+  // Allow any block content inside — paragraphs, headings, lists, images.
+  content: "block+",
+  isolating: true,
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div.tps-block-column" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, { class: "tps-block-column" }),
+      0
+    ];
+  }
+});
+var Columns = Node.create({
+  name: "columns",
+  group: "block",
+  content: "column{2,4}",
+  // 2–4 columns
+  defining: true,
+  addAttributes() {
+    return {
+      cols: {
+        default: 2,
+        parseHTML: (el) => Number(el.getAttribute("data-cols")) || 2,
+        renderHTML: (attrs) => ({ "data-cols": attrs.cols })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div.tps-block-columns" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const cols = HTMLAttributes["data-cols"] || HTMLAttributes.cols || 2;
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: `tps-block-columns tps-cols-${cols}`
+      }),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      insertColumns: (cols = 2) => ({ commands }) => {
+        const n = Math.max(2, Math.min(4, Number(cols) || 2));
+        return commands.insertContent({
+          type: this.name,
+          attrs: { cols: n },
+          content: Array.from({ length: n }, () => ({
+            type: "column",
+            content: [
+              { type: "paragraph" }
+            ]
+          }))
+        });
+      }
+    };
+  }
+});
+var Callout = Node.create({
+  name: "callout",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      tone: {
+        default: "info",
+        // 'info' | 'success' | 'warning' | 'danger'
+        parseHTML: (el) => el.getAttribute("data-tone") || "info",
+        renderHTML: (attrs) => ({ "data-tone": attrs.tone })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div.tps-block-callout" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const tone = HTMLAttributes["data-tone"] || "info";
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: `tps-block-callout tps-callout-${tone}`
+      }),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      insertCallout: (tone = "info") => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: { tone },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Highlight something important here." }]
+            }
+          ]
+        });
+      }
+    };
+  }
+});
+var ShareBlock = Node.create({
+  name: "shareBlock",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addAttributes() {
+    return {
+      label: {
+        default: "Share this page",
+        parseHTML: (el) => el.getAttribute("data-label") || "Share this page",
+        renderHTML: (attrs) => ({ "data-label": attrs.label })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div.tps-block-share" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const label = HTMLAttributes["data-label"] || "Share this page";
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, { class: "tps-block-share" }),
+      ["div", { class: "tps-block-share-label" }, label],
+      [
+        "div",
+        { class: "tps-block-share-row" },
+        [
+          "a",
+          {
+            class: "tps-block-share-btn",
+            href: "https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fpagestudio.dev",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          "LinkedIn"
+        ],
+        [
+          "a",
+          {
+            class: "tps-block-share-btn",
+            href: "mailto:?subject=Page%20Studio&body=Thought%20you%27d%20find%20this%20interesting%3A%20https%3A%2F%2Fpagestudio.dev"
+          },
+          "Email"
+        ],
+        [
+          "a",
+          {
+            class: "tps-block-share-btn",
+            href: "https://twitter.com/intent/tweet?url=https%3A%2F%2Fpagestudio.dev",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          "X / Twitter"
+        ]
+      ]
+    ];
+  },
+  addCommands() {
+    return {
+      insertShareBlock: () => ({ commands }) => commands.insertContent({ type: this.name })
+    };
+  }
+});
+var SubscribeBlock = Node.create({
+  name: "subscribeBlock",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addAttributes() {
+    return {
+      heading: {
+        default: "Stay in the loop",
+        parseHTML: (el) => el.getAttribute("data-heading") || "Stay in the loop",
+        renderHTML: (attrs) => ({ "data-heading": attrs.heading })
+      },
+      body: {
+        default: "One short email when we publish \u2014 never more.",
+        parseHTML: (el) => el.getAttribute("data-body") || "",
+        renderHTML: (attrs) => ({ "data-body": attrs.body })
+      },
+      button: {
+        default: "Subscribe",
+        parseHTML: (el) => el.getAttribute("data-button") || "Subscribe",
+        renderHTML: (attrs) => ({ "data-button": attrs.button })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div.tps-block-subscribe" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const heading = HTMLAttributes["data-heading"] || "Stay in the loop";
+    const body = HTMLAttributes["data-body"] || "";
+    const button = HTMLAttributes["data-button"] || "Subscribe";
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, { class: "tps-block-subscribe" }),
+      ["h3", { class: "tps-block-subscribe-heading" }, heading],
+      body ? ["p", { class: "tps-block-subscribe-body" }, body] : "",
+      [
+        "form",
+        { class: "tps-block-subscribe-form", action: "/api/leads", method: "post" },
+        ["input", { type: "hidden", name: "source", value: "newsletter" }],
+        [
+          "input",
+          {
+            type: "email",
+            name: "email",
+            required: "true",
+            placeholder: "you@company.com",
+            class: "tps-block-subscribe-input"
+          }
+        ],
+        ["button", { type: "submit", class: "tps-block-subscribe-button" }, button]
+      ]
+    ];
+  },
+  addCommands() {
+    return {
+      insertSubscribeBlock: () => ({ commands }) => commands.insertContent({ type: this.name })
+    };
+  }
+});
+
+// src/RichText.jsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function defaultUploadMedia() {
+  throw new Error(
+    "@techrox/page-studio-form: RichText was used without an `uploadMedia` prop. Pass a function `(FormData) => Promise<{ url }>` to enable image uploads."
+  );
+}
+var { Text } = AntTypography;
+var HEADING_OPTIONS = [
+  { key: "p", label: "Paragraph" },
+  { key: "h1", label: "Heading 1" },
+  { key: "h2", label: "Heading 2" },
+  { key: "h3", label: "Heading 3" },
+  { key: "h4", label: "Heading 4" }
+];
+var TEXT_COLORS = [
+  "#0F172A",
+  "#475569",
+  "#0F766E",
+  "#0B5550",
+  "#F59E0B",
+  "#D97706",
+  "#DC2626",
+  "#2563EB",
+  "#7C3AED",
+  "#059669"
+];
+var HIGHLIGHT_COLORS = [
+  "#FEF08A",
+  "#FECACA",
+  "#FED7AA",
+  "#A7F3D0",
+  "#BFDBFE",
+  "#E9D5FF",
+  "#FBCFE8",
+  "#FDE68A"
+];
+var IMAGE_WIDTHS = [
+  { value: "small", label: "Small (40%)" },
+  { value: "medium", label: "Medium (60%)" },
+  { value: "large", label: "Large (80%)" },
+  { value: "full", label: "Full width" }
+];
+function RichText({
+  value = "",
+  onChange,
+  placeholder = "Type '/' for blocks, or just start writing\u2026",
+  minHeight = 280,
+  uploadMedia = defaultUploadMedia
+}) {
+  const [imageOpen, setImageOpen] = useState(false);
+  const [linkOpen, setLinkOpen] = useState(false);
+  const [editBlock, setEditBlock] = useState(null);
+  const editor = useEditor({
+    extensions: useMemo(
+      () => [
+        StarterKit.configure({
+          heading: { levels: [1, 2, 3, 4] },
+          codeBlock: { HTMLAttributes: { class: "tiptap-code" } }
+        }),
+        Underline,
+        Link.configure({
+          openOnClick: false,
+          autolink: true,
+          HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
+        }),
+        CiqImage.configure({ inline: false, allowBase64: false }),
+        Placeholder.configure({
+          placeholder: ({ node, editor: editor2 }) => {
+            if (node.type.name === "paragraph" && editor2.isEmpty) return placeholder;
+            return "";
+          },
+          showOnlyWhenEditable: true
+        }),
+        TextAlign.configure({ types: ["heading", "paragraph"] }),
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        Table.configure({ resizable: true, HTMLAttributes: { class: "tps-rich-table" } }),
+        TableRow,
+        CiqTableHeader,
+        CiqTableCell,
+        TaskList,
+        TaskItem.configure({ nested: true }),
+        CharacterCount,
+        Typography,
+        Columns,
+        Column,
+        Callout,
+        ShareBlock,
+        SubscribeBlock
+      ],
+      [placeholder]
+    ),
+    content: value || "",
+    onUpdate: ({ editor: editor2 }) => onChange?.(editor2.getHTML()),
+    immediatelyRender: false,
+    editorProps: {
+      attributes: { class: "tiptap", spellcheck: "true" },
+      handleDrop: (view, event) => {
+        const files = Array.from(event.dataTransfer?.files || []).filter(
+          (f) => f.type.startsWith("image/")
+        );
+        if (!files.length) return false;
+        event.preventDefault();
+        files.forEach((f) => uploadAndInsert(f, view, event, uploadMedia));
+        return true;
+      },
+      handlePaste: (view, event) => {
+        const files = Array.from(event.clipboardData?.files || []).filter(
+          (f) => f.type.startsWith("image/")
+        );
+        if (!files.length) return false;
+        event.preventDefault();
+        files.forEach((f) => uploadAndInsert(f, view, null, uploadMedia));
+        return true;
+      }
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    const current = editor.getHTML();
+    const next = value || "";
+    if (current === next) return;
+    if (current === "<p></p>" && next === "") return;
+    editor.commands.setContent(next, false);
+  }, [editor, value]);
+  if (!editor) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          border: "1px solid var(--tps-line)",
+          borderRadius: "var(--tps-radius)",
+          minHeight,
+          background: "#fff"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: "1px solid var(--tps-line)",
+        borderRadius: "var(--tps-radius)",
+        background: "#fff",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            editor,
+            onOpenLink: () => setLinkOpen(true),
+            onOpenImage: () => setImageOpen(true)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleMenu,
+          {
+            editor,
+            shouldShow: ({ editor: editor2, from, to }) => {
+              if (from === to) return false;
+              if (editor2.isActive("ciqImage") || editor2.isActive("table") || editor2.isActive("codeBlock") || editor2.isActive("shareBlock") || editor2.isActive("subscribeBlock")) return false;
+              return true;
+            },
+            tippyOptions: { duration: 100, placement: "top" },
+            pluginKey: "selectionBubble",
+            children: /* @__PURE__ */ jsx(SelectionFormatBar, { editor, onLink: () => setLinkOpen(true) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleMenu,
+          {
+            editor,
+            shouldShow: ({ editor: editor2 }) => editor2.isActive("ciqImage"),
+            tippyOptions: { duration: 100, placement: "top" },
+            pluginKey: "imageBubble",
+            children: /* @__PURE__ */ jsx(ImageBubble, { editor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleMenu,
+          {
+            editor,
+            shouldShow: ({ editor: editor2 }) => editor2.isActive("table"),
+            tippyOptions: { duration: 100, placement: "top" },
+            pluginKey: "tableBubble",
+            children: /* @__PURE__ */ jsx(TableBubble, { editor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleMenu,
+          {
+            editor,
+            shouldShow: ({ editor: editor2 }) => editor2.isActive("shareBlock") || editor2.isActive("subscribeBlock"),
+            tippyOptions: { duration: 100, placement: "top" },
+            pluginKey: "atomBlockBubble",
+            children: /* @__PURE__ */ jsx(
+              AtomBlockBubble,
+              {
+                editor,
+                onEdit: (kind) => setEditBlock(kind)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FloatingMenu,
+          {
+            editor,
+            shouldShow: ({ editor: editor2, state }) => {
+              const { $from } = state.selection;
+              const isEmptyParagraph = $from.parent.type.name === "paragraph" && $from.parent.content.size === 0;
+              return editor2.isFocused && isEmptyParagraph && !editor2.isActive("table");
+            },
+            tippyOptions: { duration: 100, placement: "left-start", offset: [0, 8] },
+            children: /* @__PURE__ */ jsx(BlockInsertMenu, { editor, onImage: () => setImageOpen(true) })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { padding: 16, minHeight }, children: /* @__PURE__ */ jsx(EditorContent, { editor }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "6px 14px",
+              borderTop: "1px solid var(--tps-line)",
+              background: "var(--tps-bg-soft)",
+              fontSize: 12,
+              color: "var(--tps-muted)",
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                editor.storage.characterCount.words(),
+                " words \xB7",
+                " ",
+                editor.storage.characterCount.characters(),
+                " characters"
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: "HTML output \xB7 drop or paste images to upload" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(LinkModal, { open: linkOpen, onClose: () => setLinkOpen(false), editor }),
+        /* @__PURE__ */ jsx(
+          ImageModal,
+          {
+            open: imageOpen,
+            onClose: () => setImageOpen(false),
+            editor,
+            uploadMedia
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BlockAttributeModal,
+          {
+            kind: editBlock,
+            open: !!editBlock,
+            onClose: () => setEditBlock(null),
+            editor
+          }
+        ),
+        /* @__PURE__ */ jsx(EditorStyles, {})
+      ]
+    }
+  );
+}
+async function uploadAndInsert(file, view, dropEvent, uploadMedia) {
+  try {
+    const fd = new FormData();
+    fd.append("file", file);
+    const { url } = await uploadMedia(fd);
+    if (!url) throw new Error("No URL returned");
+    const node = view.state.schema.nodes.ciqImage.create({
+      src: url,
+      alt: file.name,
+      align: "center",
+      width: "medium"
+    });
+    let pos;
+    if (dropEvent) {
+      const coords = view.posAtCoords({ left: dropEvent.clientX, top: dropEvent.clientY });
+      pos = coords?.pos ?? view.state.selection.from;
+    } else {
+      pos = view.state.selection.from;
+    }
+    const tr = view.state.tr.insert(pos, node);
+    view.dispatch(tr);
+  } catch (err) {
+    antdMessage.error(err.message || "Upload failed");
+  }
+}
+function Toolbar({ editor, onOpenLink, onOpenImage }) {
+  const headingValue = (() => {
+    if (editor.isActive("heading", { level: 1 })) return "h1";
+    if (editor.isActive("heading", { level: 2 })) return "h2";
+    if (editor.isActive("heading", { level: 3 })) return "h3";
+    if (editor.isActive("heading", { level: 4 })) return "h4";
+    return "p";
+  })();
+  const setHeading = (key) => {
+    if (key === "p") editor.chain().focus().setParagraph().run();
+    else editor.chain().focus().toggleHeading({ level: Number(key.slice(1)) }).run();
+  };
+  const insertBlockItems = [
+    { key: "image", label: "Image", icon: /* @__PURE__ */ jsx(PictureOutlined, {}), run: onOpenImage },
+    {
+      key: "table",
+      label: "Table (3\xD73)",
+      icon: /* @__PURE__ */ jsx(TableOutlined, {}),
+      run: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+    },
+    {
+      key: "cols2",
+      label: "2 columns",
+      icon: /* @__PURE__ */ jsx(AppstoreOutlined, {}),
+      run: () => editor.chain().focus().insertColumns(2).run()
+    },
+    {
+      key: "cols3",
+      label: "3 columns",
+      icon: /* @__PURE__ */ jsx(AppstoreOutlined, {}),
+      run: () => editor.chain().focus().insertColumns(3).run()
+    },
+    {
+      key: "cols4",
+      label: "4 columns",
+      icon: /* @__PURE__ */ jsx(AppstoreOutlined, {}),
+      run: () => editor.chain().focus().insertColumns(4).run()
+    },
+    {
+      key: "callout-info",
+      label: "Callout (info)",
+      icon: /* @__PURE__ */ jsx(ExclamationCircleOutlined, {}),
+      run: () => editor.chain().focus().insertCallout("info").run()
+    },
+    {
+      key: "callout-success",
+      label: "Callout (success)",
+      icon: /* @__PURE__ */ jsx(ExclamationCircleOutlined, { style: { color: "#059669" } }),
+      run: () => editor.chain().focus().insertCallout("success").run()
+    },
+    {
+      key: "callout-warning",
+      label: "Callout (warning)",
+      icon: /* @__PURE__ */ jsx(ExclamationCircleOutlined, { style: { color: "#D97706" } }),
+      run: () => editor.chain().focus().insertCallout("warning").run()
+    },
+    {
+      key: "share",
+      label: "Share buttons",
+      icon: /* @__PURE__ */ jsx(ShareAltOutlined, {}),
+      run: () => editor.chain().focus().insertShareBlock().run()
+    },
+    {
+      key: "subscribe",
+      label: "Subscribe form",
+      icon: /* @__PURE__ */ jsx(MailOutlined, {}),
+      run: () => editor.chain().focus().insertSubscribeBlock().run()
+    }
+  ];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 4,
+        padding: 8,
+        background: "var(--tps-bg-soft)",
+        borderBottom: "1px solid var(--tps-line)",
+        alignItems: "center",
+        position: "sticky",
+        top: 0,
+        zIndex: 5
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Undo (\u2318Z)",
+            icon: /* @__PURE__ */ jsx(UndoOutlined, {}),
+            onClick: () => editor.chain().focus().undo().run(),
+            disabled: !editor.can().undo()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Redo (\u2318\u21E7Z)",
+            icon: /* @__PURE__ */ jsx(RedoOutlined, {}),
+            onClick: () => editor.chain().focus().redo().run(),
+            disabled: !editor.can().redo()
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            trigger: ["click"],
+            menu: {
+              items: HEADING_OPTIONS.map((o) => ({ key: o.key, label: o.label })),
+              selectedKeys: [headingValue],
+              onClick: ({ key }) => setHeading(key)
+            },
+            children: /* @__PURE__ */ jsxs(Button, { size: "small", type: "text", style: { minWidth: 110 }, children: [
+              HEADING_OPTIONS.find((o) => o.key === headingValue)?.label,
+              /* @__PURE__ */ jsx(DownOutlined, { style: { fontSize: 10, marginLeft: 4 } })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Bold (\u2318B)",
+            icon: /* @__PURE__ */ jsx(BoldOutlined, {}),
+            active: editor.isActive("bold"),
+            onClick: () => editor.chain().focus().toggleBold().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Italic (\u2318I)",
+            icon: /* @__PURE__ */ jsx(ItalicOutlined, {}),
+            active: editor.isActive("italic"),
+            onClick: () => editor.chain().focus().toggleItalic().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Underline (\u2318U)",
+            icon: /* @__PURE__ */ jsx(UnderlineOutlined, {}),
+            active: editor.isActive("underline"),
+            onClick: () => editor.chain().focus().toggleUnderline().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Strikethrough",
+            icon: /* @__PURE__ */ jsx(StrikethroughOutlined, {}),
+            active: editor.isActive("strike"),
+            onClick: () => editor.chain().focus().toggleStrike().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            title: "Text color",
+            icon: /* @__PURE__ */ jsx(BgColorsOutlined, {}),
+            colors: TEXT_COLORS,
+            onPick: (c) => editor.chain().focus().setColor(c).run(),
+            onClear: () => editor.chain().focus().unsetColor().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            title: "Highlight",
+            icon: /* @__PURE__ */ jsx(HighlightOutlined, {}),
+            colors: HIGHLIGHT_COLORS,
+            onPick: (c) => editor.chain().focus().toggleHighlight({ color: c }).run(),
+            onClear: () => editor.chain().focus().unsetHighlight().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Align left",
+            icon: /* @__PURE__ */ jsx(AlignLeftOutlined, {}),
+            active: editor.isActive({ textAlign: "left" }),
+            onClick: () => editor.chain().focus().setTextAlign("left").run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Align center",
+            icon: /* @__PURE__ */ jsx(AlignCenterOutlined, {}),
+            active: editor.isActive({ textAlign: "center" }),
+            onClick: () => editor.chain().focus().setTextAlign("center").run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Align right",
+            icon: /* @__PURE__ */ jsx(AlignRightOutlined, {}),
+            active: editor.isActive({ textAlign: "right" }),
+            onClick: () => editor.chain().focus().setTextAlign("right").run()
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Bulleted list",
+            icon: /* @__PURE__ */ jsx(UnorderedListOutlined, {}),
+            active: editor.isActive("bulletList"),
+            onClick: () => editor.chain().focus().toggleBulletList().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Numbered list",
+            icon: /* @__PURE__ */ jsx(OrderedListOutlined, {}),
+            active: editor.isActive("orderedList"),
+            onClick: () => editor.chain().focus().toggleOrderedList().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Task list",
+            icon: /* @__PURE__ */ jsx(CheckSquareOutlined, {}),
+            active: editor.isActive("taskList"),
+            onClick: () => editor.chain().focus().toggleTaskList().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Quote",
+            icon: /* @__PURE__ */ jsx(BlockOutlined, {}),
+            active: editor.isActive("blockquote"),
+            onClick: () => editor.chain().focus().toggleBlockquote().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Code block",
+            icon: /* @__PURE__ */ jsx(CodeOutlined, {}),
+            active: editor.isActive("codeBlock"),
+            onClick: () => editor.chain().focus().toggleCodeBlock().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Horizontal rule",
+            icon: /* @__PURE__ */ jsx(MinusOutlined, {}),
+            onClick: () => editor.chain().focus().setHorizontalRule().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            title: "Insert / edit link",
+            icon: /* @__PURE__ */ jsx(LinkOutlined, {}),
+            active: editor.isActive("link"),
+            onClick: onOpenLink
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            trigger: ["click"],
+            placement: "bottomLeft",
+            menu: {
+              items: insertBlockItems.map((i) => ({ key: i.key, label: i.label, icon: i.icon })),
+              onClick: ({ key }) => insertBlockItems.find((i) => i.key === key)?.run()
+            },
+            children: /* @__PURE__ */ jsxs(Button, { size: "small", type: "text", icon: /* @__PURE__ */ jsx(PlusOutlined, {}), style: { paddingInline: 8 }, children: [
+              "Insert ",
+              /* @__PURE__ */ jsx(DownOutlined, { style: { fontSize: 10 } })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Clear formatting", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: "text",
+            icon: /* @__PURE__ */ jsx(ClearOutlined, {}),
+            onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run()
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ToolButton({ title, icon, active, onClick, disabled }) {
+  return /* @__PURE__ */ jsx(Tooltip, { title, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      type: active ? "primary" : "text",
+      icon,
+      disabled,
+      onClick
+    }
+  ) });
+}
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx(Divider, { type: "vertical", style: { height: 22, margin: "0 2px", borderColor: "var(--tps-line)" } });
+}
+function SelectionFormatBar({ editor, onLink }) {
+  return /* @__PURE__ */ jsxs(
+    Space,
+    {
+      size: 2,
+      style: {
+        background: "#0F172A",
+        padding: 4,
+        borderRadius: 6,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.25)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BubbleBtn,
+          {
+            title: "Bold",
+            icon: /* @__PURE__ */ jsx(BoldOutlined, {}),
+            active: editor.isActive("bold"),
+            onClick: () => editor.chain().focus().toggleBold().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleBtn,
+          {
+            title: "Italic",
+            icon: /* @__PURE__ */ jsx(ItalicOutlined, {}),
+            active: editor.isActive("italic"),
+            onClick: () => editor.chain().focus().toggleItalic().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleBtn,
+          {
+            title: "Underline",
+            icon: /* @__PURE__ */ jsx(UnderlineOutlined, {}),
+            active: editor.isActive("underline"),
+            onClick: () => editor.chain().focus().toggleUnderline().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleBtn,
+          {
+            title: "Strike",
+            icon: /* @__PURE__ */ jsx(StrikethroughOutlined, {}),
+            active: editor.isActive("strike"),
+            onClick: () => editor.chain().focus().toggleStrike().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical", style: { background: "rgba(255,255,255,0.18)", height: 18, margin: "0 2px" } }),
+        /* @__PURE__ */ jsx(
+          BubbleBtn,
+          {
+            title: "Inline code",
+            icon: /* @__PURE__ */ jsx(CodeOutlined, {}),
+            active: editor.isActive("code"),
+            onClick: () => editor.chain().focus().toggleCode().run()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BubbleBtn,
+          {
+            title: "Link",
+            icon: /* @__PURE__ */ jsx(LinkOutlined, {}),
+            active: editor.isActive("link"),
+            onClick: onLink
+          }
+        )
+      ]
+    }
+  );
+}
+function BubbleBtn({ title, icon, active, onClick }) {
+  return /* @__PURE__ */ jsx(Tooltip, { title, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      type: "text",
+      icon,
+      onClick,
+      style: { color: active ? "#F59E0B" : "#fff" }
+    }
+  ) });
+}
+function ImageBubble({ editor }) {
+  const attrs = editor.getAttributes("ciqImage");
+  const setAlign = (align) => editor.chain().focus().updateAttributes("ciqImage", { align }).run();
+  const setWidth = (width) => editor.chain().focus().updateAttributes("ciqImage", { width }).run();
+  const remove = () => editor.chain().focus().deleteSelection().run();
+  return /* @__PURE__ */ jsxs(
+    Space,
+    {
+      size: 2,
+      style: {
+        background: "#fff",
+        padding: 4,
+        border: "1px solid var(--tps-line)",
+        borderRadius: 6,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: "Align left", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: attrs.align === "left" ? "primary" : "text",
+            icon: /* @__PURE__ */ jsx(AlignLeftOutlined, {}),
+            onClick: () => setAlign("left")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Align center", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: attrs.align === "center" ? "primary" : "text",
+            icon: /* @__PURE__ */ jsx(AlignCenterOutlined, {}),
+            onClick: () => setAlign("center")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Align right", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: attrs.align === "right" ? "primary" : "text",
+            icon: /* @__PURE__ */ jsx(AlignRightOutlined, {}),
+            onClick: () => setAlign("right")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            trigger: ["click"],
+            menu: {
+              items: IMAGE_WIDTHS.map((w) => ({ key: w.value, label: w.label })),
+              selectedKeys: [attrs.width || "medium"],
+              onClick: ({ key }) => setWidth(key)
+            },
+            children: /* @__PURE__ */ jsxs(Button, { size: "small", type: "text", icon: /* @__PURE__ */ jsx(ColumnWidthOutlined, {}), children: [
+              IMAGE_WIDTHS.find((w) => w.value === (attrs.width || "medium"))?.label,
+              /* @__PURE__ */ jsx(DownOutlined, { style: { fontSize: 10, marginLeft: 4 } })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Edit alt text", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: "text",
+            icon: /* @__PURE__ */ jsx(EditOutlined, {}),
+            onClick: () => {
+              const alt = window.prompt("Alt text", attrs.alt || "");
+              if (alt !== null) {
+                editor.chain().focus().updateAttributes("ciqImage", { alt }).run();
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Delete image", children: /* @__PURE__ */ jsx(Button, { size: "small", type: "text", danger: true, icon: /* @__PURE__ */ jsx(DeleteOutlined, {}), onClick: remove }) })
+      ]
+    }
+  );
+}
+function TableBubble({ editor }) {
+  const cellAttrs = editor.getAttributes("tableCell");
+  const setVAlign = (verticalAlign) => {
+    editor.chain().focus().updateAttributes("tableCell", { verticalAlign }).run();
+    editor.chain().focus().updateAttributes("tableHeader", { verticalAlign }).run();
+  };
+  return /* @__PURE__ */ jsxs(
+    Space,
+    {
+      size: 4,
+      wrap: true,
+      style: {
+        background: "#fff",
+        padding: 4,
+        border: "1px solid var(--tps-line)",
+        borderRadius: 6,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+        maxWidth: 720
+      },
+      children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().addColumnBefore().run(), children: "+ col \u2190" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().addColumnAfter().run(), children: "+ col \u2192" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().deleteColumn().run(), children: "\u2212 col" }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().addRowBefore().run(), children: "+ row \u2191" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().addRowAfter().run(), children: "+ row \u2193" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().deleteRow().run(), children: "\u2212 row" }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().mergeCells().run(), children: "Merge" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().splitCell().run(), children: "Split" }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Top", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: cellAttrs.verticalAlign === "top" ? "primary" : "default",
+            icon: /* @__PURE__ */ jsx(VerticalAlignTopOutlined, {}),
+            onClick: () => setVAlign("top")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Middle", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: cellAttrs.verticalAlign === "middle" ? "primary" : "default",
+            icon: /* @__PURE__ */ jsx(VerticalAlignMiddleOutlined, {}),
+            onClick: () => setVAlign("middle")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Bottom", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: cellAttrs.verticalAlign === "bottom" ? "primary" : "default",
+            icon: /* @__PURE__ */ jsx(VerticalAlignBottomOutlined, {}),
+            onClick: () => setVAlign("bottom")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().toggleHeaderRow().run(), children: "Header row" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => editor.chain().focus().toggleHeaderColumn().run(), children: "Header col" }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", danger: true, onClick: () => editor.chain().focus().deleteTable().run(), children: "Delete" })
+      ]
+    }
+  );
+}
+function AtomBlockBubble({ editor, onEdit }) {
+  const kind = editor.isActive("shareBlock") ? "share" : editor.isActive("subscribeBlock") ? "subscribe" : null;
+  if (!kind) return null;
+  return /* @__PURE__ */ jsxs(
+    Space,
+    {
+      size: 4,
+      style: {
+        background: "#fff",
+        padding: 4,
+        border: "1px solid var(--tps-line)",
+        borderRadius: 6,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Tag, { color: kind === "share" ? "cyan" : "gold", style: { margin: 0 }, children: kind === "share" ? "Share block" : "Subscribe block" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", icon: /* @__PURE__ */ jsx(EditOutlined, {}), onClick: () => onEdit(kind), children: "Edit" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            type: "text",
+            danger: true,
+            icon: /* @__PURE__ */ jsx(DeleteOutlined, {}),
+            onClick: () => editor.chain().focus().deleteSelection().run()
+          }
+        )
+      ]
+    }
+  );
+}
+function BlockInsertMenu({ editor, onImage }) {
+  const items = [
+    { key: "h1", label: "Heading 1", run: () => editor.chain().focus().toggleHeading({ level: 1 }).run() },
+    { key: "h2", label: "Heading 2", run: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
+    { key: "h3", label: "Heading 3", run: () => editor.chain().focus().toggleHeading({ level: 3 }).run() },
+    { key: "ul", label: "Bulleted list", run: () => editor.chain().focus().toggleBulletList().run() },
+    { key: "ol", label: "Numbered list", run: () => editor.chain().focus().toggleOrderedList().run() },
+    { key: "task", label: "Task list", run: () => editor.chain().focus().toggleTaskList().run() },
+    { key: "quote", label: "Quote", run: () => editor.chain().focus().toggleBlockquote().run() },
+    { key: "code", label: "Code block", run: () => editor.chain().focus().toggleCodeBlock().run() },
+    { key: "hr", label: "Divider", run: () => editor.chain().focus().setHorizontalRule().run() },
+    { type: "divider" },
+    { key: "image", label: "Image", run: () => onImage() },
+    { key: "table", label: "Table", run: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
+    { key: "cols2", label: "2 columns", run: () => editor.chain().focus().insertColumns(2).run() },
+    { key: "cols3", label: "3 columns", run: () => editor.chain().focus().insertColumns(3).run() },
+    { key: "callout", label: "Callout", run: () => editor.chain().focus().insertCallout("info").run() },
+    { key: "share", label: "Share buttons", run: () => editor.chain().focus().insertShareBlock().run() },
+    { key: "subscribe", label: "Subscribe form", run: () => editor.chain().focus().insertSubscribeBlock().run() }
+  ];
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      trigger: ["click"],
+      placement: "bottomLeft",
+      menu: {
+        items: items.map(
+          (i, idx) => i.type === "divider" ? { type: "divider", key: `d${idx}` } : { key: i.key, label: i.label }
+        ),
+        onClick: ({ key }) => items.find((i) => i.key === key)?.run()
+      },
+      children: /* @__PURE__ */ jsx(Tooltip, { title: "Insert block", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          shape: "circle",
+          icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+          style: {
+            background: "#fff",
+            borderColor: "var(--tps-line)",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.08)"
+          }
+        }
+      ) })
+    }
+  );
+}
+function ColorSwatch({ title, icon, colors, onPick, onClear }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      trigger: "click",
+      placement: "bottomLeft",
+      content: /* @__PURE__ */ jsxs(Space, { direction: "vertical", size: 8, style: { width: 200 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }, children: colors.map((c) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              onPick(c);
+              setOpen(false);
+            },
+            style: {
+              width: 28,
+              height: 28,
+              background: c,
+              border: "1px solid var(--tps-line)",
+              borderRadius: 4,
+              cursor: "pointer"
+            },
+            title: c
+          },
+          c
+        )) }),
+        /* @__PURE__ */ jsx(Button, { size: "small", block: true, onClick: () => {
+          onClear();
+          setOpen(false);
+        }, children: "Clear" })
+      ] }),
+      children: /* @__PURE__ */ jsx(Tooltip, { title, children: /* @__PURE__ */ jsx(Button, { size: "small", type: "text", icon }) })
+    }
+  );
+}
+function LinkModal({ open, onClose, editor }) {
+  const [href, setHref] = useState("");
+  useEffect(() => {
+    if (open) setHref(editor.getAttributes("link").href || "");
+  }, [open, editor]);
+  const apply = () => {
+    if (!href) editor.chain().focus().unsetLink().run();
+    else editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      title: "Link",
+      open,
+      onCancel: onClose,
+      onOk: apply,
+      okText: "Apply",
+      okButtonProps: { disabled: !href && !editor.isActive("link") },
+      destroyOnClose: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "https://example.com",
+            value: href,
+            onChange: (e) => setHref(e.target.value),
+            onPressEnter: apply,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { type: "secondary", style: { fontSize: 12 }, children: "Leave blank and Apply to remove the link." })
+      ]
+    }
+  );
+}
+function ImageModal({ open, onClose, editor, uploadMedia }) {
+  const [tab, setTab] = useState("upload");
+  const [src, setSrc] = useState("");
+  const [alt, setAlt] = useState("");
+  const [uploading, setUploading] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setTab("upload");
+      setSrc("");
+      setAlt("");
+    }
+  }, [open]);
+  const apply = () => {
+    if (!src) return;
+    editor.chain().focus().insertContent({
+      type: "ciqImage",
+      attrs: { src, alt, align: "center", width: "medium" }
+    }).run();
+    onClose();
+  };
+  const beforeUpload = async (file) => {
+    if (!file.type.startsWith("image/")) {
+      antdMessage.error("Only image files are supported.");
+      return Upload.LIST_IGNORE;
+    }
+    setUploading(true);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      const { url } = await uploadMedia(fd);
+      setSrc(url);
+      if (!alt) setAlt(file.name.replace(/\.[^.]+$/, ""));
+    } catch (err) {
+      antdMessage.error(err.message || "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+    return Upload.LIST_IGNORE;
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      title: "Insert image",
+      open,
+      onCancel: onClose,
+      onOk: apply,
+      okText: "Insert",
+      okButtonProps: { disabled: !src },
+      destroyOnClose: true,
+      width: 560,
+      children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            activeKey: tab,
+            onChange: setTab,
+            items: [
+              {
+                key: "upload",
+                label: "Upload",
+                children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", size: 12, style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsxs(
+                    Upload.Dragger,
+                    {
+                      multiple: false,
+                      beforeUpload,
+                      showUploadList: false,
+                      disabled: uploading,
+                      accept: "image/*",
+                      children: [
+                        /* @__PURE__ */ jsx("p", { style: { fontSize: 28, margin: 0 }, children: uploading ? /* @__PURE__ */ jsx(LoadingOutlined, {}) : /* @__PURE__ */ jsx(UploadOutlined, {}) }),
+                        /* @__PURE__ */ jsx("p", { style: { marginTop: 4 }, children: uploading ? "Uploading\u2026" : "Click or drag an image" }),
+                        /* @__PURE__ */ jsx("p", { style: { color: "var(--tps-muted)", fontSize: 12 }, children: "JPG / PNG / WEBP / GIF / SVG \xB7 max 10MB" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: "Alt text (for accessibility & SEO)",
+                      value: alt,
+                      onChange: (e) => setAlt(e.target.value)
+                    }
+                  ),
+                  src && /* @__PURE__ */ jsx(Tag, { color: "green", style: { width: "fit-content" }, children: "Uploaded" })
+                ] })
+              },
+              {
+                key: "url",
+                label: "From URL",
+                children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", size: 12, style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: "https://\u2026",
+                      value: src,
+                      onChange: (e) => setSrc(e.target.value),
+                      autoFocus: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: "Alt text (for accessibility & SEO)",
+                      value: alt,
+                      onChange: (e) => setAlt(e.target.value)
+                    }
+                  )
+                ] })
+              }
+            ]
+          }
+        ),
+        src && /* @__PURE__ */ jsx("div", { style: { marginTop: 12, border: "1px solid var(--tps-line)", padding: 8, borderRadius: 6 }, children: /* @__PURE__ */ jsx("img", { src, alt, style: { maxWidth: "100%", display: "block" } }) })
+      ]
+    }
+  );
+}
+function BlockAttributeModal({ kind, open, onClose, editor }) {
+  const [form] = Form.useForm();
+  const isShare = kind === "share";
+  const nodeName = isShare ? "shareBlock" : "subscribeBlock";
+  useEffect(() => {
+    if (!open) return;
+    const attrs = editor.getAttributes(nodeName);
+    form.setFieldsValue(attrs);
+  }, [open, editor, nodeName, form]);
+  const apply = async () => {
+    const values = await form.validateFields();
+    editor.chain().focus().updateAttributes(nodeName, values).run();
+    onClose();
+  };
+  if (!kind) return null;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      title: isShare ? "Share block" : "Subscribe block",
+      open,
+      onCancel: onClose,
+      onOk: apply,
+      okText: "Apply",
+      destroyOnClose: true,
+      children: /* @__PURE__ */ jsx(Form, { form, layout: "vertical", preserve: false, children: isShare ? /* @__PURE__ */ jsx(Form.Item, { label: "Label", name: "label", children: /* @__PURE__ */ jsx(Input, { placeholder: "Share this page" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Form.Item, { label: "Heading", name: "heading", children: /* @__PURE__ */ jsx(Input, { placeholder: "Stay in the loop" }) }),
+        /* @__PURE__ */ jsx(Form.Item, { label: "Body", name: "body", children: /* @__PURE__ */ jsx(Input.TextArea, { rows: 2, placeholder: "One short email when we publish \u2014 never more." }) }),
+        /* @__PURE__ */ jsx(Form.Item, { label: "Button label", name: "button", children: /* @__PURE__ */ jsx(Input, { placeholder: "Subscribe" }) })
+      ] }) })
+    }
+  );
+}
+function EditorStyles() {
+  return /* @__PURE__ */ jsx("style", { jsx: true, global: true, children: `
+      .tiptap {
+        outline: none;
+        font-size: 15px;
+        line-height: 1.65;
+        color: var(--tps-ink);
+        min-height: 100%;
+      }
+      .tiptap > * + * { margin-top: 0.75em; }
+      .tiptap p.is-editor-empty:first-child::before {
+        content: attr(data-placeholder);
+        float: left;
+        color: var(--tps-muted);
+        pointer-events: none;
+        height: 0;
+      }
+      .tiptap h1 { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 1em 0 0.5em; }
+      .tiptap h2 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 1em 0 0.5em; }
+      .tiptap h3 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 1em 0 0.4em; }
+      .tiptap h4 { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 1em 0 0.4em; }
+      .tiptap p { margin: 0; }
+      .tiptap ul, .tiptap ol { padding-left: 22px; }
+      .tiptap ul[data-type='taskList'] { list-style: none; padding-left: 0; }
+      .tiptap ul[data-type='taskList'] li { display: flex; gap: 8px; align-items: flex-start; }
+      .tiptap a { color: var(--tps-primary); text-decoration: underline; }
+      .tiptap blockquote {
+        border-left: 3px solid var(--tps-primary);
+        padding-left: 14px;
+        color: var(--tps-muted);
+        font-style: italic;
+      }
+      .tiptap pre.tiptap-code, .tiptap pre {
+        background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 6px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
+        overflow-x: auto;
+      }
+      .tiptap code {
+        background: var(--tps-bg-soft); padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
+      }
+      .tiptap hr { border: none; border-top: 1px solid var(--tps-line); margin: 1.5em 0; }
+      .tiptap mark { padding: 0 2px; border-radius: 3px; }
+
+      /* Image block with align + width. */
+      .tiptap .tps-block-image { margin: 1em 0; display: flex; }
+      .tiptap .tps-block-image[data-align='left'] { justify-content: flex-start; }
+      .tiptap .tps-block-image[data-align='center'] { justify-content: center; }
+      .tiptap .tps-block-image[data-align='right'] { justify-content: flex-end; }
+      .tiptap .tps-block-image img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
+      .tiptap .tps-block-image.tps-img-small img { width: 40%; }
+      .tiptap .tps-block-image.tps-img-medium img { width: 60%; }
+      .tiptap .tps-block-image.tps-img-large img { width: 80%; }
+      .tiptap .tps-block-image.tps-img-full img { width: 100%; }
+      .tiptap .tps-block-image.ProseMirror-selectednode img,
+      .tiptap .tps-block-image:has(img.ProseMirror-selectednode) img {
+        outline: 2px solid var(--tps-primary); outline-offset: 2px;
+      }
+
+      /* Tables \u2014 alternating rows + resize handles. */
+      .tiptap table.tps-rich-table, .tiptap table {
+        border-collapse: collapse; width: 100%; margin: 1em 0; table-layout: fixed;
+      }
+      .tiptap table td, .tiptap table th {
+        border: 1px solid var(--tps-line); padding: 8px 10px; vertical-align: top;
+        position: relative; min-width: 40px;
+      }
+      .tiptap table th { background: var(--tps-bg-soft); font-weight: 700; text-align: left; }
+      .tiptap table tbody tr:nth-child(even) td { background: rgba(15, 118, 110, 0.025); }
+      .tiptap table .selectedCell::after {
+        content: ''; position: absolute; inset: 0;
+        background: rgba(15, 118, 110, 0.12); pointer-events: none;
+      }
+      .tiptap table .column-resize-handle {
+        position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px;
+        background-color: var(--tps-primary); pointer-events: none;
+      }
+      .tiptap table p { margin: 0; }
+
+      /* Columns. */
+      .tiptap .tps-block-columns {
+        display: grid; gap: 16px; margin: 1em 0;
+        border: 1px dashed var(--tps-line); padding: 12px; border-radius: 8px;
+      }
+      .tiptap .tps-block-columns.tps-cols-2 { grid-template-columns: 1fr 1fr; }
+      .tiptap .tps-block-columns.tps-cols-3 { grid-template-columns: repeat(3, 1fr); }
+      .tiptap .tps-block-columns.tps-cols-4 { grid-template-columns: repeat(4, 1fr); }
+      .tiptap .tps-block-column { padding: 8px; min-height: 40px; border-radius: 6px; }
+      .tiptap .tps-block-column:hover { background: var(--tps-bg-soft); }
+
+      /* Callout. */
+      .tiptap .tps-block-callout {
+        border-left: 4px solid var(--tps-primary);
+        background: rgba(15, 118, 110, 0.05);
+        padding: 12px 16px; border-radius: 6px; margin: 1em 0;
+      }
+      .tiptap .tps-block-callout.tps-callout-success {
+        border-color: #059669; background: rgba(5, 150, 105, 0.06);
+      }
+      .tiptap .tps-block-callout.tps-callout-warning {
+        border-color: #D97706; background: rgba(217, 119, 6, 0.07);
+      }
+      .tiptap .tps-block-callout.tps-callout-danger {
+        border-color: #DC2626; background: rgba(220, 38, 38, 0.06);
+      }
+
+      /* Atom blocks (share, subscribe) \u2014 show as cards in the canvas. */
+      .tiptap .tps-block-share, .tiptap .tps-block-subscribe {
+        border: 1px solid var(--tps-line); border-radius: 8px;
+        padding: 16px; margin: 1em 0; background: var(--tps-bg-soft);
+      }
+      .tiptap .tps-block-share-label, .tiptap .tps-block-subscribe-heading {
+        font-weight: 700; margin-bottom: 8px; color: var(--tps-ink);
+      }
+      .tiptap .tps-block-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
+      .tiptap .tps-block-share-btn {
+        padding: 6px 12px; background: #fff; border: 1px solid var(--tps-line);
+        border-radius: 6px; text-decoration: none; color: var(--tps-ink);
+        font-size: 13px; font-weight: 600;
+      }
+      .tiptap .tps-block-share-btn:hover { border-color: var(--tps-primary); color: var(--tps-primary); }
+      .tiptap .tps-block-subscribe-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+      .tiptap .tps-block-subscribe-input {
+        flex: 1; min-width: 200px; padding: 8px 12px;
+        border: 1px solid var(--tps-line); border-radius: 6px; font-size: 14px;
+      }
+      .tiptap .tps-block-subscribe-button {
+        padding: 8px 16px; background: var(--tps-primary); color: #fff;
+        border: 0; border-radius: 6px; font-weight: 600; cursor: pointer;
+      }
+      .tiptap .tps-block-subscribe-button:hover { background: var(--tps-primary-dark); }
+      .tiptap .tps-block-subscribe-body { color: var(--tps-muted); margin: 4px 0 8px; }
+
+      /* Selected atom block highlight. */
+      .tiptap .ProseMirror-selectednode.tps-block-share,
+      .tiptap .ProseMirror-selectednode.tps-block-subscribe {
+        outline: 2px solid var(--tps-primary); outline-offset: 2px;
+      }
+    ` });
+}
+
+// src/HistoryPanel.jsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2, useTransition } from "react";
+import {
+  Alert,
+  Button as Button2,
+  Card,
+  Empty,
+  List,
+  Popconfirm,
+  Segmented,
+  Space as Space2,
+  Spin,
+  Tag as Tag2,
+  Tooltip as Tooltip2,
+  Typography as Typography2,
+  App as AntdApp
+} from "antd";
+import {
+  ReloadOutlined,
+  HistoryOutlined,
+  RollbackOutlined,
+  UserOutlined,
+  ClockCircleOutlined,
+  EditOutlined as EditOutlined2
+} from "@ant-design/icons";
+import { diffLines } from "diff";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+dayjs.extend(relativeTime);
+var { Text: Text2, Paragraph } = Typography2;
+function notConfigured(name) {
+  return () => {
+    throw new Error(
+      `@techrox/page-studio-form: HistoryPanel was used without a \`${name}\` adapter. Pass loadHistory + restoreRevision callbacks.`
+    );
+  };
+}
+function HistoryPanel({
+  pageKey,
+  currentPage,
+  onRestored,
+  loadHistory = notConfigured("loadHistory"),
+  restoreRevision = notConfigured("restoreRevision")
+}) {
+  const { message, modal } = AntdApp.useApp();
+  const [pending, startTransition] = useTransition();
+  const [loading, setLoading] = useState2(false);
+  const [revisions, setRevisions] = useState2([]);
+  const [error, setError] = useState2(null);
+  const [selectedId, setSelectedId] = useState2(null);
+  const [view, setView] = useState2("summary");
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const { revisions: revisions2 } = await loadHistory(pageKey);
+      setRevisions(revisions2 || []);
+      if (revisions2?.length && !selectedId) {
+        setSelectedId(revisions2[0]._id);
+      }
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect2(() => {
+    load();
+  }, [pageKey]);
+  const selected = useMemo2(
+    () => revisions.find((r) => r._id === selectedId) || null,
+    [revisions, selectedId]
+  );
+  const onRestore = (rev) => {
+    modal.confirm({
+      title: `Restore version ${rev.version}?`,
+      content: /* @__PURE__ */ jsxs2("span", { children: [
+        "The current page will be replaced with this snapshot from",
+        " ",
+        /* @__PURE__ */ jsx2(Text2, { strong: true, children: dayjs(rev.created_at).format("YYYY-MM-DD HH:mm") }),
+        ". A new revision is logged so you can undo this restore."
+      ] }),
+      okText: "Restore",
+      okButtonProps: { danger: true },
+      onOk: () => new Promise((resolve, reject) => {
+        startTransition(async () => {
+          try {
+            await restoreRevision(pageKey, rev._id);
+            message.success(`Restored version ${rev.version}.`);
+            onRestored?.();
+            await load();
+            resolve();
+          } catch (e) {
+            message.error(e.message || "Restore failed.");
+            reject(e);
+          }
+        });
+      })
+    });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx2(Card, { size: "small", children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", padding: 40 }, children: [
+      /* @__PURE__ */ jsx2(Spin, {}),
+      /* @__PURE__ */ jsx2("div", { style: { marginTop: 12, color: "var(--tps-muted)", fontSize: 13 }, children: "Loading history\u2026" })
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx2(Alert, { type: "error", showIcon: true, message: "Could not load history", description: error });
+  }
+  if (!revisions.length) {
+    return /* @__PURE__ */ jsx2(Card, { size: "small", children: /* @__PURE__ */ jsx2(
+      Empty,
+      {
+        image: Empty.PRESENTED_IMAGE_SIMPLE,
+        description: /* @__PURE__ */ jsxs2(Space2, { direction: "vertical", size: 4, children: [
+          /* @__PURE__ */ jsx2(Text2, { strong: true, children: "No history yet" }),
+          /* @__PURE__ */ jsx2(Text2, { type: "secondary", style: { fontSize: 13 }, children: "Every save creates a revision. They\u2019ll appear here once you save changes." })
+        ] })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)",
+        gap: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          Card,
+          {
+            size: "small",
+            title: /* @__PURE__ */ jsxs2(Space2, { children: [
+              /* @__PURE__ */ jsx2(HistoryOutlined, {}),
+              /* @__PURE__ */ jsxs2("span", { children: [
+                revisions.length,
+                " revision",
+                revisions.length === 1 ? "" : "s"
+              ] })
+            ] }),
+            extra: /* @__PURE__ */ jsx2(Tooltip2, { title: "Refresh", children: /* @__PURE__ */ jsx2(Button2, { size: "small", type: "text", icon: /* @__PURE__ */ jsx2(ReloadOutlined, {}), onClick: load }) }),
+            styles: { body: { padding: 0, maxHeight: "70vh", overflowY: "auto" } },
+            children: /* @__PURE__ */ jsx2(
+              List,
+              {
+                dataSource: revisions,
+                renderItem: (r, i) => {
+                  const isSelected = r._id === selectedId;
+                  return /* @__PURE__ */ jsx2(
+                    List.Item,
+                    {
+                      onClick: () => setSelectedId(r._id),
+                      style: {
+                        padding: "12px 16px",
+                        cursor: "pointer",
+                        background: isSelected ? "rgba(15, 118, 110, 0.08)" : "transparent",
+                        borderLeft: isSelected ? "3px solid var(--tps-primary)" : "3px solid transparent"
+                      },
+                      children: /* @__PURE__ */ jsxs2("div", { style: { width: "100%" }, children: [
+                        /* @__PURE__ */ jsxs2(Space2, { size: 6, wrap: true, children: [
+                          /* @__PURE__ */ jsxs2(Tag2, { color: r.action === "restore" ? "orange" : "geekblue", children: [
+                            "v",
+                            r.version
+                          ] }),
+                          i === 0 && /* @__PURE__ */ jsx2(Tag2, { color: "green", children: "latest" }),
+                          r.action === "restore" && /* @__PURE__ */ jsx2(Tag2, { icon: /* @__PURE__ */ jsx2(RollbackOutlined, {}), color: "orange", children: "restore" }),
+                          r.snapshot?.published === false && /* @__PURE__ */ jsx2(Tag2, { children: "draft" })
+                        ] }),
+                        /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, marginTop: 6, fontWeight: 500 }, children: r.snapshot?.title || /* @__PURE__ */ jsx2(Text2, { type: "secondary", children: "(no title)" }) }),
+                        /* @__PURE__ */ jsxs2(Space2, { size: 10, style: { fontSize: 12, color: "var(--tps-muted)", marginTop: 4 }, wrap: true, children: [
+                          /* @__PURE__ */ jsx2(Tooltip2, { title: dayjs(r.created_at).format("YYYY-MM-DD HH:mm:ss"), children: /* @__PURE__ */ jsxs2("span", { children: [
+                            /* @__PURE__ */ jsx2(ClockCircleOutlined, {}),
+                            " ",
+                            dayjs(r.created_at).fromNow()
+                          ] }) }),
+                          r.created_by_email && /* @__PURE__ */ jsx2(Tooltip2, { title: r.created_by_email, children: /* @__PURE__ */ jsxs2("span", { children: [
+                            /* @__PURE__ */ jsx2(UserOutlined, {}),
+                            " ",
+                            abbreviateEmail(r.created_by_email)
+                          ] }) })
+                        ] })
+                      ] })
+                    }
+                  );
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { children: selected ? /* @__PURE__ */ jsx2(
+          RevisionDetail,
+          {
+            revision: selected,
+            currentPage,
+            view,
+            setView,
+            onRestore: () => onRestore(selected),
+            restoring: pending
+          }
+        ) : /* @__PURE__ */ jsx2(Card, { size: "small", children: /* @__PURE__ */ jsx2(Text2, { type: "secondary", children: "Select a revision on the left to see its diff." }) }) })
+      ]
+    }
+  );
+}
+function RevisionDetail({ revision, currentPage, view, setView, onRestore, restoring }) {
+  const left = currentPage || {};
+  const right = revision.snapshot || {};
+  const summary = useMemo2(() => fieldChangeSummary(left, right), [left, right]);
+  const jsonDiff = useMemo2(() => makeJsonDiff(left, right), [left, right]);
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      size: "small",
+      title: /* @__PURE__ */ jsxs2(Space2, { children: [
+        /* @__PURE__ */ jsxs2(Tag2, { color: revision.action === "restore" ? "orange" : "geekblue", children: [
+          "Version ",
+          revision.version
+        ] }),
+        /* @__PURE__ */ jsx2(Text2, { type: "secondary", style: { fontSize: 13 }, children: dayjs(revision.created_at).format("YYYY-MM-DD HH:mm:ss") }),
+        revision.created_by_email && /* @__PURE__ */ jsxs2(Text2, { type: "secondary", style: { fontSize: 13 }, children: [
+          "by ",
+          revision.created_by_email
+        ] })
+      ] }),
+      extra: /* @__PURE__ */ jsxs2(Space2, { children: [
+        /* @__PURE__ */ jsx2(
+          Segmented,
+          {
+            size: "small",
+            value: view,
+            onChange: setView,
+            options: [
+              { label: "Summary", value: "summary" },
+              { label: "JSON diff", value: "json" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Popconfirm,
+          {
+            title: "Restore this version?",
+            description: "A new revision will be logged so you can undo.",
+            onConfirm: onRestore,
+            okText: "Restore",
+            okButtonProps: { danger: true },
+            children: /* @__PURE__ */ jsx2(Button2, { danger: true, icon: /* @__PURE__ */ jsx2(RollbackOutlined, {}), loading: restoring, children: "Restore" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs2(Paragraph, { type: "secondary", style: { fontSize: 12, marginBottom: 12 }, children: [
+          "Comparing ",
+          /* @__PURE__ */ jsx2(Text2, { strong: true, children: "current" }),
+          " (left) \u2192 ",
+          /* @__PURE__ */ jsx2(Text2, { strong: true, children: "this revision" }),
+          " (right). Restore replaces the current page with the right side."
+        ] }),
+        view === "summary" ? /* @__PURE__ */ jsx2(SummaryView, { summary }) : /* @__PURE__ */ jsx2(JsonDiffView, { diff: jsonDiff })
+      ]
+    }
+  );
+}
+function SummaryView({ summary }) {
+  if (!summary.length) {
+    return /* @__PURE__ */ jsx2(Alert, { type: "info", showIcon: true, message: "No differences \u2014 this revision matches the current page." });
+  }
+  return /* @__PURE__ */ jsx2(Space2, { direction: "vertical", size: 10, style: { width: "100%" }, children: summary.map((row) => /* @__PURE__ */ jsxs2(Card, { size: "small", styles: { body: { padding: 12 } }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
+      /* @__PURE__ */ jsxs2(Space2, { children: [
+        /* @__PURE__ */ jsx2(EditOutlined2, { style: { color: "var(--tps-primary)" } }),
+        /* @__PURE__ */ jsx2(Text2, { code: true, style: { fontSize: 12 }, children: row.path })
+      ] }),
+      /* @__PURE__ */ jsx2(Tag2, { color: row.kind === "changed" ? "gold" : row.kind === "added" ? "green" : "red", children: row.kind })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+          gap: 10
+        },
+        children: [
+          /* @__PURE__ */ jsx2(DiffCell, { label: "Current", value: row.current, kind: "current" }),
+          /* @__PURE__ */ jsx2(DiffCell, { label: "This revision", value: row.next, kind: "next" })
+        ]
+      }
+    )
+  ] }, row.path)) });
+}
+function DiffCell({ label, value, kind }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        background: kind === "current" ? "rgba(220,38,38,0.06)" : "rgba(5,150,105,0.06)",
+        border: "1px solid var(--tps-line)",
+        borderRadius: 6,
+        padding: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, color: "var(--tps-muted)", marginBottom: 4 }, children: label }),
+        /* @__PURE__ */ jsx2(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              fontSize: 12,
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              color: "var(--tps-ink)"
+            },
+            children: formatScalar(value)
+          }
+        )
+      ]
+    }
+  );
+}
+function JsonDiffView({ diff }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        background: "#0F172A",
+        borderRadius: 6,
+        fontSize: 12,
+        lineHeight: 1.6,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        maxHeight: "60vh",
+        overflow: "auto",
+        padding: 14,
+        // Constrain to parent so long lines wrap instead of forcing the
+        // History tab horizontally (prior bug: the diff blew past the card).
+        maxWidth: "100%"
+      },
+      children: diff.map((part, i) => {
+        const bg = part.added ? "rgba(16,185,129,0.18)" : part.removed ? "rgba(239,68,68,0.20)" : "transparent";
+        const color = part.added ? "#86efac" : part.removed ? "#fca5a5" : "#cbd5e1";
+        const prefix = part.added ? "+ " : part.removed ? "- " : "  ";
+        return /* @__PURE__ */ jsx2("div", { style: { background: bg, color }, children: part.value.split("\n").filter((l, idx, arr) => !(l === "" && idx === arr.length - 1)).map((line, j) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              padding: "0 6px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              overflowWrap: "anywhere"
+            },
+            children: [
+              prefix,
+              line
+            ]
+          },
+          j
+        )) }, i);
+      })
+    }
+  );
+}
+function makeJsonDiff(left, right) {
+  const a = JSON.stringify(snapshot(left), null, 2);
+  const b = JSON.stringify(snapshot(right), null, 2);
+  return diffLines(a, b);
+}
+function snapshot(p) {
+  return {
+    title: p?.title || "",
+    published: p?.published !== false,
+    seo: p?.seo || {},
+    content: p?.content || {}
+  };
+}
+function fieldChangeSummary(left, right) {
+  const out = [];
+  const a = snapshot(left);
+  const b = snapshot(right);
+  if (a.title !== b.title) {
+    out.push({ path: "title", kind: classify(a.title, b.title), current: a.title, next: b.title });
+  }
+  if (a.published !== b.published) {
+    out.push({
+      path: "published",
+      kind: "changed",
+      current: a.published,
+      next: b.published
+    });
+  }
+  for (const k of unionKeys(a.seo, b.seo)) {
+    const av = a.seo[k];
+    const bv = b.seo[k];
+    if (!equal(av, bv)) {
+      out.push({ path: `seo.${k}`, kind: classify(av, bv), current: av, next: bv });
+    }
+  }
+  for (const k of unionKeys(a.content, b.content)) {
+    const av = a.content[k];
+    const bv = b.content[k];
+    if (!equal(av, bv)) {
+      out.push({ path: `content.${k}`, kind: classify(av, bv), current: av, next: bv });
+    }
+  }
+  return out;
+}
+function unionKeys(a, b) {
+  const s = /* @__PURE__ */ new Set([...Object.keys(a || {}), ...Object.keys(b || {})]);
+  return Array.from(s).sort();
+}
+function classify(a, b) {
+  const aEmpty = isEmpty(a);
+  const bEmpty = isEmpty(b);
+  if (aEmpty && !bEmpty) return "added";
+  if (!aEmpty && bEmpty) return "removed";
+  return "changed";
+}
+function isEmpty(v) {
+  if (v == null) return true;
+  if (typeof v === "string") return v.trim() === "";
+  if (Array.isArray(v)) return v.length === 0;
+  if (typeof v === "object") return Object.keys(v).length === 0;
+  return false;
+}
+function equal(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (Array.isArray(a) || Array.isArray(b) || typeof a === "object") {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+  return false;
+}
+function formatScalar(v) {
+  if (v === void 0 || v === null) return "\u2014";
+  if (typeof v === "string") return v || "\u2014";
+  if (typeof v === "boolean") return v ? "true" : "false";
+  if (Array.isArray(v) && v.every((x) => typeof x === "string")) {
+    return v.length ? v.join("\n") : "\u2014";
+  }
+  return JSON.stringify(v, null, 2);
+}
+function abbreviateEmail(email) {
+  if (!email) return "";
+  const [name, domain] = email.split("@");
+  if (!domain) return email;
+  return `${name}@${domain.split(".")[0]}`;
+}
+
+// src/PageStudioForm.jsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var { Text: Text3, Paragraph: Paragraph2 } = Typography3;
+function DefaultLink({ href, target, children, ...rest }) {
+  return /* @__PURE__ */ jsx3(
+    "a",
+    {
+      href,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0,
+      ...rest,
+      children
+    }
+  );
+}
+function notConfigured2(name) {
+  return () => {
+    throw new Error(
+      `@techrox/page-studio-form: missing required adapter method \`${name}\`.`
+    );
+  };
+}
+var FormCtx = createContext({ LinkComponent: DefaultLink, uploadMedia: void 0 });
+var useFormCtx = () => useContext(FormCtx);
+function PageStudioForm({
+  pageKey,
+  initialPage,
+  loadError,
+  schema,
+  contentDefaults = {},
+  livePath,
+  homeHref = "/admin/pages",
+  homeLabel = "All pages",
+  LinkComponent = DefaultLink,
+  adapter = {},
+  onSaved,
+  onDeleted,
+  onRestored
+}) {
+  const {
+    savePage = notConfigured2("savePage"),
+    deletePage = notConfigured2("deletePage"),
+    loadHistory,
+    restoreRevision,
+    uploadMedia
+  } = adapter;
+  const { message } = AntdApp2.useApp();
+  const [form] = Form2.useForm();
+  const [pending, startTransition] = useTransition2();
+  const [savedAt, setSavedAt] = useState3(initialPage?.updated_at || null);
+  const [previewKey, setPreviewKey] = useState3(0);
+  const defaults = contentDefaults;
+  const initialValues = {
+    title: initialPage?.title || "",
+    published: initialPage?.published ?? true,
+    seo_title: initialPage?.seo?.title || "",
+    seo_description: initialPage?.seo?.description || "",
+    seo_og_image: initialPage?.seo?.og_image || "",
+    seo_noindex: initialPage?.seo?.noindex || false,
+    content: { ...defaults, ...initialPage?.content || {} }
+  };
+  useEffect3(() => {
+    form.setFieldsValue(initialValues);
+    setSavedAt(initialPage?.updated_at || null);
+    setPreviewKey((k) => k + 1);
+  }, [initialPage?.updated_at]);
+  const onFinish = (values) => {
+    const fallback = (v, prev) => v === void 0 ? prev : v;
+    const payload = {
+      title: (fallback(values.title, initialPage?.title) || "").trim(),
+      seo: {
+        title: fallback(values.seo_title, initialPage?.seo?.title) || "",
+        description: fallback(values.seo_description, initialPage?.seo?.description) || "",
+        og_image: fallback(values.seo_og_image, initialPage?.seo?.og_image) || "",
+        noindex: !!fallback(values.seo_noindex, initialPage?.seo?.noindex)
+      },
+      content: pruneContent(values.content || {}),
+      published: !!fallback(values.published, initialPage?.published ?? true)
+    };
+    startTransition(async () => {
+      try {
+        const result = await savePage(pageKey, payload);
+        const page = result?.page;
+        message.success("Saved. Public page is being revalidated.");
+        if (page?.updated_at) setSavedAt(page.updated_at);
+        onSaved?.(page);
+      } catch (err) {
+        message.error(err.message || "Failed to save.");
+      }
+    });
+  };
+  const onDelete = () => {
+    startTransition(async () => {
+      try {
+        await deletePage(pageKey);
+        message.success("Override removed. Public page now uses the static defaults.");
+        onDeleted?.();
+      } catch (err) {
+        message.error(err.message || "Failed to delete.");
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx3(FormCtx.Provider, { value: { LinkComponent, uploadMedia }, children: /* @__PURE__ */ jsxs3("div", { style: { padding: 24, maxWidth: 1280 }, children: [
+    /* @__PURE__ */ jsxs3(
+      LinkComponent,
+      {
+        href: homeHref,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          fontSize: 13,
+          color: "var(--tps-muted)",
+          marginBottom: 16
+        },
+        children: [
+          /* @__PURE__ */ jsx3(ArrowLeftOutlined, {}),
+          " ",
+          homeLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      Form2,
+      {
+        form,
+        layout: "vertical",
+        onFinish,
+        initialValues,
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                gap: 16,
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsxs3("div", { children: [
+                  /* @__PURE__ */ jsx3("h1", { className: "tps-h3", style: { marginBottom: 4 }, children: initialPage?.title || pageKey }),
+                  /* @__PURE__ */ jsxs3(Space3, { size: 8, wrap: true, children: [
+                    /* @__PURE__ */ jsx3(Text3, { type: "secondary", children: /* @__PURE__ */ jsx3(Text3, { code: true, children: pageKey }) }),
+                    savedAt && /* @__PURE__ */ jsxs3(Text3, { type: "secondary", style: { fontSize: 12 }, children: [
+                      "Last saved ",
+                      new Date(savedAt).toLocaleString()
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs3(Space3, { wrap: true, align: "center", children: [
+                  /* @__PURE__ */ jsx3(
+                    Form2.Item,
+                    {
+                      name: "published",
+                      valuePropName: "checked",
+                      style: { marginBottom: 0 },
+                      children: /* @__PURE__ */ jsx3(PublishToggle, {})
+                    }
+                  ),
+                  livePath && /* @__PURE__ */ jsx3(LinkComponent, { href: livePath, target: "_blank", children: /* @__PURE__ */ jsx3(Button3, { icon: /* @__PURE__ */ jsx3(EyeOutlined, {}), children: "View live" }) }),
+                  /* @__PURE__ */ jsx3(
+                    Popconfirm2,
+                    {
+                      title: "Remove this override?",
+                      description: "The public page will fall back to the static defaults.",
+                      onConfirm: onDelete,
+                      okText: "Remove",
+                      cancelText: "Cancel",
+                      children: /* @__PURE__ */ jsx3(Button3, { danger: true, icon: /* @__PURE__ */ jsx3(DeleteOutlined2, {}), disabled: pending, children: "Remove override" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Button3,
+                    {
+                      type: "primary",
+                      icon: /* @__PURE__ */ jsx3(SaveOutlined, {}),
+                      loading: pending,
+                      onClick: () => form.submit(),
+                      children: "Save"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          loadError && /* @__PURE__ */ jsx3(
+            Alert2,
+            {
+              type: "error",
+              showIcon: true,
+              message: "Could not load page",
+              description: loadError,
+              style: { margin: "16px 0" }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            Tabs2,
+            {
+              defaultActiveKey: "content",
+              style: { marginTop: 24 },
+              items: [
+                {
+                  key: "content",
+                  label: "Content",
+                  forceRender: true,
+                  children: schema ? /* @__PURE__ */ jsx3(SchemaEditor, { schema, defaults }) : /* @__PURE__ */ jsx3(
+                    Alert2,
+                    {
+                      type: "info",
+                      showIcon: true,
+                      message: "No structured content for this page key.",
+                      description: "SEO can still be edited on the SEO tab."
+                    }
+                  )
+                },
+                {
+                  key: "preview",
+                  label: "Live preview",
+                  children: livePath ? /* @__PURE__ */ jsx3(LivePreview, { path: livePath, previewKey }) : /* @__PURE__ */ jsx3(Alert2, { type: "info", message: "No public path mapped for this key." })
+                },
+                {
+                  key: "history",
+                  label: "History",
+                  children: /* @__PURE__ */ jsx3(
+                    HistoryPanel,
+                    {
+                      pageKey,
+                      currentPage: initialPage,
+                      loadHistory,
+                      restoreRevision,
+                      onRestored
+                    }
+                  )
+                },
+                {
+                  key: "seo",
+                  label: "SEO",
+                  forceRender: true,
+                  children: /* @__PURE__ */ jsx3(SeoFields, {})
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(Form2.Item, { name: "title", hidden: true, children: /* @__PURE__ */ jsx3(Input2, {}) })
+        ]
+      }
+    )
+  ] }) });
+}
+function PublishToggle({ value, onChange }) {
+  return /* @__PURE__ */ jsxs3(Space3, { size: 6, children: [
+    /* @__PURE__ */ jsx3(Switch, { checked: !!value, onChange }),
+    /* @__PURE__ */ jsx3(Text3, { style: { fontSize: 12, color: "var(--tps-muted)" }, children: value ? "Published" : "Draft" })
+  ] });
+}
+function pruneContent(content) {
+  const out = {};
+  for (const [k, v] of Object.entries(content)) {
+    if (v === void 0 || v === null) continue;
+    if (typeof v === "string" && v.trim() === "") continue;
+    if (Array.isArray(v) && v.length === 0) continue;
+    out[k] = v;
+  }
+  return out;
+}
+function SeoFields() {
+  return /* @__PURE__ */ jsxs3(Card2, { size: "small", children: [
+    /* @__PURE__ */ jsx3(
+      Form2.Item,
+      {
+        label: "SEO title",
+        name: "seo_title",
+        extra: "Used in <title> and Open Graph. Leave blank to use the static default.",
+        children: /* @__PURE__ */ jsx3(Input2, { maxLength: 70, showCount: true })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Form2.Item,
+      {
+        label: "Meta description",
+        name: "seo_description",
+        extra: "Recommended 140\u2013160 characters.",
+        children: /* @__PURE__ */ jsx3(Input2.TextArea, { rows: 3, maxLength: 170, showCount: true })
+      }
+    ),
+    /* @__PURE__ */ jsx3(Form2.Item, { label: "Open Graph image URL", name: "seo_og_image", children: /* @__PURE__ */ jsx3(Input2, { placeholder: "https://pagestudio.dev/og-image.png" }) }),
+    /* @__PURE__ */ jsx3(Form2.Item, { label: "Hide from search engines", name: "seo_noindex", valuePropName: "checked", children: /* @__PURE__ */ jsx3(Switch, {}) })
+  ] });
+}
+function SchemaEditor({ schema, defaults }) {
+  return /* @__PURE__ */ jsx3(Space3, { direction: "vertical", size: 20, style: { width: "100%" }, children: schema.map((section) => /* @__PURE__ */ jsx3(SectionBlock, { section, defaults }, section.title)) });
+}
+function SectionBlock({ section, defaults }) {
+  return /* @__PURE__ */ jsxs3(
+    Card2,
+    {
+      size: "small",
+      title: /* @__PURE__ */ jsx3(
+        "span",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: 1.5,
+            color: "var(--tps-accent-dark)"
+          },
+          children: section.title.toUpperCase()
+        }
+      ),
+      children: [
+        section.help && /* @__PURE__ */ jsx3(Paragraph2, { type: "secondary", style: { fontSize: 13, marginTop: 0 }, children: section.help }),
+        section.fields.map((f) => /* @__PURE__ */ jsx3(FieldRenderer, { field: f, parent: ["content"], defaults }, f.name))
+      ]
+    }
+  );
+}
+function FieldRenderer({ field, parent, defaults }) {
+  const namePath = [...parent, field.name];
+  const placeholder = placeholderFor(field, defaults?.[field.name]);
+  if (field.type === "text") {
+    return /* @__PURE__ */ jsx3(Form2.Item, { label: field.label, name: namePath, extra: field.help, children: /* @__PURE__ */ jsx3(Input2, { placeholder }) });
+  }
+  if (field.type === "textarea" || field.type === "html-text") {
+    return /* @__PURE__ */ jsx3(Form2.Item, { label: field.label, name: namePath, extra: field.help, children: /* @__PURE__ */ jsx3(Input2.TextArea, { rows: field.rows || 3, placeholder }) });
+  }
+  if (field.type === "richtext") {
+    return /* @__PURE__ */ jsx3(
+      Form2.Item,
+      {
+        label: field.label || void 0,
+        name: namePath,
+        extra: field.help,
+        valuePropName: "value",
+        trigger: "onChange",
+        children: /* @__PURE__ */ jsx3(RichTextField, { placeholder })
+      }
+    );
+  }
+  if (field.type === "list") {
+    return /* @__PURE__ */ jsx3(
+      Form2.Item,
+      {
+        label: field.label,
+        name: namePath,
+        extra: field.help,
+        getValueFromEvent: (e) => e.target.value.split("\n").map((s) => s.trim()).filter(Boolean),
+        getValueProps: (v) => ({ value: Array.isArray(v) ? v.join("\n") : v || "" }),
+        children: /* @__PURE__ */ jsx3(Input2.TextArea, { rows: field.rows || 4, placeholder })
+      }
+    );
+  }
+  if (field.type === "list-csv") {
+    return /* @__PURE__ */ jsx3(
+      Form2.Item,
+      {
+        label: field.label,
+        name: namePath,
+        extra: field.help,
+        getValueFromEvent: (e) => e.target.value.split(",").map((s) => s.trim()).filter(Boolean),
+        getValueProps: (v) => ({ value: Array.isArray(v) ? v.join(", ") : v || "" }),
+        children: /* @__PURE__ */ jsx3(Input2, { placeholder })
+      }
+    );
+  }
+  if (field.type === "repeater") {
+    return /* @__PURE__ */ jsx3(Repeater, { field, namePath, defaults: defaults?.[field.name] });
+  }
+  return /* @__PURE__ */ jsx3(
+    Alert2,
+    {
+      type: "warning",
+      showIcon: true,
+      message: `Unknown field type "${field.type}" for ${field.name}`,
+      style: { marginBottom: 12 }
+    }
+  );
+}
+function Repeater({ field, namePath, defaults }) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  return /* @__PURE__ */ jsx3(Form2.List, { name: namePath, children: (fields, { add, remove, move }) => {
+    const ids = fields.map((f) => f.key);
+    const onDragEnd = (e) => {
+      const { active, over } = e;
+      if (!over || active.id === over.id) return;
+      const from = ids.indexOf(active.id);
+      const to = ids.indexOf(over.id);
+      if (from < 0 || to < 0) return;
+      move(from, to);
+    };
+    return /* @__PURE__ */ jsxs3("div", { children: [
+      field.label && /* @__PURE__ */ jsx3(Text3, { strong: true, style: { display: "block", marginBottom: 8 }, children: field.label }),
+      field.help && /* @__PURE__ */ jsx3(Paragraph2, { type: "secondary", style: { fontSize: 13, marginTop: 0 }, children: field.help }),
+      /* @__PURE__ */ jsx3(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: closestCenter,
+          onDragEnd,
+          children: /* @__PURE__ */ jsx3(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx3(Space3, { direction: "vertical", size: 12, style: { width: "100%" }, children: fields.map((row, idx) => /* @__PURE__ */ jsx3(
+            SortableRow,
+            {
+              id: row.key,
+              field,
+              row,
+              idx,
+              namePath,
+              defaults: defaults?.[idx] || null,
+              onRemove: () => remove(idx)
+            },
+            row.key
+          )) }) })
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        Button3,
+        {
+          type: "dashed",
+          icon: /* @__PURE__ */ jsx3(PlusOutlined2, {}),
+          onClick: () => add(buildEmptyItem(field)),
+          block: true,
+          style: { marginTop: 12 },
+          children: [
+            "Add ",
+            field.itemLabel ? singular(field.itemLabel(fields.length)) : "item"
+          ]
+        }
+      )
+    ] });
+  } });
+}
+function SortableRow({ id, field, row, idx, namePath, defaults, onRemove }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.6 : 1,
+    zIndex: isDragging ? 5 : "auto"
+  };
+  return /* @__PURE__ */ jsx3("div", { ref: setNodeRef, style, children: /* @__PURE__ */ jsx3(
+    Card2,
+    {
+      size: "small",
+      style: {
+        background: "var(--tps-bg-soft)",
+        boxShadow: isDragging ? "0 8px 24px rgba(0,0,0,0.12)" : void 0
+      },
+      title: /* @__PURE__ */ jsxs3(Space3, { children: [
+        /* @__PURE__ */ jsx3(
+          Button3,
+          {
+            size: "small",
+            type: "text",
+            icon: /* @__PURE__ */ jsx3(HolderOutlined, {}),
+            style: { cursor: "grab", touchAction: "none" },
+            ...attributes,
+            ...listeners
+          }
+        ),
+        /* @__PURE__ */ jsx3(Text3, { strong: true, style: { fontSize: 13 }, children: /* @__PURE__ */ jsx3(RepeaterItemLabel, { field, index: idx, listPath: namePath }) })
+      ] }),
+      extra: /* @__PURE__ */ jsx3(
+        Button3,
+        {
+          size: "small",
+          type: "text",
+          danger: true,
+          icon: /* @__PURE__ */ jsx3(MinusCircleOutlined, {}),
+          onClick: onRemove,
+          children: "Remove"
+        }
+      ),
+      children: field.itemFields.map((sub) => /* @__PURE__ */ jsx3(
+        FieldRenderer,
+        {
+          field: sub,
+          parent: [...namePath, row.name],
+          defaults
+        },
+        sub.name
+      ))
+    }
+  ) });
+}
+function RepeaterItemLabel({ field, index, listPath }) {
+  const item = Form2.useWatch([...listPath, index]);
+  const text = field.itemLabel ? field.itemLabel(index, item) : `Item ${index + 1}`;
+  return /* @__PURE__ */ jsx3("span", { children: text });
+}
+function buildEmptyItem(field) {
+  const empty = {};
+  for (const sub of field.itemFields) {
+    if (sub.type === "list" || sub.type === "list-csv") empty[sub.name] = [];
+    else empty[sub.name] = "";
+  }
+  return empty;
+}
+function singular(label) {
+  return String(label).replace(/\s+\d+$/, "").toLowerCase() || "item";
+}
+function placeholderFor(field, defaultValue) {
+  if (defaultValue == null) return void 0;
+  if (Array.isArray(defaultValue)) {
+    if (field.type === "list-csv") return defaultValue.join(", ");
+    return defaultValue.join("\n");
+  }
+  if (typeof defaultValue === "string") {
+    return defaultValue.length > 100 ? defaultValue.slice(0, 100) + "\u2026" : defaultValue;
+  }
+  return void 0;
+}
+var VIEWPORTS = {
+  desktop: { width: "100%", label: "Desktop" },
+  tablet: { width: 820, label: "Tablet" },
+  mobile: { width: 390, label: "Mobile" }
+};
+function LivePreview({ path, previewKey }) {
+  const [device, setDevice] = useState3("desktop");
+  const [version, setVersion] = useState3(0);
+  const iframeRef = useRef(null);
+  useEffect3(() => {
+    setVersion((v) => v + 1);
+  }, [previewKey]);
+  const reload = () => setVersion((v) => v + 1);
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12, gap: 12 }, children: [
+      /* @__PURE__ */ jsx3(
+        Segmented2,
+        {
+          value: device,
+          onChange: setDevice,
+          options: [
+            { value: "desktop", icon: /* @__PURE__ */ jsx3(DesktopOutlined, {}), label: "Desktop" },
+            { value: "tablet", icon: /* @__PURE__ */ jsx3(TabletOutlined, {}), label: "Tablet" },
+            { value: "mobile", icon: /* @__PURE__ */ jsx3(MobileOutlined, {}), label: "Mobile" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs3(Space3, { children: [
+        /* @__PURE__ */ jsxs3(Text3, { type: "secondary", style: { fontSize: 12 }, children: [
+          "Showing ",
+          /* @__PURE__ */ jsx3(Text3, { code: true, children: path })
+        ] }),
+        /* @__PURE__ */ jsx3(Button3, { size: "small", icon: /* @__PURE__ */ jsx3(ReloadOutlined2, {}), onClick: reload, children: "Reload" }),
+        /* @__PURE__ */ jsx3(PreviewLink, { href: path })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          background: "#0F172A",
+          borderRadius: "var(--tps-radius)",
+          padding: 12,
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: VIEWPORTS[device].width,
+              maxWidth: "100%",
+              transition: "width 200ms ease",
+              background: "#fff",
+              borderRadius: 8,
+              overflow: "hidden",
+              boxShadow: "0 12px 36px -8px rgba(0,0,0,0.45)"
+            },
+            children: /* @__PURE__ */ jsx3(
+              "iframe",
+              {
+                ref: iframeRef,
+                src: `${path}?_preview=${version}`,
+                title: "Live preview",
+                style: {
+                  width: "100%",
+                  height: "70vh",
+                  border: 0,
+                  display: "block"
+                }
+              },
+              version
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function RichTextField({ value, onChange, placeholder }) {
+  const { uploadMedia } = useFormCtx();
+  return /* @__PURE__ */ jsx3(
+    RichText,
+    {
+      value,
+      onChange,
+      placeholder,
+      uploadMedia
+    }
+  );
+}
+function PreviewLink({ href }) {
+  const { LinkComponent } = useFormCtx();
+  return /* @__PURE__ */ jsx3(LinkComponent, { href, target: "_blank", children: /* @__PURE__ */ jsx3(Button3, { size: "small", icon: /* @__PURE__ */ jsx3(EyeOutlined, {}), children: "Open in new tab" }) });
+}
+export {
+  Callout,
+  CiqImage,
+  CiqTableCell,
+  CiqTableHeader,
+  Column,
+  Columns,
+  HistoryPanel,
+  PageStudioForm,
+  RichText,
+  ShareBlock,
+  SubscribeBlock
+};
+//# sourceMappingURL=index.js.map