@unlayer/react-elements 0.1.0

package/dist/index.js

@@ -0,0 +1,1588 @@
+import { ButtonDefaults, DividerDefaults, HeadingDefaults, HtmlDefaults, ImageDefaults, MenuDefaults, ParagraphDefaults, SocialDefaults, TableDefaults, VideoDefaults, BodyDefaults, RowDefaults, ColumnDefaults, ButtonExporters, DividerExporters, HeadingExporters, HtmlExporters, ImageExporters, MenuExporters, ParagraphExporters, SocialExporters, TableExporters, VideoExporters, schemaVersion as schemaVersion$1, RowExporters, ColumnExporters, BodyExporters, heads } from '@unlayer/exporters';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo, useContext, createContext } from 'react';
+import ReactDOMServer, { renderToStaticMarkup } from 'react-dom/server';
+
+// src/components/Button.tsx
+
+// ../shared/dist/index.js
+var DEFAULT_CONFIG = {
+  cdnBaseUrl: "https://cdn.tools.unlayer.com",
+  mode: "web"
+};
+var ColumnLayouts = {
+  OneColumn: {
+    name: "OneColumn",
+    description: "One full column (100%)",
+    cells: [1],
+    expectedColumns: 1,
+    widths: ["100%"]
+  },
+  TwoEqual: {
+    name: "TwoEqual",
+    description: "Two equal columns (50% + 50%)",
+    cells: [1, 1],
+    expectedColumns: 2,
+    widths: ["50%", "50%"]
+  },
+  TwoWideNarrow: {
+    name: "TwoWideNarrow",
+    description: "Two columns: wide + narrow (67% + 33%)",
+    cells: [2, 1],
+    expectedColumns: 2,
+    widths: ["66.67%", "33.33%"]
+  },
+  TwoNarrowWide: {
+    name: "TwoNarrowWide",
+    description: "Two columns: narrow + wide (33% + 67%)",
+    cells: [1, 2],
+    expectedColumns: 2,
+    widths: ["33.33%", "66.67%"]
+  },
+  ThreeEqual: {
+    name: "ThreeEqual",
+    description: "Three equal columns (33% + 33% + 33%)",
+    cells: [1, 1, 1],
+    expectedColumns: 3,
+    widths: ["33.33%", "33.33%", "33.33%"]
+  },
+  ThreeNarrowWideNarrow: {
+    name: "ThreeNarrowWideNarrow",
+    description: "Three columns: narrow + wide + narrow (25% + 50% + 25%)",
+    cells: [1, 2, 1],
+    expectedColumns: 3,
+    widths: ["25%", "50%", "25%"]
+  },
+  FourEqual: {
+    name: "FourEqual",
+    description: "Four equal columns (25% + 25% + 25% + 25%)",
+    cells: [1, 1, 1, 1],
+    expectedColumns: 4,
+    widths: ["25%", "25%", "25%", "25%"]
+  },
+  FiveEqual: {
+    name: "FiveEqual",
+    description: "Five equal columns (20% + 20% + 20% + 20% + 20%)",
+    cells: [1, 1, 1, 1, 1],
+    expectedColumns: 5,
+    widths: ["20%", "20%", "20%", "20%", "20%"]
+  }
+};
+function validateColumnLayout(layout, childrenCount) {
+  if (layout.expectedColumns !== childrenCount) {
+    throw new Error(`${layout.name} layout expects ${layout.expectedColumns} <Column> components, but got ${childrenCount}. Layout: ${layout.description}. Make sure you have exactly ${layout.expectedColumns} <Column> children.`);
+  }
+}
+var EMPTY_TEXT_JSON = '{"root":{"children":[{"children":[],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"textStyle":""}],"format":"","indent":0,"type":"root","version":1}}';
+function textToTextJson(text) {
+  if (!text) return EMPTY_TEXT_JSON;
+  const escaped = JSON.stringify(text);
+  return `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":${escaped},"type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"textStyle":""}],"format":"","indent":0,"type":"root","version":1}}`;
+}
+var FORMAT_TAGS = [
+  [1, "<strong>", "</strong>"],
+  // bold
+  [2, "<em>", "</em>"],
+  // italic
+  [4, "<s>", "</s>"],
+  // strikethrough
+  [8, "<u>", "</u>"],
+  // underline
+  [16, "<code>", "</code>"],
+  // code
+  [32, "<sub>", "</sub>"],
+  // subscript
+  [64, "<sup>", "</sup>"]
+  // superscript
+];
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function textNodeToHtml(node) {
+  let html = escapeHtml(node.text || "");
+  const style = node.style;
+  const format = node.format || 0;
+  let openTags = "";
+  let closeTags = "";
+  for (const [bit, open, close] of FORMAT_TAGS) {
+    if (format & bit) {
+      openTags += open;
+      closeTags = close + closeTags;
+    }
+  }
+  html = openTags + html + closeTags;
+  if (style) {
+    html = `<span style="${escapeHtml(style)}">${html}</span>`;
+  }
+  return html;
+}
+function nodeToHtml(node) {
+  if (!node || typeof node !== "object") return "";
+  const type = node.type;
+  if (type === "text" || type === "extended-text") {
+    return textNodeToHtml(node);
+  }
+  if (type === "linebreak") {
+    return "<br>";
+  }
+  const childrenHtml = (node.children || []).map(nodeToHtml).join("");
+  switch (type) {
+    case "root":
+      return childrenHtml;
+    case "paragraph":
+    case "extended-paragraph": {
+      if (!childrenHtml) return "<p><br></p>";
+      const dir = node.direction ? ` dir="${node.direction}"` : "";
+      return `<p${dir}>${childrenHtml}</p>`;
+    }
+    case "heading": {
+      const tag = node.tag || "h1";
+      const dir = node.direction ? ` dir="${node.direction}"` : "";
+      return `<${tag}${dir}>${childrenHtml}</${tag}>`;
+    }
+    case "link": {
+      const href = node.url ? ` href="${escapeHtml(node.url)}"` : "";
+      const target = node.target ? ` target="${escapeHtml(node.target)}"` : "";
+      const rel = node.rel ? ` rel="${escapeHtml(node.rel)}"` : "";
+      return `<a${href}${target}${rel}>${childrenHtml}</a>`;
+    }
+    case "list": {
+      const tag = node.listType === "number" ? "ol" : "ul";
+      return `<${tag}>${childrenHtml}</${tag}>`;
+    }
+    case "listitem":
+      return `<li>${childrenHtml}</li>`;
+    default:
+      return childrenHtml;
+  }
+}
+function generateHtmlFromTextJson(textJson) {
+  if (!textJson) return "";
+  try {
+    const parsed = JSON.parse(textJson);
+    if (parsed.__html) return parsed.__html;
+    return nodeToHtml(parsed.root);
+  } catch {
+    return "";
+  }
+}
+function htmlToTextJson(html) {
+  if (!html) return EMPTY_TEXT_JSON;
+  return JSON.stringify({ __html: html });
+}
+function mergeValues(defaults, userValues) {
+  if (!userValues) return defaults;
+  const result = { ...defaults };
+  for (const key of Object.keys(userValues)) {
+    const userVal = userValues[key];
+    const defaultVal = defaults[key];
+    if (userVal !== null && defaultVal !== null && typeof userVal === "object" && typeof defaultVal === "object" && !Array.isArray(userVal) && !Array.isArray(defaultVal)) {
+      result[key] = mergeValues(defaultVal, userVal);
+    } else {
+      result[key] = userVal;
+    }
+  }
+  return result;
+}
+var nestedStructureCache = /* @__PURE__ */ new WeakMap();
+function analyzeNestedStructure(defaultValues) {
+  const cached = nestedStructureCache.get(defaultValues);
+  if (cached) return cached;
+  const nestedGroups = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(defaultValues)) {
+    if (key === "_meta" || key === "text" || key === "textJson" || key === "children") {
+      continue;
+    }
+    if (value && typeof value === "object" && !Array.isArray(value) && Object.keys(value).length > 0) {
+      const props = new Set(Object.keys(value));
+      nestedGroups.set(key, props);
+    }
+  }
+  nestedStructureCache.set(defaultValues, nestedGroups);
+  return nestedGroups;
+}
+function mapSemanticProps(props, defaultValues, componentType) {
+  const { children, values, ...restProps } = props;
+  const userProps = { ...restProps };
+  const result = values ? { ...values } : {};
+  if (children !== void 0 && !result.text && !result.textJson) {
+    if (componentType === "Paragraph") {
+      const textContent = typeof children === "string" ? children : String(children);
+      result.textJson = textToTextJson(textContent);
+    } else {
+      result.text = children;
+    }
+  }
+  const textFromEscapeHatch = result.text;
+  const textFromProp = userProps.text;
+  const textProp = textFromEscapeHatch || textFromProp;
+  if (componentType === "Paragraph" && textProp && !result.textJson) {
+    result.textJson = textFromEscapeHatch ? htmlToTextJson(String(textProp)) : textToTextJson(String(textProp));
+    delete result.text;
+    delete userProps.text;
+  }
+  const htmlProp = userProps.html || result.html;
+  if (componentType === "Paragraph" && htmlProp && !result.textJson) {
+    result.textJson = htmlToTextJson(String(htmlProp));
+    delete userProps.html;
+    delete result.html;
+  }
+  const href = userProps.href;
+  if (href !== void 0) {
+    if (typeof href === "string") {
+      userProps.href = {
+        name: "web",
+        values: { href, target: "_blank" }
+      };
+    } else {
+      userProps.href = href;
+    }
+  }
+  const nestedGroups = analyzeNestedStructure(defaultValues);
+  const nested = {};
+  const flat = {};
+  for (const [key, value] of Object.entries(userProps)) {
+    if (value === void 0) continue;
+    if (nestedGroups.has(key)) {
+      nested[key] = value;
+      continue;
+    }
+    let belongsToGroup = false;
+    for (const [groupName, groupProps] of nestedGroups.entries()) {
+      if (groupProps.has(key)) {
+        nested[groupName] = nested[groupName] || {};
+        nested[groupName][key] = value;
+        belongsToGroup = true;
+        break;
+      }
+    }
+    if (!belongsToGroup) {
+      flat[key] = value;
+    }
+  }
+  const final = {
+    ...result,
+    ...flat
+  };
+  for (const [groupName, groupValues] of Object.entries(nested)) {
+    if (Object.keys(groupValues).length > 0) {
+      final[groupName] = {
+        ...result[groupName],
+        ...groupValues
+      };
+    }
+  }
+  return final;
+}
+var HTML_ENTITIES = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&apos;": "'",
+  "&nbsp;": " ",
+  "&mdash;": "\u2014",
+  "&ndash;": "\u2013",
+  "&laquo;": "\xAB",
+  "&raquo;": "\xBB",
+  "&bull;": "\u2022",
+  "&middot;": "\xB7",
+  "&hellip;": "\u2026",
+  "&copy;": "\xA9",
+  "&reg;": "\xAE",
+  "&trade;": "\u2122"
+};
+function decodeEntities(text) {
+  let result = text.replace(/&\w+;/g, (match) => HTML_ENTITIES[match] ?? match);
+  result = result.replace(
+    /&#(\d+);/g,
+    (_, code) => String.fromCharCode(parseInt(code, 10))
+  );
+  result = result.replace(
+    /&#x([0-9a-fA-F]+);/g,
+    (_, code) => String.fromCharCode(parseInt(code, 16))
+  );
+  return result;
+}
+function htmlToPlainText(html) {
+  if (!html) return "";
+  let text = html;
+  text = text.replace(/<[^>]+data-skip-in-text="true"[^>]*>[\s\S]*?<\/[^>]+>/gi, "");
+  text = text.replace(/<head[\s\S]*?<\/head>/gi, "");
+  text = text.replace(/<style[\s\S]*?<\/style>/gi, "");
+  text = text.replace(/<script[\s\S]*?<\/script>/gi, "");
+  text = text.replace(/<h[12][^>]*>([\s\S]*?)<\/h[12]>/gi, (_, content) => {
+    const clean = content.replace(/<[^>]+>/g, "").trim();
+    return "\n" + clean.toUpperCase() + "\n";
+  });
+  text = text.replace(/<h[3-6][^>]*>([\s\S]*?)<\/h[3-6]>/gi, (_, content) => {
+    const clean = content.replace(/<[^>]+>/g, "").trim();
+    return "\n" + clean + "\n";
+  });
+  text = text.replace(/<a[^>]+href=["']([^"']+)["'][^>]*>([\s\S]*?)<\/a>/gi, (_, href, content) => {
+    const clean = content.replace(/<[^>]+>/g, "").trim();
+    if (clean === href || clean === decodeEntities(href)) {
+      return clean;
+    }
+    return `${clean} (${href})`;
+  });
+  text = text.replace(/<img[^>]+alt=["']([^"']+)["'][^>]*\/?>/gi, (_, alt) => {
+    return `[${alt}]`;
+  });
+  text = text.replace(/<img[^>]*\/?>/gi, "");
+  text = text.replace(/<hr[^>]*\/?>/gi, "\n---\n");
+  text = text.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_, content) => {
+    const clean = content.replace(/<[^>]+>/g, "").trim();
+    return "- " + clean + "\n";
+  });
+  text = text.replace(/<br\s*\/?>/gi, "\n");
+  text = text.replace(/<\/(?:p|div|tr|blockquote|section|article|header|footer|main|nav|aside)>/gi, "\n");
+  text = text.replace(/<\/(?:ul|ol|table|thead|tbody|tfoot)>/gi, "\n");
+  text = text.replace(/<\/(?:td|th)>/gi, "	");
+  text = text.replace(/<[^>]+>/g, "");
+  text = decodeEntities(text);
+  text = text.replace(/\t/g, "  ");
+  text = text.replace(/[^\S\n]+/g, " ");
+  text = text.split("\n").map((line) => line.trim()).join("\n");
+  text = text.replace(/\n{3,}/g, "\n\n");
+  text = text.trim();
+  return text;
+}
+var UNLAYER_RENDER_KEY = "__unlayerRender";
+var UNLAYER_CONFIG_KEY = "__unlayerItemConfig";
+var ErrorFallback = ({
+  type,
+  className,
+  style
+}) => /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      padding: "20px",
+      backgroundColor: "#fee",
+      border: "1px solid #fcc",
+      borderRadius: "4px",
+      color: "#c33",
+      textAlign: "center",
+      fontFamily: "system-ui, sans-serif"
+    },
+    children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        type,
+        " failed to render."
+      ] }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("small", { children: "Check console for details." })
+    ]
+  }
+) });
+function ensureMeta(values, type, index = 0) {
+  return {
+    ...values,
+    _meta: {
+      htmlID: `u_content_${type.toLowerCase()}_${index + 1}`,
+      htmlClassNames: `u_content_${type.toLowerCase()}`,
+      ...values._meta || {}
+    }
+  };
+}
+function renderComponent(config) {
+  const { type, values, className, style, args = [], innerHTML, _config, exporter } = config;
+  try {
+    const cfg = _config ?? DEFAULT_CONFIG;
+    const exporterConfig = {
+      generateHtmlFromTextJson,
+      toSafeHtml: cfg.toSafeHtml,
+      textDirection: cfg.textDirection,
+      cdnBaseUrl: cfg.cdnBaseUrl
+    };
+    let html;
+    if (innerHTML !== void 0) {
+      html = exporter(innerHTML, values, ...args);
+    } else {
+      const meta = {
+        exporterConfig,
+        mergeTagState: cfg.mergeTagState
+      };
+      html = exporter(values, ...args, void 0, meta);
+    }
+    html = typeof html === "string" ? html : String(html);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  } catch (error) {
+    console.error(`${type} rendering failed:`, error);
+    return /* @__PURE__ */ jsx(
+      ErrorFallback,
+      {
+        type,
+        error,
+        className,
+        style
+      }
+    );
+  }
+}
+function createItemComponent(config) {
+  function renderFn(props) {
+    const {
+      // Base props
+      mode: modeProp,
+      className,
+      style,
+      // Internal props
+      index = 0,
+      colIndex = 0,
+      cells = [],
+      bodyValues = {},
+      rowValues = {},
+      _config,
+      // Children
+      children,
+      // Rest are semantic props
+      ...restProps
+    } = props;
+    const mode = modeProp ?? _config?.mode ?? "web";
+    const mappedValues = config.propMapper({
+      children,
+      ...restProps
+    });
+    const finalValues = mergeValues(config.defaultValues, mappedValues);
+    const valuesWithMeta = ensureMeta(
+      finalValues,
+      config.name.toLowerCase(),
+      index
+    );
+    const safeBodyValues = {
+      contentWidth: 600,
+      ...bodyValues
+    };
+    const exporter = config.exporters[mode] || config.exporters.web;
+    return renderComponent({
+      type: config.name,
+      values: valuesWithMeta,
+      className,
+      style,
+      args: [index, colIndex, cells, safeBodyValues, rowValues],
+      _config,
+      exporter
+    });
+  }
+  const ItemComponent = (props) => {
+    return renderFn(props);
+  };
+  ItemComponent.displayName = config.displayName || config.name;
+  ItemComponent[UNLAYER_RENDER_KEY] = renderFn;
+  ItemComponent[UNLAYER_CONFIG_KEY] = {
+    name: config.name,
+    defaultValues: config.defaultValues,
+    propMapper: config.propMapper
+  };
+  return ItemComponent;
+}
+
+// src/components/Button.tsx
+var DEFAULT_VALUES = {
+  ...ButtonDefaults,
+  text: "Button"
+  // React convenience — not in schema
+};
+var Button = createItemComponent({
+  name: "Button",
+  defaultValues: DEFAULT_VALUES,
+  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES, "Button"),
+  displayName: "Button",
+  exporters: ButtonExporters
+});
+var Button_default = Button;
+var DEFAULT_VALUES2 = {
+  ...DividerDefaults
+};
+var Divider = createItemComponent({
+  name: "Divider",
+  defaultValues: DEFAULT_VALUES2,
+  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES2, "Divider"),
+  displayName: "Divider",
+  exporters: DividerExporters
+});
+var Divider_default = Divider;
+var DEFAULT_VALUES3 = {
+  ...HeadingDefaults,
+  color: "#000000",
+  // Not in schema options but used by renderer
+  fontWeight: 400,
+  // Not in schema options but used by renderer
+  text: "Heading"
+  // React convenience — not in schema
+};
+var Heading = createItemComponent({
+  name: "Heading",
+  defaultValues: DEFAULT_VALUES3,
+  propMapper: (props) => {
+    const { level, ...rest } = props;
+    const result = mapSemanticProps(rest, DEFAULT_VALUES3, "Heading");
+    if (level && !result.headingType) {
+      result.headingType = level;
+    }
+    return result;
+  },
+  displayName: "Heading",
+  exporters: HeadingExporters
+});
+var Heading_default = Heading;
+var DEFAULT_VALUES4 = {
+  ...HtmlDefaults
+};
+var Html = createItemComponent({
+  name: "Html",
+  defaultValues: DEFAULT_VALUES4,
+  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES4, "Html"),
+  displayName: "Html",
+  exporters: HtmlExporters
+});
+var Html_default = Html;
+var DEFAULT_VALUES5 = {
+  ...ImageDefaults,
+  // Override src with autoWidth/maxWidth for responsive rendering
+  src: {
+    ...ImageDefaults.src,
+    autoWidth: true,
+    maxWidth: "100%"
+  }
+};
+var Image = createItemComponent({
+  name: "Image",
+  defaultValues: DEFAULT_VALUES5,
+  propMapper: (props) => {
+    const { alt, src, ...rest } = props;
+    const base = mapSemanticProps(
+      rest,
+      DEFAULT_VALUES5,
+      "Image"
+    );
+    if (alt !== void 0) {
+      base.altText = alt;
+    }
+    if (typeof src === "string") {
+      base.src = { url: src, autoWidth: true, maxWidth: "100%" };
+    } else if (src !== void 0) {
+      base.src = { ...DEFAULT_VALUES5.src, ...src };
+    }
+    return base;
+  },
+  displayName: "Image",
+  exporters: ImageExporters
+});
+var Image_default = Image;
+MenuDefaults.menu ?? { };
+var DEFAULT_VALUES6 = {
+  ...MenuDefaults
+};
+var Menu = createItemComponent({
+  name: "Menu",
+  defaultValues: DEFAULT_VALUES6,
+  propMapper: (props) => {
+    const { items, ...rest } = props;
+    if (Array.isArray(items)) {
+      const mapped = items.map((item, i) => ({
+        key: String(i + 1),
+        text: item.text,
+        link: {
+          name: "web",
+          values: { href: item.href, target: item.target ?? "_blank" }
+        }
+      }));
+      const base = mapSemanticProps(
+        rest,
+        DEFAULT_VALUES6,
+        "Menu"
+      );
+      base.menu = { items: mapped };
+      return base;
+    }
+    return mapSemanticProps(
+      props,
+      DEFAULT_VALUES6,
+      "Menu"
+    );
+  },
+  displayName: "Menu",
+  exporters: MenuExporters
+});
+var Menu_default = Menu;
+var DEFAULT_VALUES7 = {
+  ...ParagraphDefaults,
+  color: "#000000"
+  // Not in schema options but used by renderer
+};
+var Paragraph = createItemComponent({
+  name: "Paragraph",
+  defaultValues: DEFAULT_VALUES7,
+  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES7, "Paragraph"),
+  displayName: "Paragraph",
+  exporters: ParagraphExporters
+});
+var Paragraph_default = Paragraph;
+var DEFAULT_ICONS = SocialDefaults.icons ?? { iconType: "circle", icons: [] };
+var DEFAULT_VALUES8 = {
+  ...SocialDefaults
+};
+var Social = createItemComponent({
+  name: "Social",
+  defaultValues: DEFAULT_VALUES8,
+  propMapper: (props) => {
+    const { icons, iconType, ...rest } = props;
+    if (Array.isArray(icons)) {
+      const mapped = icons.map((icon) => ({
+        name: icon.name,
+        url: icon.url
+      }));
+      const base = mapSemanticProps(
+        rest,
+        DEFAULT_VALUES8,
+        "Social"
+      );
+      base.icons = {
+        iconType: iconType ?? base.icons?.iconType ?? "circle",
+        icons: mapped
+      };
+      return base;
+    }
+    if (iconType !== void 0) {
+      const base = mapSemanticProps(
+        rest,
+        DEFAULT_VALUES8,
+        "Social"
+      );
+      base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
+      return base;
+    }
+    return mapSemanticProps(
+      props,
+      DEFAULT_VALUES8,
+      "Social"
+    );
+  },
+  displayName: "Social",
+  exporters: SocialExporters
+});
+var Social_default = Social;
+var DEFAULT_TABLE = { headers: [], rows: [], footers: [] };
+var DEFAULT_VALUES9 = {
+  ...TableDefaults,
+  table: DEFAULT_TABLE
+  // Schema doesn't include table data structure
+};
+var Table = createItemComponent({
+  name: "Table",
+  defaultValues: DEFAULT_VALUES9,
+  propMapper: (props) => {
+    const { headers, data, ...rest } = props;
+    if (headers || data) {
+      const base = mapSemanticProps(
+        rest,
+        DEFAULT_VALUES9,
+        "Table"
+      );
+      const tableHeaders = headers ? [{ cells: headers.map((text) => ({ text, width: 0 })), height: 0 }] : [];
+      const tableRows = data ? data.map((row) => ({
+        cells: row.map((text) => ({ text, width: 0 })),
+        height: 0
+      })) : [];
+      base.table = { headers: tableHeaders, rows: tableRows, footers: [] };
+      if (headers) {
+        base.columns = headers.length;
+        base.enableHeader = true;
+      }
+      if (data) {
+        base.rows = data.length;
+      }
+      return base;
+    }
+    return mapSemanticProps(
+      props,
+      DEFAULT_VALUES9,
+      "Table"
+    );
+  },
+  displayName: "Table",
+  exporters: TableExporters
+});
+var Table_default = Table;
+var DEFAULT_VIDEO = {
+  type: "youtube",
+  videoId: "",
+  thumbnail: "",
+  loading: false,
+  ...VideoDefaults.video
+};
+var DEFAULT_VALUES10 = {
+  ...VideoDefaults,
+  video: DEFAULT_VIDEO
+};
+function parseVideoUrl(url) {
+  const ytMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
+  if (ytMatch) {
+    const videoId = ytMatch[1];
+    return {
+      type: "youtube",
+      videoId,
+      thumbnail: `https://img.youtube.com/vi/${videoId}/0.jpg`
+    };
+  }
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) {
+    return {
+      type: "vimeo",
+      videoId: vimeoMatch[1],
+      thumbnail: ""
+    };
+  }
+  return null;
+}
+var Video = createItemComponent({
+  name: "Video",
+  defaultValues: DEFAULT_VALUES10,
+  propMapper: (props) => {
+    const { videoUrl, ...rest } = props;
+    if (typeof videoUrl === "string") {
+      const parsed = parseVideoUrl(videoUrl);
+      const base = mapSemanticProps(
+        rest,
+        DEFAULT_VALUES10,
+        "Video"
+      );
+      if (parsed) {
+        base.video = { ...DEFAULT_VIDEO, ...parsed };
+      }
+      return base;
+    }
+    return mapSemanticProps(
+      props,
+      DEFAULT_VALUES10,
+      "Video"
+    );
+  },
+  displayName: "Video",
+  exporters: VideoExporters
+});
+var Video_default = Video;
+var allBodyDefaults = BodyDefaults;
+var {
+  popupPosition: _p1,
+  popupDisplayDelay: _p2,
+  popupWidth: _p3,
+  popupHeight: _p4,
+  popupBackgroundColor: _p5,
+  popupBackgroundImage: _p6,
+  popupOverlay_backgroundColor: _p7,
+  popupCloseButton_position: _p8,
+  popupCloseButton_backgroundColor: _p9,
+  popupCloseButton_iconColor: _p10,
+  popupCloseButton_borderRadius: _p11,
+  popupCloseButton_margin: _p12,
+  popupCloseButton_action: _p13,
+  ...bodyRest
+} = allBodyDefaults;
+var BODY_DEFAULTS = bodyRest;
+var ROW_DEFAULTS = { ...RowDefaults };
+var COLUMN_DEFAULTS = { ...ColumnDefaults };
+var DEFAULT_VALUES11 = ROW_DEFAULTS;
+var DEFAULT_BODY_VALUES = BODY_DEFAULTS;
+function getWidthPercentages(cells) {
+  if (cells.length === 0) return [];
+  const total = cells.reduce((a, b) => a + b, 0);
+  if (total <= 0) return [];
+  return cells.map((span) => {
+    const value = Math.round(span / total * 100 * 100) / 100;
+    const className = `${value}`.replace(/\./g, "p");
+    return { value, className };
+  });
+}
+function generateGridCSS(cells, mode, contentWidth = 600, mobileBreakpoint = 620) {
+  const widths = getWidthPercentages(cells);
+  if (mode === "email") {
+    const minQuery = `@media only screen and (min-width: ${contentWidth + 20}px)`;
+    const maxQuery = `@media only screen and (max-width: ${contentWidth + 20}px)`;
+    return `
+${minQuery} {
+  .u-row { width: ${contentWidth}px !important; }
+  .u-row .u-col { vertical-align: top; }
+${widths.map(({ value, className }) => `  .u-row .u-col-${className} { width: ${Math.round(contentWidth * value / 100)}px !important; }`).join("\n")}
+}
+
+${maxQuery} {
+  .u-row-container { max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; }
+  .u-row { width: 100% !important; }
+  .u-row .u-col { display: block !important; width: 100% !important; min-width: 320px !important; max-width: 100% !important; }
+  .u-row .u-col > div { margin: 0 auto; }
+  .no-stack .u-col { min-width: 0 !important; display: table-cell !important; }
+${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width: ${value}% !important; }`).join("\n")}
+}`;
+  }
+  const baseCSS = `
+.u-row {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-left: 0;
+  margin-right: 0;
+}
+.u-row .u-col {
+  position: relative;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+}`;
+  const columnCSS = widths.map(
+    ({ value, className }) => `.u-row .u-col.u-col-${className} { flex: 0 0 ${value}%; max-width: ${value}%; }`
+  ).join("\n");
+  const responsiveCSS = `
+@media only screen and (max-width: ${mobileBreakpoint}px) {
+  .u-row { width: 100% !important; }
+  .u-row .u-col {
+    display: block !important;
+    width: 100% !important;
+    min-width: 320px !important;
+    max-width: 100% !important;
+  }
+  .u-row .u-col > div { margin: 0 auto; }
+  .no-stack .u-col {
+    min-width: 0 !important;
+    display: table-cell !important;
+  }
+${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width: ${value}% !important; }`).join("\n")}
+}`;
+  return baseCSS + "\n" + columnCSS + "\n" + responsiveCSS;
+}
+function renderRowToHtml(innerHTML, values, bodyValues, mode, cells, collection = "rows") {
+  const rowExporter = RowExporters[mode] || RowExporters.web;
+  const html = rowExporter(innerHTML, values, bodyValues, {
+    collection,
+    variant: mode
+  });
+  const css = generateGridCSS(cells, mode);
+  return css ? `<style>${css}</style>${html}` : html;
+}
+function processChildren(children, cells, bodyValues, rowValues, mode, _config) {
+  if (!children) return "";
+  let innerHTML = "";
+  const childrenArray = React.Children.toArray(children);
+  childrenArray.forEach((child, index) => {
+    if (!React.isValidElement(child)) {
+      if (typeof child === "string" || typeof child === "number") {
+        innerHTML += String(child);
+      }
+      return;
+    }
+    const componentType = child.type;
+    const isColumn = componentType?.displayName === "Column" || componentType?.name === "Column";
+    if (isColumn && typeof child.type === "function") {
+      const rendered = child.type({
+        ...child.props,
+        index,
+        cells,
+        bodyValues,
+        rowValues,
+        mode,
+        _config
+      });
+      if (rendered?.props?.dangerouslySetInnerHTML?.__html) {
+        innerHTML += rendered.props.dangerouslySetInnerHTML.__html;
+      }
+    } else if (React.isValidElement(child)) {
+      const name = child.type?.displayName || child.type?.name || "Unknown";
+      console.warn(
+        `Row: <${name}> is not a valid Row child. Only <Column> components can be direct children of <Row>. Wrap it in a <Column>: <Row><Column><${name} /></Column></Row>`
+      );
+    }
+  });
+  return innerHTML;
+}
+var Row = (props) => {
+  const {
+    layout,
+    cells: propsCells,
+    children,
+    mode: modeProp,
+    className,
+    style,
+    index = 0,
+    bodyValues = {},
+    collection = "rows",
+    _config,
+    ...semanticProps
+  } = props;
+  const mode = modeProp ?? _config?.mode ?? "web";
+  let cells = propsCells || [1];
+  if (layout) {
+    validateColumnLayout(layout, React.Children.count(children));
+    cells = layout.cells;
+  }
+  const safeBodyValues = { ...DEFAULT_BODY_VALUES, ...bodyValues };
+  const values = mapSemanticProps(
+    semanticProps,
+    DEFAULT_VALUES11,
+    "Row"
+  );
+  const valuesWithMeta = {
+    ...values,
+    cells,
+    _meta: {
+      htmlID: `u_row_${index + 1}`,
+      htmlClassNames: "u_row",
+      ...values._meta || {}
+    }
+  };
+  const innerHTML = processChildren(
+    children,
+    cells,
+    safeBodyValues,
+    valuesWithMeta,
+    mode,
+    _config
+  );
+  try {
+    const html = renderRowToHtml(innerHTML, valuesWithMeta, safeBodyValues, mode, cells, collection);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: html },
+        className,
+        style
+      }
+    );
+  } catch (error) {
+    console.error("Row rendering failed:", error);
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+};
+Row.displayName = "Row";
+var Row_default = Row;
+var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
+function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
+  const columnExporter = ColumnExporters[mode] || ColumnExporters.web;
+  return columnExporter(innerHTML, values, index, cells, bodyValues, rowValues);
+}
+var Column = (props) => {
+  const {
+    children,
+    index = 0,
+    cells = [1],
+    bodyValues = {},
+    rowValues = {},
+    mode: modeProp,
+    className,
+    style,
+    _config,
+    ...semanticProps
+  } = props;
+  const mode = modeProp ?? _config?.mode ?? "web";
+  const values = mapSemanticProps(
+    semanticProps,
+    DEFAULT_VALUES12,
+    "Column"
+  );
+  const valuesWithMeta = {
+    ...values,
+    _meta: {
+      htmlID: `u_column_${index + 1}`,
+      htmlClassNames: "u_column",
+      ...values._meta || {}
+    }
+  };
+  let innerHTML = "";
+  if (children) {
+    try {
+      const childrenArray = React.Children.toArray(children);
+      childrenArray.forEach((child, childIndex) => {
+        if (typeof child === "string" || typeof child === "number") {
+          innerHTML += String(child);
+        } else if (React.isValidElement(child)) {
+          if (typeof child.type === "function") {
+            const ComponentType = child.type;
+            const renderFn = ComponentType[UNLAYER_RENDER_KEY] || ComponentType;
+            const rendered = renderFn({ ...child.props, _config });
+            if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
+              const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
+              const componentType = child.type;
+              const componentName = componentType?.displayName || componentType?.name || "component";
+              const componentProps = child.props;
+              const containerPadding = componentProps.values?.containerPadding || DEFAULT_VALUES12.padding || "10px";
+              innerHTML += `<div id="u_content_${componentName.toLowerCase()}_${childIndex + 1}" class="u_content_${componentName.toLowerCase()}" style="padding: ${containerPadding};">${componentHTML}</div>`;
+            } else if (rendered) {
+              const name = child.type?.displayName || child.type?.name || "Unknown";
+              console.warn(
+                `Column: <${name}> did not produce renderable HTML. Ensure it is an Unlayer component (Button, Text, Image, etc.).`
+              );
+            }
+          }
+        }
+      });
+    } catch (error) {
+      console.error("Column: Failed to render children:", error);
+      innerHTML = "";
+    }
+  }
+  try {
+    const html = renderColumnToHtml(innerHTML, valuesWithMeta, index, cells, bodyValues, rowValues, mode);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: html },
+        className,
+        style
+      }
+    );
+  } catch (error) {
+    console.error("Column rendering failed:", error);
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+};
+Column.displayName = "Column";
+var Column_default = Column;
+var DEFAULT_VALUES13 = BODY_DEFAULTS;
+var MAX_PREVIEW_LENGTH = 150;
+var PADDING_CHARS = [
+  "\xA0",
+  "\u200C",
+  "\u200B",
+  "\u200D",
+  "\u200E",
+  "\u200F",
+  "\uFEFF"
+];
+function generatePreviewHtml(text) {
+  if (!text || text.trim().length === 0) return "";
+  const truncated = text.length > MAX_PREVIEW_LENGTH ? text.slice(0, MAX_PREVIEW_LENGTH) : text;
+  const paddingLength = Math.max(0, MAX_PREVIEW_LENGTH - truncated.length);
+  let padding = "";
+  for (let i = 0; i < paddingLength; i++) {
+    padding += PADDING_CHARS[i % PADDING_CHARS.length];
+  }
+  return `<div data-skip-in-text="true" style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">` + truncated + padding + `</div>`;
+}
+function renderBodyToHtml(innerHTML, values, mode, previewText) {
+  let finalInnerHtml = innerHTML;
+  if (mode === "email" && previewText) {
+    const previewHtml = generatePreviewHtml(previewText);
+    if (previewHtml) {
+      finalInnerHtml = previewHtml + innerHTML;
+    }
+  }
+  const bodyExporter = BodyExporters[mode] || BodyExporters.web;
+  const raw = mode === "document" ? bodyExporter(finalInnerHtml, values, { type: "" }) : bodyExporter(finalInnerHtml, values, values);
+  return raw.replace("min-height: 100vh; ", "").replace("min-height: 100vh;", "");
+}
+var Body = (props) => {
+  const { children, mode: modeProp, className, style, index = 0, config: configProp, previewText, ...semanticProps } = props;
+  const resolvedConfig = { ...DEFAULT_CONFIG, ...configProp };
+  const mode = modeProp ?? resolvedConfig.mode ?? "web";
+  const _config = { ...resolvedConfig, mode };
+  const values = mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body");
+  const valuesWithMeta = {
+    ...values,
+    _meta: {
+      htmlID: `u_body_${index + 1}`,
+      htmlClassNames: "u_body",
+      ...values._meta || {}
+    }
+  };
+  let enrichedChildren = children;
+  if (children) {
+    enrichedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, { _config });
+      }
+      return child;
+    });
+  }
+  let innerHTML = "";
+  if (enrichedChildren) {
+    try {
+      innerHTML = ReactDOMServer.renderToString(enrichedChildren);
+    } catch (error) {
+      console.error("Body: Failed to render children:", error);
+      innerHTML = "";
+    }
+  }
+  try {
+    const html = renderBodyToHtml(innerHTML, valuesWithMeta, mode, previewText);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: html },
+        className,
+        style
+      }
+    );
+  } catch (error) {
+    console.error("Body rendering failed:", error);
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+};
+Body.displayName = "Body";
+var Body_default = Body;
+function Email(props) {
+  return /* @__PURE__ */ jsx(Body_default, { ...props, mode: "email" });
+}
+Email.displayName = "Email";
+function Page(props) {
+  return /* @__PURE__ */ jsx(Body_default, { ...props, mode: "web" });
+}
+Page.displayName = "Page";
+function Document(props) {
+  return /* @__PURE__ */ jsx(Body_default, { ...props, mode: "document" });
+}
+Document.displayName = "Document";
+var PROVIDER_ACTIVE_KEY = "__unlayerProviderActive";
+var _UnlayerContext = null;
+function getUnlayerContext() {
+  if (!_UnlayerContext) {
+    _UnlayerContext = createContext(DEFAULT_CONFIG);
+  }
+  return _UnlayerContext;
+}
+var UnlayerProvider = ({
+  config,
+  children
+}) => {
+  const merged = useMemo(
+    () => ({ ...DEFAULT_CONFIG, ...config, [PROVIDER_ACTIVE_KEY]: true }),
+    [config]
+  );
+  const Context = getUnlayerContext();
+  return /* @__PURE__ */ jsx(Context.Provider, { value: merged, children });
+};
+UnlayerProvider.displayName = "UnlayerProvider";
+function useUnlayerConfig() {
+  return useContext(getUnlayerContext());
+}
+function ensureMeta2(values, type, index = 0) {
+  return {
+    ...values,
+    _meta: {
+      htmlID: `u_content_${type.toLowerCase()}_${index + 1}`,
+      htmlClassNames: `u_content_${type.toLowerCase()}`,
+      ...values._meta || {}
+    }
+  };
+}
+function getDisplayName(element) {
+  const type = element.type;
+  return type?.displayName || type?.name;
+}
+function collectChildren(node) {
+  const result = [];
+  React.Children.forEach(node, (child) => {
+    if (React.isValidElement(child)) {
+      result.push(child);
+    }
+  });
+  return result;
+}
+function extractSemanticProps(props, extraKeys = []) {
+  const internalKeys = /* @__PURE__ */ new Set([
+    "children",
+    "mode",
+    "className",
+    "style",
+    "index",
+    "colIndex",
+    "cells",
+    "bodyValues",
+    "rowValues",
+    "_config",
+    "config",
+    "previewText",
+    "layout",
+    "collection",
+    ...extraKeys
+  ]);
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!internalKeys.has(key) && value !== void 0) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function nextCounter(counters, key) {
+  counters[key] = (counters[key] || 0) + 1;
+  return counters[key];
+}
+function callHead(head, values, bodyValues, displayMode, headConfig, styles, scripts, tags) {
+  if (!head) return;
+  const headArgs = [
+    values,
+    bodyValues,
+    {
+      displayMode,
+      isViewer: false,
+      variant: null,
+      type: "rows",
+      headConfig
+    }
+  ];
+  const css = head.css?.(...headArgs);
+  if (css) styles.push(css);
+  const js = head.js?.(...headArgs);
+  if (js) scripts.push(js);
+  const headTags = head.tags?.(...headArgs);
+  if (headTags) tags.push(...headTags);
+}
+function walkItem(element, bodyValues, displayMode, headConfig, counters, styles, scripts, tags) {
+  const componentType = element.type;
+  const config = componentType[UNLAYER_CONFIG_KEY];
+  if (!config) return;
+  const { name, defaultValues, propMapper } = config;
+  const { children, ...restProps } = element.props;
+  const mappedValues = propMapper({ children, ...restProps });
+  const finalValues = mergeValues(defaultValues, mappedValues);
+  const contentType = name.toLowerCase();
+  const count = nextCounter(counters, `u_content_${contentType}`);
+  const valuesWithMeta = ensureMeta2(finalValues, contentType, count - 1);
+  const head = heads[name];
+  callHead(head, valuesWithMeta, bodyValues, displayMode, headConfig, styles, scripts, tags);
+}
+function walkColumn(element, bodyValues, rowValues, displayMode, headConfig, counters, styles, scripts, tags) {
+  const semanticProps = extractSemanticProps(element.props);
+  const mapped = mapSemanticProps(semanticProps, COLUMN_DEFAULTS, "Column");
+  const count = nextCounter(counters, "u_column");
+  const columnValues = ensureMeta2(mergeValues(COLUMN_DEFAULTS, mapped), "column", count - 1);
+  const columnHead = heads["Column"];
+  callHead(columnHead, columnValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
+  const children = collectChildren(element.props.children);
+  for (const child of children) {
+    walkItem(child, bodyValues, displayMode, headConfig, counters, styles, scripts, tags);
+  }
+}
+function walkRow(element, bodyValues, displayMode, headConfig, counters, styles, scripts, tags) {
+  const semanticProps = extractSemanticProps(element.props, ["layout"]);
+  const mapped = mapSemanticProps(semanticProps, ROW_DEFAULTS, "Row");
+  const count = nextCounter(counters, "u_row");
+  const rowValues = ensureMeta2(mergeValues(ROW_DEFAULTS, mapped), "row", count - 1);
+  const rowHead = heads["Row"];
+  callHead(rowHead, rowValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
+  const children = collectChildren(element.props.children);
+  for (const child of children) {
+    const name = getDisplayName(child);
+    if (name === "Column") {
+      walkColumn(child, bodyValues, rowValues, displayMode, headConfig, counters, styles, scripts, tags);
+    }
+  }
+}
+function extractHeadFromTree(element, options) {
+  const { displayMode } = options;
+  const headConfig = {
+    hasFeature: options.headConfig?.hasFeature ?? (() => false),
+    getInitialValues: options.headConfig?.getInitialValues ?? (() => ({}))
+  };
+  const styles = [];
+  const scripts = [];
+  const tags = [];
+  const counters = {};
+  const semanticProps = extractSemanticProps(element.props);
+  const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
+  const bodyValues = ensureMeta2(mergeValues(BODY_DEFAULTS, mapped), "body", 0);
+  const bodyHead = heads["Body"];
+  callHead(bodyHead, bodyValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
+  const children = collectChildren(element.props.children);
+  for (const child of children) {
+    const name = getDisplayName(child);
+    if (name === "Row") {
+      walkRow(child, bodyValues, displayMode, headConfig, counters, styles, scripts, tags);
+    }
+  }
+  const uniqueTags = [...new Set(tags.filter(Boolean))];
+  return {
+    css: styles.filter(Boolean).join("\n"),
+    js: scripts.filter(Boolean).join("\n"),
+    tags: uniqueTags
+  };
+}
+
+// src/utils/render-to-html.tsx
+function renderToHtml(element, config) {
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  try {
+    const enriched = React.cloneElement(element, { config: mergedConfig });
+    return renderToStaticMarkup(enriched);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(
+      `[Unlayer] renderToHtml failed: ${message}
+Tip: Ensure your tree uses Body > Row > Column > Item structure.`
+    );
+  }
+}
+function renderToPlainText(element, config) {
+  const html = renderToHtml(element, config);
+  return htmlToPlainText(html);
+}
+function renderToHtmlParts(element, config) {
+  const body = renderToHtml(element, config);
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  const displayMode = element.props.mode ?? mergedConfig.mode ?? "web";
+  const { css, js, tags } = extractHeadFromTree(element, {
+    displayMode,
+    headConfig: mergedConfig.headConfig
+  });
+  const headParts = [];
+  if (css) {
+    headParts.push(`<style>${css}</style>`);
+  }
+  if (js) {
+    headParts.push(`<script>${js}</script>`);
+  }
+  if (tags.length > 0) {
+    headParts.push(...tags);
+  }
+  return {
+    head: headParts.join("\n"),
+    body
+  };
+}
+var schemaVersion = schemaVersion$1 ?? 24;
+function getDisplayName2(element) {
+  const type = element.type;
+  return type?.displayName || type?.name;
+}
+function collectChildren2(node) {
+  const result = [];
+  React.Children.forEach(node, (child) => {
+    if (React.isValidElement(child)) {
+      result.push(child);
+    }
+  });
+  return result;
+}
+function extractSemanticProps2(props, extraKeys = []) {
+  const internalKeys = /* @__PURE__ */ new Set([
+    "children",
+    "mode",
+    "className",
+    "style",
+    "index",
+    "colIndex",
+    "cells",
+    "bodyValues",
+    "rowValues",
+    "_config",
+    "config",
+    "previewText",
+    "layout",
+    "collection",
+    ...extraKeys
+  ]);
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!internalKeys.has(key) && value !== void 0) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function nextCounter2(counters, key) {
+  counters[key] = (counters[key] || 0) + 1;
+  return counters[key];
+}
+function toContentType(displayName) {
+  if (displayName === "Paragraph") return "text";
+  return displayName.toLowerCase();
+}
+function makeId(prefix, counter) {
+  return `${prefix}_${counter}`;
+}
+function extractTextFromTextJson(textJson) {
+  try {
+    const parsed = JSON.parse(textJson);
+    if (parsed.__html) return parsed.__html;
+    const root = parsed?.root;
+    if (!root?.children) return "";
+    const paragraphs = [];
+    for (const paragraph of root.children) {
+      if (!paragraph?.children) continue;
+      const parts = [];
+      for (const node of paragraph.children) {
+        if (node?.text) parts.push(node.text);
+      }
+      paragraphs.push(parts.join(""));
+    }
+    return paragraphs.join("\n");
+  } catch {
+    return "";
+  }
+}
+function processItem(element, counters) {
+  const componentType = element.type;
+  const config = componentType[UNLAYER_CONFIG_KEY];
+  if (!config) {
+    const name2 = getDisplayName2(element) || "Unknown";
+    throw new Error(
+      `[Unlayer] renderToJson: <${name2}> is not a recognized Unlayer item component. Only components created with createItemComponent are supported.`
+    );
+  }
+  const { name, defaultValues, propMapper } = config;
+  const contentType = toContentType(name);
+  const count = nextCounter2(counters, `u_content_${contentType}`);
+  const id = makeId(`u_content_${contentType}`, count);
+  const { children, ...restProps } = element.props;
+  const mappedValues = propMapper({ children, ...restProps });
+  const finalValues = mergeValues(defaultValues, mappedValues);
+  if (contentType === "text" && finalValues.textJson) {
+    finalValues.text = extractTextFromTextJson(finalValues.textJson);
+    delete finalValues.textJson;
+  }
+  const values = {
+    containerPadding: "10px",
+    ...finalValues,
+    _meta: {
+      htmlID: id,
+      htmlClassNames: `u_content_${contentType}`,
+      ...finalValues._meta || {}
+    },
+    selectable: true,
+    draggable: true,
+    duplicatable: true,
+    deletable: true,
+    hideable: true
+  };
+  return { type: contentType, values };
+}
+function processColumn(element, counters) {
+  const count = nextCounter2(counters, "u_column");
+  const id = makeId("u_column", count);
+  const semanticProps = extractSemanticProps2(element.props);
+  const mapped = mapSemanticProps(semanticProps, COLUMN_DEFAULTS, "Column");
+  const values = mergeValues(COLUMN_DEFAULTS, mapped);
+  const valuesWithMeta = {
+    ...values,
+    _meta: {
+      htmlID: id,
+      htmlClassNames: "u_column",
+      ...values._meta || {}
+    }
+  };
+  const contents = [];
+  const children = collectChildren2(element.props.children);
+  for (const child of children) {
+    contents.push(processItem(child, counters));
+  }
+  return { contents, values: valuesWithMeta };
+}
+function processRow(element, counters) {
+  const count = nextCounter2(counters, "u_row");
+  const id = makeId("u_row", count);
+  const { layout, cells: propsCells } = element.props;
+  let cells;
+  if (layout) {
+    cells = layout.cells;
+  } else if (propsCells) {
+    cells = propsCells;
+  } else {
+    const columnCount = Math.max(
+      1,
+      collectChildren2(element.props.children).length
+    );
+    cells = Array(columnCount).fill(1);
+  }
+  const semanticProps = extractSemanticProps2(element.props, ["layout"]);
+  const mapped = mapSemanticProps(semanticProps, ROW_DEFAULTS, "Row");
+  const values = mergeValues(ROW_DEFAULTS, mapped);
+  const valuesWithMeta = {
+    ...values,
+    columns: values.columns ?? false,
+    cells,
+    _meta: {
+      htmlID: id,
+      htmlClassNames: "u_row",
+      ...values._meta || {}
+    },
+    selectable: true,
+    draggable: true,
+    duplicatable: true,
+    deletable: true,
+    hideable: true
+  };
+  const columns = [];
+  const children = collectChildren2(element.props.children);
+  for (const child of children) {
+    const name = getDisplayName2(child);
+    if (name === "Column") {
+      columns.push(processColumn(child, counters));
+    } else {
+      console.warn(
+        `[Unlayer] renderToJson: <${name}> is not a valid Row child. Only <Column> is allowed.`
+      );
+    }
+  }
+  return { cells, columns, values: valuesWithMeta };
+}
+function processBody(element, counters) {
+  const id = "u_body";
+  const semanticProps = extractSemanticProps2(element.props);
+  const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
+  const values = mergeValues(BODY_DEFAULTS, mapped);
+  const valuesWithMeta = {
+    ...values,
+    _meta: {
+      htmlID: id,
+      htmlClassNames: "u_body",
+      ...values._meta || {}
+    }
+  };
+  const rows = [];
+  const children = collectChildren2(element.props.children);
+  for (const child of children) {
+    const name = getDisplayName2(child);
+    if (name === "Row") {
+      rows.push(processRow(child, counters));
+    } else {
+      console.warn(
+        `[Unlayer] renderToJson: <${name}> is not a valid Body child. Only <Row> is allowed.`
+      );
+    }
+  }
+  return {
+    rows,
+    values: valuesWithMeta
+  };
+}
+function renderRowToJson(element) {
+  const displayName = getDisplayName2(element);
+  if (displayName !== "Row") {
+    throw new Error(
+      `[Unlayer] renderRowToJson: Element must be <Row>, but got <${displayName || "unknown"}>. For full designs, use renderToJson instead.`
+    );
+  }
+  const counters = {};
+  return processRow(element, counters);
+}
+function renderToJson(element) {
+  const displayName = getDisplayName2(element);
+  const validRoots = /* @__PURE__ */ new Set(["Body", "Email", "Page", "Document"]);
+  if (!displayName || !validRoots.has(displayName)) {
+    throw new Error(
+      `[Unlayer] renderToJson: Root element must be <Body>, <Email>, <Page>, or <Document>, but got <${displayName || "unknown"}>. Wrap your content: <Body><Row><Column>...</Column></Row></Body>`
+    );
+  }
+  const counters = {};
+  const body = processBody(element, counters);
+  return {
+    counters,
+    body,
+    schemaVersion
+  };
+}
+
+export { Body_default as Body, Button_default as Button, Column_default as Column, ColumnLayouts, DEFAULT_CONFIG, Divider_default as Divider, Document, Email, Heading_default as Heading, Html_default as Html, Image_default as Image, Menu_default as Menu, Page, Paragraph_default as Paragraph, Row_default as Row, Social_default as Social, Table_default as Table, UnlayerProvider, Video_default as Video, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map