@mjml-agent-editor/editor 0.1.17 → 0.3.0

package/dist/canvas.cjs

@@ -31,16 +31,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  EmailEditor: () => EmailEditor
+  EmailEditor: () => EmailEditor,
+  blockProblems: () => blockProblems
 });
 module.exports = __toCommonJS(canvas_exports);
 
 // src/components/editor/EmailEditor.tsx
-var import_grapesjs = __toESM(require("grapesjs"), 1);
-var import_react6 = __toESM(require("@grapesjs/react"), 1);
-var import_grapesjs_mjml = __toESM(require("grapesjs-mjml"), 1);
-var import_react7 = require("react");
-var import_core2 = require("@mjml-agent-editor/core");
+var import_grapesjs2 = __toESM(require("grapesjs"), 1);
+var import_react9 = __toESM(require("@grapesjs/react"), 1);
+var import_grapesjs_mjml2 = __toESM(require("grapesjs-mjml"), 1);
+var import_react10 = require("react");
+var import_core4 = require("@mjml-agent-editor/core");
 
 // src/stores.tsx
 var import_react = require("react");
@@ -63,9 +64,204 @@ var DEFAULT_LABELS = {
   exportHtml: "Export HTML",
   exportMjml: "Export MJML",
   copied: (kind) => `${kind} copied.`,
+  tabBlocks: "Blocks",
+  tabSettings: "Settings",
+  tabLayers: "Layers",
   searchBlocks: "Search blocks\u2026",
+  noBlocksMatch: "No blocks match.",
+  blockAdded: (block) => `Added: ${block}`,
+  blockCategoryLayout: "Layout",
+  blockCategoryContent: "Content",
+  blockCategorySections: "Sections",
+  blockLabels: {
+    "mj-1-column": "1 column",
+    "mj-2-columns": "2 columns",
+    "mj-3-columns": "3 columns",
+    "mj-text": "Text",
+    "mj-image": "Image",
+    "mj-button": "Button",
+    "mj-divider": "Divider",
+    "mj-spacer": "Spacer",
+    "mj-social-group": "Social links",
+    "mj-navbar": "Navigation"
+  },
+  elementNames: {
+    "mj-wrapper": "Section group",
+    "mj-section": "Section",
+    "mj-column": "Column",
+    "mj-group": "Column group",
+    "mj-text": "Text",
+    "mj-button": "Button",
+    "mj-image": "Image",
+    "mj-divider": "Divider",
+    "mj-spacer": "Spacer",
+    "mj-hero": "Hero",
+    "mj-navbar": "Navigation",
+    "mj-navbar-link": "Navigation link",
+    "mj-social": "Social links",
+    "mj-social-element": "Social link",
+    "mj-raw": "Raw HTML",
+    "mj-table": "Table"
+  },
   expandAll: "Expand all",
   selectAnElement: "Select an element\u2026",
+  settingsEmpty: "Select something in the email to edit it.",
+  emailSettings: "Email settings",
+  loadingEditor: "Loading editor\u2026",
+  commentOnElement: "Comment on element / section",
+  groupContent: "Content",
+  groupLayout: "Layout",
+  groupSpacing: "Spacing",
+  groupStyle: "Style",
+  groupAdvanced: "Advanced",
+  otherAttributes: "Other attributes",
+  removeAttribute: "Remove",
+  resetToDefault: "Reset to default",
+  selectParent: "Select parent",
+  duplicate: "Duplicate",
+  deleteElement: "Delete",
+  multipleSelected: (count) => `${count} elements selected \u2014 select one to edit its settings.`,
+  editEachSide: "Edit each side",
+  increase: "Increase",
+  decrease: "Decrease",
+  changeUnit: (unit) => `Unit: ${unit}. Click to change`,
+  noUnit: "\xD7",
+  sidesVertical: "Top and bottom",
+  sidesHorizontal: "Left and right",
+  sideTop: "Top",
+  sideRight: "Right",
+  sideBottom: "Bottom",
+  sideLeft: "Left",
+  linkTypeProfile: "Your profile",
+  linkTypeShare: "Share this page",
+  allScreenSizes: "Changes apply to every screen size.",
+  columnWidths: "Column widths",
+  columnRatio: (ratio) => `Columns ${ratio}`,
+  socialNetworks: "Networks",
+  addNetwork: "Add network",
+  navbarLinks: "Links",
+  addLink: "Add link",
+  newLinkText: "Link",
+  inspectorLabels: {
+    // Fields
+    contentWidth: "Width",
+    pageBackground: "Page background",
+    "pageBackground.help": "Fills the area around and behind the email.",
+    fullWidth: "Full-width background",
+    "fullWidth.help": "The background reaches the window edges; the content keeps the email width.",
+    padding: "Padding",
+    backgroundColor: "Background",
+    backgroundImage: "Background image",
+    backgroundSize: "Image size",
+    backgroundRepeat: "Repeat image",
+    backgroundPosition: "Position",
+    cornerRadius: "Corners",
+    gap: "Space between sections",
+    border: "Border",
+    alignColumns: "Align columns",
+    "alignColumns.help": "Where the columns sit when they don't fill the row.",
+    reverseColumns: "Reverse column order",
+    "reverseColumns.help": "Swaps the columns on desktop; on phones they still stack in their original order.",
+    verticalAlign: "Vertical",
+    width: "Width",
+    innerBackground: "Inner background",
+    "innerBackground.help": "Fills only the area inside the padding, so it needs padding to show.",
+    innerCornerRadius: "Inner corners",
+    innerBorder: "Inner border",
+    align: "Alignment",
+    font: "Font",
+    fontSize: "Text size",
+    fontWeight: "Weight",
+    textColor: "Text color",
+    lineHeight: "Line height",
+    letterSpacing: "Letter spacing",
+    textTransform: "Capitalization",
+    blockBackground: "Block background",
+    "blockBackground.help": "Fills the whole block, including its padding.",
+    link: "Link",
+    buttonColor: "Button color",
+    buttonPadding: "Button padding",
+    "buttonPadding.help": "Space between the text and the button's edge; this sets the button's size.",
+    spaceAround: "Space around",
+    "spaceAround.help": "Empty space outside the button, between it and what is next to it.",
+    opensIn: "Opens in",
+    tooltip: "Tooltip",
+    rel: "Link relationship",
+    image: "Image",
+    altText: "Alt text",
+    "altText.help": "Read by screen readers and shown when images are blocked.",
+    fluidOnMobile: "Full width on mobile",
+    "fluidOnMobile.help": "On phones the image stretches across the screen, whatever its width here.",
+    lineColor: "Line color",
+    thickness: "Thickness",
+    lineStyle: "Line style",
+    height: "Height",
+    socialMode: "Direction",
+    iconSize: "Icon size",
+    iconSpacing: "Space around each icon",
+    network: "Network",
+    // Brand names are the same in every language and are not keys; these two are words.
+    networkWebsite: "Website",
+    networkCustom: "Custom",
+    customIcon: "Custom icon",
+    iconColor: "Icon color",
+    iconPosition: "Icon side",
+    heroMode: "Sizing",
+    "heroMode.help": "Fixed keeps the height you set; Fit image follows the background image's proportions.",
+    backgroundWidth: "Image width",
+    "backgroundWidth.help": "The background image's real size in pixels, so the hero keeps its proportions.",
+    backgroundHeight: "Image height",
+    fallbackColor: "Fallback color",
+    "fallbackColor.help": "Shown while the image loads, or when images are blocked.",
+    contentPadding: "Content padding",
+    contentBackground: "Content background",
+    hamburger: "Collapse into a menu on mobile",
+    "hamburger.help": "On phones the links fold into a menu button.",
+    menuIconColor: "Menu icon color",
+    menuIconSize: "Menu icon size",
+    menuIconAlign: "Menu icon align",
+    baseUrl: "Link prefix",
+    "baseUrl.help": "Added in front of every link in the bar, full addresses included, so links then give only the path.",
+    // Options
+    alignLeft: "Left",
+    alignCenter: "Center",
+    alignRight: "Right",
+    alignJustify: "Justify",
+    alignTop: "Top",
+    alignMiddle: "Middle",
+    alignBottom: "Bottom",
+    weightRegular: "Regular",
+    weightMedium: "Medium",
+    weightSemibold: "Semibold",
+    weightBold: "Bold",
+    caseNone: "As typed",
+    caseUpper: "UPPERCASE",
+    caseLower: "lowercase",
+    caseCapitalize: "Capitalize Each Word",
+    targetNewTab: "New tab",
+    targetSameTab: "Same tab",
+    sizeCover: "Fill",
+    sizeContain: "Fit",
+    sizeAuto: "Original",
+    repeatTile: "Tile",
+    repeatOnce: "Once",
+    positionTopLeft: "Top left",
+    positionTopCenter: "Top",
+    positionTopRight: "Top right",
+    positionCenterLeft: "Left",
+    positionCenter: "Center",
+    positionCenterRight: "Right",
+    positionBottomLeft: "Bottom left",
+    positionBottomCenter: "Bottom",
+    positionBottomRight: "Bottom right",
+    lineSolid: "Solid",
+    lineDashed: "Dashed",
+    lineDotted: "Dotted",
+    modeHorizontal: "In a row",
+    modeVertical: "Stacked",
+    heroFixed: "Fixed",
+    heroFluid: "Fit image"
+  },
   attributes: "Attributes",
   style: "Style",
   rteFont: "Font",
@@ -132,7 +328,10 @@ function mergeLabels(overrides) {
   return {
     ...DEFAULT_LABELS,
     ...overrides,
-    toolLabels: { ...DEFAULT_LABELS.toolLabels, ...overrides.toolLabels }
+    toolLabels: { ...DEFAULT_LABELS.toolLabels, ...overrides.toolLabels },
+    blockLabels: { ...DEFAULT_LABELS.blockLabels, ...overrides.blockLabels },
+    elementNames: { ...DEFAULT_LABELS.elementNames, ...overrides.elementNames },
+    inspectorLabels: { ...DEFAULT_LABELS.inspectorLabels, ...overrides.inspectorLabels }
   };
 }
 
@@ -255,11 +454,58 @@ function Input({ className, type, ...props }) {
   );
 }
 
+// src/components/ui/tooltip.tsx
+var React3 = require("react");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_radix_ui2.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+
 // src/components/ui/spinner.tsx
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_lucide_react.Loader2Icon,
     {
       "data-slot": "spinner",
@@ -272,17 +518,17 @@ function Spinner({ className, ...props }) {
 }
 
 // src/components/ui/popover.tsx
-var React3 = require("react");
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var React4 = require("react");
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Popover({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Popover.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverAnchor({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({
   className,
@@ -290,8 +536,8 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_radix_ui2.Popover.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Popover.Content,
     {
       "data-slot": "popover-content",
       align,
@@ -306,22 +552,22 @@ function PopoverContent({
 }
 
 // src/components/ui/dialog.tsx
-var React4 = require("react");
-var import_radix_ui3 = require("radix-ui");
+var React5 = require("react");
+var import_radix_ui4 = require("radix-ui");
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui3.Dialog.Overlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -338,10 +584,10 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      import_radix_ui3.Dialog.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_radix_ui4.Dialog.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -351,9 +597,9 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.XIcon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Close" })
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui4.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.XIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Close" })
           ] }) })
         ]
       }
@@ -361,11 +607,11 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui3.Dialog.Title,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.Dialog.Title,
     {
       "data-slot": "dialog-title",
       className: cn("font-heading text-base leading-none font-medium", className),
@@ -377,8 +623,8 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui3.Dialog.Description,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.Dialog.Description,
     {
       "data-slot": "dialog-description",
       className: cn(
@@ -412,10 +658,10 @@ function saveToastId(docId) {
 }
 
 // src/components/ui/textarea.tsx
-var React5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var React6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
@@ -432,7 +678,7 @@ function Textarea({ className, ...props }) {
 var import_react2 = require("@grapesjs/react");
 var import_react3 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var keyOf = (c) => c.objectId ? `obj-${c.objectId}` : `sec-${c.sectionId}`;
 var keyOfTarget = (t) => t.objectId ? `obj-${t.objectId}` : `sec-${t.sectionId}`;
 function CanvasComments({
@@ -586,11 +832,11 @@ function CanvasComments({
       console.error(e);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: "pointer-events-none absolute inset-0 z-20 overflow-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: containerRef, className: "pointer-events-none absolute inset-0 z-20 overflow-hidden", children: [
     pins.map(({ key, list }) => {
       const pos = positions[key];
       if (!pos) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
@@ -606,8 +852,8 @@ function CanvasComments({
         key
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           style: {
@@ -619,45 +865,45 @@ function CanvasComments({
           }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         PopoverContent,
         {
           side: "right",
           align: "start",
           className: "pointer-events-auto w-80 p-0 data-[state=closed]:!animate-none data-[state=closed]:!duration-0",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
                 "Comment on",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
                 labels.commentOnSection,
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: closePopover,
                   "aria-label": labels.closeComments,
                   className: "-mr-1 -mt-0.5 shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.X, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.X, { className: "size-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
-              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
-              activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
+              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
+              activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "button",
                   {
                     onClick: () => void resolve(c.id),
                     className: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Check, { className: "size-3" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "size-3" }),
                       " ",
                       labels.resolveComment
                     ]
@@ -665,8 +911,8 @@ function CanvasComments({
                 )
               ] }, c.id))
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "border-t p-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-t p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 Textarea,
                 {
                   autoFocus: true,
@@ -682,8 +928,8 @@ function CanvasComments({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.MessageSquarePlus, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.MessageSquarePlus, {}),
                 " ",
                 labels.addComment
               ] }) })
@@ -695,6 +941,30 @@ function CanvasComments({
   ] });
 }
 
+// src/lib/save-baseline.ts
+function createSaveBaseline() {
+  let stored = "";
+  let loaded = null;
+  return {
+    /** The MJML the store holds, as far as this editor knows. */
+    get stored() {
+      return stored;
+    },
+    /** `canvas` is what the load serialises to, or null when it repaired something to write. */
+    load(mjml, canvas) {
+      stored = mjml;
+      loaded = canvas;
+    },
+    saved(mjml) {
+      stored = mjml;
+      loaded = null;
+    },
+    changed(mjml) {
+      return mjml !== stored && mjml !== loaded;
+    }
+  };
+}
+
 // src/lib/save-queue.ts
 function createSaveQueue(save, delayMs) {
   let timer = null;
@@ -724,21 +994,62 @@ function createSaveQueue(save, delayMs) {
   };
 }
 
+// src/lib/turn-follower.ts
+function createTurnFollower() {
+  let running = false;
+  let mounted = true;
+  let apply = null;
+  return {
+    turn(on) {
+      if (on === running) return;
+      running = on;
+      if (mounted) apply?.(on);
+    },
+    /**
+     * Whether the canvas is still mounted. An unmounted one's late reload must not unlock
+     * the shared state a canvas mounted since has locked.
+     */
+    get mounted() {
+      return mounted;
+    },
+    // Both, as React mounts twice in development.
+    mount() {
+      mounted = true;
+    },
+    unmount() {
+      mounted = false;
+    },
+    /** A turn already under way is applied at once; none means nothing to apply. */
+    ready(fn) {
+      apply = fn;
+      if (running) fn(true);
+    }
+  };
+}
+
+// src/lib/shortcuts.ts
+function opensBlockSearch(e) {
+  if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return false;
+  const target = e.target;
+  if (target?.isContentEditable) return false;
+  return !["INPUT", "TEXTAREA", "SELECT", "IFRAME"].includes(target?.tagName ?? "");
+}
+
 // src/components/editor/EmailEditor.tsx
 var import_sonner2 = require("sonner");
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 
 // src/components/ui/switch.tsx
-var React6 = require("react");
-var import_radix_ui4 = require("radix-ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var React7 = require("react");
+var import_radix_ui5 = require("radix-ui");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Switch({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_radix_ui4.Switch.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_radix_ui5.Switch.Root,
     {
       "data-slot": "switch",
       "data-size": size,
@@ -747,8 +1058,8 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_radix_ui4.Switch.Thumb,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_radix_ui5.Switch.Thumb,
         {
           "data-slot": "switch-thumb",
           className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
@@ -759,13 +1070,13 @@ function Switch({
 }
 
 // src/components/editor/EmailEditor.tsx
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react11 = require("lucide-react");
 
 // src/components/editor/ImagePicker.tsx
 var import_react4 = require("react");
 var import_lucide_react4 = require("lucide-react");
 var import_sonner = require("sonner");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ImagePicker({
   open,
   currentUrl,
@@ -857,13 +1168,13 @@ function ImagePicker({
     setDragging(false);
     if (!full) void upload(e.dataTransfer.files);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogContent, { className: "editor-dark gap-0 overflow-hidden border border-panel-border bg-panel p-0 text-panel-fg ring-0 sm:max-w-3xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogHeader, { className: "border-b border-panel-border px-5 py-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogTitle, { children: labels.imagePickerTitle }),
-      quota && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogDescription, { className: "text-panel-muted-fg", children: labels.imagePickerQuota(quota.used, quota.limit) })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogContent, { className: "editor-dark gap-0 overflow-hidden border border-panel-border bg-panel p-0 text-panel-fg ring-0 sm:max-w-3xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogHeader, { className: "border-b border-panel-border px-5 py-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogTitle, { children: labels.imagePickerTitle }),
+      quota && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogDescription, { className: "text-panel-muted-fg", children: labels.imagePickerQuota(quota.used, quota.limit) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-5", children: [
-      library && (full ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "rounded-lg border border-panel-border bg-panel-elevated px-4 py-3 text-sm text-panel-muted-fg", children: labels.imagePickerQuotaFull }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-5", children: [
+      library && (full ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "rounded-lg border border-panel-border bg-panel-elevated px-4 py-3 text-sm text-panel-muted-fg", children: labels.imagePickerQuotaFull }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           onDragOver: (e) => {
@@ -877,10 +1188,10 @@ function ImagePicker({
             dragging ? "border-brand bg-brand-soft" : "border-panel-border bg-panel-elevated"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ImageUp, { className: "size-8 text-panel-muted-fg" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2 text-sm text-panel-muted-fg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: labels.imagePickerDrop }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ImageUp, { className: "size-8 text-panel-muted-fg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2 text-sm text-panel-muted-fg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: labels.imagePickerDrop }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Button,
                 {
                   type: "button",
@@ -891,7 +1202,7 @@ function ImagePicker({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "input",
               {
                 ref: fileInput,
@@ -908,7 +1219,7 @@ function ImagePicker({
           ]
         }
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "form",
         {
           className: "flex gap-2",
@@ -918,9 +1229,9 @@ function ImagePicker({
             if (value) onSelect(value);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Link2, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-panel-muted-fg" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Link2, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-panel-muted-fg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Input,
                 {
                   value: url,
@@ -930,7 +1241,7 @@ function ImagePicker({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               Button,
               {
                 type: "submit",
@@ -944,22 +1255,22 @@ function ImagePicker({
           ]
         }
       ),
-      library && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "mb-2 text-xs font-medium tracking-wide text-panel-muted-fg uppercase", children: labels.imagePickerGallery }),
-        loading && images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, {}) }) : images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "py-6 text-center text-sm text-panel-muted-fg", children: labels.imagePickerEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { className: "grid grid-cols-3 gap-3 sm:grid-cols-4", children: [
-          Array.from({ length: pending }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      library && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "mb-2 text-xs font-medium tracking-wide text-panel-muted-fg uppercase", children: labels.imagePickerGallery }),
+        loading && images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {}) }) : images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "py-6 text-center text-sm text-panel-muted-fg", children: labels.imagePickerEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "grid grid-cols-3 gap-3 sm:grid-cols-4", children: [
+          Array.from({ length: pending }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "li",
             {
               className: "flex aspect-[4/3] items-center justify-center rounded-lg border border-panel-border bg-panel-elevated",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {})
             },
             `pending-${i}`
           )),
           images.map((image) => {
             const selected = image.url === currentUrl;
             const confirming = confirmId === image.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "group relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "group relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "button",
                 {
                   type: "button",
@@ -969,7 +1280,7 @@ function ImagePicker({
                     "block aspect-[4/3] w-full overflow-hidden rounded-lg border bg-black/25 transition outline-none focus-visible:ring-2 focus-visible:ring-brand",
                     selected ? "border-brand ring-2 ring-brand" : "border-panel-border hover:border-panel-muted-fg"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "img",
                     {
                       src: image.url,
@@ -980,9 +1291,9 @@ function ImagePicker({
                   )
                 }
               ),
-              selected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pointer-events-none absolute top-1.5 left-1.5 flex size-5 items-center justify-center rounded-full bg-brand text-brand-fg", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Check, { className: "size-3" }) }),
-              image.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 truncate rounded-b-lg bg-black/60 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover:opacity-100", children: image.name }),
-              library.remove && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute top-1.5 left-1.5 flex size-5 items-center justify-center rounded-full bg-brand text-brand-fg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "size-3" }) }),
+              image.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 truncate rounded-b-lg bg-black/60 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover:opacity-100", children: image.name }),
+              library.remove && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -995,7 +1306,7 @@ function ImagePicker({
                     confirming ? "bg-red-600 opacity-100" : "bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Trash2, { className: "size-3.5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Trash2, { className: "size-3.5" }),
                     confirming && labels.imagePickerConfirmDelete
                   ]
                 }
@@ -1017,171 +1328,1201 @@ function matchesAccept(file, accept) {
   });
 }
 
+// src/components/editor/inspector/Inspector.tsx
+var import_react7 = require("react");
+var import_react8 = require("@grapesjs/react");
+var import_lucide_react9 = require("lucide-react");
+
 // src/components/editor/ColorField.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_colorful = require("react-colorful");
+var import_lucide_react6 = require("lucide-react");
+
+// src/components/editor/inspector/controls.tsx
+var import_react5 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var PRESETS = [
-  "#000000",
-  "#374151",
-  "#6b7280",
-  "#d1d5db",
-  "#f3f4f6",
-  "#ffffff",
-  "#dc2626",
-  "#ea580c",
-  "#ca8a04",
-  "#16a34a",
-  "#0284c7",
-  "#4f46e5",
-  "#9333ea",
-  "#db2777"
-];
-var eyeDropper = () => globalThis.EyeDropper;
-function ColorField({
-  value,
-  placeholder,
-  documentColors,
+
+// src/components/editor/inspector/values.ts
+var import_core2 = require("@mjml-agent-editor/core");
+var SIDES = ["top", "right", "bottom", "left"];
+function expandBox(value) {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0 || parts.length > 4) return null;
+  const [t, r = t, b = t, l = r] = parts;
+  return [t, r, b, l];
+}
+function readBox(attributes, attr) {
+  const short = expandBox(attributes[attr] ?? "") ?? ["", "", "", ""];
+  return SIDES.map((side, i) => attributes[`${attr}-${side}`] ?? short[i]);
+}
+function boxShorthand(sides) {
+  const [t, r, b, l] = sides.map((s) => s.trim() || "0");
+  if (t === b && r === l) return t === r ? t : `${t} ${r}`;
+  if (r === l) return `${t} ${r} ${b}`;
+  return `${t} ${r} ${b} ${l}`;
+}
+function parseLength(value, units) {
+  const match = /^(-?\d*\.?\d+)\s*(px|%|em)?$/.exec(value.trim());
+  if (!match) return null;
+  const unit = match[2] ?? "";
+  return units.includes(unit) ? { amount: match[1], unit } : null;
+}
+var NO_SHARE = "-noshare";
+function parseNetwork(name) {
+  return name.endsWith(NO_SHARE) ? { network: name.slice(0, -NO_SHARE.length), share: false } : { network: name, share: name !== "custom" && name !== "" };
+}
+function networkName(network, share) {
+  return share || network === "custom" ? network : `${network}${NO_SHARE}`;
+}
+
+// src/components/editor/inspector/controls.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FIELD = "h-7 w-full min-w-0 rounded-md border border-panel-border bg-panel-elevated px-2 text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg/70 focus:border-brand";
+var FieldLabel = (0, import_react5.createContext)({});
+var useFieldLabel = () => {
+  const { label, help } = (0, import_react5.useContext)(FieldLabel);
+  return { "aria-labelledby": label, "aria-describedby": help };
+};
+function Row({
+  label,
+  help,
+  own,
+  wide,
+  inline,
   labels,
-  onChange
+  onReset,
+  children
 }) {
-  const [text, setText] = (0, import_react5.useState)(value);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [used, setUsed] = (0, import_react5.useState)([]);
-  const pressed = (0, import_react5.useRef)(false);
-  const dragged = (0, import_react5.useRef)(null);
-  const fieldRef = (0, import_react5.useRef)(null);
-  const anchor = (0, import_react5.useRef)({
-    getBoundingClientRect: () => {
-      const field = fieldRef.current?.getBoundingClientRect() ?? new DOMRect();
-      const panel = fieldRef.current?.closest(".editor-dark")?.getBoundingClientRect();
-      return new DOMRect(panel?.right ?? field.right, field.top, 0, field.height);
+  const id = (0, import_react5.useId)();
+  const helpId = (0, import_react5.useId)();
+  const [helpOpen, setHelpOpen] = (0, import_react5.useState)(false);
+  const control = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldLabel.Provider, { value: { label: id, help: help ? helpId : void 0 }, children });
+  const caption = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5 text-[11px] text-panel-muted-fg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn("size-1.5 shrink-0 rounded-full", own ? "bg-brand" : "bg-transparent")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, className: "truncate", children: label }),
+    help && // Its own provider: a host need not wrap the editor in one, as only EditorHeader asked.
+    // Opened by a tap as well: Radix opens a tooltip on hover and focus, not on touch.
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { open: helpOpen, onOpenChange: setHelpOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": help,
+          onClick: () => setHelpOpen((open) => !open),
+          className: "-m-0.5 shrink-0 rounded p-0.5 text-panel-muted-fg/70 hover:text-panel-fg focus-visible:text-panel-fg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.CircleHelp, { className: "size-3" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { side: "top", className: "max-w-56 leading-snug", children: help })
+    ] }) }),
+    own && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        title: labels.resetToDefault,
+        "aria-label": `${labels.resetToDefault}: ${label}`,
+        className: "ml-auto rounded p-0.5 text-panel-muted-fg opacity-0 group-hover/row:opacity-100 hover:text-panel-fg focus-visible:opacity-100",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.RotateCcw, { className: "size-3" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "group/row px-3 py-1", children: [
+    wide ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      caption,
+      control
+    ] }) : inline ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      caption,
+      control
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid grid-cols-[92px_minmax(0,1fr)] items-center gap-2", children: [
+      caption,
+      control
+    ] }),
+    help && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: helpId, hidden: true, children: help })
+  ] });
+}
+function useDraft(value, commit, source = value) {
+  const [draft, setDraft] = (0, import_react5.useState)(value);
+  (0, import_react5.useEffect)(() => setDraft(value), [value, source]);
+  const done = () => {
+    if (draft.trim() !== value) commit(draft.trim());
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") e.currentTarget.blur();
+    if (e.key === "Escape") {
+      setDraft(value);
+      requestAnimationFrame(() => e.target.blur());
     }
+  };
+  return { draft, setDraft, done, onKeyDown };
+}
+function TextInput({
+  value,
+  placeholder,
+  accept,
+  onCommit
+}) {
+  const [invalid, setInvalid] = (0, import_react5.useState)(false);
+  const field = useFieldLabel();
+  const { draft, setDraft, done, onKeyDown } = useDraft(value, (next) => {
+    const ok = !accept || accept(next);
+    setInvalid(!ok);
+    if (ok) onCommit(next);
   });
-  (0, import_react5.useEffect)(() => setText(value), [value]);
-  const latestOnChange = (0, import_react5.useRef)(onChange);
-  latestOnChange.current = onChange;
-  const release = (0, import_react5.useCallback)(() => {
-    pressed.current = false;
-    if (dragged.current !== null) latestOnChange.current(dragged.current, false);
-    dragged.current = null;
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    document.addEventListener("lostpointercapture", release);
-    return () => {
-      document.removeEventListener("lostpointercapture", release);
-      release();
-    };
-  }, [release]);
-  const hex = toHex(value) ?? toHex(placeholder ?? "") ?? "#000000";
-  const translucent = hex.length === 9;
-  const empty = !value;
-  const commit = (next) => {
-    dragged.current = null;
-    onChange(next, false);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "input",
+    {
+      className: cn(FIELD, invalid && "border-red-400"),
+      ...field,
+      "aria-invalid": invalid,
+      value: draft,
+      placeholder,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: done,
+      onKeyDown
+    }
+  );
+}
+var BARE_NUMBER = /^-?\d*\.?\d+$/;
+function normaliseLength(text, units, negative = false, unit = units[0]) {
+  if (text === "") return "";
+  const parsed = BARE_NUMBER.test(text) ? { amount: text, unit } : parseLength(text, units);
+  if (!parsed || !negative && parsed.amount.startsWith("-")) return null;
+  return `${parsed.amount}${parsed.unit}`;
+}
+function stepAmount(amount, delta, negative = false) {
+  const moved = Math.round((Number(amount) + delta) * 100) / 100;
+  const next = String(negative ? moved : Math.max(0, moved));
+  return BARE_NUMBER.test(next) ? next : amount;
+}
+var REPEAT_AFTER_MS = 400;
+var REPEAT_EVERY_MS = 60;
+function LengthInput({
+  value,
+  placeholder,
+  units,
+  negative = false,
+  compact = false,
+  labelledBy,
+  labels,
+  onCommit
+}) {
+  const fieldLabel = useFieldLabel();
+  const own = parseLength(value, units);
+  const fallback = parseLength(placeholder ?? "", units);
+  const [picked, setPicked] = (0, import_react5.useState)(null);
+  const unit = own?.unit ?? picked ?? fallback?.unit ?? units[0];
+  const [invalid, setInvalid] = (0, import_react5.useState)(false);
+  const commit = (0, import_react5.useRef)(onCommit);
+  commit.current = onCommit;
+  const endHold = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => () => endHold.current?.(), []);
+  const { draft, setDraft, done, onKeyDown } = useDraft(
+    own ? own.amount : value,
+    (next) => {
+      endHold.current?.();
+      const normal = normaliseLength(next, units, negative, unit);
+      setInvalid(normal === null);
+      if (normal !== null) commit.current(normal);
+    },
+    value
+  );
+  const from = () => {
+    const text = draft.trim();
+    if (BARE_NUMBER.test(text)) return { amount: text, unit };
+    if (text === "") return { amount: fallback?.amount ?? "0", unit };
+    return parseLength(text, units);
   };
-  const drag = (next) => {
-    setText(next);
-    if (!pressed.current) return commit(next);
-    dragged.current = next;
-    onChange(next, true);
+  const stepOnce = (delta) => {
+    endHold.current?.();
+    const start = from();
+    if (!start) return setInvalid(true);
+    const amount = stepAmount(start.amount, delta, negative);
+    setInvalid(false);
+    setDraft(amount);
+    commit.current(`${amount}${start.unit}`);
   };
-  const pickFromScreen = async () => {
-    const Ctor = eyeDropper();
-    if (!Ctor) return;
+  const onKey = (e) => {
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return onKeyDown(e);
+    e.preventDefault();
+    stepOnce((e.key === "ArrowUp" ? 1 : -1) * (e.shiftKey ? 10 : 1));
+  };
+  const press = (direction) => (e) => {
+    if (e.button !== 0 || endHold.current) return;
+    e.preventDefault();
+    const start = from();
+    if (!start) return setInvalid(true);
+    const delta = direction * (e.shiftKey ? 10 : 1);
+    let amount = stepAmount(start.amount, delta, negative);
+    const show = () => {
+      setInvalid(false);
+      setDraft(amount);
+      commit.current(`${amount}${start.unit}`, true);
+    };
+    show();
+    let timer = window.setTimeout(function repeat() {
+      amount = stepAmount(amount, delta, negative);
+      show();
+      timer = window.setTimeout(repeat, REPEAT_EVERY_MS);
+    }, REPEAT_AFTER_MS);
+    const button = e.currentTarget;
     try {
-      const { sRGBHex } = await new Ctor().open();
-      commit(sRGBHex);
+      button.setPointerCapture(e.pointerId);
     } catch {
     }
+    const events = ["pointerup", "pointercancel", "lostpointercapture"];
+    const pointerId = e.pointerId;
+    const end = () => {
+      window.clearTimeout(timer);
+      for (const type of events) button.removeEventListener(type, release);
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("blur", end);
+      endHold.current = null;
+      commit.current(`${amount}${start.unit}`);
+    };
+    const release = (ev) => {
+      if (ev.pointerId === void 0 || ev.pointerId === pointerId)
+        end();
+    };
+    endHold.current = end;
+    for (const type of events) button.addEventListener(type, release);
+    window.addEventListener("pointerup", release);
+    window.addEventListener("blur", end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    Popover,
+  const click = (direction) => (e) => {
+    if (e.detail === 0) stepOnce(direction);
+  };
+  const pickUnit = () => {
+    endHold.current?.();
+    const next = units[(units.indexOf(unit) + 1) % units.length];
+    const text = draft.trim();
+    if (!BARE_NUMBER.test(text)) return setPicked(next);
+    const normal = normaliseLength(text, units, negative, next);
+    if (normal === null) return setInvalid(true);
+    setPicked(next);
+    commit.current(normal);
+  };
+  const unitName = (u) => u || labels.noUnit;
+  const readable = draft.trim() === "" || BARE_NUMBER.test(draft.trim());
+  const arrow = "flex h-1/2 w-3.5 items-center justify-center text-panel-muted-fg hover:bg-panel-hover hover:text-panel-fg";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
     {
-      open,
-      onOpenChange: (next) => {
-        if (next) setUsed(documentColors());
-        else if (text.trim() !== value) commit(text.trim());
-        setOpen(next);
-      },
+      className: cn(
+        "group/length flex h-7 w-full min-w-0 items-center overflow-hidden rounded-md border border-panel-border bg-panel-elevated focus-within:border-brand",
+        invalid && "border-red-400"
+      ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverAnchor, { virtualRef: anchor }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
           {
-            ref: fieldRef,
-            className: "flex h-8 w-full items-center gap-1.5 rounded-md border border-panel-border bg-panel-elevated pr-1.5 pl-2 focus-within:border-brand",
+            className: "h-full w-full min-w-0 flex-1 bg-transparent pl-2 font-mono text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg/70",
+            value: draft,
+            placeholder: fallback ? fallback.amount : placeholder,
+            inputMode: "decimal",
+            ...fieldLabel,
+            "aria-labelledby": labelledBy ?? fieldLabel["aria-labelledby"],
+            "aria-invalid": invalid,
+            onChange: (e) => {
+              endHold.current?.();
+              setDraft(e.target.value);
+            },
+            onBlur: done,
+            onKeyDown: onKey
+          }
+        ),
+        readable && (units.length > 1 && !compact ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: pickUnit,
+            title: labels.changeUnit(unitName(unit)),
+            "aria-label": labels.changeUnit(unitName(unit)),
+            className: "shrink-0 rounded px-0.5 font-mono text-[10px] text-panel-muted-fg underline decoration-dotted underline-offset-2 hover:text-panel-fg",
+            children: unitName(unit)
+          }
+        ) : (
+          // Narrow, the unit gives its place to the arrows while they show; a unit is typed.
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "shrink-0 px-0.5 font-mono text-[10px] text-panel-muted-fg",
+                compact && "group-focus-within/length:hidden group-hover/length:hidden"
+              ),
+              children: unitName(unit)
+            }
+          )
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "span",
+          {
+            className: cn(
+              "h-full shrink-0 flex-col border-l border-panel-border",
+              compact ? "hidden group-focus-within/length:flex group-hover/length:flex" : "flex"
+            ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "input",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
                 {
-                  value: text,
-                  placeholder,
-                  spellCheck: false,
-                  onChange: (e) => setText(e.target.value),
-                  onBlur: () => text !== value && commit(text.trim()),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") commit(text.trim());
-                    if (e.key === "Escape") setText(value);
-                  },
-                  className: "min-w-0 flex-1 bg-transparent font-mono text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg"
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": labels.increase,
+                  onPointerDown: press(1),
+                  onClick: click(1),
+                  className: arrow,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronUp, { className: "size-2.5" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   type: "button",
-                  title: labels.colorPickerOpen,
-                  "aria-label": labels.colorPickerOpen,
-                  className: "relative size-5 shrink-0 overflow-hidden rounded border border-white/20 outline-none focus-visible:ring-2 focus-visible:ring-brand",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkerboard, {}),
-                    !empty && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute inset-0", style: { background: value } })
-                  ]
+                  tabIndex: -1,
+                  "aria-label": labels.decrease,
+                  onPointerDown: press(-1),
+                  onClick: click(-1),
+                  className: arrow,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronDown, { className: "size-2.5" })
                 }
-              ) })
+              )
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          PopoverContent,
-          {
-            side: "right",
-            align: "start",
-            sideOffset: 8,
-            className: "editor-dark flex w-52 flex-col gap-2.5 border border-panel-border bg-panel p-2.5 text-panel-fg",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "div",
+        )
+      ]
+    }
+  );
+}
+function BoxInput({
+  attributes,
+  attr,
+  placeholder,
+  units,
+  labels,
+  onCommit
+}) {
+  const sides = readBox(attributes, attr);
+  const defaults = readBox(placeholder ? { [attr]: placeholder } : {}, attr);
+  const symmetric = sides[0] === sides[2] && sides[1] === sides[3];
+  const [each, setEach] = (0, import_react5.useState)(!symmetric);
+  (0, import_react5.useEffect)(() => {
+    if (!symmetric) setEach(true);
+  }, [symmetric]);
+  const set = (indices, v, partial) => {
+    const next = sides.map((s, i) => s || defaults[i]);
+    for (const i of indices) next[i] = v || defaults[i];
+    onCommit(next.every((s, i) => s === defaults[i]) ? "" : boxShorthand(next), partial);
+  };
+  const fieldLabel = useFieldLabel();
+  const sideId = (0, import_react5.useId)();
+  const sideNames = [labels.sideTop, labels.sideRight, labels.sideBottom, labels.sideLeft];
+  const pairs = each ? SIDES.map((_, i) => [sideNames[i], [i]]) : [
+    [labels.sidesVertical, [0, 2]],
+    [labels.sidesHorizontal, [1, 3]]
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("grid flex-1 gap-1.5", each ? "grid-cols-4" : "grid-cols-2"), children: pairs.map(([name, indices]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex min-w-0 flex-col gap-0.5", title: name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        LengthInput,
+        {
+          value: sides[indices[0]],
+          placeholder: defaults[indices[0]] || "0",
+          units,
+          compact: each,
+          labels,
+          labelledBy: [fieldLabel["aria-labelledby"], `${sideId}-${indices[0]}`].filter(Boolean).join(" "),
+          onCommit: (v, partial) => set(indices, v, partial)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "span",
+        {
+          id: `${sideId}-${indices[0]}`,
+          className: "truncate text-center text-[10px] text-panel-muted-fg/80",
+          children: name
+        }
+      )
+    ] }, name)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setEach((v) => !v),
+        disabled: each && !symmetric,
+        "aria-pressed": each,
+        title: labels.editEachSide,
+        "aria-label": labels.editEachSide,
+        className: cn(
+          "flex size-7 shrink-0 items-center justify-center rounded-md border border-panel-border text-panel-muted-fg hover:text-panel-fg disabled:opacity-40",
+          each && "border-brand text-panel-fg"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Grid2x2, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+var ALIGN_ICONS = {
+  left: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.AlignLeft, { className: "size-3.5" }),
+  center: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.AlignCenter, { className: "size-3.5" }),
+  right: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.AlignRight, { className: "size-3.5" }),
+  justify: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.AlignJustify, { className: "size-3.5" })
+};
+function Segmented({
+  value,
+  fallback,
+  options,
+  name,
+  onCommit
+}) {
+  const current = value || fallback;
+  const iconsOnly = options.every((o) => o.value in ALIGN_ICONS);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex h-7 overflow-hidden rounded-md border border-panel-border bg-panel-elevated", children: options.map((o) => {
+    const active = current === o.value;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active,
+        title: name(o),
+        "aria-label": name(o),
+        onClick: () => o.value !== value && onCommit(o.value),
+        className: cn(
+          "flex min-w-0 flex-1 items-center justify-center px-1 text-[11px] text-panel-muted-fg transition-colors hover:text-panel-fg",
+          active && (value ? "bg-brand text-brand-fg hover:text-brand-fg" : "bg-panel-hover text-panel-fg")
+        ),
+        children: iconsOnly ? ALIGN_ICONS[o.value] : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: name(o) })
+      },
+      o.value
+    );
+  }) });
+}
+function Select({
+  value,
+  fallback,
+  options,
+  name,
+  onCommit
+}) {
+  const known = !value || options.some((o) => o.value === value);
+  const fallbackOption = options.find((o) => o.value === fallback);
+  const field = useFieldLabel();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "select",
+    {
+      className: cn(FIELD, "px-1.5"),
+      ...field,
+      value: value || "",
+      onChange: (e) => onCommit(e.target.value),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", children: fallbackOption ? name(fallbackOption) : "\u2014" }),
+        !known && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value, children: value }),
+        options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: o.value, children: name(o) }, o.value))
+      ]
+    }
+  );
+}
+function Toggle({
+  checked,
+  label,
+  onCommit
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Switch,
+    {
+      checked,
+      onCheckedChange: onCommit,
+      "aria-label": label,
+      className: "justify-self-end data-checked:bg-brand data-unchecked:bg-panel-border"
+    }
+  );
+}
+
+// src/components/editor/mjml-attributes.ts
+var ALLOWED_ATTRIBUTES = {
+  "mj-body": [
+    "background-color",
+    "width"
+  ],
+  "mj-wrapper": [
+    "background-color",
+    "background-position",
+    "background-position-x",
+    "background-position-y",
+    "background-repeat",
+    "background-size",
+    "background-url",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "direction",
+    "full-width",
+    "gap",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "text-align",
+    "text-padding"
+  ],
+  "mj-section": [
+    "background-color",
+    "background-position",
+    "background-position-x",
+    "background-position-y",
+    "background-repeat",
+    "background-size",
+    "background-url",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "direction",
+    "full-width",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "text-align",
+    "text-padding"
+  ],
+  "mj-column": [
+    "background-color",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "direction",
+    "inner-background-color",
+    "inner-border",
+    "inner-border-bottom",
+    "inner-border-left",
+    "inner-border-radius",
+    "inner-border-right",
+    "inner-border-top",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "vertical-align",
+    "width"
+  ],
+  "mj-group": [
+    "background-color",
+    "direction",
+    "vertical-align",
+    "width"
+  ],
+  "mj-text": [
+    "align",
+    "background-color",
+    "color",
+    "container-background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "height",
+    "letter-spacing",
+    "line-height",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "text-decoration",
+    "text-transform",
+    "vertical-align"
+  ],
+  "mj-button": [
+    "align",
+    "background-color",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "color",
+    "container-background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "height",
+    "href",
+    "inner-padding",
+    "letter-spacing",
+    "line-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "target",
+    "text-align",
+    "text-decoration",
+    "text-transform",
+    "title",
+    "vertical-align",
+    "width"
+  ],
+  "mj-image": [
+    "align",
+    "alt",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "container-background-color",
+    "fluid-on-mobile",
+    "font-size",
+    "height",
+    "href",
+    "max-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "sizes",
+    "src",
+    "srcset",
+    "target",
+    "title",
+    "usemap",
+    "width"
+  ],
+  "mj-divider": [
+    "align",
+    "border-color",
+    "border-style",
+    "border-width",
+    "container-background-color",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "width"
+  ],
+  "mj-spacer": [
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-right",
+    "border-top",
+    "container-background-color",
+    "height",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top"
+  ],
+  "mj-social": [
+    "align",
+    "border-radius",
+    "color",
+    "container-background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "icon-height",
+    "icon-padding",
+    "icon-size",
+    "inner-padding",
+    "line-height",
+    "mode",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "table-layout",
+    "text-decoration",
+    "text-padding",
+    "vertical-align"
+  ],
+  "mj-social-element": [
+    "align",
+    "alt",
+    "background-color",
+    "border-radius",
+    "color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "href",
+    "icon-height",
+    "icon-padding",
+    "icon-position",
+    "icon-size",
+    "line-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "sizes",
+    "src",
+    "srcset",
+    "target",
+    "text-decoration",
+    "text-padding",
+    "title",
+    "vertical-align"
+  ],
+  "mj-hero": [
+    "background-color",
+    "background-height",
+    "background-position",
+    "background-url",
+    "background-width",
+    "border-radius",
+    "container-background-color",
+    "height",
+    "inner-background-color",
+    "inner-padding",
+    "inner-padding-bottom",
+    "inner-padding-left",
+    "inner-padding-right",
+    "inner-padding-top",
+    "mode",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "vertical-align"
+  ],
+  "mj-navbar": [
+    "align",
+    "base-url",
+    "hamburger",
+    "ico-align",
+    "ico-close",
+    "ico-color",
+    "ico-font-family",
+    "ico-font-size",
+    "ico-line-height",
+    "ico-open",
+    "ico-padding",
+    "ico-padding-bottom",
+    "ico-padding-left",
+    "ico-padding-right",
+    "ico-padding-top",
+    "ico-text-decoration",
+    "ico-text-transform",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top"
+  ],
+  "mj-navbar-link": [
+    "color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "href",
+    "letter-spacing",
+    "line-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "target",
+    "text-decoration",
+    "text-transform"
+  ]
+};
+var ALWAYS_ALLOWED = /* @__PURE__ */ new Set(["mj-class", "css-class", "id", "style"]);
+var START_TAG = /<[a-z][^\s/>]*(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+var ATTRIBUTE = /\s+([^\s"'>/=]+)(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?/g;
+function withoutEditorProps(mjml) {
+  return mjml.replace(
+    START_TAG,
+    (tag) => tag.replace(
+      ATTRIBUTE,
+      (attribute, name) => name.toLowerCase().startsWith("data-gjs-") ? "" : attribute
+    )
+  );
+}
+function withClosedTags(mjml) {
+  return mjml.replace(START_TAG, (tag) => {
+    const selfClosed = /^<(mj-[\w-]+)([\s\S]*?)\s*\/>$/i.exec(tag);
+    return selfClosed ? `<${selfClosed[1]}${selfClosed[2]}></${selfClosed[1]}>` : tag;
+  });
+}
+var TABLE = /<!--[\s\S]*?(?:-->|$)|(<mj-table\b(?:[^>"']|"[^"]*"|'[^']*')*>)((?:<!--[\s\S]*?-->|(?!<!--)[\s\S])*?)(<\/mj-table\s*>)/gi;
+function withTableRowsKept(mjml) {
+  return mjml.replace(
+    TABLE,
+    (match, open, rows, close) => open ? `${open}<template>${rows}</template>${close}` : match
+  );
+}
+function sourceForEditor(mjml) {
+  const cleaned = withoutEditorProps(mjml);
+  return { mjml: withTableRowsKept(withClosedTags(cleaned)), repaired: cleaned !== mjml };
+}
+function illegalAttributes(tag, attributes) {
+  const allowed = ALLOWED_ATTRIBUTES[tag];
+  if (!allowed) return [];
+  return Object.keys(attributes).filter((a) => !ALWAYS_ALLOWED.has(a) && !allowed.includes(a));
+}
+var NAMED_COLORS = /* @__PURE__ */ new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "inherit",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "transparent",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen"
+]);
+
+// src/components/editor/ColorField.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PRESETS = [
+  "#000000",
+  "#374151",
+  "#6b7280",
+  "#d1d5db",
+  "#f3f4f6",
+  "#ffffff",
+  "#dc2626",
+  "#ea580c",
+  "#ca8a04",
+  "#16a34a",
+  "#0284c7",
+  "#4f46e5",
+  "#9333ea",
+  "#db2777"
+];
+var eyeDropper = () => globalThis.EyeDropper;
+function ColorField({
+  value,
+  placeholder,
+  documentColors: documentColors2,
+  labels,
+  onChange
+}) {
+  const field = useFieldLabel();
+  const [text, setText] = (0, import_react6.useState)(value);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [used, setUsed] = (0, import_react6.useState)([]);
+  const pressed = (0, import_react6.useRef)(false);
+  const dragged = (0, import_react6.useRef)(null);
+  const fieldRef = (0, import_react6.useRef)(null);
+  const anchor = (0, import_react6.useRef)({
+    getBoundingClientRect: () => {
+      const field2 = fieldRef.current?.getBoundingClientRect() ?? new DOMRect();
+      const panel = fieldRef.current?.closest(".editor-dark")?.getBoundingClientRect();
+      return new DOMRect(panel?.right ?? field2.right, field2.top, 0, field2.height);
+    }
+  });
+  (0, import_react6.useEffect)(() => setText(value), [value]);
+  const latestOnChange = (0, import_react6.useRef)(onChange);
+  latestOnChange.current = onChange;
+  const release = (0, import_react6.useCallback)(() => {
+    pressed.current = false;
+    if (dragged.current !== null) latestOnChange.current(dragged.current, false);
+    dragged.current = null;
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    document.addEventListener("lostpointercapture", release);
+    return () => {
+      document.removeEventListener("lostpointercapture", release);
+      release();
+    };
+  }, [release]);
+  const hex = toHex(value) ?? toHex(placeholder ?? "") ?? "#000000";
+  const translucent = hex.length === 9;
+  const shown = value || placeholder || "";
+  const commit = (next) => {
+    dragged.current = null;
+    const color = mjmlColor(next);
+    if (color === null) return setText(value);
+    setText(color);
+    onChange(color, false);
+  };
+  const drag = (picked) => {
+    const next = mjmlColor(picked) ?? picked;
+    setText(next);
+    if (!pressed.current) return commit(next);
+    dragged.current = next;
+    onChange(next, true);
+  };
+  const pickFromScreen = async () => {
+    const Ctor = eyeDropper();
+    if (!Ctor) return;
+    try {
+      const { sRGBHex } = await new Ctor().open();
+      commit(sRGBHex);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) setUsed(documentColors2());
+        else if (text.trim() !== value) commit(text.trim());
+        setOpen(next);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            ref: fieldRef,
+            className: "flex h-8 w-full items-center gap-1.5 rounded-md border border-panel-border bg-panel-elevated pr-1.5 pl-2 focus-within:border-brand",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "input",
+                {
+                  value: text,
+                  placeholder,
+                  spellCheck: false,
+                  ...field,
+                  onChange: (e) => setText(e.target.value),
+                  onBlur: () => text !== value && commit(text.trim()),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") commit(text.trim());
+                    if (e.key === "Escape") setText(value);
+                  },
+                  className: "min-w-0 flex-1 bg-transparent font-mono text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  title: labels.colorPickerOpen,
+                  "aria-label": labels.colorPickerOpen,
+                  className: "relative size-5 shrink-0 overflow-hidden rounded border border-white/20 outline-none focus-visible:ring-2 focus-visible:ring-brand",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkerboard, {}),
+                    mjmlColor(shown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "absolute inset-0", style: { background: shown } })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          PopoverContent,
+          {
+            side: "right",
+            align: "start",
+            sideOffset: 8,
+            className: "editor-dark flex w-52 flex-col gap-2.5 border border-panel-border bg-panel p-2.5 text-panel-fg",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "div",
                 {
                   onPointerDownCapture: (e) => {
                     pressed.current = true;
                     e.target.setPointerCapture(e.pointerId);
                   },
-                  children: translucent ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_colorful.HexAlphaColorPicker, { color: hex, onChange: drag, className: "color-field-picker" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_colorful.HexColorPicker, { color: hex, onChange: drag, className: "color-field-picker" })
+                  children: translucent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_colorful.HexAlphaColorPicker, { color: hex, onChange: drag, className: "color-field-picker" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_colorful.HexColorPicker, { color: hex, onChange: drag, className: "color-field-picker" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "span",
                   {
                     className: "size-6 shrink-0 rounded border border-white/20",
                     style: { background: hex }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "input",
                   {
                     value: text,
                     spellCheck: false,
+                    ...field,
                     onChange: (e) => setText(e.target.value),
                     onKeyDown: (e) => e.key === "Enter" && commit(text.trim()),
                     onBlur: () => text !== value && commit(text.trim()),
                     className: "h-6 min-w-0 flex-1 rounded border border-panel-border bg-panel-elevated px-1.5 font-mono text-[11px] outline-none focus:border-brand"
                   }
                 ),
-                eyeDropper() && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                eyeDropper() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1189,11 +2530,11 @@ function ColorField({
                     title: labels.colorPickerEyedropper,
                     "aria-label": labels.colorPickerEyedropper,
                     className: "flex size-6 shrink-0 items-center justify-center rounded border border-panel-border bg-panel-elevated text-panel-muted-fg hover:text-panel-fg",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Pipette, { className: "size-3" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Pipette, { className: "size-3" })
                   }
                 )
               ] }),
-              used.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              used.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Swatches,
                 {
                   title: labels.colorPickerDocument,
@@ -1202,7 +2543,7 @@ function ColorField({
                   onPick: commit
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Swatches,
                 {
                   title: labels.colorPickerPresets,
@@ -1226,10 +2567,10 @@ function Swatches({
   onPick,
   transparentLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mb-1 text-[10px] font-medium tracking-wide text-panel-muted-fg uppercase", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid grid-cols-8 gap-1", children: [
-      colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mb-1 text-[10px] font-medium tracking-wide text-panel-muted-fg uppercase", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid grid-cols-8 gap-1", children: [
+      colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
@@ -1243,134 +2584,1630 @@ function Swatches({
         },
         color
       )),
-      transparentLabel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      transparentLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          type: "button",
+          title: transparentLabel,
+          onClick: () => onPick("transparent"),
+          className: "relative aspect-square overflow-hidden rounded border border-white/15 outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-brand",
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkerboard, {})
+        }
+      )
+    ] })
+  ] });
+}
+function Checkerboard() {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "span",
+    {
+      className: "absolute inset-0",
+      style: {
+        backgroundImage: "repeating-conic-gradient(#9ca3af 0% 25%, #e5e7eb 0% 50%)",
+        backgroundSize: "8px 8px"
+      }
+    }
+  );
+}
+function mjmlColor(value) {
+  const v = value.trim();
+  if (v === "") return "";
+  if (NAMED_COLORS.has(v.toLowerCase())) return v.toLowerCase();
+  const hex = toHex(v);
+  if (!hex) return null;
+  if (hex.length === 7) return hex;
+  const [r, g, b, a] = [1, 3, 5, 7].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  return `rgba(${r},${g},${b},${Number((a / 255).toFixed(2))})`;
+}
+function toHex(value, { opaque = false } = {}) {
+  const v = value.trim().toLowerCase();
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(v);
+  if (short) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
+  if (/^#[0-9a-f]{6}$/.test(v)) return v;
+  if (/^#[0-9a-f]{8}$/.test(v)) return opaque || v.endsWith("ff") ? v.slice(0, 7) : v;
+  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)(?:[\s,/]+([\d.]+%?))?/.exec(v);
+  if (rgb) {
+    const channels = [rgb[1], rgb[2], rgb[3]].map((n) => Math.min(255, Number(n)));
+    const alphaText = rgb[4];
+    const alpha = alphaText?.endsWith("%") ? parseFloat(alphaText) / 100 : Number(alphaText ?? 1);
+    if (!opaque && alpha < 1) channels.push(Math.round(Math.max(0, alpha) * 255));
+    return `#${channels.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+  }
+  return null;
+}
+
+// src/components/editor/ImageField.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ImageField({
+  value,
+  labels,
+  onChoose,
+  onClear
+}) {
+  const url = imageUrl(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onChoose,
+        title: labels.chooseImage,
+        className: "group relative block w-full overflow-hidden rounded-md border border-panel-border bg-panel-elevated outline-none focus-visible:ring-2 focus-visible:ring-brand",
+        children: [
+          url ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: url, alt: "", className: "h-24 w-full bg-black/25 object-contain" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex h-16 flex-col items-center justify-center gap-1 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ImageIcon, { className: "size-5" }),
+            labels.chooseImage
+          ] }),
+          url && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-xs font-medium text-white opacity-0 transition group-hover:opacity-100", children: labels.chooseImage })
+        ]
+      }
+    ),
+    value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        title: labels.imageFieldRemove,
+        "aria-label": labels.imageFieldRemove,
+        className: "absolute top-1 right-1 flex size-5 items-center justify-center rounded bg-black/60 text-white hover:bg-black/80",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.X, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function imageUrl(value) {
+  const v = value.trim();
+  if (!v || v === "none") return null;
+  const css = /^url\(\s*(['"]?)(.*?)\1\s*\)$/i.exec(v);
+  if (css) return css[2] || null;
+  return /^[a-z-]+\(/i.test(v) ? null : v;
+}
+
+// src/components/editor/inspector/schema.ts
+var PX = ["px"];
+var PX_PCT = ["px", "%"];
+var LINE_HEIGHT = ["", "px", "%"];
+var LETTER_SPACING = ["px", "em"];
+var ALIGN = [
+  { value: "left", label: "alignLeft" },
+  { value: "center", label: "alignCenter" },
+  { value: "right", label: "alignRight" }
+];
+var VERTICAL_ALIGN = [
+  { value: "top", label: "alignTop" },
+  { value: "middle", label: "alignMiddle" },
+  { value: "bottom", label: "alignBottom" }
+];
+var FONTS = [
+  { value: "Ubuntu, Helvetica, Arial, sans-serif", label: "Ubuntu" },
+  { value: "Arial, Helvetica, sans-serif", label: "Arial" },
+  { value: "Helvetica, Arial, sans-serif", label: "Helvetica" },
+  { value: "Verdana, Geneva, sans-serif", label: "Verdana" },
+  { value: "Tahoma, Geneva, sans-serif", label: "Tahoma" },
+  { value: "'Trebuchet MS', Helvetica, sans-serif", label: "Trebuchet MS" },
+  { value: "Georgia, 'Times New Roman', serif", label: "Georgia" },
+  { value: "'Times New Roman', Times, serif", label: "Times New Roman" },
+  { value: "'Courier New', Courier, monospace", label: "Courier New" }
+];
+var WEIGHTS = [
+  { value: "normal", label: "weightRegular" },
+  { value: "500", label: "weightMedium" },
+  { value: "600", label: "weightSemibold" },
+  { value: "bold", label: "weightBold" }
+];
+var TEXT_TRANSFORM = [
+  { value: "none", label: "caseNone" },
+  { value: "uppercase", label: "caseUpper" },
+  { value: "lowercase", label: "caseLower" },
+  { value: "capitalize", label: "caseCapitalize" }
+];
+var TARGET = [
+  { value: "_blank", label: "targetNewTab" },
+  { value: "_self", label: "targetSameTab" }
+];
+var BACKGROUND_POSITION = [
+  { value: "top left", label: "positionTopLeft" },
+  { value: "top center", label: "positionTopCenter" },
+  { value: "top right", label: "positionTopRight" },
+  { value: "center left", label: "positionCenterLeft" },
+  { value: "center center", label: "positionCenter" },
+  { value: "center right", label: "positionCenterRight" },
+  { value: "bottom left", label: "positionBottomLeft" },
+  { value: "bottom center", label: "positionBottomCenter" },
+  { value: "bottom right", label: "positionBottomRight" }
+];
+var NETWORKS = [
+  { value: "facebook", label: "Facebook" },
+  { value: "instagram", label: "Instagram" },
+  { value: "x", label: "X" },
+  { value: "linkedin", label: "LinkedIn" },
+  { value: "youtube", label: "YouTube" },
+  { value: "pinterest", label: "Pinterest" },
+  { value: "github", label: "GitHub" },
+  { value: "web", label: "networkWebsite" },
+  { value: "snapchat", label: "Snapchat" },
+  { value: "vimeo", label: "Vimeo" },
+  { value: "medium", label: "Medium" },
+  { value: "dribbble", label: "Dribbble" },
+  { value: "soundcloud", label: "SoundCloud" },
+  { value: "tumblr", label: "Tumblr" },
+  { value: "xing", label: "Xing" },
+  { value: "custom", label: "networkCustom" }
+];
+var hasBackgroundImage = (a) => !!a["background-url"];
+var SECTION_FIELDS = [
+  {
+    attr: "full-width",
+    label: "fullWidth",
+    group: "layout",
+    control: { type: "toggle", on: "full-width" }
+  },
+  {
+    attr: "padding",
+    label: "padding",
+    group: "spacing",
+    control: { type: "box", units: PX_PCT },
+    default: "20px 0"
+  },
+  {
+    attr: "background-color",
+    label: "backgroundColor",
+    group: "style",
+    control: { type: "color" }
+  },
+  { attr: "background-url", label: "backgroundImage", group: "style", control: { type: "image" } },
+  {
+    attr: "background-size",
+    label: "backgroundSize",
+    group: "style",
+    control: {
+      type: "segmented",
+      options: [
+        { value: "cover", label: "sizeCover" },
+        { value: "contain", label: "sizeContain" },
+        { value: "auto", label: "sizeAuto" }
+      ]
+    },
+    default: "auto",
+    when: hasBackgroundImage
+  },
+  {
+    attr: "background-repeat",
+    label: "backgroundRepeat",
+    group: "style",
+    control: {
+      type: "segmented",
+      options: [
+        { value: "repeat", label: "repeatTile" },
+        { value: "no-repeat", label: "repeatOnce" }
+      ]
+    },
+    default: "repeat",
+    when: hasBackgroundImage
+  },
+  {
+    attr: "background-position",
+    label: "backgroundPosition",
+    group: "style",
+    control: { type: "select", options: BACKGROUND_POSITION },
+    default: "top center",
+    when: hasBackgroundImage
+  },
+  {
+    attr: "border-radius",
+    label: "cornerRadius",
+    group: "style",
+    control: { type: "length", units: PX_PCT }
+  }
+];
+var SCHEMA = {
+  "mj-body": [
+    { attr: "width", label: "contentWidth", group: "layout", control: { type: "length", units: PX }, default: "600px" },
+    { attr: "background-color", label: "pageBackground", group: "style", control: { type: "color" } }
+  ],
+  "mj-wrapper": [
+    ...SECTION_FIELDS,
+    { attr: "gap", label: "gap", group: "advanced", control: { type: "length", units: PX } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
+  ],
+  "mj-section": [
+    ...SECTION_FIELDS,
+    { attr: "text-align", label: "alignColumns", group: "advanced", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "direction", label: "reverseColumns", group: "advanced", control: { type: "toggle", on: "rtl" } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
+  ],
+  "mj-column": [
+    { attr: "vertical-align", label: "verticalAlign", group: "layout", control: { type: "segmented", options: VERTICAL_ALIGN }, default: "top" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT } },
+    { attr: "background-color", label: "backgroundColor", group: "style", control: { type: "color" } },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT } },
+    { attr: "width", label: "width", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "inner-background-color", label: "innerBackground", group: "advanced", control: { type: "color" } },
+    { attr: "inner-border-radius", label: "innerCornerRadius", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } },
+    { attr: "inner-border", label: "innerBorder", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
+  ],
+  "mj-text": [
+    {
+      attr: "align",
+      label: "align",
+      group: "layout",
+      control: { type: "segmented", options: [...ALIGN, { value: "justify", label: "alignJustify" }] },
+      default: "left"
+    },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "font-family", label: "font", group: "style", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-size", label: "fontSize", group: "style", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "font-weight", label: "fontWeight", group: "style", control: { type: "select", options: WEIGHTS } },
+    { attr: "color", label: "textColor", group: "style", control: { type: "color" }, default: "#000000" },
+    { attr: "line-height", label: "lineHeight", group: "style", control: { type: "length", units: LINE_HEIGHT }, default: "1" },
+    { attr: "container-background-color", label: "blockBackground", group: "style", control: { type: "color" } },
+    { attr: "letter-spacing", label: "letterSpacing", group: "advanced", control: { type: "length", units: LETTER_SPACING, negative: true } },
+    { attr: "text-transform", label: "textTransform", group: "advanced", control: { type: "select", options: TEXT_TRANSFORM } }
+  ],
+  "mj-button": [
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "inner-padding", label: "buttonPadding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "padding", label: "spaceAround", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "background-color", label: "buttonColor", group: "style", control: { type: "color" }, default: "#414141" },
+    { attr: "color", label: "textColor", group: "style", control: { type: "color" }, default: "#ffffff" },
+    { attr: "font-size", label: "fontSize", group: "style", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT }, default: "3px" },
+    { attr: "width", label: "width", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "font-family", label: "font", group: "advanced", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-weight", label: "fontWeight", group: "advanced", control: { type: "select", options: WEIGHTS }, default: "normal" },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "title", label: "tooltip", group: "advanced", control: { type: "text" } },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" }, default: "none" },
+    { attr: "letter-spacing", label: "letterSpacing", group: "advanced", control: { type: "length", units: LETTER_SPACING, negative: true } },
+    { attr: "text-transform", label: "textTransform", group: "advanced", control: { type: "select", options: TEXT_TRANSFORM }, default: "none" },
+    { attr: "line-height", label: "lineHeight", group: "advanced", control: { type: "length", units: LINE_HEIGHT }, default: "120%" }
+  ],
+  "mj-image": [
+    { attr: "src", label: "image", group: "content", control: { type: "image" } },
+    { attr: "alt", label: "altText", group: "content", control: { type: "text" } },
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    { attr: "width", label: "width", group: "layout", control: { type: "length", units: PX } },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "fluid-on-mobile", label: "fluidOnMobile", group: "layout", control: { type: "toggle", on: "true" } },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT } },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "title", label: "tooltip", group: "advanced", control: { type: "text" } },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" }, default: "0" },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-divider": [
+    { attr: "width", label: "width", group: "layout", control: { type: "length", units: PX_PCT }, default: "100%" },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "border-color", label: "lineColor", group: "style", control: { type: "color" }, default: "#000000" },
+    { attr: "border-width", label: "thickness", group: "style", control: { type: "length", units: PX }, default: "4px" },
+    {
+      attr: "border-style",
+      label: "lineStyle",
+      group: "style",
+      control: {
+        type: "segmented",
+        options: [
+          { value: "solid", label: "lineSolid" },
+          { value: "dashed", label: "lineDashed" },
+          { value: "dotted", label: "lineDotted" }
+        ]
+      },
+      default: "solid"
+    },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-spacer": [
+    { attr: "height", label: "height", group: "layout", control: { type: "length", units: PX }, default: "20px" },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-social": [
+    {
+      attr: "mode",
+      label: "socialMode",
+      group: "layout",
+      control: {
+        type: "segmented",
+        options: [
+          { value: "horizontal", label: "modeHorizontal" },
+          { value: "vertical", label: "modeVertical" }
+        ]
+      },
+      default: "horizontal"
+    },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "inner-padding", label: "iconSpacing", group: "spacing", control: { type: "box", units: PX_PCT } },
+    { attr: "icon-size", label: "iconSize", group: "style", control: { type: "length", units: PX_PCT }, default: "20px" },
+    // A single value: mj-social's border-radius is not a 4-side shorthand.
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT }, default: "3px" },
+    { attr: "font-family", label: "font", group: "advanced", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-size", label: "fontSize", group: "advanced", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "color", label: "textColor", group: "advanced", control: { type: "color" }, default: "#333333" },
+    { attr: "line-height", label: "lineHeight", group: "advanced", control: { type: "length", units: LINE_HEIGHT }, default: "22px" },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-social-element": [
+    { attr: "name", label: "network", group: "content", control: { type: "network", networks: NETWORKS } },
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    {
+      attr: "src",
+      label: "customIcon",
+      group: "content",
+      control: { type: "image" },
+      when: (a) => (a.name ?? "").startsWith("custom") || !!a.src
+    },
+    { attr: "alt", label: "altText", group: "content", control: { type: "text" } },
+    { attr: "background-color", label: "iconColor", group: "style", control: { type: "color" } },
+    { attr: "icon-size", label: "iconSize", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "border-radius", label: "cornerRadius", group: "advanced", control: { type: "length", units: PX }, default: "3px" },
+    { attr: "padding", label: "padding", group: "advanced", control: { type: "box", units: PX_PCT }, default: "4px" },
+    { attr: "icon-position", label: "iconPosition", group: "advanced", control: { type: "segmented", options: [{ value: "left", label: "alignLeft" }, { value: "right", label: "alignRight" }] }, default: "left" },
+    { attr: "title", label: "tooltip", group: "advanced", control: { type: "text" } },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } }
+  ],
+  "mj-hero": [
+    { attr: "background-url", label: "backgroundImage", group: "content", control: { type: "image" } },
+    {
+      attr: "mode",
+      label: "heroMode",
+      group: "content",
+      control: {
+        type: "segmented",
+        options: [
+          { value: "fixed-height", label: "heroFixed" },
+          { value: "fluid-height", label: "heroFluid" }
+        ]
+      },
+      default: "fixed-height"
+    },
+    {
+      attr: "height",
+      label: "height",
+      group: "layout",
+      control: { type: "length", units: PX_PCT },
+      default: "0px",
+      when: (a) => (a.mode ?? "fixed-height") === "fixed-height"
+    },
+    {
+      attr: "background-width",
+      label: "backgroundWidth",
+      group: "layout",
+      control: { type: "length", units: PX_PCT },
+      when: (a) => a.mode === "fluid-height"
+    },
+    {
+      attr: "background-height",
+      label: "backgroundHeight",
+      group: "layout",
+      control: { type: "length", units: PX_PCT },
+      when: (a) => a.mode === "fluid-height"
+    },
+    { attr: "vertical-align", label: "verticalAlign", group: "layout", control: { type: "segmented", options: VERTICAL_ALIGN }, default: "top" },
+    { attr: "background-position", label: "backgroundPosition", group: "layout", control: { type: "select", options: BACKGROUND_POSITION }, default: "center center" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "0px" },
+    { attr: "background-color", label: "fallbackColor", group: "style", control: { type: "color" }, default: "#ffffff" },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT } },
+    { attr: "inner-padding", label: "contentPadding", group: "advanced", control: { type: "box", units: PX_PCT } },
+    { attr: "inner-background-color", label: "contentBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-navbar": [
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "hamburger", label: "hamburger", group: "layout", control: { type: "toggle", on: "hamburger" } },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT } },
+    { attr: "ico-color", label: "menuIconColor", group: "advanced", control: { type: "color" }, default: "#000000", when: (a) => !!a.hamburger },
+    { attr: "ico-font-size", label: "menuIconSize", group: "advanced", control: { type: "length", units: PX_PCT }, default: "30px", when: (a) => !!a.hamburger },
+    { attr: "ico-align", label: "menuIconAlign", group: "advanced", control: { type: "segmented", options: ALIGN }, default: "center", when: (a) => !!a.hamburger },
+    { attr: "base-url", label: "baseUrl", group: "advanced", control: { type: "link" } }
+  ],
+  "mj-navbar-link": [
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "15px 10px" },
+    { attr: "color", label: "textColor", group: "style", control: { type: "color" }, default: "#000000" },
+    { attr: "font-family", label: "font", group: "style", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-size", label: "fontSize", group: "style", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "font-weight", label: "fontWeight", group: "style", control: { type: "select", options: WEIGHTS }, default: "normal" },
+    { attr: "text-transform", label: "textTransform", group: "style", control: { type: "select", options: TEXT_TRANSFORM }, default: "uppercase" },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } },
+    { attr: "letter-spacing", label: "letterSpacing", group: "advanced", control: { type: "length", units: LETTER_SPACING, negative: true } },
+    { attr: "line-height", label: "lineHeight", group: "advanced", control: { type: "length", units: LINE_HEIGHT }, default: "22px" }
+  ]
+};
+
+// src/components/editor/layers.ts
+var svg = (paths) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+var ICONS = {
+  "mj-wrapper": svg(
+    '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="10" x="7" y="7" rx="1"/>'
+  ),
+  "mj-section": svg('<rect width="20" height="12" x="2" y="6" rx="2"/>'),
+  "mj-hero": svg('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/>'),
+  "mj-group": svg(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/>'
+  ),
+  "mj-column": svg('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/>'),
+  "mj-text": svg('<path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/>'),
+  "mj-image": svg(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>'
+  ),
+  "mj-button": svg('<rect width="20" height="10" x="2" y="7" rx="3"/><path d="M8 12h8"/>'),
+  "mj-divider": svg('<path d="M5 12h14"/>'),
+  "mj-spacer": svg('<path d="M12 3v18"/><path d="m8 17 4 4 4-4"/><path d="m8 7 4-4 4 4"/>'),
+  "mj-social": svg(
+    '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98"/><path d="m15.41 6.51-6.82 3.98"/>'
+  ),
+  "mj-social-element": svg(
+    '<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/>'
+  ),
+  "mj-navbar": svg('<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>'),
+  "mj-navbar-link": svg(
+    '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'
+  ),
+  "mj-raw": svg('<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>'),
+  "mj-table": svg(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M12 3v18"/>'
+  )
+};
+function tagOf(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+function textOf(c) {
+  const template = document.createElement("template");
+  template.innerHTML = c.getInnerHTML();
+  template.content.querySelectorAll("br, p, div, li, tr, h1, h2, h3, h4, h5, h6").forEach((el) => el.after("\n"));
+  const lines = (template.content.textContent ?? "").split("\n");
+  const first = lines.map((l) => l.replace(/\s+/g, " ").trim()).find(Boolean) ?? "";
+  return first.slice(0, 60);
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+}
+function layerName(c, labels) {
+  const tag = tagOf(c);
+  const kind = labels.elementNames[tag] ?? tag.replace(/^mj-/, "");
+  const attributes = c.getAttributes();
+  switch (tag) {
+    case "mj-text":
+    case "mj-button":
+    case "mj-navbar-link":
+      return textOf(c) || kind;
+    case "mj-image":
+      return attributes.alt?.trim() || kind;
+    case "mj-social-element": {
+      const { network } = parseNetwork(String(attributes.name ?? ""));
+      const option = NETWORKS.find((o) => o.value === network && network !== "custom");
+      return textOf(c) || option && (labels.inspectorLabels[option.label] ?? option.label) || kind;
+    }
+    case "mj-section":
+    case "mj-wrapper":
+    case "mj-hero": {
+      let words = "";
+      c.onAll((d) => {
+        if (!words && d !== c && ["mj-text", "mj-button"].includes(tagOf(d))) words = textOf(d);
+      });
+      return words || kind;
+    }
+    case "mj-column": {
+      const columns = c.parent()?.components().filter((s) => tagOf(s) === "mj-column") ?? [];
+      return columns.length > 1 ? `${kind} ${columns.indexOf(c) + 1}` : kind;
+    }
+    default:
+      return kind;
+  }
+}
+var CONTENT = /* @__PURE__ */ new Set(["mj-text", "mj-button", "mj-navbar-link", "mj-social-element", "mj-raw"]);
+function badgeLabel(labels) {
+  return (c) => {
+    const tag = tagOf(c);
+    const icon = ICONS[tag] ? `<div class="gjs-badge__icon">${ICONS[tag]}</div>` : "";
+    const kind = labels.elementNames[tag] ?? tag.replace(/^mj-/, "");
+    return `${icon}<div class="gjs-badge__name">${escapeHtml(kind)}</div>`;
+  };
+}
+function setupLayerNames(editor, labels) {
+  const hideContent = (c) => c.onAll((d) => d !== c && d.set("layerable", false, { avoidStore: true }));
+  for (const type of editor.Components.getTypes()) {
+    if (!type.id.startsWith("mj-")) continue;
+    editor.Components.addType(type.id, {
+      model: {
+        // Ours whatever the element says: GrapesJS writes it into the row's markup as it is.
+        getIcon() {
+          return ICONS[type.id] ?? "";
+        },
+        // GrapesJS writes the name into the row's markup unescaped, and it is document text.
+        getName() {
+          return escapeHtml(layerName(this, labels));
+        },
+        ...CONTENT.has(type.id) && {
+          // Editing a text replaces its children, so they are hidden again as they arrive.
+          init() {
+            hideContent(this);
+            this.listenTo(this.components(), "add reset", () => hideContent(this));
+          }
+        }
+      },
+      // Runs the plugin's own `init` as well.
+      extendFn: ["init"]
+    });
+  }
+  let pending = false;
+  editor.on("update component:add component:remove", () => {
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(() => {
+      pending = false;
+      editor.Layers.getRoot()?.onAll((c) => {
+        const view = c.viewLayer;
+        const el = view?.getInputName?.();
+        const name = layerName(c, labels);
+        if (!el || el.textContent === name) return;
+        el.textContent = name;
+        el.parentElement?.setAttribute("title", name);
+      });
+    });
+  });
+}
+
+// src/components/editor/inspector/StructureSection.tsx
+var import_lucide_react8 = require("lucide-react");
+
+// src/components/editor/inspector/structure.ts
+function tagOf2(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+var COLUMN_RATIOS = {
+  2: [
+    [1, 1],
+    [1, 2],
+    [2, 1]
+  ],
+  3: [
+    [1, 1, 1],
+    [1, 2, 1]
+  ]
+};
+function columnsOf(section) {
+  const children = section.components().models;
+  return children.length > 0 && children.every((c) => tagOf2(c) === "mj-column") ? children : null;
+}
+function ratioWidths(ratio) {
+  if (ratio.every((r) => r === ratio[0])) return null;
+  const total = ratio.reduce((a, b) => a + b, 0);
+  return ratio.map((r) => `${Math.round(r / total * 1e4) / 100}%`);
+}
+function currentRatio(columns) {
+  const widths = columns.map((c) => String(c.getAttributes().width ?? ""));
+  return COLUMN_RATIOS[columns.length]?.find((ratio) => {
+    const want = ratioWidths(ratio);
+    if (!want) return widths.every((w) => w === "");
+    return widths.every(
+      (w, i) => /%$/.test(w) && Math.abs(parseFloat(w) - parseFloat(want[i])) < 0.5
+    );
+  }) ?? null;
+}
+function setRatio(columns, ratio) {
+  const widths = ratioWidths(ratio);
+  columns.forEach((c, i) => {
+    if (widths) c.addAttributes({ width: widths[i] });
+    else c.removeAttributes(["width"]);
+  });
+}
+var PROFILE_URLS = {
+  facebook: "https://facebook.com/",
+  instagram: "https://instagram.com/",
+  x: "https://x.com/",
+  linkedin: "https://linkedin.com/",
+  youtube: "https://youtube.com/",
+  pinterest: "https://pinterest.com/",
+  github: "https://github.com/"
+};
+function addNetwork(social) {
+  const present = new Set(
+    social.components().map((c) => String(c.getAttributes().name ?? "").replace(/-noshare$/, ""))
+  );
+  const network = Object.keys(PROFILE_URLS).find((n) => !present.has(n)) ?? "facebook";
+  return social.append(
+    `<mj-social-element name="${network}-noshare" href="${PROFILE_URLS[network]}"></mj-social-element>`
+  )[0];
+}
+function addNavbarLink(navbar, text) {
+  return navbar.append(`<mj-navbar-link>${escapeHtml2(text)}</mj-navbar-link>`)[0];
+}
+function escapeHtml2(s) {
+  return s.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+}
+
+// src/components/editor/inspector/StructureSection.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function tagOf3(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+function StructureSection({
+  editor,
+  component,
+  labels,
+  locked
+}) {
+  switch (tagOf3(component)) {
+    case "mj-section":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnWidths, { component, labels, locked });
+    case "mj-social":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Children,
+        {
+          editor,
+          component,
+          labels,
+          locked,
+          title: labels.socialNetworks,
+          add: labels.addNetwork,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.AtSign, { className: "size-3.5 shrink-0" }),
+          onAdd: () => editor.select(addNetwork(component))
+        }
+      );
+    case "mj-navbar":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Children,
+        {
+          editor,
+          component,
+          labels,
+          locked,
+          title: labels.navbarLinks,
+          add: labels.addLink,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Link2, { className: "size-3.5 shrink-0" }),
+          onAdd: () => editor.select(addNavbarLink(component, labels.newLinkText))
+        }
+      );
+    default:
+      return null;
+  }
+}
+function Heading({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "px-3 pb-1 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase", children });
+}
+function ColumnWidths({
+  component,
+  labels,
+  locked
+}) {
+  const columns = columnsOf(component);
+  const ratios = columns && COLUMN_RATIOS[columns.length];
+  if (!columns || !ratios) return null;
+  const current = currentRatio(columns);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "border-b border-panel-border/60 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading, { children: labels.columnWidths }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex gap-1.5 px-3 py-1", children: ratios.map((ratio) => {
+      const name = labels.columnRatio(ratio.join(":"));
+      const active = current?.join() === ratio.join();
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: locked,
+          "aria-pressed": active,
+          title: name,
+          "aria-label": name,
+          onClick: () => !active && setRatio(columns, ratio),
+          className: cn(
+            "flex h-8 flex-1 items-center gap-0.5 rounded-md border px-1.5 transition-colors",
+            active ? "border-brand bg-brand/15" : "border-panel-border bg-panel-elevated hover:border-panel-muted-fg"
+          ),
+          children: ratio.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "span",
+            {
+              style: { flexGrow: part },
+              className: cn(
+                "h-4 basis-0 rounded-sm",
+                active ? "bg-brand" : "bg-panel-muted-fg/50"
+              )
+            },
+            i
+          ))
+        },
+        ratio.join()
+      );
+    }) })
+  ] });
+}
+function Children({
+  editor,
+  component,
+  labels,
+  locked,
+  title,
+  add,
+  icon,
+  onAdd
+}) {
+  const children = component.components().models;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "border-b border-panel-border/60 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading, { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "flex flex-col px-2", children: children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => editor.select(child),
+        className: "group flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-xs text-panel-fg hover:bg-panel-hover",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-panel-muted-fg", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 flex-1 truncate", children: layerName(child, labels) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.ChevronRight, { className: "size-3 shrink-0 text-panel-muted-fg opacity-0 group-hover:opacity-100" })
+        ]
+      }
+    ) }, child.cid)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        type: "button",
+        disabled: locked,
+        onClick: onAdd,
+        className: "mx-3 mt-1 flex items-center gap-1.5 rounded-md px-1 py-1 text-xs text-panel-muted-fg hover:text-panel-fg disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Plus, { className: "size-3.5" }),
+          add
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/editor/inspector/write.ts
+function same(a, b) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((k) => k in b && a[k] === b[k]);
+}
+function createWriter(editor, component, blocked = () => false) {
+  const isImage = String(component.get("tagName") || component.get("type")) === "mj-image";
+  const current = () => {
+    const { __p: _marker, style: _style, ...rest } = component.get("attributes");
+    return rest;
+  };
+  let drag = null;
+  const record = (start, end) => {
+    component.setAttributes(start, { avoidStore: true });
+    if (!same(end, start)) component.setAttributes(end);
+    delete component.get("attributes").__p;
+  };
+  return async (attr, value, { partial, remove = [] } = {}) => {
+    if (editor.getEditing() === component) {
+      const view = component.getView();
+      await view?.syncContent?.();
+    }
+    if (blocked()) return;
+    if (drag && drag.attr !== attr) {
+      const { start: start2 } = drag;
+      drag = null;
+      record(start2, current());
+    }
+    if (attr === "src" && isImage) return void component.set({ src: value });
+    const next = current();
+    for (const name of remove) delete next[name];
+    if (value === "") delete next[attr];
+    else next[attr] = value;
+    if (partial) {
+      drag ??= { attr, start: current() };
+      component.setAttributes(next, { avoidStore: true });
+      return;
+    }
+    const start = drag?.start ?? current();
+    drag = null;
+    record(start, next);
+  };
+}
+
+// src/components/editor/inspector/Inspector.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var GROUPS = ["content", "layout", "spacing", "style"];
+var HIDDEN = /* @__PURE__ */ new Set(["css-class", "mj-class", "id", "style"]);
+function tagOf4(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+function attributesOf(c) {
+  const out = {};
+  for (const [k, v] of Object.entries(c.getAttributes())) {
+    if (v !== void 0 && v !== null && v !== false) out[k] = String(v);
+  }
+  if (tagOf4(c) === "mj-image") out.src = String(c.get("src") ?? "");
+  return out;
+}
+function documentColors(editor) {
+  const counts = /* @__PURE__ */ new Map();
+  const colorValue = /(?:color|background|border)[\w-]*\s*[:=]\s*["']?[^"';>{}]*?(#[0-9a-f]{3,8}\b|rgba?\([^)]*\))/gi;
+  for (const match of editor.getHtml().matchAll(colorValue)) {
+    const hex = toHex(match[1], { opaque: true });
+    if (hex) counts.set(hex, (counts.get(hex) ?? 0) + 1);
+  }
+  return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 14).map(([hex]) => hex);
+}
+function Inspector({
+  onEmailSettings,
+  empty
+}) {
+  const editor = (0, import_react8.useEditorMaybe)();
+  const labels = useLabels();
+  const { locked } = useAgentTurn();
+  const lockedNow = (0, import_react7.useRef)(locked);
+  (0, import_react7.useLayoutEffect)(() => {
+    lockedNow.current = locked;
+  });
+  const [, refresh] = (0, import_react7.useReducer)((n) => n + 1, 0);
+  const root = (0, import_react7.useRef)(null);
+  const refocus = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
+    if (!editor) return;
+    const events = "component:update change:device";
+    const toggled = () => {
+      if (root.current?.contains(document.activeElement)) refocus.current = true;
+      refresh();
+    };
+    editor.on(events, refresh);
+    editor.on("component:toggled", toggled);
+    return () => {
+      editor.off(events, refresh);
+      editor.off("component:toggled", toggled);
+    };
+  }, [editor]);
+  (0, import_react7.useEffect)(() => {
+    if (!refocus.current) return;
+    refocus.current = false;
+    root.current?.querySelector("[data-focus-target]")?.focus();
+  });
+  if (!editor) return null;
+  const selected = editor.getSelectedAll();
+  const component = selected[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: root, children: selected.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "data-focus-target": true, tabIndex: -1, className: "outline-none", children: empty }) : selected.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "p",
+    {
+      "data-focus-target": true,
+      tabIndex: -1,
+      className: "px-4 py-8 text-center text-xs text-panel-muted-fg outline-none",
+      children: labels.multipleSelected(selected.length)
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    ElementSettings,
+    {
+      editor,
+      component,
+      labels,
+      locked,
+      lockedNow,
+      onEmailSettings
+    },
+    component.cid
+  ) });
+}
+function ElementSettings({
+  editor,
+  component,
+  labels,
+  locked,
+  lockedNow,
+  onEmailSettings
+}) {
+  const [advancedOpen, setAdvancedOpen] = (0, import_react7.useState)(false);
+  const tag = tagOf4(component);
+  const fields = SCHEMA[tag] ?? [];
+  const attributes = attributesOf(component);
+  const visible = fields.filter((f) => !f.when || f.when(attributes));
+  const t = (key) => labels.inspectorLabels[key] ?? key;
+  const optionName = (o) => labels.inspectorLabels[o.label] ?? o.label;
+  const [writer] = (0, import_react7.useState)(() => createWriter(editor, component, () => lockedNow.current));
+  const write = (attr, value, options) => lockedNow.current ? Promise.resolve() : writer(attr, value, options);
+  const writeBox = (attr, shorthand, partial) => write(attr, shorthand, { remove: SIDES.map((s) => `${attr}-${s}`), partial });
+  const chooseImage = (attr) => {
+    if (attr === "src" && tag === "mj-image") return void editor.runCommand("open-image-picker");
+    const am = editor.AssetManager;
+    am.open({
+      types: ["image"],
+      current: imageUrl(attributes[attr] ?? "") ?? void 0,
+      select(asset, complete) {
+        void write(attr, typeof asset === "string" ? asset : asset.getSrc());
+        if (complete) am.close();
+      }
+    });
+  };
+  const safeLink = (attr) => (link) => {
+    if (tag === "mj-navbar-link" && attr === "href") {
+      return (0, import_core2.isSafeNavbarLink)(String(component.parent()?.getAttributes()["base-url"] ?? ""), link);
+    }
+    if (tag === "mj-navbar" && attr === "base-url") {
+      return component.components().every((c) => (0, import_core2.isSafeNavbarLink)(link, String(c.getAttributes().href ?? "")));
+    }
+    return (0, import_core2.isSafeLink)(link);
+  };
+  const control = (f) => {
+    const value = attributes[f.attr] ?? "";
+    const c = f.control;
+    switch (c.type) {
+      case "text":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          TextInput,
+          {
+            value,
+            placeholder: c.placeholder ?? f.default,
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "link":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          TextInput,
+          {
+            value,
+            placeholder: "https://",
+            accept: safeLink(f.attr),
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          ColorField,
+          {
+            value,
+            placeholder: f.default,
+            documentColors: () => documentColors(editor),
+            labels,
+            onChange: (v, partial) => write(f.attr, v, { partial })
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          ImageField,
+          {
+            value,
+            labels,
+            onChoose: () => chooseImage(f.attr),
+            onClear: () => write(f.attr, "")
+          }
+        );
+      case "length":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          LengthInput,
+          {
+            value,
+            placeholder: f.default,
+            units: c.units,
+            negative: c.negative,
+            labels,
+            onCommit: (v, partial) => write(f.attr, v, { partial })
+          }
+        );
+      case "box":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          BoxInput,
+          {
+            attributes,
+            attr: f.attr,
+            placeholder: f.default,
+            units: c.units,
+            labels,
+            onCommit: (v, partial) => writeBox(f.attr, v, partial)
+          }
+        );
+      case "segmented":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Segmented,
+          {
+            value,
+            fallback: f.default,
+            options: c.options,
+            name: optionName,
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Select,
+          {
+            value,
+            fallback: f.default,
+            options: c.options,
+            name: optionName,
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "toggle":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Toggle,
+          {
+            checked: value === c.on,
+            label: t(f.label),
+            onCommit: (on) => write(f.attr, on ? c.on : "")
+          }
+        );
+      case "network": {
+        const { network, share } = parseNetwork(value);
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Select,
+            {
+              value: network,
+              options: c.networks,
+              name: optionName,
+              onCommit: (n) => write(f.attr, n ? networkName(n, share) : "")
+            }
+          ),
+          network && network !== "custom" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Segmented,
+            {
+              value: share ? "share" : "profile",
+              options: [
+                { value: "profile", label: labels.linkTypeProfile },
+                { value: "share", label: labels.linkTypeShare }
+              ],
+              name: (o) => o.label,
+              onCommit: (v) => write(f.attr, networkName(network, v === "share"))
+            }
+          )
+        ] });
+      }
+    }
+  };
+  const own = (f) => f.control.type === "box" ? [f.attr, ...SIDES.map((s) => `${f.attr}-${s}`)].some((a) => attributes[a] !== void 0) : !!attributes[f.attr];
+  const reset = (f) => f.control.type === "box" ? writeBox(f.attr, "") : write(f.attr, "");
+  const wide = (f) => ["color", "image", "link", "text", "box", "network"].includes(f.control.type);
+  const row = (f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Row,
+    {
+      label: t(f.label),
+      help: labels.inspectorLabels[`${f.label}.help`],
+      own: own(f),
+      wide: wide(f),
+      inline: f.control.type === "toggle",
+      labels,
+      onReset: () => void reset(f),
+      children: control(f)
+    },
+    f.attr
+  );
+  const named = new Set(
+    fields.flatMap(
+      (f) => f.control.type === "box" ? [f.attr, ...SIDES.map((s) => `${f.attr}-${s}`)] : [f.attr]
+    )
+  );
+  const others = Object.entries(attributes).filter(([k]) => !named.has(k) && !HIDDEN.has(k));
+  const advanced = visible.filter((f) => f.group === "advanced");
+  const advancedCount = advanced.length + others.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pb-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Header,
+      {
+        editor,
+        component,
+        labels,
+        onEmailSettings
+      }
+    ),
+    editor.getDevice() !== "Desktop" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "mx-3 mt-2 flex items-center gap-1.5 rounded-md bg-panel-elevated px-2 py-1.5 text-[11px] text-panel-muted-fg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Monitor, { className: "size-3.5 shrink-0" }),
+      labels.allScreenSizes
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StructureSection, { editor, component, labels, locked }),
+    GROUPS.map((group) => {
+      const inGroup = visible.filter((f) => f.group === group);
+      if (inGroup.length === 0) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { className: "border-b border-panel-border/60 py-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "px-3 pb-1 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase", children: groupName(group, labels) }),
+        inGroup.map(row)
+      ] }, group);
+    }),
+    advancedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { className: "py-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAdvancedOpen((o) => !o),
+          "aria-expanded": advancedOpen,
+          className: "flex w-full items-center gap-1 px-3 py-2 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase hover:text-panel-fg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_lucide_react9.ChevronRight,
+              {
+                className: cn("size-3 transition-transform", advancedOpen && "rotate-90")
+              }
+            ),
+            labels.groupAdvanced,
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "font-normal normal-case", children: [
+              "(",
+              advancedCount,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      advancedOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        advanced.map(row),
+        others.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "px-3 pt-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "pb-1 text-[11px] text-panel-muted-fg", children: labels.otherAttributes }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "flex flex-col gap-1", children: others.map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "li",
+            {
+              className: "flex items-center gap-2 rounded-md bg-panel-elevated px-2 py-1 font-mono text-[11px]",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-panel-muted-fg", children: k }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "min-w-0 flex-1 truncate text-panel-fg", title: v, children: v }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void write(k, ""),
+                    title: labels.removeAttribute,
+                    "aria-label": `${labels.removeAttribute}: ${k}`,
+                    className: "text-panel-muted-fg hover:text-panel-fg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.X, { className: "size-3" })
+                  }
+                )
+              ]
+            },
+            k
+          )) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function groupName(group, labels) {
+  return {
+    content: labels.groupContent,
+    layout: labels.groupLayout,
+    spacing: labels.groupSpacing,
+    style: labels.groupStyle
+  }[group];
+}
+function Header({
+  editor,
+  component,
+  labels,
+  onEmailSettings
+}) {
+  const tag = tagOf4(component);
+  const isBody = tag === "mj-body";
+  const name = isBody ? labels.emailSettings : labels.elementNames[tag] ?? tag.replace(/^mj-/, "");
+  const words = tag === "mj-column" ? "" : layerName(component, labels);
+  const excerpt = words === name ? "" : words;
+  const parent = component.parent();
+  const action = "flex size-7 items-center justify-center rounded-md text-panel-muted-fg hover:bg-panel-hover hover:text-panel-fg";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b border-panel-border bg-panel px-3 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "p",
+        {
+          "data-focus-target": true,
+          tabIndex: -1,
+          className: "truncate text-sm font-medium text-panel-fg outline-none",
+          children: name
+        }
+      ),
+      excerpt && !isBody && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "truncate text-[11px] text-panel-muted-fg", children: [
+        "\u201C",
+        excerpt,
+        "\u201D"
+      ] })
+    ] }),
+    !isBody && parent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        type: "button",
+        className: action,
+        title: labels.selectParent,
+        "aria-label": labels.selectParent,
+        onClick: () => tagOf4(parent) === "mj-body" ? onEmailSettings() : editor.select(parent),
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ArrowUp, { className: "size-3.5" })
+      }
+    ),
+    !isBody && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          type: "button",
+          className: action,
+          title: labels.duplicate,
+          "aria-label": labels.duplicate,
+          onClick: () => editor.runCommand("tlb-clone"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Copy, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
-          title: transparentLabel,
-          onClick: () => onPick("transparent"),
-          className: "relative aspect-square overflow-hidden rounded border border-white/15 outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-brand",
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkerboard, {})
+          className: action,
+          title: labels.deleteElement,
+          "aria-label": labels.deleteElement,
+          onClick: () => editor.runCommand("tlb-delete"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Trash2, { className: "size-3.5" })
         }
       )
     ] })
   ] });
 }
-function Checkerboard() {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "span",
-    {
-      className: "absolute inset-0",
-      style: {
-        backgroundImage: "repeating-conic-gradient(#9ca3af 0% 25%, #e5e7eb 0% 50%)",
-        backgroundSize: "8px 8px"
-      }
+
+// src/components/editor/blocks.ts
+var import_grapesjs = __toESM(require("grapesjs"), 1);
+var import_grapesjs_mjml = __toESM(require("grapesjs-mjml"), 1);
+
+// src/components/editor/ids.ts
+var ID_RE = {
+  sec: /(?:^|\s)sec-([A-Za-z0-9_-]+)(?=\s|$)/,
+  obj: /(?:^|\s)obj-([A-Za-z0-9_-]+)(?=\s|$)/
+};
+function idOf(c, prefix) {
+  return String(c.getAttributes()["css-class"] ?? "").match(ID_RE[prefix])?.[1] ?? null;
+}
+var newId = () => Math.random().toString(36).slice(2, 10);
+function sectionIdOf(c) {
+  return idOf(c, "sec");
+}
+function addIdClass(c, prefix) {
+  const existing = idOf(c, prefix);
+  if (existing) return existing;
+  const cssClass = String(c.getAttributes()["css-class"] ?? "");
+  const id = newId();
+  c.addAttributes({ "css-class": `${cssClass} ${prefix}-${id}`.trim() });
+  return id;
+}
+function freshenCopiedIds(root, added) {
+  const used = (prefix, id, except) => {
+    let found = false;
+    root?.onAll((o) => {
+      if (o !== except && idOf(o, prefix) === id) found = true;
+    });
+    return found;
+  };
+  added.onAll((c) => {
+    for (const prefix of ["sec", "obj"]) {
+      const id = idOf(c, prefix);
+      if (!id || !used(prefix, id, c)) continue;
+      const cssClass = String(c.getAttributes()["css-class"]);
+      const fresh = cssClass.replace(
+        ID_RE[prefix],
+        (token) => token.replace(`${prefix}-${id}`, `${prefix}-${newId()}`)
+      );
+      c.addAttributes({ "css-class": fresh });
     }
-  );
+  });
 }
-function toHex(value, { opaque = false } = {}) {
-  const v = value.trim().toLowerCase();
-  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(v);
-  if (short) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
-  if (/^#[0-9a-f]{6}$/.test(v)) return v;
-  if (/^#[0-9a-f]{8}$/.test(v)) return opaque || v.endsWith("ff") ? v.slice(0, 7) : v;
-  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)(?:[\s,/]+([\d.]+%?))?/.exec(v);
-  if (rgb) {
-    const channels = [rgb[1], rgb[2], rgb[3]].map((n) => Math.min(255, Number(n)));
-    const alphaText = rgb[4];
-    const alpha = alphaText?.endsWith("%") ? parseFloat(alphaText) / 100 : Number(alphaText ?? 1);
-    if (!opaque && alpha < 1) channels.push(Math.round(Math.max(0, alpha) * 255));
-    return `#${channels.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+
+// src/components/editor/insert-block.ts
+var addsBlock = (e) => (e.key === "Enter" || e.key === " ") && !e.repeat && !e.ctrlKey && !e.metaKey && !e.altKey;
+var tileAttributes = (id) => ({ tabindex: "0", role: "button", "data-block": id });
+var tagOf5 = (c) => String(c.get("tagName") ?? "");
+function closest(c, tag) {
+  for (let cur = c; cur; cur = cur.parent() ?? void 0) if (tagOf5(cur) === tag) return cur;
+  return void 0;
+}
+function childOf(parent, c) {
+  let cur = c;
+  while (cur.parent() && cur.parent() !== parent) cur = cur.parent();
+  return cur;
+}
+function insertBlock(editor, block) {
+  const content = block.getContent();
+  let body;
+  editor.getWrapper()?.onAll((c) => {
+    if (!body && tagOf5(c) === "mj-body") body = c;
+  });
+  if (typeof content !== "string" || !body) return void 0;
+  const selected = editor.getSelected();
+  const section = closest(selected, "mj-section");
+  const sections = section?.parent() ?? body;
+  const afterSection = section ? { at: section.index() + 1 } : {};
+  const column = closest(selected, "mj-column");
+  let added;
+  if (/^\s*<mj-section\b/i.test(content)) {
+    added = sections.append(content, afterSection)[0];
+  } else if (column && selected) {
+    const at = selected === column ? {} : { at: childOf(column, selected).index() + 1 };
+    added = column.append(content, at)[0];
+  } else {
+    const [wrapper] = sections.append(
+      `<mj-section><mj-column>${content}</mj-column></mj-section>`,
+      afterSection
+    );
+    added = wrapper?.components().at(0)?.components().at(0);
   }
-  return null;
+  if (!added) return void 0;
+  editor.select(added);
+  if (block.get("activate")) added.getView()?.onActive(void 0);
+  return added;
 }
 
-// src/components/editor/ImageField.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function ImageField({
-  value,
-  labels,
-  onChoose,
-  onClear
-}) {
-  const url = imageUrl(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: onChoose,
-        title: labels.chooseImage,
-        className: "group relative block w-full overflow-hidden rounded-md border border-panel-border bg-panel-elevated outline-none focus-visible:ring-2 focus-visible:ring-brand",
-        children: [
-          url ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: url, alt: "", className: "h-24 w-full bg-black/25 object-contain" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex h-16 flex-col items-center justify-center gap-1 text-xs text-panel-muted-fg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ImageIcon, { className: "size-5" }),
-            labels.chooseImage
-          ] }),
-          url && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-xs font-medium text-white opacity-0 transition group-hover:opacity-100", children: labels.chooseImage })
-        ]
+// src/components/editor/blocks.ts
+var EDITABLE_TAGS = /* @__PURE__ */ new Set([
+  "mj-section",
+  "mj-group",
+  "mj-column",
+  "mj-text",
+  "mj-image",
+  "mj-button",
+  "mj-divider",
+  "mj-spacer",
+  "mj-social",
+  "mj-social-element",
+  "mj-navbar",
+  "mj-navbar-link"
+]);
+var CONTENT_TAGS = /* @__PURE__ */ new Set(["mj-text", "mj-button", "mj-social-element", "mj-navbar-link"]);
+var EDITOR_INTERNALS = /data-gjs-|__p\b|custom-name/i;
+var DROPPED_MARKUP = /<(?:script|style|link|meta|iframe|object|embed|form)\b/i;
+var INLINE_IMAGE = /\b(?:src|srcset|background-url|icon)\s*=\s*(?:"[^"]*data:|'[^']*data:|data:)/i;
+var LINK_IN_MARKUP = /[\s/"'](?:xlink:)?(?:href|action|formaction)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi;
+var validator;
+function blockProblems(mjml, editor = validator ??= import_grapesjs.default.init({
+  headless: true,
+  storageManager: false,
+  telemetry: false,
+  plugins: [import_grapesjs_mjml.default]
+})) {
+  if (EDITOR_INTERNALS.test(mjml)) return ["it contains GrapesJS's own attributes"];
+  if (INLINE_IMAGE.test(mjml)) return ["it inlines an image as a data: URL"];
+  let tree;
+  try {
+    tree = editor.runCommand("mjml-code-to-html", {
+      mjml: `<mjml><mj-body>${withClosedTags(mjml)}</mj-body></mjml>`,
+      validationLevel: "strict"
+    }).json;
+  } catch (e) {
+    const errors = e.errors;
+    if (!errors) throw e;
+    return errors.map((error) => error.formattedMessage ?? error.message ?? String(error));
+  }
+  const problems = [];
+  const top = tree.children?.find((c) => c.tagName === "mj-body")?.children ?? [];
+  if (top.length !== 1 || top[0].tagName !== "mj-section") {
+    problems.push("it is not exactly one mj-section");
+  }
+  const visit = (node, parent) => {
+    const tag = node.tagName;
+    const attributes = node.attributes ?? {};
+    const content = node.content ?? "";
+    if (!EDITABLE_TAGS.has(tag)) problems.push(`${tag} is not editable here`);
+    const cssClass = attributes["css-class"] ?? "";
+    if (ID_RE.sec.test(cssClass) || ID_RE.obj.test(cssClass)) {
+      problems.push(`${tag} carries a sec-* or obj-* id`);
+    }
+    if ("mj-class" in attributes) problems.push(`${tag} uses mj-class`);
+    const links = [attributes.href ?? ""];
+    for (const match of content.matchAll(LINK_IN_MARKUP)) {
+      links.push(match[1] ?? match[2] ?? match[3] ?? "");
+    }
+    const linked = tag === "mj-navbar-link" ? (0, import_core2.isSafeNavbarLink)(parent?.attributes?.["base-url"] ?? "", attributes.href ?? "") : true;
+    if (!linked || !links.every(import_core2.isSafeLink)) {
+      problems.push(`${tag} has a link scheme mail must not carry`);
+    }
+    if (CONTENT_TAGS.has(tag) ? /<mj-/i.test(content) || DROPPED_MARKUP.test(content) : content.trim()) {
+      problems.push(`${tag} holds content the editor does not keep`);
+    }
+    node.children?.forEach((child) => visit(child, node));
+  };
+  top.forEach((node) => visit(node));
+  return problems;
+}
+var escapeHtml3 = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function registerBlocks(editor, blocks, category, media) {
+  for (const block of blocks) {
+    const problems = editor.Blocks.get(block.id) ? [`the id is already taken`] : blockProblems(block.mjml, editor);
+    if (problems.length > 0) {
+      console.error(`Block "${block.id}" is left out of the palette: ${problems.join("; ")}`);
+      continue;
+    }
+    editor.Blocks.add(block.id, {
+      // GrapesJS writes the label into the tile as markup.
+      label: escapeHtml3(block.label),
+      category,
+      media: block.media ?? media,
+      content: withClosedTags(block.mjml),
+      attributes: tileAttributes(block.id)
+    });
+  }
+}
+
+// src/components/editor/builtin-blocks.ts
+var BUILTIN_BLOCKS = [
+  "mj-1-column",
+  "mj-2-columns",
+  "mj-3-columns",
+  "mj-text",
+  "mj-image",
+  "mj-button",
+  "mj-divider",
+  "mj-spacer",
+  "mj-social-group",
+  "mj-navbar"
+];
+var LAYOUT_BLOCKS = /* @__PURE__ */ new Set(["mj-1-column", "mj-2-columns", "mj-3-columns"]);
+var CONTENT2 = {
+  // The plugin's version links Google+ and shares the page: a bare network name makes the
+  // icon open a "share this link" dialog, while `-noshare` links to the profile a footer
+  // means. Without `alt` each link is an unnamed image to a screen reader.
+  "mj-social-group": `<mj-social icon-size="24px" mode="horizontal">
+  <mj-social-element name="facebook-noshare" href="https://facebook.com/" alt="Facebook"></mj-social-element>
+  <mj-social-element name="instagram-noshare" href="https://instagram.com/" alt="Instagram"></mj-social-element>
+  <mj-social-element name="x-noshare" href="https://x.com/" alt="X"></mj-social-element>
+</mj-social>`,
+  // The plugin's sample is a via.placeholder.com picture, stored in the email and loaded by
+  // every reader's mail client. Dropping one opens the image picker instead.
+  "mj-image": "<mj-image></mj-image>"
+};
+function builtinBlock(labels) {
+  return (id) => ({
+    label: labels.blockLabels[id] ?? id,
+    // By id: a regex on the label broke as soon as a host translated it.
+    category: LAYOUT_BLOCKS.has(id) ? labels.blockCategoryLayout : labels.blockCategoryContent,
+    ...id in CONTENT2 && { content: CONTENT2[id] },
+    attributes: tileAttributes(id)
+  });
+}
+var CANVAS_CSS = 'img:not([src]), img[src=""] { min-height: 120px; background: #f4f4f5; outline: 1px dashed #a1a1aa; outline-offset: -1px; }';
+
+// src/components/editor/table-type.ts
+var import_core3 = require("@mjml-agent-editor/core");
+var DROPPED = "script, style, link, iframe, frame, object, embed, applet, base, meta, animate, set, svg, math, template";
+var LINK_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "xlink:href", "action", "formaction"]);
+function cleanRows(rows) {
+  rows.querySelectorAll(DROPPED).forEach((el) => el.remove());
+  rows.querySelectorAll("*").forEach((el) => {
+    for (const { name, value } of [...el.attributes]) {
+      const lower = name.toLowerCase();
+      const script = /^(java|vb)script:/i.test(value.replace(/[\u0000-\u0020]/g, ""));
+      if (lower.startsWith("on") || script || LINK_ATTRIBUTES.has(lower) && !(0, import_core3.isSafeLink)(value)) {
+        el.removeAttribute(name);
       }
-    ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: onClear,
-        title: labels.imageFieldRemove,
-        "aria-label": labels.imageFieldRemove,
-        className: "absolute top-1 right-1 flex size-5 items-center justify-center rounded bg-black/60 text-white hover:bg-black/80",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.X, { className: "size-3" })
+    }
+  });
+}
+var ROW_STYLE = "pointer-events: all; display: table; width: 100%;";
+function tablePreview(doc, attributes, rows) {
+  const attr = (name, fallback) => String(attributes[name] ?? fallback);
+  const template = doc.createElement("template");
+  template.innerHTML = `<table>${rows}</table>`;
+  const table = doc.createElement("table");
+  table.setAttribute("cellpadding", String(parseInt(attr("cellpadding", "0"), 10) || 0));
+  table.setAttribute("cellspacing", String(parseInt(attr("cellspacing", "0"), 10) || 0));
+  Object.assign(table.style, {
+    width: attr("width", "100%"),
+    border: attr("border", "none"),
+    color: attr("color", "#000000"),
+    fontFamily: attr("font-family", "Ubuntu, Helvetica, Arial, sans-serif"),
+    fontSize: attr("font-size", "13px"),
+    lineHeight: attr("line-height", "22px"),
+    tableLayout: attr("table-layout", "auto")
+  });
+  for (const row of template.content.querySelectorAll("tr")) {
+    const tr = table.insertRow();
+    for (const cell2 of row.querySelectorAll(":scope > th, :scope > td")) {
+      const copy = doc.createElement(cell2.tagName.toLowerCase());
+      copy.textContent = cell2.textContent;
+      const align = cell2.getAttribute("align");
+      if (align && /^(left|right|center)$/i.test(align)) copy.setAttribute("align", align);
+      tr.append(copy);
+    }
+  }
+  const cell = doc.createElement("td");
+  cell.style.padding = attr("padding", "10px 25px");
+  cell.append(table);
+  return cell;
+}
+function addTableType(editor) {
+  const base = editor.Components.getType("default").view.prototype;
+  editor.Components.addType("mj-table", {
+    isComponent: (el) => {
+      if (el.tagName?.toLowerCase() !== "mj-table") return false;
+      const rows = el.querySelector(":scope > template");
+      if (rows) cleanRows(rows.content);
+      return { type: "mj-table", content: rows?.innerHTML ?? "", components: [] };
+    },
+    model: { defaults: { tagName: "mj-table", droppable: false, editable: false } },
+    view: {
+      tagName: "tr",
+      // GrapesJS clears the element's attributes, style among them, when the model's change.
+      updateAttributes(...args) {
+        base.updateAttributes.apply(this, args);
+        this.el.style.cssText = ROW_STYLE;
+      },
+      updateContent() {
+        const { el, model } = this;
+        el.style.cssText = ROW_STYLE;
+        el.replaceChildren(
+          tablePreview(el.ownerDocument, model.getAttributes(), String(model.get("content") ?? ""))
+        );
       }
-    )
-  ] });
+    }
+  });
 }
-function imageUrl(value) {
-  const v = value.trim();
-  if (!v || v === "none") return null;
-  const css = /^url\(\s*(['"]?)(.*?)\1\s*\)$/i.exec(v);
-  if (css) return css[2] || null;
-  return /^[a-z-]+\(/i.test(v) ? null : v;
+
+// src/components/editor/plugin-types.ts
+var COLUMN_CHILDREN = /* @__PURE__ */ new Set([
+  "mj-accordion",
+  "mj-button",
+  "mj-carousel",
+  "mj-divider",
+  "mj-image",
+  "mj-navbar",
+  "mj-raw",
+  "mj-social",
+  "mj-spacer",
+  "mj-table",
+  "mj-text"
+]);
+function fixPluginTypes(editor) {
+  addTableType(editor);
+  for (const type of editor.Components.getTypes()) {
+    if (!type.id.startsWith("mj-") || type.id === "mj-table") continue;
+    const base = type.model.prototype.getAttrToHTML;
+    editor.Components.addType(type.id, {
+      model: {
+        defaults: {
+          "style-default": {},
+          ...type.id === "mj-column" && {
+            droppable: (source) => COLUMN_CHILDREN.has(String(source.get("tagName")))
+          },
+          // GrapesJS's own is an SVG's markup, which the canvas wrote into `src` and saved.
+          ...type.id === "mj-image" && { src: "" }
+        },
+        getAttrToHTML() {
+          const attributes = base.call(this);
+          delete attributes.__p;
+          for (const [name, value] of Object.entries(attributes)) {
+            if (typeof value === "string") attributes[name] = value.replace(/"/g, "&quot;");
+          }
+          return attributes;
+        }
+      }
+    });
+  }
 }
 
 // src/components/editor/EmailEditor.tsx
-var import_client = require("react-dom/client");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var SEC_ID_RE = /\bsec-([A-Za-z0-9_-]+)\b/;
-var OBJ_ID_RE = /\bobj-([A-Za-z0-9_-]+)\b/;
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TYPE_LABEL = {
   "mj-text": "Text",
   "mj-button": "Button",
   "mj-image": "Image",
   "mj-column": "Column"
 };
-function tagOf(c) {
+function tagOf6(c) {
   return String(c.get("tagName") || c.get("type") || "");
 }
 var SPARKLES_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
 var IMAGE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21"/><path d="m14 19.5 3-3 3 3"/><path d="M17 22v-5.5"/><circle cx="9" cy="9" r="2"/></svg>';
+var SECTION_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>';
 function isSection(c) {
-  return tagOf(c) === "mj-section";
+  return tagOf6(c) === "mj-section";
 }
 function isCommentable(c) {
-  const t = tagOf(c);
+  const t = tagOf6(c);
   return t === "mj-section" || t in TYPE_LABEL;
 }
-function classMatch(c, re) {
-  const cssClass = String(c.getAttributes()["css-class"] ?? "");
-  return cssClass.match(re)?.[1] ?? null;
-}
-function sectionIdOf(c) {
-  return classMatch(c, SEC_ID_RE);
-}
-function addIdClass(c, prefix) {
-  const existing = classMatch(c, prefix === "sec" ? SEC_ID_RE : OBJ_ID_RE);
-  if (existing) return existing;
-  const cssClass = String(c.getAttributes()["css-class"] ?? "");
-  const id = Math.random().toString(36).slice(2, 10);
-  c.addAttributes({ "css-class": `${cssClass} ${prefix}-${id}`.trim() });
-  return id;
-}
 function closestSection(c) {
   let cur = c;
   while (cur) {
@@ -1379,27 +4216,12 @@ function closestSection(c) {
   }
   return null;
 }
-var CRUMB_NAME = {
-  "mj-section": "Section",
-  "mj-column": "Column",
-  "mj-group": "Group",
-  "mj-text": "Text",
-  "mj-button": "Button",
-  "mj-image": "Image",
-  "mj-divider": "Divider",
-  "mj-spacer": "Spacer",
-  "mj-hero": "Hero",
-  "mj-navbar": "Navbar",
-  "mj-social": "Social",
-  "mj-social-element": "Social",
-  "mj-wrapper": "Wrapper"
-};
-function crumbName(c) {
-  const t = tagOf(c);
-  return CRUMB_NAME[t] ?? t.replace(/^mj-/, "") ?? "Element";
+function crumbName(c, labels) {
+  const t = tagOf6(c);
+  return labels.elementNames[t] ?? t.replace(/^mj-/, "");
 }
 function objectLabel(c) {
-  const base = TYPE_LABEL[tagOf(c)] ?? tagOf(c);
+  const base = TYPE_LABEL[tagOf6(c)] ?? tagOf6(c);
   const text = String(c.getEl?.()?.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 30);
   return text ? `${base}: \u201C${text}\u201D` : base;
 }
@@ -1431,75 +4253,6 @@ function wrapSelectionStyle(el, style) {
   } catch {
   }
 }
-function setupStyleFields(editor, labels) {
-  const sm = editor.StyleManager;
-  const base = sm.getType("base").view;
-  const documentColors = () => {
-    const source = `${editor.getHtml()} ${editor.getCss() ?? ""}`;
-    const counts = /* @__PURE__ */ new Map();
-    const colorValue = /(?:color|background|border)[\w-]*\s*[:=]\s*["']?[^"';>{}]*?(#[0-9a-f]{3,8}\b|rgba?\([^)]*\))/gi;
-    for (const match of source.matchAll(colorValue)) {
-      const hex = toHex(match[1], { opaque: true });
-      if (hex) counts.set(hex, (counts.get(hex) ?? 0) + 1);
-    }
-    return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 14).map(([hex]) => hex);
-  };
-  const ownValue = (property) => property.hasValue?.({ noParent: true }) ? String(property.getValue?.() ?? "") : "";
-  const reactView = (field) => base.extend({
-    create({ property }) {
-      const el = document.createElement("div");
-      el.addEventListener("change", (event) => event.stopPropagation());
-      const root = (0, import_client.createRoot)(el);
-      this.__root = root;
-      this.__render = () => root.render(field(property, ownValue(property)));
-      this.__render();
-      return el;
-    },
-    update() {
-      this.__render?.();
-    },
-    destroy() {
-      const root = this.__root;
-      this.__root = void 0;
-      this.__render = void 0;
-      setTimeout(() => root?.unmount());
-    }
-  });
-  sm.addType("color", {
-    view: reactView((property, value) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      ColorField,
-      {
-        value,
-        placeholder: String(property.getDefaultValue?.() ?? ""),
-        documentColors,
-        labels,
-        onChange: (next, partial) => property.upValue(next, { partial })
-      }
-    ))
-  });
-  sm.addType("file", {
-    view: reactView((property, value) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      ImageField,
-      {
-        value,
-        labels,
-        onClear: () => property.upValue(""),
-        onChoose: () => {
-          const am = editor.AssetManager;
-          am.open({
-            types: ["image"],
-            current: imageUrl(value) ?? void 0,
-            select(asset, complete) {
-              const url = typeof asset === "string" ? asset : asset.getSrc();
-              property.upValue(url, { partial: !complete });
-              if (complete) am.close();
-            }
-          });
-        }
-      }
-    ))
-  });
-}
 function setupRichText(editor, labels) {
   const rte = editor.RichTextEditor;
   if (!rte || rte.__customActions) return;
@@ -1536,26 +4289,45 @@ function setupRichText(editor, labels) {
     result: (r, action) => r.exec("hiliteColor", val(action, "input"))
   });
 }
-function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
+function EmailEditor({
+  docId,
+  onReady,
+  commentsRefresh,
+  onOpenCountChange,
+  blocks = []
+}) {
   const documents = useDocumentStore();
   const labels = useLabels();
-  const loadingRef = (0, import_react7.useRef)(false);
-  const saveStatusRef = (0, import_react7.useRef)("idle");
-  const stateListeners = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
-  const [loading, setLoading] = (0, import_react7.useState)(true);
-  const [sidebarView, setSidebarView] = (0, import_react7.useState)("blocks");
-  const [composeTarget, setComposeTarget] = (0, import_react7.useState)(null);
-  const selectionSource = (0, import_react7.useRef)("other");
-  const editorRef = (0, import_react7.useRef)(null);
+  const loadingRef = (0, import_react10.useRef)(false);
+  const saveStatusRef = (0, import_react10.useRef)("idle");
+  const stateListeners = (0, import_react10.useRef)(/* @__PURE__ */ new Set());
+  const [loading, setLoading] = (0, import_react10.useState)(true);
+  const [sidebarView, setSidebarView] = (0, import_react10.useState)("blocks");
+  const blockSearchRef = (0, import_react10.useRef)(null);
+  const onBlockSearchKey = (e) => {
+    if (readOnlyRef.current || !opensBlockSearch(e)) return;
+    e.preventDefault();
+    setSidebarView("blocks");
+    requestAnimationFrame(() => blockSearchRef.current?.focus());
+  };
+  const [composeTarget, setComposeTarget] = (0, import_react10.useState)(null);
+  const selectionSource = (0, import_react10.useRef)("other");
+  const editorRef = (0, import_react10.useRef)(null);
   const { running: turnRunning, locked: readOnly, setLocked } = useAgentTurn();
-  const readOnlyRef = (0, import_react7.useRef)(false);
-  const applyReadOnly = (0, import_react7.useRef)(async () => {
+  const readOnlyRef = (0, import_react10.useRef)(false);
+  const applyReadOnly = (0, import_react10.useRef)(async () => {
   });
-  (0, import_react7.useEffect)(() => void applyReadOnly.current(turnRunning), [turnRunning]);
-  (0, import_react7.useEffect)(() => () => setLocked(false), [setLocked]);
-  const [crumbs, setCrumbs] = (0, import_react7.useState)([]);
-  const [selectedImageSrc, setSelectedImageSrc] = (0, import_react7.useState)(null);
-  const [picker, setPicker] = (0, import_react7.useState)(
+  const [turn] = (0, import_react10.useState)(createTurnFollower);
+  (0, import_react10.useEffect)(() => turn.turn(turnRunning), [turn, turnRunning]);
+  (0, import_react10.useEffect)(() => {
+    turn.mount();
+    return () => {
+      turn.unmount();
+      setLocked(false);
+    };
+  }, [turn, setLocked]);
+  const [crumbs, setCrumbs] = (0, import_react10.useState)([]);
+  const [picker, setPicker] = (0, import_react10.useState)(
     null
   );
   const onEditor = async (editor) => {
@@ -1564,7 +4336,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       const chain = [];
       let cur = c;
       while (cur) {
-        const t = tagOf(cur);
+        const t = tagOf6(cur);
         if (!t || t === "mj-body" || t === "wrapper" || t === "Wrapper") break;
         chain.unshift(cur);
         cur = cur.parent() ?? void 0;
@@ -1613,7 +4385,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       if (isSection(c)) addIdClass(c, "sec");
       if (!isCommentable(c)) return;
       const toolbar = [...c.get("toolbar") ?? []];
-      if (tagOf(c) === "mj-image" && !toolbar.some((t) => t.command === "open-image-picker")) {
+      if (tagOf6(c) === "mj-image" && !toolbar.some((t) => t.command === "open-image-picker")) {
         toolbar.push({
           command: "open-image-picker",
           label: IMAGE_SVG,
@@ -1621,11 +4393,11 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         });
         c.set("toolbar", toolbar);
       }
-      if (!toolbar.some((t) => t.command === "open-comments")) {
+      if (closestSection(c) && !toolbar.some((t) => t.command === "open-comments")) {
         toolbar.push({
           command: "open-comments",
           label: SPARKLES_SVG,
-          attributes: { title: "Comment on element / section", "data-role": "sparkles" }
+          attributes: { title: labels.commentOnElement, "data-role": "sparkles" }
         });
         c.set("toolbar", toolbar);
       }
@@ -1633,7 +4405,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     editor.Commands.add("open-image-picker", {
       run(ed) {
         const target = ed.getSelected();
-        if (!target || tagOf(target) !== "mj-image") return;
+        if (!target || tagOf6(target) !== "mj-image") return;
         const am = ed.AssetManager;
         am.open({
           target,
@@ -1652,21 +4424,29 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       }
     });
     setupRichText(editor, labels);
-    setupStyleFields(editor, labels);
-    const blockCategory = (label) => {
-      const l = label.toLowerCase();
-      if (/(column|section)/.test(l)) return "Layout";
-      if (/(text|image|button|divider|spacer|social)/.test(l)) return "Basic";
-      return "Advanced";
+    fixPluginTypes(editor);
+    registerBlocks(editor, blocks, labels.blockCategorySections, SECTION_SVG);
+    setupLayerNames(editor, labels);
+    const STRUCTURE = /* @__PURE__ */ new Set(["mj-wrapper", "mj-section", "mj-column"]);
+    const showBodyInLayers = () => {
+      const body = findByTag("mj-body");
+      if (!body) return;
+      editor.Layers.setRoot(body);
+      body.onAll((c) => {
+        if (STRUCTURE.has(tagOf6(c))) editor.Layers.setOpen(c, true);
+      });
     };
-    const bm = editor.BlockManager;
-    bm.getAll().forEach(
-      (b) => {
-        b.set("category", blockCategory(b.get("label") || ""));
+    const keepStructureOpen = () => {
+      const layers = editor.Layers;
+      const opened = layers.model?.get("opened") ?? {};
+      for (const [cid, c] of Object.entries(opened)) {
+        if (STRUCTURE.has(tagOf6(c))) delete opened[cid];
       }
-    );
-    bm.render();
-    editor.on("component:add", decorate);
+    };
+    editor.on("component:add", (c) => {
+      if (!loadingRef.current) freshenCopiedIds(editor.getWrapper(), c);
+      decorate(c);
+    });
     editor.on("load", () => {
       const body = editor.Canvas.getBody();
       body?.addEventListener(
@@ -1676,45 +4456,28 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         },
         true
       );
+      editor.Canvas.getDocument()?.addEventListener("keydown", onBlockSearchKey);
+      showBodyInLayers();
     });
     editor.on("component:selected", (c) => {
+      keepStructureOpen();
       if (selectionSource.current === "canvas") setSidebarView("settings");
       selectionSource.current = "other";
       buildCrumbs(c);
-      setSelectedImageSrc(c && tagOf(c) === "mj-image" ? String(c.get("src") ?? "") : null);
-      if (c?.get("type") === "mj-image" && !c.getTrait("src")) {
-        c.addTrait(
-          {
-            type: "text",
-            name: "src",
-            label: "Image (URL)",
-            placeholder: "https://\u2026",
-            changeProp: true
-          },
-          { at: 0 }
-        );
-      }
     });
     editor.on("component:deselected", () => {
-      const rest = editor.getSelected();
-      buildCrumbs(rest);
-      setSelectedImageSrc(
-        rest && tagOf(rest) === "mj-image" ? String(rest.get("src") ?? "") : null
-      );
-    });
-    editor.on("component:update:src", (c) => {
-      if (c === editor.getSelected()) setSelectedImageSrc(String(c.get("src") ?? ""));
+      buildCrumbs(editor.getSelected());
     });
-    let stored = "";
+    const baseline = createSaveBaseline();
     const save = async () => {
       const view = editor.getEditing()?.getView();
       await view?.syncContent?.();
       const mjml = editor.getHtml();
-      if (mjml === stored) return;
+      if (!baseline.changed(mjml)) return;
       setSave("saving");
       try {
         await documents.save(docId, { mjml, projectData: editor.getProjectData() });
-        stored = mjml;
+        baseline.saved(mjml);
         setSave("saved");
       } catch (e) {
         setSave("error");
@@ -1745,6 +4508,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       });
     }
     const lock = (on) => {
+      if (!turn.mounted) return;
       readOnlyRef.current = on;
       setLocked(on);
       notifyState();
@@ -1770,24 +4534,36 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         return;
       }
       lock(false);
+      queue.schedule();
     };
     const reload = () => queue.run(async () => {
       const fresh = await documents.get(docId);
-      if (fresh.mjml !== stored) loadMjml(fresh.mjml);
+      if (fresh.mjml !== baseline.stored) loadMjml(fresh.mjml);
     });
     const loadMjml = (mjml) => {
       loadingRef.current = true;
+      let repaired = false;
+      const adds = !mjml || (0, import_core4.listSections)(mjml).some((s) => !s.sectionId);
       try {
         queue.cancel();
-        stored = mjml;
-        editor.setComponents(mjml || import_core2.STARTER_MJML);
-        editor.getWrapper()?.find("mj-section").forEach(decorate);
-        for (const t of Object.keys(TYPE_LABEL)) {
-          editor.getWrapper()?.find(t).forEach(decorate);
-        }
+        baseline.load(mjml, null);
+        const source = sourceForEditor(mjml || import_core4.STARTER_MJML);
+        repaired = source.repaired;
+        editor.setComponents(source.mjml);
+        editor.getWrapper()?.onAll((c) => {
+          const illegal = illegalAttributes(tagOf6(c), c.getAttributes());
+          if (illegal.length === 0) return;
+          c.removeAttributes(illegal);
+          repaired = true;
+        });
+        if (!repaired && !adds) baseline.load(mjml, editor.getHtml());
+        showBodyInLayers();
+        editor.UndoManager.clear();
       } finally {
         loadingRef.current = false;
       }
+      notifyState();
+      if ((repaired || adds) && !readOnlyRef.current) queue.schedule();
     };
     const ensureHighlightStyles = () => {
       const cdoc = editor.Canvas.getDocument();
@@ -1809,7 +4585,10 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       cdoc.head.appendChild(style);
     };
     const sectionEl = (sectionId) => {
-      const comp = editor.getWrapper()?.find("mj-section").find((c) => sectionIdOf(c) === sectionId);
+      let comp;
+      editor.getWrapper()?.onAll((c) => {
+        if (!comp && isSection(c) && sectionIdOf(c) === sectionId) comp = c;
+      });
       return comp?.getEl?.() ?? void 0;
     };
     const compiledHtml = () => {
@@ -1820,9 +4599,9 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         return editor.getHtml();
       }
     };
+    turn.ready((on) => void applyReadOnly.current(on));
     try {
-      const doc = await documents.get(docId);
-      loadMjml(doc.mjml);
+      await queue.run(async () => loadMjml((await documents.get(docId)).mjml));
     } catch (e) {
       import_sonner2.toast.error(labels.documentLoadFailed);
       console.error(e);
@@ -1874,10 +4653,10 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react6.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react9.default,
     {
-      grapesjs: import_grapesjs.default,
+      grapesjs: import_grapesjs2.default,
       className: "h-full",
       options: {
         height: "100%",
@@ -1886,12 +4665,13 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         // app.grapesjs.com and leave a session-storage entry, which a host would then have
         // to disclose and, for the entry, ask consent for.
         telemetry: false,
+        canvasCss: CANVAS_CSS,
         fromElement: false,
         panels: { defaults: [] },
         blockManager: { appendTo: "#gjs-blocks" },
-        styleManager: { appendTo: "#gjs-styles" },
-        traitManager: { appendTo: "#gjs-traits" },
-        layerManager: { appendTo: "#gjs-layers" },
+        // The eye hides a layer by writing `display="none"` into the MJML, which is illegal.
+        // The root row is mj-body, which the sidebar reaches as "Email settings" instead.
+        layerManager: { appendTo: "#gjs-layers", hidable: false, showWrapper: false },
         assetManager: {
           // Never inline files: mail clients block `data:` images (see ImageLibrary).
           embedAsBase64: false,
@@ -1905,115 +4685,118 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
             close: () => setPicker(null)
           }
         },
+        canvas: {
+          customBadgeLabel: badgeLabel(labels),
+          // A file or text dragged in from outside lands as `<img>` or `<div>`, which no MJML
+          // validator accepts; drags from the palette are unaffected.
+          allowExternalDrop: false
+        },
         deviceManager: {
           devices: [
             { id: "desktop", name: "Desktop", width: "" },
             { id: "mobile", name: "Mobile", width: "375px", widthMedia: "480px" }
           ]
         },
-        plugins: [import_grapesjs_mjml.default]
+        plugins: [
+          (editor) => (0, import_grapesjs_mjml2.default)(editor, {
+            blocks: BUILTIN_BLOCKS,
+            block: builtinBlock(labels)
+          })
+        ]
       },
       onEditor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex h-full min-h-0 flex-1", inert: readOnly, children: [
-        readOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {}),
-          " ",
-          labels.agentWorking
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          LeftSidebar,
-          {
-            view: sidebarView,
-            onViewChange: setSidebarView,
-            markLayersSource: () => selectionSource.current = "layers",
-            selectedImageSrc,
-            onChooseImage: () => editorRef.current?.runCommand("open-image-picker")
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.Canvas, { className: "h-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              CanvasComments,
-              {
-                docId,
-                composeTarget,
-                onComposeConsumed: () => setComposeTarget(null),
-                refreshSignal: commentsRefresh,
-                onOpenCountChange
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              ImagePicker,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "div",
+        {
+          className: "relative flex h-full min-h-0 flex-1",
+          inert: readOnly,
+          onKeyDown: (e) => onBlockSearchKey(e.nativeEvent),
+          children: [
+            readOnly && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}),
+              " ",
+              labels.agentWorking
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              LeftSidebar,
               {
-                open: picker !== null,
-                currentUrl: picker?.current,
-                onSelect: (url) => {
-                  if (!readOnlyRef.current) picker?.select(url);
-                  setPicker(null);
-                },
-                onClose: () => {
-                  setPicker(null);
-                  editorRef.current?.AssetManager.close();
-                }
+                view: sidebarView,
+                onViewChange: setSidebarView,
+                markLayersSource: () => selectionSource.current = "layers",
+                blockSearchRef
               }
             ),
-            loading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {}),
-              " Loading editor\u2026"
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react9.Canvas, { className: "h-full" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  CanvasComments,
+                  {
+                    docId,
+                    composeTarget,
+                    onComposeConsumed: () => setComposeTarget(null),
+                    refreshSignal: commentsRefresh,
+                    onOpenCountChange
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  ImagePicker,
+                  {
+                    open: picker !== null,
+                    currentUrl: picker?.current,
+                    onSelect: (url) => {
+                      if (!readOnlyRef.current) picker?.select(url);
+                      setPicker(null);
+                    },
+                    onClose: () => {
+                      setPicker(null);
+                      editorRef.current?.AssetManager.close();
+                    }
+                  }
+                ),
+                loading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}),
+                  " ",
+                  labels.loadingEditor
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
-function CollapseSection({
-  title,
-  defaultOpen = true,
-  children
-}) {
-  const [open, setOpen] = (0, import_react7.useState)(defaultOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "border-b border-panel-border", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((o) => !o),
-        className: "flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold tracking-wide text-panel-muted-fg uppercase hover:text-panel-fg",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
-          title
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(!open && "hidden"), children })
-  ] });
-}
 function LeftSidebar({
   view,
   onViewChange,
   markLayersSource,
-  selectedImageSrc,
-  onChooseImage
+  blockSearchRef
 }) {
-  const editor = (0, import_react6.useEditorMaybe)();
+  const editor = (0, import_react9.useEditorMaybe)();
   const labels = useLabels();
-  const [layersExpanded, setLayersExpanded] = (0, import_react7.useState)(false);
-  const [blockSearch, setBlockSearch] = (0, import_react7.useState)("");
-  const changeView = (v) => {
-    if (v === "settings" && editor && !editor.getSelected()) {
-      const wrapper = editor.getWrapper();
-      const body = wrapper?.find("mj-body")[0] ?? wrapper;
-      if (body) editor.select(body);
-    }
-    onViewChange(v);
+  const [layersExpanded, setLayersExpanded] = (0, import_react10.useState)(false);
+  const [blockSearch, setBlockSearch] = (0, import_react10.useState)("");
+  const [noBlockMatches, setNoBlockMatches] = (0, import_react10.useState)(false);
+  const selectBody = () => {
+    let body;
+    editor?.getWrapper()?.onAll((c) => {
+      if (!body && tagOf6(c) === "mj-body") body = c;
+    });
+    if (body) editor?.select(body);
   };
   const toggleLayers = (expand) => {
     setLayersExpanded(expand);
     editor?.getWrapper()?.onAll((c) => c.set("open", expand));
   };
+  const onTileKey = (e) => {
+    const tile = e.target.closest("[data-block]");
+    const block = tile && editor?.Blocks.get(tile.dataset.block ?? "");
+    if (!editor || !block || !addsBlock(e)) return;
+    e.preventDefault();
+    if (insertBlock(editor, block)) (0, import_sonner2.toast)(labels.blockAdded(tile.textContent?.trim() ?? ""));
+  };
   const filterBlocks = (q) => {
     setBlockSearch(q);
     const root = document.getElementById("gjs-blocks");
@@ -2029,17 +4812,22 @@ function LeftSidebar({
       );
       cat.style.display = anyVisible ? "" : "none";
     });
+    setNoBlockMatches(
+      [...root.querySelectorAll(".gjs-block")].every(
+        (b) => b.style.display === "none"
+      )
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex border-b border-panel-border", children: [
-      ["blocks", "Blocks"],
-      ["settings", "Settings"],
-      ["layers", "Layers"]
-    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex border-b border-panel-border", children: [
+      ["blocks", labels.tabBlocks],
+      ["settings", labels.tabSettings],
+      ["layers", labels.tabLayers]
+    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
-        onClick: () => changeView(value),
+        onClick: () => onViewChange(value),
         className: cn(
           "relative flex-1 px-3 py-2.5 text-sm transition-colors",
           "after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:transition-colors",
@@ -2049,70 +4837,57 @@ function LeftSidebar({
       },
       value
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative border-b border-panel-border p-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative border-b border-panel-border p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Input,
           {
+            ref: blockSearchRef,
             value: blockSearch,
             onChange: (e) => filterBlocks(e.target.value),
             placeholder: labels.searchBlocks,
             className: "h-8 border-panel-border bg-panel-elevated pr-10 pl-7 text-sm text-panel-fg placeholder:text-panel-muted-fg"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "\u2318K" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
-      selectedImageSrc !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "border-b border-panel-border p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: onChooseImage,
-            title: labels.chooseImage,
-            className: "group relative block w-full overflow-hidden rounded-lg border border-panel-border bg-panel-elevated",
-            children: [
-              selectedImageSrc ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "img",
-                {
-                  src: selectedImageSrc,
-                  alt: "",
-                  className: "h-32 w-full bg-black/25 object-contain"
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex h-32 items-center justify-center text-panel-muted-fg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ImageIcon, { className: "size-8" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-medium text-white opacity-0 transition group-hover:opacity-100", children: labels.chooseImage })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            className: "mt-2 w-full bg-brand text-brand-fg hover:bg-brand/90",
-            onClick: onChooseImage,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ImageUp, {}),
-              labels.chooseImage
-            ]
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "/" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapseSection, { title: labels.attributes, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-traits" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapseSection, { title: labels.style, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-styles" }) })
+      noBlockMatches && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "px-3 py-6 text-center text-xs text-panel-muted-fg", children: labels.noBlocksMatch }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto", onKeyDown: onTileKey })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Inspector,
+      {
+        onEmailSettings: selectBody,
+        empty: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-center gap-3 px-6 py-10 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.MousePointerClick, { className: "size-6 text-panel-muted-fg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-panel-muted-fg", children: labels.settingsEmpty }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              className: "border-panel-border bg-panel-elevated text-panel-fg hover:bg-panel-hover hover:text-panel-fg",
+              onClick: selectBody,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Mail, {}),
+                labels.emailSettings
+              ]
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
         onMouseDownCapture: markLayersSource,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: labels.expandAll }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: labels.expandAll }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               Switch,
               {
                 checked: layersExpanded,
@@ -2121,7 +4896,16 @@ function LeftSidebar({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              id: "gjs-layers",
+              className: "min-h-0 flex-1 overflow-y-auto",
+              onDoubleClickCapture: (e) => {
+                if (e.target.closest("[data-name]")) e.stopPropagation();
+              }
+            }
+          )
         ]
       }
     )
@@ -2132,9 +4916,9 @@ function Breadcrumb({
   onSelect
 }) {
   const labels = useLabels();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-0.5", children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { className: "size-3 opacity-40" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex items-center gap-0.5", children: [
+    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ChevronRight, { className: "size-3 opacity-40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -2143,13 +4927,14 @@ function Breadcrumb({
           "rounded px-1.5 py-0.5 hover:bg-muted hover:text-foreground",
           i === crumbs.length - 1 && "font-medium text-brand"
         ),
-        children: crumbName(c)
+        children: crumbName(c, labels)
       }
     )
   ] }, i)) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  EmailEditor
+  EmailEditor,
+  blockProblems
 });
 //# sourceMappingURL=canvas.cjs.map