@marlinjai/email-editor-core 0.2.0

package/dist/index.js

@@ -0,0 +1,3299 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AccordionBlockSchema: () => AccordionBlockSchema,
+  AccordionItemModel: () => AccordionItemModel,
+  BackgroundGradientSchema: () => BackgroundGradientSchema,
+  BlockModel: () => BlockModel,
+  BlockRegistryImpl: () => BlockRegistryImpl,
+  BlockSchema: () => BlockSchema,
+  BlockType: () => BlockType,
+  ButtonBlockSchema: () => ButtonBlockSchema,
+  CONTAINER_BLOCK_TYPES: () => CONTAINER_BLOCK_TYPES,
+  CURRENT_TEMPLATE_VERSION: () => CURRENT_TEMPLATE_VERSION,
+  CarouselBlockSchema: () => CarouselBlockSchema,
+  CarouselImageModel: () => CarouselImageModel,
+  ColumnModel: () => ColumnModel,
+  ColumnSchema: () => ColumnSchema,
+  CustomFontSchema: () => CustomFontSchema,
+  DividerBlockSchema: () => DividerBlockSchema,
+  EditorUIStore: () => EditorUIStore,
+  EmailTemplateSchema: () => EmailTemplateSchema,
+  EmailTemplateSchemaV1_0: () => EmailTemplateSchemaV1_0,
+  EmailTemplateSchemaV1_1: () => EmailTemplateSchemaV1_1,
+  ExtraAttributesSchema: () => ExtraAttributesSchema,
+  FontDefinitionModel: () => FontDefinitionModel,
+  FooterBlockSchema: () => FooterBlockSchema,
+  GradientStopSchema: () => GradientStopSchema,
+  HeaderBlockSchema: () => HeaderBlockSchema,
+  HeroBlockSchema: () => HeroBlockSchema,
+  HistoryManager: () => HistoryManager,
+  ImageBlockSchema: () => ImageBlockSchema,
+  LEAF_BLOCK_TYPES: () => LEAF_BLOCK_TYPES,
+  MJML_WRAPPER_DEFAULT_PADDING: () => MJML_WRAPPER_DEFAULT_PADDING,
+  MjmlHeadSchema: () => MjmlHeadSchema,
+  NavbarBlockSchema: () => NavbarBlockSchema,
+  NavbarLinkModel: () => NavbarLinkModel,
+  RawBlockSchema: () => RawBlockSchema,
+  RootStore: () => RootStore,
+  SUPPORTED_TEMPLATE_VERSIONS: () => SUPPORTED_TEMPLATE_VERSIONS,
+  SectionModel: () => SectionModel,
+  SectionSchema: () => SectionSchema,
+  SectionSchemaV1_0: () => SectionSchemaV1_0,
+  SelectionManager: () => SelectionManager,
+  SocialBlockSchema: () => SocialBlockSchema,
+  SocialLinkModel: () => SocialLinkModel,
+  SpacerBlockSchema: () => SpacerBlockSchema,
+  SpacingModel: () => SpacingModel,
+  SpacingSchema: () => SpacingSchema,
+  SubColumnModel: () => SubColumnModel,
+  TableBlockSchema: () => TableBlockSchema,
+  TemplateMetadataModel: () => TemplateMetadataModel,
+  TemplateMetadataSchema: () => TemplateMetadataSchema,
+  TemplateMigrationError: () => TemplateMigrationError,
+  TemplateModel: () => TemplateModel,
+  TextBlockSchema: () => TextBlockSchema,
+  ThemeColorModel: () => ThemeColorModel,
+  TopLevelItemModel: () => TopLevelItemModel,
+  TopLevelItemSchema: () => TopLevelItemSchema,
+  WrapperModel: () => WrapperModel,
+  WrapperSchema: () => WrapperSchema,
+  allSections: () => allSections,
+  buildGradientCSS: () => buildGradientCSS,
+  cloneSectionSnapshot: () => cloneSectionSnapshot,
+  createBlockRegistry: () => createBlockRegistry,
+  createColumn: () => createColumn,
+  createEmptyStore: () => createEmptyStore,
+  createHistoryManager: () => createHistoryManager,
+  createPrebuiltTemplateRegistry: () => createPrebuiltTemplateRegistry,
+  createRootStore: () => createRootStore,
+  createSection: () => createSection,
+  createSelectionManager: () => createSelectionManager,
+  createSubColumn: () => createSubColumn,
+  createTemplate: () => createTemplate,
+  createTemplateWithDefaultSection: () => createTemplateWithDefaultSection,
+  createWrapper: () => createWrapper,
+  isLeafBlockType: () => isLeafBlockType,
+  isTemplateMigrationError: () => isTemplateMigrationError,
+  isWrapper: () => isWrapper,
+  isWrapperInstance: () => isWrapperInstance,
+  migrateTemplate: () => migrateTemplate,
+  migrateV1_0ToV1_1: () => migrateV1_0ToV1_1,
+  validateTemplate: () => validateTemplate,
+  withTemplateId: () => withTemplateId
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/schema/gradient.ts
+function buildGradientCSS(gradient) {
+  if (gradient.stops.length === 0) return void 0;
+  const stopList = gradient.stops.map((s) => `${s.color} ${s.position}%`).join(", ");
+  if (gradient.type === "radial") {
+    return `radial-gradient(circle, ${stopList})`;
+  }
+  return `linear-gradient(${gradient.angle}deg, ${stopList})`;
+}
+
+// src/schema/types.ts
+function isWrapper(item) {
+  return item.type === "wrapper";
+}
+function allSections(items) {
+  return items.flatMap((item) => isWrapper(item) ? item.sections : [item]);
+}
+
+// src/schema/validation.ts
+var import_zod = require("zod");
+var SpacingSchema = import_zod.z.object({
+  top: import_zod.z.string().optional(),
+  right: import_zod.z.string().optional(),
+  bottom: import_zod.z.string().optional(),
+  left: import_zod.z.string().optional()
+});
+var GradientStopSchema = import_zod.z.object({
+  color: import_zod.z.string().min(1),
+  position: import_zod.z.number().min(0).max(100)
+});
+var BackgroundGradientSchema = import_zod.z.object({
+  type: import_zod.z.enum(["linear", "radial"]),
+  angle: import_zod.z.number().min(0).max(360),
+  stops: import_zod.z.array(GradientStopSchema).min(1)
+});
+var ExtraAttributesSchema = import_zod.z.record(import_zod.z.string().regex(/^[a-z][a-z0-9-]*$/), import_zod.z.string());
+var MjmlHeadSchema = import_zod.z.object({
+  attributes: import_zod.z.string().optional(),
+  bodyAttributes: ExtraAttributesSchema.optional(),
+  headRaw: import_zod.z.string().optional()
+});
+var CustomFontSchema = import_zod.z.object({
+  name: import_zod.z.string(),
+  href: import_zod.z.string()
+});
+var TemplateMetadataSchema = import_zod.z.object({
+  name: import_zod.z.string().optional(),
+  subject: import_zod.z.string().optional(),
+  previewText: import_zod.z.string().optional(),
+  title: import_zod.z.string().optional(),
+  // Epoch milliseconds (what the editor's store emits) or an ISO 8601 string.
+  createdAt: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).optional(),
+  updatedAt: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).optional(),
+  // Head component settings
+  fonts: import_zod.z.array(CustomFontSchema).optional(),
+  breakpoint: import_zod.z.string().optional(),
+  customCSS: import_zod.z.string().optional(),
+  inlineCSS: import_zod.z.string().optional(),
+  mjmlHead: MjmlHeadSchema.optional()
+});
+var TextBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("text"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  content: import_zod.z.string(),
+  align: import_zod.z.enum(["left", "center", "right", "justify"]).optional(),
+  color: import_zod.z.string().optional(),
+  fontSize: import_zod.z.string().optional(),
+  fontFamily: import_zod.z.string().optional(),
+  padding: SpacingSchema.optional(),
+  lineHeight: import_zod.z.string().optional()
+});
+var ImageBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("image"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  src: import_zod.z.string().min(1),
+  // Allow any non-empty string, not just URLs
+  alt: import_zod.z.string().optional(),
+  width: import_zod.z.string().optional(),
+  height: import_zod.z.string().optional(),
+  align: import_zod.z.enum(["left", "center", "right"]).optional(),
+  href: import_zod.z.string().optional(),
+  // Allow any string for link
+  padding: SpacingSchema.optional(),
+  borderRadius: import_zod.z.string().optional()
+  // Rounded corners
+});
+var ButtonBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("button"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  label: import_zod.z.string().min(1),
+  href: import_zod.z.string().min(1),
+  // Allow any non-empty string
+  align: import_zod.z.enum(["left", "center", "right"]).optional(),
+  backgroundColor: import_zod.z.string().optional(),
+  color: import_zod.z.string().optional(),
+  borderRadius: import_zod.z.string().optional(),
+  border: import_zod.z.string().optional(),
+  // CSS border shorthand
+  padding: SpacingSchema.optional(),
+  innerPadding: import_zod.z.string().optional()
+});
+var DividerBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("divider"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  borderColor: import_zod.z.string().optional(),
+  borderWidth: import_zod.z.string().optional(),
+  borderStyle: import_zod.z.enum(["solid", "dashed", "dotted"]).optional(),
+  width: import_zod.z.string().optional(),
+  // Width of the divider line
+  padding: SpacingSchema.optional()
+});
+var SpacerBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("spacer"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  height: import_zod.z.string()
+});
+var HeaderBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("header"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  locked: import_zod.z.literal(true)
+});
+var FooterBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("footer"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  locked: import_zod.z.literal(true)
+});
+var SocialBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("social"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  mode: import_zod.z.enum(["horizontal", "vertical"]).optional(),
+  align: import_zod.z.enum(["left", "center", "right"]).optional(),
+  iconSize: import_zod.z.string().optional(),
+  iconPadding: import_zod.z.string().optional(),
+  borderRadius: import_zod.z.string().optional(),
+  // For round icons
+  links: import_zod.z.array(
+    import_zod.z.object({
+      platform: import_zod.z.enum(["facebook", "twitter", "instagram", "linkedin", "youtube", "pinterest", "github"]),
+      url: import_zod.z.string(),
+      color: import_zod.z.string().optional()
+      // Per-icon color override (uses platform default if not set)
+    })
+  )
+});
+var HeroBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("hero"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  backgroundImage: import_zod.z.string().min(1),
+  backgroundHeight: import_zod.z.string().optional(),
+  backgroundWidth: import_zod.z.string().optional(),
+  backgroundColor: import_zod.z.string().optional(),
+  verticalAlign: import_zod.z.enum(["top", "middle", "bottom"]).optional(),
+  mode: import_zod.z.enum(["fluid-height", "fixed-height"]).optional()
+});
+var AccordionBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("accordion"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  items: import_zod.z.array(
+    import_zod.z.object({
+      title: import_zod.z.string(),
+      content: import_zod.z.string()
+    })
+  ),
+  iconPosition: import_zod.z.enum(["left", "right"]).optional(),
+  borderColor: import_zod.z.string().optional(),
+  fontFamily: import_zod.z.string().optional()
+});
+var RawBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("raw"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  html: import_zod.z.string()
+});
+var NavbarBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("navbar"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  links: import_zod.z.array(
+    import_zod.z.object({
+      label: import_zod.z.string(),
+      href: import_zod.z.string(),
+      color: import_zod.z.string().optional()
+    })
+  ),
+  hamburger: import_zod.z.boolean().optional(),
+  baseUrl: import_zod.z.string().optional(),
+  align: import_zod.z.enum(["left", "center", "right"]).optional(),
+  icoColor: import_zod.z.string().optional(),
+  padding: SpacingSchema.optional()
+});
+var CarouselBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("carousel"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  images: import_zod.z.array(
+    import_zod.z.object({
+      src: import_zod.z.string(),
+      alt: import_zod.z.string().optional(),
+      href: import_zod.z.string().optional(),
+      thumbnailSrc: import_zod.z.string().optional()
+    })
+  ),
+  thumbnails: import_zod.z.enum(["visible", "hidden"]).optional(),
+  borderRadius: import_zod.z.string().optional(),
+  iconWidth: import_zod.z.string().optional(),
+  tbBorderRadius: import_zod.z.string().optional(),
+  padding: SpacingSchema.optional()
+});
+var TableBlockSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("table"),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  headers: import_zod.z.array(import_zod.z.string()),
+  rows: import_zod.z.array(import_zod.z.array(import_zod.z.string())),
+  align: import_zod.z.enum(["left", "center", "right"]).optional(),
+  color: import_zod.z.string().optional(),
+  fontFamily: import_zod.z.string().optional(),
+  fontSize: import_zod.z.string().optional(),
+  cellpadding: import_zod.z.string().optional(),
+  cellspacing: import_zod.z.string().optional(),
+  border: import_zod.z.string().optional(),
+  padding: SpacingSchema.optional()
+});
+var BlockSchema = import_zod.z.discriminatedUnion("type", [
+  TextBlockSchema,
+  ImageBlockSchema,
+  ButtonBlockSchema,
+  DividerBlockSchema,
+  SpacerBlockSchema,
+  HeaderBlockSchema,
+  FooterBlockSchema,
+  SocialBlockSchema,
+  HeroBlockSchema,
+  AccordionBlockSchema,
+  RawBlockSchema,
+  NavbarBlockSchema,
+  CarouselBlockSchema,
+  TableBlockSchema
+]);
+var ColumnSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  width: import_zod.z.number().min(0).max(100).optional(),
+  backgroundColor: import_zod.z.string().optional(),
+  backgroundGradient: BackgroundGradientSchema.optional(),
+  padding: SpacingSchema.optional(),
+  verticalAlign: import_zod.z.enum(["top", "middle", "bottom"]).optional(),
+  // Vertical content alignment
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  blocks: import_zod.z.array(BlockSchema)
+});
+var sectionFields = {
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("section"),
+  backgroundColor: import_zod.z.string().optional(),
+  backgroundImage: import_zod.z.string().optional(),
+  backgroundPosition: import_zod.z.string().optional(),
+  backgroundRepeat: import_zod.z.enum(["repeat", "no-repeat"]).optional(),
+  backgroundSize: import_zod.z.string().optional(),
+  backgroundGradient: BackgroundGradientSchema.optional(),
+  padding: SpacingSchema.optional(),
+  noStack: import_zod.z.boolean().optional(),
+  fullWidth: import_zod.z.boolean().optional(),
+  hidden: import_zod.z.boolean().optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  bodyRaw: import_zod.z.boolean().optional(),
+  columns: import_zod.z.array(ColumnSchema).min(1)
+};
+var SectionSchema = import_zod.z.object({
+  ...sectionFields,
+  isWrapper: import_zod.z.undefined({ invalid_type_error: "isWrapper is a schema 1.0 field; a 1.1 document holds a wrapper instead" }).optional()
+});
+var SectionSchemaV1_0 = import_zod.z.object({
+  ...sectionFields,
+  isWrapper: import_zod.z.boolean().optional()
+});
+var WrapperSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  type: import_zod.z.literal("wrapper"),
+  hidden: import_zod.z.boolean().optional(),
+  backgroundColor: import_zod.z.string().optional(),
+  backgroundImage: import_zod.z.string().optional(),
+  backgroundGradient: BackgroundGradientSchema.optional(),
+  backgroundPosition: import_zod.z.string().optional(),
+  backgroundRepeat: import_zod.z.enum(["repeat", "no-repeat"]).optional(),
+  backgroundSize: import_zod.z.string().optional(),
+  border: import_zod.z.string().optional(),
+  borderTop: import_zod.z.string().optional(),
+  borderRight: import_zod.z.string().optional(),
+  borderBottom: import_zod.z.string().optional(),
+  borderLeft: import_zod.z.string().optional(),
+  borderRadius: import_zod.z.string().optional(),
+  padding: SpacingSchema.optional(),
+  fullWidth: import_zod.z.boolean().optional(),
+  cssClass: import_zod.z.string().optional(),
+  gap: import_zod.z.string().regex(/^[0-9]+(\.[0-9]+)?px$/, "gap is a length in px, e.g. 16px").optional(),
+  textAlign: import_zod.z.enum(["left", "center", "right"]).optional(),
+  extraAttributes: ExtraAttributesSchema.optional(),
+  sections: import_zod.z.array(SectionSchema)
+});
+var TopLevelItemSchema = import_zod.z.discriminatedUnion("type", [SectionSchema, WrapperSchema]);
+var EmailTemplateSchemaV1_0 = import_zod.z.object({
+  id: import_zod.z.string().optional(),
+  version: import_zod.z.literal("1.0"),
+  metadata: TemplateMetadataSchema,
+  sections: import_zod.z.array(SectionSchemaV1_0)
+});
+var EmailTemplateSchemaV1_1 = import_zod.z.object({
+  id: import_zod.z.string().optional(),
+  version: import_zod.z.literal("1.1"),
+  metadata: TemplateMetadataSchema,
+  sections: import_zod.z.array(TopLevelItemSchema)
+});
+var EmailTemplateSchema = import_zod.z.discriminatedUnion("version", [EmailTemplateSchemaV1_0, EmailTemplateSchemaV1_1]);
+function validateTemplate(template) {
+  return EmailTemplateSchema.safeParse(template);
+}
+
+// src/schema/migrate.ts
+var import_nanoid = require("nanoid");
+var CURRENT_TEMPLATE_VERSION = "1.1";
+var SUPPORTED_TEMPLATE_VERSIONS = ["1.0", CURRENT_TEMPLATE_VERSION];
+var TemplateMigrationError = class extends Error {
+  constructor(code, message, options = {}) {
+    super(message);
+    this.name = "TemplateMigrationError";
+    this.code = code;
+    this.version = options.version;
+    this.issues = options.issues ?? [];
+  }
+};
+function isTemplateMigrationError(error) {
+  return error instanceof TemplateMigrationError;
+}
+function parseVersion(version) {
+  const match = /^(\d+)\.(\d+)$/.exec(version);
+  if (!match) return null;
+  return [Number(match[1]), Number(match[2])];
+}
+function compareVersions(a, b) {
+  return a[0] !== b[0] ? a[0] - b[0] : a[1] - b[1];
+}
+function migrateTemplate(doc) {
+  if (typeof doc !== "object" || doc === null || Array.isArray(doc)) {
+    throw new TemplateMigrationError(
+      "INVALID_INPUT",
+      `Expected a template document object, received ${doc === null ? "null" : Array.isArray(doc) ? "an array" : typeof doc}.`
+    );
+  }
+  const version = doc.version;
+  if (typeof version !== "string" || version.length === 0) {
+    throw new TemplateMigrationError(
+      "MISSING_VERSION",
+      'The template document has no "version" field, so its schema cannot be determined.'
+    );
+  }
+  const parsed = parseVersion(version);
+  if (!parsed) {
+    throw new TemplateMigrationError(
+      "UNSUPPORTED_VERSION",
+      `Template schema version "${version}" is not of the form "major.minor".`,
+      { version }
+    );
+  }
+  const current = parseVersion(CURRENT_TEMPLATE_VERSION);
+  if (compareVersions(parsed, current) > 0) {
+    throw new TemplateMigrationError(
+      "NEWER_VERSION",
+      `Template schema version "${version}" is newer than this editor supports (${CURRENT_TEMPLATE_VERSION}). Upgrade the @marlinjai/email-editor packages to open it.`,
+      { version }
+    );
+  }
+  if (!SUPPORTED_TEMPLATE_VERSIONS.includes(version)) {
+    throw new TemplateMigrationError(
+      "UNSUPPORTED_VERSION",
+      `Template schema version "${version}" is not supported and has no migration to ${CURRENT_TEMPLATE_VERSION}.`,
+      { version }
+    );
+  }
+  let next = doc;
+  if (version === "1.0") {
+    assertValid(EmailTemplateSchemaV1_0, next, version);
+    next = migrateV1_0ToV1_1(next);
+  }
+  assertValid(EmailTemplateSchemaV1_1, next, version);
+  return next;
+}
+function assertValid(schema, doc, version) {
+  const result = schema.safeParse(doc);
+  if (result.success) return;
+  const issues = result.error.issues.map((issue) => ({ path: issue.path, message: issue.message }));
+  const first = issues[0];
+  throw new TemplateMigrationError(
+    "INVALID_DOCUMENT",
+    `Template document does not match schema version ${version}: ${first ? `${first.path.join(".") || "(root)"}: ${first.message}` : "unknown validation error"}${issues.length > 1 ? ` (and ${issues.length - 1} more)` : ""}.`,
+    { version, issues }
+  );
+}
+function migrateV1_0ToV1_1(doc) {
+  if (!doc.sections.some((s) => s.isWrapper === true && !s.bodyRaw)) {
+    return { ...doc, version: "1.1", sections: doc.sections.map(stripIsWrapper) };
+  }
+  const ids = /* @__PURE__ */ new Set();
+  for (const s of doc.sections) {
+    ids.add(s.id);
+    for (const c of s.columns ?? []) {
+      ids.add(c.id);
+      for (const b of c.blocks ?? []) ids.add(b.id);
+    }
+  }
+  const freshId = (base) => {
+    let candidate = `${base}-inner`;
+    for (let n = 2; ids.has(candidate); n++) candidate = `${base}-inner-${n}`;
+    ids.add(candidate);
+    return candidate;
+  };
+  const sections = doc.sections.map((s) => {
+    if (s.isWrapper !== true || s.bodyRaw) return stripIsWrapper(s);
+    const { isWrapper: _flag, noStack: _noStack, ...rest } = s;
+    const wrapper = { id: s.id, type: "wrapper", sections: [{ id: freshId(s.id), type: "section", columns: s.columns }] };
+    if (rest.hidden !== void 0) wrapper.hidden = rest.hidden;
+    if (rest.backgroundColor !== void 0) wrapper.backgroundColor = rest.backgroundColor;
+    if (rest.backgroundImage !== void 0) wrapper.backgroundImage = rest.backgroundImage;
+    if (rest.backgroundGradient !== void 0) wrapper.backgroundGradient = rest.backgroundGradient;
+    if (rest.backgroundPosition !== void 0) wrapper.backgroundPosition = rest.backgroundPosition;
+    if (rest.backgroundRepeat !== void 0) wrapper.backgroundRepeat = rest.backgroundRepeat;
+    if (rest.backgroundSize !== void 0) wrapper.backgroundSize = rest.backgroundSize;
+    if (rest.fullWidth !== void 0) wrapper.fullWidth = rest.fullWidth;
+    if (rest.padding !== void 0) wrapper.padding = rest.padding;
+    if (rest.extraAttributes !== void 0) wrapper.extraAttributes = rest.extraAttributes;
+    return wrapper;
+  });
+  return { ...doc, version: "1.1", sections };
+}
+function stripIsWrapper(s) {
+  if (!("isWrapper" in s)) return s;
+  const { isWrapper: _flag, ...rest } = s;
+  return rest;
+}
+function withTemplateId(doc) {
+  if (typeof doc.id === "string" && doc.id.length > 0) return doc;
+  return { ...doc, id: (0, import_nanoid.nanoid)() };
+}
+
+// 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/store/mst/models/BlockModel.ts
+var import_mobx_state_tree = require("mobx-state-tree");
+
+// src/store/mst/models/spacingSnapshot.ts
+var SIDES = [
+  ["top", "paddingTop"],
+  ["right", "paddingRight"],
+  ["bottom", "paddingBottom"],
+  ["left", "paddingLeft"]
+];
+function paddingIn(snapshot) {
+  if (!snapshot || typeof snapshot !== "object") return snapshot;
+  const { padding, ...rest } = snapshot;
+  if (padding === void 0) return snapshot;
+  const flat = rest;
+  if (padding && typeof padding === "object") {
+    for (const [side, field] of SIDES) {
+      const value = padding[side];
+      if (flat[field] === void 0 && typeof value === "string" && value !== "") flat[field] = value;
+    }
+  }
+  return flat;
+}
+function paddingOut(snapshot) {
+  if (!snapshot || typeof snapshot !== "object") return snapshot;
+  const { paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = snapshot;
+  const values = {
+    top: paddingTop,
+    right: paddingRight,
+    bottom: paddingBottom,
+    left: paddingLeft
+  };
+  const padding = {};
+  for (const [side] of SIDES) {
+    const value = values[side];
+    if (typeof value === "string" && value !== "") padding[side] = value;
+  }
+  return Object.keys(padding).length > 0 ? { ...rest, padding } : rest;
+}
+
+// src/store/mst/models/filledDefaults.ts
+var same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+function fillDefaults(snapshot, defaults) {
+  if (!snapshot || typeof snapshot !== "object") return snapshot;
+  const s = { ...snapshot };
+  const filled = { ...s.filled ?? {} };
+  for (const [key, make] of Object.entries(defaults)) {
+    if (s[key] !== void 0) continue;
+    const value = make();
+    s[key] = value;
+    filled[key] = value;
+  }
+  if (Object.keys(filled).length > 0) s.filled = filled;
+  return s;
+}
+function dropFilled(snapshot) {
+  if (!snapshot || typeof snapshot !== "object") return snapshot;
+  const { filled, ...rest } = snapshot;
+  if (filled) {
+    for (const [key, value] of Object.entries(filled)) {
+      if (same(rest[key], value)) delete rest[key];
+    }
+  }
+  for (const key of Object.keys(rest)) if (rest[key] === void 0) delete rest[key];
+  return rest;
+}
+var empty = () => [];
+var no = () => false;
+var BLOCK_DEFAULTS = {
+  hidden: no,
+  content: () => "",
+  links: empty,
+  items: empty,
+  navLinks: empty,
+  hamburger: no,
+  images: empty,
+  headers: empty,
+  rows: empty,
+  locked: no
+};
+var COLUMN_DEFAULTS = {
+  width: () => 100,
+  hidden: no,
+  subColumns: empty
+};
+var SECTION_DEFAULTS = {
+  type: () => "section",
+  fullWidth: no,
+  noStack: no,
+  hidden: no
+};
+var WRAPPER_DEFAULTS = {
+  hidden: no,
+  fullWidth: no
+};
+function fillColumnWidths(section) {
+  if (!section || typeof section !== "object") return section;
+  const s = section;
+  if (!Array.isArray(s.columns) || s.columns.length === 0) return section;
+  if (s.columns.every((c) => c?.width !== void 0)) return section;
+  const share = 100 / s.columns.length;
+  return {
+    ...s,
+    columns: s.columns.map((c) => {
+      const col = c;
+      if (!col || typeof col !== "object" || col.width !== void 0) return c;
+      return { ...col, width: share, filled: { ...col.filled ?? {}, width: share } };
+    })
+  };
+}
+
+// src/store/mst/models/BlockModel.ts
+var BlockType = /* @__PURE__ */ ((BlockType4) => {
+  BlockType4["TEXT"] = "text";
+  BlockType4["IMAGE"] = "image";
+  BlockType4["BUTTON"] = "button";
+  BlockType4["DIVIDER"] = "divider";
+  BlockType4["SPACER"] = "spacer";
+  BlockType4["SOCIAL"] = "social";
+  BlockType4["HERO"] = "hero";
+  BlockType4["ACCORDION"] = "accordion";
+  BlockType4["RAW"] = "raw";
+  BlockType4["NAVBAR"] = "navbar";
+  BlockType4["CAROUSEL"] = "carousel";
+  BlockType4["TABLE"] = "table";
+  BlockType4["HEADER"] = "header";
+  BlockType4["FOOTER"] = "footer";
+  return BlockType4;
+})(BlockType || {});
+var SocialLinkModel = import_mobx_state_tree.types.model("SocialLink", {
+  platform: import_mobx_state_tree.types.string,
+  url: import_mobx_state_tree.types.string,
+  color: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string)
+});
+var NavbarLinkModel = import_mobx_state_tree.types.model("NavbarLink", {
+  href: import_mobx_state_tree.types.string,
+  label: import_mobx_state_tree.types.string,
+  color: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string)
+});
+var CarouselImageModel = import_mobx_state_tree.types.model("CarouselImage", {
+  src: import_mobx_state_tree.types.string,
+  alt: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  href: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  thumbnailSrc: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string)
+});
+var AccordionItemModel = import_mobx_state_tree.types.model("AccordionItem", {
+  title: import_mobx_state_tree.types.string,
+  content: import_mobx_state_tree.types.string
+});
+var SpacingModel = import_mobx_state_tree.types.model("Spacing", {
+  top: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  right: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  bottom: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  left: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string)
+});
+var BlockModelBase = import_mobx_state_tree.types.model("Block", {
+  id: import_mobx_state_tree.types.identifier,
+  type: import_mobx_state_tree.types.enumeration("BlockType", Object.values(BlockType)),
+  hidden: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.boolean, false),
+  // === Common Text Properties ===
+  content: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.string, ""),
+  color: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  backgroundColor: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  fontSize: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  fontFamily: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  align: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.enumeration(["left", "center", "right", "justify"])),
+  lineHeight: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Spacing ===
+  paddingTop: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  paddingRight: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  paddingBottom: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  paddingLeft: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Image Properties ===
+  src: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  alt: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  width: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  height: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Button Properties ===
+  href: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  label: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  borderRadius: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  border: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  innerPadding: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Divider Properties ===
+  borderColor: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  borderWidth: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  borderStyle: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.enumeration(["solid", "dashed", "dotted"])),
+  // === Spacer Properties ===
+  // (uses height from image properties)
+  // === Social Properties ===
+  links: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.array(SocialLinkModel), []),
+  iconSize: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  iconPadding: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  mode: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.enumeration(["horizontal", "vertical", "fixed-height", "fluid-height"])),
+  // === Hero Properties ===
+  backgroundImage: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  backgroundHeight: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  backgroundWidth: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  verticalAlign: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.enumeration(["top", "middle", "bottom"])),
+  // === Accordion Properties ===
+  items: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.array(AccordionItemModel), []),
+  iconPosition: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.enumeration(["left", "right"])),
+  // === Raw Properties ===
+  html: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Navbar Properties ===
+  navLinks: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.array(NavbarLinkModel), []),
+  hamburger: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.boolean, false),
+  baseUrl: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  icoColor: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Carousel Properties ===
+  images: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.array(CarouselImageModel), []),
+  thumbnails: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.enumeration(["visible", "hidden"])),
+  iconWidth: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  tbBorderRadius: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Table Properties ===
+  headers: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.array(import_mobx_state_tree.types.string), []),
+  rows: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.array(import_mobx_state_tree.types.array(import_mobx_state_tree.types.string)), []),
+  cellpadding: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  cellspacing: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.string),
+  // === Locked Blocks (Header/Footer) ===
+  locked: import_mobx_state_tree.types.optional(import_mobx_state_tree.types.boolean, false),
+  // === MJML attributes the inspector has no control for (kept from an import) ===
+  extraAttributes: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: import_mobx_state_tree.types.maybe(import_mobx_state_tree.types.frozen())
+}).actions((self) => ({
+  /**
+   * Update any style property by name
+   */
+  updateStyle(property, value) {
+    if (property in self) {
+      self[property] = value;
+    }
+  },
+  /**
+   * Update multiple properties at once
+   */
+  updateProperties(updates) {
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in self) {
+        self[key] = value;
+      }
+    });
+  },
+  /**
+   * Set block content (for text blocks)
+   */
+  setContent(content) {
+    self.content = content;
+  },
+  /**
+   * Toggle block visibility
+   */
+  toggleHidden() {
+    self.hidden = !self.hidden;
+  },
+  /**
+   * Set padding values
+   */
+  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;
+  },
+  /**
+   * Add a social link
+   */
+  addSocialLink(platform, url, color) {
+    self.links.push(SocialLinkModel.create({ platform, url, color }));
+  },
+  /**
+   * Remove a social link by index
+   */
+  removeSocialLink(index) {
+    self.links.splice(index, 1);
+  },
+  /**
+   * Add a navbar link
+   */
+  addNavbarLink(href, label, color) {
+    self.navLinks.push(NavbarLinkModel.create({ href, label, color }));
+  },
+  /**
+   * Remove a navbar link by index
+   */
+  removeNavbarLink(index) {
+    self.navLinks.splice(index, 1);
+  },
+  /**
+   * Add a carousel image
+   */
+  addCarouselImage(src, alt, href, thumbnailSrc) {
+    self.images.push(CarouselImageModel.create({ src, alt, href, thumbnailSrc }));
+  },
+  /**
+   * Remove a carousel image by index
+   */
+  removeCarouselImage(index) {
+    self.images.splice(index, 1);
+  },
+  /**
+   * Add an accordion item
+   */
+  addAccordionItem(title, content) {
+    self.items.push(AccordionItemModel.create({ title, content }));
+  },
+  /**
+   * Remove an accordion item by index
+   */
+  removeAccordionItem(index) {
+    self.items.splice(index, 1);
+  },
+  /**
+   * Add a table row
+   */
+  addTableRow(cells) {
+    self.rows.push(cells);
+  },
+  /**
+   * Remove a table row by index
+   */
+  removeTableRow(index) {
+    self.rows.splice(index, 1);
+  }
+})).views((self) => ({
+  /**
+   * Computed style object for React rendering
+   */
+  get computedStyle() {
+    const style = {};
+    if (self.color) style.color = self.color;
+    if (self.backgroundColor) style.backgroundColor = self.backgroundColor;
+    if (self.fontSize) style.fontSize = self.fontSize;
+    if (self.fontFamily) style.fontFamily = self.fontFamily;
+    if (self.align) style.textAlign = self.align;
+    if (self.lineHeight) style.lineHeight = self.lineHeight;
+    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;
+    if (self.borderRadius) style.borderRadius = self.borderRadius;
+    if (self.border) style.border = self.border;
+    return style;
+  },
+  /**
+   * Get padding as a single 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 a CSS string (e.g., "10px 20px 10px 20px")
+   */
+  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"}`;
+  },
+  /**
+   * MJML attributes for export
+   */
+  get mjmlAttributes() {
+    const attrs = {};
+    if (self.color) attrs.color = self.color;
+    if (self.backgroundColor) attrs["background-color"] = self.backgroundColor;
+    if (self.fontSize) attrs["font-size"] = self.fontSize;
+    if (self.fontFamily) attrs["font-family"] = self.fontFamily;
+    if (self.align) attrs.align = self.align;
+    if (self.lineHeight) attrs["line-height"] = self.lineHeight;
+    const paddingParts = [];
+    if (self.paddingTop) paddingParts.push(`top:${self.paddingTop}`);
+    if (self.paddingRight) paddingParts.push(`right:${self.paddingRight}`);
+    if (self.paddingBottom) paddingParts.push(`bottom:${self.paddingBottom}`);
+    if (self.paddingLeft) paddingParts.push(`left:${self.paddingLeft}`);
+    if (paddingParts.length > 0) {
+      const padding = `${self.paddingTop || "0"} ${self.paddingRight || "0"} ${self.paddingBottom || "0"} ${self.paddingLeft || "0"}`;
+      attrs.padding = padding;
+    }
+    if (self.src) attrs.src = self.src;
+    if (self.alt) attrs.alt = self.alt;
+    if (self.width) attrs.width = self.width;
+    if (self.height) attrs.height = self.height;
+    if (self.href) attrs.href = self.href;
+    if (self.borderRadius) attrs["border-radius"] = self.borderRadius;
+    if (self.border) attrs.border = self.border;
+    if (self.innerPadding) attrs["inner-padding"] = self.innerPadding;
+    if (self.borderColor) attrs["border-color"] = self.borderColor;
+    if (self.borderWidth) attrs["border-width"] = self.borderWidth;
+    if (self.borderStyle) attrs["border-style"] = self.borderStyle;
+    return attrs;
+  },
+  /**
+   * Check if this is a text-based block
+   */
+  get isTextBlock() {
+    return self.type === "text" /* TEXT */;
+  },
+  /**
+   * Check if this is an image block
+   */
+  get isImageBlock() {
+    return self.type === "image" /* IMAGE */;
+  },
+  /**
+   * Check if this is a button block
+   */
+  get isButtonBlock() {
+    return self.type === "button" /* BUTTON */;
+  },
+  /**
+   * Check if this block is locked (header/footer)
+   */
+  get isLocked() {
+    return self.locked || self.type === "header" /* HEADER */ || self.type === "footer" /* FOOTER */;
+  },
+  /**
+   * Get display name for layers panel
+   */
+  get displayName() {
+    switch (self.type) {
+      case "text" /* TEXT */:
+        const text = self.content.replace(/<[^>]*>/g, "").trim();
+        return text.length > 20 ? text.substring(0, 20) + "..." : text || "Text";
+      case "image" /* IMAGE */:
+        return self.alt || "Image";
+      case "button" /* BUTTON */:
+        return self.label || "Button";
+      case "divider" /* DIVIDER */:
+        return "Divider";
+      case "spacer" /* SPACER */:
+        return `Spacer (${self.height || "20px"})`;
+      case "social" /* SOCIAL */:
+        return "Social Links";
+      case "hero" /* HERO */:
+        return "Hero";
+      case "accordion" /* ACCORDION */:
+        return "Accordion";
+      case "raw" /* RAW */:
+        return "Custom HTML";
+      case "navbar" /* NAVBAR */:
+        return "Navigation";
+      case "carousel" /* CAROUSEL */:
+        return "Carousel";
+      case "table" /* TABLE */:
+        return "Table";
+      case "header" /* HEADER */:
+        return "Header";
+      case "footer" /* FOOTER */:
+        return "Footer";
+      default:
+        return "Block";
+    }
+  }
+}));
+var BlockModel = BlockModelBase.preProcessSnapshot((raw) => {
+  let snapshot = paddingIn(raw);
+  if (snapshot && snapshot.type === "navbar") {
+    const { links, navLinks, ...rest } = snapshot;
+    const stored = navLinks && navLinks.length > 0 ? navLinks : links ?? [];
+    snapshot = { ...rest, navLinks: stored };
+  }
+  return fillDefaults(snapshot, BLOCK_DEFAULTS);
+}).postProcessSnapshot((raw) => {
+  const snapshot = paddingOut(dropFilled(raw));
+  if (snapshot.type !== "navbar") return snapshot;
+  const { navLinks, links: _socialLinks, ...rest } = snapshot;
+  return { ...rest, links: navLinks ?? [] };
+});
+
+// src/registry/blockCategories.ts
+var LEAF_BLOCK_TYPES = [
+  "text" /* TEXT */,
+  "image" /* IMAGE */,
+  "button" /* BUTTON */,
+  "divider" /* DIVIDER */,
+  "spacer" /* SPACER */,
+  "social" /* SOCIAL */
+];
+var CONTAINER_BLOCK_TYPES = [
+  "hero" /* HERO */,
+  "accordion" /* ACCORDION */,
+  "raw" /* RAW */,
+  "navbar" /* NAVBAR */,
+  "carousel" /* CAROUSEL */,
+  "table" /* TABLE */,
+  "header" /* HEADER */,
+  "footer" /* FOOTER */
+];
+function isLeafBlockType(t) {
+  return LEAF_BLOCK_TYPES.includes(t);
+}
+
+// src/history/HistoryManager.ts
+var import_immer = require("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 = (0, import_immer.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
+var import_mobx_state_tree3 = require("mobx-state-tree");
+var import_nanoid3 = require("nanoid");
+
+// src/store/mst/models/SubColumnModel.ts
+var import_mobx_state_tree2 = require("mobx-state-tree");
+var import_nanoid2 = require("nanoid");
+var SubColumnModel = import_mobx_state_tree2.types.model("SubColumn", {
+  id: import_mobx_state_tree2.types.identifier,
+  width: import_mobx_state_tree2.types.optional(import_mobx_state_tree2.types.number, 50),
+  backgroundColor: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.string),
+  backgroundGradient: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.frozen()),
+  verticalAlign: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.enumeration(["top", "middle", "bottom"])),
+  paddingTop: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.string),
+  paddingRight: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.string),
+  paddingBottom: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.string),
+  paddingLeft: import_mobx_state_tree2.types.maybe(import_mobx_state_tree2.types.string),
+  blocks: import_mobx_state_tree2.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 = (0, import_mobx_state_tree2.isStateTreeNode)(block) ? (0, import_mobx_state_tree2.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) {
+      (0, import_mobx_state_tree2.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 ? (0, import_mobx_state_tree2.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) => (0, import_mobx_state_tree2.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 ?? (0, import_nanoid2.nanoid)(),
+    width: opts.width ?? 50,
+    blocks: opts.blocks ?? []
+  };
+}
+
+// src/store/mst/models/ColumnModel.ts
+var ColumnModelBase = import_mobx_state_tree3.types.model("Column", {
+  id: import_mobx_state_tree3.types.identifier,
+  width: import_mobx_state_tree3.types.optional(import_mobx_state_tree3.types.number, 100),
+  // percentage (e.g., 50 for 50%)
+  backgroundColor: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.string),
+  backgroundGradient: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.frozen()),
+  verticalAlign: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.enumeration(["top", "middle", "bottom"])),
+  paddingTop: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.string),
+  paddingRight: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.string),
+  paddingBottom: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.string),
+  paddingLeft: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.string),
+  hidden: import_mobx_state_tree3.types.optional(import_mobx_state_tree3.types.boolean, false),
+  blocks: import_mobx_state_tree3.types.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: import_mobx_state_tree3.types.optional(import_mobx_state_tree3.types.array(import_mobx_state_tree3.types.late(() => SubColumnModel)), []),
+  /** MJML attributes the inspector has no control for (kept from an import). */
+  extraAttributes: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: import_mobx_state_tree3.types.maybe(import_mobx_state_tree3.types.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 = (0, import_mobx_state_tree3.isStateTreeNode)(block) ? (0, import_mobx_state_tree3.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;
+  },
+  /**
+   * Remove a block by ID
+   */
+  removeBlock(blockId) {
+    const block = self.blocks.find((b) => b.id === blockId);
+    if (block) {
+      (0, import_mobx_state_tree3.destroy)(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 (0, import_mobx_state_tree3.detach)(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) => (0, import_mobx_state_tree3.destroy)(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) => (0, import_mobx_state_tree3.detach)(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 = (0, import_mobx_state_tree3.detach)(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 || (0, import_nanoid3.nanoid)(),
+    width: options.width || 100,
+    blocks: options.blocks || []
+  };
+}
+
+// src/store/mst/models/SectionModel.ts
+var import_mobx_state_tree4 = require("mobx-state-tree");
+var import_nanoid4 = require("nanoid");
+var SectionModelBase = import_mobx_state_tree4.types.model("Section", {
+  id: import_mobx_state_tree4.types.identifier,
+  type: import_mobx_state_tree4.types.optional(import_mobx_state_tree4.types.literal("section"), "section"),
+  // Background
+  backgroundColor: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  backgroundImage: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  backgroundGradient: import_mobx_state_tree4.types.maybe(
+    import_mobx_state_tree4.types.model("BackgroundGradient", {
+      type: import_mobx_state_tree4.types.enumeration(["linear", "radial"]),
+      angle: import_mobx_state_tree4.types.number,
+      stops: import_mobx_state_tree4.types.array(
+        import_mobx_state_tree4.types.model("GradientStop", {
+          color: import_mobx_state_tree4.types.string,
+          position: import_mobx_state_tree4.types.number
+        })
+      )
+    })
+  ),
+  backgroundPosition: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  backgroundRepeat: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.enumeration(["repeat", "no-repeat"])),
+  backgroundSize: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  // Layout
+  fullWidth: import_mobx_state_tree4.types.optional(import_mobx_state_tree4.types.boolean, false),
+  noStack: import_mobx_state_tree4.types.optional(import_mobx_state_tree4.types.boolean, false),
+  // mj-group behavior
+  // Visibility
+  hidden: import_mobx_state_tree4.types.optional(import_mobx_state_tree4.types.boolean, false),
+  // Padding
+  paddingTop: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  paddingRight: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  paddingBottom: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  paddingLeft: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.string),
+  // Columns
+  columns: import_mobx_state_tree4.types.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: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.boolean),
+  /** MJML attributes the inspector has no control for (kept from an import). */
+  extraAttributes: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: import_mobx_state_tree4.types.maybe(import_mobx_state_tree4.types.frozen())
+}).actions((self) => ({
+  /**
+   * Add a column to this section
+   */
+  addColumn(column, index) {
+    const columnToAdd = ColumnModel.is(column) ? (0, import_mobx_state_tree4.detach)(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) {
+      (0, import_mobx_state_tree4.destroy)(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((0, import_mobx_state_tree4.detach)(block));
+        });
+      }
+      while (self.columns.length > count) {
+        const column = self.columns[self.columns.length - 1];
+        (0, import_mobx_state_tree4.destroy)(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 || (0, import_nanoid4.nanoid)(),
+    type: "section",
+    backgroundColor: options.backgroundColor,
+    columns
+  };
+}
+
+// src/store/mst/models/WrapperModel.ts
+var import_mobx_state_tree5 = require("mobx-state-tree");
+var import_nanoid5 = require("nanoid");
+var MJML_WRAPPER_DEFAULT_PADDING = { top: "20px", right: "0px", bottom: "20px", left: "0px" };
+var WrapperModelBase = import_mobx_state_tree5.types.model("Wrapper", {
+  id: import_mobx_state_tree5.types.identifier,
+  type: import_mobx_state_tree5.types.literal("wrapper"),
+  hidden: import_mobx_state_tree5.types.optional(import_mobx_state_tree5.types.boolean, false),
+  // Background
+  backgroundColor: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  backgroundImage: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  backgroundGradient: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.frozen()),
+  backgroundPosition: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  backgroundRepeat: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.enumeration(["repeat", "no-repeat"])),
+  backgroundSize: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  // Border
+  border: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  borderTop: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  borderRight: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  borderBottom: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  borderLeft: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  borderRadius: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  // Padding (the schema's `padding` object, flat in the store; see `spacingSnapshot.ts`)
+  paddingTop: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  paddingRight: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  paddingBottom: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  paddingLeft: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  // Layout
+  fullWidth: import_mobx_state_tree5.types.optional(import_mobx_state_tree5.types.boolean, false),
+  cssClass: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  gap: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.string),
+  textAlign: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.enumeration(["left", "center", "right"])),
+  sections: import_mobx_state_tree5.types.array(SectionModel),
+  /** MJML attributes the inspector has no control for (kept from an import). */
+  extraAttributes: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: import_mobx_state_tree5.types.maybe(import_mobx_state_tree5.types.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 || (0, import_nanoid5.nanoid)(),
+    type: "wrapper",
+    sections: options.sections ?? [createSection()]
+  };
+}
+
+// src/store/mst/models/TemplateModel.ts
+var import_mobx_state_tree6 = require("mobx-state-tree");
+var import_nanoid6 = require("nanoid");
+var TopLevelItemModel = import_mobx_state_tree6.types.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: (0, import_nanoid6.nanoid)() }));
+  return {
+    ...snapshot,
+    id: (0, import_nanoid6.nanoid)(),
+    columns: (snapshot.columns ?? []).map((col) => ({
+      ...col,
+      id: (0, import_nanoid6.nanoid)(),
+      blocks: cloneBlocks(col.blocks),
+      ...col.subColumns ? { subColumns: col.subColumns.map((sc) => ({ ...sc, id: (0, import_nanoid6.nanoid)(), blocks: cloneBlocks(sc.blocks) })) } : {}
+    }))
+  };
+}
+var FontDefinitionModel = import_mobx_state_tree6.types.model("FontDefinition", {
+  name: import_mobx_state_tree6.types.string,
+  href: import_mobx_state_tree6.types.string
+});
+var ThemeColorModel = import_mobx_state_tree6.types.model("ThemeColor", {
+  name: import_mobx_state_tree6.types.string,
+  value: import_mobx_state_tree6.types.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 = import_mobx_state_tree6.types.model("TemplateMetadata", {
+  title: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.string, "Untitled Template"),
+  subject: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.string, ""),
+  previewText: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.string, ""),
+  createdAt: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.Date, () => /* @__PURE__ */ new Date()),
+  updatedAt: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.Date, () => /* @__PURE__ */ new Date()),
+  fonts: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.array(FontDefinitionModel), []),
+  themeColors: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.array(ThemeColorModel), DEFAULT_THEME_COLORS),
+  breakpoint: import_mobx_state_tree6.types.maybe(import_mobx_state_tree6.types.string),
+  customCSS: import_mobx_state_tree6.types.maybe(import_mobx_state_tree6.types.string),
+  inlineCSS: import_mobx_state_tree6.types.maybe(import_mobx_state_tree6.types.string),
+  /** The MJML head and body settings of an imported document (see `MjmlHead` in the schema). */
+  mjmlHead: import_mobx_state_tree6.types.maybe(import_mobx_state_tree6.types.frozen()),
+  /** Defaults the store filled when it opened the node; they go back out only if changed (see `filledDefaults.ts`). */
+  filled: import_mobx_state_tree6.types.maybe(import_mobx_state_tree6.types.frozen()),
+  /** Dates a stored document wrote as ISO strings, so they go back out as written. */
+  dateStrings: import_mobx_state_tree6.types.maybe(import_mobx_state_tree6.types.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 = import_mobx_state_tree6.types.model("Template", {
+  id: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.string, () => (0, import_nanoid6.nanoid)()),
+  version: import_mobx_state_tree6.types.optional(import_mobx_state_tree6.types.string, CURRENT_TEMPLATE_VERSION),
+  metadata: import_mobx_state_tree6.types.optional(TemplateMetadataModel, {}),
+  /** The top level, in order: sections and wrappers (see `TopLevelItemModel`). */
+  sections: import_mobx_state_tree6.types.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;
+      (0, import_mobx_state_tree6.destroy)(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 = (0, import_mobx_state_tree6.detach)(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 = (0, import_mobx_state_tree6.detach)(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 = (0, import_mobx_state_tree6.detach)(self.sections[index]);
+      const wrapper = WrapperModel.create({ id: (0, import_nanoid6.nanoid)(), 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) => (0, import_mobx_state_tree6.detach)(s));
+      (0, import_mobx_state_tree6.destroy)(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 {
+        (0, import_mobx_state_tree6.destroy)(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((0, import_mobx_state_tree6.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 = (0, import_mobx_state_tree6.getSnapshot)(self.sections[index]);
+      const copy = WrapperModel.create({
+        ...snapshot,
+        id: (0, import_nanoid6.nanoid)(),
+        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) => (0, import_mobx_state_tree6.destroy)(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 || (0, import_nanoid6.nanoid)(),
+    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 || (0, import_nanoid6.nanoid)(),
+    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
+var import_mobx_state_tree7 = require("mobx-state-tree");
+var EditorUIStore = import_mobx_state_tree7.types.model("EditorUI", {
+  // === Selection State ===
+  selectedBlockId: import_mobx_state_tree7.types.maybe(import_mobx_state_tree7.types.string),
+  selectedSectionId: import_mobx_state_tree7.types.maybe(import_mobx_state_tree7.types.string),
+  selectedColumnId: import_mobx_state_tree7.types.maybe(import_mobx_state_tree7.types.string),
+  selectedSubColumnId: import_mobx_state_tree7.types.maybe(import_mobx_state_tree7.types.string),
+  /** A wrapper (container around sections), one level out from sections. */
+  selectedWrapperId: import_mobx_state_tree7.types.maybe(import_mobx_state_tree7.types.string),
+  // === Panel State ===
+  activeTab: import_mobx_state_tree7.types.optional(
+    import_mobx_state_tree7.types.enumeration(["elements", "layout", "layers", "settings", "prebuilt", "saved"]),
+    "elements"
+  ),
+  showLeftPanel: import_mobx_state_tree7.types.optional(import_mobx_state_tree7.types.boolean, true),
+  showRightPanel: import_mobx_state_tree7.types.optional(import_mobx_state_tree7.types.boolean, true),
+  // === View Mode ===
+  previewDevice: import_mobx_state_tree7.types.optional(
+    import_mobx_state_tree7.types.enumeration(["desktop", "mobile"]),
+    "desktop"
+  ),
+  zoomLevel: import_mobx_state_tree7.types.optional(import_mobx_state_tree7.types.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
+var import_mobx_state_tree8 = require("mobx-state-tree");
+var RootStore = import_mobx_state_tree8.types.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 = (0, import_mobx_state_tree8.getSnapshot)(self.template);
+    self.history = [snapshot];
+    self.historyIndex = 0;
+  },
+  /**
+   * Record current state to history (called after mutations)
+   */
+  recordHistory() {
+    if (self.isUndoRedo) return;
+    const snapshot = (0, import_mobx_state_tree8.getSnapshot)(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--;
+    (0, import_mobx_state_tree8.applySnapshot)(self.template, self.history[self.historyIndex]);
+    self.appliedFromHistory = (0, import_mobx_state_tree8.getSnapshot)(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++;
+    (0, import_mobx_state_tree8.applySnapshot)(self.template, self.history[self.historyIndex]);
+    self.appliedFromHistory = (0, import_mobx_state_tree8.getSnapshot)(self.template);
+    self.isUndoRedo = false;
+    this.validateSelection();
+    return true;
+  },
+  /**
+   * Clear history
+   */
+  clearHistory() {
+    const snapshot = (0, import_mobx_state_tree8.getSnapshot)(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) {
+    (0, import_mobx_state_tree8.applySnapshot)(self.template, templateData);
+    self.editorUI.clearSelection();
+    this.clearHistory();
+  },
+  /**
+   * Reset to a new empty template
+   */
+  resetTemplate(title) {
+    const newTemplate = createTemplateWithDefaultSection({ title });
+    (0, import_mobx_state_tree8.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;
+    (0, import_mobx_state_tree8.onSnapshot)(store.template, (snapshot) => {
+      store.recordHistory();
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        onChange(snapshot);
+      }, onChangeDebounce);
+    });
+  } else {
+    (0, import_mobx_state_tree8.onSnapshot)(store.template, () => {
+      store.recordHistory();
+    });
+  }
+  return store;
+}
+function createEmptyStore() {
+  return createRootStore({
+    template: createTemplate()
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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
+});