@standhigher/react-email-editor 0.1.0 → 0.2.0

package/dist/index.js

@@ -18,15 +18,27 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // src/EmailEditor.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 
 // src/shell/EmailEditorShell.tsx
-import { forwardRef, useEffect as useEffect9, useState as useState11 } from "react";
+import { forwardRef as forwardRef2, useState as useState15 } from "react";
 
 // src/editor-dnd/EditorDnd.tsx
-import { useMemo, useRef, useState } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   DndContext,
   DragOverlay,
@@ -61,6 +73,51 @@ function BlockIcon({ icon, className }) {
   return /* @__PURE__ */ jsx("span", { className, children: icon });
 }
 
+// src/blocks/inspector-sections.ts
+var SPACING = {
+  title: "Spacing",
+  styleIds: ["dimension.padding", "dimension.margin"]
+};
+var BLOCK_BORDERS = ["decorations.borderWidth", "decorations.borderStyle", "decorations.borderColor", "decorations.borderRadius"];
+var BLOCK_APPEARANCE = {
+  title: "Block appearance",
+  styleIds: ["decorations.backgroundColor", ...BLOCK_BORDERS]
+};
+var ADVANCED_BLOCK_APPEARANCE = {
+  title: "Block appearance",
+  styleIds: ["decorations.backgroundColor"],
+  advancedStyleIds: BLOCK_BORDERS
+};
+var ELEMENT_BORDERS = ["element.borderWidth", "element.borderStyle", "element.borderColor", "element.borderRadius"];
+var HEADING_SECTIONS = [SPACING, BLOCK_APPEARANCE];
+var TEXT_SECTIONS = [SPACING, BLOCK_APPEARANCE];
+var HTML_SECTIONS = [
+  { title: "HTML", fieldNames: ["html"] },
+  SPACING,
+  BLOCK_APPEARANCE
+];
+var BUTTON_SECTIONS = [
+  { title: "Link", fieldNames: ["href"] },
+  { title: "Button", styleIds: ["element.align", "element.width", "element.padding", "element.backgroundColor", ...ELEMENT_BORDERS] },
+  SPACING,
+  ADVANCED_BLOCK_APPEARANCE
+];
+var IMAGE_SECTIONS = [
+  { title: "Image", fieldNames: ["src", "alt", "link"] },
+  { title: "Size & position", styleIds: ["element.width", "element.height", "element.align"] },
+  { title: "Image appearance", styleIds: ELEMENT_BORDERS },
+  SPACING,
+  ADVANCED_BLOCK_APPEARANCE
+];
+var DIVIDER_SECTIONS = [
+  { title: "Line", styleIds: ["element.borderColor", "element.borderWidth", "element.borderStyle", "element.width", "element.align"] },
+  SPACING,
+  { title: "Block appearance", styleIds: ["decorations.backgroundColor"] }
+];
+var SPACER_SECTIONS = [
+  { title: "Spacer", fieldNames: ["height"], styleIds: ["decorations.backgroundColor"] }
+];
+
 // src/constants/block-types.ts
 var BLOCK_TYPES = {
   heading: "heading",
@@ -76,6 +133,16 @@ var BLOCK_TYPES = {
 function esc(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+var TEXT_ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\xA0" };
+function decodeHtmlText(value) {
+  return value.replace(/&(#x[\da-f]+|#\d+|amp|lt|gt|quot|apos|nbsp);/gi, (entity, name) => {
+    var _a;
+    if (!name.startsWith("#")) return (_a = TEXT_ENTITIES[name.toLowerCase()]) != null ? _a : entity;
+    const hex = name[1].toLowerCase() === "x";
+    const code = Number.parseInt(name.slice(hex ? 2 : 1), hex ? 16 : 10);
+    return code > 0 && code <= 1114111 && !(code >= 55296 && code <= 57343) ? String.fromCodePoint(code) : entity;
+  });
+}
 
 // src/constants/style-values.ts
 var TEXT_ALIGNS = {
@@ -106,6 +173,7 @@ var LINK_DECORATIONS = {
 function isStyleValue(values, value) {
   return typeof value === "string" && Object.values(values).includes(value);
 }
+var HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 
 // src/utils/css-values.ts
 function cssLength(value, fallback = "0px", allowAuto = false) {
@@ -182,7 +250,7 @@ function cssBorderStyle(value) {
 }
 
 // src/document/constants.ts
-var DOCUMENT_VERSION = 1;
+var DOCUMENT_VERSION = 2;
 function fontOption(label, value) {
   return Object.freeze({ label, value });
 }
@@ -221,7 +289,7 @@ var DEFAULT_EMAIL_GLOBAL = {
   listIndent: "22px",
   borderWidth: "0px",
   borderStyle: BORDER_STYLES.solid,
-  borderColor: "#000000",
+  borderColor: "transparent",
   borderRadius: "0px",
   fontFamily: "Arial, Helvetica, sans-serif",
   fontWeight: FONT_WEIGHTS.normal,
@@ -277,6 +345,9 @@ function createEmptyDocument() {
   return { version: DOCUMENT_VERSION, subject: "", global: resolveEmailGlobal(), blocks: [] };
 }
 function ensureEmailDocument(document) {
+  if (document.version !== DOCUMENT_VERSION) {
+    throw new Error(`Unsupported email document version: ${document.version}. Expected ${DOCUMENT_VERSION}.`);
+  }
   return __spreadProps(__spreadValues({}, document), { global: resolveEmailGlobal(document.global) });
 }
 
@@ -329,7 +400,7 @@ function decorationStyle(decoration = {}) {
     backgroundColor: cssColor(decoration.backgroundColor),
     borderWidth: cssLength(decoration.borderWidth),
     borderStyle: cssBorderStyle(decoration.borderStyle),
-    borderColor: cssColor(decoration.borderColor, "#000000")
+    borderColor: cssColor(decoration.borderColor, "transparent")
   }, radiusStyle(decoration.borderRadius));
 }
 function styleToCss(style) {
@@ -403,15 +474,6 @@ function renderAligned(target, options) {
   return renderShrinkElement(align, width, options.content);
 }
 
-// src/blocks/icons.ts
-var ICON_TEXT = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M5 4h14v3H5V4Zm0 13h9v-3H5v3Z"/></svg>';
-var ICON_HEADING = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 4h3v7h10V4h3v16h-3v-6H7v6H4V4Z"/></svg>';
-var ICON_BUTTON = '<svg viewBox="0 0 24 24" width="18" height="18"><rect x="3" y="7" width="18" height="10" rx="2" fill="currentColor"/></svg>';
-var ICON_IMAGE = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1.5 11 4-4 3 3 2.5-2.5 4 4V6.5h-13V16Z"/></svg>';
-var ICON_DIVIDER = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 11h18v2H3v-2Z"/></svg>';
-var ICON_SPACER = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 8h16v2H4V8Zm0 6h16v2H4v-2Z"/></svg>';
-var ICON_HTML = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M5 3l-3 9 3 9h3l-3-9 3-9H5Zm6 0 3 9-3 9h3l3-9-3-9h-3Zm6 0-3 9 3 9h3l-3-9 3-9h-3Z"/></svg>';
-
 // src/blocks/style-fields.ts
 var BORDER_STYLE_LABELS = {
   none: "None",
@@ -431,7 +493,7 @@ var TEXT_ALIGN = { id: "typography.textAlign", group: "typography", label: "Text
 var BG_COLOR = { id: "decorations.backgroundColor", group: "decorations", label: "Background", control: "color", defaultValue: "transparent" };
 var BORDER_RADIUS = { id: "decorations.borderRadius", group: "decorations", label: "Block corner radius", control: "corners", max: 48, defaultValue: "0px" };
 var BORDER_WIDTH = { id: "decorations.borderWidth", group: "decorations", label: "Block border width", control: "range", unit: "px", min: 0, max: 12, defaultValue: "0px" };
-var BORDER_COLOR = { id: "decorations.borderColor", group: "decorations", label: "Border", control: "color", defaultValue: "#000000" };
+var BORDER_COLOR = { id: "decorations.borderColor", group: "decorations", label: "Border", control: "color", defaultValue: "transparent" };
 var BORDER_STYLE = {
   id: "decorations.borderStyle",
   group: "decorations",
@@ -470,18 +532,14 @@ var TYPOGRAPHY_FIELD_MAP = {
   linkDecoration: LINK_DECORATION
 };
 var COMMON_STYLE_FIELDS = [PADDING, MARGIN, BLOCK_HEIGHT, BG_COLOR, BORDER_WIDTH, BORDER_STYLE, BORDER_COLOR, BORDER_RADIUS];
-var TYPOGRAPHY_FIELDS = [
-  FONT_FAMILY,
-  FONT_SIZE,
-  FONT_WEIGHT,
-  LINE_HEIGHT,
-  TEXT_COLOR,
-  TEXT_ALIGN,
-  PARAGRAPH_SPACING,
-  LIST_SPACING,
-  LIST_INDENT,
-  LINK_COLOR,
-  LINK_DECORATION
+var WRAPPER_STYLE_FIELDS = [
+  __spreadProps(__spreadValues({}, PADDING), { label: "Block padding" }),
+  MARGIN,
+  __spreadProps(__spreadValues({}, BG_COLOR), { label: "Block background" }),
+  BORDER_WIDTH,
+  BORDER_STYLE,
+  __spreadProps(__spreadValues({}, BORDER_COLOR), { label: "Block border" }),
+  BORDER_RADIUS
 ];
 function copyStyleField(field, overrides) {
   const next = __spreadValues(__spreadValues({}, field), overrides);
@@ -527,19 +585,12 @@ var elementDecoration = createDecorationFields({
   borderColor: { id: "element.borderColor", label: "Outline" },
   borderRadius: { id: "element.borderRadius", label: "Corner radius" }
 });
-var buttonTypography = createTypographyFields({
-  fontFamily: { id: "element.fontFamily" },
-  fontSize: { id: "element.fontSize" },
-  fontWeight: { id: "element.fontWeight" },
-  lineHeight: { id: "element.lineHeight" },
-  color: { id: "element.color" }
-});
 var BUTTON_BOX_DEFAULTS = {
   align: HORIZONTAL_ALIGNS.center,
-  backgroundColor: "#005bd3",
+  backgroundColor: "#000000",
   borderRadius: "8px",
   borderWidth: "1px",
-  borderColor: "#005bd3",
+  borderColor: "transparent",
   padding: "12px 32px"
 };
 var ELEMENT_BORDER_FIELDS = [
@@ -554,12 +605,7 @@ var BUTTON_STYLE_FIELDS = [
   ELEMENT_ALIGN,
   ELEMENT_WIDTH,
   createDimensionFields({ padding: { id: "element.padding", label: "Button padding", defaultValue: BUTTON_BOX_DEFAULTS.padding } }).padding,
-  buttonTypography.fontFamily,
-  buttonTypography.fontSize,
-  buttonTypography.fontWeight,
-  buttonTypography.lineHeight,
-  buttonTypography.color,
-  createDecorationFields({ backgroundColor: { id: "element.backgroundColor", label: "Button", defaultValue: BUTTON_BOX_DEFAULTS.backgroundColor } }).backgroundColor,
+  createDecorationFields({ backgroundColor: { id: "element.backgroundColor", label: "Button fill", defaultValue: BUTTON_BOX_DEFAULTS.backgroundColor } }).backgroundColor,
   ...ELEMENT_BORDER_FIELDS.map((field) => __spreadProps(__spreadValues({}, field), {
     defaultValue: field.id === "element.borderWidth" ? BUTTON_BOX_DEFAULTS.borderWidth : field.id === "element.borderColor" ? BUTTON_BOX_DEFAULTS.borderColor : field.id === "element.borderRadius" ? BUTTON_BOX_DEFAULTS.borderRadius : field.defaultValue
   }))
@@ -576,44 +622,188 @@ var DIVIDER_STYLE_FIELDS = [
   __spreadProps(__spreadValues({}, ELEMENT_BORDER_FIELDS[1]), { label: "Line style" })
 ];
 
+// src/render/button.ts
+function buttonContent(block) {
+  var _a;
+  return String((_a = block.fields.html) != null ? _a : "");
+}
+function buttonStyles(block, global) {
+  var _a;
+  const element = __spreadValues(__spreadValues({}, BUTTON_BOX_DEFAULTS), (_a = block.style) == null ? void 0 : _a.element);
+  const text = __spreadProps(__spreadValues({}, typographyStyle(void 0, global)), { textAlign: "center" });
+  const box = __spreadProps(__spreadValues({}, decorationStyle(element)), {
+    padding: cssSpacing(element.padding, BUTTON_BOX_DEFAULTS.padding),
+    textAlign: "center"
+  });
+  return { element, width: cssLength(element.width, "auto", true), text, box };
+}
+
+// src/render/button-content.ts
+import { parser } from "@lezer/html";
+
+// src/render/template-tokens.ts
+function protectTemplateTokens(html) {
+  var _a;
+  let prefix = "REE_TEMPLATE_TOKEN_";
+  while (html.includes(prefix)) prefix += "_";
+  const tokens = [];
+  let protectedHtml = "";
+  let cursor = 0;
+  while (cursor < html.length) {
+    const start = html.indexOf("{{", cursor);
+    if (start < 0) break;
+    let quote = "";
+    let comment = false;
+    let escaped = false;
+    let end = start + 2;
+    for (; end < html.length - 1; end += 1) {
+      const entity = html[end] === "&" ? (_a = /^&(?:#x[\da-f]+|#\d+|quot|apos);/i.exec(html.slice(end))) == null ? void 0 : _a[0] : void 0;
+      const char = decodeHtmlText(entity != null ? entity : html[end]);
+      if (comment) {
+        if (html.startsWith("*/", end)) {
+          comment = false;
+          end += 1;
+        }
+      } else if (quote) {
+        if (escaped) escaped = false;
+        else if (char === "\\" && quote !== "`") escaped = true;
+        else if (char === quote) quote = "";
+      } else if (html.startsWith("/*", end)) {
+        comment = true;
+        end += 1;
+      } else if (char === '"' || char === "'" || char === "`") {
+        quote = char;
+      } else if (html.startsWith("}}", end)) {
+        break;
+      }
+      if (entity) end += entity.length - 1;
+    }
+    if (end >= html.length - 1) break;
+    protectedHtml += html.slice(cursor, start) + `${prefix}${tokens.length}_END`;
+    tokens.push(decodeHtmlText(html.slice(start, end + 2)));
+    cursor = end + 2;
+  }
+  protectedHtml += html.slice(cursor);
+  return {
+    html: protectedHtml,
+    restore: (value) => value.replace(new RegExp(`${prefix}(\\d+)_END`, "g"), (token, index) => {
+      var _a2;
+      return (_a2 = tokens[Number(index)]) != null ? _a2 : token;
+    })
+  };
+}
+
+// src/render/button-content.ts
+var INLINE_TAGS = { strong: "strong", b: "strong", em: "em", i: "em", u: "u", span: "span" };
+var OMIT_CONTENT = /* @__PURE__ */ new Set(["script", "style", "iframe", "object", "template"]);
+var BLOCK_TAGS = /* @__PURE__ */ new Set(["p", "div", "li", "br", "h1", "h2", "h3", "h4", "h5", "h6"]);
+function inlineStyle(value) {
+  return value.split(";").flatMap((declaration) => {
+    const separator = declaration.indexOf(":");
+    const name = declaration.slice(0, separator).trim().toLowerCase();
+    const raw = declaration.slice(separator + 1).trim();
+    let normalized = "";
+    if (name === "font-family") normalized = cssFont(raw, "");
+    if (name === "font-size") normalized = cssLength(raw, "");
+    if (name === "color") normalized = cssColor(raw, "");
+    if (name === "font-weight" && /^(normal|bold|[1-9]00)$/.test(raw)) normalized = raw;
+    if (name === "font-style" && /^(normal|italic)$/.test(raw)) normalized = raw;
+    if (name === "text-decoration" && /^(none|underline)$/.test(raw)) normalized = raw;
+    return normalized ? [`${name}:${normalized}`] : [];
+  }).join(";");
+}
+function buttonInlineHtml(html) {
+  const templates = protectTemplateTokens(html);
+  html = templates.html;
+  const source = (node) => html.slice(node.from, node.to);
+  const tagName = (node) => {
+    var _a, _b;
+    const tag = (_b = (_a = node.getChild("OpenTag")) != null ? _a : node.getChild("SelfClosingTag")) == null ? void 0 : _b.getChild("TagName");
+    return tag ? source(tag).toLowerCase() : "";
+  };
+  const read = (node) => {
+    var _a, _b;
+    if (node.name === "Text") return esc(source(node));
+    if (node.name === "EntityReference" || node.name === "CharacterReference") return source(node);
+    if (node.name !== "Element" && node.name !== "Document") return "";
+    const open = (_a = node.getChild("OpenTag")) != null ? _a : node.getChild("SelfClosingTag");
+    const tag = tagName(node);
+    if (OMIT_CONTENT.has(tag)) return "";
+    let content = "";
+    let previousBlock = false;
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+      const next = read(child);
+      const block = BLOCK_TAGS.has(tagName(child));
+      if (next && content && (previousBlock || block)) content += " ";
+      content += next;
+      if (next) previousBlock = block;
+    }
+    const inline = INLINE_TAGS[tag];
+    let style = "";
+    for (const attribute of (_b = open == null ? void 0 : open.getChildren("Attribute")) != null ? _b : []) {
+      const name = attribute.getChild("AttributeName");
+      const value = attribute.getChild("AttributeValue");
+      if (name && value && source(name).toLowerCase() === "style") {
+        style = inlineStyle(source(value).replace(/^(["'])([\s\S]*)\1$/, "$2").replace(/&quot;/gi, '"').replace(/&#39;|&apos;/gi, "'"));
+      }
+    }
+    const styled = style ? ` style="${esc(style)}"` : "";
+    if (inline) return `<${inline}${styled}>${content}</${inline}>`;
+    if (style) content = `<span${styled}>${content}</span>`;
+    return tag === "br" ? " " : content;
+  };
+  return templates.restore(read(parser.parse(html).topNode));
+}
+
+// src/blocks/icons.ts
+var ICON_TEXT = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M5 4h14v3H5V4Zm0 13h9v-3H5v3Z"/></svg>';
+var ICON_HEADING = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 4h3v7h10V4h3v16h-3v-6H7v6H4V4Z"/></svg>';
+var ICON_BUTTON = '<svg viewBox="0 0 24 24" width="18" height="18"><rect x="3" y="7" width="18" height="10" rx="2" fill="currentColor"/></svg>';
+var ICON_IMAGE = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1.5 11 4-4 3 3 2.5-2.5 4 4V6.5h-13V16Z"/></svg>';
+var ICON_DIVIDER = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 11h18v2H3v-2Z"/></svg>';
+var ICON_SPACER = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 8h16v2H4V8Zm0 6h16v2H4v-2Z"/></svg>';
+var ICON_HTML = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M5 3l-3 9 3 9h3l-3-9 3-9H5Zm6 0 3 9-3 9h3l3-9-3-9h-3Zm6 0-3 9 3 9h3l-3-9 3-9h-3Z"/></svg>';
+
 // src/blocks/button.ts
 var buttonBlock = {
+  exactStyleFields: true,
+  inspectorSections: BUTTON_SECTIONS,
   type: BLOCK_TYPES.button,
   title: "Button",
   icon: ICON_BUTTON,
   description: "Clickable CTA button",
+  inlineEdit: true,
+  inlineEditProfile: "button",
+  defaultFields: { html: '<p><span style="font-size:16px;color:#ffffff">Buy now</span></p>' },
   fields: [
-    { type: "text", name: "label", label: "Label", defaultValue: "Buy now" },
-    { type: "url", name: "href", label: "Link", defaultValue: "https://example.com" }
+    { type: "url", name: "href", label: "Link", defaultValue: "", placeholder: "https://example.com" }
   ],
   defaultStyle: {
-    element: __spreadValues({ fontSize: "16px", color: "#ffffff" }, BUTTON_BOX_DEFAULTS)
+    element: __spreadValues({}, BUTTON_BOX_DEFAULTS)
   },
-  styleFields: [...COMMON_STYLE_FIELDS, ...BUTTON_STYLE_FIELDS],
-  render: ({ fields, style, global }) => {
-    var _a, _b;
-    const element = __spreadValues(__spreadValues({}, BUTTON_BOX_DEFAULTS), style.element);
-    const width = cssLength(element.width, "auto", true);
+  styleFields: [...WRAPPER_STYLE_FIELDS, ...BUTTON_STYLE_FIELDS],
+  render: ({ block, global }) => {
+    var _a;
+    const { element, width, text, box } = buttonStyles(block, global);
     const px = pixelLength(width);
-    const text = styleToCss(__spreadProps(__spreadValues({}, typographyStyle({ typography: element }, global)), { textAlign: "center" }));
-    const box = styleToCss(__spreadProps(__spreadValues({}, decorationStyle(element)), {
-      padding: cssSpacing(element.padding, BUTTON_BOX_DEFAULTS.padding),
-      textAlign: "center"
-    }));
-    const anchor = `<a href="${esc(String((_a = fields.href) != null ? _a : "#"))}" style="display:block;text-decoration:none;${text};">${esc(String((_b = fields.label) != null ? _b : "Button"))}</a>`;
-    const cell = `<td align="center"${px ? ` width="${px}"` : ""} style="${box};">${anchor}</td>`;
+    const href = String((_a = block.fields.href) != null ? _a : "").trim();
+    const tag = href ? "a" : "span";
+    const anchor = `<${tag}${href ? ` href="${esc(href)}"` : ""} style="display:block;text-decoration:none;${styleToCss(text)};">${buttonInlineHtml(buttonContent(block))}</${tag}>`;
+    const cell = `<td align="center"${px ? ` width="${px}"` : ""} style="${styleToCss(box)};">${anchor}</td>`;
     return renderAligned("button", { align: element.align, width, content: cell });
   }
 };
 
 // src/blocks/divider.ts
 var dividerBlock = {
+  exactStyleFields: true,
+  inspectorSections: DIVIDER_SECTIONS,
   type: BLOCK_TYPES.divider,
   title: "Divider",
   icon: ICON_DIVIDER,
   description: "Horizontal divider line",
   defaultStyle: { dimension: { padding: "12px" }, element: { borderColor: "#e3e3e5" } },
-  styleFields: [...COMMON_STYLE_FIELDS, ...DIVIDER_STYLE_FIELDS, { id: "element.borderColor", group: "decorations", label: "Line", control: "color", defaultValue: "#e3e3e5" }],
+  styleFields: [...WRAPPER_STYLE_FIELDS.filter((field) => !field.id.startsWith("decorations.border")), ...DIVIDER_STYLE_FIELDS, { id: "element.borderColor", group: "decorations", label: "Line", control: "color", defaultValue: "#e3e3e5" }],
   render: ({ style }) => {
     var _a;
     const element = (_a = style.element) != null ? _a : {};
@@ -723,45 +913,45 @@ function styleRichText(html, style, global) {
 
 // src/blocks/heading.ts
 var headingBlock = {
+  exactStyleFields: true,
+  inspectorSections: HEADING_SECTIONS,
   type: BLOCK_TYPES.heading,
   title: "Heading",
   icon: ICON_HEADING,
   description: "Large section heading",
   inlineEdit: true,
-  defaultFields: { html: "<p>Heading</p>" },
+  inlineEditProfile: "heading",
+  defaultFields: { html: '<p style="line-height:1.25"><span style="font-size:26px"><strong>Heading</strong></span></p>' },
   defaultStyle: {
-    dimension: { padding: "16px" },
-    typography: {
-      fontSize: "26px",
-      fontWeight: "bold",
-      lineHeight: "1.25"
-    }
+    dimension: { padding: "16px" }
   },
-  styleFields: [...COMMON_STYLE_FIELDS, ...TYPOGRAPHY_FIELDS],
-  render: ({ fields, style, global }) => {
+  styleFields: WRAPPER_STYLE_FIELDS,
+  render: ({ fields, global }) => {
     var _a;
-    return `<div style="display:flow-root;${typographyCss(style, global)}">${styleRichText(String((_a = fields.html) != null ? _a : ""), style, global)}</div>`;
+    return `<div style="display:flow-root;${typographyCss(void 0, global)}">${styleRichText(String((_a = fields.html) != null ? _a : ""), void 0, global)}</div>`;
   }
 };
 
 // src/render/html-content.ts
-function htmlContent(html, style, global, id) {
+function htmlContent(html, global, id) {
   var _a, _b, _c, _d;
   const scope = `ree-html-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const body = html.match(/<body\b([^>]*)>([\s\S]*?)<\/body\s*>/i);
   let marker = "";
-  let inner = styleRichText(html, style, global);
+  let inner = html;
   if (body) {
     const head = (_b = (_a = html.match(/<head\b[^>]*>([\s\S]*?)<\/head\s*>/i)) == null ? void 0 : _a[1]) != null ? _b : "";
     const styles = (_d = (_c = head.match(/<style\b[^>]*>[\s\S]*?<\/style\s*>/gi)) == null ? void 0 : _c.join("\n")) != null ? _d : "";
     marker = styles ? `<!--ree-head-->${styles}<!--/ree-head-->` : "";
-    inner = `<div${body[1]}>${styleRichText(body[2], style, global)}</div>`;
+    inner = `<div${body[1]}>${body[2]}</div>`;
   }
-  return `${marker}<div class="${scope}" style="display:flow-root;${typographyCss(style, global)};">${inner}</div>`;
+  return `${marker}<div class="${scope}" style="display:flow-root;${typographyCss(void 0, global)};">${inner}</div>`;
 }
 
 // src/blocks/html.ts
 var htmlBlock = {
+  exactStyleFields: true,
+  inspectorSections: HTML_SECTIONS,
   type: BLOCK_TYPES.html,
   title: "HTML",
   icon: ICON_HTML,
@@ -777,15 +967,17 @@ var htmlBlock = {
     }
   ],
   defaultStyle: { dimension: { padding: "8px" } },
-  styleFields: [...COMMON_STYLE_FIELDS, ...TYPOGRAPHY_FIELDS],
-  render: ({ fields, style, global, block }) => {
+  styleFields: WRAPPER_STYLE_FIELDS,
+  render: ({ fields, global, block }) => {
     var _a;
-    return htmlContent(String((_a = fields.html) != null ? _a : ""), style, global, block.id);
+    return htmlContent(String((_a = fields.html) != null ? _a : ""), global, block.id);
   }
 };
 
 // src/blocks/image.ts
 var imageBlock = {
+  exactStyleFields: true,
+  inspectorSections: IMAGE_SECTIONS,
   type: BLOCK_TYPES.image,
   title: "Image",
   icon: ICON_IMAGE,
@@ -793,10 +985,10 @@ var imageBlock = {
   fields: [
     { type: "url", name: "src", label: "Image URL", defaultValue: "https://placehold.co/560x200?text=Image" },
     { type: "text", name: "alt", label: "Alt text", defaultValue: "Image" },
-    { type: "url", name: "link", label: "Link", defaultValue: "" }
+    { type: "url", name: "link", label: "Link", defaultValue: "", placeholder: "https://example.com" }
   ],
   defaultStyle: { dimension: { padding: "8px" } },
-  styleFields: [...COMMON_STYLE_FIELDS, ELEMENT_ALIGN, ...IMAGE_STYLE_FIELDS],
+  styleFields: [...WRAPPER_STYLE_FIELDS, ELEMENT_ALIGN, ...IMAGE_STYLE_FIELDS],
   render: ({ fields, style }) => {
     var _a, _b, _c, _d;
     const element = (_a = style.element) != null ? _a : {};
@@ -813,7 +1005,7 @@ var imageBlock = {
     const widthAttr = pixelLength(width);
     const heightAttr = pixelLength(height);
     const image = `<img src="${esc(String((_b = fields.src) != null ? _b : ""))}" alt="${esc(String((_c = fields.alt) != null ? _c : ""))}"${widthAttr ? ` width="${widthAttr}"` : ""}${heightAttr ? ` height="${heightAttr}"` : ""} border="0" style="outline:none;text-decoration:none;${css};" />`;
-    const link = String((_d = fields.link) != null ? _d : "");
+    const link = String((_d = fields.link) != null ? _d : "").trim();
     const content = link ? `<a href="${esc(link)}" style="text-decoration:none;${box.display === "block" ? "display:block;" : ""}">${image}</a>` : image;
     return renderAligned("image", { align: element.align, width, content });
   }
@@ -829,30 +1021,35 @@ function spacerHtml(height, fallback = "0px") {
 
 // src/blocks/spacer.ts
 var spacerBlock = {
+  exactStyleFields: true,
+  inspectorSections: SPACER_SECTIONS,
   type: BLOCK_TYPES.spacer,
   title: "Spacer",
   icon: ICON_SPACER,
   description: "Vertical whitespace",
   fields: [{ type: "number", name: "height", label: "Height", defaultValue: 16, min: 0, max: 240, step: 1 }],
-  styleFields: COMMON_STYLE_FIELDS,
+  styleFields: [BG_COLOR],
   render: ({ fields }) => spacerHtml(fields.height, "16px")
 };
 
 // src/blocks/text.ts
 var textBlock = {
+  exactStyleFields: true,
+  inspectorSections: TEXT_SECTIONS,
   type: BLOCK_TYPES.text,
   title: "Text",
   icon: ICON_TEXT,
   description: "Paragraph of body text",
   inlineEdit: true,
+  inlineEditProfile: "text",
   defaultFields: { html: "<p>Type your paragraph here\u2026</p>" },
   defaultStyle: {
     dimension: { padding: "16px" }
   },
-  styleFields: [...COMMON_STYLE_FIELDS, ...TYPOGRAPHY_FIELDS],
-  render: ({ fields, style, global }) => {
+  styleFields: WRAPPER_STYLE_FIELDS,
+  render: ({ fields, global }) => {
     var _a;
-    return `<div style="display:flow-root;${typographyCss(style, global)}">${styleRichText(String((_a = fields.html) != null ? _a : ""), style, global)}</div>`;
+    return `<div style="display:flow-root;${typographyCss(void 0, global)}">${styleRichText(String((_a = fields.html) != null ? _a : ""), void 0, global)}</div>`;
   }
 };
 
@@ -1049,7 +1246,9 @@ function EditorDnd({
   children
 }) {
   const blocksRef = useRef(blocks);
-  blocksRef.current = blocks;
+  useLayoutEffect(() => {
+    blocksRef.current = blocks;
+  }, [blocks]);
   const [activeDrag, setActiveDrag] = useState(null);
   const [indicator, setIndicator] = useState(null);
   const sensors = useSensors(
@@ -1241,10 +1440,9 @@ function StyleFieldStack({ fields, renderField }) {
 }
 
 // src/inspector/StyleControl.tsx
-import { useId } from "react";
+import { useId as useId2 } from "react";
 
 // src/inspector/constants.ts
-var HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 var TEXT_ALIGN_OPTIONS = [
   { value: HORIZONTAL_ALIGNS.left, label: "Left", glyph: "\u21E4" },
   { value: HORIZONTAL_ALIGNS.center, label: "Center", glyph: "\u21D4" },
@@ -1268,108 +1466,19 @@ function AlignControl({ value, onChange }) {
       className: `ree-align-btn${value === option.value ? " is-active" : ""}`,
       onClick: () => onChange(option.value),
       title: option.label,
+      "aria-label": option.label,
+      "aria-pressed": value === option.value,
       children: option.glyph
     },
     option.value
   )) });
 }
 
-// src/inspector/utils.ts
-function colorInputValue(value, fallback = "#000000") {
-  return HEX_COLOR.test(value) ? value : fallback;
-}
-function styleReset(stored, restore, inherit) {
-  if (inherit) return { resetTo: "", show: stored !== "" };
-  return { resetTo: restore, show: stored !== "" && stored !== restore };
-}
-function inheritedStyleValue(id, global) {
-  if (!id.startsWith("typography.") && !id.startsWith("element.")) return;
-  switch (id.split(".")[1]) {
-    case "fontFamily":
-      return global.fontFamily;
-    case "fontSize":
-      return global.defaultFontSize;
-    case "fontWeight":
-      return global.fontWeight;
-    case "lineHeight":
-      return global.defaultLineHeight;
-    case "color":
-      return global.textColor;
-    case "textAlign":
-      return global.textAlign;
-    case "paragraphSpacing":
-      return global.paragraphSpacing;
-    case "listSpacing":
-      return global.listSpacing;
-    case "listIndent":
-      return global.listIndent;
-    case "linkColor":
-      return global.linkColor;
-    case "linkDecoration":
-      return global.linkDecoration;
-  }
-}
-
-// src/inspector/components/ColorControl.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function ColorControl({ value, fallback = "#000000", label = "Color", onChange }) {
-  const actual = value || fallback;
-  const empty = !actual || actual === "transparent" || !HEX_COLOR.test(actual);
-  return /* @__PURE__ */ jsxs6("label", { className: "ree-color-chip", children: [
-    /* @__PURE__ */ jsxs6("span", { className: "ree-color-swatch", children: [
-      /* @__PURE__ */ jsx8(
-        "span",
-        {
-          className: `ree-color-swatch-face${empty ? " is-empty" : ""}`,
-          style: empty ? void 0 : { background: actual }
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "input",
-        {
-          type: "color",
-          className: "ree-color-native",
-          "aria-label": label,
-          value: colorInputValue(actual),
-          onChange: (event) => onChange(event.target.value)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx8("span", { className: "ree-color-chip-label", children: label })
-  ] });
-}
-
-// src/inspector/components/CssValueInput.tsx
-import { useEffect, useState as useState3 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function CssValueInput({ label, value, placeholder: placeholder2, onChange }) {
-  const [draft, setDraft] = useState3(value);
-  useEffect(() => setDraft(value), [value]);
-  return /* @__PURE__ */ jsx9(
-    "input",
-    {
-      className: "ree-input",
-      "aria-label": label,
-      value: draft,
-      placeholder: placeholder2 != null ? placeholder2 : "0px",
-      onChange: (event) => setDraft(event.target.value),
-      onBlur: () => {
-        onChange(draft.trim());
-        setDraft(value);
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter") event.currentTarget.blur();
-        if (event.key === "Escape") {
-          setDraft(value);
-          event.stopPropagation();
-        }
-      }
-    }
-  );
-}
+// src/components/ColorPicker.tsx
+import { useState as useState3 } from "react";
 
-// src/inspector/components/RangeControl.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+// src/components/RangeControl.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
 function RangeControl({
   id,
   label,
@@ -1380,7 +1489,7 @@ function RangeControl({
   onChange
 }) {
   const progress = max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx8(
     "input",
     {
       id,
@@ -1397,83 +1506,362 @@ function RangeControl({
   );
 }
 
-// src/inspector/components/LengthControl.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function bounds(unit, min, max, step) {
-  if (unit === "%") return { min: 0, max: 100, step: 1 };
-  return { min, max, step };
+// src/components/TextInput.tsx
+import { forwardRef } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TextInput = forwardRef(function TextInput2(_a, ref) {
+  var _b = _a, { className = "", type = "text" } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsx9("input", __spreadProps(__spreadValues({}, props), { ref, type, className: `ree-input${className ? ` ${className}` : ""}` }));
+});
+
+// src/components/ResetButton.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function ResetButton({ label, disabled = false, onClick }) {
+  return /* @__PURE__ */ jsx10("button", { type: "button", className: "ree-reset", "aria-label": label, title: label, disabled, onClick, children: /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M13 8a5 5 0 1 1-1.4-3.45", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx10("path", { d: "M12.2 2.4v2.7h-2.7", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }) });
 }
-function snap(value, step) {
+
+// src/components/color-picker/ColorSaturation.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ColorSaturation({ color, onChange }) {
+  const update = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    onChange(__spreadProps(__spreadValues({}, color), {
+      saturation: Math.min(100, Math.max(0, (event.clientX - rect.left) / rect.width * 100)),
+      brightness: Math.min(100, Math.max(0, (1 - (event.clientY - rect.top) / rect.height) * 100))
+    }));
+  };
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: "ree-color-saturation",
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Saturation and brightness",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(color.saturation),
+      "aria-valuetext": `Saturation ${Math.round(color.saturation)}%, brightness ${Math.round(color.brightness)}%. Use left/right for saturation and up/down for brightness.`,
+      style: { "--ree-color-hue": `hsl(${color.hue} 100% 50%)` },
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        event.currentTarget.focus({ preventScroll: true });
+        event.currentTarget.setPointerCapture(event.pointerId);
+        update(event);
+      },
+      onPointerMove: (event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) update(event);
+      },
+      onPointerUp: (event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+      },
+      onKeyDown: (event) => {
+        const step = event.shiftKey ? 10 : 1;
+        let { saturation, brightness } = color;
+        switch (event.key) {
+          case "ArrowLeft":
+            saturation -= step;
+            break;
+          case "ArrowRight":
+            saturation += step;
+            break;
+          case "ArrowUp":
+            brightness += step;
+            break;
+          case "ArrowDown":
+            brightness -= step;
+            break;
+          case "Home":
+            saturation = 0;
+            break;
+          case "End":
+            saturation = 100;
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        onChange(__spreadProps(__spreadValues({}, color), {
+          saturation: Math.min(100, Math.max(0, saturation)),
+          brightness: Math.min(100, Math.max(0, brightness))
+        }));
+      },
+      children: /* @__PURE__ */ jsx11("span", { className: "ree-color-cursor", style: { left: `${color.saturation}%`, top: `${100 - color.brightness}%` } })
+    }
+  );
+}
+
+// src/components/color-picker/colors.ts
+function normalizeHex(value) {
+  const input = value.trim();
+  const hex = input.startsWith("#") ? input : `#${input}`;
+  if (!HEX_COLOR.test(hex)) return null;
+  const digits = hex.slice(1).toLowerCase();
+  return `#${digits.length === 3 ? [...digits].map((digit) => digit + digit).join("") : digits}`;
+}
+function colorToHex(value) {
+  const hex = normalizeHex(value);
+  if (hex) return hex;
+  const rgb = /^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/i.exec(value.trim());
+  if (!rgb) return null;
+  const channels = rgb.slice(1).map(Number);
+  if (channels.some((channel) => !Number.isFinite(channel) || channel < 0 || channel > 255)) return null;
+  return `#${channels.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+function hexToHsv(hex) {
   var _a;
-  const places = ((_a = String(step).split(".")[1]) != null ? _a : "").length;
-  return Number((Math.round(value / step) * step).toFixed(places));
+  const normalized = (_a = normalizeHex(hex)) != null ? _a : "#000000";
+  const [red, green, blue] = [1, 3, 5].map((offset) => Number.parseInt(normalized.slice(offset, offset + 2), 16) / 255);
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  let hue = 0;
+  if (delta) {
+    if (max === red) hue = (green - blue) / delta % 6;
+    else if (max === green) hue = (blue - red) / delta + 2;
+    else hue = (red - green) / delta + 4;
+  }
+  return { hue: (hue * 60 + 360) % 360, saturation: max ? delta / max * 100 : 0, brightness: max * 100 };
 }
-function LengthControl({
-  id,
-  label,
-  amount,
-  unit,
-  units,
-  min = 0,
-  max = 200,
-  step = 1,
-  onChange
-}) {
-  const range = bounds(unit, min, max, step);
-  const shown = Math.min(range.max, Math.max(range.min, amount));
-  const commit = (nextAmount, nextUnit) => {
-    if (nextUnit === "auto") {
-      onChange("auto");
-      return;
-    }
-    const nextRange = bounds(nextUnit, min, max, step);
-    const snapped = snap(Math.min(nextRange.max, Math.max(nextRange.min, nextAmount)), nextRange.step);
-    onChange(formatCssLength(snapped, nextUnit));
+function hsvToHex({ hue, saturation, brightness }) {
+  const sector = (hue % 360 + 360) % 360 / 60;
+  const value = Math.min(100, Math.max(0, brightness)) / 100;
+  const chroma = value * Math.min(100, Math.max(0, saturation)) / 100;
+  const secondary = chroma * (1 - Math.abs(sector % 2 - 1));
+  const channels = sector < 1 ? [chroma, secondary, 0] : sector < 2 ? [secondary, chroma, 0] : sector < 3 ? [0, chroma, secondary] : sector < 4 ? [0, secondary, chroma] : sector < 5 ? [secondary, 0, chroma] : [chroma, 0, secondary];
+  return `#${channels.map((channel) => Math.round((channel + value - chroma) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+
+// src/components/ColorPicker.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function ColorPicker({ id, label, value, fallback = "#000000", panelRef, onChange, onReset, onClose }) {
+  var _a, _b;
+  const initial = (_b = (_a = colorToHex(value)) != null ? _a : colorToHex(fallback)) != null ? _b : "#000000";
+  const [color, setColor] = useState3(() => hexToHsv(initial));
+  const [draft, setDraft] = useState3(initial);
+  const invalid = !normalizeHex(draft);
+  const selectColor = (next) => {
+    const hex = hsvToHex(next);
+    setColor(next);
+    setDraft(hex);
+    onChange(hex);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "ree-range-row", children: [
-    unit === "auto" ? null : /* @__PURE__ */ jsx11(RangeControl, { id, label, value: shown, min: range.min, max: range.max, step: range.step, onChange: (next) => commit(next, unit) }),
-    units.length > 1 ? /* @__PURE__ */ jsx11(
-      "select",
-      {
-        className: "ree-unit-select",
-        "aria-label": `${label} unit`,
-        value: unit,
-        onChange: (event) => {
-          const nextUnit = event.target.value;
-          if (nextUnit === unit) return;
-          const seed = unit === "auto" ? nextUnit === "%" ? 100 : Math.min(max, 160) : amount;
-          commit(seed, nextUnit);
-        },
-        children: units.map((option) => /* @__PURE__ */ jsx11("option", { value: option, children: option }, option))
-      }
-    ) : null
-  ] });
+  const commitHex = () => {
+    const hex = normalizeHex(draft);
+    if (!hex) return;
+    setDraft(hex);
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: panelRef,
+      id,
+      className: "ree-color-picker",
+      role: "dialog",
+      "aria-label": `${label} picker`,
+      onMouseDown: (event) => event.stopPropagation(),
+      onPointerDown: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx12(ColorSaturation, { color, onChange: selectColor }),
+        /* @__PURE__ */ jsx12("div", { className: "ree-color-hue", children: /* @__PURE__ */ jsx12(RangeControl, { label: "Hue", value: color.hue, min: 0, max: 360, onChange: (hue) => selectColor(__spreadProps(__spreadValues({}, color), { hue })) }) }),
+        /* @__PURE__ */ jsxs7("div", { className: "ree-color-hex-row", children: [
+          /* @__PURE__ */ jsx12("span", { className: "ree-color-preview", style: { backgroundColor: hsvToHex(color) } }),
+          /* @__PURE__ */ jsxs7("label", { className: "ree-color-hex-field", children: [
+            /* @__PURE__ */ jsx12("span", { children: "HEX" }),
+            /* @__PURE__ */ jsx12(
+              TextInput,
+              {
+                "aria-label": "HEX",
+                "aria-invalid": invalid,
+                "aria-describedby": invalid ? `${id}-error` : void 0,
+                value: draft,
+                autoComplete: "off",
+                spellCheck: false,
+                onChange: (event) => {
+                  const next = event.target.value;
+                  setDraft(next);
+                  const hex = normalizeHex(next);
+                  if (hex) {
+                    setColor(hexToHsv(hex));
+                    onChange(hex);
+                  }
+                },
+                onBlur: commitHex,
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter") return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  commitHex();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx12(ResetButton, { label: `Reset ${label.toLowerCase()}`, onClick: () => {
+            onReset();
+            onClose();
+          } })
+        ] }),
+        invalid ? /* @__PURE__ */ jsx12("p", { id: `${id}-error`, className: "ree-color-error", role: "status", children: "Enter a 3 or 6 digit HEX color." }) : null
+      ]
+    }
+  );
 }
 
-// src/inspector/components/ResetButton.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function ResetButton({ label, onClick }) {
-  return /* @__PURE__ */ jsx12("button", { type: "button", className: "ree-reset", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx12("path", { d: "M13 8a5 5 0 1 1-1.4-3.45", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx12("path", { d: "M12.2 2.4v2.7h-2.7", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] }) });
+// src/components/color-picker/useColorPicker.ts
+import { useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState4 } from "react";
+function useColorPicker(onOpen) {
+  const id = useId();
+  const anchorRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const [open, setOpen] = useState4(false);
+  useLayoutEffect2(() => {
+    var _a;
+    const panel = panelRef.current;
+    const anchor = anchorRef.current;
+    if (!open || !panel || !anchor) return;
+    const ownerDocument = anchor.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    if (!ownerWindow) return;
+    const place = () => {
+      const rect = anchor.getBoundingClientRect();
+      const width = panel.offsetWidth;
+      const height = panel.offsetHeight;
+      const left = Math.max(8, Math.min(rect.left, ownerWindow.innerWidth - width - 8));
+      const below = rect.bottom + 6;
+      const top = below + height <= ownerWindow.innerHeight - 8 ? below : Math.max(8, rect.top - height - 6);
+      panel.style.left = `${left}px`;
+      panel.style.top = `${Math.min(top, Math.max(8, ownerWindow.innerHeight - height - 8))}px`;
+    };
+    const onToggle = () => {
+      if (!panel.matches(":popover-open")) setOpen(false);
+    };
+    panel.setAttribute("popover", "auto");
+    panel.addEventListener("toggle", onToggle);
+    panel.showPopover();
+    place();
+    (_a = panel.querySelector('input[type="text"]')) == null ? void 0 : _a.focus({ preventScroll: true });
+    const observer = new ResizeObserver(place);
+    observer.observe(panel);
+    ownerDocument.addEventListener("scroll", place, true);
+    ownerWindow.addEventListener("resize", place);
+    return () => {
+      panel.removeEventListener("toggle", onToggle);
+      panel.hidePopover();
+      observer.disconnect();
+      ownerDocument.removeEventListener("scroll", place, true);
+      ownerWindow.removeEventListener("resize", place);
+    };
+  }, [open]);
+  return {
+    id,
+    open,
+    anchorRef,
+    panelRef,
+    toggle: () => {
+      if (!open) onOpen == null ? void 0 : onOpen();
+      setOpen(!open);
+    },
+    close: () => {
+      var _a, _b;
+      setOpen(false);
+      (_b = (_a = anchorRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus({ preventScroll: true });
+    }
+  };
 }
 
-// src/inspector/components/SelectControl.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function SelectControl({ label, value, options, onChange }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "ree-select", children: [
-    /* @__PURE__ */ jsx13(
-      "select",
+// src/components/ColorControl.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function ColorControl({ value, fallback = "#000000", label = "Color", resetTo = fallback, onChange }) {
+  const { id, open, anchorRef, panelRef, toggle, close } = useColorPicker();
+  const actual = value || fallback;
+  const normalized = colorToHex(actual);
+  const empty = normalized === null;
+  return /* @__PURE__ */ jsxs8("div", { className: "ree-color-control", ref: anchorRef, children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
       {
+        type: "button",
+        className: "ree-color-chip",
         "aria-label": label,
-        className: "ree-input",
-        value,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "ree-color-swatch", children: /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: `ree-color-swatch-face${empty ? " is-empty" : ""}`,
+              style: normalized ? { background: normalized } : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx13("span", { className: "ree-color-chip-label", children: label })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx13(ColorPicker, { id, label, value: actual, fallback, panelRef, onChange, onReset: () => onChange(resetTo), onClose: close }) : null
+  ] });
+}
+
+// src/inspector/components/CssValueInput.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function CssValueInput({ label, value, placeholder: placeholder2, onChange }) {
+  const [draft, setDraft] = useState5(value);
+  const [previousValue, setPreviousValue] = useState5(value);
+  if (previousValue !== value) {
+    setPreviousValue(value);
+    setDraft(value);
+  }
+  return /* @__PURE__ */ jsx14(
+    TextInput,
+    {
+      "aria-label": label,
+      value: draft,
+      placeholder: placeholder2 != null ? placeholder2 : "0px",
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => {
+        onChange(draft.trim());
+        setDraft(value);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+        if (event.key === "Escape") {
+          setDraft(value);
+          event.stopPropagation();
+        }
+      }
+    }
+  );
+}
+
+// src/components/SelectControl.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function SelectControl({ id, label, value, options, compact = false, disabled, onChange }) {
+  return /* @__PURE__ */ jsxs9("span", { className: `ree-select${compact ? " is-compact" : ""}`, children: [
+    /* @__PURE__ */ jsx15(
+      "select",
+      {
+        id,
+        "aria-label": label,
+        disabled,
+        className: "ree-input",
+        value,
         onChange: (event) => onChange(event.target.value),
-        children: options.map((option) => /* @__PURE__ */ jsx13("option", { value: option.value, children: option.label }, option.value))
+        children: options.map((option) => /* @__PURE__ */ jsx15("option", { value: option.value, children: option.label }, option.value))
       }
     ),
-    /* @__PURE__ */ jsx13("span", { className: "ree-select-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15("span", { className: "ree-select-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx15(
       "path",
       {
         d: "M4 6.25 8 10.25 12 6.25",
@@ -1486,9 +1874,72 @@ function SelectControl({ label, value, options, onChange }) {
   ] });
 }
 
+// src/inspector/components/LengthControl.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function bounds(unit, min, max, step) {
+  if (unit === "%") return { min: 0, max: 100, step: 1 };
+  return { min, max, step };
+}
+function snap(value, step) {
+  var _a;
+  const places = ((_a = String(step).split(".")[1]) != null ? _a : "").length;
+  return Number((Math.round(value / step) * step).toFixed(places));
+}
+function LengthControl({
+  id,
+  label,
+  amount,
+  unit,
+  units,
+  min = 0,
+  max = 200,
+  step = 1,
+  onChange
+}) {
+  const range = bounds(unit, min, max, step);
+  const shown = Math.min(range.max, Math.max(range.min, amount));
+  const commit = (nextAmount, nextUnit) => {
+    if (nextUnit === "auto") {
+      onChange("auto");
+      return;
+    }
+    const nextRange = bounds(nextUnit, min, max, step);
+    const snapped = snap(Math.min(nextRange.max, Math.max(nextRange.min, nextAmount)), nextRange.step);
+    onChange(formatCssLength(snapped, nextUnit));
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: "ree-range-row", children: [
+    unit === "auto" ? null : /* @__PURE__ */ jsx16(RangeControl, { id, label, value: shown, min: range.min, max: range.max, step: range.step, onChange: (next) => commit(next, unit) }),
+    units.length > 1 ? /* @__PURE__ */ jsx16(
+      SelectControl,
+      {
+        compact: true,
+        label: `${label} unit`,
+        value: unit,
+        options: units.map((option) => ({ value: option, label: option })),
+        onChange: (nextUnit) => {
+          if (nextUnit === unit) return;
+          const seed = unit === "auto" ? nextUnit === "%" ? 100 : Math.min(max, 160) : amount;
+          commit(seed, nextUnit);
+        }
+      }
+    ) : null
+  ] });
+}
+
+// src/inspector/components/SpacingControl.tsx
+import { useState as useState6 } from "react";
+
+// src/components/CheckboxControl.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function CheckboxControl({ label, checked, disabled, className = "", onChange }) {
+  return /* @__PURE__ */ jsxs11("label", { className: `ree-checkbox-control${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx17("input", { type: "checkbox", checked, disabled, onChange: (event) => onChange(event.target.checked) }),
+    /* @__PURE__ */ jsx17("span", { children: label })
+  ] });
+}
+
 // src/inspector/components/SpacingControl.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function sideAmount(value, max) {
   return Math.min(max, Math.max(0, readCssLength(value, ["px"]).amount));
 }
@@ -1505,37 +1956,35 @@ function SpacingControl({
   var _a;
   const sides = expand(value);
   const equal = sides.every((side) => sideAmount(side, max) === sideAmount(sides[0], max));
-  const [independent, setIndependent] = useState4(!equal);
+  const [independent, setIndependent] = useState6(!equal);
   const slider = (sideLabel, sideValue, commit) => {
     const amount = sideAmount(sideValue, max);
-    return /* @__PURE__ */ jsxs10("div", { className: "ree-field", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "ree-field-label", children: [
-        /* @__PURE__ */ jsx14("span", { children: sideLabel }),
-        /* @__PURE__ */ jsxs10("span", { className: "ree-field-value", children: [
+    return /* @__PURE__ */ jsxs12("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "ree-field-label", children: [
+        /* @__PURE__ */ jsx18("span", { children: sideLabel }),
+        /* @__PURE__ */ jsxs12("span", { className: "ree-field-value", children: [
           amount,
           "px"
         ] })
       ] }),
-      /* @__PURE__ */ jsx14(RangeControl, { label: sideLabel, value: amount, min: 0, max, step: 1, onChange: (next) => commit(`${next}px`) })
+      /* @__PURE__ */ jsx18(RangeControl, { label: sideLabel, value: amount, min: 0, max, step: 1, onChange: (next) => commit(`${next}px`) })
     ] }, sideLabel);
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "ree-spacing-control", children: [
-    /* @__PURE__ */ jsxs10("label", { className: "ree-spacing-link", children: [
-      /* @__PURE__ */ jsx14(
-        "input",
-        {
-          type: "checkbox",
-          checked: !independent && equal,
-          onChange: (event) => {
-            var _a2;
-            setIndependent(!event.target.checked);
-            if (event.target.checked) onChange(`${sideAmount((_a2 = sides[0]) != null ? _a2 : "0px", max)}px`);
-          }
+  return /* @__PURE__ */ jsxs12("div", { className: "ree-spacing-control", children: [
+    /* @__PURE__ */ jsx18(
+      CheckboxControl,
+      {
+        className: "ree-spacing-link",
+        label: linkLabel,
+        checked: !independent && equal,
+        onChange: (checked) => {
+          var _a2;
+          setIndependent(!checked);
+          if (checked) onChange(`${sideAmount((_a2 = sides[0]) != null ? _a2 : "0px", max)}px`);
         }
-      ),
-      linkLabel
-    ] }),
-    !independent && equal ? slider(uniformLabel != null ? uniformLabel : `${label} all sides`, (_a = sides[0]) != null ? _a : "0px", onChange) : /* @__PURE__ */ jsx14("div", { className: "ree-spacing-grid", children: sideLabels.map((side, index) => {
+      }
+    ),
+    !independent && equal ? slider(uniformLabel != null ? uniformLabel : `${label} all sides`, (_a = sides[0]) != null ? _a : "0px", onChange) : /* @__PURE__ */ jsx18("div", { className: "ree-spacing-grid", children: sideLabels.map((side, index) => {
       var _a2;
       return slider(side, (_a2 = sides[index]) != null ? _a2 : "0px", (next) => {
         const updated = [...sides];
@@ -1547,7 +1996,7 @@ function SpacingControl({
 }
 
 // src/inspector/StyleControl.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function lengthUnits(config) {
   var _a;
   if ((_a = config.units) == null ? void 0 : _a.length) return config.units;
@@ -1556,7 +2005,7 @@ function lengthUnits(config) {
 }
 function StyleControl({ config, value, fallback, resetLabel = "Reset", resetTo, showReset, onChange }) {
   var _a, _b;
-  const id = useId();
+  const id = useId2();
   const units = lengthUnits(config);
   const stored = value === "auto" && units.length > 0 && !units.includes("auto") ? "" : value;
   const actual = stored || fallback || config.defaultValue || "";
@@ -1564,24 +2013,24 @@ function StyleControl({ config, value, fallback, resetLabel = "Reset", resetTo,
   const parsed = numeric ? readCssLength(actual, units) : null;
   const options = (_a = config.options) != null ? _a : [];
   const selectOptions = actual && !options.some((option) => option.value === actual) ? [{ label: actual, value: actual }, ...options] : options;
-  const reset = (showReset != null ? showReset : Boolean(value)) ? /* @__PURE__ */ jsx15(ResetButton, { label: resetLabel, onClick: () => onChange(resetTo != null ? resetTo : "") }) : null;
+  const reset = (showReset != null ? showReset : Boolean(value)) ? /* @__PURE__ */ jsx19(ResetButton, { label: resetLabel, onClick: () => onChange(resetTo != null ? resetTo : "") }) : null;
   if (config.control === "color") {
-    return /* @__PURE__ */ jsxs11("div", { className: "ree-color-chip-row", children: [
-      /* @__PURE__ */ jsx15(ColorControl, { label: config.label, value: actual, onChange }),
+    return /* @__PURE__ */ jsxs13("div", { className: "ree-color-chip-row", children: [
+      /* @__PURE__ */ jsx19(ColorControl, { label: config.label, value: actual, resetTo: resetTo != null ? resetTo : "", onChange }),
       reset
     ] });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "ree-field", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "ree-field-label", children: [
-      /* @__PURE__ */ jsx15("label", { htmlFor: numeric ? id : void 0, children: config.label }),
-      /* @__PURE__ */ jsxs11("span", { className: "ree-field-meta", children: [
-        parsed ? /* @__PURE__ */ jsx15("span", { className: "ree-field-value", children: formatCssLength(parsed.amount, parsed.unit) }) : null,
+  return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "ree-field-label", children: [
+      /* @__PURE__ */ jsx19("label", { htmlFor: numeric ? id : void 0, children: config.label }),
+      /* @__PURE__ */ jsxs13("span", { className: "ree-field-meta", children: [
+        parsed ? /* @__PURE__ */ jsx19("span", { className: "ree-field-value", children: formatCssLength(parsed.amount, parsed.unit) }) : null,
         reset
       ] })
     ] }),
-    config.control === "alignment" ? /* @__PURE__ */ jsx15(AlignControl, { value: actual, onChange }) : null,
-    config.control === "select" ? /* @__PURE__ */ jsx15(SelectControl, { label: config.label, value: actual, options: selectOptions, onChange }) : null,
-    numeric && parsed ? /* @__PURE__ */ jsx15(
+    config.control === "alignment" ? /* @__PURE__ */ jsx19(AlignControl, { value: actual, onChange }) : null,
+    config.control === "select" ? /* @__PURE__ */ jsx19(SelectControl, { label: config.label, value: actual, options: selectOptions, onChange }) : null,
+    numeric && parsed ? /* @__PURE__ */ jsx19(
       LengthControl,
       {
         id,
@@ -1595,7 +2044,7 @@ function StyleControl({ config, value, fallback, resetLabel = "Reset", resetTo,
         onChange
       }
     ) : null,
-    config.control === "text" ? /* @__PURE__ */ jsx15(
+    config.control === "text" ? /* @__PURE__ */ jsx19(
       CssValueInput,
       {
         label: config.label,
@@ -1606,8 +2055,8 @@ function StyleControl({ config, value, fallback, resetLabel = "Reset", resetTo,
         }
       }
     ) : null,
-    config.control === "spacing" ? /* @__PURE__ */ jsx15(SpacingControl, { label: config.label, value: actual, onChange }) : null,
-    config.control === "corners" ? /* @__PURE__ */ jsx15(
+    config.control === "spacing" ? /* @__PURE__ */ jsx19(SpacingControl, { label: config.label, value: actual, onChange }) : null,
+    config.control === "corners" ? /* @__PURE__ */ jsx19(
       SpacingControl,
       {
         label: config.label,
@@ -1624,14 +2073,14 @@ function StyleControl({ config, value, fallback, resetLabel = "Reset", resetTo,
 }
 
 // src/inspector/GlobalFields.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function GlobalFields({ global, onChange }) {
   const settings = resolveEmailGlobal(global);
   const renderField = (field) => {
     const key = field.id;
     const current = String(settings[key]);
     const initial = String(DEFAULT_EMAIL_GLOBAL[key]);
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx20(
       StyleControl,
       {
         config: field,
@@ -1645,7 +2094,7 @@ function GlobalFields({ global, onChange }) {
       key
     );
   };
-  return /* @__PURE__ */ jsx16("div", { className: "ree-inspector ree-inspector-global", children: GLOBAL_FIELD_SECTIONS.map((section) => /* @__PURE__ */ jsx16(InspectorSection, { title: section.title, children: /* @__PURE__ */ jsx16(StyleFieldStack, { fields: section.fields, renderField }) }, section.title)) });
+  return /* @__PURE__ */ jsx20("div", { className: "ree-inspector ree-inspector-global", children: GLOBAL_FIELD_SECTIONS.map((section) => /* @__PURE__ */ jsx20(InspectorSection, { title: section.title, children: /* @__PURE__ */ jsx20(StyleFieldStack, { fields: section.fields, renderField }) }, section.title)) });
 }
 
 // src/constants/style-groups.ts
@@ -1656,11 +2105,44 @@ var STYLE_GROUPS = [
   { group: "decorations", label: "Decoration" }
 ];
 
+// src/inspector/utils.ts
+function styleReset(stored, restore, inherit) {
+  if (inherit) return { resetTo: "", show: stored !== "" };
+  return { resetTo: restore, show: stored !== "" && stored !== restore };
+}
+function inheritedStyleValue(id, global) {
+  if (!id.startsWith("typography.") && !id.startsWith("element.")) return;
+  switch (id.split(".")[1]) {
+    case "fontFamily":
+      return global.fontFamily;
+    case "fontSize":
+      return global.defaultFontSize;
+    case "fontWeight":
+      return global.fontWeight;
+    case "lineHeight":
+      return global.defaultLineHeight;
+    case "color":
+      return global.textColor;
+    case "textAlign":
+      return global.textAlign;
+    case "paragraphSpacing":
+      return global.paragraphSpacing;
+    case "listSpacing":
+      return global.listSpacing;
+    case "listIndent":
+      return global.listIndent;
+    case "linkColor":
+      return global.linkColor;
+    case "linkDecoration":
+      return global.linkDecoration;
+  }
+}
+
 // src/inspector/FieldControl.tsx
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 
 // src/inspector/HtmlCodeEditor.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect, useLayoutEffect as useLayoutEffect3, useRef as useRef3 } from "react";
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView2 } from "@codemirror/view";
 
@@ -1799,7 +2281,7 @@ function createHtmlEditorExtensions(placeholderText, onChange) {
 }
 
 // src/inspector/HtmlCodeEditor.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var LINE_HEIGHT2 = 22;
 function HtmlCodeEditor({
   value,
@@ -1807,11 +2289,13 @@ function HtmlCodeEditor({
   rows = 10,
   onChange
 }) {
-  const hostRef = useRef2(null);
-  const viewRef = useRef2(null);
-  const onChangeRef = useRef2(onChange);
-  onChangeRef.current = onChange;
-  useEffect2(() => {
+  const hostRef = useRef3(null);
+  const viewRef = useRef3(null);
+  const onChangeRef = useRef3(onChange);
+  useLayoutEffect3(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
     const parent = hostRef.current;
     if (!parent) return;
     const view = new EditorView2({
@@ -1829,7 +2313,7 @@ function HtmlCodeEditor({
       viewRef.current = null;
     };
   }, []);
-  useEffect2(() => {
+  useEffect(() => {
     const view = viewRef.current;
     if (!view) return;
     const current = view.state.doc.toString();
@@ -1839,7 +2323,7 @@ function HtmlCodeEditor({
     });
   }, [value]);
   const minHeight = Math.max(rows, 8) * LINE_HEIGHT2;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ref: hostRef,
@@ -1850,23 +2334,25 @@ function HtmlCodeEditor({
 }
 
 // src/inspector/VariablesDropdown.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function VariablesDropdown({ variables, onInsert }) {
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState7(false);
   if (variables.length === 0) return null;
-  return /* @__PURE__ */ jsxs12("div", { className: "ree-var-wrap", children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs14("div", { className: "ree-var-wrap", children: [
+    /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
         className: "ree-var-btn",
         onClick: () => setOpen((current) => !current),
         title: "Insert variable",
+        "aria-label": "Insert variable",
+        "aria-expanded": open,
         children: "{ }"
       }
     ),
-    open ? /* @__PURE__ */ jsx18("div", { className: "ree-var-menu", children: variables.map((variable) => /* @__PURE__ */ jsxs12(
+    open ? /* @__PURE__ */ jsx22("div", { className: "ree-var-menu", children: variables.map((variable) => /* @__PURE__ */ jsxs14(
       "button",
       {
         type: "button",
@@ -1876,8 +2362,8 @@ function VariablesDropdown({ variables, onInsert }) {
           setOpen(false);
         },
         children: [
-          /* @__PURE__ */ jsx18("span", { className: "ree-var-name", children: variable.name }),
-          variable.description ? /* @__PURE__ */ jsx18("span", { className: "ree-var-label", children: variable.description }) : null
+          /* @__PURE__ */ jsx22("span", { className: "ree-var-name", children: variable.name }),
+          variable.description ? /* @__PURE__ */ jsx22("span", { className: "ree-var-label", children: variable.description }) : null
         ]
       },
       variable.name
@@ -1886,15 +2372,15 @@ function VariablesDropdown({ variables, onInsert }) {
 }
 
 // src/inspector/FieldControl.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function FieldControl({
   field,
   value,
   variables,
   onChange
 }) {
-  var _a, _b, _c, _d, _e;
-  const ref = useRef3(null);
+  var _a, _b, _c, _d, _e, _f;
+  const ref = useRef4(null);
   const stringValue = value == null ? "" : String(value);
   const insertVariable = (token) => {
     var _a2, _b2;
@@ -1908,14 +2394,14 @@ function FieldControl({
     onChange(stringValue + token);
   };
   const handleChange = (event) => onChange(event.target.value);
-  const label = /* @__PURE__ */ jsxs13("div", { className: "ree-field-label", children: [
-    /* @__PURE__ */ jsx19("span", { children: field.label }),
-    field.type === "text" || field.type === "textarea" || field.type === "url" ? /* @__PURE__ */ jsx19(VariablesDropdown, { variables, onInsert: insertVariable }) : null
+  const label = /* @__PURE__ */ jsxs15("div", { className: "ree-field-label", children: [
+    /* @__PURE__ */ jsx23("span", { children: field.label }),
+    field.type === "text" || field.type === "textarea" || field.type === "url" ? /* @__PURE__ */ jsx23(VariablesDropdown, { variables, onInsert: insertVariable }) : null
   ] });
   if (field.type === "html") {
-    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
-      /* @__PURE__ */ jsx19("div", { className: "ree-field-label", children: /* @__PURE__ */ jsx19("span", { children: field.label }) }),
-      /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsxs15("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsx23("div", { className: "ree-field-label", children: /* @__PURE__ */ jsx23("span", { children: field.label }) }),
+      /* @__PURE__ */ jsx23(
         HtmlCodeEditor,
         {
           value: stringValue,
@@ -1927,9 +2413,9 @@ function FieldControl({
     ] });
   }
   if (field.type === "textarea") {
-    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "ree-field", children: [
       label,
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx23(
         "textarea",
         {
           ref: (element) => {
@@ -1945,11 +2431,12 @@ function FieldControl({
     ] });
   }
   if (field.type === "select") {
-    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
-      /* @__PURE__ */ jsx19("label", { className: "ree-field-label", children: field.label }),
-      /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsxs15("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsx23("label", { className: "ree-field-label", children: field.label }),
+      /* @__PURE__ */ jsx23(
         SelectControl,
         {
+          label: field.label,
           value: stringValue,
           options: (_b = field.options) != null ? _b : [],
           onChange
@@ -1958,32 +2445,31 @@ function FieldControl({
     ] });
   }
   if (field.type === "color") {
-    return /* @__PURE__ */ jsx19("div", { className: "ree-color-chip-row", children: /* @__PURE__ */ jsx19(ColorControl, { label: field.label, value: stringValue, onChange: (next) => onChange(next) }) });
+    return /* @__PURE__ */ jsx23("div", { className: "ree-color-chip-row", children: /* @__PURE__ */ jsx23(ColorControl, { label: field.label, value: stringValue, resetTo: String((_c = field.defaultValue) != null ? _c : ""), onChange: (next) => onChange(next) }) });
   }
   if (field.type === "number") {
     const amount = Number(value);
-    const max = (_c = field.max) != null ? _c : 200;
-    const shown = Math.min(max, Math.max((_d = field.min) != null ? _d : 0, Number.isFinite(amount) ? amount : (_e = field.min) != null ? _e : 0));
-    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "ree-field-label", children: [
-        /* @__PURE__ */ jsx19("span", { children: field.label }),
-        /* @__PURE__ */ jsxs13("span", { className: "ree-field-value", children: [
+    const max = (_d = field.max) != null ? _d : 200;
+    const shown = Math.min(max, Math.max((_e = field.min) != null ? _e : 0, Number.isFinite(amount) ? amount : (_f = field.min) != null ? _f : 0));
+    return /* @__PURE__ */ jsxs15("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "ree-field-label", children: [
+        /* @__PURE__ */ jsx23("span", { children: field.label }),
+        /* @__PURE__ */ jsxs15("span", { className: "ree-field-value", children: [
           shown,
           "px"
         ] })
       ] }),
-      /* @__PURE__ */ jsx19(RangeControl, { label: field.label, value: shown, min: field.min, max, step: field.step, onChange })
+      /* @__PURE__ */ jsx23(RangeControl, { label: field.label, value: shown, min: field.min, max, step: field.step, onChange })
     ] });
   }
-  return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+  return /* @__PURE__ */ jsxs15("div", { className: "ree-field", children: [
     label,
-    /* @__PURE__ */ jsx19(
-      "input",
+    /* @__PURE__ */ jsx23(
+      TextInput,
       {
         ref: (element) => {
           ref.current = element;
         },
-        className: "ree-input",
         "aria-label": field.label,
         min: field.min,
         max: field.max,
@@ -1998,7 +2484,7 @@ function FieldControl({
 }
 
 // src/inspector/InspectorFields.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function InspectorFields({
   block,
   definition,
@@ -2015,7 +2501,7 @@ function InspectorFields({
     const inherited = inheritedStyleValue(field.id, global);
     const restore = readStyleValue(definition.defaultStyle, field.id) || field.defaultValue || "";
     const reset = styleReset(stored, restore, inherited !== void 0);
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx24(
       StyleControl,
       {
         config: field,
@@ -2029,35 +2515,52 @@ function InspectorFields({
       field.id
     );
   };
-  const sections = STYLE_GROUPS.map((group) => __spreadProps(__spreadValues({}, group), {
-    fields: styleFields.filter((field) => field.group === group.group)
+  const sections = (_c = definition.inspectorSections) != null ? _c : STYLE_GROUPS.map((group) => ({
+    title: group.label,
+    fieldNames: group.group === "general" ? contentFields.map((field) => field.name) : [],
+    styleIds: styleFields.filter((field) => field.group === group.group).map((field) => field.id)
   }));
-  const general = sections.find((section) => section.group === "general");
-  const showGeneral = contentFields.length > 0 || ((_c = general == null ? void 0 : general.fields.length) != null ? _c : 0) > 0;
-  return /* @__PURE__ */ jsxs14("div", { className: "ree-inspector", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "ree-inspector-head", children: [
-      /* @__PURE__ */ jsx20(BlockIcon, { icon: definition.icon, className: "ree-inspector-icon" }),
-      /* @__PURE__ */ jsx20("span", { className: "ree-inspector-title", children: definition.title })
+  const resolveStyles = (ids = []) => ids.flatMap((id) => {
+    const field = styleFields.find((item) => item.id === id);
+    return field ? [field] : [];
+  });
+  return /* @__PURE__ */ jsxs16("div", { className: "ree-inspector", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "ree-inspector-head", children: [
+      /* @__PURE__ */ jsx24(BlockIcon, { icon: definition.icon, className: "ree-inspector-icon" }),
+      /* @__PURE__ */ jsx24("span", { className: "ree-inspector-title", children: definition.title })
     ] }),
-    showGeneral ? /* @__PURE__ */ jsxs14(InspectorSection, { title: "General", children: [
-      contentFields.map((field) => /* @__PURE__ */ jsx20(
-        FieldControl,
-        {
-          field,
-          value: block.fields[field.name],
-          variables,
-          onChange: (value) => onCommitField(block.id, field.name, value)
-        },
-        field.name
-      )),
-      general ? /* @__PURE__ */ jsx20(StyleFieldStack, { fields: general.fields, renderField: renderStyle }) : null
-    ] }) : null,
-    sections.filter((section) => section.group !== "general" && section.fields.length > 0).map((section) => /* @__PURE__ */ jsx20(InspectorSection, { title: section.label, children: /* @__PURE__ */ jsx20(StyleFieldStack, { fields: section.fields, renderField: renderStyle }) }, section.group))
+    sections.map((section) => {
+      var _a2;
+      const fields = ((_a2 = section.fieldNames) != null ? _a2 : []).flatMap((name) => {
+        const field = contentFields.find((item) => item.name === name);
+        return field ? [field] : [];
+      });
+      const styles = resolveStyles(section.styleIds);
+      const advanced = resolveStyles(section.advancedStyleIds);
+      if (!fields.length && !styles.length && !advanced.length) return null;
+      return /* @__PURE__ */ jsxs16(InspectorSection, { title: section.title, children: [
+        fields.map((field) => /* @__PURE__ */ jsx24(
+          FieldControl,
+          {
+            field,
+            value: block.fields[field.name],
+            variables,
+            onChange: (value) => onCommitField(block.id, field.name, value)
+          },
+          field.name
+        )),
+        /* @__PURE__ */ jsx24(StyleFieldStack, { fields: styles, renderField: renderStyle }),
+        advanced.length ? /* @__PURE__ */ jsxs16("details", { className: "ree-inspector-advanced", children: [
+          /* @__PURE__ */ jsx24("summary", { children: "Advanced block border" }),
+          /* @__PURE__ */ jsx24("div", { className: "ree-inspector-section-body", children: /* @__PURE__ */ jsx24(StyleFieldStack, { fields: advanced, renderField: renderStyle }) })
+        ] }) : null
+      ] }, `${block.type}-${section.title}`);
+    })
   ] });
 }
 
 // src/inspector/Inspector.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function Inspector({
   panel,
   global,
@@ -2070,9 +2573,9 @@ function Inspector({
   onCommitStyle
 }) {
   const showBlock = panel === "block" && block && definition;
-  return /* @__PURE__ */ jsxs15("aside", { className: "ree-col ree-col-right", children: [
-    /* @__PURE__ */ jsx21("div", { className: "ree-col-head ree-inspector-bar", children: /* @__PURE__ */ jsxs15("div", { className: "ree-inspector-tabs", role: "group", "aria-label": "Inspector panel", children: [
-      /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs17("aside", { className: "ree-col ree-col-right", children: [
+    /* @__PURE__ */ jsx25("div", { className: "ree-col-head ree-inspector-bar", children: /* @__PURE__ */ jsxs17("div", { className: "ree-inspector-tabs", role: "group", "aria-label": "Inspector panel", children: [
+      /* @__PURE__ */ jsx25(
         "button",
         {
           type: "button",
@@ -2082,19 +2585,18 @@ function Inspector({
           children: "GLOBAL"
         }
       ),
-      /* @__PURE__ */ jsx21(
+      block && definition ? /* @__PURE__ */ jsx25(
         "button",
         {
           type: "button",
           className: `ree-inspector-tab${showBlock ? " is-active" : ""}`,
           "aria-pressed": Boolean(showBlock),
-          disabled: !block || !definition,
           onClick: () => onPanelChange("block"),
           children: "BLOCK"
         }
-      )
+      ) : null
     ] }) }),
-    /* @__PURE__ */ jsx21("div", { className: "ree-inspector-scroll", children: showBlock ? /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx25("div", { className: "ree-inspector-scroll", children: showBlock ? /* @__PURE__ */ jsx25(
       InspectorFields,
       {
         block,
@@ -2104,7 +2606,7 @@ function Inspector({
         onCommitField,
         onCommitStyle
       }
-    ) : /* @__PURE__ */ jsx21(GlobalFields, { global, onChange: onCommitGlobal }) })
+    ) : /* @__PURE__ */ jsx25(GlobalFields, { global, onChange: onCommitGlobal }) })
   ] });
 }
 
@@ -2139,16 +2641,29 @@ function viewportWidth(device, global) {
 }
 
 // src/stage/canvas/CanvasBlock.tsx
+import { useId as useId5, useState as useState12 } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
+// src/document/block-style.ts
+function resolveBlockStyle(style, definition) {
+  let result = {};
+  if (!definition) return result;
+  for (const field of resolveBlockStyleFields(definition.styleFields, definition.exactStyleFields)) {
+    const value = readStyleValue(style, field.id);
+    if (value) result = writeStyleValue(result, field.id, value);
+  }
+  return result;
+}
+
 // src/render/context.ts
-function buildRenderContext(node, mode, global = DEFAULT_EMAIL_GLOBAL) {
-  var _a, _b;
+function buildRenderContext(node, mode, global = DEFAULT_EMAIL_GLOBAL, definition = getBlockDefinition(node.type)) {
+  var _a;
+  const block = __spreadProps(__spreadValues({}, node), { style: resolveBlockStyle(node.style, definition) });
   return {
-    block: node,
+    block,
     fields: (_a = node.fields) != null ? _a : {},
-    style: (_b = node.style) != null ? _b : {},
+    style: block.style,
     mode,
     global
   };
@@ -2363,31 +2878,38 @@ function renderBlockContent(node, definitions = DEFAULT_BLOCKS, mode = "email",
 }
 function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", global = DEFAULT_EMAIL_GLOBAL) {
   const definition = getBlockDefinition(node.type, definitions);
-  return definition ? definition.render(buildRenderContext(node, mode, global)) : `<!-- unknown block type: ${node.type} -->`;
+  return definition ? definition.render(buildRenderContext(node, mode, global, definition)) : `<!-- unknown block type: ${node.type} -->`;
 }
 function blockToHtml(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const normalizedOptions = normalizeBlockRenderOptions(options);
   const global = (_a = normalizedOptions.global) != null ? _a : DEFAULT_EMAIL_GLOBAL;
+  const style = resolveBlockStyle(node.style, getBlockDefinition(node.type, definitions));
   const inner = renderBlockContent(node, definitions, mode, __spreadProps(__spreadValues({}, normalizedOptions), {
     global
   }));
-  const height = cssPx((_c = (_b = node.style) == null ? void 0 : _b.dimension) == null ? void 0 : _c.height);
+  const height = cssPx((_b = style.dimension) == null ? void 0 : _b.height);
   const cellAttrs = height ? ` height="${esc(height)}" valign="top"` : "";
-  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;"><tr><td style="padding:${esc(cssSpacing((_e = (_d = node.style) == null ? void 0 : _d.dimension) == null ? void 0 : _e.margin))};"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;"><tr><td${cellAttrs} style="${blockCellCss(node.style, global)}">${inner}</td></tr></table></td></tr></table>`;
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;"><tr><td style="padding:${esc(cssSpacing((_c = style.dimension) == null ? void 0 : _c.margin))};"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;"><tr><td${cellAttrs} style="${blockCellCss(style, global)}">${inner}</td></tr></table></td></tr></table>`;
 }
 
 // src/stage/rich-text/RichText.tsx
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState8 } from "react";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect6, useRef as useRef9, useState as useState11 } from "react";
 import { createPortal } from "react-dom";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 // src/stage/rich-text/components/RichTextToolbar.tsx
-import { useEffect as useEffect4, useRef as useRef8, useState as useState7 } from "react";
+import { useEffect as useEffect3, useRef as useRef8, useState as useState10 } from "react";
+import { isAllowedUri as isAllowedUri2 } from "@tiptap/extension-link";
 import { useEditorState } from "@tiptap/react";
 
 // src/stage/rich-text/constants.ts
 var PARAGRAPH_SPACING_MAX = 48;
+var DEFAULT_LINK_TARGET = "_blank";
+var LINK_TARGETS = [
+  { value: "_self", label: "Current page" },
+  { value: "_blank", label: "New page" }
+];
 var LINE_HEIGHT_RANGE = { min: 1, max: 2.5, step: 0.05 };
 var FONT_SIZES = [
   "12px",
@@ -2403,17 +2925,6 @@ var FONT_SIZES = [
   "36px",
   "48px"
 ];
-var TEXT_COLORS = [
-  "#202223",
-  "#303030",
-  "#6d7175",
-  "#d72c0d",
-  "#b98900",
-  "#008060",
-  "#005bd3",
-  "#6d28d9",
-  "#ffffff"
-];
 var EMOJIS = [
   "\u{1F600}",
   "\u{1F601}",
@@ -2456,10 +2967,11 @@ var TEXT_ALIGNS2 = [
 ];
 
 // src/stage/rich-text/useAnchoredToolbar.ts
-import { useLayoutEffect, useRef as useRef4 } from "react";
-function useAnchoredToolbar(anchorRef, active) {
-  const toolbarRef = useRef4(null);
-  useLayoutEffect(() => {
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef5 } from "react";
+function useAnchoredToolbar(anchorRef, active, compact = false) {
+  const toolbarRef = useRef5(null);
+  useLayoutEffect4(() => {
+    var _a;
     if (!active) return;
     const anchor = anchorRef.current;
     const toolbar = toolbarRef.current;
@@ -2468,8 +2980,8 @@ function useAnchoredToolbar(anchorRef, active) {
     const ownerWindow = ownerDocument.defaultView;
     if (!ownerWindow) return;
     const place = () => {
-      var _a;
-      const block = (_a = anchor.closest(".ree-block")) != null ? _a : anchor;
+      var _a2;
+      const block = (_a2 = anchor.closest(".ree-block")) != null ? _a2 : anchor;
       const rect = block.getBoundingClientRect();
       const offscreen = rect.width === 0 || rect.height === 0 || rect.bottom < 0 || rect.top > ownerWindow.innerHeight;
       if (offscreen) {
@@ -2477,7 +2989,13 @@ function useAnchoredToolbar(anchorRef, active) {
         return;
       }
       const width = Math.min(rect.width, ownerWindow.innerWidth - 16);
-      toolbar.style.width = `${width}px`;
+      toolbar.style.width = compact ? "max-content" : `${width}px`;
+      toolbar.style.maxWidth = `${width}px`;
+      let previousBottom = null;
+      for (const group of toolbar.querySelectorAll(":scope > .ree-rte-group")) {
+        group.classList.toggle("is-row-start", previousBottom === null || group.offsetTop >= previousBottom);
+        previousBottom = group.offsetTop + group.offsetHeight;
+      }
       const height = toolbar.offsetHeight;
       let top = rect.top - height - 4;
       if (top < 8) {
@@ -2485,7 +3003,7 @@ function useAnchoredToolbar(anchorRef, active) {
         top = below + height <= ownerWindow.innerHeight - 8 ? below : 8;
       }
       let left = rect.left;
-      const maxLeft = Math.max(8, ownerWindow.innerWidth - width - 8);
+      const maxLeft = Math.max(8, ownerWindow.innerWidth - toolbar.offsetWidth - 8);
       if (left > maxLeft) left = maxLeft;
       if (left < 8) left = 8;
       toolbar.style.top = `${top}px`;
@@ -2495,6 +3013,8 @@ function useAnchoredToolbar(anchorRef, active) {
     place();
     const observer = new ResizeObserver(place);
     observer.observe(toolbar);
+    for (const group of toolbar.querySelectorAll(".ree-rte-group")) observer.observe(group);
+    observer.observe((_a = anchor.closest(".ree-block")) != null ? _a : anchor);
     ownerDocument.addEventListener("scroll", place, true);
     ownerWindow.addEventListener("resize", place);
     return () => {
@@ -2502,7 +3022,7 @@ function useAnchoredToolbar(anchorRef, active) {
       ownerDocument.removeEventListener("scroll", place, true);
       ownerWindow.removeEventListener("resize", place);
     };
-  }, [active, anchorRef]);
+  }, [active, anchorRef, compact]);
   return toolbarRef;
 }
 
@@ -2514,15 +3034,11 @@ function textAttribute(value) {
 function markWeight(value) {
   return value === FONT_WEIGHTS.normal || value === FONT_WEIGHTS.bold ? value : "";
 }
-function isVisuallyBold(markWeightValue, strong, inherited) {
-  if (strong || markWeightValue === FONT_WEIGHTS.bold) return true;
-  if (markWeightValue === FONT_WEIGHTS.normal) return false;
-  return inherited === FONT_WEIGHTS.bold;
-}
 function readToolbarState(editor) {
   var _a;
   const textStyle = editor.getAttributes("textStyle");
   const link = editor.getAttributes("link");
+  const list = editor.getAttributes(editor.isActive("orderedList") ? "orderedList" : "bulletList");
   return {
     bold: editor.isActive("bold"),
     italic: editor.isActive("italic"),
@@ -2536,87 +3052,85 @@ function readToolbarState(editor) {
     fontWeight: markWeight(textStyle.fontWeight),
     color: textAttribute(textStyle.color),
     linkHref: textAttribute(link.href),
+    linkTarget: textAttribute(link.target),
+    linkColor: textAttribute(link.color),
+    linkDecoration: textAttribute(link.decoration),
+    listSpacing: textAttribute(list.listSpacing),
+    listIndent: textAttribute(list.listIndent),
     spacing: textAttribute(editor.getAttributes("paragraph").spacing),
     lineHeight: textAttribute(editor.getAttributes("paragraph").lineHeight)
   };
 }
-function toggleVisualBold(editor, inherited) {
-  const state = readToolbarState(editor);
-  const visuallyBold = isVisuallyBold(state.fontWeight, state.bold, inherited);
-  const chain = editor.chain().focus().unsetBold();
-  if (visuallyBold) {
-    if (inherited === FONT_WEIGHTS.bold) {
-      chain.setMark("textStyle", { fontWeight: FONT_WEIGHTS.normal }).run();
-      return;
-    }
-    chain.setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run();
-    return;
-  }
-  if (inherited === FONT_WEIGHTS.bold) {
-    chain.setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run();
-    return;
-  }
-  chain.setMark("textStyle", { fontWeight: FONT_WEIGHTS.bold }).run();
-}
-function toColorInputValue(value, fallback) {
-  return /^#[0-9a-fA-F]{6}$/.test(value) ? value : fallback;
+
+// src/stage/rich-text/formatting.ts
+import { getAttributes, isMarkActive } from "@tiptap/react";
+function currentSelection(editor) {
+  const { selection, storedMarks } = editor.state;
+  return { anchor: selection.anchor, head: selection.head, storedMarks };
 }
-function focusSelection(editor, range) {
-  const chain = editor.chain().focus();
+function focusSelection(editor, range, focus = true) {
+  const chain = focus ? editor.chain().focus() : editor.chain();
   if (!range) return chain;
-  return chain.setTextSelection(range);
+  return chain.command(({ tr, commands }) => {
+    if (tr.selection.anchor !== range.anchor || tr.selection.head !== range.head) {
+      commands.setTextSelection({ from: range.anchor, to: range.head });
+    }
+    if (tr.selection.empty) tr.setStoredMarks(range.storedMarks);
+    return true;
+  });
 }
-function currentSelection(editor) {
-  const { from, to } = editor.state.selection;
-  return { from, to };
+function formatText(editor, command, range, scope = "text", focus = true) {
+  const chain = focusSelection(editor, range, focus);
+  return chain.command(({ tr, chain: scopedChain }) => {
+    const selection = tr.selection;
+    const pendingMarks = tr.storedMarks;
+    const bookmark = selection.getBookmark();
+    const scoped = scopedChain();
+    if (selection.empty && (scope === "paragraph" || tr.doc.textContent)) scoped.selectAll();
+    return command(scoped).command(({ tr: formatted }) => {
+      const marks = formatted.storedMarks;
+      formatted.setSelection(bookmark.map(formatted.mapping).resolve(formatted.doc));
+      if (!formatted.doc.textContent) formatted.setStoredMarks(scope === "paragraph" ? pendingMarks : marks);
+      return true;
+    }).run();
+  }).run();
 }
-
-// src/stage/rich-text/components/ColorMenu.tsx
-import { useRef as useRef5 } from "react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-function ColorMenu({ colors, value, fallback, onSelect, onClear }) {
-  const inputRef = useRef5(null);
-  return /* @__PURE__ */ jsxs16("div", { children: [
-    /* @__PURE__ */ jsx22("div", { className: "ree-rte-swatches", children: colors.map((color) => /* @__PURE__ */ jsx22(
-      "button",
-      {
-        type: "button",
-        className: `ree-rte-swatch${sameColor(color, value) ? " is-active" : ""}`,
-        style: { backgroundColor: color },
-        title: color,
-        "aria-label": color,
-        onClick: () => onSelect(color)
-      },
-      color
-    )) }),
-    /* @__PURE__ */ jsxs16("div", { className: "ree-rte-color-actions", children: [
-      /* @__PURE__ */ jsx22("button", { type: "button", className: "ree-btn", onClick: onClear, children: "Default" }),
-      /* @__PURE__ */ jsx22("button", { type: "button", className: "ree-btn", onClick: () => {
-        var _a;
-        return (_a = inputRef.current) == null ? void 0 : _a.click();
-      }, children: "Custom" }),
-      /* @__PURE__ */ jsx22(
-        "input",
-        {
-          ref: inputRef,
-          className: "ree-rte-color-input",
-          type: "color",
-          tabIndex: -1,
-          value: toColorInputValue(value, fallback),
-          onChange: (event) => onSelect(event.target.value)
-        }
-      )
-    ] })
-  ] });
+function isVisuallyBold(markWeight2, strong, inherited) {
+  if (strong || markWeight2 === "bold") return true;
+  if (markWeight2 === "normal") return false;
+  return inherited === "bold";
 }
-function sameColor(left, right) {
-  return left.toLowerCase() === right.toLowerCase();
+function toggleVisualBold(editor, inherited) {
+  return formatText(editor, (chain) => chain.command(({ state, chain: scopedChain }) => {
+    const weight = getAttributes(state, "textStyle").fontWeight;
+    let visuallyBold = isVisuallyBold(
+      weight === "normal" || weight === "bold" ? weight : "",
+      isMarkActive(state, "bold"),
+      inherited
+    );
+    if (!state.selection.empty) {
+      visuallyBold = true;
+      state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
+        var _a;
+        if (!node.isText) return;
+        const textWeight = (_a = node.marks.find((mark) => mark.type.name === "textStyle")) == null ? void 0 : _a.attrs.fontWeight;
+        if (!isVisuallyBold(
+          textWeight === "normal" || textWeight === "bold" ? textWeight : "",
+          node.marks.some((mark) => mark.type.name === "bold"),
+          inherited
+        )) visuallyBold = false;
+      });
+    }
+    const next = scopedChain().unsetBold();
+    const fontWeight = visuallyBold ? inherited === "bold" ? "normal" : null : inherited === "bold" ? null : "bold";
+    return next.setMark("textStyle", { fontWeight }).removeEmptyTextStyle().run();
+  }));
 }
 
 // src/stage/rich-text/components/EmojiMenu.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function EmojiMenu({ onPick }) {
-  return /* @__PURE__ */ jsx23("div", { className: "ree-rte-emoji-grid", children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26("div", { className: "ree-rte-emoji-grid", children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx26(
     "button",
     {
       type: "button",
@@ -2629,65 +3143,27 @@ function EmojiMenu({ onPick }) {
   )) });
 }
 
-// src/stage/rich-text/components/LinkPopover.tsx
-import { useEffect as useEffect3, useRef as useRef6 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-function LinkPopover({
-  url,
-  canUnlink,
-  onUrlChange,
-  onApply,
-  onUnlink
-}) {
-  const inputRef = useRef6(null);
-  useEffect3(() => {
-    var _a, _b;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    (_b = inputRef.current) == null ? void 0 : _b.select();
-  }, []);
-  return /* @__PURE__ */ jsxs17("div", { className: "ree-rte-link", children: [
-    /* @__PURE__ */ jsxs17("label", { className: "ree-field", children: [
-      /* @__PURE__ */ jsx24("span", { className: "ree-field-label", children: "Link URL" }),
-      /* @__PURE__ */ jsx24(
-        "input",
-        {
-          ref: inputRef,
-          className: "ree-input",
-          value: url,
-          placeholder: "https://",
-          onChange: (event) => onUrlChange(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter") {
-              event.preventDefault();
-              onApply();
-            }
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs17("div", { className: "ree-rte-link-actions", children: [
-      /* @__PURE__ */ jsx24("button", { type: "button", className: "ree-btn", disabled: !canUnlink, onClick: onUnlink, children: "Unlink" }),
-      /* @__PURE__ */ jsx24("button", { type: "button", className: "ree-btn ree-btn-primary", onClick: onApply, children: "Apply" })
-    ] })
-  ] });
-}
-
 // src/stage/rich-text/components/ToolbarButton.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ToolbarButton({
   title,
   active = false,
   disabled = false,
+  expanded,
+  controls,
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "button",
     {
       type: "button",
       className: `ree-tool-btn${active ? " is-active" : ""}`,
       title,
-      "aria-pressed": active,
+      "aria-pressed": expanded === void 0 ? active : void 0,
+      "aria-haspopup": expanded === void 0 ? void 0 : "dialog",
+      "aria-expanded": expanded,
+      "aria-controls": controls,
       disabled,
       onClick,
       children
@@ -2695,10 +3171,32 @@ function ToolbarButton({
   );
 }
 
+// src/stage/rich-text/components/TextColorControl.tsx
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+function TextColorControl({ value, fallback, onOpen, onChange, onReset }) {
+  const { id, open, anchorRef, panelRef, toggle, close } = useColorPicker(onOpen);
+  return /* @__PURE__ */ jsxs18("div", { className: "ree-rte-pop", ref: anchorRef, children: [
+    /* @__PURE__ */ jsx28(
+      ToolbarButton,
+      {
+        title: "Text color",
+        expanded: open,
+        controls: open ? id : void 0,
+        onClick: toggle,
+        children: /* @__PURE__ */ jsx28("span", { className: "ree-tool-color", style: { borderBottomColor: value || fallback }, children: "A" })
+      }
+    ),
+    open ? /* @__PURE__ */ jsx28(ColorPicker, { id, label: "Text color", value, fallback, panelRef, onChange, onReset, onClose: close }) : null
+  ] });
+}
+
+// src/stage/rich-text/components/ToolbarMenu.tsx
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef6, useState as useState8 } from "react";
+
 // src/stage/rich-text/components/ToolbarIcon.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function ToolbarIcon({ name }) {
-  return /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", children: iconPaths(name) });
+  return /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", children: iconPaths(name) });
 }
 function iconPaths(name) {
   const stroke = {
@@ -2709,73 +3207,83 @@ function iconPaths(name) {
     strokeLinejoin: "round"
   };
   switch (name) {
+    case "space-before":
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M4 4h16M4 15h16M4 20h10" }),
+        /* @__PURE__ */ jsx29("path", { d: "M12 7v5m-3-3 3 3 3-3" })
+      ] }));
+    case "line-height":
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M11 5h9M11 12h9M11 19h9" }),
+        /* @__PURE__ */ jsx29("path", { d: "M5 4v16M2 7l3-3 3 3M2 17l3 3 3-3" })
+      ] }));
     case "align-left":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 10h10" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 18h10" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 10h10" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 18h10" })
       ] }));
     case "align-center":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M7 10h10" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M7 18h10" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M7 10h10" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M7 18h10" })
       ] }));
     case "align-right":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M10 10h10" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M10 18h10" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M10 10h10" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M10 18h10" })
       ] }));
     case "align-justify":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 10h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
-        /* @__PURE__ */ jsx26("path", { d: "M4 18h16" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 10h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx29("path", { d: "M4 18h16" })
       ] }));
     case "list-bullet":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M10 7h10" }),
-        /* @__PURE__ */ jsx26("path", { d: "M10 12h10" }),
-        /* @__PURE__ */ jsx26("path", { d: "M10 17h10" }),
-        /* @__PURE__ */ jsx26("circle", { cx: "5", cy: "7", r: "1.2", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsx26("circle", { cx: "5", cy: "12", r: "1.2", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsx26("circle", { cx: "5", cy: "17", r: "1.2", fill: "currentColor", stroke: "none" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M10 7h10" }),
+        /* @__PURE__ */ jsx29("path", { d: "M10 12h10" }),
+        /* @__PURE__ */ jsx29("path", { d: "M10 17h10" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "5", cy: "7", r: "1.2", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "5", cy: "12", r: "1.2", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "5", cy: "17", r: "1.2", fill: "currentColor", stroke: "none" })
       ] }));
     case "list-ordered":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M11 7h9" }),
-        /* @__PURE__ */ jsx26("path", { d: "M11 12h9" }),
-        /* @__PURE__ */ jsx26("path", { d: "M11 17h9" }),
-        /* @__PURE__ */ jsx26("text", { x: "3", y: "9", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "1" }),
-        /* @__PURE__ */ jsx26("text", { x: "3", y: "14", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "2" }),
-        /* @__PURE__ */ jsx26("text", { x: "3", y: "19", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "3" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M11 7h9" }),
+        /* @__PURE__ */ jsx29("path", { d: "M11 12h9" }),
+        /* @__PURE__ */ jsx29("path", { d: "M11 17h9" }),
+        /* @__PURE__ */ jsx29("text", { x: "3", y: "9", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "1" }),
+        /* @__PURE__ */ jsx29("text", { x: "3", y: "14", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "2" }),
+        /* @__PURE__ */ jsx29("text", { x: "3", y: "19", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "3" })
       ] }));
     case "emoji":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "8" }),
-        /* @__PURE__ */ jsx26("path", { d: "M8.5 14.2a4.2 4.2 0 0 0 7 0" }),
-        /* @__PURE__ */ jsx26("path", { d: "M9 10h.01" }),
-        /* @__PURE__ */ jsx26("path", { d: "M15 10h.01" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("circle", { cx: "12", cy: "12", r: "8" }),
+        /* @__PURE__ */ jsx29("path", { d: "M8.5 14.2a4.2 4.2 0 0 0 7 0" }),
+        /* @__PURE__ */ jsx29("path", { d: "M9 10h.01" }),
+        /* @__PURE__ */ jsx29("path", { d: "M15 10h.01" })
       ] }));
     case "link":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M10 13a5 5 0 0 0 7.1.1l1.8-1.8a5 5 0 0 0-7.1-7.1L10.2 5.8" }),
-        /* @__PURE__ */ jsx26("path", { d: "M14 11a5 5 0 0 0-7.1-.1L5.1 12.7a5 5 0 0 0 7.1 7.1l1.6-1.6" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M10 13a5 5 0 0 0 7.1.1l1.8-1.8a5 5 0 0 0-7.1-7.1L10.2 5.8" }),
+        /* @__PURE__ */ jsx29("path", { d: "M14 11a5 5 0 0 0-7.1-.1L5.1 12.7a5 5 0 0 0 7.1 7.1l1.6-1.6" })
       ] }));
     case "unlink":
-      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
-        /* @__PURE__ */ jsx26("path", { d: "M9 17H7a5 5 0 0 1 0-10h2" }),
-        /* @__PURE__ */ jsx26("path", { d: "M15 7h2a5 5 0 0 1 0 10h-2" }),
-        /* @__PURE__ */ jsx26("path", { d: "M8 12h4" }),
-        /* @__PURE__ */ jsx26("path", { d: "m4 4 16 16" })
+      return /* @__PURE__ */ jsxs19("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx29("path", { d: "M9 17H7a5 5 0 0 1 0-10h2" }),
+        /* @__PURE__ */ jsx29("path", { d: "M15 7h2a5 5 0 0 1 0 10h-2" }),
+        /* @__PURE__ */ jsx29("path", { d: "M8 12h4" }),
+        /* @__PURE__ */ jsx29("path", { d: "m4 4 16 16" })
       ] }));
     case "chevron":
-      return /* @__PURE__ */ jsx26(
+      return /* @__PURE__ */ jsx29(
         "path",
         {
           d: "M7 10.2 12 15l5-4.8",
@@ -2790,8 +3298,7 @@ function iconPaths(name) {
 }
 
 // src/stage/rich-text/components/ToolbarMenu.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState6 } from "react";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function ToolbarMenu({
   label,
   title,
@@ -2804,9 +3311,9 @@ function ToolbarMenu({
   panelClassName,
   children
 }) {
-  const rootRef = useRef7(null);
-  const [up, setUp] = useState6(false);
-  useLayoutEffect2(() => {
+  const rootRef = useRef6(null);
+  const [up, setUp] = useState8(false);
+  useLayoutEffect5(() => {
     if (!open || !rootRef.current) return;
     const ownerWindow = rootRef.current.ownerDocument.defaultView;
     if (!ownerWindow) return;
@@ -2814,22 +3321,23 @@ function ToolbarMenu({
     setUp(rect.bottom + 260 > ownerWindow.innerHeight && rect.top > 260);
   }, [open]);
   const buttonClass = variant === "icon" ? `ree-tool-btn${active ? " is-active" : ""}${open ? " is-open" : ""}` : `ree-rte-select${open ? " is-open" : ""}`;
-  return /* @__PURE__ */ jsxs19("div", { className: `ree-rte-pop${up ? " is-up" : ""}`, ref: rootRef, children: [
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20("div", { className: `ree-rte-pop${up ? " is-up" : ""}`, ref: rootRef, children: [
+    /* @__PURE__ */ jsxs20(
       "button",
       {
         type: "button",
         className: buttonClass,
         title,
+        "aria-label": variant === "icon" ? title : void 0,
         "aria-expanded": open,
         onClick: onToggle,
         children: [
-          variant === "select" ? /* @__PURE__ */ jsx27("span", { className: "ree-rte-select-label", children: label }) : label,
-          caret ? /* @__PURE__ */ jsx27(ToolbarIcon, { name: "chevron" }) : null
+          variant === "select" ? /* @__PURE__ */ jsx30("span", { className: "ree-rte-select-label", children: label }) : label,
+          caret ? /* @__PURE__ */ jsx30(ToolbarIcon, { name: "chevron" }) : null
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx27(
+    open ? /* @__PURE__ */ jsx30(
       "div",
       {
         className: [
@@ -2843,8 +3351,151 @@ function ToolbarMenu({
   ] });
 }
 
+// src/stage/rich-text/components/TextFormatControls.tsx
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+function TextFormatControls({ editor, profile, state, inherited, menu, range, bold, toggleMenu, run, children }) {
+  const fontFamily = state.fontFamily || inherited.fontFamily;
+  const fontSize = state.fontSize || inherited.fontSize;
+  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsxs21("div", { className: "ree-rte-group", role: "group", "aria-label": "Font", children: [
+      /* @__PURE__ */ jsx31(
+        ToolbarMenu,
+        {
+          title: "Font",
+          open: menu === "font",
+          onToggle: () => toggleMenu("font"),
+          label: fontFamilyLabel(fontFamily),
+          children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsx31(
+            "button",
+            {
+              type: "button",
+              className: `ree-rte-option${fontFamily === font.value ? " is-active" : ""}`,
+              style: { fontFamily: font.value },
+              onClick: () => run(() => formatText(editor, (chain) => chain.setFontFamily(font.value), range)),
+              children: font.label
+            },
+            font.value
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx31(
+        ToolbarMenu,
+        {
+          title: "Font size",
+          open: menu === "size",
+          onToggle: () => toggleMenu("size"),
+          label: fontSize || "15px",
+          children: FONT_SIZES.map((size) => /* @__PURE__ */ jsx31(
+            "button",
+            {
+              type: "button",
+              className: `ree-rte-option${fontSize === size ? " is-active" : ""}`,
+              onClick: () => run(() => formatText(editor, (chain) => chain.setFontSize(size), range)),
+              children: size
+            },
+            size
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: "ree-rte-group", role: "group", "aria-label": "Text style", children: [
+      /* @__PURE__ */ jsx31(
+        ToolbarButton,
+        {
+          title: "Bold",
+          active: bold,
+          onClick: () => toggleVisualBold(editor, inherited.fontWeight),
+          children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-bold", children: "B" })
+        }
+      ),
+      /* @__PURE__ */ jsx31(
+        ToolbarButton,
+        {
+          title: "Italic",
+          active: state.italic,
+          onClick: () => formatText(editor, (chain) => chain.toggleItalic()),
+          children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-italic", children: "I" })
+        }
+      ),
+      /* @__PURE__ */ jsx31(
+        ToolbarButton,
+        {
+          title: "Underline",
+          active: state.underline,
+          onClick: () => formatText(editor, (chain) => chain.toggleUnderline()),
+          children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-underline", children: "U" })
+        }
+      ),
+      profile === "text" ? /* @__PURE__ */ jsx31(
+        ToolbarButton,
+        {
+          title: "Strikethrough",
+          active: state.strike,
+          onClick: () => formatText(editor, (chain) => chain.toggleStrike()),
+          children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-strike", children: "S" })
+        }
+      ) : null,
+      children
+    ] })
+  ] });
+}
+
+// src/stage/rich-text/list-formatting.ts
+import { TextSelection } from "@tiptap/pm/state";
+function isList(node) {
+  return node.type.name === "bulletList" || node.type.name === "orderedList";
+}
+function toggleTextList(editor, type) {
+  return editor.chain().focus().command(({ tr, chain }) => {
+    const selection = tr.selection;
+    const bookmark = selection.getBookmark();
+    const storedMarks = tr.storedMarks;
+    const from = selection.empty ? 0 : selection.from;
+    let to = selection.empty ? tr.doc.content.size : selection.to;
+    const last = tr.doc.lastChild;
+    if (selection.empty && tr.doc.childCount > 1 && (last == null ? void 0 : last.type.name) === "paragraph" && last.content.size === 0) {
+      const previous = tr.doc.child(tr.doc.childCount - 2);
+      if (isList(previous)) to -= last.nodeSize;
+    }
+    const lists = [];
+    const paragraphs = [];
+    tr.doc.nodesBetween(from, to, (node, pos) => {
+      if (isList(node)) {
+        lists.push({ node, from: pos, to: pos + node.nodeSize });
+        return false;
+      }
+      if (node.type.name === "paragraph") {
+        const previous = paragraphs[paragraphs.length - 1];
+        if ((previous == null ? void 0 : previous.to) === pos) previous.to = pos + node.nodeSize;
+        else paragraphs.push({ node, from: pos, to: pos + node.nodeSize });
+        return false;
+      }
+    });
+    const remove = lists.length > 0 && paragraphs.length === 0 && lists.every((item) => item.node.type.name === type);
+    if (remove) {
+      for (const list of lists.reverse()) {
+        const start = selection.empty ? list.from + 1 : Math.max(selection.from, list.from + 1);
+        const end = selection.empty ? list.to - 1 : Math.min(selection.to, list.to - 1);
+        tr.setSelection(TextSelection.between(tr.doc.resolve(start), tr.doc.resolve(end)));
+        chain().liftListItem("listItem").run();
+      }
+    } else {
+      const target = editor.schema.nodes[type];
+      for (const list of lists) {
+        if (list.node.type !== target) tr.setNodeMarkup(list.from, target, list.node.attrs);
+      }
+      for (const paragraph of paragraphs.reverse()) {
+        chain().setTextSelection({ from: paragraph.from + 1, to: paragraph.to - 1 }).wrapInList(type).run();
+      }
+    }
+    tr.setSelection(bookmark.map(tr.mapping).resolve(tr.doc));
+    if (tr.selection.empty) tr.setStoredMarks(storedMarks);
+    return true;
+  }).run();
+}
+
 // src/stage/rich-text/components/MetricSlider.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function MetricSlider({
   label,
   value,
@@ -2856,32 +3507,193 @@ function MetricSlider({
   onChange,
   onReset
 }) {
-  const progress = max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
-  return /* @__PURE__ */ jsxs20("div", { className: "ree-rte-metric", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "ree-rte-metric-label", children: [
-      /* @__PURE__ */ jsx28("span", { children: label }),
-      /* @__PURE__ */ jsx28("span", { children: display })
+  return /* @__PURE__ */ jsxs22("div", { className: "ree-rte-metric", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "ree-rte-metric-label", children: [
+      /* @__PURE__ */ jsx32("span", { children: label }),
+      /* @__PURE__ */ jsxs22("span", { className: "ree-rte-metric-meta", children: [
+        /* @__PURE__ */ jsx32("span", { children: display }),
+        /* @__PURE__ */ jsx32(ResetButton, { label: `Reset ${label.toLowerCase()}`, disabled: !overridden, onClick: onReset })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx28(
-      "input",
+    /* @__PURE__ */ jsx32(
+      RangeControl,
       {
-        "aria-label": label,
-        type: "range",
-        className: "ree-range",
-        style: { "--ree-range-progress": `${progress}%` },
+        label,
         value,
         min,
         max,
         step,
-        onChange: (event) => onChange(Number(event.target.value))
+        onChange
+      }
+    )
+  ] });
+}
+
+// src/stage/rich-text/components/ListControls.tsx
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+function ListControls({ editor, state, menu, range, inherited, onToggle }) {
+  const listType = state.orderedList ? "orderedList" : "bulletList";
+  const spacing = state.listSpacing || inherited.listSpacing || "4px";
+  const indent = state.listIndent || inherited.listIndent || "22px";
+  const update = (key, value) => {
+    focusSelection(editor, range).updateAttributes(listType, { [key]: value }).run();
+  };
+  return /* @__PURE__ */ jsxs23("div", { className: "ree-rte-group", role: "group", "aria-label": "Lists", children: [
+    /* @__PURE__ */ jsx33(
+      ToolbarButton,
+      {
+        title: "Bulleted list",
+        active: state.bulletList,
+        onClick: () => toggleTextList(editor, "bulletList"),
+        children: /* @__PURE__ */ jsx33(ToolbarIcon, { name: "list-bullet" })
+      }
+    ),
+    /* @__PURE__ */ jsx33(
+      ToolbarButton,
+      {
+        title: "Numbered list",
+        active: state.orderedList,
+        onClick: () => toggleTextList(editor, "orderedList"),
+        children: /* @__PURE__ */ jsx33(ToolbarIcon, { name: "list-ordered" })
       }
     ),
-    /* @__PURE__ */ jsx28("button", { type: "button", className: "ree-rte-option", disabled: !overridden, onClick: onReset, children: "Default" })
+    state.bulletList || state.orderedList ? /* @__PURE__ */ jsxs23(ToolbarMenu, { title: "List settings", label: "List", open: menu === "list", onToggle: () => onToggle("list"), children: [
+      /* @__PURE__ */ jsx33(
+        MetricSlider,
+        {
+          label: "List spacing",
+          value: readCssLength(spacing).amount,
+          min: 0,
+          max: 48,
+          step: 1,
+          display: spacing,
+          overridden: Boolean(state.listSpacing),
+          onChange: (value) => update("listSpacing", `${value}px`),
+          onReset: () => update("listSpacing", null)
+        }
+      ),
+      /* @__PURE__ */ jsx33(
+        MetricSlider,
+        {
+          label: "List indent",
+          value: readCssLength(indent).amount,
+          min: 0,
+          max: 64,
+          step: 1,
+          display: indent,
+          overridden: Boolean(state.listIndent),
+          onChange: (value) => update("listIndent", `${value}px`),
+          onReset: () => update("listIndent", null)
+        }
+      )
+    ] }) : null
   ] });
 }
 
+// src/stage/rich-text/components/LinkPopover.tsx
+import { useEffect as useEffect2, useId as useId3, useRef as useRef7, useState as useState9 } from "react";
+import { isAllowedUri } from "@tiptap/extension-link";
+
+// src/components/Button.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, { type = "button", variant = "default", className = "" } = _b, props = __objRest(_b, ["type", "variant", "className"]);
+  return /* @__PURE__ */ jsx34("button", __spreadProps(__spreadValues({}, props), { type, className: `ree-btn${variant === "default" ? "" : ` ree-btn-${variant}`}${className ? ` ${className}` : ""}` }));
+}
+
+// src/stage/rich-text/components/LinkPopover.tsx
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+function LinkPopover({
+  url,
+  color,
+  decoration,
+  target,
+  onColorChange,
+  onDecorationChange,
+  onTargetChange,
+  canUnlink,
+  onUrlChange,
+  onApply,
+  onClose
+}) {
+  const dialogRef = useRef7(null);
+  const titleId = useId3();
+  const errorId = useId3();
+  const [submitted, setSubmitted] = useState9(false);
+  const invalidUrl = Boolean(url.trim()) && !isAllowedUri(url.trim());
+  const save = () => {
+    setSubmitted(true);
+    if (!url.trim() && !canUnlink || invalidUrl) return;
+    onApply();
+  };
+  useEffect2(() => {
+    var _a;
+    const dialog = dialogRef.current;
+    dialog == null ? void 0 : dialog.showModal();
+    (_a = dialog == null ? void 0 : dialog.querySelector("input")) == null ? void 0 : _a.select();
+    return () => dialog == null ? void 0 : dialog.close();
+  }, []);
+  return /* @__PURE__ */ jsxs24(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: "ree-rte-link",
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      onCancel: (event) => {
+        event.preventDefault();
+        onClose();
+      },
+      onMouseDown: (event) => event.stopPropagation(),
+      onPointerDown: (event) => event.stopPropagation(),
+      onClick: (event) => {
+        event.stopPropagation();
+        if (event.target !== event.currentTarget) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx35("h2", { id: titleId, className: "ree-rte-link-title", children: "Edit link" }),
+        /* @__PURE__ */ jsxs24("div", { className: "ree-rte-link-fields", children: [
+          /* @__PURE__ */ jsxs24("label", { className: "ree-field", children: [
+            /* @__PURE__ */ jsx35("span", { className: "ree-field-label", children: "Link URL" }),
+            /* @__PURE__ */ jsx35(
+              TextInput,
+              {
+                value: url,
+                placeholder: "https://",
+                autoComplete: "off",
+                "aria-invalid": submitted && invalidUrl,
+                "aria-describedby": submitted && invalidUrl ? errorId : void 0,
+                onChange: (event) => onUrlChange(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  save();
+                }
+              }
+            )
+          ] }),
+          submitted && invalidUrl ? /* @__PURE__ */ jsx35("p", { id: errorId, className: "ree-rte-link-error", role: "alert", children: "Enter a valid link using an allowed protocol, such as https://." }) : null,
+          /* @__PURE__ */ jsx35(ColorControl, { value: color, label: "Link color", resetTo: DEFAULT_EMAIL_GLOBAL.linkColor, onChange: onColorChange }),
+          /* @__PURE__ */ jsx35(CheckboxControl, { label: "Underline", checked: decoration === "underline", onChange: (checked) => onDecorationChange(checked ? "underline" : "none") }),
+          /* @__PURE__ */ jsxs24("label", { className: "ree-field", children: [
+            /* @__PURE__ */ jsx35("span", { className: "ree-field-label", children: "Target" }),
+            /* @__PURE__ */ jsx35(SelectControl, { label: "Target", value: target, options: LINK_TARGETS, onChange: onTargetChange })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs24("div", { className: "ree-rte-link-actions", children: [
+          /* @__PURE__ */ jsx35(Button, { onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx35(Button, { variant: "solid", disabled: !url.trim() && !canUnlink, onClick: save, children: "Save" })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/stage/rich-text/components/ParagraphMetricMenus.tsx
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function clampAmount(value, fallback, min, max) {
   const parsed = readCssLength(value || fallback);
   return Math.min(max, Math.max(min, parsed.amount));
@@ -2893,6 +3705,7 @@ function formatStep(value, step) {
 }
 function ParagraphMetricMenus({
   menu,
+  showSpacing = true,
   spacing,
   lineHeight,
   inheritedSpacing,
@@ -2904,15 +3717,17 @@ function ParagraphMetricMenus({
   const spacingValue = clampAmount(spacing, inheritedSpacing, 0, PARAGRAPH_SPACING_MAX);
   const lineHeightValue = clampAmount(lineHeight, inheritedLineHeight, LINE_HEIGHT_RANGE.min, LINE_HEIGHT_RANGE.max);
   const lineHeightLabel = formatStep(lineHeightValue, LINE_HEIGHT_RANGE.step);
-  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs25(Fragment3, { children: [
+    showSpacing ? /* @__PURE__ */ jsx36(
       ToolbarMenu,
       {
-        title: "Paragraph spacing",
+        title: "Space before",
+        variant: "icon",
+        caret: false,
         open: menu === "spacing",
         onToggle: () => onToggle("spacing"),
-        label: spacing || inheritedSpacing,
-        children: /* @__PURE__ */ jsx29(
+        label: /* @__PURE__ */ jsx36(ToolbarIcon, { name: "space-before" }),
+        children: /* @__PURE__ */ jsx36(
           MetricSlider,
           {
             label: "Space before",
@@ -2927,15 +3742,17 @@ function ParagraphMetricMenus({
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsx29(
+    ) : null,
+    /* @__PURE__ */ jsx36(
       ToolbarMenu,
       {
         title: "Line height",
+        variant: "icon",
+        caret: false,
         open: menu === "lineHeight",
         onToggle: () => onToggle("lineHeight"),
-        label: lineHeight || inheritedLineHeight || lineHeightLabel,
-        children: /* @__PURE__ */ jsx29(
+        label: /* @__PURE__ */ jsx36(ToolbarIcon, { name: "line-height" }),
+        children: /* @__PURE__ */ jsx36(
           MetricSlider,
           {
             label: "Line height",
@@ -2965,20 +3782,20 @@ function restoreTemplateSpaces(value) {
 }
 
 // src/stage/rich-text/components/VariableMenu.tsx
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function VariableMenu({ variables, onInsert }) {
   if (variables.length === 0) {
-    return /* @__PURE__ */ jsx30("div", { className: "ree-personalization-empty", children: "No personalization fields" });
+    return null;
   }
-  return /* @__PURE__ */ jsx30("div", { className: "ree-rte-variables", children: variables.map((variable) => /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx37("div", { className: "ree-rte-variables", children: variables.map((variable) => /* @__PURE__ */ jsxs26(
     "button",
     {
       type: "button",
       className: "ree-var-item",
       onClick: () => onInsert(variable.name),
       children: [
-        /* @__PURE__ */ jsx30("span", { className: "ree-var-name", children: variable.name }),
-        variable.description ? /* @__PURE__ */ jsx30("span", { className: "ree-var-label", children: variable.description }) : null
+        /* @__PURE__ */ jsx37("span", { className: "ree-var-name", children: variable.name }),
+        variable.description ? /* @__PURE__ */ jsx37("span", { className: "ree-var-label", children: variable.description }) : null
       ]
     },
     variable.name
@@ -2986,8 +3803,10 @@ function VariableMenu({ variables, onInsert }) {
 }
 
 // src/stage/rich-text/components/RichTextToolbar.tsx
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function RichTextToolbar({
+  id,
+  profile,
   editor,
   variables,
   anchorRef,
@@ -2997,14 +3816,18 @@ function RichTextToolbar({
     editor,
     selector: ({ editor: current }) => current ? readToolbarState(current) : null
   });
-  const rootRef = useAnchoredToolbar(anchorRef, Boolean(state));
+  const rootRef = useAnchoredToolbar(anchorRef, Boolean(state), profile === "button");
   const linkRange = useRef8(null);
-  const markRange = useRef8(null);
-  const [menu, setMenu] = useState7(null);
-  const [linkUrl, setLinkUrl] = useState7("https://");
-  useEffect4(() => {
+  const colorRange = useRef8(null);
+  const [markRange, setMarkRange] = useState10(null);
+  const [menu, setMenu] = useState10(null);
+  const [linkUrl, setLinkUrl] = useState10("");
+  const [linkColor, setLinkColor] = useState10("");
+  const [linkDecoration, setLinkDecoration] = useState10("");
+  const [linkTarget, setLinkTarget] = useState10(DEFAULT_LINK_TARGET);
+  useEffect3(() => {
     const root = rootRef.current;
-    if (!menu || !root) return;
+    if (!menu || menu === "link" || !root) return;
     const ownerDocument = root.ownerDocument;
     const onPointerDown = (event) => {
       if (!root.contains(event.target)) setMenu(null);
@@ -3018,36 +3841,41 @@ function RichTextToolbar({
       ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
       ownerDocument.removeEventListener("keydown", onKeyDown);
     };
-  }, [menu]);
+  }, [menu, rootRef]);
   if (!state) return null;
-  const fontFamily = state.fontFamily || inherited.fontFamily;
-  const fontSize = state.fontSize || inherited.fontSize;
-  const color = state.color || inherited.color;
   const bold = isVisuallyBold(state.fontWeight, state.bold, inherited.fontWeight);
   const toggleMenu = (next) => {
     if (menu !== next) {
       const range = currentSelection(editor);
       if (next === "link") {
-        setLinkUrl(state.linkHref || "https://");
+        setLinkUrl(state.linkHref);
+        setLinkColor(state.linkColor || (state.linkHref ? inherited.linkColor : "") || DEFAULT_EMAIL_GLOBAL.linkColor);
+        setLinkDecoration(state.linkDecoration || (state.linkHref ? inherited.linkDecoration : "") || "underline");
+        setLinkTarget(state.linkTarget === "_self" ? "_self" : DEFAULT_LINK_TARGET);
         linkRange.current = range;
       }
-      if (next === "color" || next === "spacing" || next === "lineHeight") markRange.current = range;
+      setMarkRange(range);
     }
     setMenu((current) => current === next ? null : next);
   };
   const applyLink = () => {
     const href = linkUrl.trim();
-    if (!href) return;
+    if (!href) {
+      if (state.linkHref) unlinkSaved();
+      return;
+    }
+    if (!isAllowedUri2(href)) return;
+    const attrs = { href, color: linkColor, decoration: linkDecoration, target: linkTarget };
     const range = linkRange.current;
     const chain = focusSelection(editor, range);
-    if (range && range.from === range.to) {
+    if (range && range.anchor === range.head && !state.linkHref) {
       chain.insertContent({
         type: "text",
         text: href,
-        marks: [{ type: "link", attrs: { href } }]
+        marks: [{ type: "link", attrs }]
       }).run();
     } else {
-      chain.extendMarkRange("link").setLink({ href }).run();
+      chain.extendMarkRange("link").setLink({ href }).updateAttributes("link", attrs).run();
     }
     setMenu(null);
   };
@@ -3063,217 +3891,135 @@ function RichTextToolbar({
     command();
     setMenu(null);
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
+      id,
       className: "ree-rte-toolbar",
       ref: rootRef,
       onMouseDown: (event) => {
         const ownerWindow = event.currentTarget.ownerDocument.defaultView;
         const target = event.target;
-        if (ownerWindow && target instanceof ownerWindow.Element && target.closest("input, textarea")) return;
+        if (ownerWindow && target instanceof ownerWindow.Element && target.closest("input, textarea, select")) return;
         event.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "ree-rte-row", children: [
-          /* @__PURE__ */ jsx31(
-            ToolbarMenu,
-            {
-              title: "Font",
-              open: menu === "font",
-              onToggle: () => toggleMenu("font"),
-              label: fontFamilyLabel(fontFamily),
-              children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsx31(
-                "button",
-                {
-                  type: "button",
-                  className: `ree-rte-option${fontFamily === font.value ? " is-active" : ""}`,
-                  style: { fontFamily: font.value },
-                  onClick: () => run(() => editor.chain().focus().setFontFamily(font.value).run()),
-                  children: font.label
-                },
-                font.value
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx31(
-            ToolbarMenu,
-            {
-              title: "Font size",
-              open: menu === "size",
-              onToggle: () => toggleMenu("size"),
-              label: fontSize || "15px",
-              children: FONT_SIZES.map((size) => /* @__PURE__ */ jsx31(
-                "button",
-                {
-                  type: "button",
-                  className: `ree-rte-option${fontSize === size ? " is-active" : ""}`,
-                  onClick: () => run(() => editor.chain().focus().setFontSize(size).run()),
-                  children: size
+        /* @__PURE__ */ jsx38(
+          TextFormatControls,
+          {
+            editor,
+            profile,
+            state,
+            inherited,
+            menu,
+            range: markRange,
+            bold,
+            toggleMenu,
+            run,
+            children: /* @__PURE__ */ jsx38(
+              TextColorControl,
+              {
+                value: state.color,
+                fallback: inherited.color,
+                onOpen: () => {
+                  colorRange.current = currentSelection(editor);
+                  setMenu(null);
                 },
-                size
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
-            ToolbarButton,
-            {
-              title: "Bold",
-              active: bold,
-              onClick: () => toggleVisualBold(editor, inherited.fontWeight),
-              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-bold", children: "B" })
-            }
-          ),
-          /* @__PURE__ */ jsx31(
-            ToolbarButton,
-            {
-              title: "Italic",
-              active: state.italic,
-              onClick: () => editor.chain().focus().toggleItalic().run(),
-              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-italic", children: "I" })
-            }
-          ),
-          /* @__PURE__ */ jsx31(
-            ToolbarButton,
-            {
-              title: "Underline",
-              active: state.underline,
-              onClick: () => editor.chain().focus().toggleUnderline().run(),
-              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-underline", children: "U" })
-            }
-          ),
-          /* @__PURE__ */ jsx31(
-            ToolbarButton,
-            {
-              title: "Strikethrough",
-              active: state.strike,
-              onClick: () => editor.chain().focus().toggleStrike().run(),
-              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-strike", children: "S" })
-            }
-          ),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
-            ToolbarMenu,
-            {
-              title: "Emoji",
-              variant: "icon",
-              caret: false,
-              align: "end",
-              open: menu === "emoji",
-              onToggle: () => toggleMenu("emoji"),
-              label: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "emoji" }),
-              children: /* @__PURE__ */ jsx31(
-                EmojiMenu,
-                {
-                  onPick: (emoji) => run(() => editor.chain().focus().insertContent(emoji).run())
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "ree-rte-row", children: [
-          TEXT_ALIGNS2.map((align) => /* @__PURE__ */ jsx31(
+                onChange: (color) => formatText(editor, (chain) => chain.setColor(color), colorRange.current, "text", false),
+                onReset: () => formatText(editor, (chain) => chain.unsetColor(), colorRange.current, "text", false)
+              }
+            )
+          }
+        ),
+        profile !== "button" ? /* @__PURE__ */ jsxs27("div", { className: "ree-rte-group", role: "group", "aria-label": "Paragraph", children: [
+          TEXT_ALIGNS2.filter((align) => profile === "text" || align.value !== "justify").map((align) => /* @__PURE__ */ jsx38(
             ToolbarButton,
             {
               title: align.title,
               active: state.align === align.value,
-              onClick: () => editor.chain().focus().toggleTextAlign(align.value).run(),
-              children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: align.icon })
+              onClick: () => formatText(editor, (chain) => chain.toggleTextAlign(align.value), null, "paragraph"),
+              children: /* @__PURE__ */ jsx38(ToolbarIcon, { name: align.icon })
             },
             align.value
           )),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx38(
             ParagraphMetricMenus,
             {
               menu,
+              showSpacing: profile === "text",
               spacing: state.spacing,
               lineHeight: state.lineHeight,
               inheritedSpacing: inherited.paragraphSpacing,
               inheritedLineHeight: inherited.lineHeight,
               onToggle: toggleMenu,
               onSpacing: (value) => {
-                const chain = focusSelection(editor, markRange.current);
-                if (value) chain.updateAttributes("paragraph", { spacing: value }).run();
-                else chain.resetAttributes("paragraph", "spacing").run();
+                formatText(editor, (chain) => value ? chain.updateAttributes("paragraph", { spacing: value }) : chain.resetAttributes("paragraph", "spacing"), markRange, "paragraph");
               },
               onLineHeight: (value) => {
-                const chain = focusSelection(editor, markRange.current);
-                if (value) chain.updateAttributes("paragraph", { lineHeight: value }).run();
-                else chain.resetAttributes("paragraph", "lineHeight").run();
+                formatText(editor, (chain) => value ? chain.updateAttributes("paragraph", { lineHeight: value }) : chain.resetAttributes("paragraph", "lineHeight"), markRange, "paragraph");
               }
             }
-          ),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
-            ToolbarButton,
-            {
-              title: "Bulleted list",
-              active: state.bulletList,
-              onClick: () => editor.chain().focus().toggleBulletList().run(),
-              children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "list-bullet" })
-            }
-          ),
-          /* @__PURE__ */ jsx31(
+          )
+        ] }) : null,
+        profile === "text" ? /* @__PURE__ */ jsx38(
+          ListControls,
+          {
+            editor,
+            state,
+            menu,
+            range: markRange,
+            inherited,
+            onToggle: toggleMenu
+          }
+        ) : null,
+        profile !== "button" ? /* @__PURE__ */ jsxs27("div", { className: "ree-rte-group", role: "group", "aria-label": "Links", children: [
+          /* @__PURE__ */ jsx38(
             ToolbarButton,
             {
-              title: "Numbered list",
-              active: state.orderedList,
-              onClick: () => editor.chain().focus().toggleOrderedList().run(),
-              children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "list-ordered" })
+              title: "Link",
+              active: Boolean(state.linkHref),
+              onClick: () => toggleMenu("link"),
+              children: /* @__PURE__ */ jsx38(ToolbarIcon, { name: "link" })
             }
           ),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
-            ToolbarMenu,
+          menu === "link" ? /* @__PURE__ */ jsx38(
+            LinkPopover,
             {
-              title: "Text color",
-              variant: "icon",
-              align: "end",
-              open: menu === "color",
-              onToggle: () => toggleMenu("color"),
-              label: /* @__PURE__ */ jsx31("span", { className: "ree-tool-color", style: { borderBottomColor: color }, children: "A" }),
-              children: /* @__PURE__ */ jsx31(
-                ColorMenu,
-                {
-                  colors: TEXT_COLORS,
-                  value: state.color,
-                  fallback: inherited.color,
-                  onSelect: (color2) => run(() => focusSelection(editor, markRange.current).setColor(color2).run()),
-                  onClear: () => run(() => focusSelection(editor, markRange.current).unsetColor().run())
-                }
-              )
+              url: linkUrl,
+              color: linkColor,
+              decoration: linkDecoration,
+              target: linkTarget,
+              onColorChange: setLinkColor,
+              onDecorationChange: setLinkDecoration,
+              onTargetChange: setLinkTarget,
+              canUnlink: Boolean(state.linkHref),
+              onUrlChange: setLinkUrl,
+              onApply: applyLink,
+              onClose: () => setMenu(null)
             }
-          ),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
+          ) : null,
+          /* @__PURE__ */ jsx38(ToolbarButton, { title: "Unlink", disabled: !state.linkHref, onClick: unlinkSelection, children: /* @__PURE__ */ jsx38(ToolbarIcon, { name: "unlink" }) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs27("div", { className: "ree-rte-group", role: "group", "aria-label": "Insert", children: [
+          /* @__PURE__ */ jsx38(
             ToolbarMenu,
             {
-              title: "Link",
+              title: "Emoji",
               variant: "icon",
               caret: false,
-              active: Boolean(state.linkHref),
               align: "end",
-              open: menu === "link",
-              onToggle: () => toggleMenu("link"),
-              label: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "link" }),
-              panelClassName: "is-link",
-              children: /* @__PURE__ */ jsx31(
-                LinkPopover,
+              open: menu === "emoji",
+              onToggle: () => toggleMenu("emoji"),
+              label: /* @__PURE__ */ jsx38(ToolbarIcon, { name: "emoji" }),
+              children: /* @__PURE__ */ jsx38(
+                EmojiMenu,
                 {
-                  url: linkUrl,
-                  canUnlink: Boolean(state.linkHref),
-                  onUrlChange: setLinkUrl,
-                  onApply: applyLink,
-                  onUnlink: unlinkSaved
+                  onPick: (emoji) => run(() => editor.chain().focus().insertContent(emoji).run())
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx31(ToolbarButton, { title: "Unlink", disabled: !state.linkHref, onClick: unlinkSelection, children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "unlink" }) }),
-          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
-          /* @__PURE__ */ jsx31(
+          variables.length > 0 ? /* @__PURE__ */ jsx38(
             ToolbarMenu,
             {
               title: "Personalization",
@@ -3281,7 +4027,7 @@ function RichTextToolbar({
               open: menu === "variable",
               onToggle: () => toggleMenu("variable"),
               label: "Personalization",
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx38(
                 VariableMenu,
                 {
                   variables,
@@ -3289,7 +4035,7 @@ function RichTextToolbar({
                 }
               )
             }
-          )
+          ) : null
         ] })
       ]
     }
@@ -3331,8 +4077,76 @@ var FontWeight = Extension.create({
   }
 });
 
-// src/stage/rich-text/paragraph-style.ts
+// src/stage/rich-text/button-document.ts
+import { Node } from "@tiptap/react";
+import { Fragment as Fragment4, Slice } from "@tiptap/pm/model";
+import { Plugin } from "@tiptap/pm/state";
+var ButtonDocument = Node.create({
+  name: "doc",
+  topNode: true,
+  content: "paragraph",
+  addKeyboardShortcuts() {
+    return { Enter: () => true, "Shift-Enter": () => true };
+  },
+  addProseMirrorPlugins() {
+    return [new Plugin({
+      props: {
+        transformPasted(slice) {
+          const nodes = [];
+          slice.content.descendants((node) => {
+            if (node.isTextblock && nodes.length) nodes.push(node.type.schema.text(" "));
+            if (node.isText) nodes.push(node);
+          });
+          return new Slice(Fragment4.from(nodes), 0, 0);
+        }
+      }
+    })];
+  }
+});
+
+// src/stage/rich-text/content-attributes.ts
+import Link from "@tiptap/extension-link";
 import { Extension as Extension2 } from "@tiptap/react";
+var StyledLink = Link.extend({
+  addAttributes() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      color: {
+        default: null,
+        parseHTML: (element) => cssColor(element.style.color, "") || null,
+        renderHTML: (attrs) => attrs.color ? { style: `color:${cssColor(attrs.color)}` } : {}
+      },
+      decoration: {
+        default: null,
+        parseHTML: (element) => element.style.textDecoration === "none" ? "none" : element.style.textDecoration === "underline" ? "underline" : null,
+        renderHTML: (attrs) => attrs.decoration ? { style: `text-decoration:${attrs.decoration === "none" ? "none" : "underline"}` } : {}
+      }
+    });
+  }
+}).configure({ openOnClick: false, autolink: true });
+var ListStyle = Extension2.create({
+  name: "listStyle",
+  addGlobalAttributes() {
+    return [{
+      types: ["bulletList", "orderedList"],
+      attributes: {
+        listSpacing: {
+          default: null,
+          parseHTML: (element) => cssLength(element.style.marginTop, "") || null,
+          renderHTML: (attrs) => attrs.listSpacing ? { style: `margin:${cssLength(attrs.listSpacing)} 0` } : {}
+        },
+        listIndent: {
+          default: null,
+          parseHTML: (element) => cssLength(element.style.paddingLeft, "") || null,
+          renderHTML: (attrs) => attrs.listIndent ? { style: `padding-left:${cssLength(attrs.listIndent)}` } : {}
+        }
+      }
+    }];
+  }
+});
+
+// src/stage/rich-text/paragraph-style.ts
+import { Extension as Extension3 } from "@tiptap/react";
 function lengthAttribute(value) {
   const length = cssLength(value != null ? value : "", "");
   return length || null;
@@ -3341,7 +4155,7 @@ function lineHeightAttribute(value) {
   const lineHeight = cssLineHeight(value != null ? value : "", "");
   return lineHeight || null;
 }
-var ParagraphStyle = Extension2.create({
+var ParagraphStyle = Extension3.create({
   name: "paragraphStyle",
   addGlobalAttributes() {
     return [
@@ -3379,10 +4193,20 @@ var ParagraphStyle = Extension2.create({
 });
 
 // src/stage/rich-text/extensions.ts
-function createRichTextExtensions(placeholder2) {
+function createRichTextExtensions(placeholder2, profile = "text") {
+  const button = profile === "button";
+  const text = profile === "text";
   return [
     StarterKit.configure({
-      link: { openOnClick: false, autolink: true },
+      document: button ? false : void 0,
+      trailingNode: button ? false : void 0,
+      link: false,
+      bulletList: text ? void 0 : false,
+      orderedList: text ? void 0 : false,
+      listItem: text ? void 0 : false,
+      listKeymap: text ? void 0 : false,
+      strike: text ? void 0 : false,
+      hardBreak: button ? false : void 0,
       blockquote: false,
       code: false,
       codeBlock: false,
@@ -3391,17 +4215,17 @@ function createRichTextExtensions(placeholder2) {
     }),
     TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
     FontWeight,
-    ParagraphStyle,
-    TextAlign.configure({
+    ...button ? [ButtonDocument] : [ParagraphStyle, StyledLink, TextAlign.configure({
       types: ["paragraph"],
-      alignments: Object.values(TEXT_ALIGNS)
-    }),
+      alignments: text ? Object.values(TEXT_ALIGNS) : [TEXT_ALIGNS.left, TEXT_ALIGNS.center, TEXT_ALIGNS.right]
+    })],
+    ...text ? [ListStyle] : [],
     Placeholder.configure({ placeholder: placeholder2 })
   ];
 }
 
 // src/stage/rich-text/RichText.tsx
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var DEFAULT_INHERITED = {
   fontFamily: DEFAULT_EMAIL_GLOBAL.fontFamily,
   fontSize: "15px",
@@ -3412,36 +4236,41 @@ var DEFAULT_INHERITED = {
 };
 function RichText({
   initialHtml,
+  profile = "text",
   placeholder: placeholder2,
   variables,
   selected,
+  toolbarId,
+  toolbarCollapsed,
   inherited = DEFAULT_INHERITED,
   onCommit,
   onSelect
 }) {
   const rootRef = useRef9(null);
-  const [host, setHost] = useState8(null);
+  const [host, setHost] = useState11(null);
   const editor = useEditor({
-    extensions: createRichTextExtensions(placeholder2 != null ? placeholder2 : "Type something\u2026"),
+    extensions: createRichTextExtensions(placeholder2 != null ? placeholder2 : "Type something\u2026", profile),
     content: preserveTemplateSpaces(initialHtml),
     immediatelyRender: false,
     onUpdate: ({ editor: current }) => onCommit(restoreTemplateSpaces(current.getHTML()))
-  });
-  useLayoutEffect3(() => {
+  }, [profile]);
+  useLayoutEffect6(() => {
     var _a;
     const node = rootRef.current;
     const themeRoot = node == null ? void 0 : node.closest(".ree-root");
     setHost(themeRoot instanceof HTMLElement ? themeRoot : (_a = node == null ? void 0 : node.ownerDocument.body) != null ? _a : null);
   }, []);
-  useEffect5(() => {
-    if (!editor || restoreTemplateSpaces(editor.getHTML()) === initialHtml) return;
+  useEffect4(() => {
+    if (!editor || editor.isDestroyed || restoreTemplateSpaces(editor.getHTML()) === initialHtml) return;
     editor.commands.setContent(preserveTemplateSpaces(initialHtml), { emitUpdate: false });
   }, [editor, initialHtml]);
-  return /* @__PURE__ */ jsxs24("div", { className: "ree-rte", ref: rootRef, onClick: onSelect, children: [
-    selected && editor && host ? createPortal(
-      /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs28("div", { className: `ree-rte ree-rte-${profile}`, ref: rootRef, onClick: onSelect, children: [
+    selected && !toolbarCollapsed && editor && host ? createPortal(
+      /* @__PURE__ */ jsx39(
         RichTextToolbar,
         {
+          id: toolbarId,
+          profile,
           editor,
           variables,
           anchorRef: rootRef,
@@ -3450,12 +4279,44 @@ function RichText({
       ),
       host
     ) : null,
-    editor ? /* @__PURE__ */ jsx32(EditorContent, { editor }) : /* @__PURE__ */ jsx32("div", { className: "ree-rte-loading", children: "Loading editor\u2026" })
+    editor ? /* @__PURE__ */ jsx39(EditorContent, { editor }) : /* @__PURE__ */ jsx39("div", { className: "ree-rte-loading", children: "Loading editor\u2026" })
   ] });
 }
 
+// src/stage/canvas/components/InlineCanvas.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+function InlineCanvas(_a) {
+  var _b = _a, { block, global } = _b, props = __objRest(_b, ["block", "global"]);
+  var _a2, _b2, _c, _d;
+  const button = props.profile === "button";
+  const styles = buttonStyles(block, global);
+  const typography = button ? styles.text : typographyStyle(block.style, global);
+  const defaults = contentDefaults(block.style, global);
+  const editor = /* @__PURE__ */ jsx40(
+    RichText,
+    __spreadProps(__spreadValues({}, props), {
+      initialHtml: button ? buttonContent(block) : String((_a2 = block.fields.html) != null ? _a2 : ""),
+      inherited: {
+        fontFamily: String(typography.fontFamily),
+        fontSize: String(typography.fontSize),
+        color: String(typography.color),
+        fontWeight: resolvedFontWeight(button ? void 0 : (_c = (_b2 = block.style) == null ? void 0 : _b2.typography) == null ? void 0 : _c.fontWeight, global.fontWeight),
+        lineHeight: String((_d = typography.lineHeight) != null ? _d : ""),
+        paragraphSpacing: defaults.paragraph,
+        listSpacing: defaults.listSpacing,
+        listIndent: defaults.listIndent,
+        linkColor: defaults.linkColor,
+        linkDecoration: defaults.linkDecoration
+      }
+    })
+  );
+  if (!button) return editor;
+  const align = readAlign(styles.element.align);
+  return /* @__PURE__ */ jsx40("table", { role: "presentation", className: "ree-button-canvas-row", cellPadding: 0, cellSpacing: 0, children: /* @__PURE__ */ jsx40("tbody", { children: /* @__PURE__ */ jsx40("tr", { children: /* @__PURE__ */ jsx40("td", { align, children: /* @__PURE__ */ jsx40("table", { role: "presentation", align, cellPadding: 0, cellSpacing: 0, style: { width: styles.width, maxWidth: "100%" }, children: /* @__PURE__ */ jsx40("tbody", { children: /* @__PURE__ */ jsx40("tr", { children: /* @__PURE__ */ jsx40("td", { style: __spreadValues(__spreadValues({}, styles.box), styles.text), children: editor }) }) }) }) }) }) }) });
+}
+
 // src/stage/canvas/components/HtmlCanvas.tsx
-import { useCallback, useEffect as useEffect6, useRef as useRef10 } from "react";
+import { useCallback, useEffect as useEffect5, useRef as useRef10 } from "react";
 
 // src/render/head-styles.ts
 function extractHeadStyles(html) {
@@ -3469,7 +4330,7 @@ function extractHeadStyles(html) {
 }
 
 // src/stage/canvas/components/HtmlCanvas.tsx
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 function frameHtml(html) {
   const { html: body, styles } = extractHeadStyles(html);
   return `<!DOCTYPE html><html><head><style>html,body{margin:0;padding:0;}body{display:flow-root;}</style>${styles}</head><body>${body}</body></html>`;
@@ -3520,12 +4381,12 @@ function HtmlCanvas({ html, onSelect }) {
       window.cancelAnimationFrame(animationFrame);
     };
   }, []);
-  useEffect6(() => () => {
+  useEffect5(() => () => {
     var _a;
     return (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
   }, [hasHtmlTag, html]);
   if (!hasHtmlTag) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx41(
       "div",
       {
         className: "ree-html-canvas ree-html-canvas-text",
@@ -3534,14 +4395,14 @@ function HtmlCanvas({ html, onSelect }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref: containerRef,
       className: "ree-html-canvas",
       onClick: () => onSelect(),
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx41(
           "button",
           {
             type: "button",
@@ -3552,7 +4413,7 @@ function HtmlCanvas({ html, onSelect }) {
             onClick: () => onSelect()
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx41(
           "iframe",
           {
             ref: frameRef,
@@ -3569,6 +4430,88 @@ function HtmlCanvas({ html, onSelect }) {
   );
 }
 
+// src/stage/canvas/components/BlockActions.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+function BlockActions({
+  inlineEdit,
+  toolbarId,
+  toolbarCollapsed,
+  onToggleToolbar,
+  onDuplicate,
+  onRemove
+}) {
+  const tooltipId = useId4();
+  const toggleLabel = toolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar";
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: "ree-block-toolbar",
+      role: "group",
+      "aria-label": "Block actions",
+      onClick: (event) => event.stopPropagation(),
+      onPointerDown: (event) => event.stopPropagation(),
+      onMouseDown: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ jsxs30(
+          "button",
+          {
+            type: "button",
+            className: "ree-block-btn",
+            "aria-label": "Duplicate",
+            "aria-describedby": `${tooltipId}-duplicate`,
+            onClick: onDuplicate,
+            children: [
+              /* @__PURE__ */ jsxs30("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx42("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                /* @__PURE__ */ jsx42("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }),
+              /* @__PURE__ */ jsx42("span", { id: `${tooltipId}-duplicate`, className: "ree-block-tooltip", role: "tooltip", children: "Duplicate" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs30(
+          "button",
+          {
+            type: "button",
+            className: "ree-block-btn ree-danger",
+            "aria-label": "Delete",
+            "aria-describedby": `${tooltipId}-delete`,
+            onClick: onRemove,
+            children: [
+              /* @__PURE__ */ jsxs30("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx42("path", { d: "M3 6h18" }),
+                /* @__PURE__ */ jsx42("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+                /* @__PURE__ */ jsx42("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+              ] }),
+              /* @__PURE__ */ jsx42("span", { id: `${tooltipId}-delete`, className: "ree-block-tooltip", role: "tooltip", children: "Delete" })
+            ]
+          }
+        ),
+        inlineEdit ? /* @__PURE__ */ jsxs30(
+          "button",
+          {
+            type: "button",
+            className: "ree-block-btn",
+            "aria-label": toggleLabel,
+            "aria-describedby": `${tooltipId}-toolbar`,
+            "aria-controls": toolbarId,
+            "aria-expanded": !toolbarCollapsed,
+            onClick: onToggleToolbar,
+            children: [
+              /* @__PURE__ */ jsx42("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx42("path", { d: toolbarCollapsed ? "M8 3H3v5M3 3l7 7M16 21h5v-5m0 5-7-7" : "M3 8h5V3M8 8 2 2m19 14h-5v5m0-5 6 6" }) }),
+              /* @__PURE__ */ jsx42("span", { id: `${tooltipId}-toolbar`, className: "ree-block-tooltip", role: "tooltip", children: toggleLabel })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
 // src/stage/canvas/block-style.ts
 function canvasBlockStyle(block, global) {
   var _a, _b;
@@ -3577,9 +4520,9 @@ function canvasBlockStyle(block, global) {
 }
 
 // src/stage/canvas/CanvasBlock.tsx
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 function CanvasBlock({
-  block,
+  block: sourceBlock,
   global,
   definition,
   selected,
@@ -3587,14 +4530,15 @@ function CanvasBlock({
   variables,
   onSelect,
   onCommitField,
-  onMove,
   onDuplicate,
   onRemove
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b;
+  const block = __spreadProps(__spreadValues({}, sourceBlock), { style: resolveBlockStyle(sourceBlock.style, definition) });
+  const toolbarId = useId5();
+  const [toolbarCollapsed, setToolbarCollapsed] = useState12(false);
   const dragData = { kind: "canvas" };
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, data: dragData });
-  const stop = (event) => event.stopPropagation();
   const select = (event) => {
     event == null ? void 0 : event.stopPropagation();
     onSelect();
@@ -3605,7 +4549,7 @@ function CanvasBlock({
     global
   }) : "";
   const usesTemplatePreview = block.type === "html";
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ref: setNodeRef,
@@ -3623,7 +4567,8 @@ function CanvasBlock({
       ].filter(Boolean).join(" "),
       onClick: select,
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx43("span", { className: "ree-block-highlight", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx43(
           "button",
           __spreadProps(__spreadValues(__spreadValues({
             type: "button",
@@ -3631,124 +4576,70 @@ function CanvasBlock({
           }, attributes), listeners), {
             onClick: select,
             title: "Drag to reorder",
-            children: /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", children: [
-              /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "5", r: "1.6" }),
-              /* @__PURE__ */ jsx34("circle", { cx: "15", cy: "5", r: "1.6" }),
-              /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "12", r: "1.6" }),
-              /* @__PURE__ */ jsx34("circle", { cx: "15", cy: "12", r: "1.6" }),
-              /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "19", r: "1.6" }),
-              /* @__PURE__ */ jsx34("circle", { cx: "15", cy: "19", r: "1.6" })
+            children: /* @__PURE__ */ jsxs31("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx43("circle", { cx: "9", cy: "5", r: "1.6" }),
+              /* @__PURE__ */ jsx43("circle", { cx: "15", cy: "5", r: "1.6" }),
+              /* @__PURE__ */ jsx43("circle", { cx: "9", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsx43("circle", { cx: "15", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsx43("circle", { cx: "9", cy: "19", r: "1.6" }),
+              /* @__PURE__ */ jsx43("circle", { cx: "15", cy: "19", r: "1.6" })
             ] })
           })
         ),
-        selected ? /* @__PURE__ */ jsxs26(
-          "div",
+        selected ? /* @__PURE__ */ jsx43(
+          BlockActions,
           {
-            className: "ree-block-toolbar",
-            onClick: stop,
-            onPointerDown: stop,
-            onMouseDown: stop,
-            children: [
-              /* @__PURE__ */ jsx34(
-                "button",
-                {
-                  type: "button",
-                  className: "ree-block-btn",
-                  title: "Move up",
-                  onClick: () => onMove(-1),
-                  children: /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("path", { d: "m18 15-6-6-6 6" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx34(
-                "button",
-                {
-                  type: "button",
-                  className: "ree-block-btn",
-                  title: "Move down",
-                  onClick: () => onMove(1),
-                  children: /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("path", { d: "m6 9 6 6 6-6" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx34(
-                "button",
-                {
-                  type: "button",
-                  className: "ree-block-btn",
-                  title: "Duplicate",
-                  onClick: onDuplicate,
-                  children: /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx34("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-                    /* @__PURE__ */ jsx34("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx34(
-                "button",
-                {
-                  type: "button",
-                  className: "ree-block-btn ree-danger",
-                  title: "Delete",
-                  onClick: onRemove,
-                  children: /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx34("path", { d: "M3 6h18" }),
-                    /* @__PURE__ */ jsx34("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
-                    /* @__PURE__ */ jsx34("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
-                  ] })
-                }
-              )
-            ]
+            inlineEdit: Boolean(definition == null ? void 0 : definition.inlineEdit),
+            toolbarId,
+            toolbarCollapsed,
+            onToggleToolbar: () => setToolbarCollapsed((collapsed) => !collapsed),
+            onDuplicate,
+            onRemove
           }
         ) : null,
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx43(
           "div",
           {
             className: `ree-block-content${(definition == null ? void 0 : definition.inlineEdit) ? " is-inline" : ""}`,
             style: canvasBlockStyle(block, global),
-            children: (definition == null ? void 0 : definition.inlineEdit) ? /* @__PURE__ */ jsx34(
-              RichText,
+            children: (definition == null ? void 0 : definition.inlineEdit) ? /* @__PURE__ */ jsx43(
+              InlineCanvas,
               {
-                initialHtml: String((_c = block.fields.html) != null ? _c : ""),
+                block,
+                global,
+                profile: definition.inlineEditProfile,
                 variables,
                 selected,
-                inherited: {
-                  fontFamily: String(typographyStyle(block.style, global).fontFamily),
-                  fontSize: String(typographyStyle(block.style, global).fontSize),
-                  color: ((_e = (_d = block.style) == null ? void 0 : _d.typography) == null ? void 0 : _e.color) || global.textColor,
-                  fontWeight: resolvedFontWeight(
-                    (_g = (_f = block.style) == null ? void 0 : _f.typography) == null ? void 0 : _g.fontWeight,
-                    global.fontWeight
-                  ),
-                  lineHeight: String((_h = typographyStyle(block.style, global).lineHeight) != null ? _h : ""),
-                  paragraphSpacing: contentDefaults(block.style, global).paragraph
-                },
+                toolbarId,
+                toolbarCollapsed,
                 onSelect,
                 onCommit: (html) => onCommitField(block.id, "html", html)
               }
-            ) : usesTemplatePreview ? /* @__PURE__ */ jsx34(
+            ) : usesTemplatePreview ? /* @__PURE__ */ jsx43(
               HtmlCanvas,
               {
                 html: renderedHtml,
                 onSelect: select
               }
-            ) : /* @__PURE__ */ jsx34(
+            ) : /* @__PURE__ */ jsx43(
               "div",
               {
                 className: "ree-block-static",
                 dangerouslySetInnerHTML: {
-                  __html: definition ? definition.render(buildRenderContext(block, "canvas", global)) : `<!-- ${block.type} -->`
+                  __html: definition ? definition.render(buildRenderContext(block, "canvas", global, definition)) : `<!-- ${block.type} -->`
                 }
               }
             )
           }
         ),
-        definition ? /* @__PURE__ */ jsx34("span", { className: "ree-block-badge", children: definition.title }) : null
+        definition ? /* @__PURE__ */ jsx43("span", { className: "ree-block-badge", children: definition.title }) : null
       ]
     }
   );
 }
 
 // src/stage/canvas/Canvas.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Canvas({
   blocks,
   global,
@@ -3760,7 +4651,6 @@ function Canvas({
   device,
   onSelect,
   onCommitField,
-  onMove,
   onDuplicate,
   onRemove
 }) {
@@ -3768,7 +4658,7 @@ function Canvas({
     id: CANVAS_DROP_ID,
     data: { kind: "canvas" }
   });
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       ref: setNodeRef,
@@ -3785,7 +4675,7 @@ function Canvas({
           active.blur();
         }
       },
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx44(
         "div",
         {
           className: "ree-email-viewport",
@@ -3793,52 +4683,57 @@ function Canvas({
             width: viewportWidth(device, global),
             fontSize: global.defaultFontSize,
             fontFamily: global.fontFamily,
-            backgroundColor: global.backgroundColor,
             marginLeft: global.contentAlign === "left" ? 0 : "auto",
             marginRight: global.contentAlign === "right" ? 0 : "auto"
           },
-          children: /* @__PURE__ */ jsx35("div", { className: "ree-email-outer", style: { padding: global.outerPadding }, children: /* @__PURE__ */ jsx35(
+          children: /* @__PURE__ */ jsx44(
             "div",
             {
-              className: "ree-email-surface",
-              style: __spreadProps(__spreadValues({}, surfaceStyle(global)), {
-                maxWidth: global.contentWidth,
-                marginLeft: global.contentAlign === "left" ? 0 : "auto",
-                marginRight: global.contentAlign === "right" ? 0 : "auto"
-              }),
-              children: /* @__PURE__ */ jsx35(
+              className: "ree-email-outer",
+              style: { padding: global.outerPadding, backgroundColor: global.backgroundColor },
+              children: /* @__PURE__ */ jsx44(
                 "div",
                 {
-                  className: "ree-canvas-inner",
-                  style: { "--ree-block-gap": global.blockGap },
-                  children: blocks.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "ree-canvas-empty", children: "Drag a block here or click one to get started" }) : /* @__PURE__ */ jsx35(
-                    SortableContext,
+                  className: "ree-email-surface",
+                  style: __spreadProps(__spreadValues({}, surfaceStyle(global)), {
+                    maxWidth: global.contentWidth,
+                    marginLeft: global.contentAlign === "left" ? 0 : "auto",
+                    marginRight: global.contentAlign === "right" ? 0 : "auto"
+                  }),
+                  children: /* @__PURE__ */ jsx44(
+                    "div",
                     {
-                      items: blocks.map((block) => block.id),
-                      strategy: verticalListSortingStrategy,
-                      children: blocks.map((block) => /* @__PURE__ */ jsx35(
-                        CanvasBlock,
+                      className: "ree-canvas-inner",
+                      style: { "--ree-block-gap": global.blockGap },
+                      children: blocks.length === 0 ? /* @__PURE__ */ jsx44("div", { className: "ree-canvas-empty", children: "Drag a block here or click one to get started" }) : /* @__PURE__ */ jsx44(
+                        SortableContext,
                         {
-                          block,
-                          global,
-                          definition: getBlockDefinition(block.type, definitions),
-                          selected: block.id === selectedId,
-                          dropEdge: dropTargetId === block.id ? dropEdge : null,
-                          variables,
-                          onSelect: () => onSelect(block.id),
-                          onCommitField,
-                          onMove: (direction) => onMove(block.id, direction),
-                          onDuplicate: () => onDuplicate(block.id),
-                          onRemove: () => onRemove(block.id)
-                        },
-                        block.id
-                      ))
+                          items: blocks.map((block) => block.id),
+                          strategy: verticalListSortingStrategy,
+                          children: blocks.map((block) => /* @__PURE__ */ jsx44(
+                            CanvasBlock,
+                            {
+                              block,
+                              global,
+                              definition: getBlockDefinition(block.type, definitions),
+                              selected: block.id === selectedId,
+                              dropEdge: dropTargetId === block.id ? dropEdge : null,
+                              variables,
+                              onSelect: () => onSelect(block.id),
+                              onCommitField,
+                              onDuplicate: () => onDuplicate(block.id),
+                              onRemove: () => onRemove(block.id)
+                            },
+                            block.id
+                          ))
+                        }
+                      )
                     }
                   )
                 }
               )
             }
-          ) })
+          )
         }
       )
     }
@@ -3846,7 +4741,7 @@ function Canvas({
 }
 
 // src/stage/preview/Preview.tsx
-import { useMemo as useMemo2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef11 } from "react";
 
 // src/render/document-html.ts
 function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
@@ -3854,14 +4749,14 @@ function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
   const global = source.global;
   const baseCss = emailBaseCss(global);
   const rendered = source.blocks.map((node, index) => {
-    var _a, _b;
-    const blockData = __spreadValues(__spreadValues({}, (_a = options.templateData) != null ? _a : {}), node.defaultData);
+    var _a;
+    const blockData = __spreadValues(__spreadValues({}, options.templateData), node.defaultData);
     const block = blockToHtml(node, definitions, "email", {
       resolveHtmlTemplate: options.resolveHtmlTemplates,
       global,
       variables: options.variables,
       templateData: mergeTemplateData(
-        (_b = options.variables) != null ? _b : [],
+        (_a = options.variables) != null ? _a : [],
         Object.keys(blockData).length > 0 ? blockData : void 0
       )
     });
@@ -3898,8 +4793,10 @@ function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
 }
 
 // src/stage/preview/Preview.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function Preview({ document, definitions, variables, device }) {
+  const frameRef = useRef11(null);
+  const cleanupRef = useRef11();
   const html = useMemo2(
     () => documentToHtml(document, definitions, {
       resolveHtmlTemplates: true,
@@ -3907,34 +4804,73 @@ function Preview({ document, definitions, variables, device }) {
     }),
     [document, definitions, variables]
   );
-  return /* @__PURE__ */ jsx36("div", { className: "ree-preview-stage", children: /* @__PURE__ */ jsx36(
-    "iframe",
+  const observeContent = useCallback2(() => {
+    var _a;
+    (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+    const frame = frameRef.current;
+    const frameDocument = frame == null ? void 0 : frame.contentDocument;
+    const frameWindow = frameDocument == null ? void 0 : frameDocument.defaultView;
+    if (!frame || !(frameDocument == null ? void 0 : frameDocument.body) || !frameWindow) return;
+    let animationFrame = 0;
+    const fit = () => {
+      frame.style.height = `${frameDocument.body.getBoundingClientRect().height}px`;
+    };
+    const scheduleFit = () => {
+      frameWindow.cancelAnimationFrame(animationFrame);
+      animationFrame = frameWindow.requestAnimationFrame(fit);
+    };
+    const observer = new frameWindow.ResizeObserver(scheduleFit);
+    observer.observe(frameDocument.body);
+    frameDocument.addEventListener("load", scheduleFit, true);
+    fit();
+    cleanupRef.current = () => {
+      observer.disconnect();
+      frameDocument.removeEventListener("load", scheduleFit, true);
+      frameWindow.cancelAnimationFrame(animationFrame);
+    };
+  }, []);
+  useEffect6(() => () => {
+    var _a;
+    return (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+  }, [html]);
+  return /* @__PURE__ */ jsx45("div", { className: "ree-preview-stage", children: /* @__PURE__ */ jsx45(
+    "div",
     {
-      className: "ree-preview-frame",
-      title: "Email preview",
-      srcDoc: html,
+      className: "ree-email-viewport",
       style: {
         width: viewportWidth(device, document.global),
-        fontSize: document.global.defaultFontSize,
         marginLeft: document.global.contentAlign === "left" ? 0 : "auto",
-        marginRight: document.global.contentAlign === "right" ? 0 : "auto",
-        backgroundColor: document.global.backgroundColor || "#ffffff"
-      }
+        marginRight: document.global.contentAlign === "right" ? 0 : "auto"
+      },
+      children: /* @__PURE__ */ jsx45(
+        "iframe",
+        {
+          ref: frameRef,
+          className: "ree-preview-frame",
+          title: "Email preview",
+          srcDoc: html,
+          onLoad: observeContent,
+          style: {
+            fontSize: document.global.defaultFontSize,
+            backgroundColor: document.global.backgroundColor || "#ffffff"
+          }
+        }
+      )
     }
   ) });
 }
 
 // src/stage/StageHeader.tsx
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 function StageHeader({
   viewMode,
   device,
   onViewModeChange,
   onDeviceChange
 }) {
-  return /* @__PURE__ */ jsxs27("div", { className: "ree-col-head ree-stage-head", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "ree-segment", role: "group", "aria-label": "Editor mode", children: [
-      /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs32("div", { className: "ree-col-head ree-stage-head", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "ree-segment", role: "group", "aria-label": "Editor mode", children: [
+      /* @__PURE__ */ jsx46(
         "button",
         {
           type: "button",
@@ -3943,14 +4879,14 @@ function StageHeader({
           "aria-label": "Edit",
           title: "Edit",
           onClick: () => onViewModeChange("edit"),
-          children: /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx37("path", { d: "M12 20h9" }),
-            /* @__PURE__ */ jsx37("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Z" })
+          children: /* @__PURE__ */ jsxs32("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx46("path", { d: "M12 20h9" }),
+            /* @__PURE__ */ jsx46("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Z" })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx37("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx46("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx46(
         "button",
         {
           type: "button",
@@ -3959,15 +4895,15 @@ function StageHeader({
           "aria-label": "Preview",
           title: "Preview",
           onClick: () => onViewModeChange("preview"),
-          children: /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx37("path", { d: "M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" }),
-            /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "2.5" })
+          children: /* @__PURE__ */ jsxs32("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx46("path", { d: "M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" }),
+            /* @__PURE__ */ jsx46("circle", { cx: "12", cy: "12", r: "2.5" })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "ree-segment", role: "group", "aria-label": "Canvas device", children: [
-      /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsxs32("div", { className: "ree-segment", role: "group", "aria-label": "Canvas device", children: [
+      /* @__PURE__ */ jsx46(
         "button",
         {
           type: "button",
@@ -3976,15 +4912,15 @@ function StageHeader({
           "aria-label": "Desktop",
           title: "Desktop",
           onClick: () => onDeviceChange("desktop"),
-          children: /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx37("rect", { x: "3", y: "4", width: "18", height: "12", rx: "1.5" }),
-            /* @__PURE__ */ jsx37("path", { d: "M8 20h8" }),
-            /* @__PURE__ */ jsx37("path", { d: "M12 16v4" })
+          children: /* @__PURE__ */ jsxs32("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx46("rect", { x: "3", y: "4", width: "18", height: "12", rx: "1.5" }),
+            /* @__PURE__ */ jsx46("path", { d: "M8 20h8" }),
+            /* @__PURE__ */ jsx46("path", { d: "M12 16v4" })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx37("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx46("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx46(
         "button",
         {
           type: "button",
@@ -3993,9 +4929,9 @@ function StageHeader({
           "aria-label": "Mobile",
           title: "Mobile",
           onClick: () => onDeviceChange("mobile"),
-          children: /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx37("rect", { x: "7", y: "2.5", width: "10", height: "19", rx: "2" }),
-            /* @__PURE__ */ jsx37("path", { d: "M11 18.5h2" })
+          children: /* @__PURE__ */ jsxs32("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx46("rect", { x: "7", y: "2.5", width: "10", height: "19", rx: "2" }),
+            /* @__PURE__ */ jsx46("path", { d: "M11 18.5h2" })
           ] })
         }
       )
@@ -4004,7 +4940,7 @@ function StageHeader({
 }
 
 // src/stage/Stage.tsx
-import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
 function Stage({
   session,
   viewMode,
@@ -4014,8 +4950,8 @@ function Stage({
   onSelectBlock
 }) {
   const { targetId, dropEdge } = useEditorDragState();
-  return /* @__PURE__ */ jsxs28("div", { className: "ree-col ree-col-center", children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs33("div", { className: "ree-col ree-col-center", children: [
+    /* @__PURE__ */ jsx47(
       StageHeader,
       {
         viewMode,
@@ -4024,7 +4960,7 @@ function Stage({
         onDeviceChange
       }
     ),
-    viewMode === "edit" ? /* @__PURE__ */ jsx38("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx38(
+    viewMode === "edit" ? /* @__PURE__ */ jsx47("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx47(
       Canvas,
       {
         blocks: session.document.blocks,
@@ -4037,11 +4973,10 @@ function Stage({
         device,
         onSelect: onSelectBlock,
         onCommitField: session.updateField,
-        onMove: session.moveBlock,
         onDuplicate: session.duplicateBlock,
         onRemove: session.removeBlock
       }
-    ) }) : /* @__PURE__ */ jsx38("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx38(
+    ) }) : /* @__PURE__ */ jsx47("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx47(
       Preview,
       {
         document: session.document,
@@ -4059,17 +4994,17 @@ var EMPTY_VARIABLES = [];
 var PERSONALIZATION_HINT = "Personalization fields will appear blank if no data is available.";
 
 // src/shell/SubjectBar.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 
 // src/shell/PersonalizationMenu.tsx
-import { useEffect as useEffect7, useRef as useRef11, useState as useState9 } from "react";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef12, useState as useState13 } from "react";
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
 function PersonalizationMenu({
   variables,
   onInsert
 }) {
-  const [open, setOpen] = useState9(false);
-  const rootRef = useRef11(null);
+  const [open, setOpen] = useState13(false);
+  const rootRef = useRef12(null);
   useEffect7(() => {
     const root = rootRef.current;
     if (!open || !root) return;
@@ -4080,8 +5015,9 @@ function PersonalizationMenu({
     ownerDocument.addEventListener("pointerdown", onPointerDown, true);
     return () => ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
   }, [open]);
-  return /* @__PURE__ */ jsxs29("div", { className: "ree-personalization", ref: rootRef, children: [
-    /* @__PURE__ */ jsxs29(
+  if (variables.length === 0) return null;
+  return /* @__PURE__ */ jsxs34("div", { className: "ree-personalization", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs34(
       "button",
       {
         type: "button",
@@ -4090,11 +5026,11 @@ function PersonalizationMenu({
         onClick: () => setOpen((current) => !current),
         children: [
           "Personalization",
-          /* @__PURE__ */ jsx39("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("path", { d: "M5.2 7.5 10 12.3l4.8-4.8 1.2 1.2L10 14.7 4 8.7l1.2-1.2Z" }) })
+          /* @__PURE__ */ jsx48("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx48("path", { d: "M5.2 7.5 10 12.3l4.8-4.8 1.2 1.2L10 14.7 4 8.7l1.2-1.2Z" }) })
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx39("div", { className: "ree-var-menu ree-personalization-menu", children: variables.length === 0 ? /* @__PURE__ */ jsx39("div", { className: "ree-personalization-empty", children: "No personalization fields" }) : variables.map((variable) => /* @__PURE__ */ jsxs29(
+    open ? /* @__PURE__ */ jsx48("div", { className: "ree-var-menu ree-personalization-menu", children: variables.map((variable) => /* @__PURE__ */ jsxs34(
       "button",
       {
         type: "button",
@@ -4104,8 +5040,8 @@ function PersonalizationMenu({
           setOpen(false);
         },
         children: [
-          /* @__PURE__ */ jsx39("span", { className: "ree-var-name", children: variable.name }),
-          variable.description ? /* @__PURE__ */ jsx39("span", { className: "ree-var-label", children: variable.description }) : null
+          /* @__PURE__ */ jsx48("span", { className: "ree-var-name", children: variable.name }),
+          variable.description ? /* @__PURE__ */ jsx48("span", { className: "ree-var-label", children: variable.description }) : null
         ]
       },
       variable.name
@@ -4114,14 +5050,13 @@ function PersonalizationMenu({
 }
 
 // src/shell/SubjectBar.tsx
-import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
 function SubjectBar({
   subject,
   variables,
-  onSubjectChange,
-  onReset
+  onSubjectChange
 }) {
-  const inputRef = useRef12(null);
+  const inputRef = useRef13(null);
   const insertVariable = (token) => {
     var _a, _b;
     const input = inputRef.current;
@@ -4139,10 +5074,10 @@ function SubjectBar({
       (_b2 = inputRef.current) == null ? void 0 : _b2.setSelectionRange(cursor, cursor);
     });
   };
-  return /* @__PURE__ */ jsxs30("div", { className: "ree-subject-bar", children: [
-    /* @__PURE__ */ jsx40("label", { className: "ree-subject-label", htmlFor: "ree-email-subject", children: "Email subject" }),
-    /* @__PURE__ */ jsx40(
-      "input",
+  return /* @__PURE__ */ jsxs35("div", { className: "ree-subject-bar", children: [
+    /* @__PURE__ */ jsx49("label", { className: "ree-subject-label", htmlFor: "ree-email-subject", children: "Email subject" }),
+    /* @__PURE__ */ jsx49(
+      TextInput,
       {
         id: "ree-email-subject",
         ref: inputRef,
@@ -4152,21 +5087,20 @@ function SubjectBar({
         onChange: (event) => onSubjectChange(event.target.value)
       }
     ),
-    /* @__PURE__ */ jsxs30("span", { className: "ree-subject-count", children: [
+    /* @__PURE__ */ jsxs35("span", { className: "ree-subject-count", children: [
       subject.length,
       "/",
       SUBJECT_MAX_LENGTH
     ] }),
-    variables.length > 0 ? /* @__PURE__ */ jsxs30(Fragment3, { children: [
-      /* @__PURE__ */ jsx40(PersonalizationMenu, { variables, onInsert: insertVariable }),
-      /* @__PURE__ */ jsx40("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
-    ] }) : null,
-    /* @__PURE__ */ jsx40("button", { type: "button", className: "ree-btn ree-subject-reset", onClick: onReset, children: "Reset" })
+    variables.length > 0 ? /* @__PURE__ */ jsxs35(Fragment5, { children: [
+      /* @__PURE__ */ jsx49(PersonalizationMenu, { variables, onInsert: insertVariable }),
+      /* @__PURE__ */ jsx49("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
+    ] }) : null
   ] });
 }
 
 // src/shell/useEditorSession.ts
-import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef13, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8, useLayoutEffect as useLayoutEffect7, useMemo as useMemo3, useRef as useRef14, useState as useState14 } from "react";
 
 // src/utils/id.ts
 function generateId(prefix = "block") {
@@ -4178,11 +5112,11 @@ function generateId(prefix = "block") {
 
 // src/document/create-block.ts
 function createBlockNode(type, definitions) {
-  var _a, _b;
+  var _a;
   const definition = getBlockDefinition(type, definitions);
   if (!definition) return null;
-  const fields = __spreadValues({}, (_a = definition.defaultFields) != null ? _a : {});
-  for (const field of (_b = definition.fields) != null ? _b : []) {
+  const fields = __spreadValues({}, definition.defaultFields);
+  for (const field of (_a = definition.fields) != null ? _a : []) {
     if (!(field.name in fields) && field.defaultValue !== void 0) {
       fields[field.name] = field.defaultValue;
     }
@@ -4194,7 +5128,7 @@ function createBlockNode(type, definitions) {
     id: generateId(type),
     type,
     fields,
-    style: definition.defaultStyle ? structuredClone(definition.defaultStyle) : void 0,
+    style: definition.defaultStyle ? resolveBlockStyle(definition.defaultStyle, definition) : void 0,
     defaultData: definition.defaultData ? structuredClone(definition.defaultData) : void 0
   };
 }
@@ -4276,22 +5210,19 @@ function useEditorSession({
 }) {
   var _a;
   const definitions = useMemo3(() => mergeBlockDefinitions(blocks), [blocks]);
-  const [baseline] = useState10(() => {
+  const [document, setDocument] = useState14(() => {
     const base = ensureEmailDocument(
       structuredClone(initialDocument != null ? initialDocument : createEmptyDocument())
     );
     if (global === void 0) return base;
     return __spreadProps(__spreadValues({}, base), { global: mergeEmailGlobal(base.global, global) });
   });
-  const [document, setDocument] = useState10(
-    () => structuredClone(baseline)
-  );
-  const [selectedId, setSelectedId] = useState10(null);
-  const documentRef = useRef13(document);
-  documentRef.current = document;
-  const globalPropRef = useRef13(global);
-  globalPropRef.current = global;
-  const commit = useCallback2(
+  const [selectedId, setSelectedId] = useState14(null);
+  const documentRef = useRef14(document);
+  useLayoutEffect7(() => {
+    documentRef.current = document;
+  }, [document]);
+  const commit = useCallback3(
     (next) => {
       documentRef.current = next;
       setDocument(next);
@@ -4306,14 +5237,14 @@ function useEditorSession({
     if (sameEmailGlobal(resolveEmailGlobal(current.global), nextGlobal)) return;
     commit(__spreadProps(__spreadValues({}, current), { global: nextGlobal }));
   }, [global, commit]);
-  const getDocument = useCallback2(
+  const getDocument = useCallback3(
     () => ensureEmailDocument(structuredClone(documentRef.current)),
     []
   );
-  const selectBlock = useCallback2((id) => {
+  const selectBlock = useCallback3((id) => {
     setSelectedId(id);
   }, []);
-  const insertBlock = useCallback2(
+  const insertBlock = useCallback3(
     (type, index) => {
       const node = createBlockNode(type, definitions);
       if (!node) return false;
@@ -4323,19 +5254,19 @@ function useEditorSession({
     },
     [commit, definitions]
   );
-  const updateField = useCallback2(
+  const updateField = useCallback3(
     (id, name, value) => {
       commit(updateBlockField(documentRef.current, id, name, value));
     },
     [commit]
   );
-  const updateStyle = useCallback2(
+  const updateStyle = useCallback3(
     (id, styleId, value) => {
       commit(updateBlockStyle(documentRef.current, id, styleId, value));
     },
     [commit]
   );
-  const updateGlobal = useCallback2(
+  const updateGlobal = useCallback3(
     (patch) => {
       const next = updateGlobalSettings(documentRef.current, patch);
       commit(next);
@@ -4343,44 +5274,37 @@ function useEditorSession({
     },
     [commit, onGlobalChange]
   );
-  const moveBlock = useCallback2(
+  const moveBlock = useCallback3(
     (id, direction) => {
       commit(moveBlockBy(documentRef.current, id, direction));
     },
     [commit]
   );
-  const duplicateBlock = useCallback2(
+  const duplicateBlock = useCallback3(
     (id) => {
       commit(duplicateBlockNode(documentRef.current, id));
     },
     [commit]
   );
-  const removeBlock = useCallback2(
+  const removeBlock = useCallback3(
     (id) => {
       commit(removeBlockNode(documentRef.current, id));
       setSelectedId((current) => current === id ? null : current);
     },
     [commit]
   );
-  const reorderBlocks = useCallback2(
+  const reorderBlocks = useCallback3(
     (activeId, overId) => {
       commit(reorderBlockNodes(documentRef.current, activeId, overId));
     },
     [commit]
   );
-  const setSubject = useCallback2(
+  const setSubject = useCallback3(
     (subject) => {
       commit(withSubject(documentRef.current, subject.slice(0, SUBJECT_MAX_LENGTH)));
     },
     [commit]
   );
-  const reset = useCallback2(() => {
-    const restored = structuredClone(baseline);
-    const incoming = globalPropRef.current;
-    const next = incoming === void 0 ? restored : __spreadProps(__spreadValues({}, restored), { global: mergeEmailGlobal(restored.global, incoming) });
-    commit(next);
-    setSelectedId(null);
-  }, [baseline, commit]);
   const resolvedDocument = useMemo3(() => ensureEmailDocument(document), [document]);
   const selectedBlock = (_a = resolvedDocument.blocks.find((block) => block.id === selectedId)) != null ? _a : null;
   const selectedDefinition = selectedBlock ? getBlockDefinition(selectedBlock.type, definitions) : void 0;
@@ -4401,8 +5325,7 @@ function useEditorSession({
     duplicateBlock,
     removeBlock,
     reorderBlocks,
-    setSubject,
-    reset
+    setSubject
   };
 }
 
@@ -4433,8 +5356,8 @@ function useEditorHandle(ref, { getDocument, definitions, variables }) {
 }
 
 // src/shell/EmailEditorShell.tsx
-import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
-var EmailEditorShell = forwardRef(
+import { jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
+var EmailEditorShell = forwardRef2(
   function EmailEditorShell2({
     initialDocument,
     global,
@@ -4454,12 +5377,14 @@ var EmailEditorShell = forwardRef(
       onGlobalChange
     });
     useEditorHandle(ref, session);
-    const [viewMode, setViewMode] = useState11("edit");
-    const [device, setDevice] = useState11("desktop");
-    const [inspectorPanel, setInspectorPanel] = useState11("global");
-    useEffect9(() => {
+    const [viewMode, setViewMode] = useState15("edit");
+    const [device, setDevice] = useState15("desktop");
+    const [inspectorPanel, setInspectorPanel] = useState15("global");
+    const [previousSelectedId, setPreviousSelectedId] = useState15(session.selectedId);
+    if (previousSelectedId !== session.selectedId) {
+      setPreviousSelectedId(session.selectedId);
       if (!session.selectedId) setInspectorPanel("global");
-    }, [session.selectedId]);
+    }
     const selectBlock = (id) => {
       const hadSelection = session.selectedId !== null;
       session.selectBlock(id);
@@ -4479,18 +5404,17 @@ var EmailEditorShell = forwardRef(
       selectBlock(null);
     };
     const showCanvas = () => setViewMode("edit");
-    return /* @__PURE__ */ jsxs31("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
-      /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsxs36("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx50(
         SubjectBar,
         {
           subject: (_a = session.document.subject) != null ? _a : "",
           variables: session.variables,
-          onSubjectChange: session.setSubject,
-          onReset: session.reset
+          onSubjectChange: session.setSubject
         }
       ),
-      /* @__PURE__ */ jsxs31("div", { className: "ree-body", children: [
-        /* @__PURE__ */ jsxs31(
+      /* @__PURE__ */ jsxs36("div", { className: "ree-body", children: [
+        /* @__PURE__ */ jsxs36(
           EditorDnd,
           {
             blocks: session.document.blocks,
@@ -4502,7 +5426,7 @@ var EmailEditorShell = forwardRef(
             onReorder: session.reorderBlocks,
             onLibraryDragStart: showCanvas,
             children: [
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx50(
                 BlockLibrary,
                 {
                   definitions: session.definitions,
@@ -4512,7 +5436,7 @@ var EmailEditorShell = forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx50(
                 Stage,
                 {
                   session,
@@ -4526,7 +5450,7 @@ var EmailEditorShell = forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx50(
           Inspector,
           {
             panel: inspectorPanel,
@@ -4546,10 +5470,10 @@ var EmailEditorShell = forwardRef(
 );
 
 // src/EmailEditor.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var EmailEditor = forwardRef2(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var EmailEditor = forwardRef3(
   function EmailEditor2(props, ref) {
-    return /* @__PURE__ */ jsx42(EmailEditorShell, __spreadProps(__spreadValues({}, props), { ref }));
+    return /* @__PURE__ */ jsx51(EmailEditorShell, __spreadProps(__spreadValues({}, props), { ref }));
   }
 );
 export {