@marlinjai/email-editor-core 0.2.0

package/dist/index.mjs

@@ -0,0 +1,2287 @@
+import {
+  AccordionBlockSchema,
+  AccordionItemModel,
+  BackgroundGradientSchema,
+  BlockModel,
+  BlockSchema,
+  BlockType,
+  ButtonBlockSchema,
+  COLUMN_DEFAULTS,
+  CONTAINER_BLOCK_TYPES,
+  CURRENT_TEMPLATE_VERSION,
+  CarouselBlockSchema,
+  CarouselImageModel,
+  ColumnSchema,
+  CustomFontSchema,
+  DividerBlockSchema,
+  EmailTemplateSchema,
+  EmailTemplateSchemaV1_0,
+  EmailTemplateSchemaV1_1,
+  ExtraAttributesSchema,
+  FooterBlockSchema,
+  GradientStopSchema,
+  HeaderBlockSchema,
+  HeroBlockSchema,
+  ImageBlockSchema,
+  LEAF_BLOCK_TYPES,
+  MjmlHeadSchema,
+  NavbarBlockSchema,
+  NavbarLinkModel,
+  RawBlockSchema,
+  SECTION_DEFAULTS,
+  SUPPORTED_TEMPLATE_VERSIONS,
+  SectionSchema,
+  SectionSchemaV1_0,
+  SocialBlockSchema,
+  SocialLinkModel,
+  SpacerBlockSchema,
+  SpacingModel,
+  SpacingSchema,
+  TableBlockSchema,
+  TemplateMetadataSchema,
+  TemplateMigrationError,
+  TextBlockSchema,
+  TopLevelItemSchema,
+  WRAPPER_DEFAULTS,
+  WrapperSchema,
+  allSections,
+  buildGradientCSS,
+  dropFilled,
+  fillColumnWidths,
+  fillDefaults,
+  isLeafBlockType,
+  isTemplateMigrationError,
+  isWrapper,
+  migrateTemplate,
+  migrateV1_0ToV1_1,
+  paddingIn,
+  paddingOut,
+  validateTemplate,
+  withTemplateId
+} from "./chunk-2ZL7A2I6.mjs";
+
+// src/registry/BlockRegistry.ts
+var BlockRegistryImpl = class {
+  constructor() {
+    this.definitions = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Register a new block definition
+   */
+  register(definition) {
+    if (this.definitions.has(definition.type)) {
+      console.warn(`Block type "${definition.type}" is already registered. Overwriting.`);
+    }
+    this.definitions.set(definition.type, definition);
+  }
+  /**
+   * Unregister a block definition
+   */
+  unregister(type) {
+    this.definitions.delete(type);
+  }
+  /**
+   * Get a block definition by type
+   */
+  get(type) {
+    return this.definitions.get(type);
+  }
+  /**
+   * Get all registered block definitions
+   */
+  getAll() {
+    return Array.from(this.definitions.values());
+  }
+  /**
+   * Get blocks by category
+   */
+  getByCategory(category) {
+    return this.getAll().filter((def) => def.category === category);
+  }
+  /**
+   * Check if a block type is registered
+   */
+  has(type) {
+    return this.definitions.has(type);
+  }
+};
+function createBlockRegistry() {
+  return new BlockRegistryImpl();
+}
+
+// src/history/HistoryManager.ts
+import { produce } from "immer";
+var HistoryManager = class {
+  constructor(initialState, maxHistorySize = 50) {
+    this.history = [];
+    this.currentIndex = -1;
+    this.maxHistorySize = maxHistorySize;
+    this.history.push(initialState);
+    this.currentIndex = 0;
+  }
+  /**
+   * Get current state
+   */
+  getCurrentState() {
+    return this.history[this.currentIndex];
+  }
+  /**
+   * Update state with a producer function (Immer)
+   * Adds new state to history
+   */
+  updateState(producer) {
+    const newState = produce(this.getCurrentState(), producer);
+    if (this.currentIndex < this.history.length - 1) {
+      this.history = this.history.slice(0, this.currentIndex + 1);
+    }
+    this.history.push(newState);
+    if (this.history.length > this.maxHistorySize) {
+      this.history = this.history.slice(-this.maxHistorySize);
+      this.currentIndex = this.history.length - 1;
+    } else {
+      this.currentIndex++;
+    }
+    return newState;
+  }
+  /**
+   * Replace current state without affecting history
+   */
+  replaceState(newState) {
+    this.history[this.currentIndex] = newState;
+  }
+  /**
+   * Undo to previous state
+   */
+  undo() {
+    if (!this.canUndo()) {
+      return null;
+    }
+    this.currentIndex--;
+    return this.getCurrentState();
+  }
+  /**
+   * Redo to next state
+   */
+  redo() {
+    if (!this.canRedo()) {
+      return null;
+    }
+    this.currentIndex++;
+    return this.getCurrentState();
+  }
+  /**
+   * Check if undo is available
+   */
+  canUndo() {
+    return this.currentIndex > 0;
+  }
+  /**
+   * Check if redo is available
+   */
+  canRedo() {
+    return this.currentIndex < this.history.length - 1;
+  }
+  /**
+   * Clear all history and set new initial state
+   */
+  reset(initialState) {
+    this.history = [initialState];
+    this.currentIndex = 0;
+  }
+  /**
+   * Get history size
+   */
+  getHistorySize() {
+    return this.history.length;
+  }
+  /**
+   * Get current index
+   */
+  getCurrentIndex() {
+    return this.currentIndex;
+  }
+};
+function createHistoryManager(initialState, maxHistorySize = 50) {
+  return new HistoryManager(initialState, maxHistorySize);
+}
+
+// src/selection/SelectionManager.ts
+var SelectionManager = class {
+  constructor() {
+    this.state = {
+      blockId: null,
+      sectionId: null
+    };
+    this.listeners = [];
+  }
+  /**
+   * Get current selection
+   */
+  getSelection() {
+    return { ...this.state };
+  }
+  /**
+   * Select a block
+   */
+  selectBlock(blockId, sectionId) {
+    this.state = { blockId, sectionId };
+    this.notify();
+  }
+  /**
+   * Select a section
+   */
+  selectSection(sectionId) {
+    this.state = { blockId: null, sectionId };
+    this.notify();
+  }
+  /**
+   * Clear selection
+   */
+  clearSelection() {
+    this.state = { blockId: null, sectionId: null };
+    this.notify();
+  }
+  /**
+   * Subscribe to selection changes
+   */
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  /**
+   * Notify all listeners
+   */
+  notify() {
+    this.listeners.forEach((listener) => listener(this.state));
+  }
+};
+function createSelectionManager() {
+  return new SelectionManager();
+}
+
+// src/templates/registry.ts
+var PrebuiltTemplateRegistryImpl = class {
+  constructor() {
+    this.templates = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Register a pre-built template
+   */
+  register(template) {
+    this.templates.set(template.id, template);
+  }
+  /**
+   * Get a template by ID
+   */
+  get(id) {
+    return this.templates.get(id);
+  }
+  /**
+   * Get all registered templates
+   */
+  getAll() {
+    return Array.from(this.templates.values());
+  }
+  /**
+   * Get templates filtered by category
+   */
+  getByCategory(category) {
+    return this.getAll().filter((t) => t.category === category);
+  }
+};
+function createPrebuiltTemplateRegistry() {
+  return new PrebuiltTemplateRegistryImpl();
+}
+
+// src/store/mst/models/ColumnModel.ts
+import { types as types2, destroy as destroy2, detach as detach2, isStateTreeNode as isStateTreeNode2 } from "mobx-state-tree";
+import { nanoid as nanoid2 } from "nanoid";
+
+// src/store/mst/models/SubColumnModel.ts
+import { types, destroy, detach, isStateTreeNode } from "mobx-state-tree";
+import { nanoid } from "nanoid";
+var SubColumnModel = types.model("SubColumn", {
+  id: types.identifier,
+  width: types.optional(types.number, 50),
+  backgroundColor: types.maybe(types.string),
+  backgroundGradient: types.maybe(types.frozen()),
+  verticalAlign: types.maybe(types.enumeration(["top", "middle", "bottom"])),
+  paddingTop: types.maybe(types.string),
+  paddingRight: types.maybe(types.string),
+  paddingBottom: types.maybe(types.string),
+  paddingLeft: types.maybe(types.string),
+  blocks: types.array(BlockModel)
+}).actions((self) => ({
+  addBlock(block, index) {
+    const type = block.type;
+    if (!isLeafBlockType(type)) {
+      throw new Error(`SubColumn only accepts leaf blocks; got "${type}"`);
+    }
+    const blockToAdd = isStateTreeNode(block) ? detach(block) : BlockModel.create(block);
+    if (index !== void 0 && index >= 0 && index <= self.blocks.length) {
+      self.blocks.splice(index, 0, blockToAdd);
+    } else {
+      self.blocks.push(blockToAdd);
+    }
+    return blockToAdd;
+  },
+  removeBlock(blockId) {
+    const block = self.blocks.find((b) => b.id === blockId);
+    if (block) {
+      destroy(block);
+      return true;
+    }
+    return false;
+  },
+  moveBlock(fromIndex, toIndex) {
+    if (fromIndex < 0 || fromIndex >= self.blocks.length) return false;
+    if (toIndex < 0 || toIndex > self.blocks.length) return false;
+    if (fromIndex === toIndex) return false;
+    const [block] = self.blocks.splice(fromIndex, 1);
+    const adj = toIndex > fromIndex ? toIndex - 1 : toIndex;
+    self.blocks.splice(adj, 0, block);
+    return true;
+  },
+  detachBlock(blockId) {
+    const block = self.blocks.find((b) => b.id === blockId);
+    return block ? detach(block) : void 0;
+  },
+  setWidth(width) {
+    self.width = Math.max(0, Math.min(100, width));
+  },
+  setPadding(p) {
+    if (p.top !== void 0) self.paddingTop = p.top;
+    if (p.right !== void 0) self.paddingRight = p.right;
+    if (p.bottom !== void 0) self.paddingBottom = p.bottom;
+    if (p.left !== void 0) self.paddingLeft = p.left;
+  },
+  updateProperties(updates) {
+    Object.entries(updates).forEach(([k, v]) => {
+      if (k in self) self[k] = v;
+    });
+  },
+  clearBlocks() {
+    self.blocks.forEach((b) => destroy(b));
+    self.blocks.clear();
+  }
+})).views((self) => ({
+  get isEmpty() {
+    return self.blocks.length === 0;
+  },
+  get computedStyle() {
+    const style = { width: `${self.width}%` };
+    if (self.backgroundGradient) {
+      const css = buildGradientCSS(self.backgroundGradient);
+      if (css) style.backgroundImage = css;
+    }
+    if (self.backgroundColor) style.backgroundColor = self.backgroundColor;
+    if (self.verticalAlign) style.verticalAlign = self.verticalAlign;
+    if (self.paddingTop) style.paddingTop = self.paddingTop;
+    if (self.paddingRight) style.paddingRight = self.paddingRight;
+    if (self.paddingBottom) style.paddingBottom = self.paddingBottom;
+    if (self.paddingLeft) style.paddingLeft = self.paddingLeft;
+    return style;
+  }
+}));
+function createSubColumn(opts = {}) {
+  return {
+    id: opts.id ?? nanoid(),
+    width: opts.width ?? 50,
+    blocks: opts.blocks ?? []
+  };
+}
+
+// src/store/mst/models/ColumnModel.ts
+var ColumnModelBase = types2.model("Column", {
+  id: types2.identifier,
+  width: types2.optional(types2.number, 100),
+  // percentage (e.g., 50 for 50%)
+  backgroundColor: types2.maybe(types2.string),
+  backgroundGradient: types2.maybe(types2.frozen()),
+  verticalAlign: types2.maybe(types2.enumeration(["top", "middle", "bottom"])),
+  paddingTop: types2.maybe(types2.string),
+  paddingRight: types2.maybe(types2.string),
+  paddingBottom: types2.maybe(types2.string),
+  paddingLeft: types2.maybe(types2.string),
+  hidden: types2.optional(types2.boolean, false),
+  blocks: types2.array(BlockModel),
+  /**
+   * Optional sub-columns for depth-2 nesting.
+   * Invariant: blocks XOR subColumns. Both can be empty, but never both populated.
+   *
+   * `types.late` is used to break TypeScript's deep inference, which otherwise
+   * makes the inferred RootStore type exceed the compiler's serialization limit.
+   */
+  subColumns: types2.optional(types2.array(types2.late(() => SubColumnModel)), []),
+  /** MJML attributes the inspector has no control for (kept from an import). */
+  extraAttributes: types2.maybe(types2.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: types2.maybe(types2.frozen())
+}).preProcessSnapshot((snapshot) => {
+  if (snapshot && Array.isArray(snapshot.blocks) && snapshot.blocks.length > 0 && Array.isArray(snapshot.subColumns) && snapshot.subColumns.length > 0) {
+    throw new Error(
+      "Invalid Column snapshot: cannot have both blocks and subColumns populated"
+    );
+  }
+  return snapshot;
+}).actions((self) => ({
+  /**
+   * Add a block to this column
+   */
+  addBlock(block, index) {
+    if (self.subColumns.length > 0) {
+      throw new Error("Cannot add block to a group column; merge sub-columns first");
+    }
+    const blockToAdd = isStateTreeNode2(block) ? detach2(block) : BlockModel.create(block);
+    if (index !== void 0 && index >= 0 && index <= self.blocks.length) {
+      self.blocks.splice(index, 0, blockToAdd);
+    } else {
+      self.blocks.push(blockToAdd);
+    }
+    return blockToAdd;
+  },
+  /**
+   * Remove a block by ID
+   */
+  removeBlock(blockId) {
+    const block = self.blocks.find((b) => b.id === blockId);
+    if (block) {
+      destroy2(block);
+      return true;
+    }
+    return false;
+  },
+  /**
+   * Move a block within this column
+   */
+  moveBlock(fromIndex, toIndex) {
+    if (fromIndex < 0 || fromIndex >= self.blocks.length) return false;
+    if (toIndex < 0 || toIndex > self.blocks.length) return false;
+    if (fromIndex === toIndex) return false;
+    const [block] = self.blocks.splice(fromIndex, 1);
+    const adjustedToIndex = toIndex > fromIndex ? toIndex - 1 : toIndex;
+    self.blocks.splice(adjustedToIndex, 0, block);
+    return true;
+  },
+  /**
+   * Detach a block (remove without destroying, for moving to another column)
+   */
+  detachBlock(blockId) {
+    const block = self.blocks.find((b) => b.id === blockId);
+    if (block) {
+      return detach2(block);
+    }
+    return void 0;
+  },
+  /**
+   * Update column properties
+   */
+  updateProperties(updates) {
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in self) {
+        self[key] = value;
+      }
+    });
+  },
+  /**
+   * Set padding
+   */
+  setPadding(padding) {
+    if (padding.top !== void 0) self.paddingTop = padding.top;
+    if (padding.right !== void 0) self.paddingRight = padding.right;
+    if (padding.bottom !== void 0) self.paddingBottom = padding.bottom;
+    if (padding.left !== void 0) self.paddingLeft = padding.left;
+  },
+  /**
+   * Toggle column visibility
+   */
+  toggleHidden() {
+    self.hidden = !self.hidden;
+  },
+  /**
+   * Set column width
+   */
+  setWidth(width) {
+    self.width = Math.max(0, Math.min(100, width));
+  },
+  /**
+   * Clear all blocks
+   */
+  clearBlocks() {
+    self.blocks.forEach((block) => destroy2(block));
+    self.blocks.clear();
+  },
+  /**
+   * Convert this leaf column into a group of N sub-columns (2-4).
+   * Existing blocks migrate into the first sub-column.
+   */
+  splitIntoSubColumns(count) {
+    if (count < 2 || count > 4) {
+      throw new Error(`splitIntoSubColumns requires count in [2..4], got ${count}`);
+    }
+    const firstBlocks = self.blocks.map((b) => detach2(b));
+    self.blocks.clear();
+    self.subColumns.clear();
+    const base = Math.floor(100 / count * 100) / 100;
+    for (let i = 0; i < count; i++) {
+      const isLast = i === count - 1;
+      const w = isLast ? Math.round((100 - base * (count - 1)) * 100) / 100 : base;
+      self.subColumns.push(
+        SubColumnModel.create(createSubColumn({
+          width: w,
+          blocks: i === 0 ? firstBlocks : []
+        }))
+      );
+    }
+  },
+  /**
+   * Merge all sub-column blocks back into self.blocks (concatenated in order).
+   */
+  mergeSubColumns() {
+    const collected = [];
+    for (const sc of self.subColumns) {
+      while (sc.blocks.length > 0) {
+        const b = detach2(sc.blocks[0]);
+        collected.push(b);
+      }
+    }
+    self.subColumns.clear();
+    for (const b of collected) {
+      self.blocks.push(b);
+    }
+  }
+})).views((self) => ({
+  /**
+   * Whether this column is a leaf (holds blocks) or a group (holds sub-columns).
+   */
+  get kind() {
+    return self.subColumns.length > 0 ? "group" : "leaf";
+  },
+  /**
+   * Find a block by ID
+   */
+  getBlockById(blockId) {
+    return self.blocks.find((b) => b.id === blockId);
+  },
+  /**
+   * Get block index
+   */
+  getBlockIndex(blockId) {
+    return self.blocks.findIndex((b) => b.id === blockId);
+  },
+  /**
+   * Get visible blocks only
+   */
+  get visibleBlocks() {
+    return self.blocks.filter((b) => !b.hidden);
+  },
+  /**
+   * Count of blocks
+   */
+  get blockCount() {
+    return self.blocks.length;
+  },
+  /**
+   * Check if column is empty
+   */
+  get isEmpty() {
+    return self.blocks.length === 0;
+  },
+  /**
+   * Get padding as object
+   */
+  get padding() {
+    return {
+      top: self.paddingTop || void 0,
+      right: self.paddingRight || void 0,
+      bottom: self.paddingBottom || void 0,
+      left: self.paddingLeft || void 0
+    };
+  },
+  /**
+   * Get padding as CSS string
+   */
+  get paddingString() {
+    const { paddingTop, paddingRight, paddingBottom, paddingLeft } = self;
+    if (!paddingTop && !paddingRight && !paddingBottom && !paddingLeft) {
+      return void 0;
+    }
+    return `${paddingTop || "0"} ${paddingRight || "0"} ${paddingBottom || "0"} ${paddingLeft || "0"}`;
+  },
+  /**
+   * Computed style for rendering
+   */
+  get computedStyle() {
+    const style = {
+      width: `${self.width}%`
+    };
+    if (self.backgroundGradient) {
+      const css = buildGradientCSS(self.backgroundGradient);
+      if (css) style.backgroundImage = css;
+    }
+    if (self.backgroundColor) style.backgroundColor = self.backgroundColor;
+    if (self.verticalAlign) style.verticalAlign = self.verticalAlign;
+    if (self.paddingTop) style.paddingTop = self.paddingTop;
+    if (self.paddingRight) style.paddingRight = self.paddingRight;
+    if (self.paddingBottom) style.paddingBottom = self.paddingBottom;
+    if (self.paddingLeft) style.paddingLeft = self.paddingLeft;
+    return style;
+  },
+  /**
+   * MJML attributes for export
+   */
+  get mjmlAttributes() {
+    const attrs = {};
+    if (self.width !== 100) attrs.width = `${self.width}%`;
+    if (self.backgroundColor) attrs["background-color"] = self.backgroundColor;
+    if (self.verticalAlign) attrs["vertical-align"] = self.verticalAlign;
+    const hasPadding = self.paddingTop || self.paddingRight || self.paddingBottom || self.paddingLeft;
+    if (hasPadding) {
+      const padding = `${self.paddingTop || "0"} ${self.paddingRight || "0"} ${self.paddingBottom || "0"} ${self.paddingLeft || "0"}`;
+      attrs.padding = padding;
+    }
+    return attrs;
+  }
+}));
+var ColumnModel = ColumnModelBase.preProcessSnapshot(
+  (snapshot) => fillDefaults(paddingIn(snapshot), COLUMN_DEFAULTS)
+).postProcessSnapshot((snapshot) => paddingOut(dropFilled(snapshot)));
+function createColumn(options = {}) {
+  return {
+    id: options.id || nanoid2(),
+    width: options.width || 100,
+    blocks: options.blocks || []
+  };
+}
+
+// src/store/mst/models/SectionModel.ts
+import { types as types3, destroy as destroy3, detach as detach3 } from "mobx-state-tree";
+import { nanoid as nanoid3 } from "nanoid";
+var SectionModelBase = types3.model("Section", {
+  id: types3.identifier,
+  type: types3.optional(types3.literal("section"), "section"),
+  // Background
+  backgroundColor: types3.maybe(types3.string),
+  backgroundImage: types3.maybe(types3.string),
+  backgroundGradient: types3.maybe(
+    types3.model("BackgroundGradient", {
+      type: types3.enumeration(["linear", "radial"]),
+      angle: types3.number,
+      stops: types3.array(
+        types3.model("GradientStop", {
+          color: types3.string,
+          position: types3.number
+        })
+      )
+    })
+  ),
+  backgroundPosition: types3.maybe(types3.string),
+  backgroundRepeat: types3.maybe(types3.enumeration(["repeat", "no-repeat"])),
+  backgroundSize: types3.maybe(types3.string),
+  // Layout
+  fullWidth: types3.optional(types3.boolean, false),
+  noStack: types3.optional(types3.boolean, false),
+  // mj-group behavior
+  // Visibility
+  hidden: types3.optional(types3.boolean, false),
+  // Padding
+  paddingTop: types3.maybe(types3.string),
+  paddingRight: types3.maybe(types3.string),
+  paddingBottom: types3.maybe(types3.string),
+  paddingLeft: types3.maybe(types3.string),
+  // Columns
+  columns: types3.array(ColumnModel),
+  /**
+   * Emit the section's raw blocks straight into its parent (mj-body or
+   * mj-wrapper) instead of wrapping them in an mj-section (set by the MJML
+   * import for markup that sat there). Ignored once the section holds any
+   * other block.
+   */
+  bodyRaw: types3.maybe(types3.boolean),
+  /** MJML attributes the inspector has no control for (kept from an import). */
+  extraAttributes: types3.maybe(types3.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: types3.maybe(types3.frozen())
+}).actions((self) => ({
+  /**
+   * Add a column to this section
+   */
+  addColumn(column, index) {
+    const columnToAdd = ColumnModel.is(column) ? detach3(column) : ColumnModel.create(column);
+    if (index !== void 0 && index >= 0 && index <= self.columns.length) {
+      self.columns.splice(index, 0, columnToAdd);
+    } else {
+      self.columns.push(columnToAdd);
+    }
+    this.rebalanceColumnWidths();
+    return columnToAdd;
+  },
+  /**
+   * Remove a column by ID
+   */
+  removeColumn(columnId) {
+    const column = self.columns.find((c) => c.id === columnId);
+    if (column && self.columns.length > 1) {
+      destroy3(column);
+      this.rebalanceColumnWidths();
+      return true;
+    }
+    return false;
+  },
+  /**
+   * Set the number of columns (1-4)
+   */
+  setColumnCount(count) {
+    const currentCount = self.columns.length;
+    if (count === currentCount) return;
+    if (count > currentCount) {
+      for (let i = currentCount; i < count; i++) {
+        self.columns.push(ColumnModel.create(createColumn()));
+      }
+    } else {
+      const blocksToMove = [];
+      for (let i = count; i < currentCount; i++) {
+        const column = self.columns[i];
+        column.blocks.forEach((block) => {
+          blocksToMove.push(detach3(block));
+        });
+      }
+      while (self.columns.length > count) {
+        const column = self.columns[self.columns.length - 1];
+        destroy3(column);
+      }
+      blocksToMove.forEach((block) => {
+        self.columns[0].blocks.push(block);
+      });
+    }
+    this.rebalanceColumnWidths();
+  },
+  /**
+   * Rebalance column widths to equal distribution
+   */
+  rebalanceColumnWidths() {
+    const columnCount = self.columns.length;
+    if (columnCount === 0) return;
+    const equalWidth = Math.floor(100 / columnCount);
+    self.columns.forEach((column, index) => {
+      if (index === columnCount - 1) {
+        column.setWidth(100 - equalWidth * (columnCount - 1));
+      } else {
+        column.setWidth(equalWidth);
+      }
+    });
+  },
+  /**
+   * Update section properties
+   */
+  updateProperties(updates) {
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in self) {
+        self[key] = value;
+      }
+    });
+  },
+  /**
+   * Set padding
+   */
+  setPadding(padding) {
+    if (padding.top !== void 0) self.paddingTop = padding.top;
+    if (padding.right !== void 0) self.paddingRight = padding.right;
+    if (padding.bottom !== void 0) self.paddingBottom = padding.bottom;
+    if (padding.left !== void 0) self.paddingLeft = padding.left;
+  },
+  /**
+   * Toggle section visibility
+   */
+  toggleHidden() {
+    self.hidden = !self.hidden;
+  },
+  /**
+   * Toggle full width
+   */
+  toggleFullWidth() {
+    self.fullWidth = !self.fullWidth;
+  },
+  /**
+   * Toggle no-stack (mj-group)
+   */
+  toggleNoStack() {
+    self.noStack = !self.noStack;
+  },
+  /**
+   * Move a block from one column to another within this section
+   */
+  moveBlockBetweenColumns(blockId, sourceColumnId, targetColumnId, targetIndex) {
+    const sourceColumn = self.columns.find((c) => c.id === sourceColumnId);
+    const targetColumn = self.columns.find((c) => c.id === targetColumnId);
+    if (!sourceColumn || !targetColumn) return false;
+    const block = sourceColumn.detachBlock(blockId);
+    if (!block) return false;
+    targetColumn.addBlock(block, targetIndex);
+    return true;
+  }
+})).views((self) => ({
+  /**
+   * Find a column by ID
+   */
+  getColumnById(columnId) {
+    return self.columns.find((c) => c.id === columnId);
+  },
+  /**
+   * Find a block by ID (searches all columns)
+   */
+  findBlockById(blockId) {
+    for (const column of self.columns) {
+      const block = column.getBlockById(blockId);
+      if (block) return block;
+    }
+    return void 0;
+  },
+  /**
+   * Find which column contains a block
+   */
+  findColumnByBlockId(blockId) {
+    for (const column of self.columns) {
+      if (column.getBlockById(blockId)) {
+        return column;
+      }
+    }
+    return void 0;
+  },
+  /**
+   * Get column index
+   */
+  getColumnIndex(columnId) {
+    return self.columns.findIndex((c) => c.id === columnId);
+  },
+  /**
+   * Get visible columns
+   */
+  get visibleColumns() {
+    return self.columns.filter((c) => !c.hidden);
+  },
+  /**
+   * Column count
+   */
+  get columnCount() {
+    return self.columns.length;
+  },
+  /**
+   * Total block count across all columns
+   */
+  get totalBlockCount() {
+    return self.columns.reduce((sum, col) => sum + col.blockCount, 0);
+  },
+  /**
+   * Check if section is empty (all columns are empty)
+   */
+  get isEmpty() {
+    return self.columns.every((c) => c.isEmpty);
+  },
+  /**
+   * Get padding as object
+   */
+  get padding() {
+    return {
+      top: self.paddingTop || void 0,
+      right: self.paddingRight || void 0,
+      bottom: self.paddingBottom || void 0,
+      left: self.paddingLeft || void 0
+    };
+  },
+  /**
+   * Get padding as CSS string
+   */
+  get paddingString() {
+    const { paddingTop, paddingRight, paddingBottom, paddingLeft } = self;
+    if (!paddingTop && !paddingRight && !paddingBottom && !paddingLeft) {
+      return void 0;
+    }
+    return `${paddingTop || "0"} ${paddingRight || "0"} ${paddingBottom || "0"} ${paddingLeft || "0"}`;
+  },
+  /**
+   * Computed style for rendering
+   */
+  get computedStyle() {
+    const style = {};
+    if (self.backgroundColor) style.backgroundColor = self.backgroundColor;
+    const gradientCSS = self.backgroundGradient ? buildGradientCSS(self.backgroundGradient) : void 0;
+    if (gradientCSS) {
+      style.backgroundImage = gradientCSS;
+    } else if (self.backgroundImage) {
+      style.backgroundImage = `url(${self.backgroundImage})`;
+      if (self.backgroundPosition) style.backgroundPosition = self.backgroundPosition;
+      if (self.backgroundRepeat) style.backgroundRepeat = self.backgroundRepeat;
+      if (self.backgroundSize) style.backgroundSize = self.backgroundSize;
+    }
+    if (self.paddingTop) style.paddingTop = self.paddingTop;
+    if (self.paddingRight) style.paddingRight = self.paddingRight;
+    if (self.paddingBottom) style.paddingBottom = self.paddingBottom;
+    if (self.paddingLeft) style.paddingLeft = self.paddingLeft;
+    return style;
+  },
+  /**
+   * MJML attributes for export
+   */
+  get mjmlAttributes() {
+    const attrs = {};
+    if (self.backgroundColor) attrs["background-color"] = self.backgroundColor;
+    if (self.backgroundImage) attrs["background-url"] = self.backgroundImage;
+    if (self.backgroundPosition) attrs["background-position"] = self.backgroundPosition;
+    if (self.backgroundRepeat) attrs["background-repeat"] = self.backgroundRepeat;
+    if (self.backgroundSize) attrs["background-size"] = self.backgroundSize;
+    if (self.fullWidth) attrs["full-width"] = "full-width";
+    const hasPadding = self.paddingTop || self.paddingRight || self.paddingBottom || self.paddingLeft;
+    if (hasPadding) {
+      const padding = `${self.paddingTop || "0"} ${self.paddingRight || "0"} ${self.paddingBottom || "0"} ${self.paddingLeft || "0"}`;
+      attrs.padding = padding;
+    }
+    return attrs;
+  },
+  /**
+   * How wide the section's visible columns are together, in percent, as MJML
+   * lays them out: each column's width, where a column opened without one
+   * holds MJML's share (100 / columns, whatever its siblings say). Over 100,
+   * the last column wraps below the others on desktop.
+   */
+  get columnWidthTotal() {
+    const total = self.columns.filter((c) => !c.hidden).reduce((sum, c) => sum + c.width, 0);
+    return Math.round(total * 100) / 100;
+  },
+  /** Whether the columns overflow the section ({@link columnWidthTotal} over 100). */
+  get columnsOverflow() {
+    return this.columnWidthTotal > 100;
+  },
+  /**
+   * Display name for layers panel
+   */
+  get displayName() {
+    const count = self.columns.length;
+    if (count === 1) {
+      return "Full Width Section";
+    }
+    return `${count}-Column Section`;
+  }
+}));
+var SectionModel = SectionModelBase.preProcessSnapshot(
+  (snapshot) => fillDefaults(fillColumnWidths(paddingIn(snapshot)), SECTION_DEFAULTS)
+).postProcessSnapshot((snapshot) => paddingOut(dropFilled(snapshot)));
+function createSection(options = {}) {
+  const columnCount = options.columnCount || 1;
+  const columnWidth = Math.floor(100 / columnCount);
+  const columns = [];
+  for (let i = 0; i < columnCount; i++) {
+    columns.push(createColumn({
+      width: i === columnCount - 1 ? 100 - columnWidth * (columnCount - 1) : columnWidth
+    }));
+  }
+  return {
+    id: options.id || nanoid3(),
+    type: "section",
+    backgroundColor: options.backgroundColor,
+    columns
+  };
+}
+
+// src/store/mst/models/WrapperModel.ts
+import { types as types4 } from "mobx-state-tree";
+import { nanoid as nanoid4 } from "nanoid";
+var MJML_WRAPPER_DEFAULT_PADDING = { top: "20px", right: "0px", bottom: "20px", left: "0px" };
+var WrapperModelBase = types4.model("Wrapper", {
+  id: types4.identifier,
+  type: types4.literal("wrapper"),
+  hidden: types4.optional(types4.boolean, false),
+  // Background
+  backgroundColor: types4.maybe(types4.string),
+  backgroundImage: types4.maybe(types4.string),
+  backgroundGradient: types4.maybe(types4.frozen()),
+  backgroundPosition: types4.maybe(types4.string),
+  backgroundRepeat: types4.maybe(types4.enumeration(["repeat", "no-repeat"])),
+  backgroundSize: types4.maybe(types4.string),
+  // Border
+  border: types4.maybe(types4.string),
+  borderTop: types4.maybe(types4.string),
+  borderRight: types4.maybe(types4.string),
+  borderBottom: types4.maybe(types4.string),
+  borderLeft: types4.maybe(types4.string),
+  borderRadius: types4.maybe(types4.string),
+  // Padding (the schema's `padding` object, flat in the store; see `spacingSnapshot.ts`)
+  paddingTop: types4.maybe(types4.string),
+  paddingRight: types4.maybe(types4.string),
+  paddingBottom: types4.maybe(types4.string),
+  paddingLeft: types4.maybe(types4.string),
+  // Layout
+  fullWidth: types4.optional(types4.boolean, false),
+  cssClass: types4.maybe(types4.string),
+  gap: types4.maybe(types4.string),
+  textAlign: types4.maybe(types4.enumeration(["left", "center", "right"])),
+  sections: types4.array(SectionModel),
+  /** MJML attributes the inspector has no control for (kept from an import). */
+  extraAttributes: types4.maybe(types4.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: types4.maybe(types4.frozen())
+}).actions((self) => ({
+  /** Set any of the inspector's fields; `undefined` clears one. */
+  updateProperties(updates) {
+    for (const [key, value] of Object.entries(updates)) {
+      if (key in self) self[key] = value;
+    }
+  },
+  toggleHidden() {
+    self.hidden = !self.hidden;
+  },
+  toggleFullWidth() {
+    self.fullWidth = !self.fullWidth;
+  }
+})).views((self) => ({
+  get isEmpty() {
+    return self.sections.length === 0 || self.sections.every((s) => s.isEmpty);
+  },
+  get displayName() {
+    const n = self.sections.length;
+    return n === 0 ? "Container (empty)" : `Container, ${n} ${n === 1 ? "section" : "sections"}`;
+  },
+  /**
+   * The padding the mail gets: MJML's `20px 0` when none is set. As soon as
+   * one side is set, the compiler writes all four and an unset side is 0.
+   */
+  get effectivePadding() {
+    const { paddingTop, paddingRight, paddingBottom, paddingLeft } = self;
+    if (!paddingTop && !paddingRight && !paddingBottom && !paddingLeft) return { ...MJML_WRAPPER_DEFAULT_PADDING };
+    return { top: paddingTop || "0px", right: paddingRight || "0px", bottom: paddingBottom || "0px", left: paddingLeft || "0px" };
+  },
+  /** The wrapper's box on the canvas, styled as MJML renders it. */
+  get computedStyle() {
+    const style = {};
+    const gradientCSS = self.backgroundGradient ? buildGradientCSS(self.backgroundGradient) : void 0;
+    if (gradientCSS) {
+      style.backgroundColor = self.backgroundGradient?.stops[0]?.color;
+      style.backgroundImage = gradientCSS;
+    } else {
+      if (self.backgroundColor) style.backgroundColor = self.backgroundColor;
+      if (self.backgroundImage) {
+        style.backgroundImage = `url(${self.backgroundImage})`;
+        style.backgroundPosition = self.backgroundPosition || "top center";
+        style.backgroundSize = self.backgroundSize || "auto";
+        style.backgroundRepeat = self.backgroundRepeat || "repeat";
+      }
+    }
+    if (self.border) style.border = self.border;
+    if (self.borderTop) style.borderTop = self.borderTop;
+    if (self.borderRight) style.borderRight = self.borderRight;
+    if (self.borderBottom) style.borderBottom = self.borderBottom;
+    if (self.borderLeft) style.borderLeft = self.borderLeft;
+    if (self.borderRadius) {
+      style.borderRadius = self.borderRadius;
+      style.overflow = "hidden";
+    }
+    const p = this.effectivePadding;
+    style.paddingTop = p.top;
+    style.paddingRight = p.right;
+    style.paddingBottom = p.bottom;
+    style.paddingLeft = p.left;
+    if (self.textAlign) style.textAlign = self.textAlign;
+    return style;
+  }
+}));
+var WrapperModel = WrapperModelBase.preProcessSnapshot(
+  (snapshot) => fillDefaults(paddingIn(snapshot), WRAPPER_DEFAULTS)
+).postProcessSnapshot((snapshot) => paddingOut(dropFilled(snapshot)));
+function createWrapper(options = {}) {
+  return {
+    id: options.id || nanoid4(),
+    type: "wrapper",
+    sections: options.sections ?? [createSection()]
+  };
+}
+
+// src/store/mst/models/TemplateModel.ts
+import { types as types5, destroy as destroy4, detach as detach4, getSnapshot } from "mobx-state-tree";
+import { nanoid as nanoid5 } from "nanoid";
+var TopLevelItemModel = types5.union(
+  {
+    dispatcher: (snapshot) => snapshot?.type === "wrapper" ? WrapperModel : SectionModel
+  },
+  SectionModel,
+  WrapperModel
+);
+function isWrapperInstance(item) {
+  return item?.type === "wrapper";
+}
+function cloneSectionSnapshot(snapshot) {
+  const cloneBlocks = (blocks) => (blocks ?? []).map((b) => ({ ...b, id: nanoid5() }));
+  return {
+    ...snapshot,
+    id: nanoid5(),
+    columns: (snapshot.columns ?? []).map((col) => ({
+      ...col,
+      id: nanoid5(),
+      blocks: cloneBlocks(col.blocks),
+      ...col.subColumns ? { subColumns: col.subColumns.map((sc) => ({ ...sc, id: nanoid5(), blocks: cloneBlocks(sc.blocks) })) } : {}
+    }))
+  };
+}
+var FontDefinitionModel = types5.model("FontDefinition", {
+  name: types5.string,
+  href: types5.string
+});
+var ThemeColorModel = types5.model("ThemeColor", {
+  name: types5.string,
+  value: types5.string
+}).actions((self) => ({
+  setValue(value) {
+    self.value = value;
+  },
+  setName(name) {
+    self.name = name;
+  }
+}));
+var DEFAULT_THEME_COLORS = [
+  { name: "Primary", value: "#944923" },
+  { name: "Secondary", value: "#ffffff" },
+  { name: "Text", value: "#333333" },
+  { name: "Background", value: "#f5f5f5" }
+];
+var METADATA_DEFAULTS = {
+  title: () => "Untitled Template",
+  subject: () => "",
+  previewText: () => "",
+  createdAt: () => Date.now(),
+  updatedAt: () => Date.now(),
+  fonts: () => [],
+  themeColors: () => DEFAULT_THEME_COLORS.map((c) => ({ ...c }))
+};
+var TemplateMetadataModel = types5.model("TemplateMetadata", {
+  title: types5.optional(types5.string, "Untitled Template"),
+  subject: types5.optional(types5.string, ""),
+  previewText: types5.optional(types5.string, ""),
+  createdAt: types5.optional(types5.Date, () => /* @__PURE__ */ new Date()),
+  updatedAt: types5.optional(types5.Date, () => /* @__PURE__ */ new Date()),
+  fonts: types5.optional(types5.array(FontDefinitionModel), []),
+  themeColors: types5.optional(types5.array(ThemeColorModel), DEFAULT_THEME_COLORS),
+  breakpoint: types5.maybe(types5.string),
+  customCSS: types5.maybe(types5.string),
+  inlineCSS: types5.maybe(types5.string),
+  /** The MJML head and body settings of an imported document (see `MjmlHead` in the schema). */
+  mjmlHead: types5.maybe(types5.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: types5.maybe(types5.frozen()),
+  /** Dates a stored document wrote as ISO strings, so they go back out as written. */
+  dateStrings: types5.maybe(types5.frozen())
+}).actions((self) => ({
+  update(updates) {
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in self && value !== void 0) {
+        self[key] = value;
+      }
+    });
+    self.updatedAt = /* @__PURE__ */ new Date();
+  },
+  addFont(name, href) {
+    self.fonts.push(FontDefinitionModel.create({ name, href }));
+    self.updatedAt = /* @__PURE__ */ new Date();
+  },
+  removeFont(name) {
+    const index = self.fonts.findIndex((f) => f.name === name);
+    if (index !== -1) {
+      self.fonts.splice(index, 1);
+      self.updatedAt = /* @__PURE__ */ new Date();
+    }
+  },
+  addThemeColor(name, value) {
+    self.themeColors.push(ThemeColorModel.create({ name, value }));
+    self.updatedAt = /* @__PURE__ */ new Date();
+  },
+  updateThemeColor(name, value) {
+    const color = self.themeColors.find((c) => c.name === name);
+    if (color) {
+      color.setValue(value);
+      self.updatedAt = /* @__PURE__ */ new Date();
+    }
+  },
+  removeThemeColor(name) {
+    const index = self.themeColors.findIndex((c) => c.name === name);
+    if (index !== -1) {
+      self.themeColors.splice(index, 1);
+      self.updatedAt = /* @__PURE__ */ new Date();
+    }
+  },
+  touch() {
+    self.updatedAt = /* @__PURE__ */ new Date();
+  }
+})).preProcessSnapshot((snapshot) => {
+  if (!snapshot) return snapshot;
+  const dateStrings = {};
+  const toDate = (key, value) => {
+    if (typeof value !== "string") return value;
+    const ms = Date.parse(value);
+    if (Number.isNaN(ms)) return void 0;
+    dateStrings[key] = value;
+    return ms;
+  };
+  const parsed = {
+    ...snapshot,
+    createdAt: toDate("createdAt", snapshot.createdAt),
+    updatedAt: toDate("updatedAt", snapshot.updatedAt),
+    ...Object.keys(dateStrings).length > 0 ? { dateStrings } : {}
+  };
+  return fillDefaults(parsed, METADATA_DEFAULTS);
+}).postProcessSnapshot((snapshot) => {
+  const { dateStrings, ...rest } = dropFilled(snapshot);
+  const out = rest;
+  for (const [key, written] of Object.entries(dateStrings ?? {})) {
+    if (out[key] === Date.parse(written)) out[key] = written;
+  }
+  return out;
+});
+var TemplateModel = types5.model("Template", {
+  id: types5.optional(types5.string, () => nanoid5()),
+  version: types5.optional(types5.string, CURRENT_TEMPLATE_VERSION),
+  metadata: types5.optional(TemplateMetadataModel, {}),
+  /** The top level, in order: sections and wrappers (see `TopLevelItemModel`). */
+  sections: types5.array(TopLevelItemModel)
+}).preProcessSnapshot((snapshot) => {
+  if (!snapshot || snapshot.version !== "1.0" || !Array.isArray(snapshot.sections)) return snapshot;
+  return migrateV1_0ToV1_1(snapshot);
+}).views((self) => ({
+  /** Every section in document order, the ones inside wrappers included. */
+  get allSections() {
+    const out = [];
+    for (const item of self.sections) {
+      if (isWrapperInstance(item)) out.push(...item.sections);
+      else out.push(item);
+    }
+    return out;
+  },
+  /** The top-level wrappers, in order. */
+  get wrappers() {
+    return self.sections.filter(isWrapperInstance);
+  }
+})).views((self) => ({
+  getSectionById(sectionId) {
+    return self.allSections.find((s) => s.id === sectionId);
+  },
+  getWrapperById(wrapperId) {
+    return self.wrappers.find((w) => w.id === wrapperId);
+  },
+  /** The wrapper a section sits in; undefined for a top-level section (or an unknown id). */
+  findWrapperBySectionId(sectionId) {
+    return self.wrappers.find((w) => w.sections.some((s) => s.id === sectionId));
+  },
+  /** The index of a top-level item (section or wrapper); -1 when it is not at the top level. */
+  getSectionIndex(itemId) {
+    return self.sections.findIndex((s) => s.id === itemId);
+  }
+})).actions((self) => {
+  const locate = (sectionId) => {
+    const top = self.sections.findIndex((s) => s.id === sectionId && !isWrapperInstance(s));
+    if (top !== -1) return { list: self.sections, index: top };
+    for (const wrapper of self.wrappers) {
+      const index = wrapper.sections.findIndex((s) => s.id === sectionId);
+      if (index !== -1) return { list: wrapper.sections, index, wrapper };
+    }
+    return void 0;
+  };
+  return {
+    /**
+     * Add a section at the top level, or into a wrapper when `wrapperId`
+     * names one. `index` is the position in that list; the end when left out.
+     */
+    addSection(section, index, wrapperId) {
+      const sectionToAdd = SectionModel.create(section);
+      const wrapper = wrapperId ? self.getWrapperById(wrapperId) : void 0;
+      if (wrapperId && !wrapper) throw new Error(`No wrapper with id "${wrapperId}"`);
+      const list = wrapper ? wrapper.sections : self.sections;
+      if (index !== void 0 && index >= 0 && index <= list.length) list.splice(index, 0, sectionToAdd);
+      else list.push(sectionToAdd);
+      self.metadata.touch();
+      return sectionToAdd;
+    },
+    /** Add a wrapper at the top level (by default around one empty section). */
+    addWrapper(wrapper = createWrapper(), index) {
+      const wrapperToAdd = WrapperModel.create(wrapper);
+      if (index !== void 0 && index >= 0 && index <= self.sections.length) self.sections.splice(index, 0, wrapperToAdd);
+      else self.sections.push(wrapperToAdd);
+      self.metadata.touch();
+      return wrapperToAdd;
+    },
+    /** Remove a section, wherever it is (a wrapper that loses its last section stays, empty). */
+    removeSection(sectionId) {
+      const at = locate(sectionId);
+      if (!at) return false;
+      destroy4(at.list[at.index]);
+      self.metadata.touch();
+      return true;
+    },
+    /**
+     * Move a top-level item (a section or a wrapper) to another position
+     * of the top level.
+     */
+    moveSection(itemId, toIndex) {
+      const fromIndex = self.sections.findIndex((s) => s.id === itemId);
+      if (fromIndex === -1 || toIndex < 0 || toIndex >= self.sections.length) return false;
+      if (fromIndex === toIndex) return false;
+      const item = detach4(self.sections[fromIndex]);
+      self.sections.splice(toIndex, 0, item);
+      self.metadata.touch();
+      return true;
+    },
+    /**
+     * Move a section into a wrapper, out of one, between two, or within one.
+     * `wrapperId: null` targets the top level. `index` is the position in
+     * the target list as it is after the section left its old place.
+     */
+    moveSectionTo(sectionId, target) {
+      const at = locate(sectionId);
+      if (!at) return false;
+      const wrapper = target.wrapperId ? self.getWrapperById(target.wrapperId) : void 0;
+      if (target.wrapperId && !wrapper) return false;
+      const sameList = (at.wrapper?.id ?? null) === (target.wrapperId ?? null);
+      if (sameList && at.index === target.index) return false;
+      const section = detach4(at.list[at.index]);
+      const list = wrapper ? wrapper.sections : self.sections;
+      const index = Math.max(0, Math.min(target.index, list.length));
+      list.splice(index, 0, section);
+      self.metadata.touch();
+      return true;
+    },
+    /** Put a top-level section into a new wrapper, in its place. Returns the wrapper. */
+    wrapSection(sectionId) {
+      const index = self.sections.findIndex((s) => s.id === sectionId && !isWrapperInstance(s));
+      if (index === -1) return void 0;
+      const section = detach4(self.sections[index]);
+      const wrapper = WrapperModel.create({ id: nanoid5(), type: "wrapper", sections: [] });
+      self.sections.splice(index, 0, wrapper);
+      wrapper.sections.push(section);
+      self.metadata.touch();
+      return wrapper;
+    },
+    /** Take a wrapper's sections out to the top level, in its place, and remove the wrapper. Returns the sections' ids. */
+    unwrap(wrapperId) {
+      const index = self.sections.findIndex((s) => s.id === wrapperId && isWrapperInstance(s));
+      if (index === -1) return [];
+      const wrapper = self.sections[index];
+      const sections = wrapper.sections.slice().map((s) => detach4(s));
+      destroy4(wrapper);
+      self.sections.splice(index, 0, ...sections);
+      self.metadata.touch();
+      return sections.map((s) => s.id);
+    },
+    /**
+     * Remove a wrapper. With `keepSections`, its sections stay, in its place
+     * (the same as {@link unwrap}); otherwise they go with it.
+     */
+    removeWrapper(wrapperId, options) {
+      const wrapper = self.getWrapperById(wrapperId);
+      if (!wrapper) return false;
+      if (options.keepSections) {
+        this.unwrap(wrapperId);
+      } else {
+        destroy4(wrapper);
+        self.metadata.touch();
+      }
+      return true;
+    },
+    /** Duplicate a section right after itself, in the same wrapper (or at the top level). */
+    duplicateSection(sectionId) {
+      const at = locate(sectionId);
+      if (!at) return void 0;
+      const newSection = SectionModel.create(cloneSectionSnapshot(getSnapshot(at.list[at.index])));
+      at.list.splice(at.index + 1, 0, newSection);
+      self.metadata.touch();
+      return newSection;
+    },
+    /** Duplicate a wrapper and everything inside it, right after itself. */
+    duplicateWrapper(wrapperId) {
+      const index = self.sections.findIndex((s) => s.id === wrapperId && isWrapperInstance(s));
+      if (index === -1) return void 0;
+      const snapshot = getSnapshot(self.sections[index]);
+      const copy = WrapperModel.create({
+        ...snapshot,
+        id: nanoid5(),
+        sections: snapshot.sections.map((s) => cloneSectionSnapshot(s))
+      });
+      self.sections.splice(index + 1, 0, copy);
+      self.metadata.touch();
+      return copy;
+    },
+    insertBlock(columnId, block, index) {
+      for (const section of self.allSections) {
+        const column = section.getColumnById(columnId);
+        if (column) {
+          self.metadata.touch();
+          const newBlock = BlockModel.create(block);
+          if (index !== void 0 && index >= 0 && index <= column.blocks.length) {
+            column.blocks.splice(index, 0, newBlock);
+          } else {
+            column.blocks.push(newBlock);
+          }
+          return newBlock;
+        }
+      }
+      return void 0;
+    },
+    moveBlock(blockId, targetColumnId, targetIndex) {
+      let sourceColumn;
+      let block;
+      for (const section of self.allSections) {
+        const col = section.findColumnByBlockId(blockId);
+        if (col) {
+          sourceColumn = col;
+          block = col.getBlockById(blockId);
+          break;
+        }
+      }
+      if (!sourceColumn || !block) return false;
+      let targetColumn;
+      for (const section of self.allSections) {
+        const col = section.getColumnById(targetColumnId);
+        if (col) {
+          targetColumn = col;
+          break;
+        }
+      }
+      if (!targetColumn) return false;
+      if (sourceColumn.id === targetColumn.id) {
+        const fromIndex = sourceColumn.getBlockIndex(blockId);
+        sourceColumn.moveBlock(fromIndex, targetIndex);
+      } else {
+        const detachedBlock = sourceColumn.detachBlock(blockId);
+        if (detachedBlock) {
+          if (targetIndex >= 0 && targetIndex <= targetColumn.blocks.length) {
+            targetColumn.blocks.splice(targetIndex, 0, detachedBlock);
+          } else {
+            targetColumn.blocks.push(detachedBlock);
+          }
+        }
+      }
+      self.metadata.touch();
+      return true;
+    },
+    deleteBlock(blockId) {
+      for (const section of self.allSections) {
+        for (const column of section.columns) {
+          if (column.removeBlock(blockId)) {
+            self.metadata.touch();
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    updateMetadata(updates) {
+      self.metadata.update(updates);
+    },
+    clear() {
+      self.sections.forEach((s) => destroy4(s));
+      self.sections.clear();
+      self.metadata.touch();
+    }
+  };
+}).views((self) => ({
+  findColumnById(columnId) {
+    for (const section of self.allSections) {
+      const column = section.getColumnById(columnId);
+      if (column) return column;
+    }
+    return void 0;
+  },
+  findBlockById(blockId) {
+    for (const section of self.allSections) {
+      const block = section.findBlockById(blockId);
+      if (block) return block;
+    }
+    return void 0;
+  },
+  findSectionByBlockId(blockId) {
+    for (const section of self.allSections) {
+      if (section.findBlockById(blockId)) {
+        return section;
+      }
+    }
+    return void 0;
+  },
+  findColumnByBlockId(blockId) {
+    for (const section of self.allSections) {
+      const column = section.findColumnByBlockId(blockId);
+      if (column) return column;
+    }
+    return void 0;
+  },
+  /** Visible top-level items (a hidden wrapper hides everything inside it). */
+  get visibleSections() {
+    return self.sections.filter((s) => !s.hidden);
+  },
+  /** How many sections the document has, the ones inside wrappers included. */
+  get sectionCount() {
+    return self.allSections.length;
+  },
+  get totalBlockCount() {
+    return self.allSections.reduce((sum, section) => sum + section.totalBlockCount, 0);
+  },
+  get isEmpty() {
+    return self.allSections.every((s) => s.isEmpty);
+  },
+  getBlocksByType(type) {
+    const blocks = [];
+    for (const section of self.allSections) {
+      for (const column of section.columns) {
+        for (const block of column.blocks) {
+          if (block.type === type) {
+            blocks.push(block);
+          }
+        }
+      }
+    }
+    return blocks;
+  },
+  get allBlocks() {
+    const blocks = [];
+    for (const section of self.allSections) {
+      for (const column of section.columns) {
+        blocks.push(...column.blocks);
+      }
+    }
+    return blocks;
+  }
+}));
+function createTemplate(options = {}) {
+  return {
+    id: options.id || nanoid5(),
+    version: CURRENT_TEMPLATE_VERSION,
+    metadata: {
+      title: options.title || "Untitled Template",
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date()
+    },
+    sections: options.sections || []
+  };
+}
+function createTemplateWithDefaultSection(options = {}) {
+  return {
+    id: options.id || nanoid5(),
+    version: CURRENT_TEMPLATE_VERSION,
+    metadata: {
+      title: options.title || "Untitled Template",
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date()
+    },
+    sections: [createSection()]
+  };
+}
+
+// src/store/mst/EditorUIStore.ts
+import { types as types6 } from "mobx-state-tree";
+var EditorUIStore = types6.model("EditorUI", {
+  // === Selection State ===
+  selectedBlockId: types6.maybe(types6.string),
+  selectedSectionId: types6.maybe(types6.string),
+  selectedColumnId: types6.maybe(types6.string),
+  selectedSubColumnId: types6.maybe(types6.string),
+  /** A wrapper (container around sections), one level out from sections. */
+  selectedWrapperId: types6.maybe(types6.string),
+  // === Panel State ===
+  activeTab: types6.optional(
+    types6.enumeration(["elements", "layout", "layers", "settings", "prebuilt", "saved"]),
+    "elements"
+  ),
+  showLeftPanel: types6.optional(types6.boolean, true),
+  showRightPanel: types6.optional(types6.boolean, true),
+  // === View Mode ===
+  previewDevice: types6.optional(
+    types6.enumeration(["desktop", "mobile"]),
+    "desktop"
+  ),
+  zoomLevel: types6.optional(types6.number, 1)
+}).volatile(() => ({
+  // === Transient State (not persisted) ===
+  hoverBlockId: void 0,
+  hoverSectionId: void 0,
+  hoverColumnId: void 0,
+  hoverSubColumnId: void 0,
+  hoverWrapperId: void 0,
+  /** The wrapper whose delete the editor is asking about (keep its sections, or delete everything). */
+  pendingWrapperDeleteId: void 0,
+  // Drag state
+  isDragging: false,
+  dragData: void 0,
+  dropIntent: void 0,
+  // Resize state
+  isResizing: false,
+  resizeState: void 0,
+  // Inline editing state
+  isInlineEditing: false,
+  inlineEditBlockId: void 0
+})).actions((self) => ({
+  // === Selection Actions ===
+  /**
+   * Select a block
+   */
+  selectBlock(blockId) {
+    self.selectedBlockId = blockId || void 0;
+    self.selectedSectionId = void 0;
+    self.selectedColumnId = void 0;
+    self.selectedSubColumnId = void 0;
+    self.selectedWrapperId = void 0;
+  },
+  /**
+   * Select a section
+   */
+  selectSection(sectionId) {
+    self.selectedSectionId = sectionId || void 0;
+    self.selectedBlockId = void 0;
+    self.selectedColumnId = void 0;
+    self.selectedSubColumnId = void 0;
+    self.selectedWrapperId = void 0;
+  },
+  /**
+   * Select a column
+   */
+  selectColumn(columnId) {
+    self.selectedColumnId = columnId || void 0;
+    self.selectedBlockId = void 0;
+    self.selectedSectionId = void 0;
+    self.selectedSubColumnId = void 0;
+    self.selectedWrapperId = void 0;
+  },
+  /**
+   * Select a sub-column (depth-2 nested column).
+   * Mutually exclusive with the other selection levels.
+   */
+  selectSubColumn(subColumnId) {
+    self.selectedSubColumnId = subColumnId || void 0;
+    self.selectedBlockId = void 0;
+    self.selectedSectionId = void 0;
+    self.selectedColumnId = void 0;
+    self.selectedWrapperId = void 0;
+  },
+  /**
+   * Select a wrapper (the container around sections).
+   * Mutually exclusive with the other selection levels.
+   */
+  selectWrapper(wrapperId) {
+    self.selectedWrapperId = wrapperId || void 0;
+    self.selectedBlockId = void 0;
+    self.selectedSectionId = void 0;
+    self.selectedColumnId = void 0;
+    self.selectedSubColumnId = void 0;
+  },
+  /**
+   * Clear all selection
+   */
+  clearSelection() {
+    self.selectedBlockId = void 0;
+    self.selectedSectionId = void 0;
+    self.selectedColumnId = void 0;
+    self.selectedSubColumnId = void 0;
+    self.selectedWrapperId = void 0;
+  },
+  // === Hover Actions ===
+  /**
+   * Set hover block
+   */
+  setHoverBlock(blockId) {
+    self.hoverBlockId = blockId;
+  },
+  /**
+   * Set hover section
+   */
+  setHoverSection(sectionId) {
+    self.hoverSectionId = sectionId;
+  },
+  /**
+   * Set hover column
+   */
+  setHoverColumn(columnId) {
+    self.hoverColumnId = columnId;
+  },
+  /**
+   * Set hover sub-column (depth-2 nested)
+   */
+  setHoverSubColumn(subColumnId) {
+    self.hoverSubColumnId = subColumnId;
+  },
+  /**
+   * Set hover wrapper
+   */
+  setHoverWrapper(wrapperId) {
+    self.hoverWrapperId = wrapperId;
+  },
+  // === Wrapper delete dialog ===
+  /** Ask whether to keep a wrapper's sections or delete everything (the editor shows its own dialog). */
+  requestWrapperDelete(wrapperId) {
+    self.pendingWrapperDeleteId = wrapperId;
+  },
+  cancelWrapperDelete() {
+    self.pendingWrapperDeleteId = void 0;
+  },
+  /**
+   * Clear all hover states
+   */
+  clearHover() {
+    self.hoverBlockId = void 0;
+    self.hoverSectionId = void 0;
+    self.hoverColumnId = void 0;
+    self.hoverSubColumnId = void 0;
+    self.hoverWrapperId = void 0;
+  },
+  // === Drag Actions ===
+  /**
+   * Start a drag operation for an existing block
+   */
+  startBlockDrag(blockId, sourceColumnId, sourceIndex) {
+    self.isDragging = true;
+    self.dragData = {
+      blockId,
+      sourceColumnId,
+      sourceIndex,
+      isNewBlock: false
+    };
+  },
+  /**
+   * Start a drag operation for a new block from the toolbar
+   */
+  startNewBlockDrag(blockType) {
+    self.isDragging = true;
+    self.dragData = {
+      blockType,
+      isNewBlock: true
+    };
+  },
+  /**
+   * Update the drop intent during drag
+   */
+  setDropIntent(intent) {
+    self.dropIntent = intent;
+  },
+  /**
+   * End the drag operation
+   */
+  endDrag() {
+    self.isDragging = false;
+    self.dragData = void 0;
+    self.dropIntent = void 0;
+  },
+  // === Resize Actions ===
+  /**
+   * Start a resize operation
+   */
+  startResize(targetId, handleType, originalValue) {
+    self.isResizing = true;
+    self.resizeState = {
+      targetId,
+      handleType,
+      originalValue,
+      previewValue: originalValue
+    };
+  },
+  /**
+   * Update resize preview value
+   */
+  updateResizePreview(value) {
+    if (self.resizeState) {
+      self.resizeState.previewValue = value;
+    }
+  },
+  /**
+   * End resize operation (commit or cancel)
+   */
+  endResize() {
+    self.isResizing = false;
+    self.resizeState = void 0;
+  },
+  // === Inline Editing Actions ===
+  /**
+   * Start inline editing for a block
+   */
+  startInlineEdit(blockId) {
+    self.isInlineEditing = true;
+    self.inlineEditBlockId = blockId;
+    self.selectedBlockId = blockId;
+  },
+  /**
+   * End inline editing
+   */
+  endInlineEdit() {
+    self.isInlineEditing = false;
+    self.inlineEditBlockId = void 0;
+  },
+  // === Panel Actions ===
+  /**
+   * Set the active sidebar tab
+   */
+  setActiveTab(tab) {
+    self.activeTab = tab;
+  },
+  /**
+   * Toggle left panel visibility
+   */
+  toggleLeftPanel() {
+    self.showLeftPanel = !self.showLeftPanel;
+  },
+  /**
+   * Toggle right panel visibility
+   */
+  toggleRightPanel() {
+    self.showRightPanel = !self.showRightPanel;
+  },
+  /**
+   * Set left panel visibility
+   */
+  setLeftPanelVisible(visible) {
+    self.showLeftPanel = visible;
+  },
+  /**
+   * Set right panel visibility
+   */
+  setRightPanelVisible(visible) {
+    self.showRightPanel = visible;
+  },
+  // === View Actions ===
+  /**
+   * Set preview device
+   */
+  setPreviewDevice(device) {
+    self.previewDevice = device;
+  },
+  /**
+   * Toggle preview device between desktop and mobile
+   */
+  togglePreviewDevice() {
+    self.previewDevice = self.previewDevice === "desktop" ? "mobile" : "desktop";
+  },
+  /**
+   * Set zoom level
+   */
+  setZoomLevel(zoom) {
+    self.zoomLevel = Math.max(0.25, Math.min(2, zoom));
+  },
+  /**
+   * Zoom in
+   */
+  zoomIn() {
+    self.zoomLevel = Math.min(2, self.zoomLevel + 0.1);
+  },
+  /**
+   * Zoom out
+   */
+  zoomOut() {
+    self.zoomLevel = Math.max(0.25, self.zoomLevel - 0.1);
+  },
+  /**
+   * Reset zoom to 100%
+   */
+  resetZoom() {
+    self.zoomLevel = 1;
+  }
+})).views((self) => ({
+  /**
+   * Get the current selection type
+   */
+  get selectionType() {
+    if (self.selectedBlockId) return "block";
+    if (self.selectedSectionId) return "section";
+    if (self.selectedColumnId) return "column";
+    if (self.selectedSubColumnId) return "subColumn";
+    if (self.selectedWrapperId) return "wrapper";
+    return null;
+  },
+  /**
+   * Check if anything is selected
+   */
+  get hasSelection() {
+    return !!(self.selectedBlockId || self.selectedSectionId || self.selectedColumnId || self.selectedSubColumnId || self.selectedWrapperId);
+  },
+  /**
+   * Check if a specific block is selected
+   */
+  isBlockSelected(blockId) {
+    return self.selectedBlockId === blockId;
+  },
+  /**
+   * Check if a specific section is selected
+   */
+  isSectionSelected(sectionId) {
+    return self.selectedSectionId === sectionId;
+  },
+  /**
+   * Check if a specific column is selected
+   */
+  isColumnSelected(columnId) {
+    return self.selectedColumnId === columnId;
+  },
+  /**
+   * Check if a specific wrapper is selected
+   */
+  isWrapperSelected(wrapperId) {
+    return self.selectedWrapperId === wrapperId;
+  },
+  /**
+   * Check if a specific block is hovered
+   */
+  isBlockHovered(blockId) {
+    return self.hoverBlockId === blockId;
+  },
+  /**
+   * Check if we're dragging an existing block
+   */
+  get isDraggingExistingBlock() {
+    return self.isDragging && !!self.dragData && !self.dragData.isNewBlock;
+  },
+  /**
+   * Check if we're dragging a new block from toolbar
+   */
+  get isDraggingNewBlock() {
+    return self.isDragging && !!self.dragData && !!self.dragData.isNewBlock;
+  },
+  /**
+   * Get the currently dragged block type (for new blocks)
+   */
+  get draggedBlockType() {
+    return self.dragData?.blockType;
+  },
+  /**
+   * Get the currently dragged block ID (for existing blocks)
+   */
+  get draggedBlockId() {
+    return self.dragData?.blockId;
+  },
+  /**
+   * Get preview width based on device
+   */
+  get previewWidth() {
+    return self.previewDevice === "desktop" ? 600 : 375;
+  },
+  /**
+   * Check if in mobile preview mode
+   */
+  get isMobilePreview() {
+    return self.previewDevice === "mobile";
+  },
+  /**
+   * Check if in desktop preview mode
+   */
+  get isDesktopPreview() {
+    return self.previewDevice === "desktop";
+  },
+  /**
+   * Get zoom percentage
+   */
+  get zoomPercentage() {
+    return Math.round(self.zoomLevel * 100);
+  }
+}));
+
+// src/store/mst/RootStore.ts
+import { types as types7, onSnapshot, applySnapshot, getSnapshot as getSnapshot2 } from "mobx-state-tree";
+var RootStore = types7.model("RootStore", {
+  template: TemplateModel,
+  editorUI: EditorUIStore
+}).volatile(() => ({
+  // History state for undo/redo. Typed as `unknown` to keep the inferred
+  // RootStore type small enough for TypeScript's serialization limit;
+  // history snapshots are roundtripped through MST validation anyway.
+  history: [],
+  historyIndex: -1,
+  maxHistory: 50,
+  isUndoRedo: false,
+  /**
+   * The snapshot undo or redo just applied. The snapshot listener runs after
+   * the outermost action (undo itself) has finished, so it must recognise
+   * this one and not record it as a new step: that would cut off the redo
+   * future.
+   */
+  appliedFromHistory: void 0
+})).actions((self) => ({
+  /**
+   * Initialize history with current state
+   */
+  initHistory() {
+    const snapshot = getSnapshot2(self.template);
+    self.history = [snapshot];
+    self.historyIndex = 0;
+  },
+  /**
+   * Record current state to history (called after mutations)
+   */
+  recordHistory() {
+    if (self.isUndoRedo) return;
+    const snapshot = getSnapshot2(self.template);
+    if (self.appliedFromHistory !== void 0) {
+      const applied = self.appliedFromHistory;
+      self.appliedFromHistory = void 0;
+      if (JSON.stringify(applied) === JSON.stringify(snapshot)) return;
+    }
+    if (self.historyIndex < self.history.length - 1) {
+      self.history = self.history.slice(0, self.historyIndex + 1);
+    }
+    self.history.push(snapshot);
+    if (self.history.length > self.maxHistory) {
+      self.history = self.history.slice(self.history.length - self.maxHistory);
+    }
+    self.historyIndex = self.history.length - 1;
+  },
+  /**
+   * Undo to previous state
+   */
+  undo() {
+    if (self.historyIndex <= 0) return false;
+    self.isUndoRedo = true;
+    self.historyIndex--;
+    applySnapshot(self.template, self.history[self.historyIndex]);
+    self.appliedFromHistory = getSnapshot2(self.template);
+    self.isUndoRedo = false;
+    this.validateSelection();
+    return true;
+  },
+  /**
+   * Redo to next state
+   */
+  redo() {
+    if (self.historyIndex >= self.history.length - 1) return false;
+    self.isUndoRedo = true;
+    self.historyIndex++;
+    applySnapshot(self.template, self.history[self.historyIndex]);
+    self.appliedFromHistory = getSnapshot2(self.template);
+    self.isUndoRedo = false;
+    this.validateSelection();
+    return true;
+  },
+  /**
+   * Clear history
+   */
+  clearHistory() {
+    const snapshot = getSnapshot2(self.template);
+    self.history = [snapshot];
+    self.historyIndex = 0;
+  },
+  /**
+   * Validate and clear selection if items no longer exist
+   */
+  validateSelection() {
+    if (self.editorUI.selectedBlockId && !self.template.findBlockById(self.editorUI.selectedBlockId)) {
+      self.editorUI.clearSelection();
+    }
+    if (self.editorUI.selectedSectionId && !self.template.getSectionById(self.editorUI.selectedSectionId)) {
+      self.editorUI.clearSelection();
+    }
+    if (self.editorUI.selectedColumnId && !self.template.findColumnById(self.editorUI.selectedColumnId)) {
+      self.editorUI.clearSelection();
+    }
+    if (self.editorUI.selectedWrapperId && !self.template.getWrapperById(self.editorUI.selectedWrapperId)) {
+      self.editorUI.clearSelection();
+    }
+    if (self.editorUI.selectedSubColumnId && !this.findSubColumn(self.editorUI.selectedSubColumnId)) {
+      self.editorUI.clearSelection();
+    }
+    if (self.editorUI.pendingWrapperDeleteId && !self.template.getWrapperById(self.editorUI.pendingWrapperDeleteId)) {
+      self.editorUI.cancelWrapperDelete();
+    }
+  },
+  findSubColumn(id) {
+    for (const section of self.template.allSections) {
+      for (const column of section.columns) {
+        const sc = (column.subColumns ?? []).find((s) => s.id === id);
+        if (sc) return sc;
+      }
+    }
+    return void 0;
+  },
+  /**
+   * Load a new template
+   */
+  loadTemplate(templateData) {
+    applySnapshot(self.template, templateData);
+    self.editorUI.clearSelection();
+    this.clearHistory();
+  },
+  /**
+   * Reset to a new empty template
+   */
+  resetTemplate(title) {
+    const newTemplate = createTemplateWithDefaultSection({ title });
+    applySnapshot(self.template, newTemplate);
+    self.editorUI.clearSelection();
+    this.clearHistory();
+  }
+})).views((self) => ({
+  /**
+   * Check if undo is available
+   */
+  get canUndo() {
+    return self.historyIndex > 0;
+  },
+  /**
+   * Check if redo is available
+   */
+  get canRedo() {
+    return self.historyIndex < self.history.length - 1;
+  },
+  /**
+   * Get the currently selected block. Explicit return types here
+   * (and on the other selectors below) keep the inferred RootStore
+   * type small enough for TypeScript's serialization limit.
+   */
+  get selectedBlock() {
+    if (!self.editorUI.selectedBlockId) return void 0;
+    return self.template.findBlockById(self.editorUI.selectedBlockId);
+  },
+  /**
+   * Get the currently selected section
+   */
+  get selectedSection() {
+    if (!self.editorUI.selectedSectionId) return void 0;
+    return self.template.getSectionById(self.editorUI.selectedSectionId);
+  },
+  /**
+   * Get the currently selected column
+   */
+  get selectedColumn() {
+    if (!self.editorUI.selectedColumnId) return void 0;
+    return self.template.findColumnById(self.editorUI.selectedColumnId);
+  },
+  /**
+   * Get the currently selected sub-column (depth-2 nested).
+   */
+  get selectedSubColumn() {
+    const id = self.editorUI.selectedSubColumnId;
+    if (!id) return void 0;
+    for (const section of self.template.allSections) {
+      for (const column of section.columns) {
+        const sc = (column.subColumns ?? []).find((s) => s.id === id);
+        if (sc) return sc;
+      }
+    }
+    return void 0;
+  },
+  /**
+   * Get the currently selected wrapper
+   */
+  get selectedWrapper() {
+    if (!self.editorUI.selectedWrapperId) return void 0;
+    return self.template.getWrapperById(self.editorUI.selectedWrapperId);
+  },
+  /**
+   * Get history size info
+   */
+  get historyInfo() {
+    return {
+      current: self.historyIndex + 1,
+      total: self.history.length,
+      canUndo: self.historyIndex > 0,
+      canRedo: self.historyIndex < self.history.length - 1
+    };
+  }
+}));
+function createRootStore(options = {}) {
+  const { template: initialTemplate, onChange, onChangeDebounce = 300 } = options;
+  const store = RootStore.create({
+    template: initialTemplate || createTemplateWithDefaultSection(),
+    editorUI: {}
+  });
+  store.initHistory();
+  if (onChange) {
+    let timeoutId;
+    onSnapshot(store.template, (snapshot) => {
+      store.recordHistory();
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        onChange(snapshot);
+      }, onChangeDebounce);
+    });
+  } else {
+    onSnapshot(store.template, () => {
+      store.recordHistory();
+    });
+  }
+  return store;
+}
+function createEmptyStore() {
+  return createRootStore({
+    template: createTemplate()
+  });
+}
+export {
+  AccordionBlockSchema,
+  AccordionItemModel,
+  BackgroundGradientSchema,
+  BlockModel,
+  BlockRegistryImpl,
+  BlockSchema,
+  BlockType,
+  ButtonBlockSchema,
+  CONTAINER_BLOCK_TYPES,
+  CURRENT_TEMPLATE_VERSION,
+  CarouselBlockSchema,
+  CarouselImageModel,
+  ColumnModel,
+  ColumnSchema,
+  CustomFontSchema,
+  DividerBlockSchema,
+  EditorUIStore,
+  EmailTemplateSchema,
+  EmailTemplateSchemaV1_0,
+  EmailTemplateSchemaV1_1,
+  ExtraAttributesSchema,
+  FontDefinitionModel,
+  FooterBlockSchema,
+  GradientStopSchema,
+  HeaderBlockSchema,
+  HeroBlockSchema,
+  HistoryManager,
+  ImageBlockSchema,
+  LEAF_BLOCK_TYPES,
+  MJML_WRAPPER_DEFAULT_PADDING,
+  MjmlHeadSchema,
+  NavbarBlockSchema,
+  NavbarLinkModel,
+  RawBlockSchema,
+  RootStore,
+  SUPPORTED_TEMPLATE_VERSIONS,
+  SectionModel,
+  SectionSchema,
+  SectionSchemaV1_0,
+  SelectionManager,
+  SocialBlockSchema,
+  SocialLinkModel,
+  SpacerBlockSchema,
+  SpacingModel,
+  SpacingSchema,
+  SubColumnModel,
+  TableBlockSchema,
+  TemplateMetadataModel,
+  TemplateMetadataSchema,
+  TemplateMigrationError,
+  TemplateModel,
+  TextBlockSchema,
+  ThemeColorModel,
+  TopLevelItemModel,
+  TopLevelItemSchema,
+  WrapperModel,
+  WrapperSchema,
+  allSections,
+  buildGradientCSS,
+  cloneSectionSnapshot,
+  createBlockRegistry,
+  createColumn,
+  createEmptyStore,
+  createHistoryManager,
+  createPrebuiltTemplateRegistry,
+  createRootStore,
+  createSection,
+  createSelectionManager,
+  createSubColumn,
+  createTemplate,
+  createTemplateWithDefaultSection,
+  createWrapper,
+  isLeafBlockType,
+  isTemplateMigrationError,
+  isWrapper,
+  isWrapperInstance,
+  migrateTemplate,
+  migrateV1_0ToV1_1,
+  validateTemplate,
+  withTemplateId
+};