@twelvemonday/blog-editor 1.0.3

package/dist/index.cjs

@@ -0,0 +1,2228 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BLOCK_LABELS: () => BLOCK_LABELS,
+  BlogEditor: () => BlogEditor,
+  EditorProvider: () => EditorProvider,
+  HEADING_CLASSES: () => HEADING_CLASSES,
+  HEADING_LABELS: () => HEADING_LABELS,
+  blocksToHtml: () => blocksToHtml,
+  cleanPastedHtml: () => cleanPastedHtml,
+  computeSeoScore: () => computeSeoScore,
+  createBlock: () => createBlock,
+  defaultTheme: () => defaultTheme,
+  descriptionLengthColor: () => descriptionLengthColor,
+  getSeoPreview: () => getSeoPreview,
+  htmlToBlocks: () => htmlToBlocks,
+  inlineHtmlFromBlocks: () => inlineHtmlFromBlocks,
+  insertHtmlAtCursor: () => insertHtmlAtCursor,
+  isMultiBlockPaste: () => isMultiBlockPaste,
+  pastedHtmlToBlocks: () => pastedHtmlToBlocks,
+  resolveTheme: () => resolveTheme,
+  slugifyTitle: () => slugifyTitle,
+  themeToCssVars: () => themeToCssVars,
+  titleLengthColor: () => titleLengthColor,
+  useEditorContext: () => useEditorContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/BlogEditor.tsx
+var import_react5 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_core3 = require("@dnd-kit/core");
+var import_sortable2 = require("@dnd-kit/sortable");
+
+// src/context.tsx
+var import_react = require("react");
+
+// src/theme.ts
+var defaultTheme = {
+  primary: "#04644A",
+  primaryHover: "#035239",
+  primaryMuted: "#f0fdf4",
+  primaryBorder: "#bbf7d0",
+  background: "#f0f0f1",
+  surface: "#ffffff",
+  successText: "#04644A"
+};
+function resolveTheme(partial) {
+  return { ...defaultTheme, ...partial };
+}
+function themeToCssVars(theme) {
+  return {
+    "--be-primary": theme.primary,
+    "--be-primary-hover": theme.primaryHover,
+    "--be-primary-muted": theme.primaryMuted,
+    "--be-primary-border": theme.primaryBorder,
+    "--be-bg": theme.background,
+    "--be-surface": theme.surface,
+    "--be-success-text": theme.successText
+  };
+}
+
+// src/context.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorContext = (0, import_react.createContext)({
+  theme: defaultTheme,
+  siteName: "Site",
+  baseUrl: "https://example.com"
+});
+function EditorProvider({
+  children,
+  onUploadImage,
+  theme,
+  siteName = "Site",
+  baseUrl = "https://example.com"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    EditorContext.Provider,
+    {
+      value: {
+        onUploadImage,
+        theme: resolveTheme(theme),
+        siteName,
+        baseUrl
+      },
+      children
+    }
+  );
+}
+function useEditorContext() {
+  return (0, import_react.useContext)(EditorContext);
+}
+
+// src/lib/blog-blocks.ts
+var BLOCK_LABELS = {
+  paragraph: "Paragraph",
+  heading: "Heading",
+  list: "List",
+  quote: "Quote",
+  image: "Image",
+  embed: "Embed / iframe",
+  html: "Custom HTML",
+  code: "Code",
+  separator: "Separator"
+};
+var HEADING_LABELS = {
+  1: "Heading 1",
+  2: "Heading 2",
+  3: "Heading 3",
+  4: "Heading 4",
+  5: "Heading 5",
+  6: "Heading 6"
+};
+function createBlock(type) {
+  const id = `blk-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+  switch (type) {
+    case "heading":
+      return { id, type, level: 2, html: "" };
+    case "list":
+      return { id, type, items: [""], ordered: false };
+    case "image":
+      return { id, type, src: "", alt: "", caption: "" };
+    case "embed":
+      return { id, type, embedUrl: "", embedHeight: 400 };
+    case "html":
+      return { id, type, rawHtml: "<div></div>" };
+    case "code":
+      return { id, type, html: "" };
+    case "separator":
+      return { id, type };
+    case "quote":
+      return { id, type, html: "" };
+    default:
+      return { id, type: "paragraph", html: "" };
+  }
+}
+function parseHeading(el) {
+  const level = parseInt(el.tagName[1], 10);
+  return { ...createBlock("heading"), level: level >= 1 && level <= 6 ? level : 2, html: el.innerHTML };
+}
+function parseList(el) {
+  const ordered = el.tagName.toLowerCase() === "ol";
+  const items = Array.from(el.querySelectorAll(":scope > li")).map((li) => li.innerHTML);
+  return { ...createBlock("list"), ordered, items: items.length ? items : [""] };
+}
+function parseImageDimensions(img) {
+  let imageWidth;
+  let imageHeight;
+  let imageWidthPercent;
+  const style = img.getAttribute("style") || "";
+  const wStyle = style.match(/width:\s*(\d+(?:\.\d+)?)(px|%)/i);
+  if (wStyle) {
+    if (wStyle[2] === "%") imageWidthPercent = parseFloat(wStyle[1]);
+    else imageWidth = parseFloat(wStyle[1]);
+  }
+  const hStyle = style.match(/height:\s*(\d+(?:\.\d+)?)px/i);
+  if (hStyle) imageHeight = parseFloat(hStyle[1]);
+  const wAttr = img.getAttribute("width");
+  const hAttr = img.getAttribute("height");
+  if (!imageWidth && !imageWidthPercent && wAttr) {
+    const w = parseInt(wAttr, 10);
+    if (Number.isFinite(w)) imageWidth = w;
+  }
+  if (!imageHeight && hAttr) {
+    const h = parseInt(hAttr, 10);
+    if (Number.isFinite(h)) imageHeight = h;
+  }
+  return { imageWidth, imageHeight, imageWidthPercent };
+}
+function imageStyleAttr(block) {
+  const parts = [];
+  if (block.imageWidthPercent) parts.push(`width: ${block.imageWidthPercent}%`);
+  else if (block.imageWidth) parts.push(`width: ${block.imageWidth}px`);
+  if (block.imageHeight) parts.push(`height: ${block.imageHeight}px`);
+  else if (block.imageWidthPercent || block.imageWidth) parts.push("height: auto");
+  return parts.length ? ` style="${parts.join("; ")}"` : "";
+}
+function parseEmbed(el) {
+  const iframe = el.tagName.toLowerCase() === "iframe" ? el : el.querySelector("iframe");
+  if (!iframe) return null;
+  const height = parseInt(iframe.getAttribute("height") || "400", 10);
+  return {
+    ...createBlock("embed"),
+    embedUrl: iframe.getAttribute("src") || "",
+    embedHeight: Number.isFinite(height) ? height : 400,
+    rawHtml: el.tagName.toLowerCase() === "iframe" ? void 0 : el.outerHTML
+  };
+}
+function htmlToBlocks(html) {
+  const trimmed = html?.trim();
+  if (!trimmed) return [createBlock("paragraph")];
+  if (typeof DOMParser === "undefined") return [createBlock("paragraph")];
+  const doc = new DOMParser().parseFromString(trimmed, "text/html");
+  const blocks = [];
+  for (const node of Array.from(doc.body.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent?.trim();
+      if (text) blocks.push({ ...createBlock("paragraph"), html: text });
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "p") {
+      if (!el.textContent?.trim() && !el.querySelector("img")) continue;
+      blocks.push({ ...createBlock("paragraph"), html: el.innerHTML });
+    } else if (/^h[1-6]$/.test(tag)) {
+      blocks.push(parseHeading(el));
+    } else if (tag === "ul" || tag === "ol") {
+      blocks.push(parseList(el));
+    } else if (tag === "blockquote") {
+      blocks.push({ ...createBlock("quote"), html: el.innerHTML });
+    } else if (tag === "hr") {
+      blocks.push(createBlock("separator"));
+    } else if (tag === "pre") {
+      const code = el.querySelector("code");
+      blocks.push({ ...createBlock("code"), html: code?.textContent || el.textContent || "" });
+    } else if (tag === "figure") {
+      const img = el.querySelector("img");
+      const caption = el.querySelector("figcaption")?.textContent || "";
+      if (img) {
+        blocks.push({
+          ...createBlock("image"),
+          src: img.getAttribute("src") || "",
+          alt: img.getAttribute("alt") || "",
+          caption,
+          ...parseImageDimensions(img)
+        });
+      } else {
+        blocks.push({ ...createBlock("html"), rawHtml: el.outerHTML });
+      }
+    } else if (tag === "img") {
+      blocks.push({
+        ...createBlock("image"),
+        src: el.getAttribute("src") || "",
+        alt: el.getAttribute("alt") || "",
+        ...parseImageDimensions(el)
+      });
+    } else if (tag === "iframe" || el.querySelector("iframe")) {
+      const embed = parseEmbed(el);
+      blocks.push(embed || { ...createBlock("html"), rawHtml: el.outerHTML });
+    } else if (tag === "div" && el.classList.contains("embed-responsive")) {
+      const embed = parseEmbed(el);
+      blocks.push(embed || { ...createBlock("html"), rawHtml: el.outerHTML });
+    } else {
+      blocks.push({ ...createBlock("html"), rawHtml: el.outerHTML });
+    }
+  }
+  return blocks.length ? blocks : [createBlock("paragraph")];
+}
+function blocksToHtml(blocks) {
+  return blocks.map((block) => {
+    switch (block.type) {
+      case "paragraph":
+        return `<p>${block.html || ""}</p>`;
+      case "heading": {
+        const level = block.level && block.level >= 1 && block.level <= 6 ? block.level : 2;
+        return `<h${level}>${block.html || ""}</h${level}>`;
+      }
+      case "list": {
+        const tag = block.ordered ? "ol" : "ul";
+        const items = (block.items || []).filter((item) => item.trim());
+        if (!items.length) return "";
+        return `<${tag}>${items.map((item) => `<li>${item}</li>`).join("")}</${tag}>`;
+      }
+      case "quote":
+        return `<blockquote>${block.html || ""}</blockquote>`;
+      case "image":
+        if (!block.src) return "";
+        return `<figure><img src="${block.src}" alt="${block.alt || ""}"${imageStyleAttr(block)} />${block.caption ? `<figcaption>${block.caption}</figcaption>` : ""}</figure>`;
+      case "embed":
+        if (block.rawHtml?.trim()) return block.rawHtml;
+        if (!block.embedUrl) return "";
+        return `<div class="embed-responsive"><iframe src="${block.embedUrl}" width="100%" height="${block.embedHeight || 400}" frameborder="0" allowfullscreen loading="lazy" title="Embedded content"></iframe></div>`;
+      case "html":
+        return block.rawHtml || "";
+      case "code":
+        return `<pre><code>${(block.html || "").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</code></pre>`;
+      case "separator":
+        return "<hr />";
+      default:
+        return "";
+    }
+  }).filter(Boolean).join("\n");
+}
+function slugifyTitle(title) {
+  return title.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "") || "new-post";
+}
+var HEADING_CLASSES = {
+  1: "text-4xl md:text-5xl",
+  2: "text-3xl md:text-4xl",
+  3: "text-2xl md:text-3xl",
+  4: "text-xl md:text-2xl",
+  5: "text-lg md:text-xl",
+  6: "text-base md:text-lg"
+};
+
+// src/lib/blog-seo.ts
+function getSeoPreview(post, siteName = "Site", baseUrl = "https://example.com") {
+  const title = post.metaTitle?.trim() || post.title.trim() || "Untitled Post";
+  const description = post.metaDescription?.trim() || post.excerpt.trim() || "Add a meta description for better search visibility.";
+  const slug = post.slug && post.slug !== "new-post" ? post.slug : "your-post-slug";
+  const url = `${baseUrl.replace(/\/$/, "")}/blogs/${slug}`;
+  return { title, description, url, siteName };
+}
+function computeSeoScore(post, contentHtml = "") {
+  const plain = contentHtml.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+  const wordCount = plain ? plain.split(" ").filter(Boolean).length : 0;
+  const title = post.metaTitle?.trim() || post.title.trim();
+  const description = post.metaDescription?.trim() || post.excerpt.trim();
+  const keyword = post.focusKeyword?.trim().toLowerCase() || "";
+  const slug = post.slug?.toLowerCase() || "";
+  const checks = [
+    { id: "title", label: "SEO title is set", passed: title.length > 0 },
+    {
+      id: "title-length",
+      label: "SEO title length is good (30\u201360 chars)",
+      passed: title.length >= 30 && title.length <= 60
+    },
+    { id: "description", label: "Meta description is set", passed: description.length > 0 },
+    {
+      id: "description-length",
+      label: "Meta description length is good (120\u2013160 chars)",
+      passed: description.length >= 120 && description.length <= 160
+    },
+    {
+      id: "keyword-title",
+      label: "Focus keyword appears in SEO title",
+      passed: !keyword || title.toLowerCase().includes(keyword)
+    },
+    {
+      id: "keyword-slug",
+      label: "Focus keyword appears in URL slug",
+      passed: !keyword || slug.includes(keyword.replace(/\s+/g, "-"))
+    },
+    {
+      id: "keyword-content",
+      label: "Focus keyword appears in content",
+      passed: !keyword || plain.toLowerCase().includes(keyword)
+    },
+    { id: "featured", label: "Featured image is set", passed: Boolean(post.featuredImage) },
+    {
+      id: "content-length",
+      label: "Content has enough words (300+)",
+      passed: wordCount >= 300
+    },
+    { id: "tags", label: "At least one tag added", passed: post.tags.length > 0 }
+  ];
+  const passed = checks.filter((c) => c.passed).length;
+  const score = Math.round(passed / checks.length * 100);
+  return { score, checks };
+}
+function titleLengthColor(len) {
+  if (len === 0) return "bg-gray-200";
+  if (len < 30 || len > 60) return "bg-amber-400";
+  return "bg-green-500";
+}
+function descriptionLengthColor(len) {
+  if (len === 0) return "bg-gray-200";
+  if (len < 120 || len > 160) return "bg-amber-400";
+  return "bg-green-500";
+}
+
+// src/components/BlockCanvas.tsx
+var import_react3 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_lucide_react2 = require("lucide-react");
+
+// src/lib/paste-html.ts
+function cleanPastedHtml(raw) {
+  if (!raw?.trim()) return "";
+  let html = raw.replace(/<!--[\s\S]*?-->/g, "").replace(/<\?xml[\s\S]*?\?>/gi, "").replace(/<meta[\s\S]*?>/gi, "").replace(/<link[\s\S]*?>/gi, "").replace(/<o:p>\s*<\/o:p>/gi, "").replace(/<\/?o:[^>]*>/gi, "").replace(/<\/?w:[^>]*>/gi, "").replace(/<\/?m:[^>]*>/gi, "");
+  if (typeof DOMParser === "undefined") return html;
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  flattenSingleWrapper(doc.body);
+  walkAndClean(doc.body);
+  return doc.body.innerHTML.trim();
+}
+function flattenSingleWrapper(root) {
+  while (root.childNodes.length === 1 && root.firstElementChild?.tagName === "DIV" && root.firstElementChild.childElementCount > 1) {
+    const div = root.firstElementChild;
+    while (div.firstChild) root.insertBefore(div.firstChild, div);
+    root.removeChild(div);
+  }
+}
+function wordParagraphHeadingTag(el) {
+  const style = el.getAttribute("style") || "";
+  const cls = el.getAttribute("class") || "";
+  const outline = style.match(/mso-outline-level:\s*(\d)/i);
+  if (outline) {
+    const n = Math.min(6, Math.max(1, parseInt(outline[1], 10)));
+    return `h${n}`;
+  }
+  if (/MsoTitle|Heading1/i.test(cls)) return "h1";
+  if (/Heading2/i.test(cls)) return "h2";
+  if (/Heading3/i.test(cls)) return "h3";
+  if (/Heading4/i.test(cls)) return "h4";
+  if (/Heading5/i.test(cls)) return "h5";
+  if (/Heading6/i.test(cls)) return "h6";
+  const fontSize = style.match(/font-size:\s*([\d.]+)pt/i);
+  if (fontSize) {
+    const pt = parseFloat(fontSize[1]);
+    if (pt >= 22) return "h1";
+    if (pt >= 18) return "h2";
+    if (pt >= 15) return "h3";
+    if (pt >= 13) return "h4";
+  }
+  const fw = style.match(/font-weight:\s*(bold|[7-9]00)/i);
+  if (fw && /Title/i.test(cls)) return "h1";
+  return null;
+}
+function wrapSemantic(el, tag) {
+  const wrapped = el.ownerDocument.createElement(tag);
+  wrapped.innerHTML = el.innerHTML;
+  el.replaceWith(wrapped);
+  return wrapped;
+}
+var KEEP_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "br",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "strike",
+  "del",
+  "a",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "code",
+  "sub",
+  "sup",
+  "img",
+  "figure",
+  "figcaption",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "hr",
+  "iframe",
+  "div",
+  "span"
+]);
+function walkAndClean(parent) {
+  const nodes = Array.from(parent.childNodes);
+  for (const node of nodes) {
+    if (node.nodeType === Node.TEXT_NODE) continue;
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      node.remove();
+      continue;
+    }
+    const el = node;
+    let tag = el.tagName.toLowerCase();
+    if (tag.includes(":")) {
+      unwrap(el);
+      continue;
+    }
+    if (tag === "p") {
+      const heading = wordParagraphHeadingTag(el);
+      if (heading) {
+        const h = el.ownerDocument.createElement(heading);
+        h.innerHTML = el.innerHTML;
+        el.replaceWith(h);
+        walkAndClean(h);
+        continue;
+      }
+    }
+    if (tag === "span") {
+      const style = el.getAttribute("style") || "";
+      let current = el;
+      if (/font-weight:\s*(bold|[7-9]00)/i.test(style)) {
+        current = wrapSemantic(current, "strong");
+      }
+      if (/font-style:\s*italic/i.test(style)) {
+        current = wrapSemantic(current, "em");
+      }
+      if (/text-decoration:\s*underline/i.test(style) || /text-decoration-line:\s*underline/i.test(style)) {
+        current = wrapSemantic(current, "u");
+      }
+      if (current === el) unwrap(el);
+      else walkAndClean(current);
+      continue;
+    }
+    if (tag === "b") {
+      const strong = el.ownerDocument.createElement("strong");
+      strong.innerHTML = el.innerHTML;
+      el.replaceWith(strong);
+      walkAndClean(strong);
+      continue;
+    }
+    if (tag === "i") {
+      const em = el.ownerDocument.createElement("em");
+      em.innerHTML = el.innerHTML;
+      el.replaceWith(em);
+      walkAndClean(em);
+      continue;
+    }
+    if (tag === "div") {
+      if (el.querySelector("table, ul, ol, h1, h2, h3, h4, h5, h6, img, iframe, blockquote, pre")) {
+        unwrap(el);
+        continue;
+      }
+      const p = el.ownerDocument.createElement("p");
+      p.innerHTML = el.innerHTML;
+      el.replaceWith(p);
+      walkAndClean(p);
+      continue;
+    }
+    el.removeAttribute("style");
+    el.removeAttribute("class");
+    el.removeAttribute("id");
+    el.removeAttribute("lang");
+    el.removeAttribute("align");
+    el.removeAttribute("valign");
+    if (tag === "a") {
+      const href = el.getAttribute("href");
+      [...el.attributes].forEach((a) => {
+        if (a.name !== "href") el.removeAttribute(a.name);
+      });
+      if (!href || href.startsWith("file:")) {
+        unwrap(el);
+        continue;
+      }
+    }
+    if (tag === "img") {
+      const src = el.getAttribute("src") || "";
+      [...el.attributes].forEach((a) => el.removeAttribute(a.name));
+      if (src && (src.startsWith("http") || src.startsWith("data:image") || src.startsWith("/"))) {
+        el.setAttribute("src", src);
+        if (!el.getAttribute("alt")) el.setAttribute("alt", "");
+      } else {
+        el.remove();
+        continue;
+      }
+    }
+    tag = el.tagName.toLowerCase();
+    if (!KEEP_TAGS.has(tag)) {
+      unwrap(el);
+      continue;
+    }
+    walkAndClean(el);
+  }
+}
+function unwrap(el) {
+  const parent = el.parentNode;
+  if (!parent) return;
+  while (el.firstChild) parent.insertBefore(el.firstChild, el);
+  parent.removeChild(el);
+}
+function insertHtmlAtCursor(html) {
+  if (!html) return;
+  document.execCommand("insertHTML", false, html);
+}
+function pastedHtmlToBlocks(raw) {
+  const cleaned = cleanPastedHtml(raw);
+  if (!cleaned) return [];
+  return htmlToBlocks(cleaned);
+}
+function isMultiBlockPaste(blocks) {
+  if (blocks.length > 1) return true;
+  const b = blocks[0];
+  if (!b) return false;
+  return ["list", "image", "embed", "html", "separator", "code"].includes(b.type);
+}
+function inlineHtmlFromBlocks(blocks) {
+  if (!blocks.length) return "";
+  const b = blocks[0];
+  if (b.type === "paragraph" || b.type === "heading" || b.type === "quote") return b.html || "";
+  if (b.type === "list") return (b.items || []).join("");
+  return "";
+}
+
+// src/components/BlockToolbar.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TRANSFORM_OPTIONS = [
+  { type: "paragraph", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Pilcrow, { size: 16 }) },
+  { type: "heading", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Heading, { size: 16 }) },
+  { type: "list", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.List, { size: 16 }), label: "Bullet list" },
+  { type: "quote", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Quote, { size: 16 }) },
+  { type: "image", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Image, { size: 16 }) },
+  { type: "embed", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Video, { size: 16 }) },
+  { type: "html", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.FileCode2, { size: 16 }) },
+  { type: "code", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Code2, { size: 16 }) },
+  { type: "separator", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Minus, { size: 16 }) }
+];
+function FloatingMenu({
+  open,
+  onClose,
+  anchorRef,
+  children,
+  width = 200
+}) {
+  const [pos, setPos] = (0, import_react2.useState)({ top: 0, left: 0 });
+  (0, import_react2.useEffect)(() => {
+    if (!open || !anchorRef.current) return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    setPos({
+      top: rect.bottom + 6,
+      left: Math.min(rect.left, window.innerWidth - width - 12)
+    });
+  }, [open, anchorRef, width]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-[200]", onClick: onClose, "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "fixed z-[201] bg-white text-gray-800 border border-gray-200 rounded-lg shadow-2xl py-2 max-h-[320px] overflow-y-auto",
+          style: { top: pos.top, left: pos.left, width },
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function BlockToolbar({
+  block,
+  onTransform,
+  onSetHeadingLevel,
+  onToggleOrderedList,
+  onMoveUp,
+  onMoveDown,
+  onDelete,
+  onFormat,
+  canMoveUp,
+  canMoveDown,
+  dragHandleProps
+}) {
+  const [showTransform, setShowTransform] = (0, import_react2.useState)(false);
+  const [showHeadings, setShowHeadings] = (0, import_react2.useState)(false);
+  const transformBtnRef = (0, import_react2.useRef)(null);
+  const headingBtnRef = (0, import_react2.useRef)(null);
+  const isTextBlock = block.type === "paragraph" || block.type === "heading" || block.type === "quote" || block.type === "code";
+  const currentLabel = TRANSFORM_OPTIONS.find((o) => o.type === block.type);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute -top-12 left-10 z-30 inline-flex w-max max-w-[min(100%,calc(100vw-3rem))] items-center gap-0.5 bg-[#1e1e1e] text-white rounded-md shadow-lg px-1 py-1 flex-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "p-1.5 hover:bg-white/10 rounded cursor-grab shrink-0",
+          title: "Drag to reorder",
+          ...dragHandleProps?.attributes,
+          ...dragHandleProps?.listeners,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.GripVertical, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          ref: transformBtnRef,
+          type: "button",
+          onClick: () => {
+            setShowHeadings(false);
+            setShowTransform((v) => !v);
+          },
+          className: "flex items-center gap-1.5 px-2 py-1.5 hover:bg-white/10 rounded text-sm shrink-0",
+          children: [
+            currentLabel?.icon,
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hidden sm:inline text-xs", children: currentLabel?.label || BLOCK_LABELS[block.type] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDown, { size: 14 })
+          ]
+        }
+      ),
+      block.type === "heading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          ref: headingBtnRef,
+          type: "button",
+          onClick: () => {
+            setShowTransform(false);
+            setShowHeadings((v) => !v);
+          },
+          className: "flex items-center gap-1 px-2 py-1.5 hover:bg-white/10 rounded text-sm font-semibold shrink-0",
+          children: [
+            "H",
+            block.level || 2,
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDown, { size: 14 })
+          ]
+        }
+      ),
+      block.type === "list" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onToggleOrderedList,
+          className: "p-1.5 hover:bg-white/10 rounded shrink-0",
+          title: block.ordered ? "Bullet list" : "Numbered list",
+          children: block.ordered ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.List, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ListOrdered, { size: 15 })
+        }
+      ),
+      isTextBlock && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-px h-5 bg-white/20 mx-0.5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => onFormat("bold"), className: "p-1.5 hover:bg-white/10 rounded shrink-0", title: "Bold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Bold, { size: 15 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => onFormat("italic"), className: "p-1.5 hover:bg-white/10 rounded shrink-0", title: "Italic", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Italic, { size: 15 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => onFormat("underline"), className: "p-1.5 hover:bg-white/10 rounded shrink-0", title: "Underline", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Underline, { size: 15 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => onFormat("link"), className: "p-1.5 hover:bg-white/10 rounded shrink-0", title: "Link", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Link2, { size: 15 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-px h-5 bg-white/20 mx-0.5 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: !canMoveUp, onClick: onMoveUp, className: "p-1.5 hover:bg-white/10 rounded disabled:opacity-30 shrink-0", title: "Move up", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ArrowUp, { size: 15 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: !canMoveDown, onClick: onMoveDown, className: "p-1.5 hover:bg-white/10 rounded disabled:opacity-30 shrink-0", title: "Move down", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ArrowDown, { size: 15 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: onDelete, className: "p-1.5 hover:bg-red-500/80 rounded shrink-0", title: "Delete block", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Trash2, { size: 15 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(FloatingMenu, { open: showTransform, onClose: () => setShowTransform(false), anchorRef: transformBtnRef, width: 220, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "px-3 pb-1 text-[11px] font-semibold text-gray-400 uppercase tracking-wide", children: "Transform to" }),
+      TRANSFORM_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onTransform(opt.type);
+            setShowTransform(false);
+          },
+          className: `w-full flex items-center gap-3 px-3 py-2 text-sm hover:bg-blue-50 ${block.type === opt.type ? "bg-blue-50 text-blue-700" : ""}`,
+          children: [
+            opt.icon,
+            opt.label || BLOCK_LABELS[opt.type]
+          ]
+        },
+        opt.type
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FloatingMenu, { open: showHeadings, onClose: () => setShowHeadings(false), anchorRef: headingBtnRef, width: 160, children: [1, 2, 3, 4, 5, 6].map((level) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onSetHeadingLevel(level);
+          setShowHeadings(false);
+        },
+        className: `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 ${block.level === level ? "bg-blue-50 text-blue-700 font-semibold" : ""}`,
+        children: HEADING_LABELS[level]
+      },
+      level
+    )) })
+  ] });
+}
+
+// src/components/BlockCanvas.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SLASH_OPTIONS = [
+  "paragraph",
+  "heading",
+  "list",
+  "quote",
+  "image",
+  "embed",
+  "html",
+  "code",
+  "separator"
+];
+function ListItem({
+  html,
+  onChange,
+  onFocus,
+  onEnter,
+  onBackspaceEmpty,
+  shouldFocus,
+  onPaste
+}) {
+  const ref = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (ref.current && document.activeElement !== ref.current) {
+      ref.current.innerHTML = html || "";
+    }
+  }, [html]);
+  (0, import_react3.useEffect)(() => {
+    if (!shouldFocus || !ref.current) return;
+    ref.current.focus();
+    const range = document.createRange();
+    range.selectNodeContents(ref.current);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }, [shouldFocus]);
+  const isEmpty = (el) => !(el.textContent || "").trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      className: "outline-none text-[16px] text-gray-800 min-h-[24px]",
+      onFocus,
+      onBlur: (e) => onChange(e.currentTarget.innerHTML),
+      onPaste,
+      onKeyDown: (e) => {
+        const el = e.currentTarget;
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onChange(el.innerHTML);
+          onEnter();
+          return;
+        }
+        if (e.key === "Backspace" && isEmpty(el)) {
+          e.preventDefault();
+          onChange("");
+          onBackspaceEmpty();
+        }
+      }
+    }
+  ) });
+}
+function RichBlock({
+  block,
+  placeholder,
+  className,
+  onChange,
+  onKeyDown,
+  onFocus,
+  onPaste
+}) {
+  const ref = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (ref.current && document.activeElement !== ref.current) {
+      ref.current.innerHTML = block.html || "";
+    }
+  }, [block.id, block.html]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      "data-placeholder": placeholder,
+      className: `outline-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 ${className}`,
+      onFocus,
+      onBlur: (e) => onChange(e.currentTarget.innerHTML),
+      onPaste,
+      onKeyDown
+    }
+  );
+}
+function HtmlBlockEditor({
+  blockId,
+  rawHtml,
+  onChange,
+  onFocus
+}) {
+  const previewRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (previewRef.current && document.activeElement !== previewRef.current) {
+      previewRef.current.innerHTML = rawHtml || "";
+    }
+  }, [blockId, rawHtml]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-gray-500", children: "Click content to edit directly \u2014 tables, divs, headings, links" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref: previewRef,
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        onFocus,
+        onBlur: (e) => onChange(e.currentTarget.innerHTML),
+        onPaste: (e) => {
+          const html = e.clipboardData.getData("text/html");
+          const text = e.clipboardData.getData("text/plain");
+          if (!html && !text) return;
+          e.preventDefault();
+          const raw = html || text.replace(/\n/g, "<br>");
+          const cleaned = html ? cleanPastedHtml(raw) : raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          const pastedBlocks = pastedHtmlToBlocks(cleaned);
+          const inline = isMultiBlockPaste(pastedBlocks) ? pastedBlocks.map((b) => {
+            if (b.type === "paragraph" || b.type === "heading" || b.type === "quote") return `<p>${b.html || ""}</p>`;
+            if (b.type === "list") return `<ul>${(b.items || []).map((i) => `<li>${i}</li>`).join("")}</ul>`;
+            return inlineHtmlFromBlocks([b]);
+          }).join("") : inlineHtmlFromBlocks(pastedBlocks) || cleaned;
+          insertHtmlAtCursor(inline);
+          requestAnimationFrame(() => {
+            if (previewRef.current) onChange(previewRef.current.innerHTML);
+          });
+        },
+        className: "blog-content min-h-[160px] outline-none border border-gray-200 rounded-lg p-4 bg-white focus:ring-1 focus:ring-blue-400 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400",
+        "data-placeholder": "Click here to type or paste content..."
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("details", { className: "text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("summary", { className: "cursor-pointer text-gray-500 hover:text-gray-700 text-xs", children: "View / edit HTML source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "textarea",
+        {
+          value: rawHtml || "",
+          onChange: (e) => onChange(e.target.value),
+          rows: 6,
+          className: "mt-2 w-full border border-gray-200 rounded px-3 py-2 text-xs font-mono bg-gray-50",
+          spellCheck: false
+        }
+      )
+    ] })
+  ] });
+}
+var IMAGE_SIZE_PRESETS = [
+  { label: "Auto", value: "auto" },
+  { label: "25%", value: 25 },
+  { label: "50%", value: 50 },
+  { label: "75%", value: 75 },
+  { label: "100%", value: 100 }
+];
+function imageDisplayStyle(block) {
+  if (block.imageWidthPercent) return { width: `${block.imageWidthPercent}%`, height: block.imageHeight ? `${block.imageHeight}px` : "auto" };
+  if (block.imageWidth) return { width: `${block.imageWidth}px`, height: block.imageHeight ? `${block.imageHeight}px` : "auto" };
+  if (block.imageHeight) return { height: `${block.imageHeight}px`, width: "auto" };
+  return { maxWidth: "100%", height: "auto" };
+}
+function ImageBlockEditor({
+  block,
+  isActive,
+  onChange,
+  onFocus,
+  onUpload,
+  canUpload
+}) {
+  const imgRef = (0, import_react3.useRef)(null);
+  const resizeRef = (0, import_react3.useRef)(null);
+  const activePreset = block.imageWidthPercent === 25 ? 25 : block.imageWidthPercent === 50 ? 50 : block.imageWidthPercent === 75 ? 75 : block.imageWidthPercent === 100 ? 100 : !block.imageWidth && !block.imageHeight && !block.imageWidthPercent ? "auto" : null;
+  const startResize = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const img = imgRef.current;
+    if (!img) return;
+    const rect = img.getBoundingClientRect();
+    resizeRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startW: rect.width,
+      startH: rect.height,
+      aspect: rect.width / Math.max(rect.height, 1)
+    };
+    const onMove = (ev) => {
+      const data = resizeRef.current;
+      if (!data) return;
+      const dx = ev.clientX - data.startX;
+      const dy = ev.clientY - data.startY;
+      const newW = Math.max(80, Math.round(data.startW + dx));
+      const newH = Math.max(60, Math.round(data.startH + dy));
+      if (ev.shiftKey) {
+        onChange({ imageWidth: newW, imageHeight: newH, imageWidthPercent: void 0 });
+      } else {
+        onChange({ imageWidth: newW, imageHeight: void 0, imageWidthPercent: void 0 });
+      }
+    };
+    const onUp = () => {
+      resizeRef.current = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", onFocus, children: [
+    block.src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: `relative inline-block max-w-full ${isActive ? "ring-2 ring-blue-400 ring-offset-2 rounded-lg" : ""}`,
+        onClick: onFocus,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              ref: imgRef,
+              src: block.src,
+              alt: block.alt || "",
+              style: imageDisplayStyle(block),
+              className: "rounded-lg border border-gray-200 block",
+              draggable: false
+            }
+          ),
+          isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Resize image",
+              onMouseDown: startResize,
+              className: "absolute bottom-1 right-1 w-3.5 h-3.5 bg-white border-2 border-blue-500 rounded-sm cursor-se-resize shadow-sm hover:bg-blue-50"
+            }
+          )
+        ]
+      }
+    ) : canUpload ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "flex flex-col items-center justify-center h-48 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer be-hover-border-primary hover:bg-gray-50 transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-500 text-sm", children: "Click to upload image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: (e) => {
+            const file = e.target.files?.[0];
+            if (file) onUpload(file);
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center h-32 border-2 border-dashed border-gray-200 rounded-lg bg-gray-50 px-4 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-500 text-sm", children: "Paste an image URL below" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-gray-400 text-xs mt-1", children: [
+        "Pass ",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "bg-gray-100 px-1 rounded", children: "onUploadImage" }),
+        " to enable file upload"
+      ] })
+    ] }),
+    block.src && isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap gap-1.5 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-500 mr-1", children: "Size:" }),
+      IMAGE_SIZE_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (preset.value === "auto") {
+              onChange({ imageWidth: void 0, imageHeight: void 0, imageWidthPercent: void 0 });
+            } else {
+              onChange({ imageWidthPercent: preset.value, imageWidth: void 0, imageHeight: void 0 });
+            }
+          },
+          className: `px-2 py-0.5 text-xs rounded border ${activePreset === preset.value ? "bg-blue-600 text-white border-blue-600" : "bg-white text-gray-600 border-gray-200 hover:border-gray-400"}`,
+          children: preset.label
+        },
+        preset.label
+      ))
+    ] }),
+    block.src && isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap gap-3 items-center text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs shrink-0", children: "Width" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "number",
+            min: 40,
+            max: 2e3,
+            placeholder: "auto",
+            value: block.imageWidthPercent ? "" : block.imageWidth ?? "",
+            disabled: Boolean(block.imageWidthPercent),
+            onChange: (e) => {
+              const v = e.target.value;
+              if (!v) onChange({ imageWidth: void 0 });
+              else onChange({ imageWidth: parseInt(v, 10) || void 0, imageWidthPercent: void 0 });
+            },
+            className: "w-20 border border-gray-200 rounded px-2 py-1 text-xs disabled:bg-gray-50"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-400", children: "px" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs shrink-0", children: "Height" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "number",
+            min: 40,
+            max: 2e3,
+            placeholder: "auto",
+            value: block.imageHeight ?? "",
+            onChange: (e) => {
+              const v = e.target.value;
+              if (!v) onChange({ imageHeight: void 0 });
+              else onChange({ imageHeight: parseInt(v, 10) || void 0, imageWidthPercent: void 0 });
+            },
+            className: "w-20 border border-gray-200 rounded px-2 py-1 text-xs"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-400", children: "px" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] text-gray-400", children: "Drag corner to resize \xB7 Shift+drag for custom height" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        type: "url",
+        value: block.src || "",
+        onChange: (e) => onChange({ src: e.target.value }),
+        onFocus,
+        placeholder: "Image URL (https://...)",
+        className: "w-full border border-gray-200 rounded px-3 py-2 text-sm"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        type: "text",
+        value: block.alt || "",
+        onChange: (e) => onChange({ alt: e.target.value }),
+        onFocus,
+        placeholder: "Alt text (optional)",
+        className: "w-full border border-gray-200 rounded px-3 py-2 text-sm"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        type: "text",
+        value: block.caption || "",
+        onChange: (e) => onChange({ caption: e.target.value }),
+        onFocus,
+        placeholder: "Caption (optional)",
+        className: "w-full border border-gray-200 rounded px-3 py-2 text-sm"
+      }
+    )
+  ] });
+}
+function SortableBlockShell({
+  id,
+  children
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = (0, import_sortable.useSortable)({ id });
+  const style = {
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ setNodeRef, style, dragHandleProps: { listeners, attributes } }) });
+}
+function BlockCanvas({
+  blocks,
+  onChange,
+  activeId,
+  onActiveIdChange
+}) {
+  const { onUploadImage } = useEditorContext();
+  const canUpload = Boolean(onUploadImage);
+  const setActiveId = onActiveIdChange;
+  const [slashMenu, setSlashMenu] = (0, import_react3.useState)(null);
+  const [focusListItem, setFocusListItem] = (0, import_react3.useState)(null);
+  const updateBlock = (id, patch) => {
+    onChange(blocks.map((b) => b.id === id ? { ...b, ...patch } : b));
+  };
+  const handleListBackspace = (block, liIndex) => {
+    const items = [...block.items || [""]];
+    if (items.length > 1) {
+      items.splice(liIndex, 1);
+      updateBlock(block.id, { items });
+      setFocusListItem({ blockId: block.id, index: Math.max(0, liIndex - 1) });
+      return;
+    }
+    const html = items[0] || "";
+    onChange(
+      blocks.map(
+        (b, i) => b.id === block.id ? { ...createBlock("paragraph"), id: b.id, html } : b
+      )
+    );
+    setActiveId(block.id);
+  };
+  (0, import_react3.useEffect)(() => {
+    if (!focusListItem) return;
+    const t = window.setTimeout(() => setFocusListItem(null), 50);
+    return () => window.clearTimeout(t);
+  }, [focusListItem, blocks]);
+  const plainText = (b) => (b.html || b.rawHtml || "").replace(/<[^>]+>/g, "");
+  const transformBlock = (id, type) => {
+    onChange(
+      blocks.map((b) => {
+        if (b.id !== id) return b;
+        const text = plainText(b);
+        const next = createBlock(type);
+        if (type === "heading") return { ...next, html: b.html || text, level: b.level || 2 };
+        if (type === "list") return { ...next, items: [b.html || text || ""], ordered: b.ordered };
+        if (type === "quote" || type === "paragraph") return { ...next, html: b.html || text };
+        if (type === "code") return { ...next, html: text };
+        if (type === "embed") return { ...next, embedUrl: b.embedUrl || b.src || "" };
+        if (type === "image") return { ...next, src: b.src || "", alt: b.alt || "" };
+        if (type === "html") return { ...next, rawHtml: b.rawHtml || b.html || "<div></div>" };
+        return next;
+      })
+    );
+  };
+  const insertAfter = (index, type = "paragraph") => {
+    const next = [...blocks];
+    next.splice(index + 1, 0, createBlock(type));
+    onChange(next);
+    setActiveId(next[index + 1].id);
+  };
+  const removeBlock = (id) => {
+    if (blocks.length <= 1) {
+      onChange([createBlock("paragraph")]);
+      return;
+    }
+    onChange(blocks.filter((b) => b.id !== id));
+  };
+  const moveBlock = (index, dir) => {
+    const target = index + dir;
+    if (target < 0 || target >= blocks.length) return;
+    const next = [...blocks];
+    [next[index], next[target]] = [next[target], next[index]];
+    onChange(next);
+  };
+  const applyFormat = (0, import_react3.useCallback)((cmd, value) => {
+    if (cmd === "link") {
+      const url = window.prompt("Enter URL");
+      if (url) document.execCommand("createLink", false, url);
+      return;
+    }
+    if (cmd === "formatBlock" && value) {
+      document.execCommand("formatBlock", false, value);
+      return;
+    }
+    document.execCommand(cmd, false);
+  }, []);
+  const handleTextKeyDown = (e, block, index) => {
+    const el = e.currentTarget;
+    const text = el.textContent || "";
+    if (e.key === "/" && text === "") {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      setSlashMenu({
+        blockId: block.id,
+        index,
+        top: rect.bottom + 6,
+        left: rect.left
+      });
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey && block.type === "paragraph") {
+      e.preventDefault();
+      updateBlock(block.id, { html: el.innerHTML });
+      insertAfter(index);
+    }
+    if (e.key === "Backspace" && text === "" && blocks.length > 1) {
+      e.preventDefault();
+      removeBlock(block.id);
+      const prev = blocks[index - 1];
+      if (prev) setActiveId(prev.id);
+    }
+  };
+  const pickSlashOption = (type) => {
+    if (!slashMenu) return;
+    transformBlock(slashMenu.blockId, type);
+    setSlashMenu(null);
+  };
+  const handleBlockPaste = (e, block, blockIndex, onChangeHtml) => {
+    const html = e.clipboardData.getData("text/html");
+    const text = e.clipboardData.getData("text/plain");
+    if (!html && !text) return;
+    e.preventDefault();
+    const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n\n/g, "</p><p>").replace(/\n/g, "<br>");
+    const raw = html || (text ? `<p>${escaped}</p>` : "");
+    const pastedBlocks = pastedHtmlToBlocks(raw);
+    if (!pastedBlocks.length) return;
+    const el = e.currentTarget;
+    const isEmpty = !(el.textContent || "").trim();
+    if (isEmpty && pastedBlocks.length === 1 && pastedBlocks[0].type !== "paragraph") {
+      updateBlock(block.id, { ...pastedBlocks[0], id: block.id });
+      return;
+    }
+    if (isMultiBlockPaste(pastedBlocks)) {
+      const next = [...blocks];
+      const toInsert = pastedBlocks.map((b, i) => i === 0 && isEmpty ? { ...b, id: block.id } : b);
+      if (isEmpty) next.splice(blockIndex, 1, ...toInsert);
+      else next.splice(blockIndex + 1, 0, ...pastedBlocks);
+      onChange(next);
+      setActiveId(toInsert[toInsert.length - 1].id);
+      return;
+    }
+    const inline = inlineHtmlFromBlocks(pastedBlocks);
+    if (!inline) return;
+    insertHtmlAtCursor(inline);
+    requestAnimationFrame(() => onChangeHtml(el.innerHTML));
+  };
+  const handleListPaste = (e, onChangeHtml) => {
+    const html = e.clipboardData.getData("text/html");
+    const text = e.clipboardData.getData("text/plain");
+    if (!html && !text) return;
+    e.preventDefault();
+    const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const raw = html || (text ? `<span>${escaped}</span>` : "");
+    const pastedBlocks = pastedHtmlToBlocks(raw);
+    const inline = inlineHtmlFromBlocks(pastedBlocks) || escaped;
+    insertHtmlAtCursor(inline);
+    requestAnimationFrame(() => onChangeHtml(e.currentTarget.innerHTML));
+  };
+  const uploadImage = async (blockId, file) => {
+    if (!onUploadImage) return;
+    const url = await onUploadImage(file);
+    if (url) updateBlock(blockId, { src: url });
+  };
+  const { setNodeRef: setDropRef, isOver } = (0, import_core.useDroppable)({ id: "canvas-drop" });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: setDropRef,
+      className: `max-w-[840px] mx-auto px-6 py-8 min-h-[240px] rounded-xl transition-colors ${isOver ? "bg-green-50/50 ring-2 ring-dashed ring-[color-mix(in_srgb,var(--be-primary)_25%,transparent)]" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sortable.SortableContext, { items: blocks.map((b) => b.id), strategy: import_sortable.verticalListSortingStrategy, children: blocks.map((block, index) => {
+          const isActive = activeId === block.id;
+          const level = block.level || 2;
+          const ListWrapper = block.ordered ? "ol" : "ul";
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SortableBlockShell, { id: block.id, children: ({ setNodeRef, style, dragHandleProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              ref: setNodeRef,
+              style,
+              className: `relative group mb-4 pt-2 ${isActive ? "ring-1 ring-blue-400 rounded-sm z-10" : ""}`,
+              onClick: () => setActiveId(block.id),
+              children: [
+                isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  BlockToolbar,
+                  {
+                    block,
+                    dragHandleProps,
+                    onTransform: (type) => transformBlock(block.id, type),
+                    onSetHeadingLevel: (lvl) => updateBlock(block.id, { level: lvl }),
+                    onToggleOrderedList: () => updateBlock(block.id, { ordered: !block.ordered }),
+                    onMoveUp: () => moveBlock(index, -1),
+                    onMoveDown: () => moveBlock(index, 1),
+                    onDelete: () => removeBlock(block.id),
+                    onFormat: applyFormat,
+                    canMoveUp: index > 0,
+                    canMoveDown: index < blocks.length - 1
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-2 items-start", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => insertAfter(index),
+                      className: "opacity-0 group-hover:opacity-100 mt-2 p-1 rounded bg-[#1e1e1e] text-white shrink-0 transition-opacity",
+                      title: "Add block",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Plus, { size: 16 })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 min-w-0 py-1", children: [
+                    block.type === "paragraph" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      RichBlock,
+                      {
+                        block,
+                        placeholder: "Type / to choose a block \u2014 paste from Word to keep bold, headings & lists",
+                        className: "text-[16px] leading-relaxed text-gray-800 min-h-[28px]",
+                        onChange: (html) => updateBlock(block.id, { html }),
+                        onFocus: () => setActiveId(block.id),
+                        onKeyDown: (e) => handleTextKeyDown(e, block, index),
+                        onPaste: (e) => handleBlockPaste(e, block, index, (html) => updateBlock(block.id, { html }))
+                      }
+                    ),
+                    block.type === "heading" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      RichBlock,
+                      {
+                        block,
+                        placeholder: BLOCK_LABELS.heading,
+                        className: `font-bold text-gray-900 min-h-[36px] ${HEADING_CLASSES[level]}`,
+                        onChange: (html) => updateBlock(block.id, { html }),
+                        onFocus: () => setActiveId(block.id),
+                        onKeyDown: (e) => handleTextKeyDown(e, block, index),
+                        onPaste: (e) => handleBlockPaste(e, block, index, (html) => updateBlock(block.id, { html }))
+                      }
+                    ),
+                    block.type === "quote" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-l-4 border-gray-300 pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      RichBlock,
+                      {
+                        block,
+                        placeholder: "Quote",
+                        className: "text-lg italic text-gray-600 min-h-[28px]",
+                        onChange: (html) => updateBlock(block.id, { html }),
+                        onFocus: () => setActiveId(block.id),
+                        onKeyDown: (e) => handleTextKeyDown(e, block, index),
+                        onPaste: (e) => handleBlockPaste(e, block, index, (html) => updateBlock(block.id, { html }))
+                      }
+                    ) }),
+                    block.type === "list" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ListWrapper, { className: `${block.ordered ? "list-decimal" : "list-disc"} pl-6 space-y-2`, children: [
+                      (block.items || [""]).map((item, liIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        ListItem,
+                        {
+                          html: item,
+                          shouldFocus: focusListItem?.blockId === block.id && focusListItem.index === liIndex,
+                          onChange: (html) => {
+                            const items = [...block.items || [""]];
+                            items[liIndex] = html;
+                            updateBlock(block.id, { items });
+                          },
+                          onFocus: () => setActiveId(block.id),
+                          onEnter: () => {
+                            const items = [...block.items || [""]];
+                            items.splice(liIndex + 1, 0, "");
+                            updateBlock(block.id, { items });
+                            setFocusListItem({ blockId: block.id, index: liIndex + 1 });
+                          },
+                          onBackspaceEmpty: () => handleListBackspace(block, liIndex),
+                          onPaste: (e) => handleListPaste(e, (html) => {
+                            const items = [...block.items || [""]];
+                            items[liIndex] = html;
+                            updateBlock(block.id, { items });
+                          })
+                        },
+                        `${block.id}-${liIndex}`
+                      )),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateBlock(block.id, { items: [...block.items || [], ""] }),
+                          className: "text-sm text-blue-600 hover:underline",
+                          children: "+ Add list item"
+                        }
+                      ) })
+                    ] }),
+                    block.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ImageBlockEditor,
+                      {
+                        block,
+                        isActive: activeId === block.id,
+                        onChange: (patch) => updateBlock(block.id, patch),
+                        onFocus: () => setActiveId(block.id),
+                        onUpload: (file) => uploadImage(block.id, file),
+                        canUpload
+                      }
+                    ),
+                    block.type === "embed" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "input",
+                        {
+                          type: "url",
+                          value: block.embedUrl || "",
+                          onChange: (e) => updateBlock(block.id, { embedUrl: e.target.value }),
+                          placeholder: "Embed URL (YouTube, Vimeo, Google Maps, etc.)",
+                          className: "w-full border border-gray-200 rounded px-3 py-2 text-sm"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-3 items-center", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm text-gray-500 shrink-0", children: "Height" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "input",
+                          {
+                            type: "number",
+                            min: 200,
+                            max: 1200,
+                            value: block.embedHeight || 400,
+                            onChange: (e) => updateBlock(block.id, { embedHeight: parseInt(e.target.value, 10) || 400 }),
+                            className: "w-24 border border-gray-200 rounded px-3 py-2 text-sm"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-400", children: "px" })
+                      ] }),
+                      block.embedUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-lg overflow-hidden border border-gray-200 bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "iframe",
+                        {
+                          src: block.embedUrl,
+                          width: "100%",
+                          height: block.embedHeight || 400,
+                          className: "border-0",
+                          title: "Embed preview",
+                          loading: "lazy"
+                        }
+                      ) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-gray-400", children: "Paste iframe src URL \u2014 YouTube, Vimeo, Loom, maps, etc." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("details", { className: "text-sm", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("summary", { className: "cursor-pointer text-gray-500 hover:text-gray-700", children: "Advanced: raw iframe HTML" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "textarea",
+                          {
+                            value: block.rawHtml || "",
+                            onChange: (e) => updateBlock(block.id, { rawHtml: e.target.value }),
+                            rows: 4,
+                            placeholder: '<iframe src="..." width="100%" height="400"></iframe>',
+                            className: "mt-2 w-full border border-gray-200 rounded px-3 py-2 text-xs font-mono"
+                          }
+                        )
+                      ] })
+                    ] }),
+                    block.type === "html" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      HtmlBlockEditor,
+                      {
+                        blockId: block.id,
+                        rawHtml: block.rawHtml || "",
+                        onChange: (html) => updateBlock(block.id, { rawHtml: html }),
+                        onFocus: () => setActiveId(block.id)
+                      }
+                    ),
+                    block.type === "code" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "textarea",
+                      {
+                        value: block.html || "",
+                        onChange: (e) => updateBlock(block.id, { html: e.target.value }),
+                        rows: 6,
+                        placeholder: "Paste code here...",
+                        className: "w-full border border-gray-200 rounded-lg px-4 py-3 text-sm font-mono bg-[#1e1e1e] text-green-400",
+                        spellCheck: false,
+                        onFocus: () => setActiveId(block.id)
+                      }
+                    ),
+                    block.type === "separator" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: "border-gray-300 my-4" })
+                  ] })
+                ] }),
+                slashMenu?.blockId === block.id && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fixed inset-0 z-[200]", onClick: () => setSlashMenu(null) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "div",
+                      {
+                        className: "fixed z-[201] bg-white border border-gray-200 rounded-lg shadow-2xl py-2 w-[220px] max-h-[280px] overflow-y-auto",
+                        style: { top: slashMenu.top, left: slashMenu.left },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "px-3 pb-1 text-[11px] font-semibold text-gray-400 uppercase", children: "Blocks" }),
+                          SLASH_OPTIONS.map((type) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => pickSlashOption(type),
+                              className: "w-full text-left px-3 py-2 text-sm hover:bg-blue-50",
+                              children: BLOCK_LABELS[type]
+                            },
+                            type
+                          ))
+                        ]
+                      }
+                    )
+                  ] }),
+                  document.body
+                )
+              ]
+            }
+          ) }, block.id);
+        }) }),
+        blocks.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-center text-gray-400 text-sm py-12", children: "Drag blocks from the Block panel \u2192 or type / to add" })
+      ]
+    }
+  );
+}
+
+// src/components/PostSidebar.tsx
+var import_react4 = require("react");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/BlockLibrary.tsx
+var import_core2 = require("@dnd-kit/core");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BLOCK_LIBRARY = [
+  { type: "paragraph", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Pilcrow, { size: 18 }), desc: "Start with plain text" },
+  { type: "heading", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Heading, { size: 18 }), desc: "H1\u2013H6 section title" },
+  { type: "list", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.List, { size: 18 }), desc: "Bullet or numbered list" },
+  { type: "quote", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Quote, { size: 18 }), desc: "Highlighted quote" },
+  { type: "image", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Image, { size: 18 }), desc: "Upload or URL image" },
+  { type: "embed", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Video, { size: 18 }), desc: "YouTube, iframe embed" },
+  { type: "html", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.FileCode2, { size: 18 }), desc: "Custom HTML block" },
+  { type: "code", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Code2, { size: 18 }), desc: "Code snippet" },
+  { type: "separator", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Minus, { size: 18 }), desc: "Horizontal divider line" }
+];
+function DraggableBlockItem({
+  type,
+  icon,
+  label,
+  desc,
+  onClick
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = (0, import_core2.useDraggable)({
+    id: `library-${type}`,
+    data: { source: "library", type }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      onClick,
+      className: `w-full flex items-start gap-3 p-3 rounded-lg border border-gray-200 bg-white be-hover-border-primary hover:bg-green-50/40 text-left transition-colors cursor-grab active:cursor-grabbing ${isDragging ? "opacity-40" : ""}`,
+      ...listeners,
+      ...attributes,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mt-0.5 text-gray-600 shrink-0", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block text-sm font-medium text-gray-900", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block text-[11px] text-gray-500 mt-0.5 leading-snug", children: desc })
+        ] })
+      ]
+    }
+  );
+}
+function BlockLibrary({ onAddBlock }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs text-gray-500 px-1", children: "Drag into editor or click to add at the end." }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "space-y-2", children: BLOCK_LIBRARY.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      DraggableBlockItem,
+      {
+        type: item.type,
+        icon: item.icon,
+        label: BLOCK_LABELS[item.type],
+        desc: item.desc,
+        onClick: () => onAddBlock(item.type)
+      },
+      item.type
+    )) })
+  ] });
+}
+
+// src/components/SeoPanel.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SeoPanel({
+  post,
+  contentHtml,
+  onChange,
+  onClose
+}) {
+  const { siteName, baseUrl } = useEditorContext();
+  const seo = computeSeoScore(post, contentHtml);
+  const preview = getSeoPreview(post, siteName, baseUrl);
+  const titleLen = (post.metaTitle || post.title).length;
+  const descLen = (post.metaDescription || post.excerpt).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sticky top-0 bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between z-10 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "text-sm font-semibold text-gray-900", children: "SEO Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[11px] text-gray-500 truncate", children: "Search preview & meta" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "span",
+          {
+            className: `text-xs font-bold px-2 py-0.5 rounded-full ${seo.score >= 70 ? "bg-green-100 text-green-700" : seo.score >= 40 ? "bg-amber-100 text-amber-700" : "bg-red-100 text-red-700"}`,
+            children: [
+              seo.score,
+              "/100"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: onClose, className: "p-1.5 hover:bg-gray-100 rounded-lg text-gray-500", "aria-label": "Close SEO panel", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.X, { size: 18 }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[11px] font-semibold text-gray-500 uppercase tracking-wide mb-2", children: "Google Preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "rounded-lg border border-gray-200 p-3 bg-gray-50 space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[#1a0dab] text-sm font-medium leading-snug line-clamp-2", children: preview.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[#006621] text-xs truncate", children: preview.url }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-gray-600 text-xs leading-relaxed line-clamp-4", children: preview.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-xs font-medium text-gray-700", children: "SEO Title" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            value: post.metaTitle || "",
+            onChange: (e) => onChange({ metaTitle: e.target.value }),
+            placeholder: post.title || "Defaults to post title",
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 be-ring-primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-1.5 rounded-full bg-gray-100 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `h-full transition-all ${titleLengthColor(titleLen)}`, style: { width: `${Math.min(100, titleLen / 60 * 100)}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[10px] text-gray-400", children: [
+          titleLen,
+          " / 60 chars"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-xs font-medium text-gray-700", children: "Meta Description" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "textarea",
+          {
+            value: post.metaDescription || "",
+            onChange: (e) => onChange({ metaDescription: e.target.value }),
+            placeholder: post.excerpt || "Defaults to excerpt",
+            rows: 4,
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-1 be-ring-primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-1.5 rounded-full bg-gray-100 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `h-full transition-all ${descriptionLengthColor(descLen)}`, style: { width: `${Math.min(100, descLen / 160 * 100)}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[10px] text-gray-400", children: [
+          descLen,
+          " / 160 chars"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-xs font-medium text-gray-700", children: "Focus Keyword" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            value: post.focusKeyword || "",
+            onChange: (e) => onChange({ focusKeyword: e.target.value }),
+            placeholder: "e.g. AI machine learning",
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 be-ring-primary"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-xs font-medium text-gray-700", children: "Permalink / Slug" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            value: post.slug,
+            onChange: (e) => onChange({ slug: e.target.value }),
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 be-ring-primary"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border-t border-gray-100 pt-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-2", children: "Basic SEO Checklist" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "space-y-2", children: seo.checks.map((check) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start gap-2 text-xs", children: [
+          check.passed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Check, { size: 14, className: "text-green-600 shrink-0 mt-0.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.X, { size: 14, className: "text-red-400 shrink-0 mt-0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: check.passed ? "text-gray-700" : "text-gray-500", children: check.label })
+        ] }, check.id)) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/PostSidebar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Section({ title, children, defaultOpen = true }) {
+  const [open, setOpen] = (0, import_react4.useState)(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "border-b border-gray-200", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", onClick: () => setOpen((v) => !v), className: "w-full flex items-center justify-between px-4 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50", children: [
+      title,
+      open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ChevronUp, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ChevronDown, { size: 16 })
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-4 pb-4 space-y-3", children })
+  ] });
+}
+function BlockSettings({
+  block,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-3 pt-2 border-t border-gray-100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Selected block" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm font-medium text-gray-900", children: BLOCK_LABELS[block.type] }),
+    block.type === "heading" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "text-xs text-gray-500", children: "Heading level" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "select",
+        {
+          value: block.level || 2,
+          onChange: (e) => onChange({ level: parseInt(e.target.value, 10) }),
+          className: "w-full border border-gray-200 rounded px-2 py-1.5 text-sm",
+          children: [1, 2, 3, 4, 5, 6].map((lvl) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: lvl, children: HEADING_LABELS[lvl] }, lvl))
+        }
+      )
+    ] }),
+    block.type === "list" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2 text-sm text-gray-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: Boolean(block.ordered), onChange: (e) => onChange({ ordered: e.target.checked }) }),
+      "Numbered list"
+    ] }),
+    block.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "url",
+          value: block.src || "",
+          onChange: (e) => onChange({ src: e.target.value }),
+          placeholder: "Image URL",
+          className: "w-full border border-gray-200 rounded px-2 py-1.5 text-xs"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "text",
+          value: block.alt || "",
+          onChange: (e) => onChange({ alt: e.target.value }),
+          placeholder: "Alt text",
+          className: "w-full border border-gray-200 rounded px-2 py-1.5 text-xs"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "text-xs text-gray-500", children: [
+          "Width (px)",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "number",
+              min: 40,
+              placeholder: "auto",
+              value: block.imageWidthPercent ? "" : block.imageWidth ?? "",
+              disabled: Boolean(block.imageWidthPercent),
+              onChange: (e) => {
+                const v = e.target.value;
+                if (!v) onChange({ imageWidth: void 0 });
+                else onChange({ imageWidth: parseInt(v, 10) || void 0, imageWidthPercent: void 0 });
+              },
+              className: "mt-0.5 w-full border border-gray-200 rounded px-2 py-1 text-xs disabled:bg-gray-50"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "text-xs text-gray-500", children: [
+          "Height (px)",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "number",
+              min: 40,
+              placeholder: "auto",
+              value: block.imageHeight ?? "",
+              onChange: (e) => {
+                const v = e.target.value;
+                if (!v) onChange({ imageHeight: void 0 });
+                else onChange({ imageHeight: parseInt(v, 10) || void 0, imageWidthPercent: void 0 });
+              },
+              className: "mt-0.5 w-full border border-gray-200 rounded px-2 py-1 text-xs"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "select",
+        {
+          value: block.imageWidthPercent ?? "custom",
+          onChange: (e) => {
+            const v = e.target.value;
+            if (v === "custom") return;
+            if (v === "auto") onChange({ imageWidth: void 0, imageHeight: void 0, imageWidthPercent: void 0 });
+            else onChange({ imageWidthPercent: parseInt(v, 10), imageWidth: void 0, imageHeight: void 0 });
+          },
+          className: "w-full border border-gray-200 rounded px-2 py-1.5 text-xs",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "auto", children: "Auto size" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "25", children: "25% width" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "50", children: "50% width" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "75", children: "75% width" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "100", children: "100% width" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "custom", children: "Custom (px)" })
+          ]
+        }
+      )
+    ] }),
+    block.type === "embed" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        type: "url",
+        value: block.embedUrl || "",
+        onChange: (e) => onChange({ embedUrl: e.target.value }),
+        placeholder: "Embed URL",
+        className: "w-full border border-gray-200 rounded px-2 py-1.5 text-xs"
+      }
+    )
+  ] });
+}
+function PostSidebar({
+  post,
+  contentHtml,
+  onChange,
+  onAddBlock,
+  activeBlock,
+  onUpdateBlock,
+  seoMode,
+  onCloseSeo
+}) {
+  const { onUploadImage } = useEditorContext();
+  const canUpload = Boolean(onUploadImage);
+  const [tab, setTab] = (0, import_react4.useState)("post");
+  const [uploading, setUploading] = (0, import_react4.useState)(false);
+  const [tagInput, setTagInput] = (0, import_react4.useState)(post.tags.join(", "));
+  const uploadFeatured = async (file) => {
+    if (!onUploadImage) return;
+    setUploading(true);
+    try {
+      const url = await onUploadImage(file);
+      if (url) onChange({ featuredImage: url });
+    } finally {
+      setUploading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("aside", { className: "w-[300px] shrink-0 border-l border-gray-200 bg-white flex flex-col h-full overflow-hidden", children: seoMode ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SeoPanel, { post, contentHtml, onChange, onClose: onCloseSeo ?? (() => {
+  }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex border-b border-gray-200 sticky top-0 bg-white z-10 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTab("post"),
+          className: `flex-1 py-3 text-sm font-semibold ${tab === "post" ? "be-text-primary border-b-2 be-border-primary" : "text-gray-500 hover:text-gray-700"}`,
+          children: "Post"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTab("block"),
+          className: `flex-1 py-3 text-sm font-semibold ${tab === "block" ? "be-text-primary border-b-2 be-border-primary" : "text-gray-500 hover:text-gray-700"}`,
+          children: "Block"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [
+      tab === "post" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Section, { title: "Featured image", children: post.featuredImage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: post.featuredImage, alt: "", className: "w-full rounded border border-gray-200 object-cover aspect-video" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => onChange({ featuredImage: "" }), className: "text-xs text-red-500 hover:underline", children: "Remove image" })
+        ] }) : canUpload ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex flex-col items-center justify-center h-32 border border-gray-200 rounded cursor-pointer be-hover-border-primary hover:bg-gray-50", children: [
+          uploading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Loader2, { size: 20, className: "animate-spin text-gray-400" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ImageIcon, { size: 24, className: "text-gray-400 mb-1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs text-gray-500", children: "Set featured image" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "file", accept: "image/*", className: "hidden", onChange: (e) => e.target.files?.[0] && uploadFeatured(e.target.files[0]), disabled: uploading })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-xs text-gray-400 text-center py-4 border border-dashed border-gray-200 rounded", children: [
+          "Pass ",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { className: "bg-gray-100 px-1 rounded", children: "onUploadImage" }),
+          " to enable uploads"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Section, { title: "Excerpt", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "textarea",
+          {
+            value: post.excerpt,
+            onChange: (e) => onChange({ excerpt: e.target.value }),
+            rows: 3,
+            placeholder: "Short summary for blog cards & SEO fallback",
+            className: "w-full border border-gray-200 rounded px-3 py-2 text-sm resize-none focus:outline-none focus:ring-1 be-ring-primary"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Section, { title: "Post settings", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-3 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "text-xs text-gray-500 block mb-1", children: "Status" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { value: post.status, onChange: (e) => onChange({ status: e.target.value }), className: "w-full border border-gray-200 rounded px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "draft", children: "Draft" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "published", children: "Published" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "text-xs text-gray-500 block mb-1", children: "Publish date" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "datetime-local", value: post.publishedAt.slice(0, 16), onChange: (e) => onChange({ publishedAt: new Date(e.target.value).toISOString() }), className: "w-full border border-gray-200 rounded px-2 py-1.5 text-xs" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "text-xs text-gray-500 block mb-1", children: "Permalink / Slug" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { value: post.slug, onChange: (e) => onChange({ slug: e.target.value }), className: "w-full border border-gray-200 rounded px-2 py-1.5 text-xs" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "text-xs text-gray-500 block mb-1", children: "Author" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { value: post.author, onChange: (e) => onChange({ author: e.target.value }), className: "w-full border border-gray-200 rounded px-2 py-1.5 text-sm", placeholder: "Author name" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Section, { title: "Tags", defaultOpen: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              value: tagInput,
+              onChange: (e) => {
+                setTagInput(e.target.value);
+                onChange({ tags: e.target.value.split(",").map((t) => t.trim()).filter(Boolean) });
+              },
+              placeholder: "ai, startup, product",
+              className: "w-full border border-gray-200 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 be-ring-primary"
+            }
+          ),
+          post.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: post.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs bg-gray-100 text-gray-700 px-2 py-0.5 rounded-full", children: tag }, tag)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-gray-400", children: "Separate with commas." })
+        ] })
+      ] }),
+      tab === "block" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-4 space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockLibrary, { onAddBlock }),
+        activeBlock && onUpdateBlock && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSettings, { block: activeBlock, onChange: onUpdateBlock }),
+        !activeBlock && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-gray-400 border-t border-gray-100 pt-3", children: "Click a block in the editor to see its settings here." })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/BlogEditor.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BlogEditorInner({
+  initial,
+  originalSlug,
+  onSave,
+  onNavigate,
+  backHref = "#",
+  previewUrl,
+  newPostSlug = "new-post",
+  className = ""
+}) {
+  const [post, setPost] = (0, import_react5.useState)(initial);
+  const initialBlocks = (0, import_react5.useMemo)(() => htmlToBlocks(initial.content), [initial.content]);
+  const [blocks, setBlocks] = (0, import_react5.useState)(initialBlocks);
+  const [blocksHistory, setBlocksHistory] = (0, import_react5.useState)([initialBlocks]);
+  const [historyIndex, setHistoryIndex] = (0, import_react5.useState)(0);
+  const [activeId, setActiveId] = (0, import_react5.useState)(null);
+  const [draggingType, setDraggingType] = (0, import_react5.useState)(null);
+  const [saving, setSaving] = (0, import_react5.useState)(false);
+  const [message, setMessage] = (0, import_react5.useState)("");
+  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(true);
+  const [seoOpen, setSeoOpen] = (0, import_react5.useState)(false);
+  const sensors = (0, import_core3.useSensors)((0, import_core3.useSensor)(import_core3.PointerSensor, { activationConstraint: { distance: 6 } }));
+  const isNew = (originalSlug ?? initial.slug) === newPostSlug;
+  const editSlug = originalSlug ?? initial.slug;
+  const contentHtml = (0, import_react5.useMemo)(() => blocksToHtml(blocks), [blocks]);
+  const seoScore = (0, import_react5.useMemo)(() => computeSeoScore(post, contentHtml).score, [post, contentHtml]);
+  const activeBlock = blocks.find((b) => b.id === activeId);
+  const updatePost = (patch) => setPost((p) => ({ ...p, ...patch }));
+  const handleBlocksChange = (next) => {
+    setBlocksHistory((hist) => [...hist.slice(0, historyIndex + 1), next]);
+    setHistoryIndex((i) => i + 1);
+    setBlocks(next);
+  };
+  const updateActiveBlock = (patch) => {
+    if (!activeId) return;
+    handleBlocksChange(blocks.map((b) => b.id === activeId ? { ...b, ...patch } : b));
+  };
+  const addBlock = (type, afterIndex) => {
+    const newBlock = createBlock(type);
+    const next = [...blocks];
+    const at = afterIndex !== void 0 && afterIndex >= 0 ? afterIndex + 1 : next.length;
+    next.splice(at, 0, newBlock);
+    handleBlocksChange(next);
+    setActiveId(newBlock.id);
+  };
+  const handleDragStart = (event) => {
+    const data = event.active.data.current;
+    if (data?.source === "library" && data.type) setDraggingType(data.type);
+  };
+  const handleDragEnd = (event) => {
+    setDraggingType(null);
+    const { active, over } = event;
+    if (!over) return;
+    const data = active.data.current;
+    if (data?.source === "library" && data.type) {
+      const overId = String(over.id);
+      if (overId === "canvas-drop") {
+        addBlock(data.type);
+        return;
+      }
+      const idx = blocks.findIndex((b) => b.id === overId);
+      addBlock(data.type, idx >= 0 ? idx : blocks.length - 1);
+      return;
+    }
+    if (active.id !== over.id) {
+      const oldIndex = blocks.findIndex((b) => b.id === active.id);
+      const newIndex = blocks.findIndex((b) => b.id === over.id);
+      if (oldIndex >= 0 && newIndex >= 0) {
+        handleBlocksChange((0, import_sortable2.arrayMove)(blocks, oldIndex, newIndex));
+      }
+    }
+  };
+  const undo = () => {
+    if (historyIndex <= 0) return;
+    const idx = historyIndex - 1;
+    setHistoryIndex(idx);
+    setBlocks(blocksHistory[idx]);
+  };
+  const redo = () => {
+    if (historyIndex >= blocksHistory.length - 1) return;
+    const idx = historyIndex + 1;
+    setHistoryIndex(idx);
+    setBlocks(blocksHistory[idx]);
+  };
+  const resolvedTitle = (0, import_react5.useMemo)(() => post.title.trim() || "No title", [post.title]);
+  const save = async (publish) => {
+    setSaving(true);
+    setMessage("");
+    try {
+      const title = post.title.trim() || "Untitled Post";
+      let slug = post.slug.trim();
+      if (isNew || slug === newPostSlug) slug = slugifyTitle(title);
+      const payload = {
+        ...post,
+        title,
+        slug,
+        content: contentHtml,
+        status: publish ? "published" : post.status,
+        publishedAt: publish ? (/* @__PURE__ */ new Date()).toISOString() : post.publishedAt
+      };
+      const result = await onSave(payload, { publish, contentHtml });
+      const newSlug = result?.slug ?? slug;
+      setPost({ ...payload, slug: newSlug });
+      setMessage(publish ? "Published!" : "Draft saved");
+      if (onNavigate && (isNew || newSlug !== editSlug)) {
+        onNavigate(newSlug);
+      }
+    } catch {
+      setMessage("Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const previewHref = previewUrl && post.slug !== newPostSlug ? previewUrl(post.slug) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core3.DndContext, { sensors, collisionDetection: import_core3.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col h-screen bg-[var(--be-bg)] ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { className: "h-14 bg-[var(--be-surface)] border-b border-gray-200 flex items-center justify-between px-4 shrink-0 z-30", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: backHref, className: "p-2 hover:bg-gray-100 rounded", title: "Back to posts", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ArrowLeft, { size: 18, className: "text-gray-600" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: undo, disabled: historyIndex <= 0, className: "p-2 hover:bg-gray-100 rounded disabled:opacity-30", title: "Undo", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.Undo2, { size: 18, className: "text-gray-600" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: redo, disabled: historyIndex >= blocksHistory.length - 1, className: "p-2 hover:bg-gray-100 rounded disabled:opacity-30", title: "Redo", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.Redo2, { size: 18, className: "text-gray-600" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hidden md:inline text-sm text-gray-500 ml-2 max-w-[240px] truncate", children: [
+            resolvedTitle,
+            " \u2014 ",
+            post.status === "published" ? "Post" : "Draft"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+          message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs be-text-primary hidden sm:inline", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSidebarOpen(true);
+                setSeoOpen(true);
+              },
+              className: `flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-lg border transition-colors ${seoOpen ? "be-border-primary be-bg-primary-muted be-text-primary ring-1 ring-[color-mix(in_srgb,var(--be-primary)_30%,transparent)]" : seoScore >= 70 ? "border-green-200 bg-green-50 text-green-700 hover:bg-green-100" : seoScore >= 40 ? "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100" : "border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100"}`,
+              children: [
+                "SEO",
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs font-bold", children: seoScore })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => save(false), disabled: saving, className: "text-sm text-gray-700 be-text-primary hover:opacity-80 px-3 py-1.5 disabled:opacity-50", children: "Save draft" }),
+          previewHref && post.status === "published" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: previewHref, target: "_blank", rel: "noopener noreferrer", className: "p-2 hover:bg-gray-100 rounded text-gray-600", title: "Preview", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ExternalLink, { size: 18 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSidebarOpen((v) => !v);
+                if (sidebarOpen) setSeoOpen(false);
+              },
+              className: `p-2 rounded transition-colors ${sidebarOpen ? "bg-gray-100 be-text-primary" : "hover:bg-gray-100 text-gray-600"}`,
+              title: sidebarOpen ? "Collapse sidebar" : "Expand sidebar",
+              children: sidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.PanelRightClose, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.PanelRightOpen, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => save(true),
+              disabled: saving,
+              className: "be-btn-primary text-sm font-medium px-4 py-2 rounded disabled:opacity-50 flex items-center gap-2",
+              children: [
+                saving && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.Loader2, { size: 14, className: "animate-spin" }),
+                post.status === "published" ? "Update" : "Publish"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 overflow-y-auto overflow-x-hidden bg-[var(--be-surface)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "max-w-[840px] mx-auto pt-12 pb-24 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              type: "text",
+              value: post.title,
+              onChange: (e) => updatePost({ title: e.target.value }),
+              placeholder: "Add title",
+              className: "w-full text-4xl md:text-5xl font-serif text-gray-900 placeholder:text-gray-300 border-none outline-none bg-transparent mb-8"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BlockCanvas, { blocks, onChange: handleBlocksChange, activeId, onActiveIdChange: setActiveId })
+        ] }),
+        sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          PostSidebar,
+          {
+            post,
+            contentHtml,
+            onChange: updatePost,
+            onAddBlock: (type) => addBlock(type),
+            activeBlock,
+            onUpdateBlock: updateActiveBlock,
+            seoMode: seoOpen,
+            onCloseSeo: () => setSeoOpen(false)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core3.DragOverlay, { children: draggingType ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-4 py-2 bg-white be-border-primary border rounded-lg shadow-lg text-sm font-medium text-gray-800", children: BLOCK_LABELS[draggingType] }) : null })
+  ] });
+}
+function BlogEditor({
+  theme,
+  onUploadImage,
+  uploadFile,
+  siteName,
+  baseUrl,
+  ...props
+}) {
+  const resolved = resolveTheme(theme);
+  const imageUpload = onUploadImage ?? uploadFile;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditorProvider, { onUploadImage: imageUpload, theme: resolved, siteName, baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "blog-editor-root", style: themeToCssVars(resolved), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BlogEditorInner, { ...props }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BLOCK_LABELS,
+  BlogEditor,
+  EditorProvider,
+  HEADING_CLASSES,
+  HEADING_LABELS,
+  blocksToHtml,
+  cleanPastedHtml,
+  computeSeoScore,
+  createBlock,
+  defaultTheme,
+  descriptionLengthColor,
+  getSeoPreview,
+  htmlToBlocks,
+  inlineHtmlFromBlocks,
+  insertHtmlAtCursor,
+  isMultiBlockPaste,
+  pastedHtmlToBlocks,
+  resolveTheme,
+  slugifyTitle,
+  themeToCssVars,
+  titleLengthColor,
+  useEditorContext
+});
+//# sourceMappingURL=index.cjs.map