@drawnagency/primitives 0.1.59 → 0.1.61

package/dist/chunk-4OX3Z7SB.js

@@ -0,0 +1,1421 @@
+import {
+  AddIcon,
+  DeleteIcon,
+  DragHandle,
+  IconButton,
+  SettingsIcon,
+  usePages
+} from "./chunk-WLMJCNU7.js";
+import {
+  getMediaProvider
+} from "./chunk-CBWK3KPV.js";
+import {
+  sanitizeHtml,
+  toSectionId
+} from "./chunk-53DKVAB6.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+import {
+  defineSection
+} from "./chunk-VKAGMEKE.js";
+
+// src/components/primitives/EditablePlainText.tsx
+import {
+  useRef as useRef2,
+  useEffect as useEffect2,
+  useCallback as useCallback2,
+  createElement
+} from "react";
+
+// src/components/primitives/useEditablePlainText.ts
+import { useState, useEffect, useRef, useCallback } from "react";
+function useEditablePlainText({
+  value: propValue,
+  onChange,
+  multiline = false
+}) {
+  const [value, setValue] = useState(propValue);
+  const lastPropValue = useRef(propValue);
+  useEffect(() => {
+    if (propValue !== lastPropValue.current) {
+      setValue(propValue);
+      lastPropValue.current = propValue;
+    }
+  }, [propValue]);
+  const handleInput = useCallback((text) => {
+    setValue(text);
+  }, []);
+  const handleBlur = useCallback(() => {
+    if (value !== propValue) {
+      onChange(value);
+      lastPropValue.current = value;
+    }
+  }, [value, propValue, onChange]);
+  return {
+    value,
+    handleInput,
+    handleBlur,
+    shouldPreventEnter: !multiline
+  };
+}
+
+// src/components/primitives/EditablePlainText.tsx
+function EditablePlainText({
+  tag,
+  value,
+  onChange,
+  isEditMode,
+  multiline = false,
+  placeholder,
+  className,
+  ...htmlAttrs
+}) {
+  const ref = useRef2(null);
+  const {
+    value: localValue,
+    handleInput,
+    handleBlur,
+    shouldPreventEnter
+  } = useEditablePlainText({ value, onChange, multiline });
+  useEffect2(() => {
+    if (ref.current && ref.current.textContent !== localValue) {
+      ref.current.textContent = localValue;
+    }
+  }, [localValue]);
+  const onInput = useCallback2(() => {
+    if (ref.current) {
+      handleInput(ref.current.textContent || "");
+    }
+  }, [handleInput]);
+  const onKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Enter" && shouldPreventEnter) {
+        e.preventDefault();
+      }
+    },
+    [shouldPreventEnter]
+  );
+  const onPaste = useCallback2(
+    (e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(text));
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      if (ref.current) {
+        handleInput(ref.current.textContent || "");
+      }
+    },
+    [handleInput]
+  );
+  return createElement(
+    tag,
+    {
+      ref,
+      className: isEditMode && placeholder ? `editable-placeholder ${className ?? ""}` : className,
+      contentEditable: isEditMode ? "true" : void 0,
+      suppressContentEditableWarning: isEditMode || void 0,
+      onInput: isEditMode ? onInput : void 0,
+      onBlur: isEditMode ? handleBlur : void 0,
+      onKeyDown: isEditMode ? onKeyDown : void 0,
+      onPaste: isEditMode ? onPaste : void 0,
+      "data-placeholder": isEditMode && placeholder ? placeholder : void 0,
+      ...htmlAttrs
+    },
+    value
+  );
+}
+
+// src/components/primitives/defineHeadingSection.tsx
+import { z } from "zod";
+
+// src/components/primitives/HeadingSection.tsx
+import { jsx } from "react/jsx-runtime";
+function HeadingSection({ heading, tag, placeholder, className, onChange }) {
+  return /* @__PURE__ */ jsx(
+    EditablePlainText,
+    {
+      tag,
+      value: heading,
+      onChange: onChange ?? (() => {
+      }),
+      isEditMode: !!onChange,
+      placeholder,
+      id: toSectionId(heading),
+      className: cn("scroll-mt-20", className)
+    }
+  );
+}
+
+// src/components/primitives/defineHeadingSection.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function defineHeadingSection(config) {
+  const content = config.navExclusion ? z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }) : z.object({ heading: z.string() });
+  const schema = z.object({ type: z.literal(config.type), content });
+  return defineSection({
+    type: config.type,
+    label: config.label,
+    icon: config.icon,
+    schema,
+    navRole: config.navRole,
+    component: ({ content: content2, onChange }) => /* @__PURE__ */ jsx2(
+      HeadingSection,
+      {
+        heading: content2.content.heading,
+        tag: config.tag,
+        placeholder: config.placeholder,
+        onChange: onChange ? (heading) => onChange({ ...content2, content: { ...content2.content, heading } }) : void 0
+      }
+    ),
+    defaults: () => ({ type: config.type, content: { heading: config.defaultHeading } }),
+    getLabel: (content2) => content2.content.heading,
+    ...config.navExclusion ? {
+      settings: {
+        excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" }
+      }
+    } : {}
+  });
+}
+
+// src/components/primitives/LinkPopover.tsx
+import { useState as useState2 } from "react";
+
+// src/components/shared/Button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var boxSize = {
+  sm: "rounded px-3 py-1.5 text-xs font-medium",
+  md: "rounded px-4 py-2 text-sm font-medium"
+};
+var ghostSize = {
+  sm: "text-xs font-medium",
+  md: "text-sm font-medium"
+};
+var variantClasses = {
+  primary: "bg-base-contrast text-base-accent hover:bg-base-contrast/90",
+  brand: "bg-primary text-primary-contrast hover:opacity-90",
+  secondary: "border border-base-200 text-base-contrast hover:bg-base-accent",
+  destructive: "border border-red-600 text-red-600 hover:bg-red-600 hover:text-white"
+};
+var ghostToneClasses = {
+  neutral: "text-base-contrast-light hover:text-base-contrast",
+  destructive: "text-red-600 hover:text-red-800"
+};
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "sm",
+  tone = "neutral",
+  fullWidth = false,
+  isLoading = false,
+  loadingLabel,
+  disabled,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const isGhost = variant === "ghost";
+  const resolvedDisabled = disabled || isLoading;
+  const label = isLoading && loadingLabel ? loadingLabel : children;
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref,
+      disabled: resolvedDisabled,
+      className: cn(
+        "inline-flex items-center justify-center transition-colors",
+        isGhost ? ghostSize[size] : boxSize[size],
+        isGhost ? ghostToneClasses[tone] : variantClasses[variant],
+        fullWidth && "w-full",
+        resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: label
+    }
+  );
+});
+
+// src/lib/links.ts
+function internalHref(pageId, anchorSectionId) {
+  return `page://${pageId}${anchorSectionId ? `#${anchorSectionId}` : ""}`;
+}
+function parseInternalHref(href) {
+  const m = /^page:\/\/([^#]+)(?:#(.+))?$/.exec(href);
+  return m ? { pageId: m[1], anchorSectionId: m[2] ?? null } : null;
+}
+
+// src/components/primitives/LinkPopover.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var selectClasses = "w-full rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:ring-1 focus:ring-primary";
+function LinkPopover({ editor, onClose }) {
+  const { pages, getPageHeadings } = usePages();
+  const existingAttrs = editor.getAttributes("link");
+  const existingInternal = parseInternalHref(existingAttrs.href ?? "");
+  const [mode, setMode] = useState2(existingInternal ? "internal" : "external");
+  const [url, setUrl] = useState2(existingInternal ? "" : existingAttrs.href ?? "");
+  const [pageId, setPageId] = useState2(existingInternal?.pageId ?? "");
+  const [anchorId, setAnchorId] = useState2(existingInternal?.anchorSectionId ?? "");
+  const [openInNewTab, setOpenInNewTab] = useState2(
+    existingAttrs.target === "_blank"
+  );
+  const hasLink = Boolean(existingAttrs.href);
+  const headings = pageId ? getPageHeadings(pageId) : [];
+  const handleApply = () => {
+    if (mode === "internal") {
+      if (pageId) {
+        editor.chain().focus().extendMarkRange("link").setLink({ href: internalHref(pageId, anchorId || null), target: null }).run();
+      }
+    } else if (url.trim()) {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: url.trim(), target: openInNewTab ? "_blank" : null }).run();
+    }
+    onClose();
+  };
+  const handleRemove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex w-64 flex-col gap-2 rounded bg-base-accent p-3 shadow-lg",
+      onMouseDown: (e) => e.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "flex gap-2", role: "tablist", children: ["external", "internal"].map((kind) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === kind,
+            onClick: () => setMode(kind),
+            className: cn(
+              "cursor-pointer rounded border px-2 py-0.5 text-xs",
+              mode === kind ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast"
+            ),
+            children: kind === "external" ? "External URL" : "Internal page"
+          },
+          kind
+        )) }),
+        mode === "external" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              autoFocus: true,
+              type: "url",
+              value: url,
+              onChange: (e) => setUrl(e.target.value),
+              placeholder: "https://example.com",
+              className: "rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast/40 focus:outline-none focus:ring-1 focus:ring-primary"
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-base-contrast", children: [
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                type: "checkbox",
+                checked: openInNewTab,
+                onChange: (e) => setOpenInNewTab(e.target.checked),
+                className: "accent-primary"
+              }
+            ),
+            "Open in new tab"
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              autoFocus: true,
+              "aria-label": "Page",
+              value: pageId,
+              onChange: (e) => {
+                setPageId(e.target.value);
+                setAnchorId("");
+              },
+              className: selectClasses,
+              children: [
+                /* @__PURE__ */ jsx4("option", { value: "", children: "Select a page\u2026" }),
+                pages.map((p) => /* @__PURE__ */ jsx4("option", { value: p.id, children: p.title }, p.id))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": "Section",
+              value: anchorId,
+              disabled: !pageId,
+              onChange: (e) => setAnchorId(e.target.value),
+              className: cn(selectClasses, !pageId && "cursor-not-allowed opacity-50"),
+              children: [
+                /* @__PURE__ */ jsx4("option", { value: "", children: "None (top of page)" }),
+                headings.map((h) => /* @__PURE__ */ jsx4("option", { value: h.id, children: h.label }, h.id))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx4(
+            Button,
+            {
+              variant: "brand",
+              size: "sm",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                handleApply();
+              },
+              children: "Apply"
+            }
+          ),
+          hasLink && /* @__PURE__ */ jsx4(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                handleRemove();
+              },
+              children: "Remove"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                onClose();
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/primitives/EditableRichText.tsx
+import { useRef as useRef4, useCallback as useCallback4, useEffect as useEffect4 } from "react";
+import { EditorContent } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+// src/components/primitives/useEditableRichText.ts
+import { useState as useState3, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect3 } from "react";
+import { Editor } from "@tiptap/core";
+import Placeholder from "@tiptap/extension-placeholder";
+
+// src/components/primitives/tiptap-presets.ts
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+
+// ../../node_modules/.pnpm/@tiptap+extension-paragraph@3.22.4_@tiptap+core@3.22.4_@tiptap+pm@3.22.4_/node_modules/@tiptap/extension-paragraph/dist/index.js
+import { mergeAttributes, Node } from "@tiptap/core";
+var EMPTY_PARAGRAPH_MARKDOWN = " ";
+var NBSP_CHAR = "\xA0";
+var Paragraph = Node.create({
+  name: "paragraph",
+  priority: 1e3,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  group: "block",
+  content: "inline*",
+  parseHTML() {
+    return [{ tag: "p" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  parseMarkdown: (token, helpers) => {
+    const tokens = token.tokens || [];
+    if (tokens.length === 1 && tokens[0].type === "image") {
+      return helpers.parseChildren([tokens[0]]);
+    }
+    const content = helpers.parseInline(tokens);
+    const hasExplicitEmptyParagraphMarker = tokens.length === 1 && tokens[0].type === "text" && (tokens[0].raw === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].text === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].raw === NBSP_CHAR || tokens[0].text === NBSP_CHAR);
+    if (hasExplicitEmptyParagraphMarker && content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+      return helpers.createNode("paragraph", void 0, []);
+    }
+    return helpers.createNode("paragraph", void 0, content);
+  },
+  renderMarkdown: (node, h, ctx) => {
+    var _a, _b;
+    if (!node) {
+      return "";
+    }
+    const content = Array.isArray(node.content) ? node.content : [];
+    if (content.length === 0) {
+      const previousContent = Array.isArray((_a = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _a.content) ? ctx.previousNode.content : [];
+      const previousNodeIsEmptyParagraph = ((_b = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _b.type) === "paragraph" && previousContent.length === 0;
+      return previousNodeIsEmptyParagraph ? EMPTY_PARAGRAPH_MARKDOWN : "";
+    }
+    return h.renderChildren(content);
+  },
+  addCommands() {
+    return {
+      setParagraph: () => ({ commands }) => {
+        return commands.setNode(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-0": () => this.editor.commands.setParagraph()
+    };
+  }
+});
+var index_default = Paragraph;
+
+// src/components/primitives/CustomParagraph.ts
+var ALLOWED_CLASSES = ["large", "lead-in"];
+var CustomParagraph = index_default.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      class: {
+        default: null,
+        parseHTML: (element) => {
+          const cls = element.getAttribute("class");
+          if (cls && ALLOWED_CLASSES.includes(cls)) {
+            return cls;
+          }
+          return null;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.class) return {};
+          return { class: attributes.class };
+        }
+      }
+    };
+  }
+});
+
+// src/components/primitives/tiptap-presets.ts
+var basic = [
+  StarterKit.configure({
+    paragraph: false,
+    heading: false,
+    blockquote: false,
+    bulletList: false,
+    orderedList: false,
+    listItem: false,
+    codeBlock: false,
+    horizontalRule: false,
+    code: false,
+    strike: false
+  }),
+  CustomParagraph,
+  Underline
+];
+var rich = [
+  StarterKit.configure({
+    paragraph: false,
+    heading: { levels: [3, 4] },
+    blockquote: false,
+    codeBlock: false,
+    horizontalRule: false,
+    code: false,
+    strike: false
+  }),
+  CustomParagraph,
+  Underline,
+  // `page` protocol: stable internal-page hrefs (page://{pageId}#{sectionId})
+  // resolved to real routes at SSR — see lib/links.ts.
+  Link.configure({ openOnClick: false, protocols: ["page"] })
+];
+var presets = { basic, rich };
+
+// src/components/primitives/useEditableRichText.ts
+function useEditableRichText({
+  value,
+  onChange,
+  preset,
+  placeholder
+}) {
+  const editorRef = useRef3(null);
+  const [editor, setEditor] = useState3(null);
+  const valueRef = useRef3(value);
+  const onChangeRef = useRef3(onChange);
+  useEffect3(() => {
+    valueRef.current = value;
+  }, [value]);
+  useEffect3(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  const activate = useCallback3(() => {
+    if (editorRef.current) return;
+    const extensions = placeholder ? [...presets[preset], Placeholder.configure({ placeholder })] : presets[preset];
+    const ed = new Editor({
+      extensions,
+      content: valueRef.current,
+      // Commit edits to onChange on every transaction, not only on deactivate().
+      // Without this, content lives only inside TipTap until blur; clicking a
+      // Save button while the editor is still focused flushes persistence before
+      // the (150ms-delayed) blur->deactivate commit fires, silently dropping the
+      // in-progress edit. Live-committing keeps persistence in sync continuously.
+      onUpdate: ({ editor: updated }) => {
+        const html = updated.getHTML();
+        if (html !== valueRef.current) {
+          valueRef.current = html;
+          onChangeRef.current(html);
+        }
+      }
+    });
+    editorRef.current = ed;
+    setEditor(ed);
+  }, [preset, placeholder]);
+  const deactivate = useCallback3(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const html = ed.getHTML();
+    ed.destroy();
+    editorRef.current = null;
+    setEditor(null);
+    if (html !== valueRef.current) {
+      onChangeRef.current(html);
+    }
+  }, []);
+  useEffect3(() => {
+    return () => {
+      editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, []);
+  return {
+    isEditorActive: editor !== null,
+    editor,
+    activate,
+    deactivate
+  };
+}
+
+// src/components/primitives/RichTextToolbar.tsx
+import { useState as useState4 } from "react";
+import { useEditorState } from "@tiptap/react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ToolbarButton({ isActive, onClick, title, children }) {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      "aria-pressed": isActive,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onClick();
+      },
+      className: cn(
+        "cursor-pointer rounded px-2 py-1 text-sm font-medium transition-colors",
+        isActive ? "bg-primary text-primary-contrast" : "bg-base-accent text-base-contrast hover:opacity-80"
+      ),
+      children
+    }
+  );
+}
+function Separator() {
+  return /* @__PURE__ */ jsx5("div", { className: "mx-1 h-5 w-px bg-base-contrast/20" });
+}
+function RichTextToolbar({ editor, preset }) {
+  const [showLinkPopover, setShowLinkPopover] = useState4(false);
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => ({
+      isBold: ed.isActive("bold"),
+      isItalic: ed.isActive("italic"),
+      isUnderline: ed.isActive("underline"),
+      isLink: ed.isActive("link"),
+      isBulletList: ed.isActive("bulletList"),
+      isOrderedList: ed.isActive("orderedList"),
+      isH3: ed.isActive("heading", { level: 3 }),
+      isH4: ed.isActive("heading", { level: 4 }),
+      isLarge: ed.isActive("paragraph", { class: "large" }),
+      isLeadIn: ed.isActive("paragraph", { class: "lead-in" })
+    })
+  });
+  const toggleParagraphVariant = (cls, isCurrentlyActive) => {
+    if (isCurrentlyActive) {
+      editor.chain().focus().setNode("paragraph").run();
+    } else {
+      editor.chain().focus().setNode("paragraph", { class: cls }).run();
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-testid": "rich-text-toolbar",
+      className: "flex items-center gap-1 rounded border border-base-contrast/10 bg-base-accent p-1 shadow-md",
+      children: [
+        /* @__PURE__ */ jsx5(
+          ToolbarButton,
+          {
+            isActive: state.isBold,
+            onClick: () => editor.chain().focus().toggleBold().run(),
+            title: "Bold",
+            children: /* @__PURE__ */ jsx5("strong", { children: "B" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          ToolbarButton,
+          {
+            isActive: state.isItalic,
+            onClick: () => editor.chain().focus().toggleItalic().run(),
+            title: "Italic",
+            children: /* @__PURE__ */ jsx5("em", { children: "I" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          ToolbarButton,
+          {
+            isActive: state.isUnderline,
+            onClick: () => editor.chain().focus().toggleUnderline().run(),
+            title: "Underline",
+            children: /* @__PURE__ */ jsx5("span", { className: "underline", children: "U" })
+          }
+        ),
+        preset === "rich" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx5(Separator, {}),
+          /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx5(
+              ToolbarButton,
+              {
+                isActive: state.isLink || showLinkPopover,
+                onClick: () => setShowLinkPopover((prev) => !prev),
+                title: "Link",
+                children: "\u{1F517}"
+              }
+            ),
+            showLinkPopover && /* @__PURE__ */ jsx5("div", { className: "absolute left-0 top-full z-50 mt-1", children: /* @__PURE__ */ jsx5(
+              LinkPopover,
+              {
+                editor,
+                onClose: () => setShowLinkPopover(false)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx5(Separator, {}),
+          /* @__PURE__ */ jsx5(
+            ToolbarButton,
+            {
+              isActive: state.isBulletList,
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              title: "Bullet List",
+              children: "\u2022\u2261"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ToolbarButton,
+            {
+              isActive: state.isOrderedList,
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              title: "Ordered List",
+              children: "1\u2261"
+            }
+          ),
+          /* @__PURE__ */ jsx5(Separator, {}),
+          /* @__PURE__ */ jsx5(
+            ToolbarButton,
+            {
+              isActive: state.isH3,
+              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+              title: "Heading 3",
+              children: "H3"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ToolbarButton,
+            {
+              isActive: state.isH4,
+              onClick: () => editor.chain().focus().toggleHeading({ level: 4 }).run(),
+              title: "Heading 4",
+              children: "H4"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ToolbarButton,
+            {
+              isActive: state.isLarge,
+              onClick: () => toggleParagraphVariant("large", state.isLarge),
+              title: "Large Paragraph",
+              children: "Lg"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ToolbarButton,
+            {
+              isActive: state.isLeadIn,
+              onClick: () => toggleParagraphVariant("lead-in", state.isLeadIn),
+              title: "Lead-In",
+              children: "Li"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/primitives/EditableRichText.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function isContentEmpty(html) {
+  return html.replace(/<[^>]*>/g, "").trim().length === 0;
+}
+var DEFAULT_PLACEHOLDER = "Click to edit\u2026";
+function EditableRichText({
+  value,
+  onChange,
+  isEditMode,
+  preset = "rich",
+  className,
+  placeholder = DEFAULT_PLACEHOLDER
+}) {
+  const { isEditorActive, editor, activate, deactivate } = useEditableRichText({ value, onChange, preset, placeholder });
+  const wrapperRef = useRef4(null);
+  const blurTimeoutRef = useRef4(null);
+  const clickCoordsRef = useRef4(null);
+  useEffect4(() => {
+    return () => {
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect4(() => {
+    if (!isEditorActive || !editor) return;
+    requestAnimationFrame(() => {
+      if (editor.isDestroyed) return;
+      const coords = clickCoordsRef.current;
+      if (coords) {
+        try {
+          const pos = editor.view.posAtCoords(coords);
+          if (pos) {
+            editor.commands.focus();
+            editor.commands.setTextSelection(pos.pos);
+          } else {
+            editor.commands.focus("end");
+          }
+        } catch {
+          editor.commands.focus("end");
+        } finally {
+          clickCoordsRef.current = null;
+        }
+      } else {
+        editor.commands.focus("end");
+      }
+    });
+  }, [isEditorActive, editor]);
+  const handleClick = useCallback4((e) => {
+    if (isEditMode && !isEditorActive) {
+      clickCoordsRef.current = { left: e.clientX, top: e.clientY };
+      activate();
+    }
+  }, [isEditMode, isEditorActive, activate]);
+  const handleFocus = useCallback4(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+  }, []);
+  const handleBlur = useCallback4(() => {
+    blurTimeoutRef.current = setTimeout(() => {
+      if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {
+        deactivate();
+      }
+    }, 150);
+  }, [deactivate]);
+  if (!isEditMode) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className,
+        dangerouslySetInnerHTML: { __html: sanitizeHtml(value) }
+      }
+    );
+  }
+  if (!isEditorActive || !editor) {
+    const empty = isContentEmpty(value);
+    if (empty) {
+      return /* @__PURE__ */ jsx6("div", { className, onClick: handleClick, children: /* @__PURE__ */ jsx6("p", { className: "tiptap-placeholder", children: placeholder }) });
+    }
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className,
+        onClick: handleClick,
+        dangerouslySetInnerHTML: { __html: sanitizeHtml(value) }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: wrapperRef,
+      className,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        /* @__PURE__ */ jsx6(
+          BubbleMenu,
+          {
+            editor,
+            className: "z-50",
+            shouldShow: ({ editor: ed, state }) => {
+              const { from, to } = state.selection;
+              return ed.isFocused && from !== to;
+            },
+            children: /* @__PURE__ */ jsx6(RichTextToolbar, { editor, preset })
+          }
+        ),
+        /* @__PURE__ */ jsx6(EditorContent, { editor })
+      ]
+    }
+  );
+}
+
+// src/components/primitives/ResolvedMedia.tsx
+import { ImageIcon } from "lucide-react";
+
+// src/hooks/useResolvedMedia.ts
+import { useMemo } from "react";
+
+// src/components/shell/MediaLibraryContext.tsx
+import { createContext, useContext } from "react";
+var MediaLibraryContext = createContext(null);
+function useMediaLibrary() {
+  return useContext(MediaLibraryContext);
+}
+
+// src/hooks/useResolvedMedia.ts
+function useResolvedMedia(imageId) {
+  const ctx = useMediaLibrary();
+  return useMemo(() => {
+    if (!imageId || !ctx) {
+      return { src: void 0, srcset: void 0, poster: void 0, alt: "", kind: "image" };
+    }
+    const { manifest, pendingItems, pendingLocalUrls, siteConfig } = ctx;
+    const sizes = siteConfig?.media?.sizes ?? [640, 1080, 1920];
+    const manifestItem = manifest.images[imageId];
+    const pendingItem = pendingItems.find((i) => i.id === imageId);
+    const item = manifestItem ?? pendingItem;
+    const alt = item?.alt ?? "";
+    const kind = item?.kind ?? "image";
+    const localUrl = pendingLocalUrls[imageId];
+    if (localUrl) {
+      return { src: localUrl, srcset: void 0, poster: void 0, alt, kind };
+    }
+    if (manifestItem) {
+      const provider = getMediaProvider();
+      const resolved = provider.resolve(manifestItem, sizes);
+      if (resolved && resolved.tag === "img") {
+        return {
+          src: resolved.src,
+          srcset: "srcSet" in resolved ? resolved.srcSet : void 0,
+          poster: void 0,
+          alt,
+          kind
+        };
+      }
+      if (resolved && resolved.tag === "video") {
+        return { src: resolved.src, srcset: void 0, poster: resolved.poster, alt, kind };
+      }
+    }
+    return { src: void 0, srcset: void 0, poster: void 0, alt, kind };
+  }, [imageId, ctx]);
+}
+
+// src/components/primitives/ResolvedMedia.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ResolvedMedia({
+  imageId,
+  src: propSrc,
+  srcset: propSrcset,
+  alt: propAlt,
+  className,
+  imgClassName,
+  invertFrom
+}) {
+  const resolved = useResolvedMedia(imageId);
+  const src = propSrc || resolved.src;
+  const srcset = propSrcset || resolved.srcset;
+  const poster = resolved.poster;
+  const alt = propAlt ?? resolved.alt;
+  const kind = resolved.kind;
+  const invertClass = invertFrom === "light" ? "invert dark:invert-0" : invertFrom === "dark" ? "dark:invert" : void 0;
+  const mediaClass = cn("h-full w-full", imgClassName, invertClass);
+  return /* @__PURE__ */ jsx7("div", { className, children: src ? kind === "video" ? /* @__PURE__ */ jsx7("video", { src, poster, muted: true, playsInline: true, loop: true, autoPlay: true, className: mediaClass }) : /* @__PURE__ */ jsx7("img", { src, srcSet: srcset, alt, className: mediaClass }) : /* @__PURE__ */ jsxs4("div", { className: "flex aspect-video h-full w-full flex-col items-center justify-center gap-1 rounded bg-base-accent text-base-contrast-light/50", children: [
+    /* @__PURE__ */ jsx7(ImageIcon, { size: 24 }),
+    /* @__PURE__ */ jsx7("span", { className: "text-sm", children: "No Image" })
+  ] }) });
+}
+
+// src/components/primitives/ImageDropZone.tsx
+import { useState as useState5 } from "react";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var ACCEPTED = /^(image|video)\//;
+function ImageDropZone({ onImageSelected, className, children }) {
+  const mediaLibrary = useMediaLibrary();
+  const [dragging, setDragging] = useState5(false);
+  if (!mediaLibrary) return /* @__PURE__ */ jsx8(Fragment3, { children });
+  const maxFileSize = mediaLibrary.siteConfig?.media.maxFileSize;
+  const hasFiles = (e) => e.dataTransfer.types.includes("Files");
+  const handleDragOver = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    if (!hasFiles(e)) return;
+    const related = e.relatedTarget;
+    if (related && e.currentTarget.contains(related)) return;
+    setDragging(false);
+  };
+  const handleDrop = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (!file) return;
+    if (!ACCEPTED.test(file.type)) {
+      mediaLibrary.reportRejectedUploads([{ name: file.name, reason: "type" }]);
+      return;
+    }
+    if (maxFileSize && file.size > maxFileSize) {
+      mediaLibrary.reportRejectedUploads([{ name: file.name, reason: "size" }]);
+      return;
+    }
+    mediaLibrary.uploadFileWithCallback(file, onImageSelected);
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn("relative", className),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        children,
+        dragging && /* @__PURE__ */ jsx8("div", { className: "pointer-events-none absolute inset-0 z-10 rounded-md border-2 border-primary bg-primary/5" })
+      ]
+    }
+  );
+}
+
+// src/components/sections/Media/MediaBlock.tsx
+import { Check, X } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function MediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }) {
+  const mediaLibrary = useMediaLibrary();
+  const fit = refValue.objectFit ?? options.objectFit;
+  const fitClass = fit === "cover" ? "object-cover" : "object-contain";
+  const showBorder = refValue.border ?? options.border;
+  const captionStr = refValue.caption ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption : "";
+  const replace = onRefChange ? (imageId) => onRefChange({ ...refValue, imageId }) : void 0;
+  const resolved = /* @__PURE__ */ jsx9(
+    ResolvedMedia,
+    {
+      imageId: refValue.imageId || void 0,
+      className: "h-full w-full",
+      imgClassName: fitClass,
+      invertFrom: refValue.invertFrom
+    }
+  );
+  let media = isEditMode && replace ? /* @__PURE__ */ jsx9(ImageDropZone, { onImageSelected: replace, className: "h-full w-full", children: resolved }) : resolved;
+  if (!isEditMode && link && link.kind === "external" && link.href) {
+    media = /* @__PURE__ */ jsx9("a", { href: link.href, target: link.target, className: "group block", children: media });
+  }
+  const onImageClick = isEditMode && replace && mediaLibrary ? () => mediaLibrary.openSelectModal((imageId) => replace(imageId)) : void 0;
+  return /* @__PURE__ */ jsxs6("figure", { children: [
+    dodont && /* @__PURE__ */ jsx9("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx9(Check, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx9(X, { size: 28, className: "text-red-600" }) }),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        "data-testid": "media-open-surface",
+        className: cn(
+          "overflow-hidden rounded-md",
+          showBorder && "border border-base-200",
+          options.square && "aspect-square",
+          onImageClick && "cursor-pointer"
+        ),
+        onClick: onImageClick,
+        onPointerDown: onImageClick ? (e) => e.stopPropagation() : void 0,
+        children: media
+      }
+    ),
+    options.showCaption && /* @__PURE__ */ jsx9("figcaption", { className: "mt-2 min-h-[1em] text-sm text-base-contrast-light", children: isEditMode && onRefChange ? /* @__PURE__ */ jsx9(
+      EditablePlainText,
+      {
+        tag: "span",
+        value: captionStr,
+        onChange: (caption) => onRefChange({ ...refValue, caption: caption || void 0 }),
+        isEditMode: true,
+        placeholder: "Caption",
+        className: "block min-h-[1em]"
+      }
+    ) : captionStr || " " })
+  ] });
+}
+
+// src/components/primitives/EditableGrid.tsx
+import { useRef as useRef6, useEffect as useEffect6, useState as useState7 } from "react";
+import { ImageIcon as ImageIcon2 } from "lucide-react";
+
+// src/lib/container-grid.ts
+var MAX_CONTAINER_COLUMNS = 6;
+var containerGridClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @sm:grid-cols-2",
+  3: "grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3",
+  4: "grid-cols-1 @xs:grid-cols-2 @lg:grid-cols-4",
+  5: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @xl:grid-cols-5",
+  6: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @2xl:grid-cols-6"
+};
+var colSpanClass = {
+  1: { 1: "" },
+  2: { 1: "", 2: "col-span-1 @sm:col-span-2" },
+  3: { 1: "", 2: "col-span-1 @sm:col-span-2", 3: "col-span-1 @sm:col-span-2 @lg:col-span-3" },
+  4: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @lg:col-span-3", 4: "col-span-1 @xs:col-span-2 @lg:col-span-4" },
+  5: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @md:col-span-3", 4: "col-span-1 @xs:col-span-2 @md:col-span-3 @xl:col-span-4", 5: "col-span-1 @xs:col-span-2 @md:col-span-3 @xl:col-span-5" },
+  6: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @md:col-span-3", 4: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-4", 5: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-5", 6: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-6" }
+};
+var spacerHiddenClass = {
+  1: "hidden",
+  2: "hidden @sm:block",
+  3: "hidden @sm:block",
+  4: "hidden @xs:block",
+  5: "hidden @xs:block",
+  6: "hidden @xs:block"
+};
+
+// src/components/primitives/useEditableCollection.ts
+import { useState as useState6, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect5 } from "react";
+var nextId = 0;
+function uid() {
+  return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `_id_${nextId++}_${Date.now()}`;
+}
+function wrapItems(items) {
+  return items.map((data) => ({ id: uid(), data }));
+}
+function useEditableCollection({
+  items,
+  onChange,
+  createItem
+}) {
+  const [wrappedItems, setWrappedItems] = useState6(
+    () => wrapItems(items)
+  );
+  const prevItemsRef = useRef5(items);
+  useEffect5(() => {
+    if (items === prevItemsRef.current) return;
+    prevItemsRef.current = items;
+    setWrappedItems((prev) => {
+      return items.map((data, i) => {
+        if (i < prev.length) {
+          return { id: prev[i].id, data };
+        }
+        return { id: uid(), data };
+      });
+    });
+  }, [items]);
+  const onReorder = useCallback5(
+    (fromIndex, toIndex) => {
+      setWrappedItems((prev) => {
+        const next = [...prev];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [onChange]
+  );
+  const onAdd = useCallback5(() => {
+    const newItem = createItem();
+    setWrappedItems((prev) => {
+      const next = [...prev, { id: uid(), data: newItem }];
+      onChange(next.map((w) => w.data));
+      return next;
+    });
+  }, [createItem, onChange]);
+  const onInsert = useCallback5(
+    (index) => {
+      const newItem = createItem();
+      setWrappedItems((prev) => {
+        const next = [...prev];
+        next.splice(index, 0, { id: uid(), data: newItem });
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [createItem, onChange]
+  );
+  const onRemove = useCallback5(
+    (id) => {
+      setWrappedItems((prev) => {
+        const next = prev.filter((w) => w.id !== id);
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [onChange]
+  );
+  return { wrappedItems, onReorder, onAdd, onInsert, onRemove };
+}
+
+// src/components/primitives/EditableGrid.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function EditableGrid({
+  items,
+  columns,
+  onChange,
+  createItem,
+  isEditMode,
+  renderItem,
+  onItemSettings,
+  onItemImageClick,
+  chromeTopClass,
+  className
+}) {
+  const { wrappedItems, onReorder, onAdd, onInsert, onRemove } = useEditableCollection({
+    items,
+    onChange,
+    createItem
+  });
+  const [dragState, setDragState] = useState7({ sourceId: null, closestEdge: null });
+  const [isDragging, setIsDragging] = useState7(false);
+  useEffect6(() => {
+    let cleanup;
+    let cancelled = false;
+    import("./adapter-HH47ZPGM.js").then(({ monitorForElements }) => {
+      if (cancelled) return;
+      cleanup = monitorForElements({
+        onDragStart: ({ source }) => {
+          if (source.data.dragType === "grid-cell") setIsDragging(true);
+        },
+        onDrop: ({ source }) => {
+          if (source.data.dragType === "grid-cell") setIsDragging(false);
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, []);
+  if (!isEditMode) {
+    return /* @__PURE__ */ jsx10("div", { className: "@container", children: /* @__PURE__ */ jsx10("div", { className: cn("grid gap-4", containerGridClass[columns] || containerGridClass[1], className), children: wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx10("div", { children: renderItem(wrapped.data, { isEditMode: false, index }) }, wrapped.id)) }) });
+  }
+  return /* @__PURE__ */ jsx10("div", { className: "@container", children: /* @__PURE__ */ jsxs7("div", { className: cn("group/grid relative grid gap-4", containerGridClass[columns] || containerGridClass[1], className), children: [
+    wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx10(
+      GridCell,
+      {
+        id: wrapped.id,
+        index,
+        isLast: index === wrappedItems.length - 1,
+        isDragging,
+        onReorder,
+        onRemove,
+        onInsert,
+        onSettings: onItemSettings ? () => onItemSettings(index) : void 0,
+        onImageClick: onItemImageClick ? () => onItemImageClick(index) : void 0,
+        chromeTopClass,
+        dragState,
+        setDragState,
+        children: renderItem(wrapped.data, { isEditMode: true, index })
+      },
+      wrapped.id
+    )),
+    /* @__PURE__ */ jsx10(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ jsx10(AddIcon, { size: 16 }),
+        label: "Add item",
+        size: "lg",
+        intent: "primary",
+        onClick: onAdd,
+        className: "absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/grid:opacity-100"
+      }
+    )
+  ] }) });
+}
+function GridCell({
+  id,
+  index,
+  isLast,
+  isDragging,
+  onReorder,
+  onRemove,
+  onInsert,
+  onSettings,
+  onImageClick,
+  chromeTopClass,
+  dragState,
+  setDragState,
+  children
+}) {
+  const cellRef = useRef6(null);
+  const handleRef = useRef6(null);
+  useEffect6(() => {
+    const cell = cellRef.current;
+    const handle = handleRef.current;
+    if (!cell || !handle) return;
+    let cleanup;
+    let cancelled = false;
+    Promise.all([
+      import("./adapter-HH47ZPGM.js"),
+      import("./closest-edge-EBOXL3YW.js")
+    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+      const cleanupDraggable = draggable({
+        element: handle,
+        getInitialData: () => ({ dragType: "grid-cell", id, index }),
+        onDragStart: () => setDragState({ sourceId: id, closestEdge: null }),
+        onDrop: () => setDragState({ sourceId: null, closestEdge: null })
+      });
+      const cleanupDropTarget = dropTargetForElements({
+        element: cell,
+        canDrop: ({ source }) => source.data.dragType === "grid-cell",
+        getData: ({ input, element }) => attachClosestEdge(
+          { id, index },
+          { input, element, allowedEdges: ["left", "right"] }
+        ),
+        onDragEnter: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          if (edge) setDragState((prev) => ({ ...prev, closestEdge: { id, edge } }));
+        },
+        onDrag: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          if (edge) setDragState((prev) => ({ ...prev, closestEdge: { id, edge } }));
+        },
+        onDragLeave: () => {
+          setDragState((prev) => prev.closestEdge?.id === id ? { ...prev, closestEdge: null } : prev);
+        },
+        onDrop: ({ source, self }) => {
+          const fromIndex = source.data.index;
+          const edge = extractClosestEdge(self.data);
+          let toIndex = index;
+          if (edge === "right") toIndex = index + 1;
+          if (fromIndex < toIndex) toIndex--;
+          if (fromIndex !== toIndex) {
+            onReorder(fromIndex, toIndex);
+          }
+        }
+      });
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDropTarget();
+      };
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [id, index, onReorder, setDragState]);
+  const isCellDragging = dragState.sourceId === id;
+  const showLeftEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "left" && dragState.sourceId !== id;
+  const showRightEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "right" && dragState.sourceId !== id;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: cellRef,
+      className: cn(
+        "group/cell relative",
+        isCellDragging && "opacity-50"
+      ),
+      children: [
+        showLeftEdge && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-0.5 -translate-x-2 bg-primary" }),
+        showRightEdge && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-0.5 translate-x-2 bg-primary" }),
+        !isDragging && !isLast && /* @__PURE__ */ jsx10(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx10(AddIcon, { size: 12 }),
+            label: "Insert item",
+            size: "sm",
+            intent: "primary",
+            onClick: () => onInsert(index + 1),
+            className: "absolute top-1/2 -right-2 z-20 -translate-y-1/2 translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 group-hover/cell:opacity-100"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          IconButton,
+          {
+            ref: handleRef,
+            icon: /* @__PURE__ */ jsx10(DragHandle, { size: 16 }),
+            label: "Drag to reorder",
+            className: cn("absolute left-1.5 z-10 cursor-grab bg-base/80 opacity-0 shadow-sm group-hover/cell:opacity-100 no-hover:opacity-100", chromeTopClass || "top-1.5"),
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: cn("absolute right-1.5 z-10 flex items-center gap-1 opacity-0 group-hover/cell:opacity-100 no-hover:opacity-100", chromeTopClass || "top-1.5"), children: [
+          onImageClick && /* @__PURE__ */ jsx10(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx10(ImageIcon2, { size: 16 }),
+              label: "Change image",
+              onClick: onImageClick,
+              className: "bg-base/80 shadow-sm"
+            }
+          ),
+          onSettings && /* @__PURE__ */ jsx10(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx10(SettingsIcon, { size: 16 }),
+              label: "Item settings",
+              onClick: onSettings,
+              className: "bg-base/80 shadow-sm"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx10(DeleteIcon, { size: 16 }),
+              label: "Delete item",
+              intent: "destructive",
+              onClick: () => onRemove(id),
+              className: "bg-base/80 shadow-sm"
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  );
+}
+
+export {
+  EditablePlainText,
+  defineHeadingSection,
+  LinkPopover,
+  EditableRichText,
+  ResolvedMedia,
+  ImageDropZone,
+  MediaBlock,
+  MAX_CONTAINER_COLUMNS,
+  containerGridClass,
+  colSpanClass,
+  spacerHiddenClass,
+  useEditableCollection,
+  EditableGrid
+};