From a48af6702b5b07cee1033e11094e5c51f4e337cb Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 16:40:01 +0530
Subject: [PATCH 01/18] feat(email-editor): writing-first editor with Write and
 Style modes and new blocks (#169)

Write mode edits text paragraph by paragraph with markdown shortcuts, a
format bar, a / block menu, {{ merge tags, undo/redo and a send checklist;
Style mode previews desktop, mobile, sample data and dark inboxes beside
the palette and block settings. Adds spacer, columns, social, html and
conditional blocks, and a quickEdit hook so host blocks get the compact
popover. Hosts can still add their own blocks and leave out any of ours.
---
 .changeset/richer-email-editor.md             |    9 +
 bun.lock                                      |   10 +-
 packages/email-blocks/src/email-preview.tsx   |    2 +
 packages/email-editor/README.md               |   12 +
 packages/email-editor/package.json            |    2 +
 .../email-editor/src/blocks/columns/block.tsx |   63 +
 .../email-editor/src/blocks/columns/index.ts  |   20 +
 .../src/blocks/columns/metadata.ts            |   23 +
 .../src/blocks/columns/quick-edit.tsx         |   24 +
 .../src/blocks/columns/settings.tsx           |   82 +
 .../email-editor/src/blocks/columns/types.ts  |   12 +
 .../src/blocks/conditional/block.tsx          |   78 +
 .../src/blocks/conditional/index.ts           |   21 +
 .../src/blocks/conditional/metadata.ts        |   18 +
 .../src/blocks/conditional/quick-edit.tsx     |   48 +
 .../src/blocks/conditional/settings.tsx       |   52 +
 .../src/blocks/conditional/types.ts           |   16 +
 .../email-editor/src/blocks/html/block.tsx    |   50 +
 .../email-editor/src/blocks/html/index.ts     |   17 +
 .../email-editor/src/blocks/html/metadata.ts  |   14 +
 .../src/blocks/html/quick-edit.tsx            |   21 +
 .../email-editor/src/blocks/html/settings.tsx |   26 +
 .../email-editor/src/blocks/html/types.ts     |    5 +
 .../email-editor/src/blocks/image/index.ts    |    3 +
 .../src/blocks/image/quick-edit.tsx           |   48 +
 packages/email-editor/src/blocks/index.ts     |    5 +
 .../email-editor/src/blocks/link/index.ts     |    2 +
 .../src/blocks/link/quick-edit.tsx            |   30 +
 .../email-editor/src/blocks/social/block.tsx  |   70 +
 .../email-editor/src/blocks/social/index.ts   |   18 +
 .../src/blocks/social/metadata.ts             |   19 +
 .../src/blocks/social/quick-edit.tsx          |   52 +
 .../src/blocks/social/settings.tsx            |   93 +
 .../email-editor/src/blocks/social/types.ts   |   21 +
 .../email-editor/src/blocks/spacer/block.tsx  |   26 +
 .../email-editor/src/blocks/spacer/index.ts   |   14 +
 .../src/blocks/spacer/metadata.ts             |   16 +
 .../src/blocks/spacer/quick-edit.tsx          |   34 +
 .../src/blocks/spacer/settings.tsx            |   38 +
 .../email-editor/src/blocks/spacer/types.ts   |    5 +
 .../email-editor/src/blocks/text/block.tsx    |  107 +-
 .../src/components/add-block-button.tsx       |   71 -
 .../src/components/block-menu.tsx             |  118 +
 .../email-editor/src/components/block-row.tsx |  281 +++
 .../src/components/block-settings-panel.tsx   |  111 -
 .../src/components/block-wrapper.tsx          |  213 --
 .../email-editor/src/components/checklist.tsx |  129 ++
 .../src/components/controls-bar.tsx           |   98 +
 .../src/components/doc-header.tsx             |  169 ++
 .../src/components/email-editor.test.tsx      |  274 +++
 .../src/components/email-editor.tsx           | 1367 ++++++++---
 .../email-editor/src/components/inspector.tsx |  217 ++
 .../src/components/layout/editor-layout.tsx   |   27 -
 .../email-editor/src/components/text-item.tsx |  594 +++++
 packages/email-editor/src/editor.css          | 2004 +++++++++++++++++
 packages/email-editor/src/email-editor.tsx    |   38 +-
 packages/email-editor/src/index.ts            |    1 +
 .../email-editor/src/lib/block-choices.ts     |  132 ++
 .../email-editor/src/lib/block-policy.test.ts |   37 +
 packages/email-editor/src/lib/block-policy.ts |   24 +
 .../email-editor/src/lib/checklist.test.ts    |  169 ++
 packages/email-editor/src/lib/checklist.ts    |  270 +++
 .../src/lib/email-renderer.test.tsx           |   96 +
 .../email-editor/src/lib/email-renderer.tsx   |   33 +-
 packages/email-editor/src/lib/history.test.ts |   42 +
 packages/email-editor/src/lib/history.ts      |   57 +
 .../src/lib/inline-markdown.test.ts           |   51 +
 .../email-editor/src/lib/inline-markdown.ts   |   87 +
 .../email-editor/src/lib/markdown-content.tsx |   89 +
 .../src/lib/markdown-edit.test.ts             |   94 +
 .../email-editor/src/lib/markdown-edit.ts     |  169 ++
 .../email-editor/src/lib/menu-placement.ts    |   24 +
 packages/email-editor/src/lib/palettes.ts     |  116 +
 .../email-editor/src/lib/text-items.test.ts   |  151 ++
 packages/email-editor/src/lib/text-items.ts   |  220 ++
 .../email-editor/src/types/block-registry.ts  |    5 +
 packages/email-editor/src/types/editor-ui.ts  |   25 +
 .../email-editor/src/types/email-editor.ts    |    5 +
 78 files changed, 8044 insertions(+), 790 deletions(-)
 create mode 100644 .changeset/richer-email-editor.md
 create mode 100644 packages/email-editor/src/blocks/columns/block.tsx
 create mode 100644 packages/email-editor/src/blocks/columns/index.ts
 create mode 100644 packages/email-editor/src/blocks/columns/metadata.ts
 create mode 100644 packages/email-editor/src/blocks/columns/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/columns/settings.tsx
 create mode 100644 packages/email-editor/src/blocks/columns/types.ts
 create mode 100644 packages/email-editor/src/blocks/conditional/block.tsx
 create mode 100644 packages/email-editor/src/blocks/conditional/index.ts
 create mode 100644 packages/email-editor/src/blocks/conditional/metadata.ts
 create mode 100644 packages/email-editor/src/blocks/conditional/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/conditional/settings.tsx
 create mode 100644 packages/email-editor/src/blocks/conditional/types.ts
 create mode 100644 packages/email-editor/src/blocks/html/block.tsx
 create mode 100644 packages/email-editor/src/blocks/html/index.ts
 create mode 100644 packages/email-editor/src/blocks/html/metadata.ts
 create mode 100644 packages/email-editor/src/blocks/html/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/html/settings.tsx
 create mode 100644 packages/email-editor/src/blocks/html/types.ts
 create mode 100644 packages/email-editor/src/blocks/image/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/link/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/social/block.tsx
 create mode 100644 packages/email-editor/src/blocks/social/index.ts
 create mode 100644 packages/email-editor/src/blocks/social/metadata.ts
 create mode 100644 packages/email-editor/src/blocks/social/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/social/settings.tsx
 create mode 100644 packages/email-editor/src/blocks/social/types.ts
 create mode 100644 packages/email-editor/src/blocks/spacer/block.tsx
 create mode 100644 packages/email-editor/src/blocks/spacer/index.ts
 create mode 100644 packages/email-editor/src/blocks/spacer/metadata.ts
 create mode 100644 packages/email-editor/src/blocks/spacer/quick-edit.tsx
 create mode 100644 packages/email-editor/src/blocks/spacer/settings.tsx
 create mode 100644 packages/email-editor/src/blocks/spacer/types.ts
 delete mode 100644 packages/email-editor/src/components/add-block-button.tsx
 create mode 100644 packages/email-editor/src/components/block-menu.tsx
 create mode 100644 packages/email-editor/src/components/block-row.tsx
 delete mode 100644 packages/email-editor/src/components/block-settings-panel.tsx
 delete mode 100644 packages/email-editor/src/components/block-wrapper.tsx
 create mode 100644 packages/email-editor/src/components/checklist.tsx
 create mode 100644 packages/email-editor/src/components/controls-bar.tsx
 create mode 100644 packages/email-editor/src/components/doc-header.tsx
 create mode 100644 packages/email-editor/src/components/email-editor.test.tsx
 create mode 100644 packages/email-editor/src/components/inspector.tsx
 delete mode 100644 packages/email-editor/src/components/layout/editor-layout.tsx
 create mode 100644 packages/email-editor/src/components/text-item.tsx
 create mode 100644 packages/email-editor/src/editor.css
 create mode 100644 packages/email-editor/src/lib/block-choices.ts
 create mode 100644 packages/email-editor/src/lib/checklist.test.ts
 create mode 100644 packages/email-editor/src/lib/checklist.ts
 create mode 100644 packages/email-editor/src/lib/history.test.ts
 create mode 100644 packages/email-editor/src/lib/history.ts
 create mode 100644 packages/email-editor/src/lib/inline-markdown.test.ts
 create mode 100644 packages/email-editor/src/lib/inline-markdown.ts
 create mode 100644 packages/email-editor/src/lib/markdown-content.tsx
 create mode 100644 packages/email-editor/src/lib/markdown-edit.test.ts
 create mode 100644 packages/email-editor/src/lib/markdown-edit.ts
 create mode 100644 packages/email-editor/src/lib/menu-placement.ts
 create mode 100644 packages/email-editor/src/lib/palettes.ts
 create mode 100644 packages/email-editor/src/lib/text-items.test.ts
 create mode 100644 packages/email-editor/src/lib/text-items.ts
 create mode 100644 packages/email-editor/src/types/editor-ui.ts

diff --git a/.changeset/richer-email-editor.md b/.changeset/richer-email-editor.md
new file mode 100644
index 00000000..991516f8
--- /dev/null
+++ b/.changeset/richer-email-editor.md
@@ -0,0 +1,9 @@
+---
+"@sendlit/email-editor": minor
+"@sendlit/email-blocks": minor
+"@sendlit/api-contract": minor
+---
+
+A redesigned email editor focused on writing. Write mode puts the subject and preview text above the email, edits text inline as markdown with a format bar, a `/` block menu and `{{` merge tags, and reorders blocks by dragging; Style mode previews desktop, mobile, sample data and a dark inbox beside a palette, typography and block panel. Text is written paragraph by paragraph: Enter starts a new paragraph or list item, Backspace joins paragraphs, markdown shortcuts (`#`, `##`, `-`, `1.`, `>`) turn a paragraph into a heading, list or quote, and merge tags show as chips; text blocks are still stored as one markdown block each. Blocks can define `quickEdit` for the compact popover shown while writing. Adds undo and redo, a "Before you send" checklist (with one-click fallbacks for merge tags), and `subject`, `onSubjectChange`, `variables`, `senderName`, `theme` and `defaultMode` props on `EmailEditor`.
+
+New blocks: `spacer`, `columns`, `social`, `html` and `conditional` (a section shown to contacts with or without a tag; marketing only). The API validates them on write, and rejects `conditional` blocks in transactional content with `conditional_not_allowed`. `renderEmailToHtml` takes `showConditionals` for previews.
diff --git a/bun.lock b/bun.lock
index 9ebd51c1..8a0cfebb 100644
--- a/bun.lock
+++ b/bun.lock
@@ -82,7 +82,7 @@
         "fumadocs-openapi": "10.4.1",
         "fumadocs-ui": "16.7.1",
         "lucide-react": "^0.577.0",
-        "next": "16.3.6",
+        "next": "16.4.1",
         "react": "19.2.8",
         "react-dom": "19.2.8",
         "shiki": "^4.3.1",
@@ -117,7 +117,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.577.0",
-        "next": "16.3.6",
+        "next": "16.4.1",
         "next-themes": "^0.4.6",
         "papaparse": "^5.7.0",
         "posthog-js": "^1.425.1",
@@ -160,7 +160,7 @@
     },
     "packages/email-blocks": {
       "name": "@sendlit/email-blocks",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "dependencies": {
         "@radix-ui/react-alert-dialog": "^1.1.18",
         "@radix-ui/react-avatar": "^1.2.1",
@@ -219,6 +219,8 @@
         "uuid": "^11.1.1",
       },
       "devDependencies": {
+        "@happy-dom/global-registrator": "21.0.3",
+        "@testing-library/react": "^16.3.2",
         "@types/node": "^22.20.0",
         "@types/react": "^19.2.17",
         "autoprefixer": "^10.5.2",
@@ -235,7 +237,7 @@
     },
     "packages/sendlit": {
       "name": "sendlit",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "dependencies": {
         "@ts-rest/core": "3.52.1",
         "zod": "3.25.76",
diff --git a/packages/email-blocks/src/email-preview.tsx b/packages/email-blocks/src/email-preview.tsx
index 9dc2ce90..234fcf12 100644
--- a/packages/email-blocks/src/email-preview.tsx
+++ b/packages/email-blocks/src/email-preview.tsx
@@ -70,6 +70,8 @@ export function EmailPreview({
         email: normalizedEmail,
         blocks,
         renderContext,
+        // A preview has no subscriber, so show conditional sections as written.
+        showConditionals: true,
       })
         .then((html) => {
           startTransition(() => {
diff --git a/packages/email-editor/README.md b/packages/email-editor/README.md
index 349a490b..07997a0f 100644
--- a/packages/email-editor/README.md
+++ b/packages/email-editor/README.md
@@ -54,3 +54,15 @@ export default App() {
     return (<EmailEditor  />)
 }
 ```
+
+## Writing mode, subject and merge tags
+
+`EmailEditor` opens in Write mode (subject and preview text above the email, inline markdown text, a `/` block menu, `{{` merge tags, drag to reorder) and has a Style mode for the look and the selected block. Pass `subject` and `onSubjectChange` to edit the subject in the editor, `variables` for merge tags, `senderName` for the inbox preview and `theme` (`"sendlit"`, `"neutral"` or `"dark"`).
+
+The editor's look is a set of `--sle-*` CSS variables on the `.sle` element, so it can be re-skinned without touching the components. The styles are in `@sendlit/email-editor/styles.css`.
+
+Besides text, link, image and separator it ships `spacer`, `columns`, `social`, `html` and `conditional` blocks. A `conditional` block becomes a Liquid condition on `subscriber.tags` when rendered for sending; pass `showConditionals` to `renderEmailToHtml` to preview every section.
+
+## Custom blocks
+
+Pass `blocks` to choose the block types: add your own, and leave out any of the built-in ones. A block can provide `quickEdit` (and `quickEditLayout`) for the compact popover shown while writing; its full `settings` form appears in Style mode. Paragraph-by-paragraph writing applies to the built-in `text` block only, so a registry without it, or with a host block named `text`, gets ordinary selectable blocks.
diff --git a/packages/email-editor/package.json b/packages/email-editor/package.json
index b3022f51..7e4949b3 100644
--- a/packages/email-editor/package.json
+++ b/packages/email-editor/package.json
@@ -42,6 +42,8 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "21.0.3",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^22.20.0",
     "@types/react": "^19.2.17",
     "autoprefixer": "^10.5.2",
diff --git a/packages/email-editor/src/blocks/columns/block.tsx b/packages/email-editor/src/blocks/columns/block.tsx
new file mode 100644
index 00000000..5f7f1555
--- /dev/null
+++ b/packages/email-editor/src/blocks/columns/block.tsx
@@ -0,0 +1,63 @@
+import { Column, Row, Section } from "@react-email/components";
+import { MarkdownContent } from "@/lib/markdown-content";
+import type { EmailBlock, EmailStyle } from "@/types/email-editor";
+import type { ColumnsBlockSettings, ColumnsRatio } from "./types";
+
+const WIDTHS: Record<ColumnsRatio, [string, string]> = {
+  "11": ["50%", "50%"],
+  "12": ["33%", "67%"],
+  "21": ["67%", "33%"],
+};
+
+const STACK_CSS =
+  "@media only screen and (max-width:480px){.sl-col{display:block!important;width:100%!important;padding-left:0!important;padding-right:0!important}}";
+
+export function ColumnsBlock({
+  block,
+  style,
+}: {
+  block: EmailBlock & { settings: ColumnsBlockSettings };
+  style?: EmailStyle;
+}) {
+  const {
+    left = "",
+    right = "",
+    ratio = "11",
+    stack = true,
+    alignment = "left",
+    backgroundColor = "transparent",
+    foregroundColor = style?.colors.foreground,
+    paddingTop = style?.structure.section.padding?.y,
+    paddingBottom = style?.structure.section.padding?.y,
+  } = block.settings as ColumnsBlockSettings & { foregroundColor?: string };
+  const [leftWidth, rightWidth] = WIDTHS[ratio] ?? WIDTHS["11"];
+  const gap = "12px";
+
+  return (
+    <Section>
+      {stack && <style>{STACK_CSS}</style>}
+      <div
+        style={{
+          backgroundColor,
+          color: foregroundColor,
+          padding: `${paddingTop} ${style?.structure.section.padding?.x} ${paddingBottom} ${style?.structure.section.padding?.x}`,
+        }}
+      >
+        <Row>
+          <Column
+            className="sl-col"
+            style={{ width: leftWidth, verticalAlign: "top", paddingRight: gap }}
+          >
+            <MarkdownContent content={left} style={style} options={{ alignment }} />
+          </Column>
+          <Column
+            className="sl-col"
+            style={{ width: rightWidth, verticalAlign: "top", paddingLeft: gap }}
+          >
+            <MarkdownContent content={right} style={style} options={{ alignment }} />
+          </Column>
+        </Row>
+      </div>
+    </Section>
+  );
+}
diff --git a/packages/email-editor/src/blocks/columns/index.ts b/packages/email-editor/src/blocks/columns/index.ts
new file mode 100644
index 00000000..d527b946
--- /dev/null
+++ b/packages/email-editor/src/blocks/columns/index.ts
@@ -0,0 +1,20 @@
+import type { BlockComponent } from "@/types/block-registry";
+import { ColumnsBlock as block } from "./block";
+import { metadata } from "./metadata";
+import { ColumnsSettings as settings } from "./settings";
+import { ColumnsQuickEdit as quickEdit } from "./quick-edit";
+import type { ColumnsBlockSettings } from "./types";
+
+export const ColumnsBlock: BlockComponent<ColumnsBlockSettings> = {
+  block,
+  settings,
+  metadata,
+  quickEdit,
+  quickEditLayout: "column",
+  defaultSettings: () => ({
+    left: "**Left column**\n\nA short note.",
+    right: "**Right column**\n\nAnother note.",
+    ratio: "11",
+    stack: true,
+  }),
+};
diff --git a/packages/email-editor/src/blocks/columns/metadata.ts b/packages/email-editor/src/blocks/columns/metadata.ts
new file mode 100644
index 00000000..1b34c6c5
--- /dev/null
+++ b/packages/email-editor/src/blocks/columns/metadata.ts
@@ -0,0 +1,23 @@
+import { Columns2 } from "lucide-react";
+import type { BlockMetadata } from "@/types/block-registry";
+
+export const metadata: BlockMetadata = {
+  name: "columns",
+  displayName: "Columns",
+  description: "Two text columns side by side",
+  icon: Columns2,
+  docs: {
+    settings: {
+      left: "The markdown content of the left column.",
+      right: "The markdown content of the right column.",
+      ratio:
+        "[Optional] The column widths, left to right. Range: 11 (equal), 12 (narrow then wide), 21 (wide then narrow). Default: 11",
+      stack:
+        "[Optional] Stack the columns on narrow screens. Range: true, false. Default: true",
+      backgroundColor:
+        "[Optional] The background color of the block. Format: #000000. Default: transparent",
+      paddingTop: "[Optional] The top padding. Format: 0px. Range: 0-100",
+      paddingBottom: "[Optional] The bottom padding. Format: 0px. Range: 0-100",
+    },
+  },
+};
diff --git a/packages/email-editor/src/blocks/columns/quick-edit.tsx b/packages/email-editor/src/blocks/columns/quick-edit.tsx
new file mode 100644
index 00000000..d9497cce
--- /dev/null
+++ b/packages/email-editor/src/blocks/columns/quick-edit.tsx
@@ -0,0 +1,24 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { ColumnsBlockSettings } from "./types";
+
+export function ColumnsQuickEdit({
+  block,
+  updateBlock,
+}: BlockSettingsProps<ColumnsBlockSettings>) {
+  const set = (key: "left" | "right", value: string) =>
+    updateBlock(block.id, { settings: { ...block.settings, [key]: value } });
+
+  return (
+    <div className="row">
+      {(["left", "right"] as const).map((side) => (
+        <textarea
+          key={side}
+          className="sle-in"
+          aria-label={side === "left" ? "Left column" : "Right column"}
+          value={block.settings[side] ?? ""}
+          onChange={(event) => set(side, event.target.value)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/columns/settings.tsx b/packages/email-editor/src/blocks/columns/settings.tsx
new file mode 100644
index 00000000..0bb9c777
--- /dev/null
+++ b/packages/email-editor/src/blocks/columns/settings.tsx
@@ -0,0 +1,82 @@
+import { SettingsColorPicker } from "@/components/settings/settings-color-picker";
+import { SettingsSection } from "@/components/settings/settings-section";
+import { SettingsSelect } from "@/components/settings/settings-select";
+import { SettingsSlider } from "@/components/settings/settings-slider";
+import { SettingsSwitch } from "@/components/settings/settings-switch";
+import { SettingsTextarea } from "@/components/settings/settings-textarea";
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { ColumnsBlockSettings } from "./types";
+
+export function ColumnsSettings({
+  block,
+  style,
+  updateBlock,
+}: BlockSettingsProps<ColumnsBlockSettings>) {
+  const set = (key: string, value: unknown) =>
+    updateBlock(block.id, { settings: { ...block.settings, [key]: value } });
+  const px = (value: string | undefined, fallback: number) =>
+    Number.parseInt(value || "", 10) || fallback;
+
+  return (
+    <div className="space-y-4">
+      <SettingsTextarea
+        label="Left column"
+        value={block.settings.left}
+        onChange={(value) => set("left", value)}
+        rows={5}
+      />
+      <SettingsTextarea
+        label="Right column"
+        value={block.settings.right}
+        onChange={(value) => set("right", value)}
+        rows={5}
+      />
+      <SettingsSelect
+        label="Widths"
+        value={block.settings.ratio || "11"}
+        onChange={(value) => set("ratio", value)}
+        options={[
+          { value: "11", label: "Equal" },
+          { value: "12", label: "Narrow, wide" },
+          { value: "21", label: "Wide, narrow" },
+        ]}
+        defaultValue="11"
+      />
+      <SettingsSwitch
+        label="Stack on small screens"
+        checked={block.settings.stack ?? true}
+        onCheckedChange={(value) => set("stack", value)}
+      />
+      <SettingsSection title="Block Settings">
+        <SettingsColorPicker
+          label="Background Color"
+          value={block.settings.backgroundColor || "transparent"}
+          onChange={(value) => set("backgroundColor", value)}
+          defaultValue="transparent"
+        />
+        <SettingsSlider
+          label="Padding Top"
+          value={px(
+            block.settings.paddingTop || style?.structure.section.padding?.y,
+            16,
+          )}
+          onChange={(value) => set("paddingTop", `${value}px`)}
+          min={0}
+          max={100}
+          defaultValue={px(style?.structure.section.padding?.y, 16)}
+        />
+        <SettingsSlider
+          label="Padding Bottom"
+          value={px(
+            block.settings.paddingBottom || style?.structure.section.padding?.y,
+            16,
+          )}
+          onChange={(value) => set("paddingBottom", `${value}px`)}
+          min={0}
+          max={100}
+          defaultValue={px(style?.structure.section.padding?.y, 16)}
+        />
+      </SettingsSection>
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/columns/types.ts b/packages/email-editor/src/blocks/columns/types.ts
new file mode 100644
index 00000000..0e2d573b
--- /dev/null
+++ b/packages/email-editor/src/blocks/columns/types.ts
@@ -0,0 +1,12 @@
+import type { CommonBlockSettings } from "@/types/email-editor";
+
+export type ColumnsRatio = "11" | "12" | "21";
+
+export interface ColumnsBlockSettings extends CommonBlockSettings {
+  left: string;
+  right: string;
+  ratio?: ColumnsRatio;
+  /** Stack the columns on narrow screens. Default: true */
+  stack?: boolean;
+  alignment?: "left" | "center" | "right";
+}
diff --git a/packages/email-editor/src/blocks/conditional/block.tsx b/packages/email-editor/src/blocks/conditional/block.tsx
new file mode 100644
index 00000000..68d7a46c
--- /dev/null
+++ b/packages/email-editor/src/blocks/conditional/block.tsx
@@ -0,0 +1,78 @@
+import { Section } from "@react-email/components";
+import { MarkdownContent } from "@/lib/markdown-content";
+import type { EmailBlock, EmailStyle } from "@/types/email-editor";
+import { type ConditionalBlockSettings, isValidConditionTag } from "./types";
+
+export function liquidCondition({ tag, has = true }: ConditionalBlockSettings) {
+  const keyword = has ? "if" : "unless";
+  return `{% ${keyword} subscriber.tags contains "${tag}" %}`;
+}
+
+export function ConditionalBlock({
+  block,
+  style,
+  showConditionals,
+}: {
+  block: EmailBlock & { settings: ConditionalBlockSettings };
+  style?: EmailStyle;
+  showConditionals?: boolean;
+}) {
+  const settings = block.settings;
+  const {
+    content = "",
+    backgroundColor = "transparent",
+    paddingTop = style?.structure.section.padding?.y,
+    paddingBottom = style?.structure.section.padding?.y,
+  } = settings;
+
+  const body = (
+    <div
+      style={{
+        backgroundColor,
+        color: style?.colors.foreground,
+        padding: `${paddingTop} ${style?.structure.section.padding?.x} ${paddingBottom} ${style?.structure.section.padding?.x}`,
+      }}
+    >
+      <MarkdownContent content={content} style={style} />
+    </div>
+  );
+
+  if (showConditionals) {
+    return (
+      <Section>
+        <div
+          style={{
+            margin: "0 8px",
+            border: "1.5px dashed #a3a3a3",
+            borderRadius: "8px",
+          }}
+        >
+          <div
+            style={{
+              padding: "6px 14px 0",
+              fontSize: "12px",
+              fontWeight: 600,
+              color: "#737373",
+            }}
+          >
+            {settings.has === false ? "Contacts without" : "Contacts tagged"}{" "}
+            {settings.tag ? `"${settings.tag}"` : "…"}
+          </div>
+          {body}
+        </div>
+      </Section>
+    );
+  }
+
+  // Never send a section whose condition can't be trusted: with a bad tag the
+  // content is dropped instead of reaching everyone.
+  if (!isValidConditionTag(settings.tag)) return null;
+
+  return (
+    <>
+      {liquidCondition(settings)}
+      <Section>{body}</Section>
+      {"{% end" + (settings.has === false ? "unless" : "if") + " %}"}
+    </>
+  );
+}
diff --git a/packages/email-editor/src/blocks/conditional/index.ts b/packages/email-editor/src/blocks/conditional/index.ts
new file mode 100644
index 00000000..c2ed5184
--- /dev/null
+++ b/packages/email-editor/src/blocks/conditional/index.ts
@@ -0,0 +1,21 @@
+import type { BlockComponent } from "@/types/block-registry";
+import { ConditionalBlock as block } from "./block";
+import { metadata } from "./metadata";
+import { ConditionalSettings as settings } from "./settings";
+import { ConditionalQuickEdit as quickEdit } from "./quick-edit";
+import type { ConditionalBlockSettings } from "./types";
+
+export { isValidConditionTag } from "./types";
+
+export const ConditionalBlock: BlockComponent<ConditionalBlockSettings> = {
+  block,
+  settings,
+  metadata,
+  quickEdit,
+  quickEditLayout: "column",
+  defaultSettings: () => ({
+    tag: "customer",
+    has: true,
+    content: "Thanks for being a customer. Here is **20% off** your next order.",
+  }),
+};
diff --git a/packages/email-editor/src/blocks/conditional/metadata.ts b/packages/email-editor/src/blocks/conditional/metadata.ts
new file mode 100644
index 00000000..b07b9e5b
--- /dev/null
+++ b/packages/email-editor/src/blocks/conditional/metadata.ts
@@ -0,0 +1,18 @@
+import { SquareDashed } from "lucide-react";
+import type { BlockMetadata } from "@/types/block-registry";
+
+export const metadata: BlockMetadata = {
+  name: "conditional",
+  displayName: "Section",
+  description: "Content only some contacts see, based on a tag",
+  icon: SquareDashed,
+  docs: {
+    settings: {
+      tag: "The contact tag to check. Letters, numbers, spaces, dots, dashes and underscores, up to 40 characters.",
+      has: "[Optional] true shows the section to contacts with the tag, false to contacts without it. Default: true",
+      content: "The markdown content of the section.",
+      backgroundColor:
+        "[Optional] The background color of the block. Format: #000000. Default: transparent",
+    },
+  },
+};
diff --git a/packages/email-editor/src/blocks/conditional/quick-edit.tsx b/packages/email-editor/src/blocks/conditional/quick-edit.tsx
new file mode 100644
index 00000000..75ec93eb
--- /dev/null
+++ b/packages/email-editor/src/blocks/conditional/quick-edit.tsx
@@ -0,0 +1,48 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { ConditionalBlockSettings } from "./types";
+
+export function ConditionalQuickEdit({
+  block,
+  updateBlock,
+}: BlockSettingsProps<ConditionalBlockSettings>) {
+  const set = (key: string, value: unknown) =>
+    updateBlock(block.id, { settings: { ...block.settings, [key]: value } });
+  const has = block.settings.has !== false;
+
+  return (
+    <>
+      <div className="row">
+        <fieldset className="sle-seg" aria-label="Who sees it">
+          <button
+            type="button"
+            className={has ? "on" : undefined}
+            onClick={() => set("has", true)}
+          >
+            Tagged
+          </button>
+          <button
+            type="button"
+            className={has ? undefined : "on"}
+            onClick={() => set("has", false)}
+          >
+            Not tagged
+          </button>
+        </fieldset>
+        <input
+          className="sle-in"
+          aria-label="Tag"
+          placeholder="Tag"
+          value={block.settings.tag ?? ""}
+          onChange={(event) => set("tag", event.target.value)}
+        />
+      </div>
+      <textarea
+        className="sle-in"
+        aria-label="Section text"
+        placeholder="What these contacts see"
+        value={block.settings.content ?? ""}
+        onChange={(event) => set("content", event.target.value)}
+      />
+    </>
+  );
+}
diff --git a/packages/email-editor/src/blocks/conditional/settings.tsx b/packages/email-editor/src/blocks/conditional/settings.tsx
new file mode 100644
index 00000000..fb4fc3df
--- /dev/null
+++ b/packages/email-editor/src/blocks/conditional/settings.tsx
@@ -0,0 +1,52 @@
+import { SettingsColorPicker } from "@/components/settings/settings-color-picker";
+import { SettingsInput } from "@/components/settings/settings-input";
+import { SettingsSelect } from "@/components/settings/settings-select";
+import { SettingsTextarea } from "@/components/settings/settings-textarea";
+import type { BlockSettingsProps } from "@/types/email-editor";
+import { type ConditionalBlockSettings, isValidConditionTag } from "./types";
+
+export function ConditionalSettings({
+  block,
+  updateBlock,
+}: BlockSettingsProps<ConditionalBlockSettings>) {
+  const set = (key: string, value: unknown) =>
+    updateBlock(block.id, { settings: { ...block.settings, [key]: value } });
+
+  return (
+    <div className="space-y-4">
+      <SettingsSelect
+        label="Show this section to"
+        value={block.settings.has === false ? "without" : "with"}
+        onChange={(value) => set("has", value === "with")}
+        options={[
+          { value: "with", label: "Contacts with the tag" },
+          { value: "without", label: "Contacts without the tag" },
+        ]}
+      />
+      <SettingsInput
+        label="Tag"
+        value={block.settings.tag}
+        placeholder="customer"
+        onChange={(value) => set("tag", value)}
+      />
+      {block.settings.tag && !isValidConditionTag(block.settings.tag) && (
+        <p className="text-xs text-destructive">
+          Use letters, numbers, spaces, dots, dashes or underscores (40 at most). Until
+          then this section is left out of the email.
+        </p>
+      )}
+      <SettingsTextarea
+        label="Content"
+        value={block.settings.content}
+        onChange={(value) => set("content", value)}
+        rows={6}
+      />
+      <SettingsColorPicker
+        label="Background Color"
+        value={block.settings.backgroundColor || "transparent"}
+        onChange={(value) => set("backgroundColor", value)}
+        defaultValue="transparent"
+      />
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/conditional/types.ts b/packages/email-editor/src/blocks/conditional/types.ts
new file mode 100644
index 00000000..1ab14fc6
--- /dev/null
+++ b/packages/email-editor/src/blocks/conditional/types.ts
@@ -0,0 +1,16 @@
+import type { CommonBlockSettings } from "@/types/email-editor";
+
+export interface ConditionalBlockSettings extends CommonBlockSettings {
+  /** The contact tag the section depends on. */
+  tag: string;
+  /** Show to contacts that have the tag (default) or to those that don't. */
+  has?: boolean;
+  content: string;
+}
+
+/** Tags go into a Liquid expression, so only plain words are accepted. */
+export const CONDITION_TAG_PATTERN = /^[A-Za-z0-9][A-Za-z0-9 _.-]{0,39}$/;
+
+export function isValidConditionTag(tag: unknown): tag is string {
+  return typeof tag === "string" && CONDITION_TAG_PATTERN.test(tag);
+}
diff --git a/packages/email-editor/src/blocks/html/block.tsx b/packages/email-editor/src/blocks/html/block.tsx
new file mode 100644
index 00000000..99eb5c4e
--- /dev/null
+++ b/packages/email-editor/src/blocks/html/block.tsx
@@ -0,0 +1,50 @@
+import { Section } from "@react-email/components";
+import type { EmailBlock } from "@/types/email-editor";
+import type { HtmlBlockSettings } from "./types";
+
+export function HtmlBlock({
+  block,
+  selectedBlockId,
+}: {
+  block: EmailBlock & { settings: HtmlBlockSettings };
+  selectedBlockId?: string | null;
+}) {
+  const { code = "" } = block.settings;
+
+  // The editor never runs a teammate's markup inside the dashboard; it shows
+  // the code instead. Sent emails and the hosted web version carry the HTML.
+  if (selectedBlockId !== undefined) {
+    return (
+      <Section>
+        <pre
+          style={{
+            margin: 0,
+            padding: "10px 12px",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            maxHeight: "140px",
+            overflow: "hidden",
+            fontFamily: "ui-monospace, Menlo, monospace",
+            fontSize: "12px",
+            border: "1px dashed #a3a3a3",
+            borderRadius: "6px",
+            background: "#f5f5f5",
+            color: "#404040",
+          }}
+        >
+          {code || "<!-- Your HTML here -->"}
+        </pre>
+      </Section>
+    );
+  }
+
+  return (
+    <Section>
+      <div
+        style={{ backgroundColor: block.settings.backgroundColor }}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: this block exists to send the team's own HTML; the editor shows the code instead of running it
+        dangerouslySetInnerHTML={{ __html: code }}
+      />
+    </Section>
+  );
+}
diff --git a/packages/email-editor/src/blocks/html/index.ts b/packages/email-editor/src/blocks/html/index.ts
new file mode 100644
index 00000000..9a9bfc30
--- /dev/null
+++ b/packages/email-editor/src/blocks/html/index.ts
@@ -0,0 +1,17 @@
+import type { BlockComponent } from "@/types/block-registry";
+import { HtmlBlock as block } from "./block";
+import { metadata } from "./metadata";
+import { HtmlSettings as settings } from "./settings";
+import { HtmlQuickEdit as quickEdit } from "./quick-edit";
+import type { HtmlBlockSettings } from "./types";
+
+export const HtmlBlock: BlockComponent<HtmlBlockSettings> = {
+  block,
+  settings,
+  metadata,
+  quickEdit,
+  quickEditLayout: "column",
+  defaultSettings: () => ({
+    code: '<p style="text-align:center">Your HTML here</p>',
+  }),
+};
diff --git a/packages/email-editor/src/blocks/html/metadata.ts b/packages/email-editor/src/blocks/html/metadata.ts
new file mode 100644
index 00000000..a95833ce
--- /dev/null
+++ b/packages/email-editor/src/blocks/html/metadata.ts
@@ -0,0 +1,14 @@
+import { Code } from "lucide-react";
+import type { BlockMetadata } from "@/types/block-registry";
+
+export const metadata: BlockMetadata = {
+  name: "html",
+  displayName: "HTML",
+  description: "Paste your own code",
+  icon: Code,
+  docs: {
+    settings: {
+      code: "Raw HTML sent as-is inside the email. Use inline styles and table layouts, since most email clients ignore scripts and external CSS.",
+    },
+  },
+};
diff --git a/packages/email-editor/src/blocks/html/quick-edit.tsx b/packages/email-editor/src/blocks/html/quick-edit.tsx
new file mode 100644
index 00000000..30a88c32
--- /dev/null
+++ b/packages/email-editor/src/blocks/html/quick-edit.tsx
@@ -0,0 +1,21 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { HtmlBlockSettings } from "./types";
+
+export function HtmlQuickEdit({
+  block,
+  updateBlock,
+}: BlockSettingsProps<HtmlBlockSettings>) {
+  return (
+    <textarea
+      className="sle-in"
+      aria-label="HTML"
+      spellCheck={false}
+      value={block.settings.code ?? ""}
+      onChange={(event) =>
+        updateBlock(block.id, {
+          settings: { ...block.settings, code: event.target.value },
+        })
+      }
+    />
+  );
+}
diff --git a/packages/email-editor/src/blocks/html/settings.tsx b/packages/email-editor/src/blocks/html/settings.tsx
new file mode 100644
index 00000000..fb587106
--- /dev/null
+++ b/packages/email-editor/src/blocks/html/settings.tsx
@@ -0,0 +1,26 @@
+import { SettingsTextarea } from "@/components/settings/settings-textarea";
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { HtmlBlockSettings } from "./types";
+
+export function HtmlSettings({
+  block,
+  updateBlock,
+}: BlockSettingsProps<HtmlBlockSettings>) {
+  return (
+    <div className="space-y-4">
+      <SettingsTextarea
+        label="HTML"
+        value={block.settings.code}
+        onChange={(value) =>
+          updateBlock(block.id, { settings: { ...block.settings, code: value } })
+        }
+        rows={12}
+        style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: "12px" }}
+      />
+      <p className="text-xs text-muted-foreground">
+        Sent exactly as written. Most email clients ignore scripts and external CSS, so
+        stick to inline styles and tables.
+      </p>
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/html/types.ts b/packages/email-editor/src/blocks/html/types.ts
new file mode 100644
index 00000000..b398a619
--- /dev/null
+++ b/packages/email-editor/src/blocks/html/types.ts
@@ -0,0 +1,5 @@
+import type { CommonBlockSettings } from "@/types/email-editor";
+
+export interface HtmlBlockSettings extends CommonBlockSettings {
+  code: string;
+}
diff --git a/packages/email-editor/src/blocks/image/index.ts b/packages/email-editor/src/blocks/image/index.ts
index e622cd14..2bea65ff 100644
--- a/packages/email-editor/src/blocks/image/index.ts
+++ b/packages/email-editor/src/blocks/image/index.ts
@@ -1,6 +1,7 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { ImageBlock as block } from "./block";
 import { metadata } from "./metadata";
+import { ImageQuickEdit } from "./quick-edit";
 import { ImageSettings as settings } from "./settings";
 import type { ImageBlockConfig, ImageBlockSettings } from "./types";
 
@@ -12,6 +13,7 @@ const baseImageBlock: BlockComponent<ImageBlockSettings> = {
   block,
   settings,
   metadata,
+  quickEdit: ImageQuickEdit,
   defaultSettings: () => ({
     src: "",
     alt: "Image",
@@ -32,6 +34,7 @@ export const ImageBlock: ConfigurableImageBlock = {
     return {
       ...baseImageBlock,
       settings: (props) => Settings({ ...props, uploader }),
+      quickEdit: (props) => ImageQuickEdit({ ...props, uploader }),
     };
   },
 };
diff --git a/packages/email-editor/src/blocks/image/quick-edit.tsx b/packages/email-editor/src/blocks/image/quick-edit.tsx
new file mode 100644
index 00000000..c56c26a9
--- /dev/null
+++ b/packages/email-editor/src/blocks/image/quick-edit.tsx
@@ -0,0 +1,48 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { ImageBlockSettings, UploadedImage, Uploader } from "./types";
+
+export function ImageQuickEdit({
+  block,
+  updateBlock,
+  uploader: UploaderComponent,
+}: BlockSettingsProps<ImageBlockSettings> & { uploader?: Uploader }) {
+  const merge = (image: Partial<UploadedImage>) =>
+    updateBlock(block.id, { settings: { ...block.settings, ...image } });
+  const label = block.settings.src ? "Change image" : "Choose image";
+  const chooseButton = (
+    <button
+      type="button"
+      className="sle-btn o"
+      style={{ height: 30 }}
+      onClick={
+        UploaderComponent
+          ? undefined
+          : () => {
+              const url = window.prompt("Enter image URL:", block.settings.src || "");
+              if (url !== null) merge({ src: url });
+            }
+      }
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <>
+      {UploaderComponent ? (
+        <UploaderComponent value={block.settings as UploadedImage} onChange={merge}>
+          {chooseButton}
+        </UploaderComponent>
+      ) : (
+        chooseButton
+      )}
+      <input
+        className="sle-in u"
+        aria-label="Alt text"
+        placeholder="Alt text: describe the image"
+        value={block.settings.alt ?? ""}
+        onChange={(event) => merge({ alt: event.target.value })}
+      />
+    </>
+  );
+}
diff --git a/packages/email-editor/src/blocks/index.ts b/packages/email-editor/src/blocks/index.ts
index 62ec09ee..5f86da95 100644
--- a/packages/email-editor/src/blocks/index.ts
+++ b/packages/email-editor/src/blocks/index.ts
@@ -10,3 +10,8 @@ export type {
 export { LinkBlock as Link } from "./link";
 export { SeparatorBlock as Separator } from "./separator";
 export { TextBlock as Text } from "./text";
+export { ColumnsBlock as Columns } from "./columns";
+export { ConditionalBlock as Conditional } from "./conditional";
+export { HtmlBlock as HtmlSnippet } from "./html";
+export { SocialBlock as Social } from "./social";
+export { SpacerBlock as Spacer } from "./spacer";
diff --git a/packages/email-editor/src/blocks/link/index.ts b/packages/email-editor/src/blocks/link/index.ts
index 1037b806..d3d02191 100644
--- a/packages/email-editor/src/blocks/link/index.ts
+++ b/packages/email-editor/src/blocks/link/index.ts
@@ -1,6 +1,7 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { LinkBlock as block } from "./block";
 import { metadata } from "./metadata";
+import { LinkQuickEdit as quickEdit } from "./quick-edit";
 import { LinkSettings as settings } from "./settings";
 import type { LinkBlockSettings } from "./types";
 
@@ -8,6 +9,7 @@ export const LinkBlock: BlockComponent<LinkBlockSettings> = {
   block,
   settings,
   metadata,
+  quickEdit,
   defaultSettings: () => ({
     text: "Link Text",
     url: "#",
diff --git a/packages/email-editor/src/blocks/link/quick-edit.tsx b/packages/email-editor/src/blocks/link/quick-edit.tsx
new file mode 100644
index 00000000..dd5174e2
--- /dev/null
+++ b/packages/email-editor/src/blocks/link/quick-edit.tsx
@@ -0,0 +1,30 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { LinkBlockSettings } from "./types";
+
+export function LinkQuickEdit({
+  block,
+  updateBlock,
+}: BlockSettingsProps<LinkBlockSettings>) {
+  const set = (key: string, value: string) =>
+    updateBlock(block.id, { settings: { ...block.settings, [key]: value } });
+  const label = block.settings.isButton ? "Button" : "Link";
+
+  return (
+    <>
+      <input
+        className="sle-in"
+        aria-label={`${label} text`}
+        placeholder="Label"
+        value={block.settings.text ?? ""}
+        onChange={(event) => set("text", event.target.value)}
+      />
+      <input
+        className="sle-in mono u"
+        aria-label={`${label} link`}
+        placeholder="https://"
+        value={block.settings.url ?? ""}
+        onChange={(event) => set("url", event.target.value)}
+      />
+    </>
+  );
+}
diff --git a/packages/email-editor/src/blocks/social/block.tsx b/packages/email-editor/src/blocks/social/block.tsx
new file mode 100644
index 00000000..6f913af0
--- /dev/null
+++ b/packages/email-editor/src/blocks/social/block.tsx
@@ -0,0 +1,70 @@
+import { Link, Section } from "@react-email/components";
+import type { EmailBlock, EmailStyle } from "@/types/email-editor";
+import { SOCIAL_NETWORKS, type SocialBlockSettings } from "./types";
+
+function isWebUrl(url: string) {
+  return /^https?:\/\//i.test(url.trim());
+}
+
+export function SocialBlock({
+  block,
+  style,
+  selectedBlockId,
+}: {
+  block: EmailBlock & { settings: SocialBlockSettings };
+  style?: EmailStyle;
+  selectedBlockId?: string | null;
+}) {
+  const {
+    links = [],
+    alignment = "center",
+    backgroundColor = "transparent",
+    paddingTop = style?.structure.section.padding?.y,
+    paddingBottom = style?.structure.section.padding?.y,
+  } = block.settings;
+  const shown = links.filter((link) => isWebUrl(link.url));
+  const inEditor = selectedBlockId !== undefined;
+
+  // An empty block sends nothing; the editor keeps a hint so it stays findable.
+  if (shown.length === 0 && !inEditor) return null;
+
+  return (
+    <Section>
+      <div
+        style={{
+          backgroundColor,
+          textAlign: alignment,
+          padding: `${paddingTop} ${style?.structure.section.padding?.x} ${paddingBottom} ${style?.structure.section.padding?.x}`,
+        }}
+      >
+        {shown.length === 0 ? (
+          <span style={{ opacity: 0.5, fontSize: "14px" }}>
+            Add your social links in the block settings
+          </span>
+        ) : (
+          shown.map((link) => (
+            <Link
+              key={`${link.network}-${link.url}`}
+              href={link.url.trim()}
+              style={{
+                display: "inline-block",
+                margin: "0 4px 8px",
+                padding: "6px 14px",
+                border: `1px solid ${style?.colors.accent || "#0284c7"}`,
+                borderRadius: "999px",
+                color: style?.colors.accent || "#0284c7",
+                fontFamily: style?.typography.link.fontFamily || "Arial, sans-serif",
+                fontSize: "13px",
+                fontWeight: 600,
+                textDecoration: "none",
+              }}
+            >
+              {SOCIAL_NETWORKS.find((n) => n.value === link.network)?.label ??
+                link.network}
+            </Link>
+          ))
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/packages/email-editor/src/blocks/social/index.ts b/packages/email-editor/src/blocks/social/index.ts
new file mode 100644
index 00000000..4f6eae11
--- /dev/null
+++ b/packages/email-editor/src/blocks/social/index.ts
@@ -0,0 +1,18 @@
+import type { BlockComponent } from "@/types/block-registry";
+import { SocialBlock as block } from "./block";
+import { metadata } from "./metadata";
+import { SocialSettings as settings } from "./settings";
+import { SocialQuickEdit as quickEdit } from "./quick-edit";
+import type { SocialBlockSettings } from "./types";
+
+export const SocialBlock: BlockComponent<SocialBlockSettings> = {
+  block,
+  settings,
+  metadata,
+  quickEdit,
+  quickEditLayout: "column",
+  defaultSettings: () => ({
+    alignment: "center",
+    links: [{ network: "website", url: "" }],
+  }),
+};
diff --git a/packages/email-editor/src/blocks/social/metadata.ts b/packages/email-editor/src/blocks/social/metadata.ts
new file mode 100644
index 00000000..f4db63b9
--- /dev/null
+++ b/packages/email-editor/src/blocks/social/metadata.ts
@@ -0,0 +1,19 @@
+import { Share2 } from "lucide-react";
+import type { BlockMetadata } from "@/types/block-registry";
+
+export const metadata: BlockMetadata = {
+  name: "social",
+  displayName: "Social links",
+  description: "Your profiles, as buttons",
+  icon: Share2,
+  docs: {
+    settings: {
+      links:
+        "The profiles to link to, as a list of { network, url }. Network range: website, instagram, linkedin, youtube, x, facebook, tiktok. url must start with https:// or http://",
+      alignment:
+        "[Optional] The alignment of the links. Range: left, center, right. Default: center",
+      backgroundColor:
+        "[Optional] The background color of the block. Format: #000000. Default: transparent",
+    },
+  },
+};
diff --git a/packages/email-editor/src/blocks/social/quick-edit.tsx b/packages/email-editor/src/blocks/social/quick-edit.tsx
new file mode 100644
index 00000000..346e0aac
--- /dev/null
+++ b/packages/email-editor/src/blocks/social/quick-edit.tsx
@@ -0,0 +1,52 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import { SOCIAL_NETWORKS, type SocialBlockSettings, type SocialLink } from "./types";
+
+/** One row per network: tick it to show it, then give its link. */
+export function SocialQuickEdit({
+  block,
+  updateBlock,
+}: BlockSettingsProps<SocialBlockSettings>) {
+  const links = block.settings.links ?? [];
+  const setLinks = (next: SocialLink[]) =>
+    updateBlock(block.id, { settings: { ...block.settings, links: next } });
+
+  return (
+    <div className="rows">
+      {SOCIAL_NETWORKS.map((network) => {
+        const link = links.find((item) => item.network === network.value);
+        return (
+          <label key={network.value}>
+            <input
+              type="checkbox"
+              checked={Boolean(link)}
+              onChange={(event) =>
+                setLinks(
+                  event.target.checked
+                    ? [...links, { network: network.value, url: "" }]
+                    : links.filter((item) => item.network !== network.value),
+                )
+              }
+            />
+            <span>{network.label}</span>
+            <input
+              className="sle-in mono"
+              aria-label={`${network.label} link`}
+              placeholder="https://"
+              disabled={!link}
+              value={link?.url ?? ""}
+              onChange={(event) =>
+                setLinks(
+                  links.map((item) =>
+                    item.network === network.value
+                      ? { ...item, url: event.target.value }
+                      : item,
+                  ),
+                )
+              }
+            />
+          </label>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/social/settings.tsx b/packages/email-editor/src/blocks/social/settings.tsx
new file mode 100644
index 00000000..a04a40a0
--- /dev/null
+++ b/packages/email-editor/src/blocks/social/settings.tsx
@@ -0,0 +1,93 @@
+import { Plus, Trash2 } from "lucide-react";
+import { SettingsColorPicker } from "@/components/settings/settings-color-picker";
+import { SettingsInput } from "@/components/settings/settings-input";
+import { SettingsSelect } from "@/components/settings/settings-select";
+import { Button } from "@/components/ui/button";
+import type { BlockSettingsProps } from "@/types/email-editor";
+import { SOCIAL_NETWORKS, type SocialBlockSettings, type SocialLink } from "./types";
+
+export function SocialSettings({
+  block,
+  updateBlock,
+}: BlockSettingsProps<SocialBlockSettings>) {
+  const links = block.settings.links ?? [];
+  const set = (key: string, value: unknown) =>
+    updateBlock(block.id, { settings: { ...block.settings, [key]: value } });
+  const setLinks = (next: SocialLink[]) => set("links", next);
+  const unused = SOCIAL_NETWORKS.find(
+    (network) => !links.some((link) => link.network === network.value),
+  );
+
+  return (
+    <div className="space-y-4">
+      {links.map((link, index) => (
+        // Each network can be used once, so it identifies its row.
+        <div key={link.network} className="space-y-2 border-b pb-4">
+          <SettingsSelect
+            label={`Network ${index + 1}`}
+            value={link.network}
+            onChange={(value) =>
+              setLinks(
+                links.map((item, i) =>
+                  i === index
+                    ? { ...item, network: value as SocialLink["network"] }
+                    : item,
+                ),
+              )
+            }
+            options={SOCIAL_NETWORKS.filter(
+              (n) =>
+                n.value === link.network ||
+                !links.some((other) => other.network === n.value),
+            ).map((n) => ({ value: n.value, label: n.label }))}
+          />
+          <SettingsInput
+            label={`${SOCIAL_NETWORKS.find((n) => n.value === link.network)?.label ?? "Social"} link`}
+            value={link.url}
+            placeholder="https://"
+            onChange={(value) =>
+              setLinks(
+                links.map((item, i) => (i === index ? { ...item, url: value } : item)),
+              )
+            }
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setLinks(links.filter((_, i) => i !== index))}
+          >
+            <Trash2 className="mr-1 h-3 w-3" /> Remove
+          </Button>
+        </div>
+      ))}
+      {unused && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setLinks([...links, { network: unused.value, url: "" }])}
+        >
+          <Plus className="mr-1 h-3 w-3" /> Add a link
+        </Button>
+      )}
+      <SettingsSelect
+        label="Alignment"
+        value={block.settings.alignment || "center"}
+        onChange={(value) => set("alignment", value)}
+        options={[
+          { value: "left", label: "Left" },
+          { value: "center", label: "Center" },
+          { value: "right", label: "Right" },
+        ]}
+        defaultValue="center"
+      />
+      <SettingsColorPicker
+        label="Background Color"
+        value={block.settings.backgroundColor || "transparent"}
+        onChange={(value) => set("backgroundColor", value)}
+        defaultValue="transparent"
+      />
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/social/types.ts b/packages/email-editor/src/blocks/social/types.ts
new file mode 100644
index 00000000..5b8830f9
--- /dev/null
+++ b/packages/email-editor/src/blocks/social/types.ts
@@ -0,0 +1,21 @@
+import type { CommonBlockSettings } from "@/types/email-editor";
+
+export const SOCIAL_NETWORKS = [
+  { value: "website", label: "Website" },
+  { value: "instagram", label: "Instagram" },
+  { value: "linkedin", label: "LinkedIn" },
+  { value: "youtube", label: "YouTube" },
+  { value: "x", label: "X" },
+  { value: "facebook", label: "Facebook" },
+  { value: "tiktok", label: "TikTok" },
+] as const;
+
+export interface SocialLink {
+  network: (typeof SOCIAL_NETWORKS)[number]["value"];
+  url: string;
+}
+
+export interface SocialBlockSettings extends CommonBlockSettings {
+  links: SocialLink[];
+  alignment?: "left" | "center" | "right";
+}
diff --git a/packages/email-editor/src/blocks/spacer/block.tsx b/packages/email-editor/src/blocks/spacer/block.tsx
new file mode 100644
index 00000000..3a87c402
--- /dev/null
+++ b/packages/email-editor/src/blocks/spacer/block.tsx
@@ -0,0 +1,26 @@
+import { Section } from "@react-email/components";
+import type { EmailBlock } from "@/types/email-editor";
+import type { SpacerBlockSettings } from "./types";
+
+export function SpacerBlock({
+  block,
+}: {
+  block: EmailBlock & { settings: SpacerBlockSettings };
+}) {
+  const { height = "20px", backgroundColor = "transparent" } = block.settings;
+
+  return (
+    <Section>
+      <div
+        style={{
+          height,
+          lineHeight: height,
+          fontSize: "1px",
+          backgroundColor,
+        }}
+      >
+        &nbsp;
+      </div>
+    </Section>
+  );
+}
diff --git a/packages/email-editor/src/blocks/spacer/index.ts b/packages/email-editor/src/blocks/spacer/index.ts
new file mode 100644
index 00000000..dcaa775a
--- /dev/null
+++ b/packages/email-editor/src/blocks/spacer/index.ts
@@ -0,0 +1,14 @@
+import type { BlockComponent } from "@/types/block-registry";
+import { SpacerBlock as block } from "./block";
+import { metadata } from "./metadata";
+import { SpacerSettings as settings } from "./settings";
+import { SpacerQuickEdit as quickEdit } from "./quick-edit";
+import type { SpacerBlockSettings } from "./types";
+
+export const SpacerBlock: BlockComponent<SpacerBlockSettings> = {
+  block,
+  settings,
+  metadata,
+  quickEdit,
+  defaultSettings: () => ({ height: "20px" }),
+};
diff --git a/packages/email-editor/src/blocks/spacer/metadata.ts b/packages/email-editor/src/blocks/spacer/metadata.ts
new file mode 100644
index 00000000..2b3974b3
--- /dev/null
+++ b/packages/email-editor/src/blocks/spacer/metadata.ts
@@ -0,0 +1,16 @@
+import { MoveVertical } from "lucide-react";
+import type { BlockMetadata } from "@/types/block-registry";
+
+export const metadata: BlockMetadata = {
+  name: "spacer",
+  displayName: "Spacer",
+  description: "Extra breathing room between sections",
+  icon: MoveVertical,
+  docs: {
+    settings: {
+      height: "The empty space to add. Format: 20px. Range: 4-200. Default: 20px",
+      backgroundColor:
+        "[Optional] The background color of the spacer. Format: #000000. Default: transparent",
+    },
+  },
+};
diff --git a/packages/email-editor/src/blocks/spacer/quick-edit.tsx b/packages/email-editor/src/blocks/spacer/quick-edit.tsx
new file mode 100644
index 00000000..46312fe4
--- /dev/null
+++ b/packages/email-editor/src/blocks/spacer/quick-edit.tsx
@@ -0,0 +1,34 @@
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { SpacerBlockSettings } from "./types";
+
+const SIZES = [
+  ["Small", "8px"],
+  ["Medium", "20px"],
+  ["Large", "40px"],
+] as const;
+
+export function SpacerQuickEdit({
+  block,
+  updateBlock,
+}: BlockSettingsProps<SpacerBlockSettings>) {
+  const height = block.settings.height ?? "20px";
+
+  return (
+    <fieldset className="sle-seg" aria-label="Spacer height">
+      {SIZES.map(([label, value]) => (
+        <button
+          key={value}
+          type="button"
+          className={height === value ? "on" : undefined}
+          onClick={() =>
+            updateBlock(block.id, {
+              settings: { ...block.settings, height: value },
+            })
+          }
+        >
+          {label}
+        </button>
+      ))}
+    </fieldset>
+  );
+}
diff --git a/packages/email-editor/src/blocks/spacer/settings.tsx b/packages/email-editor/src/blocks/spacer/settings.tsx
new file mode 100644
index 00000000..ea228d81
--- /dev/null
+++ b/packages/email-editor/src/blocks/spacer/settings.tsx
@@ -0,0 +1,38 @@
+import { SettingsColorPicker } from "@/components/settings/settings-color-picker";
+import { SettingsSlider } from "@/components/settings/settings-slider";
+import type { BlockSettingsProps } from "@/types/email-editor";
+import type { SpacerBlockSettings } from "./types";
+
+export function SpacerSettings({
+  block,
+  updateBlock,
+}: BlockSettingsProps<SpacerBlockSettings>) {
+  const height = Number.parseInt(block.settings.height || "20", 10) || 20;
+
+  return (
+    <div className="space-y-4">
+      <SettingsSlider
+        label="Height"
+        value={height}
+        onChange={(value) =>
+          updateBlock(block.id, {
+            settings: { ...block.settings, height: `${value}px` },
+          })
+        }
+        min={4}
+        max={200}
+        defaultValue={20}
+      />
+      <SettingsColorPicker
+        label="Background Color"
+        value={block.settings.backgroundColor || "transparent"}
+        onChange={(value) =>
+          updateBlock(block.id, {
+            settings: { ...block.settings, backgroundColor: value },
+          })
+        }
+        defaultValue="transparent"
+      />
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/blocks/spacer/types.ts b/packages/email-editor/src/blocks/spacer/types.ts
new file mode 100644
index 00000000..9cb0fd35
--- /dev/null
+++ b/packages/email-editor/src/blocks/spacer/types.ts
@@ -0,0 +1,5 @@
+import type { CommonBlockSettings } from "@/types/email-editor";
+
+export interface SpacerBlockSettings extends CommonBlockSettings {
+  height?: `${number}px`;
+}
diff --git a/packages/email-editor/src/blocks/text/block.tsx b/packages/email-editor/src/blocks/text/block.tsx
index abb1ba9d..1c3efb7e 100644
--- a/packages/email-editor/src/blocks/text/block.tsx
+++ b/packages/email-editor/src/blocks/text/block.tsx
@@ -1,4 +1,5 @@
-import { Markdown, Section } from "@react-email/components";
+import { Section } from "@react-email/components";
+import { MarkdownContent } from "@/lib/markdown-content";
 import type { EmailBlock, EmailStyle } from "@/types/email-editor";
 import type { TextBlockSettings } from "./types";
 
@@ -22,27 +23,6 @@ export function TextBlock({ block, style, selectedBlockId }: TextBlockProps) {
   // Ensure there's always some content to make the block selectable
   const content = block.settings.content || (isSelected ? "" : "Text content");
 
-  // Common text styles to avoid repetition
-  const commonTextStyles = {
-    fontFamily:
-      block.settings.fontFamily ||
-      style?.typography.text.fontFamily ||
-      "Arial, sans-serif",
-    fontSize: block.settings.fontSize || style?.typography.text.fontSize || "16px",
-    lineHeight: block.settings.lineHeight || style?.typography.text.lineHeight || "1.5",
-    letterSpacing:
-      block.settings.letterSpacing || style?.typography.text.letterSpacing || "normal",
-    textTransform:
-      block.settings.textTransform || style?.typography.text.textTransform || "none",
-    textDecoration:
-      block.settings.textDecoration || style?.typography.text.textDecoration || "none",
-  };
-
-  const headerFontFamily =
-    block.settings.fontFamily ||
-    style?.typography.header.fontFamily ||
-    "Arial, sans-serif";
-
   return (
     <Section>
       <div
@@ -52,78 +32,19 @@ export function TextBlock({ block, style, selectedBlockId }: TextBlockProps) {
           padding: `${paddingTop} ${style?.structure.section.padding?.x} ${paddingBottom} ${style?.structure.section.padding?.x}`,
         }}
       >
-        <Markdown
-          markdownCustomStyles={{
-            h1: {
-              fontWeight: "bold",
-              fontSize: `${Math.max(parseInt(block.settings.fontSize || "16", 10) * 2, 32)}px`,
-              fontFamily: headerFontFamily,
-              margin: "16px 0 8px",
-            },
-            h2: {
-              fontWeight: "bold",
-              fontSize: `${Math.max(parseInt(block.settings.fontSize || "16", 10) * 1.5, 24)}px`,
-              fontFamily: headerFontFamily,
-              margin: "16px 0 8px",
-            },
-            h3: {
-              fontWeight: "bold",
-              fontSize: `${Math.max(parseInt(block.settings.fontSize || "16", 10) * 1.25, 20)}px`,
-              fontFamily: headerFontFamily,
-              margin: "16px 0 8px",
-            },
-            h4: {
-              fontWeight: "bold",
-              fontSize: `${Math.max(parseInt(block.settings.fontSize || "16", 10) * 1.125, 18)}px`,
-              fontFamily: headerFontFamily,
-              margin: "16px 0 8px",
-            },
-            h5: {
-              fontWeight: "bold",
-              fontSize: `${Math.max(parseInt(block.settings.fontSize || "16", 10) * 1.0625, 16)}px`,
-              fontFamily: headerFontFamily,
-              margin: "16px 0 8px",
-            },
-            h6: {
-              fontWeight: "bold",
-              fontSize: `${Math.max(parseInt(block.settings.fontSize || "16", 10) * 1.03125, 14)}px`,
-              fontFamily: headerFontFamily,
-              margin: "16px 0 8px",
-            },
-            p: {
-              ...commonTextStyles,
-              margin: "0 0 16px",
-            },
-            ul: {
-              ...commonTextStyles,
-              margin: "0 0 16px",
-              paddingLeft: "24px",
-              listStyleType: "disc",
-            },
-            ol: {
-              ...commonTextStyles,
-              margin: "0 0 16px",
-              paddingLeft: "24px",
-              listStyleType: "decimal",
-            },
-            li: {
-              ...commonTextStyles,
-              margin: "4px 0",
-            },
-            link: {
-              ...commonTextStyles,
-              color: style?.colors.accent || "inherit",
-            },
-          }}
-          markdownContainerStyles={{
-            fontFamily: block.settings.fontFamily || "Arial, sans-serif",
-            textAlign: block.settings.alignment || "left",
-            fontSize: block.settings.fontSize || "16px",
-            lineHeight: block.settings.lineHeight || "1.5",
+        <MarkdownContent
+          content={content}
+          style={style}
+          options={{
+            fontFamily: block.settings.fontFamily,
+            fontSize: block.settings.fontSize,
+            lineHeight: block.settings.lineHeight,
+            letterSpacing: block.settings.letterSpacing,
+            textTransform: block.settings.textTransform,
+            textDecoration: block.settings.textDecoration,
+            alignment: block.settings.alignment,
           }}
-        >
-          {content}
-        </Markdown>
+        />
       </div>
     </Section>
   );
diff --git a/packages/email-editor/src/components/add-block-button.tsx b/packages/email-editor/src/components/add-block-button.tsx
deleted file mode 100644
index 2d184fb5..00000000
--- a/packages/email-editor/src/components/add-block-button.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Plus } from "lucide-react";
-import { useState } from "react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { getInsertableBlocks } from "../lib/block-policy";
-import type { BlockRegistry } from "../types/block-registry";
-
-interface AddBlockButtonProps {
-  position: "above" | "below";
-  index: number;
-  addBlock: (blockType: string, index: number) => void;
-  blockRegistry: BlockRegistry;
-}
-
-export function AddBlockButton({
-  index,
-  addBlock,
-  blockRegistry,
-}: AddBlockButtonProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const blockTypes = getInsertableBlocks(blockRegistry).map((block) => ({
-    type: block.metadata.name,
-    icon: block.metadata.icon,
-    label: block.metadata.displayName,
-    description: block.metadata.description,
-  }));
-
-  const handleAddBlock = (blockType: string) => {
-    addBlock(blockType, index);
-    setIsOpen(false);
-  };
-
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className="bg-background border border-border rounded-full p-1 shadow-sm hover:border-primary/50 transition-colors"
-        >
-          <Plus className="h-3 w-3 text-muted-foreground" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-80 p-3"
-        side="bottom"
-        align="start"
-        sideOffset={8}
-        avoidCollisions={true}
-        collisionPadding={20}
-      >
-        <div className="grid grid-cols-2 gap-2">
-          {blockTypes.map((blockType) => (
-            <button
-              key={blockType.type}
-              type="button"
-              onClick={() => handleAddBlock(blockType.type)}
-              className="flex flex-col items-center p-3 hover:bg-accent rounded transition-colors border border-transparent hover:border-primary/40"
-            >
-              <div className="text-primary mb-1">
-                {blockType.icon && <blockType.icon className="w-5 h-5" />}
-              </div>
-              <span className="text-xs font-medium text-foreground">
-                {blockType.label}
-              </span>
-            </button>
-          ))}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/packages/email-editor/src/components/block-menu.tsx b/packages/email-editor/src/components/block-menu.tsx
new file mode 100644
index 00000000..2b4ba92d
--- /dev/null
+++ b/packages/email-editor/src/components/block-menu.tsx
@@ -0,0 +1,118 @@
+import type { MenuPlacement } from "../lib/menu-placement";
+import type { BlockChoice, EditorVariable } from "../types/editor-ui";
+
+/** The insert menu: a grid of text kinds and blocks, with merge tags below. */
+export function BlockMenu({
+  choices,
+  index,
+  onPick,
+  onHover,
+  variables = [],
+  onPickVariable,
+  placement,
+  header,
+}: {
+  choices: BlockChoice[];
+  /** Highlighted entry; choices first, then variables. */
+  index: number;
+  onPick: (choice: BlockChoice) => void;
+  onHover?: (index: number) => void;
+  variables?: EditorVariable[];
+  onPickVariable?: (variable: EditorVariable) => void;
+  placement?: MenuPlacement;
+  header?: string;
+}) {
+  return (
+    <div
+      className={`sle-menu grid${placement?.up ? " up" : ""}`}
+      style={placement && { maxHeight: placement.maxHeight }}
+      role="menu"
+      aria-label="Insert"
+      onMouseDown={(event) => event.preventDefault()}
+    >
+      {header && <div className="mh">{header}</div>}
+      <div className="sle-tiles">
+        {choices.length === 0 && <p className="empty">Nothing matches.</p>}
+        {choices.map((choice, i) => {
+          const Icon = choice.icon;
+          return (
+            <button
+              key={choice.id}
+              type="button"
+              role="menuitem"
+              className={i === index ? "first" : undefined}
+              onMouseEnter={() => onHover?.(i)}
+              onClick={() => onPick(choice)}
+            >
+              <span className="mi">
+                <Icon className="size-4" />
+              </span>
+              {choice.name}
+            </button>
+          );
+        })}
+      </div>
+      {variables.length > 0 && onPickVariable && (
+        <div className="pz">
+          <span className="mh">Merge tags</span>
+          <div className="sle-chips">
+            {variables.slice(0, 4).map((variable, i) => (
+              <button
+                key={variable.tag}
+                type="button"
+                className={`sle-chip${choices.length + i === index ? " first" : ""}`}
+                onClick={() => onPickVariable(variable)}
+              >
+                {variable.tag.replace(/[{}]/g, "").trim()}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Merge tags offered while typing `{{`. */
+export function VariableMenu({
+  variables,
+  index,
+  onPick,
+  onHover,
+  placement,
+}: {
+  variables: EditorVariable[];
+  index: number;
+  onPick: (variable: EditorVariable) => void;
+  onHover?: (index: number) => void;
+  placement?: MenuPlacement;
+}) {
+  return (
+    <div
+      className={`sle-menu${placement?.up ? " up" : ""}`}
+      style={placement && { maxHeight: placement.maxHeight }}
+      role="menu"
+      aria-label="Merge tags"
+      onMouseDown={(event) => event.preventDefault()}
+    >
+      <div className="mh">Insert a merge tag</div>
+      {variables.map((variable, i) => (
+        <button
+          key={variable.tag}
+          type="button"
+          role="menuitem"
+          className={i === index ? "first" : undefined}
+          onMouseEnter={() => onHover?.(i)}
+          onClick={() => onPick(variable)}
+        >
+          <span className="mt">
+            <b>
+              <code>{variable.tag.replace(/[{}]/g, "").trim()}</code>
+            </b>
+            <em>{variable.description}</em>
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/components/block-row.tsx b/packages/email-editor/src/components/block-row.tsx
new file mode 100644
index 00000000..9968676b
--- /dev/null
+++ b/packages/email-editor/src/components/block-row.tsx
@@ -0,0 +1,281 @@
+import {
+  ArrowDown,
+  ArrowUp,
+  Copy,
+  GripVertical,
+  Lock,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import type { CSSProperties, DragEvent, ReactNode } from "react";
+import type { BlockRegistry } from "../types/block-registry";
+import type { EmailBlock, EmailStyle } from "../types/email-editor";
+
+export interface RowEvents {
+  onOpenInsert: (id: string) => void;
+  onGripClick: (id: string) => void;
+  onMove: (id: string, direction: "up" | "down") => void;
+  onDragStart: (id: string) => void;
+  onDragOver: (id: string, edge: "before" | "after") => void;
+  onDrop: () => void;
+  onDragEnd: () => void;
+}
+
+/** The insert and drag handles beside a row while writing. */
+function Gutter({
+  id,
+  canAddBelow,
+  movable,
+  events,
+}: {
+  id: string;
+  canAddBelow: boolean;
+  movable: boolean;
+  events: RowEvents;
+}) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: keeps gutter clicks off the canvas
+    <div className="sle-gut" onClick={(event) => event.stopPropagation()}>
+      {canAddBelow && (
+        <button
+          type="button"
+          aria-label="Insert below"
+          title="Insert below"
+          onClick={() => events.onOpenInsert(id)}
+        >
+          <Plus className="size-3.5" />
+        </button>
+      )}
+      {movable && (
+        <button
+          type="button"
+          className="grip"
+          aria-label="Drag to move, or use the arrow keys"
+          title="Drag to move. Click to select."
+          draggable
+          onClick={() => events.onGripClick(id)}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+              event.preventDefault();
+              events.onMove(id, event.key === "ArrowUp" ? "up" : "down");
+            }
+          }}
+          onDragStart={(event) => {
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", id);
+            events.onDragStart(id);
+          }}
+          onDragEnd={events.onDragEnd}
+        >
+          <GripVertical className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function dropHandlers(id: string, events: RowEvents) {
+  return {
+    onDragOver: (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const rect = event.currentTarget.getBoundingClientRect();
+      events.onDragOver(
+        id,
+        event.clientY < rect.top + rect.height / 2 ? "before" : "after",
+      );
+    },
+    onDrop: (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      events.onDrop();
+    },
+  };
+}
+
+function rowClass(parts: (string | false | null | undefined)[]) {
+  return parts.filter(Boolean).join(" ");
+}
+
+/** A paragraph, heading, list item or quote while writing. */
+export function ItemRow({
+  id,
+  active,
+  dragging,
+  dropEdge,
+  canAddBelow,
+  movable,
+  style,
+  events,
+  children,
+  floating,
+}: {
+  id: string;
+  active: boolean;
+  dragging: boolean;
+  dropEdge: "before" | "after" | null;
+  canAddBelow: boolean;
+  movable: boolean;
+  style: CSSProperties;
+  events: RowEvents;
+  children: ReactNode;
+  floating?: ReactNode;
+}) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drop target for reordering
+    <div
+      className={rowClass([
+        "it",
+        "text",
+        active && "active",
+        dragging && "dragged",
+        dropEdge && `drop-${dropEdge}`,
+      ])}
+      data-block-id={id}
+      style={style}
+      {...dropHandlers(id, events)}
+    >
+      <Gutter id={id} canAddBelow={canAddBelow} movable={movable} events={events} />
+      {children}
+      {floating}
+    </div>
+  );
+}
+
+export interface BlockRowProps {
+  block: Required<EmailBlock>;
+  style: EmailStyle;
+  blockRegistry: BlockRegistry;
+  renderContext?: unknown;
+  mode: "write" | "style";
+  selected: boolean;
+  dragging: boolean;
+  dropEdge: "before" | "after" | null;
+  capabilities: {
+    canDelete: boolean;
+    canDuplicate: boolean;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    canAddBelow: boolean;
+    movable: boolean;
+  };
+  /** Rendered under the row: the insert menu or the block's quick settings. */
+  floating?: ReactNode;
+  events: RowEvents;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+  onDuplicate: (id: string) => void;
+}
+
+/** Any block shown as it renders: buttons, images, columns, a whole text block
+ * in Style mode, and blocks a host adds. Clicking selects it. */
+export function BlockRow(props: BlockRowProps) {
+  const {
+    block,
+    style,
+    blockRegistry,
+    renderContext,
+    mode,
+    selected,
+    capabilities,
+    events,
+  } = props;
+  const component = blockRegistry[block.blockType];
+  const label = component?.metadata.displayName ?? block.blockType;
+  const Block = component?.block;
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drop target for reordering
+    <div
+      className={rowClass([
+        "it",
+        "obj",
+        selected && "on",
+        props.dragging && "dragged",
+        props.dropEdge && `drop-${props.dropEdge}`,
+      ])}
+      data-block-id={block.id}
+      {...dropHandlers(block.id, events)}
+    >
+      {mode === "write" && (
+        <Gutter
+          id={block.id}
+          canAddBelow={capabilities.canAddBelow}
+          movable={capabilities.movable}
+          events={events}
+        />
+      )}
+      {Block ? (
+        <Block
+          block={block}
+          style={style}
+          selectedBlockId={selected ? block.id : null}
+          renderContext={renderContext}
+          showConditionals
+        />
+      ) : (
+        <div>Unknown block type: {block.blockType}</div>
+      )}
+      <button
+        type="button"
+        className="sle-hit"
+        aria-label={`Select: ${label}`}
+        onClick={(event) => {
+          event.stopPropagation();
+          props.onSelect(block.id);
+        }}
+      />
+
+      {selected && (
+        // biome-ignore lint/a11y/noStaticElementInteractions: keeps toolbar clicks off the canvas
+        <div className="sle-bar" onClick={(event) => event.stopPropagation()}>
+          {capabilities.canMoveUp && (
+            <button
+              type="button"
+              aria-label="Move up"
+              title="Move up"
+              onClick={() => events.onMove(block.id, "up")}
+            >
+              <ArrowUp className="size-3.5" />
+            </button>
+          )}
+          {capabilities.canMoveDown && (
+            <button
+              type="button"
+              aria-label="Move down"
+              title="Move down"
+              onClick={() => events.onMove(block.id, "down")}
+            >
+              <ArrowDown className="size-3.5" />
+            </button>
+          )}
+          {mode === "style" && capabilities.canDuplicate && (
+            <button
+              type="button"
+              aria-label="Duplicate"
+              title="Duplicate"
+              onClick={() => props.onDuplicate(block.id)}
+            >
+              <Copy className="size-3.5" />
+            </button>
+          )}
+          {mode === "style" && capabilities.canDelete && (
+            <button
+              type="button"
+              className="del"
+              aria-label="Delete"
+              title="Delete"
+              onClick={() => props.onDelete(block.id)}
+            >
+              <Trash2 className="size-3.5" />
+            </button>
+          )}
+          {!capabilities.canDelete && (
+            <span className="lock" title={`${label} is required and can't be removed`}>
+              <Lock className="size-3.5" />
+            </span>
+          )}
+        </div>
+      )}
+      {props.floating}
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/components/block-settings-panel.tsx b/packages/email-editor/src/components/block-settings-panel.tsx
deleted file mode 100644
index fe7d4c27..00000000
--- a/packages/email-editor/src/components/block-settings-panel.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { ChevronRight, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import type { BlockRegistry } from "../types/block-registry";
-import type {
-  Email,
-  EmailBlock,
-  EmailStyle,
-  RuntimeEmailBlock,
-} from "../types/email-editor";
-import { EmailSettings } from "./email-settings";
-
-interface BlockSettingsPanelProps {
-  blockId: string | null;
-  email: Email;
-  setSelectedBlockId: (id: string | null) => void;
-  blockRegistry: BlockRegistry;
-  updateEmail: (email: Email) => void;
-  updateEmailStyle: (style: Partial<EmailStyle>) => void;
-  updateBlock: (id: string, content: Partial<EmailBlock>) => void;
-}
-
-export function BlockSettingsPanel({
-  blockId,
-  email,
-  setSelectedBlockId,
-  blockRegistry,
-  updateEmail,
-  updateEmailStyle,
-  updateBlock,
-}: BlockSettingsPanelProps) {
-  if (!blockId) {
-    return (
-      <div className="flex flex-col h-full">
-        <div className="p-4 border-b flex justify-between items-center flex-shrink-0">
-          <h2 className="font-medium">Email Settings</h2>
-          <Button variant="ghost" size="icon" onClick={() => setSelectedBlockId(null)}>
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-        <div className="flex-1 overflow-y-auto p-4">
-          <EmailSettings
-            email={email}
-            updateEmail={updateEmail}
-            updateEmailStyle={updateEmailStyle}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  const block = email.content.find((b) => b.id === blockId) as
-    | RuntimeEmailBlock
-    | undefined;
-
-  if (!block) return null;
-
-  const blockComponent = blockRegistry[block.blockType];
-  if (!blockComponent) {
-    return (
-      <div className="flex flex-col h-full">
-        <div className="p-4 border-b flex justify-between items-center flex-shrink-0">
-          <h2 className="font-medium">Unknown Block</h2>
-          <Button variant="ghost" size="icon" onClick={() => setSelectedBlockId(null)}>
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-        <div className="p-4">
-          <p className="text-sm text-muted-foreground">
-            Block type &quot;{block.blockType}&quot; not found in registry.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  const SettingsComponent = blockComponent.settings;
-  const capitalizedBlockName = blockComponent.metadata.displayName;
-
-  const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    setSelectedBlockId(null);
-  };
-
-  const handleEmailBreadcrumbClick = () => {
-    setSelectedBlockId(null);
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="p-4 border-b flex justify-between items-center flex-shrink-0">
-        <div className="flex items-center">
-          <Button onClick={handleEmailBreadcrumbClick} className="" variant="ghost">
-            Email
-          </Button>
-          <ChevronRight className="h-4 w-4 mx-1 text-muted-foreground" />
-          <span className="font-medium">{capitalizedBlockName}</span>
-        </div>
-        <Button variant="ghost" size="icon" onClick={handleClose} type="button">
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-4">
-        <SettingsComponent
-          block={block}
-          style={email.style}
-          updateBlock={updateBlock}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/packages/email-editor/src/components/block-wrapper.tsx b/packages/email-editor/src/components/block-wrapper.tsx
deleted file mode 100644
index e3e5d1be..00000000
--- a/packages/email-editor/src/components/block-wrapper.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { ChevronDown, ChevronUp, Copy, Trash } from "lucide-react";
-import { useRef, useState } from "react";
-import type { EmailBlock, EmailStyle } from "@/types/email-editor";
-import type { BlockRegistry } from "../types/block-registry";
-import { AddBlockButton } from "./add-block-button";
-
-interface BlockWrapperProps {
-  block: Required<EmailBlock>;
-  index: number;
-  style?: EmailStyle;
-  blockRegistry: BlockRegistry;
-  renderContext?: unknown;
-  selectedBlockId: string | null;
-  setSelectedBlockId: (id: string | null) => void;
-  deleteBlock: (id: string) => void;
-  moveBlock: (id: string, direction: "up" | "down") => void;
-  duplicateBlock: (id: string) => void;
-  movingBlockId: string | null;
-  addBlock: (blockType: string, index: number) => void;
-  canDelete: boolean;
-  canDuplicate: boolean;
-  canMoveUp: boolean;
-  canMoveDown: boolean;
-  canAddBelow: boolean;
-}
-
-export function BlockWrapper({
-  block,
-  index,
-  style,
-  blockRegistry,
-  renderContext,
-  selectedBlockId,
-  setSelectedBlockId,
-  deleteBlock,
-  moveBlock,
-  duplicateBlock,
-  movingBlockId,
-  addBlock,
-  canDelete,
-  canDuplicate,
-  canMoveUp,
-  canMoveDown,
-  canAddBelow,
-}: BlockWrapperProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isControlsHovered, setIsControlsHovered] = useState(false);
-  const controlsRef = useRef<HTMLDivElement>(null);
-  const blockRef = useRef<HTMLDivElement>(null);
-
-  const isMoving = movingBlockId === block.id;
-  const isSelected = selectedBlockId === block.id;
-
-  // Handle showing controls when either the block or controls are hovered
-  const showControls = isHovered || isControlsHovered;
-
-  const handleBlockClick = () => {
-    setSelectedBlockId(block.id);
-  };
-
-  // Handle mouse enter/leave for the controls panel
-  const handleControlsMouseEnter = () => {
-    setIsControlsHovered(true);
-  };
-
-  const handleControlsMouseLeave = () => {
-    setIsControlsHovered(false);
-  };
-
-  const renderBlock = () => {
-    const blockComponent = blockRegistry[block.blockType];
-    if (!blockComponent) {
-      return <div>Unknown block type: {block.blockType}</div>;
-    }
-
-    const BlockComponent = blockComponent.block;
-    return (
-      <BlockComponent
-        block={block}
-        style={style}
-        selectedBlockId={selectedBlockId}
-        renderContext={renderContext}
-      />
-    );
-  };
-
-  // Check if we should show any controls at all
-  const hasAnyControls = canDelete || canDuplicate || canMoveUp || canMoveDown;
-
-  return (
-    <div
-      className={`relative transition-all duration-300 ease-in-out ${isMoving ? "scale-105 shadow-lg z-20" : ""} group`}
-      style={{
-        transform: isMoving ? "translateY(-2px)" : "translateY(0)",
-      }}
-    >
-      {/* Block content */}
-      <div
-        ref={blockRef}
-        className={`relative border-2 transition-all duration-200 ${
-          isSelected
-            ? "border-primary"
-            : showControls
-              ? "border-primary/60"
-              : "border-transparent"
-        } ${isMoving ? "border-primary/80 bg-primary/10" : ""}`}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        onClick={handleBlockClick}
-      >
-        {/* Block content */}
-        <div>{renderBlock()}</div>
-
-        {/* Bottom border with add button on hover */}
-        {canAddBelow && (
-          <div className="absolute left-0 right-0 bottom-0 z-10">
-            <div
-              className={`absolute -bottom-3 left-1/2 transform -translate-x-1/2 transition-opacity duration-200 ${
-                isHovered ? "opacity-100" : "opacity-0"
-              }`}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <AddBlockButton
-                position="below"
-                index={index + 1}
-                addBlock={addBlock}
-                blockRegistry={blockRegistry}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Control buttons overlay - positioned inside the block */}
-        {showControls && !isMoving && hasAnyControls && (
-          <div
-            ref={controlsRef}
-            className="absolute top-2 right-2 bg-background shadow-lg rounded-md border flex flex-row z-20"
-            onMouseEnter={handleControlsMouseEnter}
-            onMouseLeave={handleControlsMouseLeave}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {canDelete && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  deleteBlock(block.id);
-                }}
-                className="p-2 hover:bg-destructive/10 hover:text-destructive transition-colors rounded-l-md"
-                title="Delete block"
-              >
-                <Trash className="h-3 w-3 text-foreground" />
-              </button>
-            )}
-
-            {canDuplicate && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  duplicateBlock(block.id);
-                }}
-                className="p-2 hover:bg-accent hover:text-accent-foreground transition-colors"
-                title="Duplicate block"
-              >
-                <Copy className="h-3 w-3 text-foreground" />
-              </button>
-            )}
-
-            {canMoveUp && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  moveBlock(block.id, "up");
-                }}
-                className="p-2 hover:bg-accent hover:text-accent-foreground transition-colors"
-                title="Move up"
-                disabled={isMoving}
-              >
-                <ChevronUp className="h-3 w-3 text-foreground" />
-              </button>
-            )}
-
-            {canMoveDown && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  moveBlock(block.id, "down");
-                }}
-                className="p-2 hover:bg-accent hover:text-accent-foreground transition-colors rounded-r-md"
-                title="Move down"
-                disabled={isMoving}
-              >
-                <ChevronDown className="h-3 w-3 text-foreground" />
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* Moving indicator */}
-        {isMoving && (
-          <div className="absolute inset-0 bg-primary/10 border-2 border-primary/80 rounded-md pointer-events-none z-10">
-            <div className="absolute top-2 right-2 bg-primary text-primary-foreground px-2 py-1 rounded text-xs font-medium">
-              Moving...
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/email-editor/src/components/checklist.tsx b/packages/email-editor/src/components/checklist.tsx
new file mode 100644
index 00000000..2c080c60
--- /dev/null
+++ b/packages/email-editor/src/components/checklist.tsx
@@ -0,0 +1,129 @@
+import { AlertTriangle, CheckCircle2, ListChecks, XCircle } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { ChecklistItem } from "../lib/checklist";
+
+/** "Before you send": what to fix, one click to jump to it. */
+export function Checklist({
+  items,
+  label,
+  onJump,
+  onApplyFallback,
+}: {
+  items: ChecklistItem[];
+  label: string;
+  onJump: (target: ChecklistItem["target"]) => void;
+  /** Adds a fallback to every use of a merge tag. */
+  onApplyFallback: (path: string, value: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const ref = useRef<HTMLDivElement>(null);
+  const must = items.filter((item) => item.level === "must").length;
+  const state = must > 0 ? "bad" : items.length > 0 ? "warn" : "ok";
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (event: MouseEvent) => {
+      if (!ref.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [open]);
+
+  const Icon =
+    state === "bad" ? XCircle : state === "warn" ? AlertTriangle : CheckCircle2;
+
+  return (
+    <div className="sle-chkwrap" ref={ref}>
+      <button
+        type="button"
+        className={`sle-chkbtn ${state}`}
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <Icon className="size-3.5" />
+        {label}
+      </button>
+      {open && (
+        <div className="sle-chk" role="dialog" aria-label="Before you send">
+          <div className="hd">
+            <b>Before you send</b>
+            <span>
+              {state === "ok"
+                ? "Nothing needs fixing."
+                : "Fix the red ones first; the amber ones help you reach the inbox."}
+            </span>
+          </div>
+          {items.length === 0 ? (
+            <p className="ok">
+              <ListChecks className="size-4" /> Subject, preview text, links and images
+              look good.
+            </p>
+          ) : (
+            <ul>
+              {items.map((item) => {
+                const fallback = item.fallback;
+                const draft = fallback ? (drafts[fallback.path] ?? "") : "";
+                const apply = () => {
+                  if (!fallback || !draft.trim()) return;
+                  onApplyFallback(fallback.path, draft);
+                  setDrafts((current) => ({ ...current, [fallback.path]: "" }));
+                };
+                return (
+                  <li key={item.id} className={item.level}>
+                    {item.level === "must" ? (
+                      <XCircle className="ic size-4" />
+                    ) : (
+                      <AlertTriangle className="ic size-4" />
+                    )}
+                    <span className="tx">
+                      <b>{item.title}</b>
+                      <span>{item.detail}</span>
+                      {fallback && (
+                        <span className="fbrow">
+                          <input
+                            className="sle-in"
+                            aria-label={`Fallback for ${fallback.path}`}
+                            placeholder="e.g. there"
+                            value={draft}
+                            onChange={(event) =>
+                              setDrafts((current) => ({
+                                ...current,
+                                [fallback.path]: event.target.value,
+                              }))
+                            }
+                            onKeyDown={(event) => {
+                              if (event.key === "Enter") apply();
+                            }}
+                          />
+                          <button
+                            type="button"
+                            className="sle-btn o"
+                            disabled={!draft.trim()}
+                            onClick={apply}
+                          >
+                            Add fallback
+                          </button>
+                        </span>
+                      )}
+                    </span>
+                    <button
+                      type="button"
+                      className="sle-btn t"
+                      onClick={() => {
+                        setOpen(false);
+                        onJump(item.target);
+                      }}
+                    >
+                      {item.fixLabel}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/components/controls-bar.tsx b/packages/email-editor/src/components/controls-bar.tsx
new file mode 100644
index 00000000..e89bf07a
--- /dev/null
+++ b/packages/email-editor/src/components/controls-bar.tsx
@@ -0,0 +1,98 @@
+import { Monitor, Redo2, Smartphone, Undo2 } from "lucide-react";
+
+export function ControlsBar({
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  device,
+  onDevice,
+  sample,
+  onSample,
+  dark,
+  onDark,
+  words,
+}: {
+  canUndo: boolean;
+  canRedo: boolean;
+  onUndo: () => void;
+  onRedo: () => void;
+  device: "desktop" | "mobile";
+  onDevice: (device: "desktop" | "mobile") => void;
+  sample: boolean;
+  onSample: (on: boolean) => void;
+  dark: boolean;
+  onDark: (on: boolean) => void;
+  words: number;
+}) {
+  return (
+    <div
+      className="sle-ctl"
+      role="toolbar"
+      aria-label="Editor controls"
+      onClick={(event) => event.stopPropagation()}
+    >
+      <button
+        type="button"
+        className="sle-ib"
+        aria-label="Undo"
+        disabled={!canUndo}
+        onClick={onUndo}
+      >
+        <Undo2 className="size-4" />
+      </button>
+      <button
+        type="button"
+        className="sle-ib"
+        aria-label="Redo"
+        disabled={!canRedo}
+        onClick={onRedo}
+      >
+        <Redo2 className="size-4" />
+      </button>
+      <span className="sle-sep" />
+      <fieldset className="sle-seg" aria-label="Preview width">
+        <button
+          type="button"
+          className={device === "desktop" ? "on" : undefined}
+          aria-label="Desktop"
+          aria-pressed={device === "desktop"}
+          onClick={() => onDevice("desktop")}
+        >
+          <Monitor className="size-3.5" />
+        </button>
+        <button
+          type="button"
+          className={device === "mobile" ? "on" : undefined}
+          aria-label="Mobile"
+          aria-pressed={device === "mobile"}
+          onClick={() => onDevice("mobile")}
+        >
+          <Smartphone className="size-3.5" />
+        </button>
+      </fieldset>
+      <label className={`sle-sw${sample ? " on" : ""}`}>
+        <input
+          type="checkbox"
+          checked={sample}
+          onChange={(event) => onSample(event.target.checked)}
+        />
+        <span className="tr" />
+        Sample data
+      </label>
+      <label className={`sle-sw${dark ? " on" : ""}`}>
+        <input
+          type="checkbox"
+          checked={dark}
+          onChange={(event) => onDark(event.target.checked)}
+        />
+        <span className="tr" />
+        Dark inbox
+      </label>
+      <span className="sle-sep" />
+      <span className="wc">
+        {words} {words === 1 ? "word" : "words"}
+      </span>
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/components/doc-header.tsx b/packages/email-editor/src/components/doc-header.tsx
new file mode 100644
index 00000000..00096eea
--- /dev/null
+++ b/packages/email-editor/src/components/doc-header.tsx
@@ -0,0 +1,169 @@
+import { ChevronDown, ChevronUp, Smartphone } from "lucide-react";
+
+const SUBJECT_LIMIT = 60;
+
+function Initials({ name }: { name: string }) {
+  const letters = name
+    .split(/\s+/)
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  return <span className="av">{letters || "?"}</span>;
+}
+
+/** The inbox row a subscriber sees: sender, subject and preview text. */
+export function InboxRow({
+  senderName,
+  subject,
+  previewText,
+  width,
+}: {
+  senderName: string;
+  subject: string;
+  previewText: string;
+  width?: string;
+}) {
+  return (
+    <section className="sle-inbox" style={{ width }} aria-label="Inbox preview">
+      <Initials name={senderName} />
+      <b>{senderName}</b>
+      <time>10:42 AM</time>
+      <span className="ln">
+        <b>{subject || "(no subject)"}</b> <span>— </span>
+        {previewText ? <span>{previewText}</span> : <em>No preview text yet</em>}
+      </span>
+    </section>
+  );
+}
+
+/** Subject line and preview text, written above the email like a document title. */
+export function DocHeader({
+  paddingX,
+  onFieldFocus,
+  subject,
+  onSubjectChange,
+  previewText,
+  onPreviewTextChange,
+  senderName,
+  inboxOpen,
+  onToggleInbox,
+  onEnter,
+}: {
+  /** Matches the email's own side padding so text lines up with the blocks. */
+  paddingX?: string;
+  /** Writing in the subject or preview text clears the email's selection. */
+  onFieldFocus?: () => void;
+  /** Omitted when the host edits the subject elsewhere. */
+  subject?: string;
+  onSubjectChange?: (subject: string) => void;
+  previewText: string;
+  onPreviewTextChange: (text: string) => void;
+  senderName: string;
+  inboxOpen: boolean;
+  onToggleInbox: () => void;
+  /** Enter in the last field moves the caret into the email body. */
+  onEnter: () => void;
+}) {
+  const editable = subject !== undefined && onSubjectChange;
+  return (
+    <div
+      className="sle-doc-h"
+      style={paddingX ? { paddingLeft: paddingX, paddingRight: paddingX } : undefined}
+    >
+      {editable && (
+        <div className="fld">
+          <span className="tg">Subject</span>
+          <textarea
+            className="sle-subj"
+            rows={1}
+            aria-label="Subject line"
+            placeholder="Subject line"
+            data-sle-field="subject"
+            onFocus={onFieldFocus}
+            value={subject}
+            onChange={(event) =>
+              onSubjectChange(event.target.value.replace(/\n/g, " "))
+            }
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                document
+                  .querySelector<HTMLInputElement>("[data-sle-field=preview]")
+                  ?.focus();
+              }
+            }}
+          />
+        </div>
+      )}
+      <div className="fld">
+        <span className="tg">Preview text</span>
+        <input
+          className="sle-prev"
+          aria-label="Preview text"
+          placeholder="Preview text: the line shown after the subject in the inbox"
+          data-sle-field="preview"
+          onFocus={onFieldFocus}
+          value={previewText}
+          onChange={(event) => onPreviewTextChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" || event.key === "ArrowDown") {
+              event.preventDefault();
+              onEnter();
+            }
+          }}
+        />
+      </div>
+      <div className="sle-meta">
+        {editable && (
+          <span className={subject.trim().length > SUBJECT_LIMIT ? "warn" : undefined}>
+            {subject.trim().length}/{SUBJECT_LIMIT} characters
+          </span>
+        )}
+        <button
+          type="button"
+          className="lnk"
+          onClick={onToggleInbox}
+          aria-expanded={inboxOpen}
+        >
+          <Smartphone className="size-3.5" />
+          Preview in inbox
+          {inboxOpen ? (
+            <ChevronUp className="size-3.5" />
+          ) : (
+            <ChevronDown className="size-3.5" />
+          )}
+        </button>
+      </div>
+      {inboxOpen && (
+        <div className="sle-ibx">
+          <div className="pv phone">
+            <span className="cap">Phone</span>
+            <div className="card ph">
+              <Initials name={senderName} />
+              <div>
+                <div className="l1">
+                  <b>{senderName}</b>
+                  <time>10:42 AM</time>
+                </div>
+                <div className="sj">{subject || "(no subject)"}</div>
+                <div className="pt">{previewText || "No preview text yet"}</div>
+              </div>
+            </div>
+          </div>
+          <div className="pv">
+            <span className="cap">Desktop</span>
+            <div className="card dk">
+              <span className="fr">{senderName}</span>
+              <span className="ln">
+                <b>{subject || "(no subject)"}</b>{" "}
+                <span>— {previewText || "No preview text yet"}</span>
+              </span>
+              <time>10:42 AM</time>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/email-editor/src/components/email-editor.test.tsx b/packages/email-editor/src/components/email-editor.test.tsx
new file mode 100644
index 00000000..20fe167c
--- /dev/null
+++ b/packages/email-editor/src/components/email-editor.test.tsx
@@ -0,0 +1,274 @@
+import { afterAll, afterEach, beforeAll, describe, expect, it, mock } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import type { BlockComponent } from "../types/block-registry";
+import type { Email } from "../types/email-editor";
+
+if (!GlobalRegistrator.isRegistered)
+  GlobalRegistrator.register({ url: "http://localhost/" });
+
+const { act, cleanup, fireEvent, render, screen, within } = await import(
+  "@testing-library/react"
+);
+const { EmailEditor } = await import("../email-editor");
+const { defaultEmail } = await import("../lib/default-email");
+const { Image, Link, Separator, Text } = await import("../blocks");
+
+afterEach(() => cleanup());
+// Leave no DOM behind: the email renderer's tests need the real stream globals.
+afterAll(() => GlobalRegistrator.unregister());
+
+beforeAll(() => {
+  // happy-dom has no layout; menus ask where they fit.
+  Element.prototype.scrollIntoView = () => {};
+});
+
+/** A host's own block: a pull quote with a name and a line. */
+const PullQuote: BlockComponent<{ line: string; by?: string }> = {
+  block: ({ block }) => (
+    <div data-testid="pull-quote">
+      “{block.settings.line}” {block.settings.by}
+    </div>
+  ),
+  settings: ({ block, updateBlock }) => (
+    <input
+      aria-label="Quote line"
+      value={block.settings.line}
+      onChange={(event) =>
+        updateBlock(block.id, {
+          settings: { ...block.settings, line: event.target.value },
+        })
+      }
+    />
+  ),
+  quickEdit: ({ block, updateBlock }) => (
+    <input
+      aria-label="Quote by"
+      value={block.settings.by ?? ""}
+      onChange={(event) =>
+        updateBlock(block.id, {
+          settings: { ...block.settings, by: event.target.value },
+        })
+      }
+    />
+  ),
+  metadata: {
+    name: "pull-quote",
+    displayName: "Pull quote",
+    description: "A line from a customer",
+    icon: () => null,
+    docs: { settings: {} },
+  },
+  defaultSettings: () => ({ line: "It just works" }),
+};
+
+function email(content: Email["content"]): Email {
+  return { ...defaultEmail, meta: { previewText: "Hi" }, content };
+}
+
+function mount(props: { email: Email; blocks?: BlockComponent[] }) {
+  const onChange = mock<(next: Email) => void>();
+  render(<EmailEditor email={props.email} onChange={onChange} blocks={props.blocks} />);
+  const last = () => onChange.mock.calls.at(-1)?.[0] as Email;
+  return { onChange, last };
+}
+
+const openInsertMenu = () => {
+  fireEvent.click(screen.getAllByRole("button", { name: "Insert below" })[0]);
+  return screen.getByRole("menu", { name: "Insert" });
+};
+
+describe("hosts that mount their own blocks", () => {
+  it("works with only a custom block, offering nothing of ours", () => {
+    const { last } = mount({
+      email: email([
+        { blockType: "pull-quote", settings: { line: "Love it", by: "Ana" } },
+      ]),
+      blocks: [PullQuote],
+    });
+
+    expect(screen.getByTestId("pull-quote").textContent).toContain("Love it");
+    // Nothing to write in, so no prompt to keep writing.
+    expect(screen.queryByText(/Keep writing/)).toBeNull();
+
+    const menu = openInsertMenu();
+    const tiles = within(menu)
+      .getAllByRole("menuitem")
+      .map((tile) => tile.textContent);
+    expect(tiles).toEqual(["Pull quote"]);
+
+    fireEvent.click(within(menu).getByRole("menuitem", { name: "Pull quote" }));
+    expect(last().content).toEqual([
+      { blockType: "pull-quote", settings: { line: "Love it", by: "Ana" } },
+      { blockType: "pull-quote", settings: { line: "It just works" } },
+    ]);
+  });
+
+  it("edits a custom block through its own quick fields while writing", () => {
+    const { last } = mount({
+      email: email([{ blockType: "pull-quote", settings: { line: "Love it" } }]),
+      blocks: [PullQuote],
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Select: Pull quote" }));
+    const toolbar = screen.getByRole("toolbar", { name: "Pull quote settings" });
+    fireEvent.change(within(toolbar).getByLabelText("Quote by"), {
+      target: { value: "Bo" },
+    });
+    expect(last().content).toEqual([
+      { blockType: "pull-quote", settings: { line: "Love it", by: "Bo" } },
+    ]);
+  });
+
+  it("keeps working when our text block is left out", () => {
+    mount({
+      email: email([{ blockType: "separator", settings: {} }]),
+      blocks: [Image, Separator, PullQuote],
+    });
+    const tiles = within(openInsertMenu())
+      .getAllByRole("menuitem")
+      .map((tile) => tile.textContent);
+    expect(tiles).toEqual(["Image", "Divider", "Pull quote"]);
+    expect(tiles).not.toContain("Text");
+    expect(tiles).not.toContain("Button");
+  });
+
+  it("treats a host's own block named text as an ordinary block", () => {
+    const HostText: BlockComponent = {
+      ...PullQuote,
+      block: ({ block }) => <p data-testid="host-text">{block.settings.html}</p>,
+      metadata: { ...PullQuote.metadata, name: "text", displayName: "Rich text" },
+    };
+    const { last } = mount({
+      email: email([{ blockType: "text", settings: { html: "<b>Hi</b>\n\nThere" } }]),
+      blocks: [HostText],
+    });
+
+    // One block, not split into paragraphs, and selectable rather than typed into.
+    expect(screen.getAllByTestId("host-text")).toHaveLength(1);
+    expect(screen.queryByRole("textbox", { name: /Text/ })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Select: Rich text" }));
+    fireEvent.click(screen.getByRole("button", { name: "Duplicate" }));
+    expect(last().content).toEqual([
+      { blockType: "text", settings: { html: "<b>Hi</b>\n\nThere" } },
+      { blockType: "text", settings: { html: "<b>Hi</b>\n\nThere" } },
+    ]);
+  });
+
+  it("passes a custom block through untouched while text around it is edited", () => {
+    const { last } = mount({
+      email: email([
+        { blockType: "text", settings: { content: "First\n\nSecond" } },
+        { blockType: "pull-quote", settings: { line: "Keep me", extra: [1, 2] } },
+      ]),
+      blocks: [Text, Link, PullQuote],
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 2" }));
+    fireEvent.change(screen.getByRole("textbox", { name: "Text 2" }), {
+      target: { value: "Second, edited" },
+    });
+    expect(last().content).toEqual([
+      { blockType: "text", settings: { content: "First\n\nSecond, edited" } },
+      { blockType: "pull-quote", settings: { line: "Keep me", extra: [1, 2] } },
+    ]);
+  });
+});
+
+describe("writing paragraph by paragraph", () => {
+  const start = () =>
+    mount({
+      email: email([{ blockType: "text", settings: { content: "Hello world" } }]),
+      blocks: [Text, Link, Separator],
+    });
+
+  const editor = (name = /^Text/) =>
+    screen.getByRole("textbox", { name }) as HTMLTextAreaElement;
+
+  it("splits a paragraph on Enter and joins it back on Backspace", () => {
+    const { last } = start();
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    const first = editor();
+    first.setSelectionRange(5, 5);
+    fireEvent.keyDown(first, { key: "Enter" });
+    expect(last().content[0].settings.content).toBe("Hello\n\n world");
+
+    const second = editor();
+    expect(second.value).toBe(" world");
+    second.setSelectionRange(0, 0);
+    fireEvent.keyDown(second, { key: "Backspace" });
+    expect(last().content[0].settings.content).toBe("Hello world");
+  });
+
+  it("turns markdown shortcuts into headings and lists", () => {
+    const { last } = start();
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.change(editor(), {
+      target: { value: "## Hello world", selectionStart: 3 },
+    });
+    expect(last().content[0].settings.content).toBe("## Hello world");
+    expect(editor().value).toBe("Hello world");
+
+    // Backspace at the start of a heading makes it a paragraph again.
+    editor().setSelectionRange(0, 0);
+    fireEvent.keyDown(editor(), { key: "Backspace" });
+    expect(last().content[0].settings.content).toBe("Hello world");
+  });
+
+  it("continues a list on Enter and ends it on an empty item", () => {
+    const { last } = mount({
+      email: email([{ blockType: "text", settings: { content: "- one" } }]),
+      blocks: [Text],
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    editor().setSelectionRange(3, 3);
+    fireEvent.keyDown(editor(), { key: "Enter" });
+    fireEvent.change(editor(), { target: { value: "two" } });
+    expect(last().content[0].settings.content).toBe("- one\n- two");
+
+    editor().setSelectionRange(3, 3);
+    fireEvent.keyDown(editor(), { key: "Enter" });
+    fireEvent.keyDown(editor(), { key: "Enter" });
+    fireEvent.change(editor(), { target: { value: "After" } });
+    expect(last().content[0].settings.content).toBe("- one\n- two\n\nAfter");
+  });
+
+  it("deletes an empty paragraph after a button and selects the button", () => {
+    const { last } = mount({
+      email: email([
+        {
+          blockType: "link",
+          settings: { text: "Go", url: "https://x.co", isButton: true },
+        },
+        { blockType: "text", settings: { content: "" } },
+      ]),
+      blocks: [Text, Link],
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 2" }));
+    fireEvent.change(editor(), { target: { value: "x" } });
+    fireEvent.change(editor(), { target: { value: "" } });
+    editor().setSelectionRange(0, 0);
+    fireEvent.keyDown(editor(), { key: "Backspace" });
+    expect(last().content).toEqual([
+      {
+        blockType: "link",
+        settings: { text: "Go", url: "https://x.co", isButton: true },
+      },
+    ]);
+    expect(screen.getByRole("toolbar", { name: "Link settings" })).toBeTruthy();
+  });
+
+  it("splits a pasted run of paragraphs into items", async () => {
+    const { last } = start();
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    editor().setSelectionRange(11, 11);
+    await act(async () => {
+      fireEvent.paste(editor(), {
+        clipboardData: { getData: () => " first\n\n- second\nthird" },
+      });
+    });
+    expect(last().content[0].settings.content).toBe(
+      "Hello world first\n\n- second\n\nthird",
+    );
+    expect(screen.getByRole("status").textContent).toBe("Pasted 3 paragraphs");
+  });
+});
diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index 70d1ca72..e20c9f60 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -1,47 +1,64 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronRight, Copy, PenLine, SlidersHorizontal, Trash2 } from "lucide-react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { TextBlock as StandardTextRenderer } from "../blocks/text/block";
+import { getBlockChoices } from "../lib/block-choices";
 import {
   canDeleteBlock,
   canDuplicateBlock,
   canInsertAfter,
   canMoveBlock,
+  getBlockCapabilities,
   getDefaultBlockSettings,
+  reorderBlocks,
   resolveInsertionIndex,
 } from "../lib/block-policy";
+import { type ChecklistItem, checklistLabel, computeChecklist } from "../lib/checklist";
 import { defaultEmail } from "../lib/default-email";
+import { History } from "../lib/history";
+import { setFallback } from "../lib/inline-markdown";
+import { countWords } from "../lib/markdown-edit";
+import { type MenuPlacement, placeMenu } from "../lib/menu-placement";
 import { normalizeEmail } from "../lib/normalize-email";
+import { darkStyle } from "../lib/palettes";
+import {
+  explodeTextBlocks,
+  itemMarkdown,
+  mergeTextItems,
+  parseItem,
+  type Row,
+  splitMarkdown,
+  toRows,
+} from "../lib/text-items";
 import type { BlockRegistry } from "../types/block-registry";
 import type { Email, EmailBlock, EmailStyle } from "../types/email-editor";
-import { AddBlockButton } from "./add-block-button";
-import { BlockSettingsPanel } from "./block-settings-panel";
-import { BlockWrapper } from "./block-wrapper";
-import { EditorLayout } from "./layout/editor-layout";
+import type { BlockChoice, EditorTheme, EditorVariable } from "../types/editor-ui";
+import { BlockMenu } from "./block-menu";
+import { BlockRow, ItemRow, type RowEvents } from "./block-row";
+import { Checklist } from "./checklist";
+import { ControlsBar } from "./controls-bar";
+import { DocHeader, InboxRow } from "./doc-header";
+import { Inspector } from "./inspector";
+import { TextItem } from "./text-item";
 import "../index.css";
+import "../editor.css";
 
-// Simple ID generator
 function generateId() {
-  return Math.random().toString(36).substr(2, 9);
+  return Math.random().toString(36).slice(2, 11);
 }
 
-// Helper function to deep merge objects
 function deepMerge(target: any, source: any) {
   const output = { ...target };
-
   if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach((key) => {
-      if (isObject(source[key])) {
-        if (!(key in target)) {
-          Object.assign(output, { [key]: source[key] });
-        } else {
-          output[key] = deepMerge(target[key], source[key]);
-        }
+    for (const key of Object.keys(source)) {
+      if (isObject(source[key]) && key in target) {
+        output[key] = deepMerge(target[key], source[key]);
       } else {
-        Object.assign(output, { [key]: source[key] });
+        output[key] = source[key];
       }
-    });
+    }
   }
-
   return output;
 }
 
@@ -49,31 +66,60 @@ function isObject(item: any) {
   return item && typeof item === "object" && !Array.isArray(item);
 }
 
-function getEmailWithBlockIds(email: Email): Email {
-  const normalized = normalizeEmail(email);
-  return {
-    style: normalized.style,
-    meta: normalized.meta,
-    content: normalized.content.map((block) => ({
-      ...block,
-      id: generateId(),
-      settings: block.settings || {},
-    })),
-  };
+/** Paragraph-by-paragraph writing applies to SendLit's own text block, whose
+ * content is markdown. A host that leaves it out, or registers its own block
+ * under the `text` name, gets ordinary blocks it selects and edits in Style. */
+export function usesTextItems(blockRegistry: BlockRegistry): boolean {
+  return blockRegistry.text?.block === StandardTextRenderer;
 }
 
-function stripBlockIds(email: Email): Email {
-  return {
-    ...email,
-    content: email.content.map((block) => ({ ...block, id: undefined })),
-  };
+const TAG = /\{\{\s*([\w.]+)(?:\s*\|\s*default:\s*"([^"]*)")?\s*\}\}/g;
+
+/** Replaces merge tags with their sample values, for the "Sample data" preview. */
+function withSamples(block: EmailBlock, samples: Map<string, string>): EmailBlock {
+  const fill = (text: string) =>
+    text.replace(TAG, (whole, path: string) => samples.get(path) ?? whole);
+  const settings = { ...block.settings };
+  for (const key of ["content", "left", "right", "text"]) {
+    if (typeof settings[key] === "string") settings[key] = fill(settings[key]);
+  }
+  return { ...block, settings };
+}
+
+function blockWords(block: EmailBlock) {
+  const s = block.settings ?? {};
+  return [s.content, s.left, s.right].reduce<number>(
+    (sum, text) => sum + (typeof text === "string" ? countWords(text) : 0),
+    0,
+  );
 }
 
+const MOBILE_WIDTH = 375;
+
+/** How a block is named in messages such as "Button deleted". */
+function labelOf(block: EmailBlock, blockRegistry: BlockRegistry) {
+  if (block.blockType === "text" && block.group) return "Text";
+  if (block.blockType === "link" && block.settings?.isButton) return "Button";
+  return blockRegistry[block.blockType]?.metadata.displayName ?? "Block";
+}
+
+const isItem = (block: EmailBlock | undefined): boolean =>
+  block?.blockType === "text" && Boolean(block.group);
+
 interface EmailEditorProps {
   initialEmail?: Email;
   onChange?: (email: Email) => void;
   blockRegistry: BlockRegistry;
   renderContext?: unknown;
+  /** The subject line. Omit when the host edits it elsewhere. */
+  subject?: string;
+  onSubjectChange?: (subject: string) => void;
+  /** Merge tags offered while writing and in the Tags tab. */
+  variables?: EditorVariable[];
+  /** Shown as the sender in inbox previews. */
+  senderName?: string;
+  theme?: EditorTheme;
+  defaultMode?: "write" | "style";
 }
 
 export function EmailEditor({
@@ -81,321 +127,1108 @@ export function EmailEditor({
   onChange,
   blockRegistry,
   renderContext,
+  subject,
+  onSubjectChange,
+  variables = [],
+  senderName = "Your sender name",
+  theme = "sendlit",
+  defaultMode = "write",
 }: EmailEditorProps) {
-  const [email, setEmail] = useState<Email>(
-    getEmailWithBlockIds(initialEmail || defaultEmail),
-  );
-  const [movingBlockId, setMovingBlockId] = useState<string | null>(null);
-  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
-  const [showSettings] = useState(true);
-
-  // Tracks the last value this component itself emitted via onChange (with
-  // block ids stripped, matching the shape of `initialEmail`). This lets us
-  // distinguish a genuine external reset (e.g. a different record loaded by
-  // the parent) from the parent simply echoing our own change back down as
-  // a new `initialEmail` reference, which would otherwise regenerate all
-  // block ids and invalidate `selectedBlockId`.
+  const itemsOn = usesTextItems(blockRegistry);
+  const canWrite = Boolean(blockRegistry.text);
+
+  const load = useCallback(
+    (source: Email): Email => {
+      const normalized = normalizeEmail(source);
+      return {
+        style: normalized.style,
+        meta: normalized.meta,
+        content: itemsOn
+          ? explodeTextBlocks(normalized.content, generateId)
+          : normalized.content.map((block) => ({
+              ...block,
+              id: generateId(),
+              settings: block.settings || {},
+            })),
+      };
+    },
+    [itemsOn],
+  );
+
+  const [email, setEmail] = useState<Email>(() => load(initialEmail || defaultEmail));
+  const [mode, setMode] = useState<"write" | "style">(defaultMode);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [activeCaret, setActiveCaret] = useState<number | "end">("end");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [insertAfterId, setInsertAfterId] = useState<string | null>(null);
+  const [insertPlacement, setInsertPlacement] = useState<MenuPlacement>();
+  // Room for the quick settings popover: the visible height of the canvas.
+  const [popoverMax, setPopoverMax] = useState(480);
+  const [inspectorTab, setInspectorTab] = useState<"email" | "block" | "variables">(
+    "email",
+  );
+  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
+  const [sample, setSample] = useState(false);
+  const [darkInbox, setDarkInbox] = useState(false);
+  const [inboxOpen, setInboxOpen] = useState(false);
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [dropAt, setDropAt] = useState<{ id: string; edge: "before" | "after" } | null>(
+    null,
+  );
+  const [toast, setToast] = useState<string | null>(null);
+  const [, setHistoryVersion] = useState(0);
+
+  // Tracks the last value this component itself emitted via onChange, in the
+  // stored shape. This lets us tell a genuine external reset (another record
+  // loaded by the parent) from the parent echoing our own change back down,
+  // which would otherwise rebuild every item and lose the caret.
   const lastEmittedRef = useRef<Email | null>(null);
   const lastInitialEmailRef = useRef(initialEmail);
   const emailRef = useRef(email);
+  const historyRef = useRef(new History<Email>());
+  const rootRef = useRef<HTMLDivElement>(null);
+  const toastTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const choices = useMemo(() => getBlockChoices(blockRegistry), [blockRegistry]);
+
+  const flash = useCallback((message: string) => {
+    setToast(message);
+    clearTimeout(toastTimer.current);
+    toastTimer.current = setTimeout(() => setToast(null), 2600);
+  }, []);
+  useEffect(() => () => clearTimeout(toastTimer.current), []);
 
   // Keep the parent informed in the same event that changes editor state.
   // Deferring this to an effect leaves a window where an immediate Save can
   // observe the previous document.
-  const commitEmail = useCallback(
+  const publish = useCallback(
     (nextEmail: Email) => {
       emailRef.current = nextEmail;
       setEmail(nextEmail);
-
-      const emitted = stripBlockIds(nextEmail);
+      const emitted = mergeTextItems(nextEmail);
       lastEmittedRef.current = emitted;
       onChange?.(emitted);
     },
     [onChange],
   );
 
-  // Update email when initialEmail prop changes
+  const commitEmail = useCallback(
+    (nextEmail: Email, historyKey: string | null = null) => {
+      historyRef.current.record(emailRef.current, historyKey);
+      setHistoryVersion((version) => version + 1);
+      publish(nextEmail);
+    },
+    [publish],
+  );
+
+  const commitContent = useCallback(
+    (content: EmailBlock[], historyKey: string | null = null) =>
+      commitEmail({ ...emailRef.current, content }, historyKey),
+    [commitEmail],
+  );
+
   useEffect(() => {
-    if (!initialEmail || initialEmail === lastInitialEmailRef.current) {
-      return;
-    }
+    if (!initialEmail || initialEmail === lastInitialEmailRef.current) return;
     lastInitialEmailRef.current = initialEmail;
-
     const isEchoOfOwnChange =
       lastEmittedRef.current !== null &&
       JSON.stringify(lastEmittedRef.current) === JSON.stringify(initialEmail);
-    if (isEchoOfOwnChange) {
-      return;
-    }
-    const nextEmail = getEmailWithBlockIds(initialEmail);
+    if (isEchoOfOwnChange) return;
+
+    const nextEmail = load(initialEmail);
     emailRef.current = nextEmail;
+    historyRef.current.reset();
+    setHistoryVersion((version) => version + 1);
     setEmail(nextEmail);
-  }, [initialEmail]);
+    setActiveId(null);
+    setSelectedId(null);
+  }, [initialEmail, load]);
+
+  /** What a selection or an action in this mode stands for: in Style a text
+   * block is one row; while writing every item is its own row. */
+  const rowsOf = useCallback(
+    (content: EmailBlock[], inMode: "write" | "style"): Row[] =>
+      inMode === "style" && itemsOn
+        ? toRows(content, { keepEmpty: true })
+        : content.map((block, index) => ({
+            id: block.id!,
+            start: index,
+            end: index + 1,
+            block,
+          })),
+    [itemsOn],
+  );
+
+  // ---- email-wide edits ---------------------------------------------------
 
   const updateEmail = useCallback(
-    (newEmail: Email) => {
-      commitEmail(newEmail);
-    },
+    // The inspector edits style and meta; the blocks stay ours.
+    (next: Email) =>
+      commitEmail({ ...emailRef.current, style: next.style, meta: next.meta }, "email"),
     [commitEmail],
   );
 
   const updateEmailStyle = useCallback(
-    (styleUpdate: Partial<EmailStyle>) => {
-      const newEmail = {
-        ...emailRef.current,
-        style: deepMerge(emailRef.current.style, styleUpdate),
-      };
-      commitEmail(newEmail);
-    },
+    (styleUpdate: Partial<EmailStyle>) =>
+      commitEmail(
+        { ...emailRef.current, style: deepMerge(emailRef.current.style, styleUpdate) },
+        "style",
+      ),
     [commitEmail],
   );
 
-  const addBlock = useCallback(
-    (blockType: string, index: number) => {
+  /** Settings from a block's form. For a whole text block, the settings apply
+   * to all its items and new text is split into items again. */
+  const updateBlock = useCallback(
+    (id: string, partial: Partial<EmailBlock>) => {
+      const content = emailRef.current.content;
+      const row = rowsOf(content, mode).find((r) => r.id === id);
+      if (row && mode === "style" && isItem(content[row.start])) {
+        const items = content.slice(row.start, row.end);
+        const { content: markdown, ...shared } = partial.settings ?? {};
+        const group = items[0].group;
+        const changedText =
+          typeof markdown === "string" && markdown !== row.block.settings.content;
+        const nextItems = changedText
+          ? (splitMarkdown(markdown).length ? splitMarkdown(markdown) : [""]).map(
+              (unit, index) => ({
+                id: index === 0 ? items[0].id : generateId(),
+                blockType: "text",
+                group,
+                settings: { ...items[0].settings, ...shared, content: unit },
+              }),
+            )
+          : items.map((item) => ({
+              ...item,
+              settings: { ...item.settings, ...shared, content: item.settings.content },
+            }));
+        commitContent(
+          [...content.slice(0, row.start), ...nextItems, ...content.slice(row.end)],
+          `block:${id}`,
+        );
+        return;
+      }
+      commitContent(
+        content.map((block) => (block.id === id ? { ...block, ...partial } : block)),
+        `block:${id}`,
+      );
+    },
+    [commitContent, mode, rowsOf],
+  );
+
+  // ---- selection ----------------------------------------------------------
+
+  const activate = useCallback((id: string, caret: number | "end" = "end") => {
+    setSelectedId(null);
+    setInsertAfterId(null);
+    setActiveCaret(caret);
+    setActiveId(id);
+  }, []);
+
+  const select = useCallback(
+    (id: string) => {
+      setActiveId(null);
+      setInsertAfterId(null);
+      setSelectedId(id);
+      if (mode === "style") {
+        setInspectorTab("block");
+      } else {
+        const stage = rootRef.current?.querySelector(".sle-stage");
+        if (stage) setPopoverMax(Math.max(180, stage.clientHeight - 32));
+      }
+    },
+    [mode],
+  );
+
+  /** Puts the caret in an item, or selects any other block. */
+  const focusBlock = useCallback(
+    (id: string, caret: number | "end" = "end") => {
+      const block = emailRef.current.content.find((candidate) => candidate.id === id);
+      if (isItem(block)) activate(id, caret);
+      else select(id);
+    },
+    [activate, select],
+  );
+
+  // ---- inserting ----------------------------------------------------------
+
+  /** Adds any other block; `replaceId` swaps it in for an item. */
+  const insertBlock = useCallback(
+    (
+      blockType: string,
+      index: number,
+      settings: Record<string, unknown> = {},
+      replaceId?: string,
+    ): string | null => {
+      let content = emailRef.current.content;
+      let at = index;
+      if (replaceId) {
+        const from = content.findIndex((block) => block.id === replaceId);
+        if (from !== -1) {
+          content = content.filter((block) => block.id !== replaceId);
+          at = from;
+        }
+      }
       const insertionIndex = resolveInsertionIndex(
         blockType,
-        index,
-        emailRef.current.content,
+        at,
+        content,
         blockRegistry,
       );
-      if (insertionIndex === null) return;
-
-      const newBlock: EmailBlock = {
+      if (insertionIndex === null) return null;
+      const block: EmailBlock = {
         id: generateId(),
         blockType,
-        settings: getDefaultBlockSettings(blockType, blockRegistry),
+        settings: { ...getDefaultBlockSettings(blockType, blockRegistry), ...settings },
       };
-      const newEmail = {
-        ...emailRef.current,
-        content: [
-          ...emailRef.current.content.slice(0, insertionIndex),
-          newBlock,
-          ...emailRef.current.content.slice(insertionIndex),
-        ],
-      };
-
-      commitEmail(newEmail);
-      setSelectedBlockId(newBlock.id!);
+      commitContent([
+        ...content.slice(0, insertionIndex),
+        block,
+        ...content.slice(insertionIndex),
+      ]);
+      return block.id!;
     },
-    [blockRegistry, commitEmail],
+    [blockRegistry, commitContent],
   );
 
-  const updateBlock = useCallback(
-    (id: string, content: Partial<EmailBlock>) => {
-      const newEmail = {
-        ...emailRef.current,
-        content: emailRef.current.content.map((block) =>
-          block.id === id ? { ...block, ...content } : block,
-        ),
+  /** Adds a text item. Next to another item it joins that text block, so
+   * writing on stays one block rather than many. */
+  const insertText = useCallback(
+    (index: number, markdown: string): string | null => {
+      if (!itemsOn) return insertBlock("text", index, { content: markdown });
+      const content = emailRef.current.content;
+      const at = resolveInsertionIndex("text", index, content, blockRegistry);
+      if (at === null) return null;
+      const previous = content[at - 1];
+      const { content: _drop, ...settings } = isItem(previous)
+        ? previous!.settings
+        : {};
+      const item: EmailBlock = {
+        id: generateId(),
+        blockType: "text",
+        group: isItem(previous) ? previous!.group : generateId(),
+        settings: { ...settings, content: markdown },
       };
-      commitEmail(newEmail);
+      commitContent([...content.slice(0, at), item, ...content.slice(at)]);
+      return item.id!;
     },
-    [commitEmail],
+    [blockRegistry, commitContent, insertBlock, itemsOn],
+  );
+
+  /** Inserts what a menu offered at `index`, replacing `replaceId` if given. */
+  const insertChoice = useCallback(
+    (choice: BlockChoice, index: number, replaceId?: string) => {
+      if (choice.text !== undefined && itemsOn) {
+        const id = insertText(index, choice.text);
+        if (id) activate(id, "end");
+        return;
+      }
+      const type = choice.blockType ?? "text";
+      const settings =
+        choice.text !== undefined ? { content: choice.text } : choice.settings;
+      const id = insertBlock(type, index, settings, replaceId);
+      if (id) focusBlock(id);
+    },
+    [activate, focusBlock, insertBlock, insertText, itemsOn],
   );
 
-  // const updateBlockStyle = useCallback(
-  //     (id: string, style: Partial<Style>) => {
-  //         const newEmail = {
-  //             ...email,
-  //             content: email.content.map((block) => {
-  //                 if (block.id === id) {
-  //                     return {
-  //                         ...block,
-  //                         style: {
-  //                             ...(block.style || {}),
-  //                             ...style,
-  //                         },
-  //                     };
-  //                 }
-  //                 return block;
-  //             }),
-  //         };
-
-  //         setEmail(newEmail);
-
-  //         if (onChange) {
-  //             onChange(stripBlockIds(newEmail));
-  //         }
-  //     },
-  //     [email, onChange],
-  // );
+  // ---- whole-row actions --------------------------------------------------
 
   const deleteBlock = useCallback(
     (id: string) => {
-      const block = emailRef.current.content.find((candidate) => candidate.id === id);
-      if (!block || !canDeleteBlock(block, blockRegistry)) return;
-
-      const newEmail = {
-        ...emailRef.current,
-        content: emailRef.current.content.filter((block) => block.id !== id),
-      };
-
-      commitEmail(newEmail);
+      const content = emailRef.current.content;
+      const row = rowsOf(content, mode).find((r) => r.id === id);
+      if (!row || !canDeleteBlock(row.block, blockRegistry)) return;
+      commitContent([...content.slice(0, row.start), ...content.slice(row.end)]);
+      setActiveId((current) => (current === id ? null : current));
+      setSelectedId((current) => (current === id ? null : current));
+      flash(`${labelOf(row.block, blockRegistry)} deleted. Undo brings it back.`);
+    },
+    [blockRegistry, commitContent, flash, mode, rowsOf],
+  );
 
-      // If the deleted block was selected, clear selection
-      setSelectedBlockId((prevSelectedId) => {
-        if (prevSelectedId === id) {
-          return null;
-        }
-        return prevSelectedId;
-      });
+  const duplicateBlock = useCallback(
+    (id: string) => {
+      const content = emailRef.current.content;
+      const row = rowsOf(content, mode).find((r) => r.id === id);
+      if (!row || !canDuplicateBlock(row.block, blockRegistry)) return;
+      const group = generateId();
+      const copies = content.slice(row.start, row.end).map((block) => ({
+        ...block,
+        id: generateId(),
+        // A copied text block in Style is its own block; a copied item while
+        // writing stays part of the text it sits in.
+        ...(block.group && mode === "style" ? { group } : {}),
+      }));
+      commitContent([
+        ...content.slice(0, row.end),
+        ...copies,
+        ...content.slice(row.end),
+      ]);
+      if (mode === "style") select(copies[0].id!);
+      else focusBlock(copies[0].id!);
     },
-    [blockRegistry, commitEmail],
+    [blockRegistry, commitContent, focusBlock, mode, rowsOf, select],
+  );
+
+  const canMoveRow = useCallback(
+    (rows: Row[], id: string, direction: "up" | "down") =>
+      canMoveBlock(
+        rows.map((row) => ({ ...row.block, id: row.id })),
+        id,
+        direction,
+        blockRegistry,
+      ),
+    [blockRegistry],
   );
 
   const moveBlock = useCallback(
     (id: string, direction: "up" | "down") => {
-      if (!canMoveBlock(emailRef.current.content, id, direction, blockRegistry)) {
+      const content = emailRef.current.content;
+      const rows = rowsOf(content, mode);
+      const index = rows.findIndex((row) => row.id === id);
+      if (index === -1 || !canMoveRow(rows, id, direction)) return;
+      const other = rows[direction === "up" ? index - 1 : index + 1];
+      const row = rows[index];
+      const [first, second] = direction === "up" ? [row, other] : [other, row];
+      const lo = Math.min(row.start, other.start);
+      const hi = Math.max(row.end, other.end);
+      commitContent([
+        ...content.slice(0, lo),
+        ...content.slice(first.start, first.end),
+        ...content.slice(second.start, second.end),
+        ...content.slice(hi),
+      ]);
+    },
+    [canMoveRow, commitContent, mode, rowsOf],
+  );
+
+  const dropBlock = useCallback(() => {
+    if (dragId && dropAt) {
+      const content = emailRef.current.content;
+      const target = content.findIndex((block) => block.id === dropAt.id);
+      const reordered =
+        target === -1
+          ? null
+          : reorderBlocks(
+              content,
+              dragId,
+              dropAt.edge === "before" ? target : target + 1,
+              blockRegistry,
+            );
+      if (reordered) commitContent(reordered);
+    }
+    setDragId(null);
+    setDropAt(null);
+  }, [blockRegistry, commitContent, dragId, dropAt]);
+
+  // ---- writing ------------------------------------------------------------
+
+  const changeItem = useCallback(
+    (id: string, markdown: string) => {
+      const content = emailRef.current.content;
+      commitContent(
+        content.map((block) =>
+          block.id === id
+            ? { ...block, settings: { ...block.settings, content: markdown } }
+            : block,
+        ),
+        `text:${id}`,
+      );
+    },
+    [commitContent],
+  );
+
+  const splitItem = useCallback(
+    (id: string, before: string, after: string) => {
+      const content = emailRef.current.content;
+      const index = content.findIndex((block) => block.id === id);
+      const item = content[index];
+      if (!item) return;
+      const created: EmailBlock = {
+        ...item,
+        id: generateId(),
+        settings: { ...item.settings, content: after },
+      };
+      commitContent([
+        ...content.slice(0, index),
+        { ...item, settings: { ...item.settings, content: before } },
+        created,
+        ...content.slice(index + 1),
+      ]);
+      activate(created.id!, 0);
+    },
+    [activate, commitContent],
+  );
+
+  /** Backspace at the start of a paragraph: it joins the text above, or, when
+   * empty right after a button or image, goes away and selects that block. */
+  const mergeBack = useCallback(
+    (id: string) => {
+      const content = emailRef.current.content;
+      const index = content.findIndex((block) => block.id === id);
+      const item = content[index];
+      const previous = content[index - 1];
+      if (!item || !previous) return;
+      const { body } = parseItem(String(item.settings.content ?? ""));
+      if (isItem(previous)) {
+        const above = parseItem(String(previous.settings.content ?? ""));
+        commitContent([
+          ...content.slice(0, index - 1),
+          {
+            ...previous,
+            settings: {
+              ...previous.settings,
+              content: itemMarkdown(above.prefix, above.body + body),
+            },
+          },
+          ...content.slice(index + 1),
+        ]);
+        activate(previous.id!, above.body.length);
         return;
       }
-      const index = emailRef.current.content.findIndex((block) => block.id === id);
+      if (!body && canDeleteBlock(item, blockRegistry)) {
+        commitContent([...content.slice(0, index), ...content.slice(index + 1)]);
+        select(previous.id!);
+      }
+    },
+    [activate, blockRegistry, commitContent, select],
+  );
+
+  const navigate = useCallback(
+    (id: string, direction: "prev" | "next") => {
+      const content = emailRef.current.content;
+      const index = content.findIndex((block) => block.id === id);
+      const step = direction === "prev" ? -1 : 1;
+      for (let i = index + step; i >= 0 && i < content.length; i += step) {
+        if (isItem(content[i])) {
+          activate(content[i].id!, direction === "prev" ? "end" : 0);
+          return;
+        }
+      }
+    },
+    [activate],
+  );
 
-      const newContent = [...emailRef.current.content];
-      const [movedBlock] = newContent.splice(index, 1);
-      newContent.splice(direction === "up" ? index - 1 : index + 1, 0, movedBlock);
+  const pasteParagraphs = useCallback(
+    (id: string, parts: string[], before: string, after: string) => {
+      const content = emailRef.current.content;
+      const index = content.findIndex((block) => block.id === id);
+      const item = content[index];
+      if (!item) return;
+      const units = [before + parts[0], ...parts.slice(1)];
+      const last = parseItem(units[units.length - 1]);
+      units[units.length - 1] = itemMarkdown(last.prefix, last.body + after);
+      const items = units.map((unit, i) => ({
+        ...item,
+        id: i === 0 ? item.id : generateId(),
+        settings: { ...item.settings, content: unit },
+      }));
+      commitContent([
+        ...content.slice(0, index),
+        ...items,
+        ...content.slice(index + 1),
+      ]);
+      activate(items[items.length - 1].id!, last.body.length);
+      flash(`Pasted ${parts.length} paragraphs`);
+    },
+    [activate, commitContent, flash],
+  );
 
-      commitEmail({
-        ...emailRef.current,
-        content: newContent,
-      });
+  const applyFallback = useCallback(
+    (path: string, value: string) => {
+      commitContent(
+        emailRef.current.content.map((block) => {
+          const settings = { ...block.settings };
+          let changed = false;
+          for (const key of ["content", "left", "right", "text"]) {
+            if (typeof settings[key] === "string") {
+              const next = setFallback(settings[key], path, value);
+              if (next !== settings[key]) {
+                settings[key] = next;
+                changed = true;
+              }
+            }
+          }
+          return changed ? { ...block, settings } : block;
+        }),
+      );
+      flash(
+        value.trim()
+          ? `Fallback added to every ${path}`
+          : `Fallback removed from ${path}`,
+      );
+    },
+    [commitContent, flash],
+  );
 
-      // Set the moving block ID to trigger animation
-      setMovingBlockId(id);
+  // ---- history ------------------------------------------------------------
 
-      // Clear the moving block ID after animation completes
-      setTimeout(() => {
-        setMovingBlockId(null);
-      }, 350);
+  const restore = useCallback(
+    (snapshot: Email | undefined) => {
+      setHistoryVersion((version) => version + 1);
+      if (!snapshot) return;
+      publish(snapshot);
+      const ids = new Set(snapshot.content.map((block) => block.id));
+      setActiveId((current) => (current && ids.has(current) ? current : null));
+      setSelectedId((current) => (current && ids.has(current) ? current : null));
     },
-    [blockRegistry, commitEmail],
+    [publish],
+  );
+  const undo = useCallback(
+    () => restore(historyRef.current.undo(emailRef.current)),
+    [restore],
+  );
+  const redo = useCallback(
+    () => restore(historyRef.current.redo(emailRef.current)),
+    [restore],
   );
 
-  const duplicateBlock = useCallback(
-    (id: string) => {
-      const blockToDuplicate = emailRef.current.content.find(
-        (block) => block.id === id,
+  // Escape closes the insert menu from anywhere.
+  useEffect(() => {
+    if (!insertAfterId) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setInsertAfterId(null);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [insertAfterId]);
+
+  // Undo and redo work wherever focus is, unless a field of its own (the
+  // subject, a settings input, the host's own inputs) should undo instead.
+  // Deleting a block from its popover leaves focus on the page, not in here.
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      const mod = event.metaKey || event.ctrlKey;
+      if (!mod || event.altKey) return;
+      const key = event.key.toLowerCase();
+      if (key !== "z" && key !== "y") return;
+      const target = event.target as HTMLElement | null;
+      if (target?.closest("input, textarea, select, [contenteditable=true]")) return;
+      const inEditor = target ? rootRef.current?.contains(target) : false;
+      if (!inEditor && target !== document.body) return;
+      event.preventDefault();
+      if (key === "y" || event.shiftKey) redo();
+      else undo();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [redo, undo]);
+
+  // The quick settings popover opens under its block, which can be below the
+  // fold in a short window. Bring all of it into view.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only when the selection or mode changes
+  useEffect(() => {
+    if (mode !== "write" || !selectedId) return;
+    const timer = setTimeout(() => {
+      const popover = rootRef.current?.querySelector<HTMLElement>(".sle-pop");
+      popover?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      // Ready to type into the first field, so Escape and Tab work too.
+      const field = popover?.querySelector<HTMLElement>(
+        "input:not([type=checkbox]), textarea",
       );
-      if (!blockToDuplicate || !canDuplicateBlock(blockToDuplicate, blockRegistry)) {
+      (field ?? popover)?.focus({ preventScroll: true });
+    }, 60);
+    return () => clearTimeout(timer);
+  }, [selectedId, mode]);
+
+  const checklist = useMemo(
+    () => computeChecklist({ email, subject, canWrite }),
+    [email, subject, canWrite],
+  );
+
+  function jump(target: ChecklistItem["target"]) {
+    setMode("write");
+    setInsertAfterId(null);
+    setSelectedId(null);
+    setActiveId(null);
+    // Wait for the mode switch to render before moving focus.
+    setTimeout(() => {
+      if (target.type === "block") {
+        focusBlock(target.blockId);
+        rootRef.current
+          ?.querySelector(`[data-block-id="${target.blockId}"]`)
+          ?.scrollIntoView({ block: "center", behavior: "smooth" });
         return;
       }
+      const field = rootRef.current?.querySelector<HTMLElement>(
+        `[data-sle-field=${target.type}]`,
+      );
+      field?.scrollIntoView({ block: "center" });
+      field?.focus();
+    }, 30);
+  }
 
-      const index = emailRef.current.content.findIndex((block) => block.id === id);
-      const duplicatedBlock = {
-        ...blockToDuplicate,
-        id: generateId(),
-      };
+  function switchMode(next: "write" | "style") {
+    const rowId = selectedId ?? activeId;
+    setMode(next);
+    setActiveId(null);
+    setInsertAfterId(null);
+    if (next === "style") {
+      // The selected item stands for its whole text block in Style.
+      const row = rowId
+        ? rowsOf(emailRef.current.content, "style").find((r) =>
+            emailRef.current.content.slice(r.start, r.end).some((b) => b.id === rowId),
+          )
+        : undefined;
+      setSelectedId(row?.id ?? null);
+      setInspectorTab(row ? "block" : "email");
+    } else {
+      const block = emailRef.current.content.find((b) => b.id === rowId);
+      setSelectedId(block && !isItem(block) ? block.id! : null);
+    }
+  }
 
-      const newContent = [...emailRef.current.content];
-      newContent.splice(index + 1, 0, duplicatedBlock);
+  /** "Edit in Write" from the Style panel. */
+  function editInWrite(id: string) {
+    setMode("write");
+    setSelectedId(null);
+    setTimeout(() => focusBlock(id), 0);
+  }
 
-      const newEmail = {
-        ...emailRef.current,
-        content: newContent,
-      };
+  function deselect() {
+    setActiveId(null);
+    setSelectedId(null);
+    setInsertAfterId(null);
+  }
 
-      commitEmail(newEmail);
+  function writeAtEnd() {
+    const content = emailRef.current.content;
+    const end =
+      resolveInsertionIndex("text", content.length, content, blockRegistry) ??
+      content.length;
+    const last = content[end - 1];
+    // Keep writing in an empty last item instead of stacking blanks.
+    if (isItem(last) && !parseItem(String(last.settings.content ?? "")).body.trim()) {
+      activate(last.id!, "end");
+      return;
+    }
+    const id = insertText(end, "");
+    if (id) focusBlock(id, 0);
+  }
 
-      // Set the selection immediately after creating the duplicated block
-      setSelectedBlockId(duplicatedBlock.id!);
-    },
-    [blockRegistry, commitEmail],
+  function openInsert(id: string) {
+    setInsertPlacement(
+      placeMenu(rootRef.current?.querySelector(`[data-block-id="${id}"]`)),
+    );
+    setInsertAfterId((current) => (current === id ? null : id));
+  }
+
+  // ---- what the canvas shows ----------------------------------------------
+
+  const style = email.style;
+  const inStyle = mode === "style";
+  const shownStyle = inStyle && darkInbox ? darkStyle(style) : style;
+  const samples = useMemo(
+    () =>
+      new Map(
+        variables.flatMap((variable) =>
+          variable.sample
+            ? [[variable.tag.replace(/[{}]/g, "").trim(), variable.sample] as const]
+            : [],
+        ),
+      ),
+    [variables],
   );
+  const rows = rowsOf(email.content, mode);
+  const rowBlocks = rows.map(
+    (row) => ({ ...row.block, id: row.id }) as Required<EmailBlock>,
+  );
+  const pageWidth = Number.parseInt(style.structure.page.width || "600", 10) || 600;
+  const mailWidth = inStyle && device === "mobile" ? MOBILE_WIDTH : pageWidth;
+  const words = email.content.reduce((sum, block) => sum + blockWords(block), 0);
+  const previewText = email.meta.previewText ?? "";
+  const section = style.structure.section.padding;
+
+  // A pinned last block (the footer) stays below the place to keep writing.
+  const lastRow = rows[rows.length - 1];
+  const pinnedIndex =
+    lastRow &&
+    getBlockCapabilities(lastRow.block.blockType, blockRegistry).placement === "last"
+      ? rows.length - 1
+      : -1;
+  const writeMore =
+    mode === "write" && canWrite ? (
+      <button type="button" className="sle-trail" onClick={writeAtEnd}>
+        {activeId ? "" : "Keep writing, or press / for blocks"}
+      </button>
+    ) : null;
+
+  const rowEvents: RowEvents = {
+    onOpenInsert: openInsert,
+    onGripClick: (id) => focusBlock(id),
+    onMove: moveBlock,
+    onDragStart: (id) => {
+      setDragId(id);
+      setActiveId(null);
+      setInsertAfterId(null);
+    },
+    onDragOver: (id, edge) => {
+      if (id !== dragId) setDropAt({ id, edge });
+    },
+    onDrop: dropBlock,
+    onDragEnd: () => {
+      setDragId(null);
+      setDropAt(null);
+    },
+  };
 
-  // Email editor content - mirroring the HTML email structure
-  const editorContent = (
-    <div className="email-html">
-      {/* Body equivalent - Apply body styles here */}
+  function floatingFor(row: Row) {
+    if (insertAfterId === row.id) {
+      return (
+        <BlockMenu
+          choices={choices}
+          index={-1}
+          placement={insertPlacement}
+          header="Insert"
+          onPick={(choice) => {
+            setInsertAfterId(null);
+            insertChoice(choice, row.end);
+          }}
+          variables={variables}
+          onPickVariable={(variable) => {
+            setInsertAfterId(null);
+            const id = itemsOn
+              ? insertText(row.end, `${variable.tag} `)
+              : insertBlock("text", row.end, { content: `${variable.tag} ` });
+            if (id) focusBlock(id);
+          }}
+        />
+      );
+    }
+    const block = row.block;
+    const component = blockRegistry[block.blockType];
+    if (mode !== "write" || selectedId !== row.id || isItem(block) || !component)
+      return null;
+    const QuickEdit = component.quickEdit;
+    const column = component.quickEditLayout === "column";
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: a toolbar of mixed inputs and buttons has no native element
       <div
-        className="email-body"
-        style={{
-          backgroundColor: email.style.colors.background,
-          color: email.style.colors.foreground,
-          paddingTop: email.style.structure.page.marginY,
-          paddingBottom: email.style.structure.page.marginY,
-          fontFamily: email.style.typography.text.fontFamily,
+        className={`sle-pop${column ? " col" : ""}`}
+        role="toolbar"
+        tabIndex={-1}
+        aria-label={`${component.metadata.displayName} settings`}
+        style={{ maxHeight: popoverMax }}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setSelectedId(null);
+          }
         }}
       >
-        {/* Container equivalent - Apply container styles here */}
-        <div
-          className="email-container mx-auto"
-          style={{
-            width: "100%",
-            margin: `0px auto`,
-            backgroundColor: email.style.structure.page.background,
-            color:
-              email.style.structure.page.foreground || email.style.colors.foreground,
-            maxWidth: email.style.structure.page.width,
-            borderWidth: email.style.structure.page.borderWidth,
-            borderStyle: email.style.structure.page.borderStyle,
-            borderColor: email.style.colors.border,
-            borderRadius: "0px",
-            overflow: "hidden",
-          }}
-        >
-          {email.content.length === 0 && (
-            <div className="p-4 text-center">
-              <p className="mb-4 text-muted-foreground">Your email is empty.</p>
-              <AddBlockButton
-                position="below"
-                index={0}
-                addBlock={addBlock}
-                blockRegistry={blockRegistry}
-              />
-            </div>
+        {QuickEdit && (
+          <>
+            <QuickEdit
+              block={{ ...block, id: row.id } as Required<EmailBlock>}
+              style={style}
+              updateBlock={updateBlock}
+            />
+            {!column && <span className="sp" />}
+          </>
+        )}
+        <div className="acts">
+          <button
+            type="button"
+            className="sle-btn t"
+            style={{ height: 30, padding: "0 6px 0 10px" }}
+            title="Colours, spacing and layout"
+            onClick={() => switchMode("style")}
+          >
+            Style
+            <ChevronRight className="size-3.5" />
+          </button>
+          {canDuplicateBlock(block, blockRegistry) && (
+            <button
+              type="button"
+              className="sle-ib"
+              aria-label="Duplicate"
+              title="Duplicate"
+              onClick={() => duplicateBlock(row.id)}
+            >
+              <Copy className="size-4" />
+            </button>
+          )}
+          {canDeleteBlock(block, blockRegistry) && (
+            <button
+              type="button"
+              className="sle-ib del"
+              aria-label="Delete"
+              title="Delete"
+              onClick={() => deleteBlock(row.id)}
+            >
+              <Trash2 className="size-4" />
+            </button>
           )}
-
-          <div>
-            {email.content.map((block, index) => (
-              <BlockWrapper
-                key={block.id}
-                block={block as Required<EmailBlock>}
-                index={index}
-                style={email.style}
-                blockRegistry={blockRegistry}
-                renderContext={renderContext}
-                selectedBlockId={selectedBlockId}
-                setSelectedBlockId={setSelectedBlockId}
-                deleteBlock={deleteBlock}
-                moveBlock={moveBlock}
-                duplicateBlock={duplicateBlock}
-                movingBlockId={movingBlockId}
-                addBlock={addBlock}
-                canDelete={canDeleteBlock(block, blockRegistry)}
-                canDuplicate={canDuplicateBlock(block, blockRegistry)}
-                canMoveUp={canMoveBlock(email.content, block.id!, "up", blockRegistry)}
-                canMoveDown={canMoveBlock(
-                  email.content,
-                  block.id!,
-                  "down",
-                  blockRegistry,
-                )}
-                canAddBelow={canInsertAfter(block, blockRegistry)}
-              />
-            ))}
-          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 
-  // Settings panel
-  const settingsPanel = (
-    <BlockSettingsPanel
-      blockId={selectedBlockId}
-      email={email}
-      setSelectedBlockId={setSelectedBlockId}
-      blockRegistry={blockRegistry}
-      updateEmail={updateEmail}
-      updateEmailStyle={updateEmailStyle}
-      updateBlock={updateBlock}
-    />
-  );
+  /** One paragraph, heading, list item or quote while writing. */
+  function renderItem(row: Row, index: number) {
+    const item = row.block;
+    const content = email.content;
+    const before = content[row.start - 1];
+    const after = content[row.start + 1];
+    const sameGroup = (other: EmailBlock | undefined) =>
+      isItem(other) && other?.group === item.group;
+    const runStart = !sameGroup(before);
+    const runEnd = !sameGroup(after);
+    const parsed = parseItem(String(item.settings.content ?? ""));
+    const listKind = (block: EmailBlock | undefined) => {
+      if (!sameGroup(block)) return null;
+      const kind = parseItem(String(block?.settings.content ?? "")).kind;
+      return kind === "li" || kind === "ol" ? kind : null;
+    };
+    // Numbered lists count up from their first item, as markdown does.
+    let number = Number.parseInt(parsed.prefix, 10) || 1;
+    if (parsed.kind === "ol") {
+      let start = row.start;
+      while (listKind(content[start - 1]) === "ol") start--;
+      number =
+        (Number.parseInt(
+          parseItem(String(content[start].settings.content)).prefix,
+          10,
+        ) || 1) +
+        (row.start - start);
+    }
+    const settings = item.settings;
+    return (
+      <ItemRow
+        id={row.id}
+        active={activeId === row.id}
+        dragging={dragId === row.id}
+        dropEdge={dropAt?.id === row.id ? dropAt.edge : null}
+        canAddBelow={canInsertAfter(item, blockRegistry)}
+        movable={getBlockCapabilities("text", blockRegistry).movable}
+        events={rowEvents}
+        floating={floatingFor(row)}
+        style={{
+          paddingTop: runStart ? settings.paddingTop || section?.y : 0,
+          paddingBottom: runEnd ? settings.paddingBottom || section?.y : 0,
+          paddingLeft: section?.x,
+          paddingRight: section?.x,
+          backgroundColor: settings.backgroundColor,
+          color: settings.foregroundColor || shownStyle.colors.foreground,
+        }}
+      >
+        <TextItem
+          content={String(settings.content ?? "")}
+          settings={settings}
+          style={shownStyle}
+          active={activeId === row.id}
+          caret={activeCaret}
+          number={number}
+          listEnd={listKind(after) !== parsed.kind}
+          label={`Text ${index + 1}`}
+          variables={variables}
+          choices={choices}
+          onActivate={(caret) => activate(row.id, caret ?? "end")}
+          onChange={(markdown) => changeItem(row.id, markdown)}
+          onSplit={(a, b) => splitItem(row.id, a, b)}
+          onMergeBack={() => mergeBack(row.id)}
+          onNavigate={(direction) => navigate(row.id, direction)}
+          onInsertChoice={(choice) => insertChoice(choice, row.start, row.id)}
+          onPasteParagraphs={(parts, a, b) => pasteParagraphs(row.id, parts, a, b)}
+          onUndo={undo}
+          onRedo={redo}
+          onExit={() => setActiveId(null)}
+        />
+      </ItemRow>
+    );
+  }
+
+  function renderRow(row: Row, index: number) {
+    if (mode === "write" && isItem(row.block)) return renderItem(row, index);
+    const shown = (
+      sample && inStyle ? withSamples(row.block, samples) : row.block
+    ) as Required<EmailBlock>;
+    const capabilities = getBlockCapabilities(row.block.blockType, blockRegistry);
+    return (
+      <BlockRow
+        block={{ ...shown, id: row.id }}
+        style={shownStyle}
+        blockRegistry={blockRegistry}
+        renderContext={renderContext}
+        mode={mode}
+        selected={selectedId === row.id}
+        dragging={dragId === row.id}
+        dropEdge={dropAt?.id === row.id ? dropAt.edge : null}
+        capabilities={{
+          canDelete: canDeleteBlock(row.block, blockRegistry),
+          canDuplicate: canDuplicateBlock(row.block, blockRegistry),
+          canMoveUp: canMoveRow(rows, row.id, "up"),
+          canMoveDown: canMoveRow(rows, row.id, "down"),
+          canAddBelow: canInsertAfter(row.block, blockRegistry),
+          movable: capabilities.movable,
+        }}
+        floating={floatingFor(row)}
+        events={rowEvents}
+        onSelect={select}
+        onDelete={deleteBlock}
+        onDuplicate={duplicateBlock}
+      />
+    );
+  }
 
   return (
-    <EditorLayout
-      editor={editorContent}
-      settings={settingsPanel}
-      showSettings={showSettings}
-    />
+    <div ref={rootRef} className={`sle t-${theme}`}>
+      <div className={`sle-body ${mode}`}>
+        <div className="sle-wrap">
+          <div className="sle-mode">
+            <Checklist
+              items={checklist}
+              label={checklistLabel(checklist)}
+              onJump={jump}
+              onApplyFallback={applyFallback}
+            />
+            <fieldset className="sle-seg" aria-label="Mode">
+              <button
+                type="button"
+                className={mode === "write" ? "on" : undefined}
+                aria-pressed={mode === "write"}
+                onClick={() => switchMode("write")}
+              >
+                <PenLine className="size-3.5" />
+                Write
+              </button>
+              <button
+                type="button"
+                className={mode === "style" ? "on" : undefined}
+                aria-pressed={mode === "style"}
+                onClick={() => switchMode("style")}
+              >
+                <SlidersHorizontal className="size-3.5" />
+                Style
+              </button>
+            </fieldset>
+          </div>
+
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: clicking the canvas background clears the selection */}
+          <main className="sle-stage" aria-label="Email canvas" onClick={deselect}>
+            {inStyle && (
+              <>
+                <ControlsBar
+                  canUndo={historyRef.current.canUndo}
+                  canRedo={historyRef.current.canRedo}
+                  onUndo={undo}
+                  onRedo={redo}
+                  device={device}
+                  onDevice={setDevice}
+                  sample={sample}
+                  onSample={setSample}
+                  dark={darkInbox}
+                  onDark={setDarkInbox}
+                  words={words}
+                />
+                <InboxRow
+                  senderName={senderName}
+                  subject={subject ?? ""}
+                  previewText={previewText}
+                  width={`${mailWidth}px`}
+                />
+              </>
+            )}
+            <div
+              className="sle-canvas"
+              style={{ background: inStyle ? shownStyle.colors.background : undefined }}
+            >
+              {inStyle && (
+                <button
+                  type="button"
+                  className="sle-canvas-hit"
+                  aria-label="Email background and palette"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setSelectedId(null);
+                    setInspectorTab("email");
+                  }}
+                />
+              )}
+              {inStyle && <span className="sle-canvas-tag">Email background</span>}
+              {/* biome-ignore lint/a11y/noStaticElementInteractions: keeps clicks on the email from clearing the selection */}
+              <div
+                className={`sle-mail${activeId ? " typing" : ""}`}
+                onClick={(event) => event.stopPropagation()}
+                style={{
+                  width: inStyle ? mailWidth : "100%",
+                  maxWidth: inStyle ? undefined : mailWidth,
+                  background: shownStyle.structure.page.background,
+                  color:
+                    shownStyle.structure.page.foreground ||
+                    shownStyle.colors.foreground,
+                  fontFamily: shownStyle.typography.text.fontFamily,
+                  borderColor: shownStyle.colors.border,
+                  borderWidth: inStyle ? shownStyle.structure.page.borderWidth : 0,
+                  borderStyle: shownStyle.structure.page.borderStyle,
+                  borderRadius: inStyle ? shownStyle.structure.page.borderRadius : 0,
+                }}
+              >
+                {mode === "write" && (
+                  <DocHeader
+                    paddingX={section?.x}
+                    subject={subject}
+                    onSubjectChange={onSubjectChange}
+                    onFieldFocus={deselect}
+                    previewText={previewText}
+                    onPreviewTextChange={(text) =>
+                      commitEmail(
+                        {
+                          ...emailRef.current,
+                          meta: { ...emailRef.current.meta, previewText: text },
+                        },
+                        "preview",
+                      )
+                    }
+                    senderName={senderName}
+                    inboxOpen={inboxOpen}
+                    onToggleInbox={() => setInboxOpen((open) => !open)}
+                    onEnter={() => {
+                      const first = email.content.find(isItem);
+                      if (first) activate(first.id!, 0);
+                      else if (canWrite) writeAtEnd();
+                    }}
+                  />
+                )}
+                {rows.map((row, index) => (
+                  <Fragment key={row.id}>
+                    {index === pinnedIndex && writeMore}
+                    {renderRow(row, index)}
+                  </Fragment>
+                ))}
+                {pinnedIndex === -1 && writeMore}
+              </div>
+            </div>
+            {mode === "write" && (
+              <p className="sle-cap">Switch to Style to see it as readers will.</p>
+            )}
+          </main>
+        </div>
+
+        {inStyle && (
+          <Inspector
+            email={{ ...email, content: rowBlocks }}
+            selectedId={selectedId}
+            blockRegistry={blockRegistry}
+            variables={variables}
+            tab={inspectorTab}
+            onTab={setInspectorTab}
+            updateEmail={updateEmail}
+            updateEmailStyle={updateEmailStyle}
+            updateBlock={updateBlock}
+            onEditInWrite={editInWrite}
+            onCopied={(tag) => flash(`Copied ${tag}`)}
+          />
+        )}
+      </div>
+      {toast && (
+        <div className="sle-toast" role="status">
+          {toast}
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/packages/email-editor/src/components/inspector.tsx b/packages/email-editor/src/components/inspector.tsx
new file mode 100644
index 00000000..7c7ef490
--- /dev/null
+++ b/packages/email-editor/src/components/inspector.tsx
@@ -0,0 +1,217 @@
+import { Check, Copy, PenLine, Search } from "lucide-react";
+import { useState } from "react";
+import { activePalette, PALETTES, paletteStyle } from "../lib/palettes";
+import type { BlockRegistry } from "../types/block-registry";
+import type {
+  Email,
+  EmailBlock,
+  EmailStyle,
+  RuntimeEmailBlock,
+} from "../types/email-editor";
+import type { EditorVariable } from "../types/editor-ui";
+import { EmailSettings } from "./email-settings";
+
+type Tab = "email" | "block" | "variables";
+
+/** The Style panel: the email's look, the selected block, and merge tags. */
+export function Inspector({
+  email,
+  selectedId,
+  blockRegistry,
+  variables,
+  tab,
+  onTab,
+  updateEmail,
+  updateEmailStyle,
+  updateBlock,
+  onEditInWrite,
+  onCopied,
+}: {
+  email: Email;
+  selectedId: string | null;
+  blockRegistry: BlockRegistry;
+  variables: EditorVariable[];
+  tab: Tab;
+  onTab: (tab: Tab) => void;
+  updateEmail: (email: Email) => void;
+  updateEmailStyle: (style: Partial<EmailStyle>) => void;
+  updateBlock: (id: string, content: Partial<EmailBlock>) => void;
+  /** Back to writing, at the selected block. */
+  onEditInWrite: (id: string) => void;
+  onCopied: (tag: string) => void;
+}) {
+  const block = selectedId
+    ? (email.content.find((candidate) => candidate.id === selectedId) as
+        | RuntimeEmailBlock
+        | undefined)
+    : undefined;
+  const component = block ? blockRegistry[block.blockType] : undefined;
+  const Settings = component?.settings;
+  const tabs: [Tab, string][] = [
+    ["email", "Email"],
+    ["block", "Block"],
+    ["variables", "Tags"],
+  ];
+
+  return (
+    <aside className="sle-panel" aria-label="Style">
+      <div className="sle-ph">
+        <div className="sle-tabs" role="tablist">
+          {tabs.map(([id, label]) => (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              aria-selected={tab === id}
+              className={`sle-tab${tab === id ? " on" : ""}`}
+              onClick={() => onTab(id)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="sle-scroll">
+        {tab === "email" && (
+          <>
+            <div className="sle-sec">
+              <h3>Palette</h3>
+              <div className="sle-presets">
+                {PALETTES.map((palette) => (
+                  <button
+                    key={palette.name}
+                    type="button"
+                    className={`sle-preset${activePalette(email) === palette.name ? " on" : ""}`}
+                    onClick={() => updateEmailStyle(paletteStyle(palette))}
+                  >
+                    <span className="sw" style={{ background: palette.canvas }}>
+                      <span
+                        className="card"
+                        style={{
+                          background: palette.page,
+                          borderColor: palette.border,
+                        }}
+                      >
+                        <i className="a" style={{ background: palette.accent }} />
+                        <i style={{ background: palette.text, opacity: 0.5 }} />
+                      </span>
+                    </span>
+                    {palette.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <EmailSettings
+              email={email}
+              updateEmail={updateEmail}
+              updateEmailStyle={updateEmailStyle}
+            />
+          </>
+        )}
+        {tab === "block" &&
+          (block && component && Settings ? (
+            <>
+              <div className="sle-sel-h">
+                <component.metadata.icon className="size-4" />
+                <b>{component.metadata.displayName}</b>
+                <button
+                  type="button"
+                  className="sle-btn t"
+                  style={{ marginLeft: "auto", height: 28 }}
+                  onClick={() => onEditInWrite(block.id)}
+                >
+                  <PenLine className="size-3.5" />
+                  Edit in Write
+                </button>
+              </div>
+              <Settings block={block} style={email.style} updateBlock={updateBlock} />
+            </>
+          ) : (
+            <div className="sle-empty">
+              <b>Nothing selected</b>
+              Click a block in the email to change how it looks.
+            </div>
+          ))}
+        {tab === "variables" && (
+          <VariableList variables={variables} onCopied={onCopied} />
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function VariableList({
+  variables,
+  onCopied,
+}: {
+  variables: EditorVariable[];
+  onCopied: (tag: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [copied, setCopied] = useState<string | null>(null);
+  const shown = variables.filter((variable) =>
+    `${variable.tag} ${variable.description}`
+      .toLowerCase()
+      .includes(query.toLowerCase()),
+  );
+
+  async function copy(tag: string) {
+    try {
+      await navigator.clipboard.writeText(tag);
+      setCopied(tag);
+      onCopied(tag);
+      setTimeout(
+        () => setCopied((current) => (current === tag ? null : current)),
+        1500,
+      );
+    } catch {
+      // Clipboard access can be denied; the tag stays visible to copy by hand.
+    }
+  }
+
+  return (
+    <>
+      <p className="sle-hint">
+        Merge tags are replaced with each contact's details when the email is sent. Type{" "}
+        <code>{"{{"}</code> while writing to insert one.
+      </p>
+      <label className="sle-search" style={{ marginTop: 12 }}>
+        <Search className="size-3.5" />
+        <input
+          placeholder="Search tags"
+          aria-label="Search tags"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+      </label>
+      {shown.length === 0 ? (
+        <p className="sle-hint" style={{ marginTop: 12 }}>
+          {variables.length === 0 ? "This email has no merge tags." : "No tags match."}
+        </p>
+      ) : (
+        <ul className="sle-vars">
+          {shown.map((variable) => (
+            <li key={variable.tag} className="sle-var">
+              <code>{variable.tag}</code>
+              <span>{variable.description}</span>
+              <span className="acts">
+                <button
+                  type="button"
+                  className="sle-ib"
+                  aria-label={`Copy ${variable.tag}`}
+                  onClick={() => copy(variable.tag)}
+                >
+                  {copied === variable.tag ? (
+                    <Check className="size-3.5" />
+                  ) : (
+                    <Copy className="size-3.5" />
+                  )}
+                </button>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}
diff --git a/packages/email-editor/src/components/layout/editor-layout.tsx b/packages/email-editor/src/components/layout/editor-layout.tsx
deleted file mode 100644
index 19404c3b..00000000
--- a/packages/email-editor/src/components/layout/editor-layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { ReactNode } from "react";
-
-interface EditorLayoutProps {
-  editor: ReactNode;
-  settings?: ReactNode;
-  showSettings?: boolean;
-}
-
-export function EditorLayout({
-  editor,
-  settings,
-  showSettings = true,
-}: EditorLayoutProps) {
-  return (
-    <div className="h-full w-full bg-muted flex gap-4 p-4">
-      <div className="min-w-0 flex-1 rounded-xl border bg-background shadow-sm overflow-y-auto">
-        {editor}
-      </div>
-
-      {showSettings && settings && (
-        <div className="w-80 shrink-0 rounded-xl border bg-background shadow-sm overflow-y-auto">
-          {settings}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/packages/email-editor/src/components/text-item.tsx b/packages/email-editor/src/components/text-item.tsx
new file mode 100644
index 00000000..2c8da9c5
--- /dev/null
+++ b/packages/email-editor/src/components/text-item.tsx
@@ -0,0 +1,594 @@
+import {
+  Bold,
+  Braces,
+  Heading2,
+  Italic,
+  Link as LinkIcon,
+  List,
+  TextQuote,
+} from "lucide-react";
+import {
+  type ClipboardEvent,
+  type CSSProperties,
+  type KeyboardEvent,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { filterChoices } from "../lib/block-choices";
+import { placedSegments } from "../lib/inline-markdown";
+import {
+  insertVariable,
+  linkSelection,
+  type TextEdit,
+  variableTrigger,
+  wrapSelection,
+} from "../lib/markdown-edit";
+import { type MenuPlacement, placeMenu } from "../lib/menu-placement";
+import { type ItemKind, itemMarkdown, parseItem, SHORTCUTS } from "../lib/text-items";
+import type { EmailStyle } from "../types/email-editor";
+import type { BlockChoice, EditorVariable } from "../types/editor-ui";
+import { BlockMenu, VariableMenu } from "./block-menu";
+
+type Menu = { kind: "slash"; query: string } | { kind: "variable" } | null;
+
+const SLASH = /^\/([a-z0-9 ]{0,14})$/i;
+
+/** How an item looks, following the email's typography and the markdown
+ * renderer's spacing, so writing looks like the email that is sent. */
+export function itemStyle(
+  kind: ItemKind,
+  settings: Record<string, any>,
+  style: EmailStyle | undefined,
+  { listEnd }: { listEnd: boolean },
+): CSSProperties {
+  const size =
+    Number.parseInt(settings.fontSize || style?.typography.text.fontSize || "16", 10) ||
+    16;
+  const heading = kind === "h1" || kind === "h2" || kind === "h3";
+  const fontSize =
+    kind === "h1"
+      ? Math.max(size * 2, 32)
+      : kind === "h2"
+        ? Math.max(size * 1.5, 24)
+        : kind === "h3"
+          ? Math.max(size * 1.25, 20)
+          : size;
+  const margin = heading
+    ? "16px 0 8px"
+    : kind === "li" || kind === "ol"
+      ? `4px 0 ${listEnd ? 20 : 4}px`
+      : kind === "quote"
+        ? "1.5em 10px"
+        : "0 0 16px";
+  return {
+    fontFamily:
+      settings.fontFamily ||
+      (heading
+        ? style?.typography.header.fontFamily
+        : style?.typography.text.fontFamily),
+    fontSize,
+    fontWeight: heading ? 700 : undefined,
+    lineHeight: heading
+      ? 1.25
+      : settings.lineHeight || style?.typography.text.lineHeight || 1.5,
+    margin,
+  };
+}
+
+export interface TextItemProps {
+  content: string;
+  settings: Record<string, any>;
+  style: EmailStyle;
+  active: boolean;
+  /** Where the caret goes when this item becomes active. */
+  caret: number | "end";
+  /** The number shown on a numbered-list item. */
+  number?: number;
+  /** The last item of a list gets the list's bottom margin. */
+  listEnd: boolean;
+  label: string;
+  variables: EditorVariable[];
+  choices: BlockChoice[];
+  /** `caret` is where the click landed in the markdown, when known. */
+  onActivate: (caret?: number) => void;
+  onChange: (content: string) => void;
+  /** Enter: this item keeps `before`, a new item below gets `after`. */
+  onSplit: (before: string, after: string) => void;
+  /** Backspace at the start of a paragraph: join the previous item. */
+  onMergeBack: () => void;
+  onNavigate: (direction: "prev" | "next") => void;
+  /** A block picked from the `/` menu replaces this item. */
+  onInsertChoice: (choice: BlockChoice) => void;
+  /** Several paragraphs pasted at once, around the caret. */
+  onPasteParagraphs: (parts: string[], before: string, after: string) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onExit: () => void;
+}
+
+/** One paragraph, heading, list item or quote: shown formatted, edited in
+ * place as plain text with markdown marks for bold, italics and links. */
+export function TextItem(props: TextItemProps) {
+  const { content, settings, style, active, number, listEnd, variables, choices } =
+    props;
+  const { kind, prefix, body } = parseItem(content);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const pendingSelection = useRef<{ start: number; end: number } | null>(null);
+  const [selection, setSelection] = useState({ start: 0, end: 0 });
+  const [menu, setMenu] = useState<Menu>(null);
+  const [menuIndex, setMenuIndex] = useState(0);
+  const [placement, setPlacement] = useState<MenuPlacement>();
+
+  const slashChoices = menu?.kind === "slash" ? filterChoices(choices, menu.query) : [];
+  const listLength = menu?.kind === "variable" ? variables.length : slashChoices.length;
+
+  // Focus when activated, caret where the writer expects it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: on activation only
+  useLayoutEffect(() => {
+    if (!active) {
+      setMenu(null);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    const at =
+      props.caret === "end" ? el.value.length : Math.min(props.caret, el.value.length);
+    el.setSelectionRange(at, at);
+    setSelection({ start: at, end: at });
+  }, [active, props.caret]);
+
+  // Grow with the text, and restore a selection set by an edit.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-run whenever the text changes
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+    const pending = pendingSelection.current;
+    if (pending) {
+      pendingSelection.current = null;
+      el.setSelectionRange(pending.start, pending.end);
+      setSelection(pending);
+    }
+  }, [content, active]);
+
+  const setBody = (edit: TextEdit, nextPrefix = prefix) => {
+    pendingSelection.current = { start: edit.start, end: edit.end };
+    props.onChange(itemMarkdown(nextPrefix, edit.text));
+  };
+
+  const current = () => {
+    const el = ref.current;
+    return {
+      text: el?.value ?? body,
+      start: el?.selectionStart ?? 0,
+      end: el?.selectionEnd ?? 0,
+    };
+  };
+
+  /** Switches between a paragraph and a heading, list or quote. */
+  const toggleKind = (target: string) => {
+    const s = current();
+    const same = target === "" ? kind === "p" : prefix === target;
+    setBody(s, same ? "" : target);
+  };
+
+  function onTextChange(value: string, caretAt: number) {
+    // A markdown shortcut typed at the start converts the item.
+    if (kind === "p" || kind === "li" || kind === "ol") {
+      const hit = SHORTCUTS.find(
+        ([typed]) => value.startsWith(typed) && !body.startsWith(typed),
+      );
+      if (hit && (kind === "p" || hit[1] !== prefix)) {
+        const rest = value.slice(hit[0].length);
+        const at = Math.max(0, caretAt - hit[0].length);
+        pendingSelection.current = { start: at, end: at };
+        props.onChange(itemMarkdown(hit[1], rest));
+        setMenu(null);
+        return;
+      }
+    }
+    const slash = value.match(SLASH);
+    if (slash && (value === "/" || menu?.kind === "slash")) {
+      setPlacement(placeMenu(ref.current));
+      setMenu({ kind: "slash", query: slash[1] });
+      setMenuIndex(0);
+    } else if (variableTrigger(value, caretAt) && variables.length > 0) {
+      setPlacement(placeMenu(ref.current));
+      setMenu({ kind: "variable" });
+      setMenuIndex(0);
+    } else if (menu) {
+      setMenu(null);
+    }
+    pendingSelection.current = { start: caretAt, end: caretAt };
+    props.onChange(itemMarkdown(prefix, value));
+  }
+
+  function pickChoice(choice: BlockChoice) {
+    setMenu(null);
+    if (choice.text !== undefined) {
+      pendingSelection.current = { start: 0, end: 0 };
+      props.onChange(choice.text);
+      return;
+    }
+    props.onInsertChoice(choice);
+  }
+
+  function pickVariable(variable: EditorVariable) {
+    const s = current();
+    setMenu(null);
+    setBody(
+      insertVariable(s.text, s.start, s.end, variable.tag.replace(/[{}]/g, "").trim()),
+    );
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    const mod = event.metaKey || event.ctrlKey;
+    const key = event.key;
+    const { text, start, end } = current();
+
+    if (menu && listLength > 0) {
+      const columns = menu.kind === "slash" ? 4 : 1;
+      const move = (delta: number) => {
+        event.preventDefault();
+        setMenuIndex((index) => (index + delta + listLength) % listLength);
+      };
+      if (key === "ArrowDown") return move(columns);
+      if (key === "ArrowUp") return move(-columns);
+      if (key === "ArrowRight" && columns > 1) return move(1);
+      if (key === "ArrowLeft" && columns > 1) return move(-1);
+      if (key === "Enter" || key === "Tab") {
+        event.preventDefault();
+        if (menu.kind === "slash") pickChoice(slashChoices[menuIndex]);
+        else pickVariable(variables[menuIndex]);
+        return;
+      }
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      if (menu) setMenu(null);
+      else props.onExit();
+      return;
+    }
+    if (mod && key.toLowerCase() === "z") {
+      event.preventDefault();
+      if (event.shiftKey) props.onRedo();
+      else props.onUndo();
+      return;
+    }
+    if (mod && key.toLowerCase() === "y") {
+      event.preventDefault();
+      props.onRedo();
+      return;
+    }
+    if (mod && ["b", "i", "k"].includes(key.toLowerCase())) {
+      event.preventDefault();
+      const k = key.toLowerCase();
+      setBody(
+        k === "b"
+          ? wrapSelection(text, start, end, "**")
+          : k === "i"
+            ? wrapSelection(text, start, end, "*")
+            : linkSelection(text, start, end),
+      );
+      return;
+    }
+    if (key === "Enter" && !event.shiftKey && !menu) {
+      event.preventDefault();
+      // Enter on an empty list item or quote ends the list or quote.
+      if ((kind === "li" || kind === "ol" || kind === "quote") && !text.trim()) {
+        pendingSelection.current = { start: 0, end: 0 };
+        props.onChange("");
+        return;
+      }
+      const nextPrefix =
+        kind === "ol"
+          ? `${(Number.parseInt(prefix, 10) || 1) + 1}. `
+          : kind === "li"
+            ? prefix
+            : "";
+      props.onSplit(
+        itemMarkdown(prefix, text.slice(0, start)),
+        itemMarkdown(nextPrefix, text.slice(end)),
+      );
+      return;
+    }
+    if (key === "Backspace" && start === 0 && end === 0) {
+      // A heading, list item or quote first goes back to being a paragraph.
+      if (kind !== "p") {
+        event.preventDefault();
+        pendingSelection.current = { start: 0, end: 0 };
+        props.onChange(text);
+        return;
+      }
+      event.preventDefault();
+      props.onMergeBack();
+      return;
+    }
+    if ((key === "ArrowUp" || key === "ArrowLeft") && start === 0 && end === 0) {
+      event.preventDefault();
+      props.onNavigate("prev");
+      return;
+    }
+    if (
+      (key === "ArrowDown" || key === "ArrowRight") &&
+      start === text.length &&
+      end === text.length
+    ) {
+      event.preventDefault();
+      props.onNavigate("next");
+    }
+  }
+
+  function onPaste(event: ClipboardEvent<HTMLTextAreaElement>) {
+    const clip = event.clipboardData.getData("text/plain");
+    const parts = clip
+      .replace(/\r/g, "")
+      .split(/\n+/)
+      .filter((part) => part.trim());
+    if (parts.length < 2) return;
+    event.preventDefault();
+    const { text, start, end } = current();
+    props.onPasteParagraphs(
+      parts,
+      itemMarkdown(prefix, text.slice(0, start)),
+      text.slice(end),
+    );
+  }
+
+  const listClass = kind === "li" || kind === "ol" ? " list" : "";
+  const elementStyle: CSSProperties = {
+    ...itemStyle(kind, settings, style, { listEnd }),
+    textAlign: settings.alignment,
+  };
+  const hasSelection = active && selection.end > selection.start;
+
+  return (
+    <div
+      className={`sle-item k-${kind}${listClass}`}
+      data-n={kind === "ol" ? `${number ?? 1}.` : undefined}
+      style={elementStyle}
+    >
+      {hasSelection && (
+        <div
+          className="sle-fmt"
+          role="toolbar"
+          aria-label="Format"
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          <button
+            type="button"
+            aria-label="Bold"
+            title="Bold  ⌘B"
+            onClick={() => {
+              const s = current();
+              setBody(wrapSelection(s.text, s.start, s.end, "**"));
+            }}
+          >
+            <Bold className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            aria-label="Italic"
+            title="Italic  ⌘I"
+            onClick={() => {
+              const s = current();
+              setBody(wrapSelection(s.text, s.start, s.end, "*"));
+            }}
+          >
+            <Italic className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            aria-label="Link"
+            title="Link  ⌘K"
+            onClick={() => {
+              const s = current();
+              setBody(linkSelection(s.text, s.start, s.end));
+            }}
+          >
+            <LinkIcon className="size-3.5" />
+          </button>
+          <span className="sp" />
+          <button
+            type="button"
+            aria-label="Heading"
+            title="Heading"
+            onClick={() => toggleKind("## ")}
+          >
+            <Heading2 className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            aria-label="Bulleted list"
+            title="Bulleted list"
+            onClick={() => toggleKind("- ")}
+          >
+            <List className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            aria-label="Quote"
+            title="Quote"
+            onClick={() => toggleKind("> ")}
+          >
+            <TextQuote className="size-3.5" />
+          </button>
+          {variables.length > 0 && (
+            <>
+              <span className="sp" />
+              <button
+                type="button"
+                aria-label="Insert merge tag"
+                title="Insert merge tag"
+                onClick={() => {
+                  setPlacement(placeMenu(ref.current));
+                  setMenu({ kind: "variable" });
+                  setMenuIndex(0);
+                }}
+              >
+                <Braces className="size-3.5" />
+              </button>
+            </>
+          )}
+        </div>
+      )}
+      {active ? (
+        <textarea
+          ref={ref}
+          className="sle-ed"
+          aria-label={props.label}
+          placeholder={
+            kind === "p"
+              ? "Write something, or type / for blocks"
+              : kind === "li" || kind === "ol"
+                ? "List item"
+                : kind === "quote"
+                  ? "Quote"
+                  : "Heading"
+          }
+          rows={1}
+          value={body}
+          onChange={(event) =>
+            onTextChange(event.target.value, event.target.selectionStart)
+          }
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          onSelect={(event) =>
+            setSelection({
+              start: event.currentTarget.selectionStart,
+              end: event.currentTarget.selectionEnd,
+            })
+          }
+          onBlur={() => setMenu(null)}
+          spellCheck
+        />
+      ) : (
+        <>
+          {/* biome-ignore lint/a11y/useKeyWithClickEvents lint/a11y/noStaticElementInteractions: the button below is the keyboard way in */}
+          <span
+            className="sle-inline-hit"
+            onClick={(event) => {
+              event.stopPropagation();
+              props.onActivate(
+                caretFromPoint(event.clientX, event.clientY, body.length),
+              );
+            }}
+          >
+            <InlineText text={body} accent={style.colors.accent} />
+          </span>
+          <button
+            type="button"
+            className="sle-hit"
+            aria-label={`Edit: ${props.label}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              props.onActivate();
+            }}
+          />
+        </>
+      )}
+      {active && menu?.kind === "slash" && (
+        <BlockMenu
+          choices={slashChoices}
+          index={menuIndex}
+          onHover={setMenuIndex}
+          onPick={pickChoice}
+          placement={placement}
+        />
+      )}
+      {active && menu?.kind === "variable" && (
+        <VariableMenu
+          variables={variables}
+          index={menuIndex}
+          onHover={setMenuIndex}
+          onPick={pickVariable}
+          placement={placement}
+        />
+      )}
+    </div>
+  );
+}
+
+/** The markdown offset under a click on formatted text, so the caret lands
+ * where the writer clicked rather than at the end. */
+function caretFromPoint(x: number, y: number, length: number): number | undefined {
+  const doc = document as Document & {
+    caretPositionFromPoint?: (
+      x: number,
+      y: number,
+    ) => { offsetNode: Node; offset: number } | null;
+    caretRangeFromPoint?: (x: number, y: number) => Range | null;
+  };
+  let node: Node | null = null;
+  let offset = 0;
+  const position = doc.caretPositionFromPoint?.(x, y);
+  if (position) {
+    node = position.offsetNode;
+    offset = position.offset;
+  } else {
+    const range = doc.caretRangeFromPoint?.(x, y);
+    if (range) {
+      node = range.startContainer;
+      offset = range.startOffset;
+    }
+  }
+  const element = (
+    node?.nodeType === Node.TEXT_NODE ? node.parentElement : (node as Element | null)
+  )?.closest<HTMLElement>("[data-from]");
+  if (!element) return undefined;
+  if (element.dataset.kind === "tag") return Number(element.dataset.end);
+  return Math.min(length, Number(element.dataset.from) + offset);
+}
+
+/** Bold, italics, links and merge-tag chips, as a reader would see them. */
+function InlineText({ text, accent }: { text: string; accent?: string }) {
+  if (!text) return <span className="sle-empty-item">{" "}</span>;
+  return (
+    <span className="sle-inline">
+      {placedSegments(text).map((segment) => {
+        const key = `${segment.from}-${segment.type}`;
+        const place = {
+          "data-from": segment.from,
+          "data-end": segment.end,
+          "data-kind": segment.type,
+        };
+        switch (segment.type) {
+          case "bold":
+            return (
+              <strong key={key} {...place}>
+                {segment.text}
+              </strong>
+            );
+          case "italic":
+            return (
+              <em key={key} {...place}>
+                {segment.text}
+              </em>
+            );
+          case "link":
+            return (
+              <span key={key} {...place} className="m-link" style={{ color: accent }}>
+                {segment.text}
+              </span>
+            );
+          case "tag":
+            return (
+              <span key={key} {...place} className="m-var">
+                {segment.path}
+                {segment.fallback !== undefined && <i>· {segment.fallback}</i>}
+              </span>
+            );
+          default:
+            return (
+              <span key={key} {...place}>
+                {segment.text}
+              </span>
+            );
+        }
+      })}
+    </span>
+  );
+}
diff --git a/packages/email-editor/src/editor.css b/packages/email-editor/src/editor.css
new file mode 100644
index 00000000..04e21292
--- /dev/null
+++ b/packages/email-editor/src/editor.css
@@ -0,0 +1,2004 @@
+/* ===== Public theming surface: every colour, radius and font the editor chrome uses is one of these. ===== */
+.sle {
+  --sle-font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --sle-mono: "Spline Sans Mono", ui-monospace, monospace;
+  --sle-bg: oklch(0.975 0.006 80);
+  --sle-panel: oklch(0.995 0.003 85);
+  --sle-panel-2: oklch(0.965 0.007 80);
+  --sle-stage: oklch(0.945 0.008 80);
+  --sle-border: oklch(0.9 0.012 80);
+  --sle-input: oklch(0.87 0.012 80);
+  --sle-text: oklch(0.24 0.02 60);
+  --sle-muted: oklch(0.5 0.018 70);
+  --sle-accent: oklch(0.56 0.13 150);
+  --sle-accent-fg: oklch(0.99 0.005 85);
+  --sle-accent-soft: oklch(0.6 0.14 150 / 0.12);
+  --sle-accent-ink: oklch(0.44 0.12 150);
+  --sle-danger: oklch(0.55 0.17 27);
+  --sle-radius: 10px;
+  --sle-radius-sm: 6px;
+  --sle-shadow: 0 8px 32px oklch(0.3 0.02 60 / 0.14);
+}
+.sle.t-neutral {
+  --sle-font: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --sle-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --sle-bg: oklch(0.985 0 0);
+  --sle-panel: oklch(1 0 0);
+  --sle-panel-2: oklch(0.97 0 0);
+  --sle-stage: oklch(0.955 0.002 286);
+  --sle-border: oklch(0.92 0.004 286);
+  --sle-input: oklch(0.88 0.004 286);
+  --sle-text: oklch(0.21 0.006 286);
+  --sle-muted: oklch(0.55 0.014 286);
+  --sle-accent: oklch(0.21 0.006 286);
+  --sle-accent-fg: oklch(0.985 0 0);
+  --sle-accent-soft: oklch(0.21 0.006 286 / 0.07);
+  --sle-accent-ink: oklch(0.21 0.006 286);
+  --sle-radius: 8px;
+  --sle-radius-sm: 5px;
+  --sle-shadow: 0 8px 28px oklch(0.2 0.01 286 / 0.12);
+}
+.sle.t-dark {
+  --sle-bg: oklch(0.17 0.005 286);
+  --sle-panel: oklch(0.21 0.006 286);
+  --sle-panel-2: oklch(0.24 0.006 286);
+  --sle-stage: oklch(0.14 0.004 286);
+  --sle-border: oklch(0.3 0.006 286);
+  --sle-input: oklch(0.36 0.008 286);
+  --sle-text: oklch(0.95 0.002 286);
+  --sle-muted: oklch(0.7 0.01 286);
+  --sle-accent: oklch(0.72 0.13 150);
+  --sle-accent-fg: oklch(0.2 0.04 150);
+  --sle-accent-soft: oklch(0.72 0.13 150 / 0.16);
+  --sle-accent-ink: oklch(0.8 0.12 150);
+  --sle-danger: oklch(0.68 0.16 27);
+  --sle-shadow: 0 8px 32px oklch(0 0 0 / 0.5);
+}
+:where(.sle) * {
+  box-sizing: border-box;
+}
+:where(.sle) button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+}
+:where(.sle) input,
+:where(.sle) select,
+:where(.sle) textarea {
+  font: inherit;
+  color: inherit;
+}
+.sle {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--sle-bg);
+  color: var(--sle-text);
+  font: 400 14px / 1.5 var(--sle-font);
+  -webkit-font-smoothing: antialiased;
+  position: relative;
+  overflow: hidden;
+}
+.sle :focus-visible {
+  outline: 2px solid var(--sle-accent);
+  outline-offset: 2px;
+}
+
+.sle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: var(--sle-radius-sm);
+  font-weight: 600;
+  font-size: 13.5px;
+  white-space: nowrap;
+}
+.sle-btn.p {
+  background: var(--sle-accent);
+  color: var(--sle-accent-fg);
+}
+.sle-btn.o {
+  border: 1px solid var(--sle-input);
+  background: var(--sle-panel);
+}
+.sle-btn.o:hover {
+  border-color: var(--sle-muted);
+}
+.sle-btn.t {
+  height: 30px;
+  padding: 0 10px;
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--sle-muted);
+}
+.sle-btn.t:hover {
+  background: var(--sle-panel-2);
+  color: var(--sle-text);
+}
+.sle-btn.t.on {
+  background: var(--sle-accent-soft);
+  color: var(--sle-accent-ink);
+  font-weight: 600;
+}
+.sle-ib {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--sle-radius-sm);
+  color: var(--sle-muted);
+}
+.sle-ib:hover:not(:disabled) {
+  background: var(--sle-panel-2);
+  color: var(--sle-text);
+}
+.sle-ib:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.sle-seg {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel-2);
+  border: 1px solid var(--sle-border);
+}
+.sle-seg button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 26px;
+  min-width: 30px;
+  padding: 0 9px;
+  border-radius: calc(var(--sle-radius) - 4px);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--sle-muted);
+}
+.sle-seg button.on {
+  background: var(--sle-panel);
+  color: var(--sle-text);
+  font-weight: 600;
+  box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
+}
+.sle-seg.full {
+  display: flex;
+}
+.sle-seg.full button {
+  flex: 1;
+}
+.sle-sw {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--sle-muted);
+  white-space: nowrap;
+}
+.sle-sw input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.sle-sw .tr {
+  position: relative;
+  flex: none;
+  width: 32px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--sle-input);
+  transition: background 0.15s;
+}
+.sle-sw .tr::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--sle-panel);
+  transition: transform 0.15s;
+}
+.sle-sw input:checked + .tr {
+  background: var(--sle-accent);
+}
+.sle-sw input:checked + .tr::after {
+  transform: translateX(14px);
+}
+.sle-sw input:focus-visible + .tr {
+  outline: 2px solid var(--sle-accent);
+  outline-offset: 2px;
+}
+.sle-sw.on {
+  color: var(--sle-text);
+}
+.sle-sep {
+  width: 1px;
+  height: 22px;
+  background: var(--sle-border);
+}
+
+/* host app bar (stand-in: the embedding app owns this) */
+
+/* layout: the design panel stays out of the way while you write */
+.sle-body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+}
+.sle-body.focus {
+  grid-template-columns: minmax(0, 1fr);
+}
+.sle-body.focus .sle-panel {
+  display: none;
+}
+.sle-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--sle-panel);
+  border-left: 1px solid var(--sle-border);
+}
+.sle-ph {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 12px 12px 0;
+}
+.sle-tabs {
+  flex: 1;
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel-2);
+  border: 1px solid var(--sle-border);
+}
+.sle-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 8px;
+  border-radius: calc(var(--sle-radius) - 4px);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sle-muted);
+}
+.sle-tab:hover {
+  color: var(--sle-text);
+}
+.sle-tab.on {
+  background: var(--sle-panel);
+  color: var(--sle-text);
+  font-weight: 600;
+  box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
+}
+.sle-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
+}
+.sle-hint {
+  font-size: 12.5px;
+  color: var(--sle-muted);
+  line-height: 1.45;
+  margin: 0;
+}
+
+/* stage */
+.sle-stage {
+  min-height: 0;
+  overflow: auto;
+  background: var(--sle-stage);
+  padding: 12px 32px 96px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+.sle-ctl {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px 6px 4px 4px;
+  border-radius: calc(var(--sle-radius) + 2px);
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  box-shadow: 0 2px 10px oklch(0 0 0 / 0.06);
+}
+.sle-ctl .sle-seg {
+  border: 0;
+}
+.sle-ctl .wc {
+  font-size: 12.5px;
+  color: var(--sle-muted);
+  padding: 0 6px;
+  font-variant-numeric: tabular-nums;
+}
+.sle-inbox {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  gap: 0 10px;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  font-size: 13px;
+  max-width: 100%;
+}
+.sle-inbox .av {
+  grid-row: span 2;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--sle-accent-soft);
+  color: var(--sle-accent-ink);
+  font-weight: 700;
+  font-size: 12px;
+}
+.sle-inbox b {
+  font-weight: 600;
+}
+.sle-inbox time {
+  font-size: 11.5px;
+  color: var(--sle-muted);
+}
+.sle-inbox .ln {
+  grid-column: 2 / span 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sle-inbox .ln span {
+  color: var(--sle-muted);
+}
+.sle-inbox .ln em {
+  font-style: normal;
+  color: oklch(0.6 0.12 70);
+}
+.sle-cap {
+  font-size: 11.5px;
+  color: var(--sle-muted);
+  margin: -6px 0 0;
+  text-align: center;
+  max-width: 620px;
+}
+.sle-canvas {
+  position: relative;
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+  padding: 40px 72px;
+  border-radius: var(--sle-radius);
+  transition: background 0.2s;
+}
+.sle-canvas-hit {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--sle-radius);
+}
+.sle-canvas-tag {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  font: 500 11px / 1 var(--sle-font);
+  padding: 4px 7px;
+  border-radius: 999px;
+  background: var(--sle-panel);
+  color: var(--sle-muted);
+  border: 1px solid var(--sle-border);
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+.sle-canvas-hit:hover + .sle-canvas-tag {
+  opacity: 1;
+}
+.sle-mail {
+  position: relative;
+  z-index: 1;
+  border: 1px solid;
+  padding: 28px 0 20px;
+  transition: width 0.25s ease;
+  max-width: 100%;
+  line-height: 1.6;
+}
+
+/* document items */
+.it {
+  position: relative;
+  padding: 3px 40px;
+}
+.it.obj {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.it.obj:hover {
+  box-shadow: inset 0 0 0 1px var(--sle-input);
+}
+.it.obj.on {
+  box-shadow: inset 0 0 0 2px var(--sle-accent);
+}
+.it:not(.k-ol) {
+  counter-reset: ol;
+}
+.it.dragged {
+  opacity: 0.35;
+}
+.it.drop-before::before,
+.it.drop-after::after {
+  content: "";
+  position: absolute;
+  left: 40px;
+  right: 40px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--sle-accent);
+  z-index: 6;
+}
+.it.drop-before::before {
+  top: -2px;
+}
+.it.drop-after::after {
+  bottom: -2px;
+}
+.sle-hit {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: 0;
+  cursor: text;
+}
+.obj .sle-hit {
+  cursor: pointer;
+}
+.sle-gut {
+  position: absolute;
+  right: calc(100% - 36px);
+  top: 3px;
+  z-index: 4;
+  display: flex;
+  gap: 1px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.it.obj .sle-gut {
+  top: 10px;
+}
+.it:hover .sle-gut,
+.it.on .sle-gut,
+.sle-gut:focus-within {
+  opacity: 1;
+}
+.sle-mail.typing .it:not(.active):not(:hover) .sle-gut {
+  opacity: 0;
+}
+.sle-gut button {
+  width: 20px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  color: var(--sle-muted);
+  cursor: pointer;
+}
+.sle-gut button:hover {
+  background: oklch(0.5 0.01 260 / 0.1);
+  color: var(--sle-text);
+}
+.sle-gut .grip {
+  cursor: grab;
+}
+.sle-bar {
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--sle-radius-sm);
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  box-shadow: var(--sle-shadow);
+  color: var(--sle-text);
+}
+.sle-bar button {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  color: var(--sle-muted);
+}
+.sle-bar button:hover {
+  background: var(--sle-panel-2);
+  color: var(--sle-text);
+}
+.sle-bar button.del:hover {
+  color: var(--sle-danger);
+}
+.sle-bar .lock {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  color: var(--sle-muted);
+}
+.sle-ed {
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  resize: none;
+  field-sizing: content;
+  min-height: 1.6em;
+  overflow: hidden;
+  caret-color: var(--sle-accent);
+}
+.sle .sle-ed:focus-visible,
+.sle .sle-subj:focus-visible,
+.sle .sle-prev:focus-visible {
+  outline: none;
+}
+.sle-ed.m-li,
+.sle-ed.m-ol,
+.sle-ed.m-quote {
+  width: 100%;
+}
+.sle-ed::placeholder {
+  color: currentColor;
+  opacity: 0.35;
+}
+.sle-ed::selection {
+  background: oklch(0.6 0.14 150 / 0.25);
+}
+.sle-fmt {
+  position: absolute;
+  left: 36px;
+  bottom: calc(100% + 4px);
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 3px;
+  border-radius: var(--sle-radius-sm);
+  background: var(--sle-text);
+  color: var(--sle-bg);
+  box-shadow: var(--sle-shadow);
+  font: 500 13px / 1 var(--sle-font);
+  letter-spacing: 0;
+  text-transform: none;
+}
+.sle-fmt button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+.sle-fmt button:hover {
+  background: oklch(1 0 0 / 0.14);
+}
+.sle-fmt .sp {
+  width: 1px;
+  height: 16px;
+  background: oklch(1 0 0 / 0.2);
+  margin: 0 3px;
+}
+.sle-menu {
+  position: absolute;
+  left: 36px;
+  top: calc(100% + 2px);
+  z-index: 30;
+  width: 292px;
+  max-height: 340px;
+  overflow: auto;
+  padding: 6px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  box-shadow: var(--sle-shadow);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--sle-font);
+  color: var(--sle-text);
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.4;
+  letter-spacing: 0;
+  text-transform: none;
+  font-weight: 400;
+  font-style: normal;
+}
+.sle-menu.up {
+  top: auto;
+  bottom: calc(100% + 2px);
+}
+.sle-menu .mh {
+  padding: 8px 8px 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sle-muted);
+}
+.sle-menu button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 8px;
+  border-radius: var(--sle-radius-sm);
+  text-align: left;
+}
+.sle-menu button:hover,
+.sle-menu button:focus-visible {
+  background: var(--sle-panel-2);
+  outline: none;
+}
+.sle-menu .mi {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: var(--sle-radius-sm);
+  border: 1px solid var(--sle-border);
+  background: var(--sle-panel);
+  color: var(--sle-muted);
+}
+.sle-menu .mt {
+  min-width: 0;
+  flex: 1;
+}
+.sle-menu .mt b {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.sle-menu .mt em {
+  display: block;
+  font-style: normal;
+  font-size: 12px;
+  color: var(--sle-muted);
+  line-height: 1.3;
+}
+.sle-menu kbd {
+  font: 500 11px / 1 var(--sle-mono);
+  color: var(--sle-muted);
+}
+.sle-menu code {
+  font: 500 12px / 1.3 var(--sle-mono);
+  color: var(--sle-accent-ink);
+}
+
+/* email content */
+.m-label {
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.m-h1 {
+  margin: 6px 0 2px;
+  font-size: 2.6em;
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.m-h2 {
+  margin: 14px 0 0;
+  font-size: 1.5em;
+  line-height: 1.25;
+  font-weight: 700;
+}
+.m-p {
+  margin: 4px 0;
+  white-space: pre-line;
+}
+.m-li,
+.m-ol {
+  position: relative;
+  margin: 2px 0;
+  padding-left: 1.4em;
+}
+.m-li::before {
+  content: "•";
+  position: absolute;
+  left: 0.35em;
+}
+.m-ol {
+  counter-increment: ol;
+}
+.m-ol::before {
+  content: counter(ol) ".";
+  position: absolute;
+  left: 0;
+  font-variant-numeric: tabular-nums;
+}
+.sle-ed.m-li::before,
+.sle-ed.m-ol::before {
+  content: none;
+}
+.k-li.active::before {
+  content: "•";
+  position: absolute;
+  left: calc(40px + 0.35em);
+  top: 3px;
+  z-index: 3;
+}
+.m-quote {
+  margin: 6px 0;
+  padding-left: 14px;
+  border-left: 3px solid;
+  font-style: italic;
+}
+.m-small {
+  font-size: 0.82em;
+  opacity: 0.75;
+}
+.m-var {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 5px;
+  margin: 0 1px;
+  border-radius: 4px;
+  font: 500 0.82em / 1.6 var(--sle-mono);
+  background: oklch(0.6 0.14 150 / 0.12);
+  color: oklch(0.42 0.12 150);
+  border: 1px dashed oklch(0.6 0.14 150 / 0.5);
+  text-transform: none;
+  letter-spacing: 0;
+  font-style: normal;
+}
+.m-var i {
+  font-style: normal;
+  opacity: 0.65;
+}
+.m-val {
+  background: oklch(0.85 0.12 90 / 0.35);
+  border-radius: 3px;
+  padding: 0 2px;
+}
+.m-link {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.m-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 26px;
+  font-weight: 600;
+}
+.m-img {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 2 / 1;
+  border-radius: 6px;
+  background: oklch(0.95 0.005 250);
+  color: oklch(0.55 0.01 260);
+  font-size: 13px;
+  border: 1px dashed oklch(0.85 0.01 260);
+}
+.m-hr {
+  margin: 6px 0;
+  border: 0;
+  border-top: 1px solid;
+}
+.m-sp.s {
+  height: 8px;
+}
+.m-sp.m {
+  height: 20px;
+}
+.m-sp.l {
+  height: 40px;
+}
+.m-cols {
+  display: grid;
+  gap: 24px;
+  align-items: start;
+}
+.m-cols.stack {
+  grid-template-columns: 1fr !important;
+}
+.m-cols .col {
+  min-width: 0;
+}
+.m-social {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.m-social span {
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid;
+  font-size: 0.82em;
+  font-weight: 600;
+}
+.m-html {
+  border-radius: 6px;
+  border: 1px dashed oklch(0.75 0.01 260);
+  overflow: hidden;
+  font-family: var(--sle-mono);
+  font-size: 12px;
+}
+.m-html .h {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: oklch(0.95 0.005 250);
+  color: oklch(0.45 0.01 260);
+  font-weight: 500;
+}
+.m-html pre {
+  margin: 0;
+  padding: 10px;
+  white-space: pre-wrap;
+  color: oklch(0.4 0.01 260);
+  max-height: 110px;
+  overflow: hidden;
+}
+.m-foot {
+  font-size: 0.78em;
+  line-height: 1.6;
+  opacity: 0.8;
+}
+.m-foot p {
+  margin: 0 0 4px;
+}
+.m-foot .links {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.m-foot.center .links {
+  justify-content: center;
+}
+.sle-trail {
+  display: block;
+  width: calc(100% - 80px);
+  margin: 6px 40px 0;
+  height: 44px;
+  border-radius: var(--sle-radius-sm);
+  color: inherit;
+  opacity: 0.35;
+  font: 400 0.95em / 1 var(--sle-font);
+  text-align: left;
+  cursor: text;
+}
+.sle-trail:hover {
+  opacity: 0.6;
+}
+
+/* inspector */
+.sle-sec {
+  padding: 4px 0 16px;
+  border-bottom: 1px solid var(--sle-border);
+  margin-bottom: 14px;
+}
+.sle-sec:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+.sle-sec h3 {
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--sle-text);
+}
+.sle-f {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.sle-f:last-child {
+  margin-bottom: 0;
+}
+.sle-f > label,
+.sle-f .l {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.sle-f > label em,
+.sle-f .l em {
+  font-style: normal;
+  font-weight: 400;
+  color: var(--sle-muted);
+}
+.sle-in {
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: var(--sle-radius-sm);
+  border: 1px solid var(--sle-input);
+  background: var(--sle-panel);
+  font-size: 13px;
+  outline: none;
+}
+.sle-in.mono {
+  font-family: var(--sle-mono);
+  font-size: 12.5px;
+}
+textarea.sle-in {
+  height: auto;
+  min-height: 88px;
+  padding: 8px 10px;
+  resize: vertical;
+  line-height: 1.5;
+}
+.sle-in:focus {
+  border-color: var(--sle-accent);
+  box-shadow: 0 0 0 3px var(--sle-accent-soft);
+}
+select.sle-in {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 15px;
+}
+.sle-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.sle-fb {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 120px;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.sle-fb code {
+  font: 500 12px / 1.3 var(--sle-mono);
+  color: var(--sle-accent-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sle-color {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 30px 92px 28px;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.sle-color .nm {
+  font-size: 13px;
+  font-weight: 500;
+}
+.sle-color input[type="color"] {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--sle-input);
+  border-radius: var(--sle-radius-sm);
+  background: none;
+  cursor: pointer;
+}
+.sle-color .hex {
+  height: 30px;
+  font-family: var(--sle-mono);
+  font-size: 12px;
+  padding: 0 8px;
+  text-transform: lowercase;
+}
+.sle-presets {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+.sle-preset {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 5px;
+  padding: 5px 5px 6px;
+  border-radius: var(--sle-radius);
+  border: 1px solid var(--sle-border);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+}
+.sle-preset:hover {
+  border-color: var(--sle-input);
+}
+.sle-preset.on {
+  border-color: var(--sle-accent);
+  box-shadow: 0 0 0 2px var(--sle-accent-soft);
+  font-weight: 600;
+}
+.sle-preset .sw {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  border-radius: calc(var(--sle-radius) - 4px);
+}
+.sle-preset .card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 60%;
+  padding: 5px 6px;
+  border: 1px solid;
+  border-radius: 3px;
+}
+.sle-preset .card i {
+  display: block;
+  height: 3px;
+  width: 80%;
+  border-radius: 2px;
+}
+.sle-preset .card i.a {
+  width: 45%;
+  height: 5px;
+}
+.sle-social-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.sle-social-row input[type="checkbox"] {
+  accent-color: var(--sle-accent);
+  width: 16px;
+  height: 16px;
+}
+.sle-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 28px 12px;
+  text-align: center;
+  color: var(--sle-muted);
+  font-size: 13px;
+}
+.sle-sel-h {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.sle-sel-h b {
+  font-size: 14px;
+}
+.sle-sel-h .mk {
+  color: var(--sle-accent-ink);
+}
+.sle-note {
+  display: flex;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel-2);
+  font-size: 12.5px;
+  color: var(--sle-muted);
+  line-height: 1.45;
+  margin: 0 0 14px;
+}
+.sle-note b {
+  color: var(--sle-text);
+}
+.sle-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: var(--sle-radius-sm);
+  border: 1px solid var(--sle-input);
+  background: var(--sle-panel);
+  color: var(--sle-muted);
+}
+.sle-search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: none;
+  color: var(--sle-text);
+  font-size: 13px;
+}
+.sle-vars {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+.sle-var {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px 8px;
+  align-items: center;
+  padding: 9px 6px 9px 10px;
+  border-radius: var(--sle-radius);
+  border: 1px solid var(--sle-border);
+}
+.sle-var:hover {
+  background: var(--sle-panel-2);
+}
+.sle-var code {
+  font: 500 12px / 1.4 var(--sle-mono);
+  color: var(--sle-accent-ink);
+  word-break: break-all;
+}
+.sle-var span {
+  grid-column: 1;
+  font-size: 12px;
+  color: var(--sle-muted);
+  line-height: 1.35;
+}
+.sle-var .acts {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  display: flex;
+}
+.sle-toast {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-text);
+  color: var(--sle-bg);
+  font-size: 13px;
+  box-shadow: var(--sle-shadow);
+}
+
+/* ===== Write / Style modes ===== */
+.sle-wrap {
+  position: relative;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.sle-wrap > .sle-stage {
+  flex: 1;
+}
+.sle-mode {
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  z-index: 25;
+  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
+}
+.sle-body.write {
+  grid-template-columns: minmax(0, 1fr);
+}
+.sle-body.write .sle-panel {
+  display: none;
+}
+.sle-body.write .sle-stage {
+  background: var(--sle-panel);
+  padding: 88px 32px 40vh;
+}
+.sle-body.write .sle-ctl,
+.sle-body.write .sle-inbox,
+.sle-body.write .sle-cap,
+.sle-body.write .sle-canvas-hit,
+.sle-body.write .sle-canvas-tag {
+  display: none;
+}
+.sle-body.write .sle-canvas {
+  padding: 0;
+}
+.sle-body.write .sle-mail {
+  padding: 0;
+  line-height: 1.7;
+}
+.sle-body.write .it.obj:hover {
+  box-shadow: inset 0 0 0 1px var(--sle-border);
+}
+.sle-body.write .sle-trail {
+  opacity: 0.28;
+}
+.sle-doc-h {
+  padding: 0 40px 30px;
+}
+.sle-doc-h .fld {
+  position: relative;
+}
+.sle-doc-h .tg {
+  position: absolute;
+  right: calc(100% + 14px);
+  top: 0.55em;
+  font: 500 11.5px / 1 var(--sle-font);
+  color: var(--sle-muted);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+.sle-doc-h .fld:hover .tg,
+.sle-doc-h .fld:focus-within .tg {
+  opacity: 0.8;
+}
+.sle-subj {
+  display: block;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: none;
+  resize: none;
+  field-sizing: content;
+  min-height: 1.2em;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 2.15em;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: inherit;
+  caret-color: var(--sle-accent);
+}
+.sle-prev {
+  display: block;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: none;
+  padding: 0;
+  margin: 10px 0 0;
+  font-family: inherit;
+  font-size: 1.05em;
+  line-height: 1.5;
+  color: var(--sle-muted);
+  caret-color: var(--sle-accent);
+}
+.sle-subj::placeholder,
+.sle-prev::placeholder {
+  color: var(--sle-muted);
+  opacity: 0.55;
+}
+.sle-footnote {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 40px 40px 0;
+  padding-top: 14px;
+  border-top: 1px dashed var(--sle-border);
+  font: 400 13px / 1.4 var(--sle-font);
+  color: var(--sle-muted);
+  opacity: 0.75;
+  transition: opacity 0.15s;
+}
+.sle-footnote:hover {
+  opacity: 1;
+}
+.sle-footnote button {
+  color: var(--sle-text);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  margin-left: auto;
+}
+/* object popover (write mode) */
+.sle-pop {
+  position: absolute;
+  left: 36px;
+  top: calc(100% - 2px);
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  box-shadow: var(--sle-shadow);
+  font: 400 13px / 1.4 var(--sle-font);
+  color: var(--sle-text);
+  text-align: left;
+  letter-spacing: 0;
+  text-transform: none;
+  font-style: normal;
+  font-weight: 400;
+}
+.sle-pop .sle-in {
+  height: 30px;
+  width: 150px;
+}
+.sle-pop .sle-in.u {
+  width: 230px;
+}
+.sle-pop .sp {
+  width: 1px;
+  height: 20px;
+  background: var(--sle-border);
+  margin: 0 2px;
+}
+.sle-pop .sle-ib {
+  width: 30px;
+  height: 30px;
+}
+.sle-pop .sle-ib.del:hover {
+  color: var(--sle-danger);
+}
+.sle-pop .sle-seg {
+  border: 0;
+}
+/* block menu as a grid */
+.sle-menu.grid {
+  width: 392px;
+  max-height: none;
+  overflow: visible;
+  padding: 8px;
+}
+.sle-tiles {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 2px;
+}
+.sle-menu .sle-tiles button {
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 4px 8px;
+  font-size: 12.5px;
+  text-align: center;
+  color: var(--sle-text);
+}
+.sle-tiles .mi {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+}
+.sle-menu .sle-tiles button.first {
+  background: var(--sle-panel-2);
+}
+.sle-menu .empty {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: 12px;
+  color: var(--sle-muted);
+  font-size: 13px;
+  text-align: center;
+}
+.sle-menu .pz {
+  margin: 8px -8px -8px;
+  padding: 2px 8px 10px;
+  border-top: 1px solid var(--sle-border);
+  background: var(--sle-panel-2);
+  border-radius: 0 0 var(--sle-radius) var(--sle-radius);
+}
+.sle-menu .pz .mh {
+  display: block;
+  padding: 8px 2px 6px;
+}
+.sle-menu button.sle-sect {
+  width: 100%;
+  padding: 8px;
+  border: 1px dashed var(--sle-input);
+  background: var(--sle-panel);
+}
+.sle-menu button.sle-sect:hover {
+  border-color: var(--sle-muted);
+  background: var(--sle-panel);
+}
+.sle-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 2px 0;
+  font-size: 12.5px;
+  color: var(--sle-muted);
+}
+.sle-menu button.sle-chip {
+  height: 26px;
+  padding: 0 9px;
+  gap: 5px;
+  border-radius: 6px;
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  font-size: 12.5px;
+  color: var(--sle-text);
+}
+.sle-menu button.sle-chip.add {
+  border-style: dashed;
+  color: var(--sle-muted);
+}
+/* conditional section */
+.m-cond {
+  border: 1.5px dashed var(--sle-input);
+  border-radius: 8px;
+  padding: 10px 14px 12px;
+}
+.m-cond .ch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  font: 600 12px / 1.3 var(--sle-font);
+  color: var(--sle-muted);
+  letter-spacing: 0;
+  text-transform: none;
+  font-style: normal;
+}
+.m-cond .ch .mk {
+  width: 14px;
+  height: 14px;
+}
+
+/* corner: checklist + mode */
+.sle-mode {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: none;
+}
+.sle-mode .sle-seg {
+  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
+}
+.sle-chkbtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 11px;
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 600;
+  border: 1px solid var(--sle-border);
+  background: var(--sle-panel);
+  color: var(--sle-muted);
+}
+.sle-chkbtn.ok {
+  color: var(--sle-accent-ink);
+}
+.sle-chkbtn.warn {
+  color: oklch(0.5 0.12 70);
+  border-color: oklch(0.8 0.1 80);
+  background: oklch(0.97 0.04 90);
+}
+.sle-chkbtn.bad {
+  color: var(--sle-danger);
+  border-color: oklch(0.82 0.08 27);
+  background: oklch(0.97 0.02 27);
+}
+.sle.t-dark .sle-chkbtn.warn,
+.sle.t-dark .sle-chkbtn.bad {
+  background: var(--sle-panel);
+}
+.sle-chk {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  width: 380px;
+  max-height: 70vh;
+  overflow: auto;
+  border-radius: var(--sle-radius);
+  background: var(--sle-panel);
+  border: 1px solid var(--sle-border);
+  box-shadow: var(--sle-shadow);
+  text-align: left;
+}
+.sle-chk .hd {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--sle-border);
+}
+.sle-chk .hd b {
+  font-size: 14px;
+}
+.sle-chk .hd span {
+  font-size: 12.5px;
+  color: var(--sle-muted);
+}
+.sle-chk ul {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+}
+.sle-chk li {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+  padding: 10px;
+  border-radius: var(--sle-radius-sm);
+}
+.sle-chk li:hover {
+  background: var(--sle-panel-2);
+}
+.sle-chk li .ic {
+  margin-top: 2px;
+}
+.sle-chk li.must .ic {
+  color: var(--sle-danger);
+}
+.sle-chk li.should .ic {
+  color: oklch(0.62 0.13 70);
+}
+.sle-chk .tx {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.sle-chk .tx b {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+.sle-chk .tx span {
+  font-size: 12.5px;
+  color: var(--sle-muted);
+  line-height: 1.4;
+}
+.sle-chk .fbrow {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+.sle-chk .fbrow .sle-in {
+  height: 30px;
+}
+.sle-chk .sle-btn {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12.5px;
+}
+.sle-chk .ok {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 16px;
+  color: var(--sle-accent-ink);
+  font-size: 13px;
+  font-weight: 500;
+}
+/* subject meta + inbox preview (write) */
+.sle-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 12px;
+  font: 400 12.5px / 1.3 var(--sle-font);
+  color: var(--sle-muted);
+}
+.sle-meta .warn {
+  color: oklch(0.55 0.13 70);
+}
+.sle-meta .lnk {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 500;
+  color: var(--sle-muted);
+}
+.sle-meta .lnk:hover {
+  color: var(--sle-text);
+}
+.sle-ibx {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 14px;
+  margin-top: 14px;
+  font: 400 13px / 1.35 var(--sle-font);
+  color: var(--sle-text);
+}
+.sle-ibx .pv {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sle-ibx .cap {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--sle-muted);
+}
+.sle-ibx .pv.phone {
+  max-width: 320px;
+}
+.sle-ibx .card {
+  border-radius: var(--sle-radius);
+  border: 1px solid var(--sle-border);
+  background: var(--sle-bg);
+  padding: 10px 12px;
+}
+.sle-ibx .ph {
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  gap: 10px;
+}
+.sle-ibx .av {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--sle-accent-soft);
+  color: var(--sle-accent-ink);
+  font-weight: 700;
+  font-size: 11px;
+}
+.sle-ibx .l1 {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.sle-ibx .l1 b {
+  font-weight: 600;
+}
+.sle-ibx time {
+  font-size: 11.5px;
+  color: var(--sle-muted);
+  white-space: nowrap;
+}
+.sle-ibx .sj {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sle-ibx .pt {
+  color: var(--sle-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.sle-ibx .dk {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+.sle-ibx .dk .fr {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sle-ibx .dk .ln {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sle-ibx .dk .ln span {
+  color: var(--sle-muted);
+}
+.sle-ibx .body {
+  font-style: italic;
+  opacity: 0.85;
+}
+/* style mode is preview + design only */
+.sle-body.style .sle-gut,
+.sle-body.style .sle-trail {
+  display: none;
+}
+.sle-body.style .it:not(.obj):hover {
+  box-shadow: inset 0 0 0 1px var(--sle-input);
+}
+.sle-body.style .it.on {
+  box-shadow: inset 0 0 0 2px var(--sle-accent);
+}
+.sle-body.style .sle-hit {
+  cursor: pointer;
+}
+.sle-note .lnk {
+  font-weight: 600;
+  color: var(--sle-accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  margin-left: 4px;
+}
+.sle-pop.col {
+  flex-direction: column;
+  align-items: stretch;
+}
+.sle-pop .rows {
+  display: grid;
+  gap: 6px;
+}
+.sle-pop .rows label {
+  display: grid;
+  grid-template-columns: 16px 78px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  font-size: 12.5px;
+}
+.sle-pop .rows input[type="checkbox"] {
+  accent-color: var(--sle-accent);
+  width: 15px;
+  height: 15px;
+}
+.sle-pop .rows .sle-in {
+  width: 240px;
+}
+.sle-pop textarea.sle-in {
+  width: 420px;
+  min-height: 120px;
+  font-family: var(--sle-mono);
+  font-size: 12px;
+}
+.sle-pop .acts {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+}
+.m-img.has {
+  background: linear-gradient(135deg, oklch(0.86 0.06 250), oklch(0.9 0.06 160));
+  border-style: solid;
+  color: oklch(0.35 0.03 250);
+}
+@media (max-width: 1100px) {
+  .sle-body {
+    grid-template-columns: minmax(0, 1fr) 300px;
+  }
+  .sle-canvas {
+    padding: 32px 56px;
+  }
+}
+
+/* ===== integration overrides: real blocks render inside the rows ===== */
+.sle .it {
+  padding: 0;
+}
+.sle .it.obj {
+  padding: 0;
+}
+.sle .it:hover {
+  box-shadow: inset 0 0 0 1px var(--sle-input);
+}
+.sle .it.on {
+  box-shadow: inset 0 0 0 2px var(--sle-accent);
+}
+.sle-body.write .it:not(.obj):hover {
+  box-shadow: none;
+}
+.sle-body.write .it.active {
+  box-shadow: none;
+}
+.sle-gut {
+  right: 100%;
+  margin-right: 6px;
+  top: 4px;
+}
+.sle .it.obj .sle-gut {
+  top: 10px;
+}
+.sle-menu button.first {
+  background: var(--sle-panel-2);
+}
+.sle-surface {
+  position: relative;
+}
+.sle-ed.k-h1 {
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+.sle-ed.k-h2,
+.sle-ed.k-h3 {
+  font-weight: 700;
+  line-height: 1.25;
+}
+.sle-ed.k-quote {
+  font-style: italic;
+}
+.sle-mail {
+  overflow: visible;
+}
+.sle-chkwrap {
+  position: relative;
+}
+.sle-doc-h .fld {
+  margin-bottom: 6px;
+}
+.sle-trail {
+  width: 100%;
+  margin: 6px 0 0;
+  padding: 0 24px;
+  text-align: left;
+}
+.sle-body.write .sle-mail {
+  padding-top: 24px;
+}
+.sle-bar {
+  left: calc(100% + 8px);
+}
+.sle-ibx {
+  max-width: 620px;
+}
+fieldset.sle-seg {
+  margin: 0;
+  min-width: 0;
+}
+.sle-menu.grid {
+  overflow-y: auto;
+}
+.sle-pop {
+  overflow: auto;
+  max-width: calc(100vw - 48px);
+}
+.sle-pop .row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.sle-pop .row textarea.sle-in {
+  width: 250px;
+  min-height: 96px;
+}
+.sle-pop .row .sle-in {
+  width: 150px;
+}
+.sle-pop .sle-in:disabled {
+  opacity: 0.5;
+}
+/* ===== text items: one paragraph, heading, list item or quote each ===== */
+.sle-item {
+  position: relative;
+  overflow-wrap: anywhere;
+}
+.sle-item.list {
+  padding-left: 24px;
+}
+.sle-item.k-li::before {
+  content: "•";
+  position: absolute;
+  left: 8px;
+}
+.sle-item.k-ol::before {
+  content: attr(data-n);
+  position: absolute;
+  left: 0;
+  font-variant-numeric: tabular-nums;
+}
+.sle-item.k-quote {
+  padding: 1em 10px;
+  background: #f9f9f9;
+  border-left: 10px solid #ddd;
+}
+.sle-item .sle-ed {
+  min-height: 1em;
+}
+.sle-item .sle-hit {
+  cursor: text;
+}
+.sle-body.write .it.text:hover {
+  box-shadow: none;
+}
+.sle .it.text .sle-gut {
+  top: auto;
+}
+.sle-empty-item {
+  display: inline-block;
+  min-height: 1em;
+}
+.sle-chk .fbrow .sle-in {
+  width: 140px;
+}
+.sle-chk .fbrow .sle-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+/* Clicks on formatted text reach the text, so the caret lands where clicked;
+   the full-size button stays for keyboard users. */
+.sle-item .sle-hit {
+  pointer-events: none;
+}
+.sle-item .sle-hit:focus-visible {
+  pointer-events: auto;
+}
+.sle-inline-hit {
+  display: block;
+  cursor: text;
+  min-height: 1em;
+}
+/* ===== Style mode: the canvas and the panel are two cards, each scrolling
+   on its own; the panel's tabs stay put above its scrolling body ===== */
+.sle-body.style {
+  grid-template-rows: minmax(0, 1fr);
+  gap: 16px;
+  padding: 16px;
+  background: var(--sle-stage);
+}
+.sle-body.style .sle-wrap,
+.sle-body.style .sle-panel {
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--sle-border);
+  border-radius: calc(var(--sle-radius) + 4px);
+  background: var(--sle-panel);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.04);
+}
+.sle-body.style .sle-stage {
+  background: var(--sle-panel);
+}
+.sle-body.style .sle-ph {
+  margin: 0;
+  padding: 12px;
+  border-bottom: 1px solid var(--sle-border);
+}
+.sle-body.style {
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
+}
+.sle-body.style .sle-wrap {
+  display: flex;
+  flex-direction: column;
+}
+/* The checklist and mode switch head the canvas card instead of floating
+   over it, so the controls and inbox row never slide under them. */
+.sle-body.style .sle-mode {
+  position: static;
+  flex: none;
+  justify-content: flex-end;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--sle-border);
+}
+.sle-body.style .sle-stage {
+  padding-top: 12px;
+}
diff --git a/packages/email-editor/src/email-editor.tsx b/packages/email-editor/src/email-editor.tsx
index 3dbecef7..2fe80bdc 100644
--- a/packages/email-editor/src/email-editor.tsx
+++ b/packages/email-editor/src/email-editor.tsx
@@ -1,6 +1,17 @@
-import { Image, Link, Separator, Text } from "@/blocks";
+import {
+  Columns,
+  Conditional,
+  HtmlSnippet,
+  Image,
+  Link,
+  Separator,
+  Social,
+  Spacer,
+  Text,
+} from "@/blocks";
 import type { BlockComponent, BlockRegistry } from "@/types/block-registry";
 import type { Email } from "@/types/email-editor";
+import type { EditorTheme, EditorVariable } from "@/types/editor-ui";
 import { EmailEditor as EmailEditorComponent } from "./components/email-editor";
 
 interface EmailEditorProps<TRenderContext = any> {
@@ -8,13 +19,34 @@ interface EmailEditorProps<TRenderContext = any> {
   onChange: (email: Email) => void;
   blocks?: BlockComponent<any, TRenderContext>[];
   renderContext?: TRenderContext;
+  /** The subject line, edited above the email. Omit to leave it to the host. */
+  subject?: string;
+  onSubjectChange?: (subject: string) => void;
+  /** Merge tags offered while writing. */
+  variables?: EditorVariable[];
+  /** Shown as the sender in inbox previews. */
+  senderName?: string;
+  theme?: EditorTheme;
+  defaultMode?: "write" | "style";
 }
 
+const DEFAULT_BLOCKS = [
+  Text,
+  Link,
+  Image,
+  Separator,
+  Spacer,
+  Columns,
+  Social,
+  HtmlSnippet,
+  Conditional,
+];
+
 function generateBlockRegistry<TRenderContext>(
   blocks?: BlockComponent<any, TRenderContext>[],
 ): BlockRegistry<TRenderContext> {
   const blockRegistry: BlockRegistry<TRenderContext> = {};
-  for (const block of blocks || [Text, Separator, Image, Link]) {
+  for (const block of blocks || DEFAULT_BLOCKS) {
     blockRegistry[block.metadata.name] = block;
   }
   return blockRegistry;
@@ -25,6 +57,7 @@ export function EmailEditor<TRenderContext = any>({
   onChange,
   blocks,
   renderContext,
+  ...rest
 }: EmailEditorProps<TRenderContext>) {
   const blockRegistry = generateBlockRegistry(blocks);
 
@@ -34,6 +67,7 @@ export function EmailEditor<TRenderContext = any>({
       onChange={onChange}
       blockRegistry={blockRegistry}
       renderContext={renderContext}
+      {...rest}
     />
   );
 }
diff --git a/packages/email-editor/src/index.ts b/packages/email-editor/src/index.ts
index 0db56ff7..bf4c6ffe 100644
--- a/packages/email-editor/src/index.ts
+++ b/packages/email-editor/src/index.ts
@@ -5,6 +5,7 @@ export type {
   UploaderProps,
 } from "./blocks/image/types";
 export { EmailEditor } from "./email-editor";
+export type { EditorTheme, EditorVariable } from "./types/editor-ui";
 export { defaultEmail } from "./lib/default-email";
 export { renderEmailToHtml } from "./lib/email-renderer";
 export { normalizeEmail } from "./lib/normalize-email";
diff --git a/packages/email-editor/src/lib/block-choices.ts b/packages/email-editor/src/lib/block-choices.ts
new file mode 100644
index 00000000..b0e1cd3a
--- /dev/null
+++ b/packages/email-editor/src/lib/block-choices.ts
@@ -0,0 +1,132 @@
+import {
+  Heading1,
+  Heading2,
+  List,
+  ListOrdered,
+  MousePointerClick,
+  Pilcrow,
+  TextQuote,
+} from "lucide-react";
+import type { BlockChoice } from "../types/editor-ui";
+import type { BlockRegistry } from "../types/block-registry";
+import { getInsertableBlocks } from "./block-policy";
+
+const TEXT_CHOICES: BlockChoice[] = [
+  {
+    id: "text",
+    name: "Text",
+    description: "Just start writing",
+    keywords: "paragraph",
+    icon: Pilcrow,
+    text: "",
+  },
+  {
+    id: "title",
+    name: "Title",
+    description: "A big heading",
+    keywords: "heading 1 h1",
+    icon: Heading1,
+    text: "# ",
+  },
+  {
+    id: "heading",
+    name: "Heading",
+    description: "A section heading",
+    keywords: "heading 2 h2 subheading",
+    icon: Heading2,
+    text: "## ",
+  },
+  {
+    id: "bullets",
+    name: "Bullets",
+    description: "A bulleted list",
+    keywords: "list bulleted unordered",
+    icon: List,
+    text: "- ",
+  },
+  {
+    id: "numbers",
+    name: "Numbers",
+    description: "A numbered list",
+    keywords: "list numbered ordered",
+    icon: ListOrdered,
+    text: "1. ",
+  },
+  {
+    id: "quote",
+    name: "Quote",
+    description: "Set a quote apart",
+    keywords: "blockquote",
+    icon: TextQuote,
+    text: "> ",
+  },
+];
+
+const BUTTON_CHOICE: BlockChoice = {
+  id: "button",
+  name: "Button",
+  description: "A link people can tap",
+  keywords: "cta link call to action",
+  icon: MousePointerClick,
+  blockType: "link",
+  settings: {
+    text: "Click here",
+    url: "https://",
+    isButton: true,
+    alignment: "left",
+  },
+};
+
+const BLOCK_KEYWORDS: Record<string, string> = {
+  image: "photo picture",
+  separator: "line hr divider",
+  columns: "two side",
+  social: "links profiles",
+  html: "code custom",
+  conditional: "tag section segment if",
+  spacer: "space gap",
+  link: "url",
+};
+
+/** What the insert menu offers, in the order a writer reaches for them. */
+export function getBlockChoices(registry: BlockRegistry): BlockChoice[] {
+  const order = [
+    "image",
+    "separator",
+    "spacer",
+    "columns",
+    "social",
+    "conditional",
+    "html",
+  ];
+  const rest = getInsertableBlocks(registry).filter(
+    (block) => block.metadata.name !== "text" && block.metadata.name !== "link",
+  );
+  rest.sort((a, b) => {
+    const ia = order.indexOf(a.metadata.name);
+    const ib = order.indexOf(b.metadata.name);
+    return (ia === -1 ? order.length : ia) - (ib === -1 ? order.length : ib);
+  });
+  const objects: BlockChoice[] = rest.map((block) => ({
+    id: block.metadata.name,
+    name: block.metadata.name === "separator" ? "Divider" : block.metadata.displayName,
+    description: block.metadata.description,
+    keywords: BLOCK_KEYWORDS[block.metadata.name] ?? "",
+    icon: block.metadata.icon,
+    blockType: block.metadata.name,
+  }));
+  const hasLink = Boolean(registry.link);
+  return [
+    ...(registry.text ? TEXT_CHOICES : []),
+    ...(hasLink ? [BUTTON_CHOICE] : []),
+    ...objects,
+  ];
+}
+
+export function filterChoices(choices: BlockChoice[], query: string): BlockChoice[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return choices;
+  return choices.filter((choice) =>
+    `${choice.name} ${choice.keywords}`.toLowerCase().includes(q),
+  );
+}
diff --git a/packages/email-editor/src/lib/block-policy.test.ts b/packages/email-editor/src/lib/block-policy.test.ts
index 736e041e..7fcea365 100644
--- a/packages/email-editor/src/lib/block-policy.test.ts
+++ b/packages/email-editor/src/lib/block-policy.test.ts
@@ -8,6 +8,7 @@ import {
   canMoveBlock,
   getDefaultBlockSettings,
   getInsertableBlocks,
+  reorderBlocks,
   resolveInsertionIndex,
 } from "./block-policy";
 
@@ -116,3 +117,39 @@ describe("block policy", () => {
     expect(canInsertAfter(footerFree[1], registry)).toBe(true);
   });
 });
+
+describe("reorderBlocks", () => {
+  const registry: BlockRegistry = {
+    text: createBlock("text"),
+    footer: createBlock("footer", {
+      capabilities: { placement: "last", movable: false },
+    }),
+  };
+  const content = [
+    { id: "a", blockType: "text", settings: {} },
+    { id: "b", blockType: "text", settings: {} },
+    { id: "c", blockType: "text", settings: {} },
+    { id: "f", blockType: "footer", settings: {} },
+  ];
+
+  it("moves a block to an insertion index", () => {
+    expect(reorderBlocks(content, "a", 3, registry)?.map((b) => b.id)).toEqual([
+      "b",
+      "c",
+      "a",
+      "f",
+    ]);
+    expect(reorderBlocks(content, "c", 0, registry)?.map((b) => b.id)).toEqual([
+      "c",
+      "a",
+      "b",
+      "f",
+    ]);
+  });
+
+  it("refuses no-op moves, the footer, and anything past the footer", () => {
+    expect(reorderBlocks(content, "a", 1, registry)).toBeNull();
+    expect(reorderBlocks(content, "f", 0, registry)).toBeNull();
+    expect(reorderBlocks(content, "a", 4, registry)).toBeNull();
+  });
+});
diff --git a/packages/email-editor/src/lib/block-policy.ts b/packages/email-editor/src/lib/block-policy.ts
index 5d276d14..b632ff9e 100644
--- a/packages/email-editor/src/lib/block-policy.ts
+++ b/packages/email-editor/src/lib/block-policy.ts
@@ -130,3 +130,27 @@ export function canInsertAfter(
 ): boolean {
   return getBlockCapabilities(block.blockType, blockRegistry).placement !== "last";
 }
+
+/** Moves a block to `targetIndex` (an insertion index in the current list),
+ * or returns null when its type or the placement rules don't allow it. */
+export function reorderBlocks(
+  content: EmailBlock[],
+  blockId: string,
+  targetIndex: number,
+  blockRegistry: BlockRegistry,
+): EmailBlock[] | null {
+  const from = content.findIndex((block) => block.id === blockId);
+  if (from === -1) return null;
+  if (!getBlockCapabilities(content[from].blockType, blockRegistry).movable) {
+    return null;
+  }
+  const next = [...content];
+  const [moved] = next.splice(from, 1);
+  const to = Math.max(
+    0,
+    Math.min(from < targetIndex ? targetIndex - 1 : targetIndex, next.length),
+  );
+  if (to === from) return null;
+  next.splice(to, 0, moved);
+  return hasValidPlacement(next, blockRegistry) ? next : null;
+}
diff --git a/packages/email-editor/src/lib/checklist.test.ts b/packages/email-editor/src/lib/checklist.test.ts
new file mode 100644
index 00000000..89c00642
--- /dev/null
+++ b/packages/email-editor/src/lib/checklist.test.ts
@@ -0,0 +1,169 @@
+import { describe, expect, it } from "bun:test";
+import { checklistLabel, computeChecklist } from "./checklist";
+import { defaultEmail } from "./default-email";
+import type { Email } from "../types/email-editor";
+
+function email(content: Email["content"], previewText = "A preview"): Email {
+  return {
+    ...defaultEmail,
+    meta: { previewText },
+    content: content.map((block, index) => ({ ...block, id: `b${index}` })),
+  };
+}
+
+const text = { blockType: "text", settings: { content: "Hello" } };
+const ids = (items: ReturnType<typeof computeChecklist>) => items.map((i) => i.id);
+
+describe("computeChecklist", () => {
+  it("is clean for a complete email", () => {
+    expect(
+      computeChecklist({ email: email([text]), subject: "Welcome aboard" }),
+    ).toEqual([]);
+  });
+
+  it("asks for a subject only when the host edits one", () => {
+    expect(ids(computeChecklist({ email: email([text]), subject: "  " }))).toEqual([
+      "subject-missing",
+    ]);
+    expect(computeChecklist({ email: email([text]) })).toEqual([]);
+  });
+
+  it("flags spammy or long subjects as should-fix", () => {
+    const long = computeChecklist({ email: email([text]), subject: "x".repeat(61) });
+    expect(long[0].fixLabel).toBe("Shorten");
+    expect(long.map((i) => [i.id, i.level])).toEqual([["subject-long", "should"]]);
+    expect(
+      ids(computeChecklist({ email: email([text]), subject: "HUGE SALE!!" })),
+    ).toEqual(["subject-shouting", "subject-exclaim"]);
+  });
+
+  it("flags missing and over-long preview text", () => {
+    expect(ids(computeChecklist({ email: email([text], ""), subject: "Hi" }))).toEqual([
+      "preview-missing",
+    ]);
+    expect(
+      ids(computeChecklist({ email: email([text], "p".repeat(111)), subject: "Hi" })),
+    ).toEqual(["preview-long"]);
+  });
+
+  it("flags buttons without a link and puts must-fix items first", () => {
+    const items = computeChecklist({
+      email: email(
+        [
+          text,
+          {
+            blockType: "link",
+            settings: { text: "Go", url: "https://", isButton: true },
+          },
+          { blockType: "image", settings: { src: "https://x/y.png" } },
+        ],
+        "",
+      ),
+      subject: "Hi",
+    });
+    expect(items.map((i) => [i.level, i.title])).toEqual([
+      ["must", "Button “Go” has no link"],
+      ["should", "Add preview text"],
+      ["should", "Image has no alt text"],
+    ]);
+    expect(items[0].target).toEqual({ type: "block", blockId: "b1" });
+  });
+
+  it("flags empty social, image and conditional blocks and an empty email", () => {
+    const items = computeChecklist({
+      email: email([
+        { blockType: "social", settings: { links: [] } },
+        { blockType: "image", settings: { src: "" } },
+        { blockType: "conditional", settings: { tag: "", content: "x" } },
+      ]),
+      subject: "Hi",
+    });
+    expect(ids(items).sort()).toEqual(
+      ["empty", "image-b1", "social-b0", "tag-b2"].sort(),
+    );
+  });
+
+  it("flags each ticked social network without an address as must-fix", () => {
+    const items = computeChecklist({
+      email: email([
+        text,
+        {
+          blockType: "social",
+          settings: {
+            links: [
+              { network: "x", url: "" },
+              { network: "instagram", url: "https://instagram.com/a" },
+            ],
+          },
+        },
+      ]),
+      subject: "Hi",
+    });
+    expect(items.map((i) => [i.level, i.title])).toEqual([
+      ["must", "X link is missing"],
+    ]);
+  });
+
+  it("accepts mailto and merge-tag links on buttons", () => {
+    for (const url of ["mailto:a@b.co", "{{ event.url }}", "https://x.co/a"]) {
+      const items = computeChecklist({
+        email: email([text, { blockType: "link", settings: { text: "Go", url } }]),
+        subject: "Hi",
+      });
+      expect(items).toEqual([]);
+    }
+  });
+
+  it("offers a fallback for merge tags that can be blank, once per tag", () => {
+    const items = computeChecklist({
+      email: email([
+        {
+          blockType: "text",
+          settings: { content: "Hi {{ subscriber.name }}, {{ subscriber.email }}" },
+        },
+        { blockType: "text", settings: { content: "Bye {{ subscriber.name }}" } },
+        {
+          blockType: "text",
+          settings: { content: 'Plan {{ event.plan | default: "free" }}' },
+        },
+      ]),
+      subject: "Hi",
+    });
+    expect(items.map((i) => [i.id, i.fallback?.path, i.target])).toEqual([
+      ["fallback-subscriber.name", "subscriber.name", { type: "block", blockId: "b0" }],
+    ]);
+  });
+
+  it("does not ask to write when the editor has no text block", () => {
+    expect(
+      ids(computeChecklist({ email: email([]), subject: "Hi", canWrite: false })),
+    ).toEqual([]);
+  });
+
+  it("labels the button by what needs doing", () => {
+    expect(checklistLabel([])).toBe("Ready to send");
+    const must = computeChecklist({ email: email([text]), subject: "" });
+    expect(checklistLabel(must)).toBe("1 to fix");
+    const should = computeChecklist({ email: email([text], ""), subject: "Hi" });
+    expect(checklistLabel(should)).toBe("1 to check");
+  });
+
+  it("quotes the start of the email the way an inbox shows it", () => {
+    const items = computeChecklist({
+      email: email(
+        [
+          {
+            blockType: "text",
+            settings: {
+              content:
+                '# Hi {{ subscriber.name | default: "there" }}, {{ event.plan }}',
+            },
+          },
+        ],
+        "",
+      ),
+      subject: "Hi",
+    });
+    expect(items[0].detail).toContain("“Hi there, {plan}");
+  });
+});
diff --git a/packages/email-editor/src/lib/checklist.ts b/packages/email-editor/src/lib/checklist.ts
new file mode 100644
index 00000000..65d0df43
--- /dev/null
+++ b/packages/email-editor/src/lib/checklist.ts
@@ -0,0 +1,270 @@
+import type { Email, EmailBlock } from "../types/email-editor";
+import { mayBeBlank, tagUses } from "./inline-markdown";
+
+export interface ChecklistItem {
+  id: string;
+  level: "must" | "should";
+  title: string;
+  detail: string;
+  /** Where to jump to fix it. */
+  target: { type: "subject" | "preview" } | { type: "block"; blockId: string };
+  /** The fix button's label. */
+  fixLabel: string;
+  /** Set for a merge tag without a fallback: the checklist offers to add one. */
+  fallback?: { path: string };
+}
+
+const NETWORK_NAMES: Record<string, string> = {
+  website: "Website",
+  instagram: "Instagram",
+  linkedin: "LinkedIn",
+  youtube: "YouTube",
+  x: "X",
+  facebook: "Facebook",
+  tiktok: "TikTok",
+};
+
+/** A link someone can follow: a web address, an email address, or a merge tag. */
+export function isUsableUrl(url: unknown): boolean {
+  return (
+    typeof url === "string" &&
+    /^(https?:\/\/[^\s]+\.[^\s]+|mailto:\S+|\{\{.+\}\})$/.test(url.trim())
+  );
+}
+
+/** The text of a block that a contact reads, where merge tags can appear. */
+function readableText(block: EmailBlock): string[] {
+  const s = block.settings ?? {};
+  return [s.content, s.left, s.right, s.text].filter(
+    (value): value is string => typeof value === "string",
+  );
+}
+
+function label(block: EmailBlock) {
+  return block.blockType === "link" && block.settings?.isButton ? "Button" : "Link";
+}
+
+/** Things worth fixing before sending. "must" would break or embarrass the
+ * email; "should" is deliverability and polish. Pure, so it can run on every edit. */
+export function computeChecklist({
+  email,
+  subject,
+  canWrite = true,
+}: {
+  email: Email;
+  /** Omit when the host doesn't edit a subject in the editor. */
+  subject?: string;
+  /** Whether the editor has a text block to write in. */
+  canWrite?: boolean;
+}): ChecklistItem[] {
+  const items: ChecklistItem[] = [];
+  const subjectTarget = { type: "subject" } as const;
+
+  if (subject !== undefined) {
+    const trimmed = subject.trim();
+    if (trimmed === "") {
+      items.push({
+        id: "subject-missing",
+        level: "must",
+        title: "Add a subject line",
+        detail: "It's the first thing people see in their inbox.",
+        target: subjectTarget,
+        fixLabel: "Add",
+      });
+    } else {
+      if (trimmed.length > 60) {
+        items.push({
+          id: "subject-long",
+          level: "should",
+          title: "Subject may be cut off",
+          detail: `${trimmed.length} characters. Phones show about the first 40.`,
+          target: subjectTarget,
+          fixLabel: "Shorten",
+        });
+      }
+      const letters = trimmed.replace(/[^A-Za-z]/g, "");
+      if (letters.length >= 6 && letters === letters.toUpperCase()) {
+        items.push({
+          id: "subject-shouting",
+          level: "should",
+          title: "Avoid an all-caps subject",
+          detail: "Shouting subjects are a common spam signal.",
+          target: subjectTarget,
+          fixLabel: "Edit",
+        });
+      }
+      if (/!{2,}/.test(trimmed)) {
+        items.push({
+          id: "subject-exclaim",
+          level: "should",
+          title: "Use at most one exclamation mark",
+          detail: "Repeated exclamation marks look like spam.",
+          target: subjectTarget,
+          fixLabel: "Edit",
+        });
+      }
+    }
+  }
+
+  const firstWords = email.content
+    .filter((block) => block.blockType === "text")
+    .map((block) =>
+      String(block.settings?.content ?? "")
+        // An inbox shows what a contact gets: the fallback, or the field's name.
+        .replace(
+          /\{\{-?\s*([\w.]+)(?:\s*\|\s*default:\s*"([^"]*)")?\s*-?\}\}/g,
+          (_tag, path: string, fallback?: string) =>
+            fallback ?? `{${path.split(".").pop()}}`,
+        )
+        .replace(/[#>*_[\]()-]/g, ""),
+    )
+    .join(" ")
+    .replace(/\s+/g, " ")
+    .trim();
+  const preview = email.meta?.previewText?.trim() ?? "";
+  if (preview === "") {
+    items.push({
+      id: "preview-missing",
+      level: "should",
+      title: "Add preview text",
+      detail: firstWords
+        ? `Without it, inboxes show the start of the email: “${firstWords.slice(0, 48)}…”`
+        : "Without it, inboxes show the start of the email instead.",
+      target: { type: "preview" },
+      fixLabel: "Add",
+    });
+  } else if (preview.length > 110) {
+    items.push({
+      id: "preview-long",
+      level: "should",
+      title: "Shorten the preview text",
+      detail: "Inboxes show about 40 to 110 characters.",
+      target: { type: "preview" },
+      fixLabel: "Shorten",
+    });
+  }
+
+  const fallbackTargets = new Map<string, string>();
+  for (const block of email.content) {
+    if (!block.id) continue;
+    const target = { type: "block", blockId: block.id } as const;
+    const settings = block.settings ?? {};
+
+    if (block.blockType === "link" && !isUsableUrl(settings.url)) {
+      items.push({
+        id: `url-${block.id}`,
+        level: "must",
+        title: `${label(block)} “${settings.text || label(block)}” has no link`,
+        detail: "Clicking it would go nowhere.",
+        target,
+        fixLabel: "Add link",
+      });
+    }
+    if (block.blockType === "image") {
+      if (!settings.src) {
+        items.push({
+          id: `image-${block.id}`,
+          level: "must",
+          title: "An image block is empty",
+          detail: "Choose an image or remove the block.",
+          target,
+          fixLabel: "Show",
+        });
+      } else if (!settings.alt?.trim() || settings.alt === "Image") {
+        items.push({
+          id: `alt-${block.id}`,
+          level: "should",
+          title: "Image has no alt text",
+          detail: "Shown when images are blocked, and read by screen readers.",
+          target,
+          fixLabel: "Add",
+        });
+      }
+    }
+    if (block.blockType === "social") {
+      const links: { network: string; url?: string }[] = settings.links ?? [];
+      for (const link of links) {
+        if (!/^https?:\/\/\S+\.\S+/.test(link.url?.trim() ?? "")) {
+          const name = NETWORK_NAMES[link.network] ?? link.network;
+          items.push({
+            id: `social-${block.id}-${link.network}`,
+            level: "must",
+            title: `${name} link is missing`,
+            detail: `The ${name} button in your social links has no address.`,
+            target,
+            fixLabel: "Add",
+          });
+        }
+      }
+      if (links.length === 0) {
+        items.push({
+          id: `social-${block.id}`,
+          level: "should",
+          title: "Add your social links",
+          detail: "The social block has no links yet, so it won't appear in the email.",
+          target,
+          fixLabel: "Add",
+        });
+      }
+    }
+    if (block.blockType === "conditional" && !settings.tag) {
+      items.push({
+        id: `tag-${block.id}`,
+        level: "must",
+        title: "Pick a tag for the section",
+        detail: "A section without a tag is left out of the email.",
+        target,
+        fixLabel: "Show",
+      });
+    }
+    for (const text of readableText(block)) {
+      for (const use of tagUses(text)) {
+        if (
+          !use.hasFallback &&
+          mayBeBlank(use.path) &&
+          !fallbackTargets.has(use.path)
+        ) {
+          fallbackTargets.set(use.path, block.id);
+        }
+      }
+    }
+  }
+
+  for (const [path, blockId] of fallbackTargets) {
+    items.push({
+      id: `fallback-${path}`,
+      level: "should",
+      title: `“${path.split(".").pop()}” has no fallback`,
+      detail: "Subscribers without one would see a blank, like “Hi ,”.",
+      target: { type: "block", blockId },
+      fixLabel: "Show",
+      fallback: { path },
+    });
+  }
+
+  const hasWords = email.content.some(
+    (block) =>
+      (block.blockType === "text" && String(block.settings?.content ?? "").trim()) ||
+      block.blockType === "columns" ||
+      block.blockType === "html",
+  );
+  if (canWrite && !hasWords) {
+    items.push({
+      id: "empty",
+      level: "must",
+      title: "Write something",
+      detail: "The email has no text yet.",
+      target: subjectTarget,
+      fixLabel: "Write",
+    });
+  }
+
+  return items.sort((a, b) => (a.level === b.level ? 0 : a.level === "must" ? -1 : 1));
+}
+
+/** The checklist button's words. */
+export function checklistLabel(items: ChecklistItem[]): string {
+  const must = items.filter((item) => item.level === "must").length;
+  if (items.length === 0) return "Ready to send";
+  return must ? `${must} to fix` : `${items.length} to check`;
+}
diff --git a/packages/email-editor/src/lib/email-renderer.test.tsx b/packages/email-editor/src/lib/email-renderer.test.tsx
index 1b57958d..6a9a62fb 100644
--- a/packages/email-editor/src/lib/email-renderer.test.tsx
+++ b/packages/email-editor/src/lib/email-renderer.test.tsx
@@ -117,3 +117,99 @@ describe("renderEmailToHtml", () => {
     expect(html).toContain("Error: render exploded");
   });
 });
+
+describe("new blocks", () => {
+  const withBlock = (blockType: string, settings: Record<string, unknown>) => ({
+    ...defaultEmail,
+    content: [{ blockType, settings }],
+  });
+
+  it("renders a spacer of the requested height", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("spacer", { height: "40px" }),
+    });
+    expect(html).toContain("height:40px");
+  });
+
+  it("renders both columns with their markdown", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("columns", {
+        left: "**Left**",
+        right: "Right *text*",
+        ratio: "12",
+        stack: true,
+      }),
+    });
+    expect(html).toContain("<strong");
+    expect(html).toContain("Left");
+    expect(html).toContain("Right");
+    expect(html).toContain("width:33%");
+    expect(html).toContain("width:67%");
+    expect(html).toContain("max-width:480px");
+  });
+
+  it("renders only social links with a web url", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("social", {
+        links: [
+          { network: "instagram", url: "https://instagram.com/sendlit" },
+          { network: "x", url: "javascript:alert(1)" },
+          { network: "youtube", url: "" },
+        ],
+      }),
+    });
+    expect(html).toContain("https://instagram.com/sendlit");
+    expect(html).toContain("Instagram");
+    expect(html).not.toContain("javascript:");
+    expect(html).not.toContain("YouTube");
+  });
+
+  it("sends the code of an html block as-is", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("html", { code: '<p class="x">Hello <b>there</b></p>' }),
+    });
+    expect(html).toContain('<p class="x">Hello <b>there</b></p>');
+  });
+
+  it("wraps a conditional section in Liquid when sending", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("conditional", {
+        tag: "customer",
+        has: true,
+        content: "Members only",
+      }),
+    });
+    expect(html).toContain("{% if subscriber.tags contains");
+    expect(html).toContain("customer");
+    expect(html).toContain("Members only");
+    expect(html).toContain("{% endif %}");
+  });
+
+  it("uses unless for contacts without the tag", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("conditional", { tag: "customer", has: false, content: "Hi" }),
+    });
+    expect(html).toContain("{% unless subscriber.tags contains");
+    expect(html).toContain("{% endunless %}");
+  });
+
+  it("drops a conditional section whose tag could break the Liquid expression", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("conditional", {
+        tag: 'x" %}{% endif %}secret{% if "y',
+        content: "Secret offer",
+      }),
+    });
+    expect(html).not.toContain("Secret offer");
+    expect(html).not.toContain("{% if");
+  });
+
+  it("shows conditional sections to everyone in previews", async () => {
+    const html = await renderEmailToHtml({
+      email: withBlock("conditional", { tag: "customer", content: "Members only" }),
+      showConditionals: true,
+    });
+    expect(html).toContain("Members only");
+    expect(html).not.toContain("{% if");
+  });
+});
diff --git a/packages/email-editor/src/lib/email-renderer.tsx b/packages/email-editor/src/lib/email-renderer.tsx
index 263bf276..c25abf0a 100644
--- a/packages/email-editor/src/lib/email-renderer.tsx
+++ b/packages/email-editor/src/lib/email-renderer.tsx
@@ -1,7 +1,17 @@
 import { Body, Container, Head, Html, Preview } from "@react-email/components";
 import { pretty, render } from "@react-email/render";
 import React from "react";
-import { Image, Link as LinkBlock, Separator, Text } from "@/blocks";
+import {
+  Columns,
+  Conditional,
+  HtmlSnippet,
+  Image,
+  Link as LinkBlock,
+  Separator,
+  Social,
+  Spacer,
+  Text,
+} from "@/blocks";
 import type { LinkBlockSettings } from "@/blocks/link/types";
 import type { BlockComponent, BlockRegistry } from "../types/block-registry";
 import type { Email, EmailBlock } from "../types/email-editor";
@@ -47,11 +57,13 @@ export function EmailTemplate({
   utmParams,
   blockRegistry,
   renderContext,
+  showConditionals,
 }: {
   email: Email;
   utmParams?: UtmParams;
   blockRegistry: BlockRegistry;
   renderContext?: unknown;
+  showConditionals?: boolean;
 }) {
   // Function to render a block based on its type
   const renderBlock = (block: EmailBlock) => {
@@ -84,6 +96,7 @@ export function EmailTemplate({
         block={modifiedBlock}
         style={email.style}
         renderContext={renderContext}
+        showConditionals={showConditionals}
       />
     );
   };
@@ -129,16 +142,31 @@ export async function renderEmailToHtml({
   utmParams,
   blocks,
   renderContext,
+  showConditionals,
 }: {
   email: Email;
   utmParams?: UtmParams;
   blocks?: BlockComponent<any, any>[];
   renderContext?: unknown;
+  /** Previews show conditional sections to everyone. Leave unset when
+   * rendering mail to send, so they are wrapped in Liquid conditions. */
+  showConditionals?: boolean;
 }): Promise<string> {
   try {
     // Create block registry from blocks or use defaults
     const blockRegistry: BlockRegistry = {};
-    const defaultBlocks = [Text, LinkBlock, Separator, Image, ...(blocks ?? [])];
+    const defaultBlocks = [
+      Text,
+      LinkBlock,
+      Separator,
+      Image,
+      Spacer,
+      Columns,
+      Social,
+      HtmlSnippet,
+      Conditional,
+      ...(blocks ?? []),
+    ];
 
     for (const block of defaultBlocks) {
       blockRegistry[block.metadata.name] = block;
@@ -150,6 +178,7 @@ export async function renderEmailToHtml({
         utmParams={utmParams}
         blockRegistry={blockRegistry}
         renderContext={renderContext}
+        showConditionals={showConditionals}
       />
     );
     const renderedHtml = await render(template);
diff --git a/packages/email-editor/src/lib/history.test.ts b/packages/email-editor/src/lib/history.test.ts
new file mode 100644
index 00000000..0559fac9
--- /dev/null
+++ b/packages/email-editor/src/lib/history.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "bun:test";
+import { History } from "./history";
+
+describe("History", () => {
+  it("undoes and redoes", () => {
+    const history = new History<string>();
+    history.record("a");
+    history.record("b");
+    expect(history.undo("c")).toBe("b");
+    expect(history.undo("b")).toBe("a");
+    expect(history.undo("a")).toBeUndefined();
+    expect(history.redo("a")).toBe("b");
+    expect(history.canRedo).toBe(true);
+  });
+
+  it("coalesces quick edits that share a key", () => {
+    const history = new History<string>();
+    history.record("a", "block-1", 0);
+    history.record("ab", "block-1", 100);
+    history.record("abc", "block-1", 200);
+    expect(history.undo("abcd")).toBe("a");
+    expect(history.canUndo).toBe(false);
+  });
+
+  it("starts a new step after a pause or another key", () => {
+    const history = new History<string>();
+    history.record("a", "x", 0);
+    history.record("b", "x", 5000);
+    history.record("c", "y", 5100);
+    expect(history.undo("d")).toBe("c");
+    expect(history.undo("c")).toBe("b");
+    expect(history.undo("b")).toBe("a");
+  });
+
+  it("drops redo history on a new edit", () => {
+    const history = new History<string>();
+    history.record("a");
+    history.undo("b");
+    history.record("a");
+    expect(history.canRedo).toBe(false);
+  });
+});
diff --git a/packages/email-editor/src/lib/history.ts b/packages/email-editor/src/lib/history.ts
new file mode 100644
index 00000000..c9103ec7
--- /dev/null
+++ b/packages/email-editor/src/lib/history.ts
@@ -0,0 +1,57 @@
+/**
+ * Undo/redo for editor snapshots. Rapid edits sharing a `key` (typing in the
+ * same block) coalesce into one step so undo doesn't go letter by letter.
+ */
+export class History<T> {
+  private past: T[] = [];
+  private future: T[] = [];
+  private lastKey: string | null = null;
+  private lastAt = 0;
+
+  constructor(
+    private readonly limit = 100,
+    private readonly coalesceMs = 800,
+  ) {}
+
+  /** Record `before`, the state that is about to be replaced. */
+  record(before: T, key: string | null = null, now = Date.now()) {
+    const continuing =
+      key !== null && key === this.lastKey && now - this.lastAt < this.coalesceMs;
+    this.lastKey = key;
+    this.lastAt = now;
+    this.future = [];
+    if (continuing) return;
+    this.past.push(before);
+    if (this.past.length > this.limit) this.past.shift();
+  }
+
+  get canUndo() {
+    return this.past.length > 0;
+  }
+
+  get canRedo() {
+    return this.future.length > 0;
+  }
+
+  undo(current: T): T | undefined {
+    const previous = this.past.pop();
+    if (previous === undefined) return undefined;
+    this.future.unshift(current);
+    this.lastKey = null;
+    return previous;
+  }
+
+  redo(current: T): T | undefined {
+    const next = this.future.shift();
+    if (next === undefined) return undefined;
+    this.past.push(current);
+    this.lastKey = null;
+    return next;
+  }
+
+  reset() {
+    this.past = [];
+    this.future = [];
+    this.lastKey = null;
+  }
+}
diff --git a/packages/email-editor/src/lib/inline-markdown.test.ts b/packages/email-editor/src/lib/inline-markdown.test.ts
new file mode 100644
index 00000000..db8db220
--- /dev/null
+++ b/packages/email-editor/src/lib/inline-markdown.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "bun:test";
+import { mayBeBlank, segments, setFallback, tagUses } from "./inline-markdown";
+
+describe("segments", () => {
+  it("splits bold, italic, links and merge tags", () => {
+    expect(
+      segments(
+        'Hi {{ subscriber.name | default: "there" }}, **read** *this* [now](https://x.y)',
+      ),
+    ).toEqual([
+      { type: "text", text: "Hi " },
+      { type: "tag", path: "subscriber.name", fallback: "there" },
+      { type: "text", text: ", " },
+      { type: "bold", text: "read" },
+      { type: "text", text: " " },
+      { type: "italic", text: "this" },
+      { type: "text", text: " " },
+      { type: "link", text: "now", url: "https://x.y" },
+    ]);
+  });
+});
+
+describe("fallbacks", () => {
+  it("finds uses with and without a fallback", () => {
+    expect(tagUses('{{ subscriber.name }} {{ event.plan | default: "free" }}')).toEqual(
+      [
+        { path: "subscriber.name", hasFallback: false },
+        { path: "event.plan", hasFallback: true },
+      ],
+    );
+  });
+
+  it("sets, replaces and clears a fallback on every use", () => {
+    const text = 'Hi {{ subscriber.name }} and {{subscriber.name | default: "x"}}';
+    const set = setFallback(text, "subscriber.name", 'th"ere');
+    expect(set).toBe(
+      'Hi {{ subscriber.name | default: "there" }} and {{ subscriber.name | default: "there" }}',
+    );
+    expect(setFallback(set, "subscriber.name", "")).toBe(
+      "Hi {{ subscriber.name }} and {{ subscriber.name }}",
+    );
+  });
+
+  it("only asks for fallbacks that can be blank", () => {
+    expect(mayBeBlank("subscriber.name")).toBe(true);
+    expect(mayBeBlank("event.plan")).toBe(true);
+    expect(mayBeBlank("subscriber.email")).toBe(false);
+    expect(mayBeBlank("view_in_browser_url")).toBe(false);
+    expect(mayBeBlank("customer.name")).toBe(false);
+  });
+});
diff --git a/packages/email-editor/src/lib/inline-markdown.ts b/packages/email-editor/src/lib/inline-markdown.ts
new file mode 100644
index 00000000..7217d23a
--- /dev/null
+++ b/packages/email-editor/src/lib/inline-markdown.ts
@@ -0,0 +1,87 @@
+/** Inline pieces of an item, for showing it while not being edited. */
+export type Segment =
+  | { type: "text"; text: string }
+  | { type: "bold"; text: string }
+  | { type: "italic"; text: string }
+  | { type: "link"; text: string; url: string }
+  | { type: "tag"; path: string; fallback?: string };
+
+const TOKEN =
+  /(\*\*[^*]+\*\*|__[^_]+__|\*[^*\s][^*]*\*|_[^_\s][^_]*_|\[[^\]]+\]\([^)]+\)|\{\{-?\s*[\w.]+(?:\s*\|\s*default:\s*"[^"]*")?\s*-?\}\})/;
+
+/** Where a piece sits in the markdown: `from` is the offset of its first
+ * visible character, `end` the offset just after the whole piece. */
+export type PlacedSegment = Segment & { from: number; end: number };
+
+/** Splits inline markdown into bold, italic, link and merge-tag pieces. */
+export function segments(text: string): Segment[] {
+  return placedSegments(text).map(
+    ({ from: _from, end: _end, ...segment }) => segment as Segment,
+  );
+}
+
+/** `segments`, with where each piece sits in the markdown, so a click on the
+ * formatted text can put the caret at the same place in the source. */
+export function placedSegments(text: string): PlacedSegment[] {
+  let offset = 0;
+  return text
+    .split(TOKEN)
+    .filter(Boolean)
+    .map((part): PlacedSegment => {
+      const start = offset;
+      offset += part.length;
+      const segment = classify(part);
+      const lead =
+        segment.type === "bold"
+          ? 2
+          : segment.type === "italic" || segment.type === "link"
+            ? 1
+            : 0;
+      return { ...segment, from: start + lead, end: offset };
+    });
+}
+
+function classify(part: string): Segment {
+  const tag = part.match(
+    /^\{\{-?\s*([\w.]+)(?:\s*\|\s*default:\s*"([^"]*)")?\s*-?\}\}$/,
+  );
+  if (tag) return { type: "tag", path: tag[1], fallback: tag[2] };
+  if (/^(\*\*|__).+(\*\*|__)$/.test(part)) {
+    return { type: "bold", text: part.slice(2, -2) };
+  }
+  if (/^[*_].+[*_]$/.test(part) && part.length > 2) {
+    return { type: "italic", text: part.slice(1, -1) };
+  }
+  const link = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+  if (link) return { type: "link", text: link[1], url: link[2] };
+  return { type: "text", text: part };
+}
+
+/** Merge-tag paths that can come out blank for some contacts: a missing name,
+ * no tags, or an event property the event didn't send. */
+export function mayBeBlank(path: string): boolean {
+  if (path === "subscriber.email") return false;
+  return path.startsWith("subscriber.") || path.startsWith("event.");
+}
+
+/** Every `{{ path }}` in some text, and whether each use has a fallback. */
+export function tagUses(text: string): { path: string; hasFallback: boolean }[] {
+  return Array.from(
+    text.matchAll(/\{\{-?\s*([\w.]+)(\s*\|\s*default:\s*"[^"]*")?\s*-?\}\}/g),
+    (match) => ({ path: match[1], hasFallback: Boolean(match[2]) }),
+  );
+}
+
+/** Gives every use of `path` the fallback `value` (or removes it when empty). */
+export function setFallback(text: string, path: string, value: string): string {
+  const escaped = path.replace(/\./g, "\\.");
+  const pattern = new RegExp(
+    `\\{\\{-?\\s*${escaped}(?:\\s*\\|\\s*default:\\s*"[^"]*")?\\s*-?\\}\\}`,
+    "g",
+  );
+  const clean = value.replace(/"/g, "").trim();
+  return text.replace(
+    pattern,
+    clean ? `{{ ${path} | default: "${clean}" }}` : `{{ ${path} }}`,
+  );
+}
diff --git a/packages/email-editor/src/lib/markdown-content.tsx b/packages/email-editor/src/lib/markdown-content.tsx
new file mode 100644
index 00000000..0cba071e
--- /dev/null
+++ b/packages/email-editor/src/lib/markdown-content.tsx
@@ -0,0 +1,89 @@
+import { Markdown } from "@react-email/components";
+import type { EmailStyle } from "@/types/email-editor";
+
+export interface MarkdownContentOptions {
+  fontFamily?: string;
+  fontSize?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  textTransform?: "uppercase" | "lowercase" | "capitalize" | "none";
+  textDecoration?: "underline" | "none" | "line-through";
+  alignment?: "left" | "center" | "right" | "justify";
+}
+
+/**
+ * Renders email markdown with the email's typography. Shared by every block
+ * that holds markdown (text, columns, conditional section) so they all look
+ * the same in the editor, the preview and the sent email.
+ */
+export function MarkdownContent({
+  content,
+  style,
+  options = {},
+}: {
+  content: string;
+  style?: EmailStyle;
+  options?: MarkdownContentOptions;
+}) {
+  const commonTextStyles = {
+    fontFamily:
+      options.fontFamily || style?.typography.text.fontFamily || "Arial, sans-serif",
+    fontSize: options.fontSize || style?.typography.text.fontSize || "16px",
+    lineHeight: options.lineHeight || style?.typography.text.lineHeight || "1.5",
+    letterSpacing:
+      options.letterSpacing || style?.typography.text.letterSpacing || "normal",
+    textTransform:
+      options.textTransform || style?.typography.text.textTransform || "none",
+    textDecoration:
+      options.textDecoration || style?.typography.text.textDecoration || "none",
+  };
+
+  const headerFontFamily =
+    options.fontFamily || style?.typography.header.fontFamily || "Arial, sans-serif";
+  const baseSize = Number.parseInt(options.fontSize || "16", 10);
+  const heading = (multiplier: number, minimum: number) => ({
+    fontWeight: "bold",
+    fontSize: `${Math.max(baseSize * multiplier, minimum)}px`,
+    fontFamily: headerFontFamily,
+    margin: "16px 0 8px",
+  });
+
+  return (
+    <Markdown
+      markdownCustomStyles={{
+        h1: heading(2, 32),
+        h2: heading(1.5, 24),
+        h3: heading(1.25, 20),
+        h4: heading(1.125, 18),
+        h5: heading(1.0625, 16),
+        h6: heading(1.03125, 14),
+        p: { ...commonTextStyles, margin: "0 0 16px" },
+        ul: {
+          ...commonTextStyles,
+          margin: "0 0 16px",
+          paddingLeft: "24px",
+          listStyleType: "disc",
+        },
+        ol: {
+          ...commonTextStyles,
+          margin: "0 0 16px",
+          paddingLeft: "24px",
+          listStyleType: "decimal",
+        },
+        li: { ...commonTextStyles, margin: "4px 0" },
+        link: {
+          ...commonTextStyles,
+          color: style?.colors.accent || "inherit",
+        },
+      }}
+      markdownContainerStyles={{
+        fontFamily: options.fontFamily || "Arial, sans-serif",
+        textAlign: options.alignment || "left",
+        fontSize: options.fontSize || "16px",
+        lineHeight: options.lineHeight || "1.5",
+      }}
+    >
+      {content}
+    </Markdown>
+  );
+}
diff --git a/packages/email-editor/src/lib/markdown-edit.test.ts b/packages/email-editor/src/lib/markdown-edit.test.ts
new file mode 100644
index 00000000..3ccca9e7
--- /dev/null
+++ b/packages/email-editor/src/lib/markdown-edit.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from "bun:test";
+import {
+  continueList,
+  countWords,
+  insertVariable,
+  linkSelection,
+  slashQuery,
+  toggleLinePrefix,
+  variableTrigger,
+  wrapSelection,
+} from "./markdown-edit";
+
+describe("wrapSelection", () => {
+  it("wraps and unwraps the selection", () => {
+    const wrapped = wrapSelection("hello world", 6, 11, "**");
+    expect(wrapped.text).toBe("hello **world**");
+    expect(wrapped.text.slice(wrapped.start, wrapped.end)).toBe("world");
+    const back = wrapSelection(wrapped.text, wrapped.start, wrapped.end, "**");
+    expect(back.text).toBe("hello world");
+  });
+
+  it("inserts a placeholder with nothing selected", () => {
+    const edit = wrapSelection("", 0, 0, "*");
+    expect(edit.text).toBe("*text*");
+    expect(edit.text.slice(edit.start, edit.end)).toBe("text");
+  });
+});
+
+describe("linkSelection", () => {
+  it("selects the url so it can be typed over", () => {
+    const edit = linkSelection("see docs", 4, 8);
+    expect(edit.text).toBe("see [docs](https://)");
+    expect(edit.text.slice(edit.start, edit.end)).toBe("https://");
+  });
+});
+
+describe("toggleLinePrefix", () => {
+  it("sets, switches and clears a prefix", () => {
+    const heading = toggleLinePrefix("Title", 2, 2, "## ");
+    expect(heading.text).toBe("## Title");
+    expect(toggleLinePrefix(heading.text, 3, 3, "- ").text).toBe("- Title");
+    expect(toggleLinePrefix(heading.text, 3, 3, "## ").text).toBe("Title");
+  });
+
+  it("numbers every selected line", () => {
+    const edit = toggleLinePrefix("a\nb\nc", 0, 5, "1. ");
+    expect(edit.text).toBe("1. a\n2. b\n3. c");
+  });
+
+  it("only touches the lines in the selection", () => {
+    const edit = toggleLinePrefix("one\ntwo\nthree", 5, 5, "> ");
+    expect(edit.text).toBe("one\n> two\nthree");
+  });
+});
+
+describe("continueList", () => {
+  it("continues bullets and numbers", () => {
+    const bullet = continueList("- apples", 8);
+    expect(bullet?.text).toBe("- apples\n- ");
+    expect(bullet?.start).toBe(11);
+    expect(continueList("1. one", 6)?.text).toBe("1. one\n2. ");
+  });
+
+  it("ends the list on an empty item", () => {
+    expect(continueList("- apples\n- ", 11)?.text).toBe("- apples\n");
+  });
+
+  it("leaves ordinary lines alone", () => {
+    expect(continueList("plain text", 10)).toBeNull();
+  });
+});
+
+describe("menus", () => {
+  it("detects a slash command only on its own line", () => {
+    expect(slashQuery("/", 1)).toBe("");
+    expect(slashQuery("intro\n/but", 10)).toBe("but");
+    expect(slashQuery("a /b", 4)).toBeNull();
+  });
+
+  it("detects {{ and replaces it with the variable", () => {
+    expect(variableTrigger("Hi {{", 5)).toBe(true);
+    const edit = insertVariable("Hi {{", 5, 5, "subscriber.name");
+    expect(edit.text).toBe("Hi {{ subscriber.name }}");
+    expect(edit.start).toBe(edit.text.length);
+  });
+});
+
+describe("countWords", () => {
+  it("ignores markdown syntax and counts merge tags as words", () => {
+    expect(countWords("# Hi {{ subscriber.name }}, read [the docs](https://x.y)")).toBe(
+      5,
+    );
+  });
+});
diff --git a/packages/email-editor/src/lib/markdown-edit.ts b/packages/email-editor/src/lib/markdown-edit.ts
new file mode 100644
index 00000000..663b5ebb
--- /dev/null
+++ b/packages/email-editor/src/lib/markdown-edit.ts
@@ -0,0 +1,169 @@
+/**
+ * Pure text transforms behind the inline writing surface. Text blocks hold
+ * markdown, so formatting is edited as markdown: these helpers take the
+ * textarea value plus selection and return the next value and selection.
+ */
+
+export interface TextEdit {
+  text: string;
+  start: number;
+  end: number;
+}
+
+/** Wraps the selection with `before`/`after`, or unwraps it if already wrapped. */
+export function wrapSelection(
+  text: string,
+  start: number,
+  end: number,
+  before: string,
+  after: string = before,
+  placeholder = "text",
+): TextEdit {
+  const selected = text.slice(start, end);
+  const wrapped =
+    text.slice(start - before.length, start) === before &&
+    text.slice(end, end + after.length) === after;
+  if (wrapped) {
+    return {
+      text:
+        text.slice(0, start - before.length) +
+        selected +
+        text.slice(end + after.length),
+      start: start - before.length,
+      end: end - before.length,
+    };
+  }
+  const inner = selected || placeholder;
+  return {
+    text: text.slice(0, start) + before + inner + after + text.slice(end),
+    start: start + before.length,
+    end: start + before.length + inner.length,
+  };
+}
+
+/** Turns the selection into a markdown link to `url`. */
+export function linkSelection(
+  text: string,
+  start: number,
+  end: number,
+  url = "https://",
+): TextEdit {
+  const label = text.slice(start, end) || "link text";
+  const link = `[${label}](${url})`;
+  const urlStart = start + label.length + 3;
+  return {
+    text: text.slice(0, start) + link + text.slice(end),
+    start: urlStart,
+    end: urlStart + url.length,
+  };
+}
+
+const LINE_PREFIX = /^(#{1,6} |[-*] |\d+\. |> )/;
+
+export type LinePrefix = "# " | "## " | "- " | "1. " | "> ";
+
+/** Switches the lines touching the selection to `prefix`, or back to plain
+ * paragraphs when they all already have it. */
+export function toggleLinePrefix(
+  text: string,
+  start: number,
+  end: number,
+  prefix: LinePrefix,
+): TextEdit {
+  const lineStart = text.lastIndexOf("\n", start - 1) + 1;
+  const nextBreak = text.indexOf("\n", end);
+  const lineEnd = nextBreak === -1 ? text.length : nextBreak;
+  const lines = text.slice(lineStart, lineEnd).split("\n");
+  const allHave = lines.every((line) => line.startsWith(prefix));
+  const next = lines.map((line, index) => {
+    const bare = line.replace(LINE_PREFIX, "");
+    if (allHave) return bare;
+    return prefix === "1. " ? `${index + 1}. ${bare}` : prefix + bare;
+  });
+  const replaced = next.join("\n");
+  const delta = replaced.length - (lineEnd - lineStart);
+  return {
+    text: text.slice(0, lineStart) + replaced + text.slice(lineEnd),
+    start: Math.max(lineStart, start + (lines.length === 1 ? delta : 0)),
+    end: end + delta,
+  };
+}
+
+/** What the first line of a block reads as, to style the editing surface. */
+export function lineKind(
+  line: string,
+): "h1" | "h2" | "h3" | "list" | "quote" | "paragraph" {
+  if (/^# /.test(line)) return "h1";
+  if (/^## /.test(line)) return "h2";
+  if (/^#{3,6} /.test(line)) return "h3";
+  if (/^([-*] |\d+\. )/.test(line)) return "list";
+  if (/^> /.test(line)) return "quote";
+  return "paragraph";
+}
+
+/**
+ * Enter inside a list continues it; Enter on an empty list item ends it.
+ * Returns null when the browser's default newline is right.
+ */
+export function continueList(text: string, caret: number): TextEdit | null {
+  const lineStart = text.lastIndexOf("\n", caret - 1) + 1;
+  const lineEndIdx = text.indexOf("\n", caret);
+  const lineEnd = lineEndIdx === -1 ? text.length : lineEndIdx;
+  const line = text.slice(lineStart, lineEnd);
+  const match = line.match(/^([-*] |(\d+)\. |> )/);
+  if (!match || caret < lineStart + match[0].length) return null;
+
+  const content = line.slice(match[0].length);
+  if (content.trim() === "") {
+    const at = lineStart;
+    return { text: text.slice(0, at) + text.slice(lineEnd), start: at, end: at };
+  }
+  const marker = match[2] ? `${Number(match[2]) + 1}. ` : match[0];
+  const insert = `\n${marker}`;
+  const pos = caret + insert.length;
+  return {
+    text: text.slice(0, caret) + insert + text.slice(caret),
+    start: pos,
+    end: pos,
+  };
+}
+
+/** `/query` typed alone on a line opens the block menu. */
+export function slashQuery(text: string, caret: number): string | null {
+  const lineStart = text.lastIndexOf("\n", caret - 1) + 1;
+  const before = text.slice(lineStart, caret);
+  const match = before.match(/^\/(\w*)$/);
+  return match ? match[1] : null;
+}
+
+/** `{{` typed right before the caret opens the variable menu. */
+export function variableTrigger(text: string, caret: number): boolean {
+  return text.slice(caret - 2, caret) === "{{";
+}
+
+/** Inserts `{{ path }}` at the selection, replacing a just-typed `{{`. */
+export function insertVariable(
+  text: string,
+  start: number,
+  end: number,
+  path: string,
+): TextEdit {
+  const from = text.slice(start - 2, start) === "{{" ? start - 2 : start;
+  const token = `{{ ${path} }}`;
+  const caret = from + token.length;
+  return {
+    text: text.slice(0, from) + token + text.slice(end),
+    start: caret,
+    end: caret,
+  };
+}
+
+/** Words a reader would count: markdown syntax and merge tags are not words. */
+export function countWords(markdown: string): number {
+  return markdown
+    .replace(/\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}/g, " x ")
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/[*_`#>[\]()-]/g, " ")
+    .split(/\s+/)
+    .filter((word) => /[\p{L}\p{N}]/u.test(word)).length;
+}
diff --git a/packages/email-editor/src/lib/menu-placement.ts b/packages/email-editor/src/lib/menu-placement.ts
new file mode 100644
index 00000000..eb6ce31c
--- /dev/null
+++ b/packages/email-editor/src/lib/menu-placement.ts
@@ -0,0 +1,24 @@
+/** The tallest an insert menu gets. */
+const MENU_HEIGHT = 400;
+const EDGE_GAP = 32;
+/** The editor's own top bar and mode switch sit above the canvas. */
+const TOP_CHROME = 60;
+
+export interface MenuPlacement {
+  up: boolean;
+  /** Room on the chosen side, so the menu scrolls instead of leaving the window. */
+  maxHeight: number;
+}
+
+/** Open a menu on whichever side of its anchor has more room, and cap its
+ * height to that room. */
+export function placeMenu(anchor: Element | null | undefined): MenuPlacement {
+  if (!anchor || typeof window === "undefined") {
+    return { up: false, maxHeight: MENU_HEIGHT };
+  }
+  const rect = anchor.getBoundingClientRect();
+  const below = window.innerHeight - rect.bottom - EDGE_GAP;
+  const above = rect.top - TOP_CHROME;
+  const up = below < MENU_HEIGHT && above > below;
+  return { up, maxHeight: Math.max(160, Math.min(MENU_HEIGHT, up ? above : below)) };
+}
diff --git a/packages/email-editor/src/lib/palettes.ts b/packages/email-editor/src/lib/palettes.ts
new file mode 100644
index 00000000..84bec86b
--- /dev/null
+++ b/packages/email-editor/src/lib/palettes.ts
@@ -0,0 +1,116 @@
+import type { Email, EmailStyle } from "../types/email-editor";
+
+export interface Palette {
+  name: string;
+  canvas: `#${string}`;
+  page: `#${string}`;
+  text: `#${string}`;
+  border: `#${string}`;
+  accent: `#${string}`;
+  accentText: `#${string}`;
+}
+
+export const PALETTES: Palette[] = [
+  {
+    name: "Default",
+    canvas: "#f1f5f9",
+    page: "#ffffff",
+    text: "#0f172a",
+    border: "#e2e8f0",
+    accent: "#2563eb",
+    accentText: "#ffffff",
+  },
+  {
+    name: "Warm",
+    canvas: "#f5efe6",
+    page: "#fffdf9",
+    text: "#2b2118",
+    border: "#eadfce",
+    accent: "#c2410c",
+    accentText: "#ffffff",
+  },
+  {
+    name: "Forest",
+    canvas: "#eef3ee",
+    page: "#ffffff",
+    text: "#14261b",
+    border: "#d7e3d9",
+    accent: "#15803d",
+    accentText: "#ffffff",
+  },
+  {
+    name: "Mono",
+    canvas: "#f4f4f5",
+    page: "#ffffff",
+    text: "#18181b",
+    border: "#e4e4e7",
+    accent: "#18181b",
+    accentText: "#ffffff",
+  },
+  {
+    name: "Plain",
+    canvas: "#ffffff",
+    page: "#ffffff",
+    text: "#1f2937",
+    border: "#ffffff",
+    accent: "#4f46e5",
+    accentText: "#ffffff",
+  },
+  {
+    name: "Night",
+    canvas: "#0b1020",
+    page: "#111827",
+    text: "#e5e7eb",
+    border: "#1f2937",
+    accent: "#60a5fa",
+    accentText: "#0b1020",
+  },
+];
+
+/** The partial style a palette sets. Merge it over the email's style. */
+export function paletteStyle(palette: Palette): Partial<EmailStyle> {
+  return {
+    colors: {
+      background: palette.canvas,
+      foreground: palette.text,
+      border: palette.border,
+      accent: palette.accent,
+      accentForeground: palette.accentText,
+    },
+    structure: {
+      page: { background: palette.page, foreground: palette.text },
+      section: {},
+    },
+  };
+}
+
+export function activePalette(email: Email): string | null {
+  const { colors, structure } = email.style;
+  return (
+    PALETTES.find(
+      (palette) =>
+        palette.canvas === colors.background &&
+        palette.page === structure.page.background &&
+        palette.text === colors.foreground &&
+        palette.accent === colors.accent,
+    )?.name ?? null
+  );
+}
+
+/** What a dark-mode mail client does to the email: it dims the page and flips
+ * the text. The accent stays, as it does in most clients. */
+export function darkStyle(style: EmailStyle): EmailStyle {
+  return {
+    ...style,
+    colors: {
+      ...style.colors,
+      background: "#000000",
+      foreground: "#e7e7ea",
+      border: "#333336",
+    },
+    structure: {
+      ...style.structure,
+      page: { ...style.structure.page, background: "#1c1c1e", foreground: "#e7e7ea" },
+    },
+  };
+}
diff --git a/packages/email-editor/src/lib/text-items.test.ts b/packages/email-editor/src/lib/text-items.test.ts
new file mode 100644
index 00000000..2f6266be
--- /dev/null
+++ b/packages/email-editor/src/lib/text-items.test.ts
@@ -0,0 +1,151 @@
+import { describe, expect, it } from "bun:test";
+import { defaultEmail } from "./default-email";
+import {
+  explodeTextBlocks,
+  itemMarkdown,
+  joinItems,
+  mergeTextItems,
+  parseItem,
+  splitMarkdown,
+  toRows,
+} from "./text-items";
+
+let next = 0;
+const id = () => `id${next++}`;
+
+describe("parseItem and itemMarkdown", () => {
+  it("round-trips every kind", () => {
+    for (const unit of [
+      "Plain paragraph\nwith a soft break",
+      "# Title",
+      "## Heading",
+      "### Small heading",
+      "- Bullet\n  continued",
+      "3. Third",
+      "> Quoted\n> twice",
+    ]) {
+      const { prefix, body } = parseItem(unit);
+      expect(itemMarkdown(prefix, body)).toBe(unit);
+    }
+  });
+
+  it("reads kinds and bodies", () => {
+    expect(parseItem("## Hi")).toEqual({ kind: "h2", prefix: "## ", body: "Hi" });
+    expect(parseItem("12. Twelve").kind).toBe("ol");
+    expect(parseItem("> a\n> b")).toEqual({
+      kind: "quote",
+      prefix: "> ",
+      body: "a\nb",
+    });
+  });
+});
+
+describe("splitMarkdown and joinItems", () => {
+  it("splits headings, paragraphs, list items and quotes", () => {
+    const md =
+      "# Title\nIntro line\n\nPara one\nsame para\n\n- a\n- b\n\n1. x\n2. y\n\n> q";
+    expect(splitMarkdown(md)).toEqual([
+      "# Title",
+      "Intro line",
+      "Para one\nsame para",
+      "- a",
+      "- b",
+      "1. x",
+      "2. y",
+      "> q",
+    ]);
+  });
+
+  it("keeps list items of one list on consecutive lines when joining", () => {
+    expect(joinItems(["## H", "- a", "- b", "Para", "1. x", "2. y"])).toBe(
+      "## H\n\n- a\n- b\n\nPara\n\n1. x\n2. y",
+    );
+  });
+
+  it("joins what it split for ordinary markdown", () => {
+    const md = "# Your Company Name\n\nThis is some paragraph text.\n\n- one\n- two";
+    expect(joinItems(splitMarkdown(md))).toBe(md);
+  });
+
+  it("leaves code blocks whole", () => {
+    const md = "```\nline\n\nline\n```";
+    expect(splitMarkdown(md)).toEqual([md]);
+  });
+});
+
+describe("explodeTextBlocks and mergeTextItems", () => {
+  const email = {
+    ...defaultEmail,
+    content: [
+      {
+        blockType: "text",
+        settings: { content: "# Hi\n\nPara\n\n- a\n- b", alignment: "center" },
+      },
+      { blockType: "custom-widget", settings: { anything: 1 } },
+      { blockType: "text", settings: { content: "Second block" } },
+    ],
+  };
+
+  it("gives each paragraph its own item, grouped by block", () => {
+    const items = explodeTextBlocks(email.content, id);
+    expect(items.map((item) => item.settings.content)).toEqual([
+      "# Hi",
+      "Para",
+      "- a",
+      "- b",
+      undefined,
+      "Second block",
+    ]);
+    expect(new Set(items.slice(0, 4).map((item) => item.group)).size).toBe(1);
+    expect(items[0].group).not.toBe(items[5].group);
+    expect(items[1].settings.alignment).toBe("center");
+    expect(items[4]).toMatchObject({
+      blockType: "custom-widget",
+      settings: { anything: 1 },
+    });
+  });
+
+  it("merges back to the stored shape, without editor fields", () => {
+    const merged = mergeTextItems({
+      ...email,
+      content: explodeTextBlocks(email.content, id),
+    });
+    expect(merged.content).toEqual([
+      {
+        blockType: "text",
+        settings: { content: "# Hi\n\nPara\n\n- a\n- b", alignment: "center" },
+      },
+      { blockType: "custom-widget", settings: { anything: 1 } },
+      { blockType: "text", settings: { content: "Second block" } },
+    ]);
+  });
+
+  it("drops empty items and blocks left with no text", () => {
+    const items = explodeTextBlocks(
+      [{ blockType: "text", settings: { content: "Keep" } }],
+      id,
+    );
+    items.push({ ...items[0], id: id(), settings: { content: "" } });
+    items.push({
+      id: id(),
+      blockType: "text",
+      group: "lonely",
+      settings: { content: "- " },
+    });
+    expect(mergeTextItems({ ...defaultEmail, content: items }).content).toEqual([
+      { blockType: "text", settings: { content: "Keep" } },
+    ]);
+  });
+
+  it("splits a block in two when something lands between its items", () => {
+    const items = explodeTextBlocks(
+      [{ blockType: "text", settings: { content: "One\n\nTwo" } }],
+      id,
+    );
+    items.splice(1, 0, { id: id(), blockType: "separator", settings: {} });
+    const rows = toRows(items);
+    expect(
+      rows.map((row) => row.block.settings.content ?? row.block.blockType),
+    ).toEqual(["One", "separator", "Two"]);
+  });
+});
diff --git a/packages/email-editor/src/lib/text-items.ts b/packages/email-editor/src/lib/text-items.ts
new file mode 100644
index 00000000..f4333e6e
--- /dev/null
+++ b/packages/email-editor/src/lib/text-items.ts
@@ -0,0 +1,220 @@
+import type { Email, EmailBlock } from "../types/email-editor";
+
+/**
+ * While writing, a text block is edited as one item per paragraph, heading,
+ * list item or quote, so Enter, Backspace and the arrow keys behave like a
+ * document. Storage keeps the original shape: one `text` block holding
+ * markdown. Items carry an editor-only `group` (the block they came from) and
+ * neighbouring items of a group are joined back into one block when the email
+ * is handed to the host.
+ */
+
+export type ItemKind = "p" | "h1" | "h2" | "h3" | "li" | "ol" | "quote";
+
+export interface ParsedItem {
+  kind: ItemKind;
+  /** The markdown marker, e.g. `## `, `- `, `3. `, `> `. Empty for paragraphs. */
+  prefix: string;
+  /** The text a writer edits, without the marker. */
+  body: string;
+}
+
+const MARKER = /^(#{1,6} |[-*+] |\d+[.)] |> ?)/;
+
+export function parseItem(unit: string): ParsedItem {
+  const match = unit.match(MARKER);
+  if (!match) return { kind: "p", prefix: "", body: unit };
+  const marker = match[1];
+  const rest = unit.slice(marker.length);
+  if (marker.startsWith("#")) {
+    const level = marker.trim().length;
+    const kind = level === 1 ? "h1" : level === 2 ? "h2" : "h3";
+    return { kind, prefix: marker, body: rest };
+  }
+  if (marker.startsWith(">")) {
+    const body = unit
+      .split("\n")
+      .map((line) => line.replace(/^> ?/, ""))
+      .join("\n");
+    return { kind: "quote", prefix: "> ", body };
+  }
+  const indent = " ".repeat(marker.length);
+  const [first, ...more] = rest.split("\n");
+  const body = [
+    first,
+    ...more.map((line) => (line.startsWith(indent) ? line.slice(indent.length) : line)),
+  ].join("\n");
+  return { kind: /^\d/.test(marker) ? "ol" : "li", prefix: marker, body };
+}
+
+/** The stored markdown of one item. */
+export function itemMarkdown(prefix: string, body: string): string {
+  if (prefix.startsWith(">")) {
+    return body
+      .split("\n")
+      .map((line) => (line ? `> ${line}` : ">"))
+      .join("\n");
+  }
+  if (prefix.startsWith("#")) return prefix + body.replace(/\n+/g, " ");
+  if (!prefix) return body;
+  const indent = " ".repeat(prefix.length);
+  const [first, ...more] = body.split("\n");
+  return [prefix + first, ...more.map((line) => indent + line)].join("\n");
+}
+
+const HEADING = /^#{1,6} /;
+const LIST = /^ {0,3}([-*+] |\d+[.)] )/;
+const QUOTE = /^ {0,3}>/;
+
+/** Splits a text block's markdown into items. Code blocks stay whole, since
+ * splitting them on blank lines would change what they mean. */
+export function splitMarkdown(markdown: string): string[] {
+  const source = markdown.replace(/\r/g, "");
+  if (source.includes("```")) return source.trim() ? [source] : [];
+
+  const units: string[] = [];
+  for (const chunk of source.split(/\n[ \t]*\n/)) {
+    let current: { kind: "p" | "list" | "quote"; text: string } | null = null;
+    const flush = () => {
+      if (current?.text.trim()) units.push(current.text);
+      current = null;
+    };
+    for (const line of chunk.split("\n")) {
+      if (HEADING.test(line)) {
+        flush();
+        units.push(line);
+      } else if (LIST.test(line)) {
+        flush();
+        current = { kind: "list", text: line.replace(/^ {1,3}/, "") };
+      } else if (QUOTE.test(line)) {
+        if (current?.kind === "quote") current.text += `\n${line.trimStart()}`;
+        else {
+          flush();
+          current = { kind: "quote", text: line.trimStart() };
+        }
+      } else if (current?.kind === "list" && /^\s+\S/.test(line)) {
+        current.text += `\n${line}`;
+      } else if (current?.kind === "p") {
+        current.text += `\n${line}`;
+      } else {
+        flush();
+        current = { kind: "p", text: line };
+      }
+    }
+    flush();
+  }
+  return units;
+}
+
+function listType(kind: ItemKind) {
+  return kind === "li" || kind === "ol" ? kind : null;
+}
+
+/** Joins items back into one block's markdown. Items of the same list sit on
+ * consecutive lines; everything else is a separate paragraph. */
+export function joinItems(units: string[]): string {
+  let out = "";
+  let previous: ItemKind | null = null;
+  for (const unit of units) {
+    const kind = parseItem(unit).kind;
+    if (out) {
+      const sameList = listType(kind) !== null && listType(kind) === previous;
+      out += sameList ? "\n" : "\n\n";
+    }
+    out += unit;
+    previous = listType(kind);
+  }
+  return out;
+}
+
+function isEmptyItem(unit: string) {
+  return parseItem(unit).body.trim() === "";
+}
+
+type IdFactory = () => string;
+
+/** Turns every text block into items. Other blocks pass through. */
+export function explodeTextBlocks(content: EmailBlock[], id: IdFactory): EmailBlock[] {
+  return content.flatMap((block) => {
+    if (block.blockType !== "text") return [{ ...block, id: block.id ?? id() }];
+    const group = id();
+    const { content: markdown = "", ...settings } = block.settings ?? {};
+    const units = splitMarkdown(String(markdown));
+    return (units.length ? units : [""]).map((unit) => ({
+      id: id(),
+      blockType: "text",
+      group,
+      settings: { ...settings, content: unit },
+    }));
+  });
+}
+
+/** A run of neighbouring items from one block, or a single other block. */
+export interface Row {
+  /** The id of the first item, which stands for the whole run. */
+  id: string;
+  start: number;
+  end: number;
+  block: EmailBlock;
+}
+
+/** Groups the editor's flat list back into blocks. Empty items are dropped and
+ * a block left with no text disappears, so a stray empty line never sends. */
+export function toRows(content: EmailBlock[], { keepEmpty = false } = {}): Row[] {
+  const rows: Row[] = [];
+  for (let index = 0; index < content.length; ) {
+    const block = content[index];
+    if (block.blockType !== "text" || !block.group) {
+      rows.push({ id: block.id!, start: index, end: index + 1, block });
+      index++;
+      continue;
+    }
+    let end = index + 1;
+    while (
+      end < content.length &&
+      content[end].blockType === "text" &&
+      content[end].group === block.group
+    ) {
+      end++;
+    }
+    const units = content
+      .slice(index, end)
+      .map((item) => String(item.settings?.content ?? ""))
+      .filter((unit) => keepEmpty || !isEmptyItem(unit));
+    if (units.length || keepEmpty) {
+      rows.push({
+        id: block.id!,
+        start: index,
+        end,
+        block: {
+          id: block.id,
+          blockType: "text",
+          settings: { ...block.settings, content: joinItems(units) },
+        },
+      });
+    }
+    index = end;
+  }
+  return rows;
+}
+
+/** The email as the host stores it: text items joined, editor fields removed. */
+export function mergeTextItems(email: Email): Email {
+  return {
+    ...email,
+    content: toRows(email.content).map(({ block }) => {
+      const { id: _id, group: _group, ...rest } = block;
+      return rest;
+    }),
+  };
+}
+
+/** A markdown shortcut typed at the start of a paragraph. */
+export const SHORTCUTS: [string, string][] = [
+  ["## ", "## "],
+  ["# ", "# "],
+  ["- ", "- "],
+  ["* ", "- "],
+  ["1. ", "1. "],
+  ["> ", "> "],
+];
diff --git a/packages/email-editor/src/types/block-registry.ts b/packages/email-editor/src/types/block-registry.ts
index 4eb7c32e..797d0092 100644
--- a/packages/email-editor/src/types/block-registry.ts
+++ b/packages/email-editor/src/types/block-registry.ts
@@ -26,6 +26,11 @@ export interface BlockComponent<TSettings = any, TRenderContext = any> {
   settings: ComponentType<BlockSettingsProps<TSettings>>;
   metadata: BlockMetadata;
   defaultSettings?: () => TSettings;
+  /** The few fields worth editing in place while writing (a button's label and
+   * link, an image's alt text). The full form stays in Style mode. */
+  quickEdit?: ComponentType<BlockSettingsProps<TSettings>>;
+  /** Lay the quick fields out in a row (default) or a column. */
+  quickEditLayout?: "row" | "column";
   capabilities?: Partial<BlockCapabilities>;
 }
 
diff --git a/packages/email-editor/src/types/editor-ui.ts b/packages/email-editor/src/types/editor-ui.ts
new file mode 100644
index 00000000..e7053156
--- /dev/null
+++ b/packages/email-editor/src/types/editor-ui.ts
@@ -0,0 +1,25 @@
+import type { ComponentType } from "react";
+
+/** A merge tag the host offers, e.g. `{{ subscriber.name }}`. */
+export interface EditorVariable {
+  tag: string;
+  description: string;
+  /** Shown in place of the tag when "Sample data" is on. */
+  sample?: string;
+}
+
+export type EditorTheme = "sendlit" | "neutral" | "dark";
+
+/** One entry of the insert menu: a kind of text, or a block. */
+export interface BlockChoice {
+  id: string;
+  name: string;
+  description: string;
+  keywords: string;
+  icon: ComponentType<{ className?: string }>;
+  /** Markdown the text block starts with, for the text kinds. */
+  text?: string;
+  /** The block to insert, for the rest. */
+  blockType?: string;
+  settings?: Record<string, unknown>;
+}
diff --git a/packages/email-editor/src/types/email-editor.ts b/packages/email-editor/src/types/email-editor.ts
index f2023872..c7e61cbd 100644
--- a/packages/email-editor/src/types/email-editor.ts
+++ b/packages/email-editor/src/types/email-editor.ts
@@ -77,6 +77,8 @@ export interface CommonBlockSettings {
 
 export interface EmailBlock<TSettings = Record<string, any>> {
   id?: string;
+  /** Editor-only: the text block an item came from. Never stored. */
+  group?: string;
   blockType: string;
   settings: TSettings;
 }
@@ -89,6 +91,9 @@ export interface BlockRenderProps<
   style?: EmailStyle;
   selectedBlockId?: string | null;
   renderContext?: TRenderContext;
+  /** Previews and the editor show conditional sections to everyone; the
+   * default (sending) wraps them in Liquid so only matching contacts get them. */
+  showConditionals?: boolean;
 }
 
 export type RuntimeEmailBlock<TSettings = Record<string, any>> = Required<

From fa08ab0a47bfa98c06ed9ce769008d1d780ec59a Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 16:40:02 +0530
Subject: [PATCH 02/18] feat(api): validate the new email blocks and keep
 conditionals out of transactional mail (#169)

---
 apps/api/src/mail/render.test.ts            | 32 +++++++++++
 apps/api/src/mcp/tools/templates.ts         |  2 +-
 apps/api/src/templates/validation.test.ts   | 59 +++++++++++++++++++++
 apps/api/src/templates/validation.ts        |  5 ++
 packages/api-contract/src/schemas/common.ts | 52 ++++++++++++++++++
 5 files changed, 149 insertions(+), 1 deletion(-)

diff --git a/apps/api/src/mail/render.test.ts b/apps/api/src/mail/render.test.ts
index 89ef1533..12b64370 100644
--- a/apps/api/src/mail/render.test.ts
+++ b/apps/api/src/mail/render.test.ts
@@ -39,6 +39,38 @@ describe("mail render helpers", () => {
     expect(html).toContain("Hello Ada");
   });
 
+  it("shows a conditional section only to contacts with the tag", async () => {
+    const content = {
+      ...defaultEmail,
+      content: [
+        { blockType: "text" as const, settings: { content: "Hello" } },
+        {
+          blockType: "conditional" as const,
+          settings: { tag: "customer", has: true, content: "Customers only" },
+        },
+        {
+          blockType: "conditional" as const,
+          settings: { tag: "customer", has: false, content: "Not yet a customer" },
+        },
+      ],
+    };
+    const send = (tags: string[]) =>
+      renderEmailContent({ content, variables: { subscriber: { tags } } });
+
+    const customer = await send(["beta", "customer"]);
+    expect(customer).toContain("Customers only");
+    expect(customer).not.toContain("Not yet a customer");
+    expect(customer).not.toContain("{%");
+
+    const other = await send(["beta"]);
+    expect(other).not.toContain("Customers only");
+    expect(other).toContain("Not yet a customer");
+    expect(other).not.toContain("{%");
+
+    const untagged = await send([]);
+    expect(untagged).not.toContain("Customers only");
+  });
+
   it("renders the shared managed footer from server-owned context", async () => {
     const content = {
       ...defaultEmail,
diff --git a/apps/api/src/mcp/tools/templates.ts b/apps/api/src/mcp/tools/templates.ts
index 42b1029a..ba1d6fe6 100644
--- a/apps/api/src/mcp/tools/templates.ts
+++ b/apps/api/src/mcp/tools/templates.ts
@@ -106,7 +106,7 @@ export function registerTemplateTools(server: McpToolRegistrar): void {
         title: z.string().min(1),
         purpose: templatePurposeSchema,
         content: emailContentInputSchema.describe(
-          "A complete SendLit email document. Include all style sections (colors, typography.header/text/link, interactives, and structure) and only text, link, image, separator, or footer blocks. Use list_system_templates and duplicate_template as the safest valid starting point.",
+          "A complete SendLit email document. Include all style sections (colors, typography.header/text/link, interactives, and structure) and only text, link, image, separator, spacer, columns, social, html, conditional (marketing only), or footer blocks. Use list_system_templates and duplicate_template as the safest valid starting point.",
         ),
       },
       outputSchema: templateSchema,
diff --git a/apps/api/src/templates/validation.test.ts b/apps/api/src/templates/validation.test.ts
index fb2b33e4..dc92a8fc 100644
--- a/apps/api/src/templates/validation.test.ts
+++ b/apps/api/src/templates/validation.test.ts
@@ -88,6 +88,65 @@ describe("template content validation", () => {
     );
   });
 
+  it("accepts the new blocks and rejects malformed ones at write time", () => {
+    const email = (block: Email["content"][number]): Email => ({
+      ...defaultEmail,
+      content: [block, createFooterEmailBlock()],
+    });
+    const valid: Email["content"] = [
+      { blockType: "spacer", settings: { height: "24px" } },
+      { blockType: "columns", settings: { left: "a", right: "b", ratio: "12" } },
+      {
+        blockType: "social",
+        settings: { links: [{ network: "x", url: "https://x.com/sendlit" }] },
+      },
+      { blockType: "html", settings: { code: "<p>Hi</p>" } },
+      {
+        blockType: "conditional",
+        settings: { tag: "customer", has: false, content: "Hi" },
+      },
+    ];
+    for (const block of valid) {
+      expect(() =>
+        validateTemplateInputContent(email(block), "marketing"),
+      ).not.toThrow();
+    }
+
+    const invalid: Email["content"] = [
+      { blockType: "spacer", settings: { height: "tall" } },
+      { blockType: "columns", settings: { left: "a" } },
+      {
+        blockType: "social",
+        settings: { links: [{ network: "x", url: "javascript:alert(1)" }] },
+      },
+      { blockType: "html", settings: {} },
+      {
+        blockType: "conditional",
+        settings: { tag: 'a" %}{% endif %}', content: "Hi" },
+      },
+    ];
+    for (const block of invalid) {
+      expect(() =>
+        validateTemplateInputContent(email(block), "marketing"),
+      ).toThrowError(expect.objectContaining({ message: "invalid_email_content" }));
+    }
+  });
+
+  it("keeps conditional sections out of transactional content", () => {
+    const transactional: Email = {
+      ...defaultEmail,
+      content: [
+        {
+          blockType: "conditional",
+          settings: { tag: "customer", content: "Hi" },
+        },
+      ],
+    };
+    expect(() =>
+      validateTemplateInputContent(transactional, "transactional"),
+    ).toThrowError(expect.objectContaining({ message: "conditional_not_allowed" }));
+  });
+
   it("rejects footer and reserved marketing variables transactionally", () => {
     expect(() =>
       validateTemplateContent(content("Hello", "marketing"), "transactional"),
diff --git a/apps/api/src/templates/validation.ts b/apps/api/src/templates/validation.ts
index a022efdb..a553f6d9 100644
--- a/apps/api/src/templates/validation.ts
+++ b/apps/api/src/templates/validation.ts
@@ -122,6 +122,11 @@ export function validateTemplateContent(
     if (footerIndexes.length > 0) {
       throw new TemplateValidationError("footer_not_allowed");
     }
+    // Conditional sections read the subscriber's tags; transactional sends have
+    // no subscriber.
+    if (contentBlocks.some((block) => block.blockType === "conditional")) {
+      throw new TemplateValidationError("conditional_not_allowed");
+    }
     const reservedVariables = findReservedMarketingVariables(content);
     if (reservedVariables.length > 0) {
       throw new TemplateValidationError(
diff --git a/packages/api-contract/src/schemas/common.ts b/packages/api-contract/src/schemas/common.ts
index 9df8c63e..b53b2530 100644
--- a/packages/api-contract/src/schemas/common.ts
+++ b/packages/api-contract/src/schemas/common.ts
@@ -119,6 +119,58 @@ const emailBlockInputSchema = z.discriminatedUnion("blockType", [
     settings: z.object({ src: z.string().min(1) }).passthrough(),
   }),
   blockBaseSchema.extend({ blockType: z.literal("separator") }),
+  blockBaseSchema.extend({
+    blockType: z.literal("spacer"),
+    settings: z.object({ height: pixelSchema.optional() }).passthrough(),
+  }),
+  blockBaseSchema.extend({
+    blockType: z.literal("columns"),
+    settings: z
+      .object({
+        left: z.string(),
+        right: z.string(),
+        ratio: z.enum(["11", "12", "21"]).optional(),
+        stack: z.boolean().optional(),
+      })
+      .passthrough(),
+  }),
+  blockBaseSchema.extend({
+    blockType: z.literal("social"),
+    settings: z
+      .object({
+        links: z.array(
+          z.object({
+            network: z.enum([
+              "website",
+              "instagram",
+              "linkedin",
+              "youtube",
+              "x",
+              "facebook",
+              "tiktok",
+            ]),
+            url: z.string().regex(/^(?:https?:\/\/\S+)?$/i, "Expected an http(s) URL"),
+          }),
+        ),
+      })
+      .passthrough(),
+  }),
+  blockBaseSchema.extend({
+    blockType: z.literal("html"),
+    settings: z.object({ code: z.string() }).passthrough(),
+  }),
+  blockBaseSchema.extend({
+    blockType: z.literal("conditional"),
+    settings: z
+      .object({
+        tag: z
+          .string()
+          .regex(/^[A-Za-z0-9][A-Za-z0-9 _.-]{0,39}$/, "Expected a plain tag name"),
+        has: z.boolean().optional(),
+        content: z.string(),
+      })
+      .passthrough(),
+  }),
   blockBaseSchema.extend({ blockType: z.literal("footer") }),
 ]);
 

From acdd70504fc1dd946ef0162618fe8bb061554a1e Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 16:40:03 +0530
Subject: [PATCH 03/18] feat(web): use the new editor for templates and
 sequence emails, with subject and sender in the editor (#169)

---
 .../app/(dashboard)/templates/page.test.tsx   |  5 ++
 .../editor/templates/[templateId]/page.tsx    | 22 ++---
 apps/web/app/globals.css                      |  1 +
 .../dashboard/email-editor-screen.test.tsx    | 28 ++++--
 .../dashboard/email-editor-screen.tsx         | 86 ++++++++++---------
 .../dashboard/sequence-email-editor.tsx       | 19 +++-
 6 files changed, 95 insertions(+), 66 deletions(-)

diff --git a/apps/web/app/(dashboard)/templates/page.test.tsx b/apps/web/app/(dashboard)/templates/page.test.tsx
index 45c48127..a879249e 100644
--- a/apps/web/app/(dashboard)/templates/page.test.tsx
+++ b/apps/web/app/(dashboard)/templates/page.test.tsx
@@ -35,6 +35,11 @@ mock.module("@sendlit/email-editor/blocks", () => ({
   Text: {},
   Separator: {},
   Link: {},
+  Spacer: {},
+  Columns: {},
+  Social: {},
+  HtmlSnippet: {},
+  Conditional: {},
   ImageBlock: { configure: () => ({}) },
 }));
 mock.module("@/components/dashboard/email-image-upload-dialog", () => ({
diff --git a/apps/web/app/editor/templates/[templateId]/page.tsx b/apps/web/app/editor/templates/[templateId]/page.tsx
index d9b61bdf..f0dbff87 100644
--- a/apps/web/app/editor/templates/[templateId]/page.tsx
+++ b/apps/web/app/editor/templates/[templateId]/page.tsx
@@ -7,7 +7,6 @@ import { Banner } from "@/components/dashboard/banner";
 import { EmailEditorScreen } from "@/components/dashboard/email-editor-screen";
 import { Loading } from "@/components/dashboard/loading";
 import { Input } from "@/components/ui/codelit/input";
-import { Label } from "@/components/ui/codelit/label";
 import { getTemplate, updateTemplate } from "@/lib/api";
 import { ApiError } from "@/lib/api-client";
 
@@ -42,7 +41,6 @@ export default function TemplateEditorPage({
   return (
     <EmailEditorScreen
       exitFallbackHref="/templates"
-      screenTitle="Editing template"
       saveLabel="Save template"
       initialContent={content}
       purpose={purpose}
@@ -54,18 +52,14 @@ export default function TemplateEditorPage({
         });
         setRequiredVariables(updated.requiredVariables);
       }}
-      header={
-        <div className="flex max-w-md items-center gap-3">
-          <Label htmlFor="template-title" className="shrink-0 text-muted-foreground">
-            Title
-          </Label>
-          <Input
-            id="template-title"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="e.g. Welcome email"
-          />
-        </div>
+      title={
+        <Input
+          aria-label="Template title"
+          className="max-w-sm"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="e.g. Welcome email"
+        />
       }
     />
   );
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 6da18d2e..4ca95884 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -2,6 +2,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import "../../../packages/email-editor/src/editor.css";
 
 @source "../../../packages/email-editor/src/**/*.{ts,tsx}";
 @source "../../../packages/email-blocks/src/**/*.{ts,tsx}";
diff --git a/apps/web/components/dashboard/email-editor-screen.test.tsx b/apps/web/components/dashboard/email-editor-screen.test.tsx
index b6715d98..b3f3e128 100644
--- a/apps/web/components/dashboard/email-editor-screen.test.tsx
+++ b/apps/web/components/dashboard/email-editor-screen.test.tsx
@@ -33,6 +33,11 @@ mock.module("@sendlit/email-editor/blocks", () => ({
   Text: {},
   Separator: {},
   Link: {},
+  Spacer: {},
+  Columns: {},
+  Social: {},
+  HtmlSnippet: {},
+  Conditional: { metadata: { name: "conditional" } },
   ImageBlock: { configure: () => ({}) },
 }));
 mock.module("@/components/dashboard/email-image-upload-dialog", () => ({
@@ -178,9 +183,15 @@ describe("EmailEditorScreen", () => {
           block.capabilities?.deletable === false,
       ),
     ).toBe(true);
-    expect(screen.getByText("{{ subscriber.email }}")).toBeTruthy();
-    expect(screen.getByText("{{ subscriber.tags }}")).toBeTruthy();
-    expect(screen.queryByText("{{ address }}")).toBeNull();
+    const tags = mocks.editorProps.variables.map((variable: any) => variable.tag);
+    expect(tags).toContain("{{ subscriber.email }}");
+    expect(tags).toContain("{{ subscriber.tags }}");
+    expect(tags).not.toContain("{{ address }}");
+    expect(
+      mocks.editorProps.blocks.some(
+        (block: any) => block.metadata?.name === "conditional",
+      ),
+    ).toBe(true);
   });
 
   it("keeps transactional editing footer-free and exposes required business variables", () => {
@@ -198,9 +209,14 @@ describe("EmailEditorScreen", () => {
       mocks.editorProps.blocks.some((block: any) => block.metadata?.name === "footer"),
     ).toBe(false);
     expect(mocks.editorProps.renderContext).toBeUndefined();
-    expect(screen.getByText("{{ customer.name }}")).toBeTruthy();
-    expect(screen.getByText("{{ otp }}")).toBeTruthy();
-    expect(screen.queryByText("{{ subscriber.email }}")).toBeNull();
+    const tags = mocks.editorProps.variables.map((variable: any) => variable.tag);
+    expect(tags).toEqual(["{{ customer.name }}", "{{ otp }}"]);
+    // Conditional sections need a subscriber, which transactional sends lack.
+    expect(
+      mocks.editorProps.blocks.some(
+        (block: any) => block.metadata?.name === "conditional",
+      ),
+    ).toBe(false);
   });
 
   it("does not expose template duplication from the editor", async () => {
diff --git a/apps/web/components/dashboard/email-editor-screen.tsx b/apps/web/components/dashboard/email-editor-screen.tsx
index 55fa439d..d49f652e 100644
--- a/apps/web/components/dashboard/email-editor-screen.tsx
+++ b/apps/web/components/dashboard/email-editor-screen.tsx
@@ -9,13 +9,19 @@ import {
 } from "@sendlit/email-blocks/footer";
 import { normalizeEmail } from "@sendlit/email-editor";
 import {
+  Columns,
+  Conditional,
+  HtmlSnippet,
   ImageBlock,
   Link,
   Separator,
+  Social,
+  Spacer,
   Text,
   type UploaderProps,
 } from "@sendlit/email-editor/blocks";
 import { Check, LogOut } from "lucide-react";
+import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import {
   type ReactNode,
@@ -39,23 +45,28 @@ const MARKETING_VARIABLES = [
   {
     tag: "{{ subscriber.email }}",
     description: "The email of the subscriber",
+    sample: "priya@example.com",
   },
   {
     tag: "{{ subscriber.name }}",
     description: "The name of the subscriber",
+    sample: "Priya",
   },
   {
     tag: "{{ subscriber.tags }}",
     description: "The subscriber's tags",
+    sample: "customer, beta",
   },
   {
     tag: "{{ view_in_browser_url }}",
     description: "Link to the web version of this email",
+    sample: "[link to web version]",
   },
   {
     tag: "{{ web_version_url }}",
     description:
       "Public web page of this broadcast once published, else its web version",
+    sample: "[public page link]",
   },
 ];
 
@@ -78,6 +89,10 @@ const BASE_EMAIL_EDITOR_BLOCKS = [
   Separator,
   Link,
   ImageBlock.configure({ uploader: EmailImageUploader }),
+  Spacer,
+  Columns,
+  Social,
+  HtmlSnippet,
 ];
 
 const SENDLIT_FOOTER_BLOCK = createFooterBlock({
@@ -99,8 +114,10 @@ const SENDLIT_FOOTER_BLOCK = createFooterBlock({
   },
 });
 
+// Conditional sections read the subscriber's tags, which only marketing sends have.
 export const MARKETING_EMAIL_EDITOR_BLOCKS = [
   ...BASE_EMAIL_EDITOR_BLOCKS,
+  Conditional,
   SENDLIT_FOOTER_BLOCK,
 ];
 export const TRANSACTIONAL_EMAIL_EDITOR_BLOCKS = BASE_EMAIL_EDITOR_BLOCKS;
@@ -126,36 +143,37 @@ export function marketingPreviewContext({
 /**
  * Full-screen email editing screen — the only place `EmailEditor` is rendered,
  * mounted under the chrome-free `/editor` layout (no dashboard sidebar). It
- * locks to the viewport: the page itself never scrolls, only the variables
- * panel and the editor's own canvas/settings panes do. Everywhere else shows
+ * locks to the viewport: the page itself never scrolls, only the editor's own
+ * canvas and style panes do. Everywhere else shows
  * an `EmailPreview` with an edit button that navigates here; exit returns to
  * wherever the user came from.
  */
 export function EmailEditorScreen({
   exitFallbackHref,
-  screenTitle = "Editing email",
+  title = "Editing email",
   initialContent,
   onSave,
   purpose,
   requiredVariables = [],
   saveLabel = "Save",
-  header,
   actions,
   viewInBrowser = true,
   extraVariables = [],
+  subject,
+  onSubjectChange,
+  senderName,
 }: {
   /** Where exit lands when there's no history to go back to (deep link). */
   exitFallbackHref: string;
-  screenTitle?: string;
+  /** The left of the host bar: a label, or a field such as a template's name. */
+  title?: ReactNode;
   initialContent: Email;
-  /** Persists the edited content; extra fields owned by `header` controls
-   * (e.g. a template's title) are the caller's to include. */
+  /** Persists the edited content; extra fields owned by `title` (e.g. a
+   * template's name) are the caller's to include. */
   onSave: (content: Email) => Promise<void>;
   purpose: TemplatePurpose;
   requiredVariables?: string[];
   saveLabel?: string;
-  /** Optional controls rendered in the bar above the editor canvas. */
-  header?: ReactNode;
   /** Extra top-bar controls. `saveContent` persists the current document
    * (throwing on failure), e.g. before sending a test of it. */
   actions?: (saveContent: () => Promise<void>) => ReactNode;
@@ -164,8 +182,14 @@ export function EmailEditorScreen({
   /** More merge tags for this email, e.g. `{{ event.* }}` of the custom
    * event that starts its sequence. */
   extraVariables?: { tag: string; description: string }[];
+  /** The subject line, written above the email. Saving it is the caller's. */
+  subject?: string;
+  onSubjectChange?: (subject: string) => void;
+  /** The sender shown in the inbox preview. */
+  senderName?: string;
 }) {
   const router = useRouter();
+  const { resolvedTheme } = useTheme();
   const normalizedInitialContent = useMemo(
     () => normalizeEmail(initialContent),
     [initialContent],
@@ -246,8 +270,12 @@ export function EmailEditorScreen({
   return (
     <div className="flex h-full flex-col overflow-hidden bg-background">
       <header className="flex h-14 shrink-0 items-center justify-between border-b px-4">
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground">{screenTitle}</span>
+        <div className="flex min-w-0 flex-1 items-center gap-3">
+          {typeof title === "string" ? (
+            <span className="text-sm text-muted-foreground">{title}</span>
+          ) : (
+            title
+          )}
           <Badge variant="secondary" className="capitalize">
             {purpose}
           </Badge>
@@ -271,42 +299,16 @@ export function EmailEditorScreen({
       {error && <Banner className="mx-4 mt-4 shrink-0">{error}</Banner>}
 
       <div className="flex min-h-0 flex-1">
-        <aside className="w-64 shrink-0 space-y-4 overflow-y-auto border-r p-4">
-          <h2 className="font-semibold">Variables</h2>
-          <p className="text-sm text-muted-foreground">
-            You can use the following variables in your content.
-          </p>
-          <p className="text-sm text-muted-foreground">
-            These will be replaced with the actual data while sending emails.
-          </p>
-          {variables.length === 0 ? (
-            <p className="text-sm text-muted-foreground">
-              This template has no required variables.
-            </p>
-          ) : (
-            <dl className="space-y-3">
-              {variables.map((variable) => (
-                <div key={variable.tag} className="space-y-1">
-                  <dt>
-                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
-                      {variable.tag}
-                    </code>
-                  </dt>
-                  <dd className="text-xs text-muted-foreground">
-                    {variable.description}
-                  </dd>
-                </div>
-              ))}
-            </dl>
-          )}
-        </aside>
-
         <main className="flex min-h-0 min-w-0 flex-1 flex-col">
-          {header && <div className="shrink-0 border-b px-6 py-3">{header}</div>}
           <div className="min-h-0 flex-1">
             <EmailEditor
               email={normalizedInitialContent}
               onChange={handleContentChange}
+              subject={subject}
+              onSubjectChange={onSubjectChange}
+              variables={variables}
+              senderName={senderName}
+              theme={resolvedTheme === "dark" ? "dark" : "sendlit"}
               blocks={
                 purpose === "marketing"
                   ? MARKETING_EMAIL_EDITOR_BLOCKS
diff --git a/apps/web/components/dashboard/sequence-email-editor.tsx b/apps/web/components/dashboard/sequence-email-editor.tsx
index 198d6bc4..4b12fe4e 100644
--- a/apps/web/components/dashboard/sequence-email-editor.tsx
+++ b/apps/web/components/dashboard/sequence-email-editor.tsx
@@ -10,6 +10,7 @@ import {
   type DeliverySourceSelection,
   getEventDefinition,
   getSequence,
+  updateSequence,
   listSendingOptions,
   type SendingOption,
   updateSequenceEmail,
@@ -42,6 +43,9 @@ export function SequenceEmailEditor({
     null,
   );
   const [viewInBrowser, setViewInBrowser] = useState(true);
+  // A broadcast's subject is its title; the API keeps the two in step.
+  const [isBroadcast, setIsBroadcast] = useState(false);
+  const [savedSubject, setSavedSubject] = useState("");
   const [eventVariables, setEventVariables] = useState<
     { tag: string; description: string }[]
   >([]);
@@ -55,6 +59,7 @@ export function SequenceEmailEditor({
       .then((sequence) => {
         setDeliverySource(sequence.deliverySource ?? null);
         setViewInBrowser(sequence.viewInBrowser);
+        setIsBroadcast(sequence.type === "broadcast");
         // `{{ event.* }}`: the properties of the event that starts it.
         if (sequence.triggerType === "event:custom" && sequence.triggerData) {
           const name = sequence.triggerData;
@@ -76,6 +81,7 @@ export function SequenceEmailEditor({
           setError("Email not found");
           return;
         }
+        setSavedSubject(found.subject);
         setEmail({
           emailId: found.emailId,
           subject: found.subject,
@@ -97,16 +103,21 @@ export function SequenceEmailEditor({
       purpose="marketing"
       viewInBrowser={viewInBrowser}
       extraVariables={eventVariables}
-      header={
-        <h1 className="truncate text-base font-semibold">
-          {email.subject || "Untitled email"}
-        </h1>
+      subject={email.subject}
+      onSubjectChange={(subject) => setEmail({ ...email, subject })}
+      senderName={
+        sendingOptionFor(sendingOptions, deliverySource)?.fromName ?? undefined
       }
       initialContent={email.content}
       onSave={async (content) => {
+        if (isBroadcast && email.subject !== savedSubject) {
+          await updateSequence(sequenceId, { title: email.subject });
+        }
         await updateSequenceEmail(sequenceId, email.emailId, {
           content,
+          ...(isBroadcast ? {} : { subject: email.subject }),
         });
+        setSavedSubject(email.subject);
       }}
       actions={(saveContent) => (
         <SendTestDialog

From 4dc3d8ce1ab37e20486d35452c8832197468962e Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 16:40:04 +0530
Subject: [PATCH 04/18] docs: document the new editor, its blocks and
 conditional_not_allowed (#169)

---
 .../transactional-vs-marketing-templates.md   |  7 +-
 apps/docs/content/docs/developers/errors.mdx  |  1 +
 apps/docs/content/docs/developers/mcp.mdx     |  2 +-
 .../docs/email-blocks/email-editor.mdx        | 75 ++++++++++++++++++-
 4 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/apps/api/docs/transactional-vs-marketing-templates.md b/apps/api/docs/transactional-vs-marketing-templates.md
index 4f6beccf..ddcaedf3 100644
--- a/apps/api/docs/transactional-vs-marketing-templates.md
+++ b/apps/api/docs/transactional-vs-marketing-templates.md
@@ -51,7 +51,9 @@ unsubscribe footer and do not require a mailing address.
 3. API callers never provide `address` or `unsubscribe_link`.
 4. Marketing templates contain exactly one final `footer` block with
    SendLit-controlled address and unsubscribe content.
-5. Transactional templates cannot contain a `footer` block.
+5. Transactional templates cannot contain a `footer` block or a `conditional`
+   section (it reads the subscriber's tags, and a transactional send has no
+   subscriber).
 6. Missing unguarded transactional variables return a synchronous `422`; no
    transactional row or queue job is created.
 7. System templates are starters. They must be copied into a team-owned `tpl_`
@@ -164,7 +166,8 @@ The transactional path:
 5. Allows explicit optional values through a Liquid `default` filter or a
    guarded `{% if value %}` block.
 6. Does not inject `address`, `unsubscribe_link`, or `subscriber`.
-7. Rejects a `footer` block if one is submitted in transactional content.
+7. Rejects a `footer` block or a `conditional` block (`footer_not_allowed`,
+   `conditional_not_allowed`) if one is submitted in transactional content.
 
 When a transactional template is created or updated, reject reserved marketing
 variables with a validation error such as:
diff --git a/apps/docs/content/docs/developers/errors.mdx b/apps/docs/content/docs/developers/errors.mdx
index c15dc7b0..07e0019d 100644
--- a/apps/docs/content/docs/developers/errors.mdx
+++ b/apps/docs/content/docs/developers/errors.mdx
@@ -14,6 +14,7 @@ on the code rather than human-readable descriptions.
 | `422`  | `template_conversion_requires_changes` | Marketing-only references remain outside the managed footer.         |
 | `422`  | `footer_required`                      | Marketing content does not contain exactly one final managed footer. |
 | `422`  | `footer_not_allowed`                   | Transactional content contains a managed footer.                     |
+| `422`  | `conditional_not_allowed`              | Transactional content contains a conditional section.                |
 | `422`  | `marketing_variables_not_allowed`      | Transactional content references marketing-owned values.             |
 
 Missing and conversion errors include the affected paths:
diff --git a/apps/docs/content/docs/developers/mcp.mdx b/apps/docs/content/docs/developers/mcp.mdx
index e6e7f536..22ed1bab 100644
--- a/apps/docs/content/docs/developers/mcp.mdx
+++ b/apps/docs/content/docs/developers/mcp.mdx
@@ -109,7 +109,7 @@ sendable templates. Use `duplicate_template` to copy or safely convert one.
 Template and sequence-email content is validated as a complete SendLit email
 document on every write. The `style` must include `colors`,
 `typography.header`, `typography.text`, `typography.link`, `interactives`, and
-`structure`; blocks must be one of text, link, image, separator, or footer.
+`structure`; blocks must be one of text, link, image, separator, spacer, columns, social, html, conditional, or footer. A conditional section shows its content only to contacts with (or without) a tag, so it is marketing-only (`conditional_not_allowed` on transactional content).
 Metadata supports only optional `previewText` and an optional `utm` object with
 `source`, `medium`, and `campaign` strings.
 For AI-created content, start with `list_system_templates` and
diff --git a/apps/docs/content/docs/email-blocks/email-editor.mdx b/apps/docs/content/docs/email-blocks/email-editor.mdx
index fd0f53a8..a378bb5b 100644
--- a/apps/docs/content/docs/email-blocks/email-editor.mdx
+++ b/apps/docs/content/docs/email-blocks/email-editor.mdx
@@ -3,8 +3,8 @@ title: EmailEditor
 description: WYSIWYG editor for an email's content.
 ---
 
-`EmailEditor` edits an `Email`'s block content (text, separator, image, link
-by default) and reports changes via `onChange`; pass `blocks` to customize
+`EmailEditor` edits an `Email`'s block content (text, link, image, separator, spacer,
+columns, social, html and conditional by default) and reports changes via `onChange`; pass `blocks` to customize
 which block types are available.
 
 If all you need is the editor and renderer — no filters, triggers, or the
@@ -32,6 +32,71 @@ function Example() {
 }
 ```
 
+### Writing, subject and merge tags
+
+The editor opens in **Write** mode: the subject and preview text sit above the
+email like a document title, text is written inline as markdown (select text for
+a format bar, type `/` for blocks, type `{{` for merge tags), and blocks can be
+dragged by their handle. **Style** mode shows the email as readers will see it
+(desktop or mobile, sample data, a dark inbox) with a panel for the palette,
+typography and the selected block. A "Before you send" checklist flags a missing
+subject or preview text, empty buttons and images without alt text.
+
+Pass the optional props below to turn those on:
+
+```tsx
+<EmailEditor
+    email={email}
+    onChange={setEmail}
+    subject={subject}
+    onSubjectChange={setSubject}
+    variables={[
+        {
+            tag: "{{ subscriber.name }}",
+            description: "The name of the subscriber",
+            sample: "Priya",
+        },
+    ]}
+    senderName="Acme"
+    theme="sendlit" // "sendlit" | "neutral" | "dark"
+/>
+```
+
+Without `subject` the subject field is hidden, so a host that edits it elsewhere
+keeps working. Saving the subject is up to the host. The editor's look is a set
+of `--sle-*` CSS variables on the `.sle` element (colours, radii, fonts), so it
+can be re-skinned without touching the components. Import
+`@sendlit/email-editor/styles.css` for the styles.
+
+### Choosing blocks
+
+`blocks` replaces the default list, so a host can add its own blocks and leave
+out any of the built-in ones, including all of them. Custom blocks are stored
+and rendered exactly as given. Writing paragraph by paragraph (Enter starts a
+new paragraph, `#` makes a heading, `-` a list) applies to the built-in `text`
+block. Without it, or with a host block registered under the name `text`, the
+editor still works: blocks are inserted from the menu, selected, reordered and
+edited through their settings, and the "keep writing" prompt is hidden.
+
+### Built-in blocks
+
+| Block         | Settings                                                           |
+| ------------- | ------------------------------------------------------------------ |
+| `text`        | Markdown `content`: paragraphs, headings, lists and quotes         |
+| `link`        | A link, or a button when `isButton` is set                         |
+| `image`       | `src`, `alt`, size and alignment                                   |
+| `separator`   | A divider line                                                     |
+| `spacer`      | Empty `height`                                                     |
+| `columns`     | Two markdown columns, `ratio`, optional stacking on small screens  |
+| `social`      | `links`: `{ network, url }` buttons for your profiles              |
+| `html`        | Raw `code`, sent as written                                        |
+| `conditional` | Markdown `content` shown only to contacts with (or without) a tag  |
+
+A `conditional` section is rendered as a Liquid condition on
+`subscriber.tags`, so it only works where a subscriber exists (marketing sends).
+`renderEmailToHtml` keeps the condition by default; pass `showConditionals` for
+a preview that shows every section.
+
 ### Custom image uploader
 
 Use `blocks` to replace the default image block settings with a wrapper that
@@ -117,6 +182,12 @@ compliance. Host applications can register add-on blocks with:
 - `placement: "any" | "first" | "last"`
 - an optional `renderContext` supplied by the host
 
+- an optional `quickEdit` component (and `quickEditLayout: "row" | "column"`)
+  with the few fields worth editing while writing, such as a button's label and
+  link. Write mode shows it in a small popover under the selected block, with
+  Style, duplicate and delete; the full `settings` form stays in Style mode.
+  Without one, the popover offers just those three actions.
+
 Mutation handlers enforce these capabilities as well as hiding unavailable
 controls. The render context is passed to preview and HTML rendering but is
 never serialized into the `Email` document.

From b75a8a587e5164bfec2e68b8f1de3ae4cd199c1b Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 17:16:25 +0530
Subject: [PATCH 05/18] fix(email-editor): drop the up/down side bar while
 writing; the grip moves blocks (#169)

---
 packages/email-editor/src/components/block-row.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/email-editor/src/components/block-row.tsx b/packages/email-editor/src/components/block-row.tsx
index 9968676b..8c2317dc 100644
--- a/packages/email-editor/src/components/block-row.tsx
+++ b/packages/email-editor/src/components/block-row.tsx
@@ -224,7 +224,9 @@ export function BlockRow(props: BlockRowProps) {
         }}
       />
 
-      {selected && (
+      {/* While writing, the gutter's grip moves blocks and the popover holds
+          the rest, so the side bar is only for Style mode. */}
+      {selected && mode === "style" && (
         // biome-ignore lint/a11y/noStaticElementInteractions: keeps toolbar clicks off the canvas
         <div className="sle-bar" onClick={(event) => event.stopPropagation()}>
           {capabilities.canMoveUp && (
@@ -247,7 +249,7 @@ export function BlockRow(props: BlockRowProps) {
               <ArrowDown className="size-3.5" />
             </button>
           )}
-          {mode === "style" && capabilities.canDuplicate && (
+          {capabilities.canDuplicate && (
             <button
               type="button"
               aria-label="Duplicate"
@@ -257,7 +259,7 @@ export function BlockRow(props: BlockRowProps) {
               <Copy className="size-3.5" />
             </button>
           )}
-          {mode === "style" && capabilities.canDelete && (
+          {capabilities.canDelete && (
             <button
               type="button"
               className="del"

From c6fdea74c35f1bc70fc0f4deb89d89488f1dff5e Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 17:25:22 +0530
Subject: [PATCH 06/18] fix(email-editor): make block settings usable from the
 keyboard while writing (#169)

Escape closes a block's quick settings from anywhere and returns focus to
the block; tabbing on to another row closes them; Enter in a field closes
them and carries on writing below. The arrow keys now stop on buttons and
images between paragraphs, and the first field's text is selected so
typing replaces a placeholder.
---
 .../email-editor/src/components/block-row.tsx |   9 ++
 .../src/components/email-editor.test.tsx      |  71 +++++++++++++
 .../src/components/email-editor.tsx           | 100 ++++++++++++++++--
 3 files changed, 170 insertions(+), 10 deletions(-)

diff --git a/packages/email-editor/src/components/block-row.tsx b/packages/email-editor/src/components/block-row.tsx
index 8c2317dc..dfa700fd 100644
--- a/packages/email-editor/src/components/block-row.tsx
+++ b/packages/email-editor/src/components/block-row.tsx
@@ -15,6 +15,8 @@ export interface RowEvents {
   onOpenInsert: (id: string) => void;
   onGripClick: (id: string) => void;
   onMove: (id: string, direction: "up" | "down") => void;
+  /** Arrow keys on a selected block move the caret into the text around it. */
+  onNavigate: (id: string, direction: "prev" | "next") => void;
   onDragStart: (id: string) => void;
   onDragOver: (id: string, edge: "before" | "after") => void;
   onDrop: () => void;
@@ -222,6 +224,13 @@ export function BlockRow(props: BlockRowProps) {
           event.stopPropagation();
           props.onSelect(block.id);
         }}
+        onKeyDown={(event) => {
+          if (mode !== "write") return;
+          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            events.onNavigate(block.id, event.key === "ArrowUp" ? "prev" : "next");
+          }
+        }}
       />
 
       {/* While writing, the gutter's grip moves blocks and the popover holds
diff --git a/packages/email-editor/src/components/email-editor.test.tsx b/packages/email-editor/src/components/email-editor.test.tsx
index 20fe167c..68316a67 100644
--- a/packages/email-editor/src/components/email-editor.test.tsx
+++ b/packages/email-editor/src/components/email-editor.test.tsx
@@ -272,3 +272,74 @@ describe("writing paragraph by paragraph", () => {
     expect(screen.getByRole("status").textContent).toBe("Pasted 3 paragraphs");
   });
 });
+
+describe("block settings from the keyboard", () => {
+  const start = () =>
+    mount({
+      email: email([
+        { blockType: "text", settings: { content: "Before" } },
+        {
+          blockType: "link",
+          settings: { text: "Go", url: "https://x.co", isButton: true },
+        },
+        { blockType: "text", settings: { content: "After" } },
+      ]),
+      blocks: [Text, Link],
+    });
+  const settle = () => act(() => new Promise((done) => setTimeout(done, 80)));
+  const popover = () => screen.queryByRole("toolbar", { name: "Link settings" });
+  const selectButton = () => screen.getByRole("button", { name: "Select: Link" });
+
+  it("closes on Escape and hands focus back to the block", async () => {
+    start();
+    fireEvent.click(selectButton());
+    await settle();
+    expect(document.activeElement?.getAttribute("aria-label")).toBe("Button text");
+
+    fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+    await settle();
+    expect(popover()).toBeNull();
+    expect(document.activeElement).toBe(selectButton());
+
+    // Enter on the block opens its settings again.
+    fireEvent.click(document.activeElement!);
+    expect(popover()).toBeTruthy();
+  });
+
+  it("closes when focus tabs on to another row", async () => {
+    start();
+    fireEvent.click(selectButton());
+    await settle();
+    act(() => screen.getByRole("button", { name: "Edit: Text 3" }).focus());
+    expect(popover()).toBeNull();
+  });
+
+  it("carries on writing below the block after Enter in a field", async () => {
+    start();
+    fireEvent.click(selectButton());
+    await settle();
+    fireEvent.keyDown(screen.getByLabelText("Button link"), { key: "Enter" });
+    await settle();
+    expect(popover()).toBeNull();
+    expect(
+      (screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement).value,
+    ).toBe("After");
+  });
+
+  it("stops on the block when arrowing through the text", async () => {
+    start();
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    const first = screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement;
+    first.setSelectionRange(6, 6);
+    fireEvent.keyDown(first, { key: "ArrowDown" });
+    await settle();
+    expect(document.activeElement).toBe(selectButton());
+    expect(popover()).toBeNull();
+
+    fireEvent.keyDown(selectButton(), { key: "ArrowDown" });
+    await settle();
+    expect(
+      (screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement).value,
+    ).toBe("After");
+  });
+});
diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index e20c9f60..8d8b4303 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -595,19 +595,32 @@ export function EmailEditor({
     [activate, blockRegistry, commitContent, select],
   );
 
+  /** Keyboard focus on a block itself, after the next render. */
+  const focusRow = useCallback((id: string) => {
+    setTimeout(() =>
+      rootRef.current
+        ?.querySelector<HTMLElement>(`[data-block-id="${id}"] > .sle-hit`)
+        ?.focus(),
+    );
+  }, []);
+
   const navigate = useCallback(
     (id: string, direction: "prev" | "next") => {
       const content = emailRef.current.content;
       const index = content.findIndex((block) => block.id === id);
-      const step = direction === "prev" ? -1 : 1;
-      for (let i = index + step; i >= 0 && i < content.length; i += step) {
-        if (isItem(content[i])) {
-          activate(content[i].id!, direction === "prev" ? "end" : 0);
-          return;
-        }
+      const next = content[index + (direction === "prev" ? -1 : 1)];
+      if (!next) return;
+      if (isItem(next)) {
+        activate(next.id!, direction === "prev" ? "end" : 0);
+        return;
       }
+      // A button, image or other block: focus it without opening its
+      // settings. Enter opens them; the arrows carry on past it.
+      setActiveId(null);
+      setSelectedId(null);
+      focusRow(next.id!);
     },
-    [activate],
+    [activate, focusRow],
   );
 
   const pasteParagraphs = useCallback(
@@ -694,6 +707,59 @@ export function EmailEditor({
     return () => document.removeEventListener("keydown", onKey);
   }, [insertAfterId]);
 
+  /** Closes a block's quick settings and hands focus back to the block, so
+   * Enter opens them again and the arrow keys carry on through the text. */
+  const closePopover = useCallback(
+    (id: string) => {
+      setSelectedId(null);
+      focusRow(id);
+    },
+    [focusRow],
+  );
+
+  /** Done with a block's quick settings: write on in the paragraph after it,
+   * starting one if the next thing isn't text. */
+  const continueAfter = useCallback(
+    (id: string) => {
+      const content = emailRef.current.content;
+      const index = content.findIndex((block) => block.id === id);
+      const next = content[index + 1];
+      if (isItem(next)) return activate(next!.id!, 0);
+      const created = canWrite ? insertText(index + 1, "") : null;
+      if (created) activate(created, 0);
+      else closePopover(id);
+    },
+    [activate, canWrite, closePopover, insertText],
+  );
+
+  // While writing, a block's quick settings close on Escape wherever focus
+  // is, and when focus moves on to another row (Tab out of the popover).
+  // Dialogs a quick edit opens, such as an image picker, render outside the
+  // editor and keep it open.
+  useEffect(() => {
+    if (mode !== "write" || !selectedId) return;
+    const row = () => rootRef.current?.querySelector(`[data-block-id="${selectedId}"]`);
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      const target = event.target as Node | null;
+      if (target && target !== document.body && !rootRef.current?.contains(target))
+        return;
+      event.preventDefault();
+      closePopover(selectedId);
+    };
+    const onFocus = (event: FocusEvent) => {
+      const target = event.target as Node;
+      if (rootRef.current?.contains(target) && !row()?.contains(target))
+        setSelectedId(null);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("focusin", onFocus);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("focusin", onFocus);
+    };
+  }, [closePopover, mode, selectedId]);
+
   // Undo and redo work wherever focus is, unless a field of its own (the
   // subject, a settings input, the host's own inputs) should undo instead.
   // Deleting a block from its popover leaves focus on the page, not in here.
@@ -723,11 +789,13 @@ export function EmailEditor({
     const timer = setTimeout(() => {
       const popover = rootRef.current?.querySelector<HTMLElement>(".sle-pop");
       popover?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-      // Ready to type into the first field, so Escape and Tab work too.
-      const field = popover?.querySelector<HTMLElement>(
+      // Ready to type into the first field, so Escape and Tab work too. Its
+      // text is selected, so typing replaces a placeholder like "Click here".
+      const field = popover?.querySelector<HTMLInputElement>(
         "input:not([type=checkbox]), textarea",
       );
       (field ?? popover)?.focus({ preventScroll: true });
+      field?.select();
     }, 60);
     return () => clearTimeout(timer);
   }, [selectedId, mode]);
@@ -858,6 +926,7 @@ export function EmailEditor({
     onOpenInsert: openInsert,
     onGripClick: (id) => focusBlock(id),
     onMove: moveBlock,
+    onNavigate: navigate,
     onDragStart: (id) => {
       setDragId(id);
       setActiveId(null);
@@ -915,7 +984,18 @@ export function EmailEditor({
           event.stopPropagation();
           if (event.key === "Escape") {
             event.preventDefault();
-            setSelectedId(null);
+            closePopover(row.id);
+          }
+          // Enter in a one-line field means done: carry on writing below.
+          const field = event.target as HTMLElement;
+          if (
+            event.key === "Enter" &&
+            !event.shiftKey &&
+            field.tagName === "INPUT" &&
+            !["checkbox", "radio", "file"].includes((field as HTMLInputElement).type)
+          ) {
+            event.preventDefault();
+            continueAfter(row.id);
           }
         }}
       >

From 9e829b45e220a831798e1bcae2f276534cd2c2ef Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 20:11:03 +0530
Subject: [PATCH 07/18] fix(email-editor): keyboard access for every block
 while writing (#169)

Each block's popover starts on its first control; deleting a block keeps
focus in the email; the + insert menu takes focus and moves with the arrow
keys, closing on Escape or Tab back to its button; popovers close when focus
leaves the editor but stay open behind a dialog they opened, whose Escape
and Enter no longer reach them. Spacer and section options report their
pressed state, social checkboxes are named, and /conditional finds the
Section block.
---
 .../src/blocks/conditional/quick-edit.tsx     |  2 +
 .../src/blocks/social/quick-edit.tsx          |  1 +
 .../src/blocks/spacer/quick-edit.tsx          |  1 +
 .../src/components/block-menu.tsx             | 40 ++++++++++
 .../src/components/email-editor.test.tsx      | 45 ++++++++++-
 .../src/components/email-editor.tsx           | 79 +++++++++++++------
 .../email-editor/src/lib/block-choices.ts     |  2 +-
 7 files changed, 145 insertions(+), 25 deletions(-)

diff --git a/packages/email-editor/src/blocks/conditional/quick-edit.tsx b/packages/email-editor/src/blocks/conditional/quick-edit.tsx
index 75ec93eb..18a28116 100644
--- a/packages/email-editor/src/blocks/conditional/quick-edit.tsx
+++ b/packages/email-editor/src/blocks/conditional/quick-edit.tsx
@@ -16,6 +16,7 @@ export function ConditionalQuickEdit({
           <button
             type="button"
             className={has ? "on" : undefined}
+            aria-pressed={has}
             onClick={() => set("has", true)}
           >
             Tagged
@@ -23,6 +24,7 @@ export function ConditionalQuickEdit({
           <button
             type="button"
             className={has ? undefined : "on"}
+            aria-pressed={!has}
             onClick={() => set("has", false)}
           >
             Not tagged
diff --git a/packages/email-editor/src/blocks/social/quick-edit.tsx b/packages/email-editor/src/blocks/social/quick-edit.tsx
index 346e0aac..2e09c42e 100644
--- a/packages/email-editor/src/blocks/social/quick-edit.tsx
+++ b/packages/email-editor/src/blocks/social/quick-edit.tsx
@@ -18,6 +18,7 @@ export function SocialQuickEdit({
           <label key={network.value}>
             <input
               type="checkbox"
+              aria-label={`Show ${network.label}`}
               checked={Boolean(link)}
               onChange={(event) =>
                 setLinks(
diff --git a/packages/email-editor/src/blocks/spacer/quick-edit.tsx b/packages/email-editor/src/blocks/spacer/quick-edit.tsx
index 46312fe4..2310a398 100644
--- a/packages/email-editor/src/blocks/spacer/quick-edit.tsx
+++ b/packages/email-editor/src/blocks/spacer/quick-edit.tsx
@@ -20,6 +20,7 @@ export function SpacerQuickEdit({
           key={value}
           type="button"
           className={height === value ? "on" : undefined}
+          aria-pressed={height === value}
           onClick={() =>
             updateBlock(block.id, {
               settings: { ...block.settings, height: value },
diff --git a/packages/email-editor/src/components/block-menu.tsx b/packages/email-editor/src/components/block-menu.tsx
index 2b4ba92d..753d2ceb 100644
--- a/packages/email-editor/src/components/block-menu.tsx
+++ b/packages/email-editor/src/components/block-menu.tsx
@@ -1,3 +1,4 @@
+import { type KeyboardEvent, useEffect, useRef } from "react";
 import type { MenuPlacement } from "../lib/menu-placement";
 import type { BlockChoice, EditorVariable } from "../types/editor-ui";
 
@@ -11,6 +12,7 @@ export function BlockMenu({
   onPickVariable,
   placement,
   header,
+  onClose,
 }: {
   choices: BlockChoice[];
   /** Highlighted entry; choices first, then variables. */
@@ -21,14 +23,51 @@ export function BlockMenu({
   onPickVariable?: (variable: EditorVariable) => void;
   placement?: MenuPlacement;
   header?: string;
+  /** Given when the menu has focus of its own (the + button opened it rather
+   * than typing /): it starts on the first entry, the arrow keys move between
+   * entries, and Escape or Tab calls this. */
+  onClose?: () => void;
 }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const focusable = Boolean(onClose);
+
+  useEffect(() => {
+    if (focusable) ref.current?.querySelector<HTMLElement>("button")?.focus();
+  }, [focusable]);
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (!onClose) return;
+    const items = Array.from(
+      ref.current?.querySelectorAll<HTMLElement>("button") ?? [],
+    );
+    const at = items.indexOf(document.activeElement as HTMLElement);
+    const go = (index: number) => items[(index + items.length) % items.length]?.focus();
+    const keys: Record<string, () => void> = {
+      ArrowDown: () => go(at + 1),
+      ArrowRight: () => go(at + 1),
+      ArrowUp: () => go(at - 1),
+      ArrowLeft: () => go(at - 1),
+      Home: () => go(0),
+      End: () => go(items.length - 1),
+      Escape: onClose,
+      Tab: onClose,
+    };
+    const action = keys[event.key];
+    if (!action) return;
+    event.preventDefault();
+    event.stopPropagation();
+    action();
+  }
+
   return (
     <div
+      ref={ref}
       className={`sle-menu grid${placement?.up ? " up" : ""}`}
       style={placement && { maxHeight: placement.maxHeight }}
       role="menu"
       aria-label="Insert"
       onMouseDown={(event) => event.preventDefault()}
+      onKeyDown={onKeyDown}
     >
       {header && <div className="mh">{header}</div>}
       <div className="sle-tiles">
@@ -60,6 +99,7 @@ export function BlockMenu({
               <button
                 key={variable.tag}
                 type="button"
+                role="menuitem"
                 className={`sle-chip${choices.length + i === index ? " first" : ""}`}
                 onClick={() => onPickVariable(variable)}
               >
diff --git a/packages/email-editor/src/components/email-editor.test.tsx b/packages/email-editor/src/components/email-editor.test.tsx
index 68316a67..bcac6b00 100644
--- a/packages/email-editor/src/components/email-editor.test.tsx
+++ b/packages/email-editor/src/components/email-editor.test.tsx
@@ -11,7 +11,7 @@ const { act, cleanup, fireEvent, render, screen, within } = await import(
 );
 const { EmailEditor } = await import("../email-editor");
 const { defaultEmail } = await import("../lib/default-email");
-const { Image, Link, Separator, Text } = await import("../blocks");
+const { Image, Link, Separator, Spacer, Text } = await import("../blocks");
 
 afterEach(() => cleanup());
 // Leave no DOM behind: the email renderer's tests need the real stream globals.
@@ -342,4 +342,47 @@ describe("block settings from the keyboard", () => {
       (screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement).value,
     ).toBe("After");
   });
+
+  it("moves focus to the text above when a block is deleted", async () => {
+    start();
+    fireEvent.click(selectButton());
+    await settle();
+    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+    await settle();
+    const editor = document.activeElement as HTMLTextAreaElement;
+    expect(editor.tagName).toBe("TEXTAREA");
+    expect(editor.value).toBe("Before");
+  });
+
+  it("starts on the first control of blocks without a text field", async () => {
+    mount({
+      email: email([{ blockType: "spacer", settings: { height: "20px" } }]),
+      blocks: [Text, Spacer],
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Select: Spacer" }));
+    await settle();
+    expect(document.activeElement?.textContent).toBe("Small");
+    const medium = screen.getByRole("button", { name: "Medium" });
+    expect(medium.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("drives the insert menu with the keyboard", async () => {
+    start();
+    fireEvent.click(screen.getAllByRole("button", { name: "Insert below" })[0]);
+    await settle();
+    const menu = screen.getByRole("menu", { name: "Insert" });
+    const items = within(menu).getAllByRole("menuitem");
+    expect(document.activeElement).toBe(items[0]);
+    fireEvent.keyDown(items[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(items[1]);
+    fireEvent.keyDown(items[1], { key: "ArrowUp" });
+    fireEvent.keyDown(items[0], { key: "ArrowUp" });
+    expect(document.activeElement).toBe(items[items.length - 1]);
+
+    fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+    expect(screen.queryByRole("menu", { name: "Insert" })).toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getAllByRole("button", { name: "Insert below" })[0],
+    );
+  });
 });
diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index 8d8b4303..e7e90464 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -103,6 +103,10 @@ function labelOf(block: EmailBlock, blockRegistry: BlockRegistry) {
   return blockRegistry[block.blockType]?.metadata.displayName ?? "Block";
 }
 
+/** Dialogs and popovers a host's quick edit may open outside the editor. */
+const DIALOGS =
+  '[role="dialog"], [role="alertdialog"], [data-radix-popper-content-wrapper]';
+
 const isItem = (block: EmailBlock | undefined): boolean =>
   block?.blockType === "text" && Boolean(block.group);
 
@@ -434,17 +438,37 @@ export function EmailEditor({
 
   // ---- whole-row actions --------------------------------------------------
 
+  /** Keyboard focus on a block itself, after the next render. */
+  const focusRow = useCallback((id: string) => {
+    setTimeout(() =>
+      rootRef.current
+        ?.querySelector<HTMLElement>(`[data-block-id="${id}"] > .sle-hit`)
+        ?.focus(),
+    );
+  }, []);
+
   const deleteBlock = useCallback(
     (id: string) => {
       const content = emailRef.current.content;
       const row = rowsOf(content, mode).find((r) => r.id === id);
       if (!row || !canDeleteBlock(row.block, blockRegistry)) return;
-      commitContent([...content.slice(0, row.start), ...content.slice(row.end)]);
+      const next = [...content.slice(0, row.start), ...content.slice(row.end)];
+      commitContent(next);
       setActiveId((current) => (current === id ? null : current));
       setSelectedId((current) => (current === id ? null : current));
       flash(`${labelOf(row.block, blockRegistry)} deleted. Undo brings it back.`);
+      // Keep focus in the email, on what was above (or else below) it.
+      const neighbour = next[row.start - 1] ?? next[row.start];
+      if (!neighbour) return;
+      if (mode === "write" && isItem(neighbour)) activate(neighbour.id!, "end");
+      else {
+        const target = rowsOf(next, mode).find(
+          (r) => r.start <= next.indexOf(neighbour) && next.indexOf(neighbour) < r.end,
+        );
+        if (target) focusRow(target.id);
+      }
     },
-    [blockRegistry, commitContent, flash, mode, rowsOf],
+    [activate, blockRegistry, commitContent, flash, focusRow, mode, rowsOf],
   );
 
   const duplicateBlock = useCallback(
@@ -595,15 +619,6 @@ export function EmailEditor({
     [activate, blockRegistry, commitContent, select],
   );
 
-  /** Keyboard focus on a block itself, after the next render. */
-  const focusRow = useCallback((id: string) => {
-    setTimeout(() =>
-      rootRef.current
-        ?.querySelector<HTMLElement>(`[data-block-id="${id}"] > .sle-hit`)
-        ?.focus(),
-    );
-  }, []);
-
   const navigate = useCallback(
     (id: string, direction: "prev" | "next") => {
       const content = emailRef.current.content;
@@ -733,9 +748,8 @@ export function EmailEditor({
   );
 
   // While writing, a block's quick settings close on Escape wherever focus
-  // is, and when focus moves on to another row (Tab out of the popover).
-  // Dialogs a quick edit opens, such as an image picker, render outside the
-  // editor and keep it open.
+  // is, and when focus moves on, to another row or out of the editor (Tab out
+  // of the popover).
   useEffect(() => {
     if (mode !== "write" || !selectedId) return;
     const row = () => rootRef.current?.querySelector(`[data-block-id="${selectedId}"]`);
@@ -748,9 +762,11 @@ export function EmailEditor({
       closePopover(selectedId);
     };
     const onFocus = (event: FocusEvent) => {
-      const target = event.target as Node;
-      if (rootRef.current?.contains(target) && !row()?.contains(target))
-        setSelectedId(null);
+      const target = event.target as Element;
+      if (row()?.contains(target)) return;
+      // A dialog the quick edit opened, such as an image picker, keeps it.
+      if (!rootRef.current?.contains(target) && target.closest?.(DIALOGS)) return;
+      setSelectedId(null);
     };
     document.addEventListener("keydown", onKey);
     document.addEventListener("focusin", onFocus);
@@ -789,13 +805,19 @@ export function EmailEditor({
     const timer = setTimeout(() => {
       const popover = rootRef.current?.querySelector<HTMLElement>(".sle-pop");
       popover?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-      // Ready to type into the first field, so Escape and Tab work too. Its
-      // text is selected, so typing replaces a placeholder like "Click here".
-      const field = popover?.querySelector<HTMLInputElement>(
-        "input:not([type=checkbox]), textarea",
+      // Start on the block's first control, so Escape and Tab work too. A
+      // field's text is selected, so typing replaces a placeholder like
+      // "Click here" (a textarea's isn't: typing would wipe its code). Blocks
+      // without quick settings focus the popover itself.
+      const control = Array.from(
+        popover?.querySelectorAll<HTMLElement>("input, textarea, select, button") ?? [],
+      ).find(
+        (element) =>
+          !element.closest(".acts") && !(element as HTMLInputElement).disabled,
       );
-      (field ?? popover)?.focus({ preventScroll: true });
-      field?.select();
+      (control ?? popover)?.focus({ preventScroll: true });
+      if (control instanceof HTMLInputElement && control.type === "text")
+        control.select();
     }, 60);
     return () => clearTimeout(timer);
   }, [selectedId, mode]);
@@ -950,6 +972,14 @@ export function EmailEditor({
           index={-1}
           placement={insertPlacement}
           header="Insert"
+          onClose={() => {
+            setInsertAfterId(null);
+            rootRef.current
+              ?.querySelector<HTMLElement>(
+                `[data-block-id="${row.id}"] [aria-label="Insert below"]`,
+              )
+              ?.focus();
+          }}
           onPick={(choice) => {
             setInsertAfterId(null);
             insertChoice(choice, row.end);
@@ -981,6 +1011,9 @@ export function EmailEditor({
         style={{ maxHeight: popoverMax }}
         onClick={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
+          // Keys from a dialog the quick edit opened (it renders elsewhere but
+          // bubbles through here) belong to that dialog.
+          if (!event.currentTarget.contains(event.target as Node)) return;
           event.stopPropagation();
           if (event.key === "Escape") {
             event.preventDefault();
diff --git a/packages/email-editor/src/lib/block-choices.ts b/packages/email-editor/src/lib/block-choices.ts
index b0e1cd3a..92cc7075 100644
--- a/packages/email-editor/src/lib/block-choices.ts
+++ b/packages/email-editor/src/lib/block-choices.ts
@@ -83,7 +83,7 @@ const BLOCK_KEYWORDS: Record<string, string> = {
   columns: "two side",
   social: "links profiles",
   html: "code custom",
-  conditional: "tag section segment if",
+  conditional: "conditional tag section segment if personalise personalize",
   spacer: "space gap",
   link: "url",
 };

From 4d9c5d46c1e9e2ad96ee6db1ed5dbb289de371e5 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 23:09:56 +0530
Subject: [PATCH 08/18] fix(email-editor): paragraphs typed after a title block
 use body text style (#169)

A text block of only headings, like a starter's title set at 26px, passed
its size and colour on to paragraphs typed after it. Those now take the
style of the nearest body text, joining it when it comes straight after.
---
 .../src/components/email-editor.test.tsx      | 42 ++++++++++++++++
 .../src/components/email-editor.tsx           | 50 ++++++++++++++++---
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/packages/email-editor/src/components/email-editor.test.tsx b/packages/email-editor/src/components/email-editor.test.tsx
index bcac6b00..f6581fe5 100644
--- a/packages/email-editor/src/components/email-editor.test.tsx
+++ b/packages/email-editor/src/components/email-editor.test.tsx
@@ -214,6 +214,48 @@ describe("writing paragraph by paragraph", () => {
     expect(last().content[0].settings.content).toBe("Hello world");
   });
 
+  it("writes body text, not more heading, after a title block", () => {
+    const { last } = mount({
+      email: email([
+        { blockType: "text", settings: { content: "# Welcome", fontSize: "26px" } },
+        { blockType: "separator", settings: {} },
+        { blockType: "text", settings: { content: "Thanks", fontSize: "17px" } },
+      ]),
+      blocks: [Text, Separator],
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    editor().setSelectionRange(7, 7);
+    fireEvent.keyDown(editor(), { key: "Enter" });
+    fireEvent.change(editor(), { target: { value: "So nice" } });
+    expect(last().content).toEqual([
+      { blockType: "text", settings: { content: "# Welcome", fontSize: "26px" } },
+      { blockType: "text", settings: { content: "So nice", fontSize: "17px" } },
+      { blockType: "separator", settings: {} },
+      { blockType: "text", settings: { content: "Thanks", fontSize: "17px" } },
+    ]);
+  });
+
+  it("joins the body text straight after a title block", () => {
+    const { last } = mount({
+      email: email([
+        { blockType: "text", settings: { content: "# Welcome", fontSize: "26px" } },
+        { blockType: "text", settings: { content: "Thanks", fontSize: "17px" } },
+      ]),
+      blocks: [Text],
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    editor().setSelectionRange(7, 7);
+    fireEvent.keyDown(editor(), { key: "Enter" });
+    fireEvent.change(editor(), { target: { value: "So nice" } });
+    expect(last().content).toEqual([
+      { blockType: "text", settings: { content: "# Welcome", fontSize: "26px" } },
+      {
+        blockType: "text",
+        settings: { content: "So nice\n\nThanks", fontSize: "17px" },
+      },
+    ]);
+  });
+
   it("continues a list on Enter and ends it on an empty item", () => {
     const { last } = mount({
       email: email([{ blockType: "text", settings: { content: "- one" } }]),
diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index e7e90464..57bc8564 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -110,6 +110,42 @@ const DIALOGS =
 const isItem = (block: EmailBlock | undefined): boolean =>
   block?.blockType === "text" && Boolean(block.group);
 
+const isHeading = (block: EmailBlock) =>
+  parseItem(String(block.settings.content ?? "")).kind.startsWith("h");
+
+const withoutContent = ({ content: _drop, ...settings }: EmailBlock["settings"]) =>
+  settings;
+
+/** Where a new item written after `previous` belongs: its text block, so
+ * writing on stays one block. A paragraph after a block of only headings (a
+ * title set in its own size) takes the style of the nearest body text
+ * instead, joining it when it comes straight after. */
+function homeFor(
+  content: EmailBlock[],
+  previous: EmailBlock,
+  markdown: string,
+): Pick<EmailBlock, "group" | "settings"> {
+  const own = { group: previous.group, settings: withoutContent(previous.settings) };
+  if (parseItem(markdown).kind !== "p") return own;
+  const at = content.indexOf(previous);
+  const heading = content.filter(
+    (block) => isItem(block) && block.group === previous.group,
+  );
+  if (!heading.every(isHeading)) return own;
+  const body = (block: EmailBlock | undefined) =>
+    isItem(block) && block!.group !== previous.group && !isHeading(block!);
+  const next = content[at + 1];
+  if (body(next))
+    return { group: next!.group, settings: withoutContent(next!.settings) };
+  const nearest = [...content.slice(at + 1), ...content.slice(0, at).reverse()].find(
+    body,
+  );
+  return {
+    group: generateId(),
+    settings: nearest ? withoutContent(nearest.settings) : {},
+  };
+}
+
 interface EmailEditorProps {
   initialEmail?: Email;
   onChange?: (email: Email) => void;
@@ -404,14 +440,14 @@ export function EmailEditor({
       const at = resolveInsertionIndex("text", index, content, blockRegistry);
       if (at === null) return null;
       const previous = content[at - 1];
-      const { content: _drop, ...settings } = isItem(previous)
-        ? previous!.settings
-        : {};
+      const home = isItem(previous)
+        ? homeFor(content, previous!, markdown)
+        : { group: generateId(), settings: {} };
       const item: EmailBlock = {
         id: generateId(),
         blockType: "text",
-        group: isItem(previous) ? previous!.group : generateId(),
-        settings: { ...settings, content: markdown },
+        group: home.group,
+        settings: { ...home.settings, content: markdown },
       };
       commitContent([...content.slice(0, at), item, ...content.slice(at)]);
       return item.id!;
@@ -569,10 +605,12 @@ export function EmailEditor({
       const index = content.findIndex((block) => block.id === id);
       const item = content[index];
       if (!item) return;
+      const home = homeFor(content, item, after);
       const created: EmailBlock = {
         ...item,
         id: generateId(),
-        settings: { ...item.settings, content: after },
+        group: home.group,
+        settings: { ...home.settings, content: after },
       };
       commitContent([
         ...content.slice(0, index),

From 58fa0e1ffedb9dc0385998ce880e62588a05f517 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Sun, 1 Nov 2026 23:28:43 +0530
Subject: [PATCH 09/18] feat(templates): drop the all-caps label above each
 marketing starter (#169)

---
 apps/api/src/templates/system-templates.ts | 49 ----------------------
 1 file changed, 49 deletions(-)

diff --git a/apps/api/src/templates/system-templates.ts b/apps/api/src/templates/system-templates.ts
index 95f40acd..157de340 100644
--- a/apps/api/src/templates/system-templates.ts
+++ b/apps/api/src/templates/system-templates.ts
@@ -97,18 +97,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           "A polished announcement template for launches, updates, and key news.",
       },
       content: [
-        {
-          blockType: "text",
-          settings: {
-            content: "JUST ANNOUNCED",
-            alignment: "center",
-            fontFamily: "Helvetica, sans-serif",
-            fontSize: "12px",
-            foregroundColor: "#db2777",
-            paddingTop: "6px",
-            paddingBottom: "4px",
-          },
-        },
         {
           blockType: "image",
           settings: {
@@ -274,18 +262,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           "A friendly welcome email for onboarding new users and subscribers.",
       },
       content: [
-        {
-          blockType: "text",
-          settings: {
-            content: "WELCOME",
-            alignment: "center",
-            fontFamily: "Helvetica, sans-serif",
-            fontSize: "12px",
-            foregroundColor: "#2563eb",
-            paddingTop: "8px",
-            paddingBottom: "0px",
-          },
-        },
         {
           blockType: "text",
           settings: {
@@ -430,19 +406,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           "A polished upsell email to spotlight related products and premium offers.",
       },
       content: [
-        {
-          blockType: "text",
-          settings: {
-            content: "RECOMMENDED FOR YOU",
-            alignment: "center",
-            fontFamily: "Helvetica, sans-serif",
-            fontSize: "12px",
-            foregroundColor: "#7c3aed",
-            backgroundColor: "#f5f3ff",
-            paddingTop: "8px",
-            paddingBottom: "8px",
-          },
-        },
         {
           blockType: "text",
           settings: {
@@ -583,18 +546,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           "A clean, editorial newsletter for recurring updates and curated stories.",
       },
       content: [
-        {
-          blockType: "text",
-          settings: {
-            content: "WEEKLY NEWSLETTER",
-            alignment: "left",
-            fontFamily: "Arial, sans-serif",
-            fontSize: "12px",
-            foregroundColor: "#0f766e",
-            paddingTop: "6px",
-            paddingBottom: "0px",
-          },
-        },
         {
           blockType: "text",
           settings: {

From e6d5c456c60245a35c129b2086e438a835323695 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 00:31:38 +0530
Subject: [PATCH 10/18] fix(email-editor): keyboard and screen reader pass over
 the whole editor (#169)

Write mode: each row is one Tab stop named after its content, with the +
and drag handles left to the pointer and Alt+Shift+arrows moving rows
(announced to screen readers); block previews are inert so their links
can't be followed; Escape keeps focus on the paragraph; up from the first
paragraph reaches the preview text; Alt+F10 reaches the format toolbar;
the / and {{ menus are list boxes the text field points into; an edited
field resizes with the window. Style mode: Enter on a block goes to its
settings and Escape returns; Escape deselects; the arrows move between
blocks; the panel tabs follow the tab pattern; sliders and reset buttons
are named. The checklist closes on Escape or when focus leaves it.

The web editor screen asks before leaving with unsaved edits, warns on
reload, and saves on Ctrl/Cmd+S.
---
 .../docs/email-blocks/email-editor.mdx        |  19 +++
 .../editor/templates/[templateId]/page.tsx    |   4 +
 .../dashboard/email-editor-screen.tsx         |  85 +++++++++-
 .../dashboard/sequence-email-editor.tsx       |   1 +
 .../src/components/block-menu.tsx             |  30 +++-
 .../email-editor/src/components/block-row.tsx |  60 ++++---
 .../email-editor/src/components/checklist.tsx |  20 ++-
 .../src/components/doc-header.tsx             |  12 +-
 .../src/components/email-editor.test.tsx      | 132 ++++++++++++---
 .../src/components/email-editor.tsx           | 154 +++++++++++++++---
 .../email-editor/src/components/inspector.tsx |  56 ++++++-
 .../settings/settings-color-picker.tsx        |   2 +-
 .../components/settings/settings-input.tsx    |   2 +-
 .../components/settings/settings-select.tsx   |   2 +-
 .../components/settings/settings-slider.tsx   |   3 +-
 .../components/settings/settings-textarea.tsx |   2 +-
 .../src/components/settings/size-slider.tsx   |   1 +
 .../email-editor/src/components/text-item.tsx |  89 +++++++++-
 .../email-editor/src/components/ui/slider.tsx |   2 +
 packages/email-editor/src/editor.css          |  13 ++
 20 files changed, 598 insertions(+), 91 deletions(-)

diff --git a/apps/docs/content/docs/email-blocks/email-editor.mdx b/apps/docs/content/docs/email-blocks/email-editor.mdx
index a378bb5b..92acc948 100644
--- a/apps/docs/content/docs/email-blocks/email-editor.mdx
+++ b/apps/docs/content/docs/email-blocks/email-editor.mdx
@@ -68,6 +68,25 @@ of `--sle-*` CSS variables on the `.sle` element (colours, radii, fonts), so it
 can be re-skinned without touching the components. Import
 `@sendlit/email-editor/styles.css` for the styles.
 
+### Keyboard
+
+The editor works without a mouse. Each row is one Tab stop, named after what
+it holds ("Paragraph: Thanks for joining", "Button block: Get started").
+
+| Key                       | Does                                                              |
+| ------------------------- | ----------------------------------------------------------------- |
+| Enter on a row            | Edits a paragraph, or opens a block's settings                    |
+| Escape                    | Stops editing or closes the settings, staying on the row          |
+| ↑ / ↓                     | Moves between paragraphs and blocks, and up to the preview text   |
+| Alt+Shift+↑ / ↓           | Moves the row up or down                                          |
+| `/`, `{{`                 | Opens the block menu or the merge tag menu                        |
+| Ctrl/⌘+B, I, K            | Bold, italic, link                                                |
+| Alt+F10                   | Moves to the format toolbar while text is selected                |
+| Ctrl/⌘+Z, Shift+Ctrl/⌘+Z  | Undo, redo                                                        |
+
+In Style mode, Enter on a block moves to its settings and Escape returns to the
+block; the arrow keys move between blocks.
+
 ### Choosing blocks
 
 `blocks` replaces the default list, so a host can add its own blocks and leave
diff --git a/apps/web/app/editor/templates/[templateId]/page.tsx b/apps/web/app/editor/templates/[templateId]/page.tsx
index f0dbff87..48964dca 100644
--- a/apps/web/app/editor/templates/[templateId]/page.tsx
+++ b/apps/web/app/editor/templates/[templateId]/page.tsx
@@ -17,6 +17,7 @@ export default function TemplateEditorPage({
 }) {
   const { templateId } = use(params);
   const [title, setTitle] = useState<string | null>(null);
+  const [savedTitle, setSavedTitle] = useState<string | null>(null);
   const [content, setContent] = useState<Email | null>(null);
   const [purpose, setPurpose] = useState<TemplatePurpose | null>(null);
   const [requiredVariables, setRequiredVariables] = useState<string[]>([]);
@@ -26,6 +27,7 @@ export default function TemplateEditorPage({
     getTemplate(templateId)
       .then((template) => {
         setTitle(template.title);
+        setSavedTitle(template.title);
         setContent(template.content);
         setPurpose(template.purpose);
         setRequiredVariables(template.requiredVariables);
@@ -45,12 +47,14 @@ export default function TemplateEditorPage({
       initialContent={content}
       purpose={purpose}
       requiredVariables={requiredVariables}
+      otherChangesUnsaved={title !== savedTitle}
       onSave={async (nextContent) => {
         const updated = await updateTemplate(templateId, {
           title,
           content: nextContent,
         });
         setRequiredVariables(updated.requiredVariables);
+        setSavedTitle(title);
       }}
       title={
         <Input
diff --git a/apps/web/components/dashboard/email-editor-screen.tsx b/apps/web/components/dashboard/email-editor-screen.tsx
index d49f652e..00a062c5 100644
--- a/apps/web/components/dashboard/email-editor-screen.tsx
+++ b/apps/web/components/dashboard/email-editor-screen.tsx
@@ -32,6 +32,16 @@ import {
   useState,
 } from "react";
 import { Banner } from "@/components/dashboard/banner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { EmailImageUploadDialog } from "@/components/dashboard/email-image-upload-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/codelit/button";
@@ -162,6 +172,7 @@ export function EmailEditorScreen({
   subject,
   onSubjectChange,
   senderName,
+  otherChangesUnsaved = false,
 }: {
   /** Where exit lands when there's no history to go back to (deep link). */
   exitFallbackHref: string;
@@ -187,6 +198,9 @@ export function EmailEditorScreen({
   onSubjectChange?: (subject: string) => void;
   /** The sender shown in the inbox preview. */
   senderName?: string;
+  /** Edits the caller saves along with the content, such as the subject or a
+   * template's name, that haven't been saved yet. */
+  otherChangesUnsaved?: boolean;
 }) {
   const router = useRouter();
   const { resolvedTheme } = useTheme();
@@ -202,6 +216,13 @@ export function EmailEditorScreen({
   const [error, setError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
+  // Edited since the last save. The editor only reports edits, never its
+  // first render, so any change means there's something to lose.
+  const contentChanged = useRef(false);
+  const [leaving, setLeaving] = useState(false);
+  const unsaved = () => contentChanged.current || otherChangesUnsaved;
+  const unsavedRef = useRef(unsaved);
+  unsavedRef.current = unsaved;
   const [mailingAddress, setMailingAddress] = useState(
     "Set your mailing address in Settings",
   );
@@ -243,9 +264,38 @@ export function EmailEditorScreen({
 
   const handleContentChange = useCallback((nextContent: Email) => {
     contentRef.current = nextContent;
+    contentChanged.current = true;
+  }, []);
+
+  // Closing the tab or reloading with unsaved edits asks first.
+  useEffect(() => {
+    const warn = (event: BeforeUnloadEvent) => {
+      if (unsavedRef.current()) event.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, []);
+
+  // Ctrl or Cmd+S saves, as in any editor, instead of saving the page.
+  const saveRef = useRef(save);
+  saveRef.current = save;
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault();
+        void saveRef.current();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
   }, []);
 
   function exit() {
+    if (unsaved()) setLeaving(true);
+    else leave();
+  }
+
+  function leave() {
     if (window.history.length > 1) {
       router.back();
     } else {
@@ -253,15 +303,21 @@ export function EmailEditorScreen({
     }
   }
 
-  async function save() {
+  /** Saves, returning whether it worked. */
+  async function save(): Promise<boolean> {
+    if (saving) return false;
     setSaving(true);
     setError(null);
     try {
+      contentChanged.current = false;
       await onSave(contentRef.current);
       setSaved(true);
       setTimeout(() => setSaved(false), 2000);
+      return true;
     } catch (err) {
+      contentChanged.current = true;
       setError(err instanceof ApiError ? err.message : "Failed to save email");
+      return false;
     } finally {
       setSaving(false);
     }
@@ -282,7 +338,7 @@ export function EmailEditorScreen({
         </div>
         <div className="flex items-center gap-2">
           {actions?.(() => onSave(contentRef.current))}
-          <Button onClick={save} disabled={saving}>
+          <Button onClick={() => void save()} disabled={saving}>
             {saving ? (
               <Loader size={16} />
             ) : saved ? (
@@ -298,6 +354,31 @@ export function EmailEditorScreen({
 
       {error && <Banner className="mx-4 mt-4 shrink-0">{error}</Banner>}
 
+      <AlertDialog open={leaving} onOpenChange={setLeaving}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Save your changes?</AlertDialogTitle>
+            <AlertDialogDescription>
+              You've edited this email since it was last saved. Leaving now discards
+              those edits.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep editing</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={leave}>
+              Discard changes
+            </AlertDialogAction>
+            <AlertDialogAction
+              onClick={async () => {
+                if (await save()) leave();
+              }}
+            >
+              Save and exit
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       <div className="flex min-h-0 flex-1">
         <main className="flex min-h-0 min-w-0 flex-1 flex-col">
           <div className="min-h-0 flex-1">
diff --git a/apps/web/components/dashboard/sequence-email-editor.tsx b/apps/web/components/dashboard/sequence-email-editor.tsx
index 4b12fe4e..64acf169 100644
--- a/apps/web/components/dashboard/sequence-email-editor.tsx
+++ b/apps/web/components/dashboard/sequence-email-editor.tsx
@@ -109,6 +109,7 @@ export function SequenceEmailEditor({
         sendingOptionFor(sendingOptions, deliverySource)?.fromName ?? undefined
       }
       initialContent={email.content}
+      otherChangesUnsaved={email.subject !== savedSubject}
       onSave={async (content) => {
         if (isBroadcast && email.subject !== savedSubject) {
           await updateSequence(sequenceId, { title: email.subject });
diff --git a/packages/email-editor/src/components/block-menu.tsx b/packages/email-editor/src/components/block-menu.tsx
index 753d2ceb..6586d476 100644
--- a/packages/email-editor/src/components/block-menu.tsx
+++ b/packages/email-editor/src/components/block-menu.tsx
@@ -13,7 +13,10 @@ export function BlockMenu({
   placement,
   header,
   onClose,
+  id,
 }: {
+  /** Set while typing `/`: the text field points at the highlighted entry. */
+  id?: string;
   choices: BlockChoice[];
   /** Highlighted entry; choices first, then variables. */
   index: number;
@@ -30,6 +33,11 @@ export function BlockMenu({
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const focusable = Boolean(onClose);
+  // Driven from the text field it's a list box of options; opened with the
+  // + button it's a menu with focus of its own.
+  const itemRole = focusable ? "menuitem" : "option";
+  const option = (i: number) =>
+    focusable ? {} : { id: `${id}-${i}`, "aria-selected": i === index, tabIndex: -1 };
 
   useEffect(() => {
     if (focusable) ref.current?.querySelector<HTMLElement>("button")?.focus();
@@ -64,8 +72,10 @@ export function BlockMenu({
       ref={ref}
       className={`sle-menu grid${placement?.up ? " up" : ""}`}
       style={placement && { maxHeight: placement.maxHeight }}
-      role="menu"
-      aria-label="Insert"
+      id={id}
+      {...(focusable
+        ? { role: "menu", "aria-label": "Insert" }
+        : { role: "listbox", "aria-label": "Insert" })}
       onMouseDown={(event) => event.preventDefault()}
       onKeyDown={onKeyDown}
     >
@@ -78,7 +88,8 @@ export function BlockMenu({
             <button
               key={choice.id}
               type="button"
-              role="menuitem"
+              role={itemRole}
+              {...option(i)}
               className={i === index ? "first" : undefined}
               onMouseEnter={() => onHover?.(i)}
               onClick={() => onPick(choice)}
@@ -99,7 +110,8 @@ export function BlockMenu({
               <button
                 key={variable.tag}
                 type="button"
-                role="menuitem"
+                role={itemRole}
+                {...option(choices.length + i)}
                 className={`sle-chip${choices.length + i === index ? " first" : ""}`}
                 onClick={() => onPickVariable(variable)}
               >
@@ -120,7 +132,9 @@ export function VariableMenu({
   onPick,
   onHover,
   placement,
+  id,
 }: {
+  id?: string;
   variables: EditorVariable[];
   index: number;
   onPick: (variable: EditorVariable) => void;
@@ -131,7 +145,8 @@ export function VariableMenu({
     <div
       className={`sle-menu${placement?.up ? " up" : ""}`}
       style={placement && { maxHeight: placement.maxHeight }}
-      role="menu"
+      id={id}
+      role="listbox"
       aria-label="Merge tags"
       onMouseDown={(event) => event.preventDefault()}
     >
@@ -140,7 +155,10 @@ export function VariableMenu({
         <button
           key={variable.tag}
           type="button"
-          role="menuitem"
+          role="option"
+          id={`${id}-${i}`}
+          aria-selected={i === index}
+          tabIndex={-1}
           className={i === index ? "first" : undefined}
           onMouseEnter={() => onHover?.(i)}
           onClick={() => onPick(variable)}
diff --git a/packages/email-editor/src/components/block-row.tsx b/packages/email-editor/src/components/block-row.tsx
index dfa700fd..945167d1 100644
--- a/packages/email-editor/src/components/block-row.tsx
+++ b/packages/email-editor/src/components/block-row.tsx
@@ -7,7 +7,7 @@ import {
   Plus,
   Trash2,
 } from "lucide-react";
-import type { CSSProperties, DragEvent, ReactNode } from "react";
+import type { CSSProperties, DragEvent, KeyboardEvent, ReactNode } from "react";
 import type { BlockRegistry } from "../types/block-registry";
 import type { EmailBlock, EmailStyle } from "../types/email-editor";
 
@@ -15,8 +15,8 @@ export interface RowEvents {
   onOpenInsert: (id: string) => void;
   onGripClick: (id: string) => void;
   onMove: (id: string, direction: "up" | "down") => void;
-  /** Arrow keys on a selected block move the caret into the text around it. */
-  onNavigate: (id: string, direction: "prev" | "next") => void;
+  /** Keys on a block itself: the arrows, Escape and Alt+Shift+arrows. */
+  onRowKey: (id: string, event: KeyboardEvent<HTMLElement>) => void;
   onDragStart: (id: string) => void;
   onDragOver: (id: string, edge: "before" | "after") => void;
   onDrop: () => void;
@@ -39,8 +39,10 @@ function Gutter({
     // biome-ignore lint/a11y/noStaticElementInteractions: keeps gutter clicks off the canvas
     <div className="sle-gut" onClick={(event) => event.stopPropagation()}>
       {canAddBelow && (
+        // Pointer only: the keyboard inserts with / and moves with Alt+Shift+arrows.
         <button
           type="button"
+          tabIndex={-1}
           aria-label="Insert below"
           title="Insert below"
           onClick={() => events.onOpenInsert(id)}
@@ -52,8 +54,9 @@ function Gutter({
         <button
           type="button"
           className="grip"
-          aria-label="Drag to move, or use the arrow keys"
-          title="Drag to move. Click to select."
+          tabIndex={-1}
+          aria-label="Drag to move"
+          title="Drag to move, or press Alt+Shift+↑/↓. Click to select."
           draggable
           onClick={() => events.onGripClick(id)}
           onKeyDown={(event) => {
@@ -144,6 +147,8 @@ export function ItemRow({
 
 export interface BlockRowProps {
   block: Required<EmailBlock>;
+  /** What the block is, for screen readers: "Button: Get started". */
+  label: string;
   style: EmailStyle;
   blockRegistry: BlockRegistry;
   renderContext?: unknown;
@@ -162,7 +167,8 @@ export interface BlockRowProps {
   /** Rendered under the row: the insert menu or the block's quick settings. */
   floating?: ReactNode;
   events: RowEvents;
-  onSelect: (id: string) => void;
+  /** `keyboard` when chosen with Enter or Space rather than a click. */
+  onSelect: (id: string, keyboard: boolean) => void;
   onDelete: (id: string) => void;
   onDuplicate: (id: string) => void;
 }
@@ -181,7 +187,7 @@ export function BlockRow(props: BlockRowProps) {
     events,
   } = props;
   const component = blockRegistry[block.blockType];
-  const label = component?.metadata.displayName ?? block.blockType;
+  const label = props.label;
   const Block = component?.block;
 
   return (
@@ -205,32 +211,32 @@ export function BlockRow(props: BlockRowProps) {
           events={events}
         />
       )}
-      {Block ? (
-        <Block
-          block={block}
-          style={style}
-          selectedBlockId={selected ? block.id : null}
-          renderContext={renderContext}
-          showConditionals
-        />
-      ) : (
-        <div>Unknown block type: {block.blockType}</div>
-      )}
+      {/* A preview: its links and buttons can't be focused or followed, so
+          Enter can't leave the editor. The button below selects the block. */}
+      <div className="sle-render" inert>
+        {Block ? (
+          <Block
+            block={block}
+            style={style}
+            selectedBlockId={selected ? block.id : null}
+            renderContext={renderContext}
+            showConditionals
+          />
+        ) : (
+          <div>Unknown block type: {block.blockType}</div>
+        )}
+      </div>
       <button
         type="button"
         className="sle-hit"
-        aria-label={`Select: ${label}`}
+        aria-label={label}
+        aria-keyshortcuts="Alt+Shift+ArrowUp Alt+Shift+ArrowDown"
         onClick={(event) => {
           event.stopPropagation();
-          props.onSelect(block.id);
-        }}
-        onKeyDown={(event) => {
-          if (mode !== "write") return;
-          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-            event.preventDefault();
-            events.onNavigate(block.id, event.key === "ArrowUp" ? "prev" : "next");
-          }
+          // A click from the keyboard (Enter or Space) has no pointer detail.
+          props.onSelect(block.id, event.detail === 0);
         }}
+        onKeyDown={(event) => events.onRowKey(block.id, event)}
       />
 
       {/* While writing, the gutter's grip moves blocks and the popover holds
diff --git a/packages/email-editor/src/components/checklist.tsx b/packages/email-editor/src/components/checklist.tsx
index 2c080c60..da1996e7 100644
--- a/packages/email-editor/src/components/checklist.tsx
+++ b/packages/email-editor/src/components/checklist.tsx
@@ -18,6 +18,7 @@ export function Checklist({
   const [open, setOpen] = useState(false);
   const [drafts, setDrafts] = useState<Record<string, string>>({});
   const ref = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
   const must = items.filter((item) => item.level === "must").length;
   const state = must > 0 ? "bad" : items.length > 0 ? "warn" : "ok";
 
@@ -34,8 +35,24 @@ export function Checklist({
     state === "bad" ? XCircle : state === "warn" ? AlertTriangle : CheckCircle2;
 
   return (
-    <div className="sle-chkwrap" ref={ref}>
+    <div
+      className="sle-chkwrap"
+      ref={ref}
+      onKeyDown={(event) => {
+        if (event.key !== "Escape" || !open) return;
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        button.current?.focus();
+      }}
+      onBlur={(event) => {
+        // Tabbing away closes it; clicks outside are handled above.
+        const next = event.relatedTarget as Node | null;
+        if (next && !ref.current?.contains(next)) setOpen(false);
+      }}
+    >
       <button
+        ref={button}
         type="button"
         className={`sle-chkbtn ${state}`}
         aria-expanded={open}
@@ -110,6 +127,7 @@ export function Checklist({
                     <button
                       type="button"
                       className="sle-btn t"
+                      aria-label={`${item.fixLabel}: ${item.title}`}
                       onClick={() => {
                         setOpen(false);
                         onJump(item.target);
diff --git a/packages/email-editor/src/components/doc-header.tsx b/packages/email-editor/src/components/doc-header.tsx
index 00096eea..d5383d5e 100644
--- a/packages/email-editor/src/components/doc-header.tsx
+++ b/packages/email-editor/src/components/doc-header.tsx
@@ -86,7 +86,9 @@ export function DocHeader({
               onSubjectChange(event.target.value.replace(/\n/g, " "))
             }
             onKeyDown={(event) => {
-              if (event.key === "Enter") {
+              const textarea = event.currentTarget;
+              const atEnd = textarea.selectionStart === textarea.value.length;
+              if (event.key === "Enter" || (event.key === "ArrowDown" && atEnd)) {
                 event.preventDefault();
                 document
                   .querySelector<HTMLInputElement>("[data-sle-field=preview]")
@@ -110,6 +112,14 @@ export function DocHeader({
             if (event.key === "Enter" || event.key === "ArrowDown") {
               event.preventDefault();
               onEnter();
+            } else if (event.key === "ArrowUp") {
+              const subject = document.querySelector<HTMLTextAreaElement>(
+                "[data-sle-field=subject]",
+              );
+              if (!subject) return;
+              event.preventDefault();
+              subject.focus();
+              subject.setSelectionRange(subject.value.length, subject.value.length);
             }
           }}
         />
diff --git a/packages/email-editor/src/components/email-editor.test.tsx b/packages/email-editor/src/components/email-editor.test.tsx
index f6581fe5..9e2153c4 100644
--- a/packages/email-editor/src/components/email-editor.test.tsx
+++ b/packages/email-editor/src/components/email-editor.test.tsx
@@ -14,6 +14,9 @@ const { defaultEmail } = await import("../lib/default-email");
 const { Image, Link, Separator, Spacer, Text } = await import("../blocks");
 
 afterEach(() => cleanup());
+
+/** The field a paragraph, heading, list item or quote is written in. */
+const TEXTBOX = /^(Paragraph|Heading \d|Bullet|Numbered item|Quote)$/;
 // Leave no DOM behind: the email renderer's tests need the real stream globals.
 afterAll(() => GlobalRegistrator.unregister());
 
@@ -109,7 +112,7 @@ describe("hosts that mount their own blocks", () => {
       blocks: [PullQuote],
     });
 
-    fireEvent.click(screen.getByRole("button", { name: "Select: Pull quote" }));
+    fireEvent.click(screen.getByRole("button", { name: "Pull quote block" }));
     const toolbar = screen.getByRole("toolbar", { name: "Pull quote settings" });
     fireEvent.change(within(toolbar).getByLabelText("Quote by"), {
       target: { value: "Bo" },
@@ -146,7 +149,7 @@ describe("hosts that mount their own blocks", () => {
     // One block, not split into paragraphs, and selectable rather than typed into.
     expect(screen.getAllByTestId("host-text")).toHaveLength(1);
     expect(screen.queryByRole("textbox", { name: /Text/ })).toBeNull();
-    fireEvent.click(screen.getByRole("button", { name: "Select: Rich text" }));
+    fireEvent.click(screen.getByRole("button", { name: "Rich text block" }));
     fireEvent.click(screen.getByRole("button", { name: "Duplicate" }));
     expect(last().content).toEqual([
       { blockType: "text", settings: { html: "<b>Hi</b>\n\nThere" } },
@@ -163,8 +166,8 @@ describe("hosts that mount their own blocks", () => {
       blocks: [Text, Link, PullQuote],
     });
 
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 2" }));
-    fireEvent.change(screen.getByRole("textbox", { name: "Text 2" }), {
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Second" }));
+    fireEvent.change(screen.getByRole("textbox", { name: "Paragraph" }), {
       target: { value: "Second, edited" },
     });
     expect(last().content).toEqual([
@@ -181,12 +184,12 @@ describe("writing paragraph by paragraph", () => {
       blocks: [Text, Link, Separator],
     });
 
-  const editor = (name = /^Text/) =>
+  const editor = (name = TEXTBOX) =>
     screen.getByRole("textbox", { name }) as HTMLTextAreaElement;
 
   it("splits a paragraph on Enter and joins it back on Backspace", () => {
     const { last } = start();
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Hello world" }));
     const first = editor();
     first.setSelectionRange(5, 5);
     fireEvent.keyDown(first, { key: "Enter" });
@@ -201,7 +204,7 @@ describe("writing paragraph by paragraph", () => {
 
   it("turns markdown shortcuts into headings and lists", () => {
     const { last } = start();
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Hello world" }));
     fireEvent.change(editor(), {
       target: { value: "## Hello world", selectionStart: 3 },
     });
@@ -223,7 +226,7 @@ describe("writing paragraph by paragraph", () => {
       ]),
       blocks: [Text, Separator],
     });
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.click(screen.getByRole("button", { name: "Heading 1: Welcome" }));
     editor().setSelectionRange(7, 7);
     fireEvent.keyDown(editor(), { key: "Enter" });
     fireEvent.change(editor(), { target: { value: "So nice" } });
@@ -243,7 +246,7 @@ describe("writing paragraph by paragraph", () => {
       ]),
       blocks: [Text],
     });
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.click(screen.getByRole("button", { name: "Heading 1: Welcome" }));
     editor().setSelectionRange(7, 7);
     fireEvent.keyDown(editor(), { key: "Enter" });
     fireEvent.change(editor(), { target: { value: "So nice" } });
@@ -261,7 +264,7 @@ describe("writing paragraph by paragraph", () => {
       email: email([{ blockType: "text", settings: { content: "- one" } }]),
       blocks: [Text],
     });
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.click(screen.getByRole("button", { name: "Bullet: one" }));
     editor().setSelectionRange(3, 3);
     fireEvent.keyDown(editor(), { key: "Enter" });
     fireEvent.change(editor(), { target: { value: "two" } });
@@ -285,7 +288,7 @@ describe("writing paragraph by paragraph", () => {
       ]),
       blocks: [Text, Link],
     });
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 2" }));
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: empty" }));
     fireEvent.change(editor(), { target: { value: "x" } });
     fireEvent.change(editor(), { target: { value: "" } });
     editor().setSelectionRange(0, 0);
@@ -296,12 +299,12 @@ describe("writing paragraph by paragraph", () => {
         settings: { text: "Go", url: "https://x.co", isButton: true },
       },
     ]);
-    expect(screen.getByRole("toolbar", { name: "Link settings" })).toBeTruthy();
+    expect(screen.getByRole("toolbar", { name: "Button settings" })).toBeTruthy();
   });
 
   it("splits a pasted run of paragraphs into items", async () => {
     const { last } = start();
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Hello world" }));
     editor().setSelectionRange(11, 11);
     await act(async () => {
       fireEvent.paste(editor(), {
@@ -329,8 +332,8 @@ describe("block settings from the keyboard", () => {
       blocks: [Text, Link],
     });
   const settle = () => act(() => new Promise((done) => setTimeout(done, 80)));
-  const popover = () => screen.queryByRole("toolbar", { name: "Link settings" });
-  const selectButton = () => screen.getByRole("button", { name: "Select: Link" });
+  const popover = () => screen.queryByRole("toolbar", { name: "Button settings" });
+  const selectButton = () => screen.getByRole("button", { name: "Button block: Go" });
 
   it("closes on Escape and hands focus back to the block", async () => {
     start();
@@ -352,7 +355,7 @@ describe("block settings from the keyboard", () => {
     start();
     fireEvent.click(selectButton());
     await settle();
-    act(() => screen.getByRole("button", { name: "Edit: Text 3" }).focus());
+    act(() => screen.getByRole("button", { name: "Paragraph: After" }).focus());
     expect(popover()).toBeNull();
   });
 
@@ -364,14 +367,14 @@ describe("block settings from the keyboard", () => {
     await settle();
     expect(popover()).toBeNull();
     expect(
-      (screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement).value,
+      (screen.getByRole("textbox", { name: TEXTBOX }) as HTMLTextAreaElement).value,
     ).toBe("After");
   });
 
   it("stops on the block when arrowing through the text", async () => {
     start();
-    fireEvent.click(screen.getByRole("button", { name: "Edit: Text 1" }));
-    const first = screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement;
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Before" }));
+    const first = screen.getByRole("textbox", { name: TEXTBOX }) as HTMLTextAreaElement;
     first.setSelectionRange(6, 6);
     fireEvent.keyDown(first, { key: "ArrowDown" });
     await settle();
@@ -381,7 +384,7 @@ describe("block settings from the keyboard", () => {
     fireEvent.keyDown(selectButton(), { key: "ArrowDown" });
     await settle();
     expect(
-      (screen.getByRole("textbox", { name: /^Text/ }) as HTMLTextAreaElement).value,
+      (screen.getByRole("textbox", { name: TEXTBOX }) as HTMLTextAreaElement).value,
     ).toBe("After");
   });
 
@@ -401,7 +404,7 @@ describe("block settings from the keyboard", () => {
       email: email([{ blockType: "spacer", settings: { height: "20px" } }]),
       blocks: [Text, Spacer],
     });
-    fireEvent.click(screen.getByRole("button", { name: "Select: Spacer" }));
+    fireEvent.click(screen.getByRole("button", { name: "Spacer block" }));
     await settle();
     expect(document.activeElement?.textContent).toBe("Small");
     const medium = screen.getByRole("button", { name: "Medium" });
@@ -428,3 +431,90 @@ describe("block settings from the keyboard", () => {
     );
   });
 });
+
+describe("moving around with the keyboard", () => {
+  const settle = () => act(() => new Promise((done) => setTimeout(done, 80)));
+  const start = () =>
+    mount({
+      email: email([
+        { blockType: "text", settings: { content: "One\n\nTwo" } },
+        {
+          blockType: "link",
+          settings: { text: "Go", url: "https://x.co", isButton: true },
+        },
+      ]),
+      blocks: [Text, Link],
+    });
+
+  it("keeps focus on the paragraph after Escape", async () => {
+    start();
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Two" }));
+    fireEvent.keyDown(screen.getByRole("textbox", { name: TEXTBOX }), {
+      key: "Escape",
+    });
+    await settle();
+    expect(document.activeElement).toBe(
+      screen.getByRole("button", { name: "Paragraph: Two" }),
+    );
+  });
+
+  it("goes up from the first paragraph to the preview text", async () => {
+    start();
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: One" }));
+    const field = screen.getByRole("textbox", { name: TEXTBOX }) as HTMLTextAreaElement;
+    field.setSelectionRange(0, 0);
+    fireEvent.keyDown(field, { key: "ArrowUp" });
+    expect(document.activeElement).toBe(screen.getByLabelText("Preview text"));
+  });
+
+  it("moves a paragraph with Alt+Shift+arrows and says so", async () => {
+    const { last } = start();
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: One" }));
+    fireEvent.keyDown(screen.getByRole("textbox", { name: TEXTBOX }), {
+      key: "ArrowDown",
+      altKey: true,
+      shiftKey: true,
+    });
+    await settle();
+    expect(last().content[0].settings.content).toBe("Two\n\nOne");
+    expect(screen.getByRole("status").textContent).toBe("Moved down");
+    expect((document.activeElement as HTMLTextAreaElement).value).toBe("One");
+  });
+
+  it("keeps the links in a block from being focused or followed", () => {
+    start();
+    const link = screen.getByText("Go").closest("a");
+    expect(link?.closest("[inert]")).toBeTruthy();
+  });
+
+  it("points the text field at the highlighted entry of the / menu", () => {
+    start();
+    fireEvent.click(screen.getByRole("button", { name: "Paragraph: Two" }));
+    const field = screen.getByRole("textbox", { name: TEXTBOX });
+    fireEvent.change(field, { target: { value: "/", selectionStart: 1 } });
+    const list = screen.getByRole("listbox", { name: "Insert" });
+    expect(field.getAttribute("aria-controls")).toBe(list.id);
+    const highlighted = document.getElementById(
+      field.getAttribute("aria-activedescendant") ?? "",
+    );
+    expect(highlighted?.getAttribute("aria-selected")).toBe("true");
+    expect(highlighted?.textContent).toBe("Text");
+  });
+
+  it("in Style, goes from a block to its settings and back", async () => {
+    start();
+    fireEvent.click(screen.getByRole("button", { name: "Style" }));
+    const block = () => screen.getByRole("button", { name: "Button block: Go" });
+    // A click with no pointer detail is Enter or Space.
+    fireEvent.click(block(), { detail: 0 });
+    await settle();
+    expect(document.activeElement?.closest("[role=tabpanel]")).toBeTruthy();
+
+    fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+    await settle();
+    expect(document.activeElement).toBe(block());
+
+    fireEvent.keyDown(block(), { key: "Escape" });
+    expect(document.querySelector(".it.on")).toBeNull();
+  });
+});
diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index 57bc8564..7f5534b9 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -40,7 +40,7 @@ import { Checklist } from "./checklist";
 import { ControlsBar } from "./controls-bar";
 import { DocHeader, InboxRow } from "./doc-header";
 import { Inspector } from "./inspector";
-import { TextItem } from "./text-item";
+import { plainText, TextItem } from "./text-item";
 import "../index.css";
 import "../editor.css";
 
@@ -100,9 +100,25 @@ const MOBILE_WIDTH = 375;
 function labelOf(block: EmailBlock, blockRegistry: BlockRegistry) {
   if (block.blockType === "text" && block.group) return "Text";
   if (block.blockType === "link" && block.settings?.isButton) return "Button";
+  if (block.blockType === "separator") return "Divider";
   return blockRegistry[block.blockType]?.metadata.displayName ?? "Block";
 }
 
+/** A block's accessible name: what it is and the start of its words, such as
+ * "Button block: Get started", so a screen reader can tell rows apart. */
+function describeBlock(block: EmailBlock, blockRegistry: BlockRegistry) {
+  const words =
+    block.blockType === "text"
+      ? plainText(String(block.settings.content ?? ""))
+      : block.blockType === "link"
+        ? String(block.settings.text ?? "")
+        : block.blockType === "image"
+          ? String(block.settings.alt ?? "")
+          : "";
+  const short = words.length > 60 ? `${words.slice(0, 60)}…` : words;
+  return `${labelOf(block, blockRegistry)} block${short ? `: ${short}` : ""}`;
+}
+
 /** Dialogs and popovers a host's quick edit may open outside the editor. */
 const DIALOGS =
   '[role="dialog"], [role="alertdialog"], [data-radix-popper-content-wrapper]';
@@ -231,11 +247,22 @@ export function EmailEditor({
 
   const choices = useMemo(() => getBlockChoices(blockRegistry), [blockRegistry]);
 
-  const flash = useCallback((message: string) => {
-    setToast(message);
-    clearTimeout(toastTimer.current);
-    toastTimer.current = setTimeout(() => setToast(null), 2600);
+  // What a screen reader hears: a live region that is always there, so each
+  // message is read out. The toast shows the same message on screen.
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((message: string) => {
+    // A repeated message ("Moved down" twice) still has to change to be read.
+    setAnnouncement((current) => (current === message ? `${message}\u00a0` : message));
   }, []);
+  const flash = useCallback(
+    (message: string) => {
+      setToast(message);
+      announce(message);
+      clearTimeout(toastTimer.current);
+      toastTimer.current = setTimeout(() => setToast(null), 2600);
+    },
+    [announce],
+  );
   useEffect(() => () => clearTimeout(toastTimer.current), []);
 
   // Keep the parent informed in the same event that changes editor state.
@@ -478,7 +505,7 @@ export function EmailEditor({
   const focusRow = useCallback((id: string) => {
     setTimeout(() =>
       rootRef.current
-        ?.querySelector<HTMLElement>(`[data-block-id="${id}"] > .sle-hit`)
+        ?.querySelector<HTMLElement>(`[data-block-id="${id}"] .sle-hit`)
         ?.focus(),
     );
   }, []);
@@ -657,12 +684,47 @@ export function EmailEditor({
     [activate, blockRegistry, commitContent, select],
   );
 
+  /** Moves a row from the keyboard, keeping focus on it and saying where it
+   * went. */
+  const moveRow = useCallback(
+    (id: string, direction: "up" | "down") => {
+      const rows = rowsOf(emailRef.current.content, mode);
+      if (!canMoveRow(rows, id, direction)) {
+        announce(`Can't move ${direction === "up" ? "higher" : "lower"}`);
+        return;
+      }
+      const focused = document.activeElement as HTMLElement | null;
+      const caret =
+        focused instanceof HTMLTextAreaElement ? focused.selectionStart : null;
+      moveBlock(id, direction);
+      announce(`Moved ${direction}`);
+      // Reordering can take focus off the row; put it back.
+      setTimeout(() => {
+        const row = rootRef.current?.querySelector(`[data-block-id="${id}"]`);
+        if (!row || row.contains(document.activeElement)) return;
+        const field = row.querySelector<HTMLTextAreaElement>("textarea.sle-ed");
+        if (field && caret !== null) {
+          field.focus();
+          field.setSelectionRange(caret, caret);
+        } else row.querySelector<HTMLElement>(".sle-hit")?.focus();
+      });
+    },
+    [announce, canMoveRow, mode, moveBlock, rowsOf],
+  );
+
   const navigate = useCallback(
     (id: string, direction: "prev" | "next") => {
       const content = emailRef.current.content;
       const index = content.findIndex((block) => block.id === id);
       const next = content[index + (direction === "prev" ? -1 : 1)];
-      if (!next) return;
+      if (!next) {
+        // Up from the top of the email: back to the preview text.
+        if (direction === "prev")
+          rootRef.current
+            ?.querySelector<HTMLElement>("[data-sle-field=preview]")
+            ?.focus();
+        return;
+      }
       if (isItem(next)) {
         activate(next.id!, direction === "prev" ? "end" : 0);
         return;
@@ -914,6 +976,20 @@ export function EmailEditor({
     setTimeout(() => focusBlock(id), 0);
   }
 
+  /** Focus the first control of the Style panel's open tab. */
+  function focusPanel() {
+    setTimeout(() => {
+      const panel = rootRef.current?.querySelector("[role=tabpanel]");
+      Array.from(
+        panel?.querySelectorAll<HTMLElement>(
+          "button, input, select, textarea, [tabindex]:not([tabindex='-1'])",
+        ) ?? [],
+      )
+        .find((element) => !(element as HTMLButtonElement).disabled)
+        ?.focus();
+    }, 30);
+  }
+
   function deselect() {
     setActiveId(null);
     setSelectedId(null);
@@ -977,7 +1053,12 @@ export function EmailEditor({
       : -1;
   const writeMore =
     mode === "write" && canWrite ? (
-      <button type="button" className="sle-trail" onClick={writeAtEnd}>
+      <button
+        type="button"
+        className="sle-trail"
+        aria-label="Keep writing at the end"
+        onClick={writeAtEnd}
+      >
         {activeId ? "" : "Keep writing, or press / for blocks"}
       </button>
     ) : null;
@@ -985,8 +1066,26 @@ export function EmailEditor({
   const rowEvents: RowEvents = {
     onOpenInsert: openInsert,
     onGripClick: (id) => focusBlock(id),
-    onMove: moveBlock,
-    onNavigate: navigate,
+    onMove: moveRow,
+    onRowKey: (id, event) => {
+      const key = event.key;
+      if (key !== "ArrowUp" && key !== "ArrowDown" && key !== "Escape") return;
+      event.preventDefault();
+      const up = key === "ArrowUp";
+      if (key === "Escape") {
+        // Style: Escape lets go of the selected block.
+        if (mode === "style")
+          setSelectedId((current) => (current === id ? null : current));
+      } else if (event.altKey && event.shiftKey) {
+        moveRow(id, up ? "up" : "down");
+      } else if (mode === "write") {
+        navigate(id, up ? "prev" : "next");
+      } else {
+        const ids = rows.map((row) => row.id);
+        const next = ids[ids.indexOf(id) + (up ? -1 : 1)];
+        if (next) focusRow(next);
+      }
+    },
     onDragStart: (id) => {
       setDragId(id);
       setActiveId(null);
@@ -1045,7 +1144,7 @@ export function EmailEditor({
         className={`sle-pop${column ? " col" : ""}`}
         role="toolbar"
         tabIndex={-1}
-        aria-label={`${component.metadata.displayName} settings`}
+        aria-label={`${labelOf(block, blockRegistry)} settings`}
         style={{ maxHeight: popoverMax }}
         onClick={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
@@ -1119,7 +1218,7 @@ export function EmailEditor({
   }
 
   /** One paragraph, heading, list item or quote while writing. */
-  function renderItem(row: Row, index: number) {
+  function renderItem(row: Row) {
     const item = row.block;
     const content = email.content;
     const before = content[row.start - 1];
@@ -1174,7 +1273,6 @@ export function EmailEditor({
           caret={activeCaret}
           number={number}
           listEnd={listKind(after) !== parsed.kind}
-          label={`Text ${index + 1}`}
           variables={variables}
           choices={choices}
           onActivate={(caret) => activate(row.id, caret ?? "end")}
@@ -1186,14 +1284,19 @@ export function EmailEditor({
           onPasteParagraphs={(parts, a, b) => pasteParagraphs(row.id, parts, a, b)}
           onUndo={undo}
           onRedo={redo}
-          onExit={() => setActiveId(null)}
+          onMove={(direction) => moveRow(row.id, direction)}
+          onExit={() => {
+            // Leave editing but stay here, on the paragraph.
+            setActiveId(null);
+            focusRow(row.id);
+          }}
         />
       </ItemRow>
     );
   }
 
-  function renderRow(row: Row, index: number) {
-    if (mode === "write" && isItem(row.block)) return renderItem(row, index);
+  function renderRow(row: Row) {
+    if (mode === "write" && isItem(row.block)) return renderItem(row);
     const shown = (
       sample && inStyle ? withSamples(row.block, samples) : row.block
     ) as Required<EmailBlock>;
@@ -1201,6 +1304,7 @@ export function EmailEditor({
     return (
       <BlockRow
         block={{ ...shown, id: row.id }}
+        label={describeBlock(row.block, blockRegistry)}
         style={shownStyle}
         blockRegistry={blockRegistry}
         renderContext={renderContext}
@@ -1218,7 +1322,11 @@ export function EmailEditor({
         }}
         floating={floatingFor(row)}
         events={rowEvents}
-        onSelect={select}
+        onSelect={(id, keyboard) => {
+          select(id);
+          // In Style, Enter on a block goes on to its settings.
+          if (keyboard && mode === "style") focusPanel();
+        }}
         onDelete={deleteBlock}
         onDuplicate={duplicateBlock}
       />
@@ -1259,7 +1367,7 @@ export function EmailEditor({
           </div>
 
           {/* biome-ignore lint/a11y/noStaticElementInteractions: clicking the canvas background clears the selection */}
-          <main className="sle-stage" aria-label="Email canvas" onClick={deselect}>
+          <section className="sle-stage" aria-label="Email canvas" onClick={deselect}>
             {inStyle && (
               <>
                 <ControlsBar
@@ -1347,7 +1455,7 @@ export function EmailEditor({
                 {rows.map((row, index) => (
                   <Fragment key={row.id}>
                     {index === pinnedIndex && writeMore}
-                    {renderRow(row, index)}
+                    {renderRow(row)}
                   </Fragment>
                 ))}
                 {pinnedIndex === -1 && writeMore}
@@ -1356,7 +1464,7 @@ export function EmailEditor({
             {mode === "write" && (
               <p className="sle-cap">Switch to Style to see it as readers will.</p>
             )}
-          </main>
+          </section>
         </div>
 
         {inStyle && (
@@ -1372,14 +1480,18 @@ export function EmailEditor({
             updateBlock={updateBlock}
             onEditInWrite={editInWrite}
             onCopied={(tag) => flash(`Copied ${tag}`)}
+            onEscape={() => selectedId && focusRow(selectedId)}
           />
         )}
       </div>
       {toast && (
-        <div className="sle-toast" role="status">
+        <div className="sle-toast" aria-hidden="true">
           {toast}
         </div>
       )}
+      <div className="sle-sr" role="status">
+        {announcement}
+      </div>
     </div>
   );
 }
diff --git a/packages/email-editor/src/components/inspector.tsx b/packages/email-editor/src/components/inspector.tsx
index 7c7ef490..6b1e7871 100644
--- a/packages/email-editor/src/components/inspector.tsx
+++ b/packages/email-editor/src/components/inspector.tsx
@@ -1,5 +1,5 @@
 import { Check, Copy, PenLine, Search } from "lucide-react";
-import { useState } from "react";
+import { type KeyboardEvent, useId, useState } from "react";
 import { activePalette, PALETTES, paletteStyle } from "../lib/palettes";
 import type { BlockRegistry } from "../types/block-registry";
 import type {
@@ -26,6 +26,7 @@ export function Inspector({
   updateBlock,
   onEditInWrite,
   onCopied,
+  onEscape,
 }: {
   email: Email;
   selectedId: string | null;
@@ -39,6 +40,8 @@ export function Inspector({
   /** Back to writing, at the selected block. */
   onEditInWrite: (id: string) => void;
   onCopied: (tag: string) => void;
+  /** Escape in the panel: back to the selected block on the canvas. */
+  onEscape?: () => void;
 }) {
   const block = selectedId
     ? (email.content.find((candidate) => candidate.id === selectedId) as
@@ -52,17 +55,56 @@ export function Inspector({
     ["block", "Block"],
     ["variables", "Tags"],
   ];
+  const ids = useId();
+
+  // Arrow keys, Home and End move between the tabs, as in any tab list.
+  function onTabKey(event: KeyboardEvent<HTMLDivElement>) {
+    const at = tabs.findIndex(([id]) => id === tab);
+    const next =
+      event.key === "ArrowRight"
+        ? (at + 1) % tabs.length
+        : event.key === "ArrowLeft"
+          ? (at - 1 + tabs.length) % tabs.length
+          : event.key === "Home"
+            ? 0
+            : event.key === "End"
+              ? tabs.length - 1
+              : -1;
+    if (next === -1) return;
+    event.preventDefault();
+    onTab(tabs[next][0]);
+    event.currentTarget.querySelectorAll<HTMLElement>("[role=tab]")[next]?.focus();
+  }
 
   return (
-    <aside className="sle-panel" aria-label="Style">
+    <aside
+      className="sle-panel"
+      aria-label="Style"
+      onKeyDown={(event) => {
+        // Not keys from a dropdown that renders elsewhere and bubbles here.
+        if (event.key !== "Escape" || event.defaultPrevented) return;
+        if (!event.currentTarget.contains(event.target as Node)) return;
+        event.preventDefault();
+        onEscape?.();
+      }}
+    >
       <div className="sle-ph">
-        <div className="sle-tabs" role="tablist">
+        <div
+          className="sle-tabs"
+          role="tablist"
+          aria-label="Style panel"
+          tabIndex={-1}
+          onKeyDown={onTabKey}
+        >
           {tabs.map(([id, label]) => (
             <button
               key={id}
+              id={`${ids}-${id}`}
               type="button"
               role="tab"
               aria-selected={tab === id}
+              aria-controls={`${ids}-panel`}
+              tabIndex={tab === id ? 0 : -1}
               className={`sle-tab${tab === id ? " on" : ""}`}
               onClick={() => onTab(id)}
             >
@@ -71,7 +113,12 @@ export function Inspector({
           ))}
         </div>
       </div>
-      <div className="sle-scroll">
+      <div
+        className="sle-scroll"
+        id={`${ids}-panel`}
+        role="tabpanel"
+        aria-labelledby={`${ids}-${tab}`}
+      >
         {tab === "email" && (
           <>
             <div className="sle-sec">
@@ -82,6 +129,7 @@ export function Inspector({
                     key={palette.name}
                     type="button"
                     className={`sle-preset${activePalette(email) === palette.name ? " on" : ""}`}
+                    aria-pressed={activePalette(email) === palette.name}
                     onClick={() => updateEmailStyle(paletteStyle(palette))}
                   >
                     <span className="sw" style={{ background: palette.canvas }}>
diff --git a/packages/email-editor/src/components/settings/settings-color-picker.tsx b/packages/email-editor/src/components/settings/settings-color-picker.tsx
index bd1b5fff..2a194901 100644
--- a/packages/email-editor/src/components/settings/settings-color-picker.tsx
+++ b/packages/email-editor/src/components/settings/settings-color-picker.tsx
@@ -92,7 +92,7 @@ export function SettingsColorPicker({
             type="button"
             onClick={handleReset}
             className="text-muted-foreground hover:text-foreground transition-colors"
-            aria-label="Reset to default"
+            aria-label={`Reset ${label}`}
           >
             <X className="h-3 w-3" />
           </button>
diff --git a/packages/email-editor/src/components/settings/settings-input.tsx b/packages/email-editor/src/components/settings/settings-input.tsx
index 1bb9f357..bf66cb5c 100644
--- a/packages/email-editor/src/components/settings/settings-input.tsx
+++ b/packages/email-editor/src/components/settings/settings-input.tsx
@@ -79,7 +79,7 @@ export function SettingsInput({
           type="button"
           onClick={handleReset}
           className="text-muted-foreground hover:text-foreground transition-colors"
-          aria-label="Reset to default"
+          aria-label={`Reset ${label}`}
         >
           <X className="h-3 w-3" />
         </button>
diff --git a/packages/email-editor/src/components/settings/settings-select.tsx b/packages/email-editor/src/components/settings/settings-select.tsx
index bb50c59c..37b9da79 100644
--- a/packages/email-editor/src/components/settings/settings-select.tsx
+++ b/packages/email-editor/src/components/settings/settings-select.tsx
@@ -89,7 +89,7 @@ export function SettingsSelect({
             type="button"
             onClick={handleReset}
             className="text-muted-foreground hover:text-foreground transition-colors"
-            aria-label="Reset to default"
+            aria-label={`Reset ${label}`}
           >
             <X className="h-3 w-3" />
           </button>
diff --git a/packages/email-editor/src/components/settings/settings-slider.tsx b/packages/email-editor/src/components/settings/settings-slider.tsx
index 90670442..2780c7f2 100644
--- a/packages/email-editor/src/components/settings/settings-slider.tsx
+++ b/packages/email-editor/src/components/settings/settings-slider.tsx
@@ -83,13 +83,14 @@ export function SettingsSlider({
             type="button"
             onClick={handleReset}
             className="text-muted-foreground hover:text-foreground transition-colors"
-            aria-label="Reset to default"
+            aria-label={`Reset ${label}`}
           >
             <X className="h-3 w-3" />
           </button>
         </div>
       </div>
       <Slider
+        aria-label={label}
         id={`slider-${label.replace(/\s+/g, "-").toLowerCase()}`}
         value={[localValue]}
         min={min}
diff --git a/packages/email-editor/src/components/settings/settings-textarea.tsx b/packages/email-editor/src/components/settings/settings-textarea.tsx
index a45790f1..aa0ba46b 100644
--- a/packages/email-editor/src/components/settings/settings-textarea.tsx
+++ b/packages/email-editor/src/components/settings/settings-textarea.tsx
@@ -81,7 +81,7 @@ export function SettingsTextarea({
           type="button"
           onClick={handleReset}
           className="text-muted-foreground hover:text-foreground transition-colors"
-          aria-label="Reset to default"
+          aria-label={`Reset ${label}`}
         >
           <X className="h-3 w-3" />
         </button>
diff --git a/packages/email-editor/src/components/settings/size-slider.tsx b/packages/email-editor/src/components/settings/size-slider.tsx
index b465cd68..ff0f3c66 100644
--- a/packages/email-editor/src/components/settings/size-slider.tsx
+++ b/packages/email-editor/src/components/settings/size-slider.tsx
@@ -80,6 +80,7 @@ export function SizeSlider({
         </div>
       </div>
       <Slider
+        aria-label={label}
         id={`slider-${label.replace(/\s+/g, "-").toLowerCase()}`}
         value={[Number.parseInt(localValue, 10) || 0]}
         min={min}
diff --git a/packages/email-editor/src/components/text-item.tsx b/packages/email-editor/src/components/text-item.tsx
index 2c8da9c5..3c54db7a 100644
--- a/packages/email-editor/src/components/text-item.tsx
+++ b/packages/email-editor/src/components/text-item.tsx
@@ -11,6 +11,8 @@ import {
   type ClipboardEvent,
   type CSSProperties,
   type KeyboardEvent,
+  useEffect,
+  useId,
   useLayoutEffect,
   useRef,
   useState,
@@ -34,6 +36,32 @@ type Menu = { kind: "slash"; query: string } | { kind: "variable" } | null;
 
 const SLASH = /^\/([a-z0-9 ]{0,14})$/i;
 
+const KIND_NAMES: Record<ItemKind, string> = {
+  p: "Paragraph",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  li: "Bullet",
+  ol: "Numbered item",
+  quote: "Quote",
+};
+
+/** The words of an item without its markdown, for its accessible name. */
+export function plainText(markdown: string): string {
+  return markdown
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/\{\{\s*([\w.]+)[^}]*\}\}/g, "$1")
+    .replace(/[*_`]/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function snippet(text: string) {
+  const plain = plainText(text);
+  if (!plain) return "empty";
+  return plain.length > 60 ? `${plain.slice(0, 60)}…` : plain;
+}
+
 /** How an item looks, following the email's typography and the markdown
  * renderer's spacing, so writing looks like the email that is sent. */
 export function itemStyle(
@@ -87,7 +115,6 @@ export interface TextItemProps {
   number?: number;
   /** The last item of a list gets the list's bottom margin. */
   listEnd: boolean;
-  label: string;
   variables: EditorVariable[];
   choices: BlockChoice[];
   /** `caret` is where the click landed in the markdown, when known. */
@@ -98,6 +125,8 @@ export interface TextItemProps {
   /** Backspace at the start of a paragraph: join the previous item. */
   onMergeBack: () => void;
   onNavigate: (direction: "prev" | "next") => void;
+  /** Alt+Shift+arrows: move this item up or down. */
+  onMove: (direction: "up" | "down") => void;
   /** A block picked from the `/` menu replaces this item. */
   onInsertChoice: (choice: BlockChoice) => void;
   /** Several paragraphs pasted at once, around the caret. */
@@ -119,6 +148,8 @@ export function TextItem(props: TextItemProps) {
   const [menu, setMenu] = useState<Menu>(null);
   const [menuIndex, setMenuIndex] = useState(0);
   const [placement, setPlacement] = useState<MenuPlacement>();
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const menuId = useId();
 
   const slashChoices = menu?.kind === "slash" ? filterChoices(choices, menu.query) : [];
   const listLength = menu?.kind === "variable" ? variables.length : slashChoices.length;
@@ -154,6 +185,21 @@ export function TextItem(props: TextItemProps) {
     }
   }, [content, active]);
 
+  // Grow or shrink when the canvas changes width, as text rewraps.
+  useEffect(() => {
+    const el = ref.current;
+    if (!active || !el?.parentElement || typeof ResizeObserver === "undefined") return;
+    let width = el.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (el.clientWidth === width) return;
+      width = el.clientWidth;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    });
+    observer.observe(el.parentElement);
+    return () => observer.disconnect();
+  }, [active]);
+
   const setBody = (edit: TextEdit, nextPrefix = prefix) => {
     pendingSelection.current = { start: edit.start, end: edit.end };
     props.onChange(itemMarkdown(nextPrefix, edit.text));
@@ -252,6 +298,17 @@ export function TextItem(props: TextItemProps) {
       else props.onExit();
       return;
     }
+    if (event.altKey && event.shiftKey && (key === "ArrowUp" || key === "ArrowDown")) {
+      event.preventDefault();
+      props.onMove(key === "ArrowUp" ? "up" : "down");
+      return;
+    }
+    // Alt+F10 reaches the format toolbar, as in other editors.
+    if (event.altKey && key === "F10") {
+      event.preventDefault();
+      toolbarRef.current?.querySelector<HTMLElement>("button")?.focus();
+      return;
+    }
     if (mod && key.toLowerCase() === "z") {
       event.preventDefault();
       if (event.shiftKey) props.onRedo();
@@ -353,10 +410,28 @@ export function TextItem(props: TextItemProps) {
     >
       {hasSelection && (
         <div
+          ref={toolbarRef}
           className="sle-fmt"
           role="toolbar"
           aria-label="Format"
           onMouseDown={(event) => event.preventDefault()}
+          // Every button acts on the text, so focus goes back to it.
+          onClick={() => ref.current?.focus()}
+          onKeyDown={(event) => {
+            const buttons = Array.from(
+              toolbarRef.current?.querySelectorAll<HTMLElement>("button") ?? [],
+            );
+            const at = buttons.indexOf(document.activeElement as HTMLElement);
+            const step =
+              event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+            if (step) {
+              event.preventDefault();
+              buttons[(at + step + buttons.length) % buttons.length]?.focus();
+            } else if (event.key === "Escape") {
+              event.preventDefault();
+              ref.current?.focus();
+            }
+          }}
         >
           <button
             type="button"
@@ -439,7 +514,13 @@ export function TextItem(props: TextItemProps) {
         <textarea
           ref={ref}
           className="sle-ed"
-          aria-label={props.label}
+          aria-label={KIND_NAMES[kind]}
+          aria-keyshortcuts="Alt+F10 Alt+Shift+ArrowUp Alt+Shift+ArrowDown"
+          aria-autocomplete="list"
+          aria-controls={menu ? menuId : undefined}
+          aria-activedescendant={
+            menu && listLength > 0 ? `${menuId}-${menuIndex}` : undefined
+          }
           placeholder={
             kind === "p"
               ? "Write something, or type / for blocks"
@@ -482,7 +563,7 @@ export function TextItem(props: TextItemProps) {
           <button
             type="button"
             className="sle-hit"
-            aria-label={`Edit: ${props.label}`}
+            aria-label={`${KIND_NAMES[kind]}: ${snippet(body)}`}
             onClick={(event) => {
               event.stopPropagation();
               props.onActivate();
@@ -492,6 +573,7 @@ export function TextItem(props: TextItemProps) {
       )}
       {active && menu?.kind === "slash" && (
         <BlockMenu
+          id={menuId}
           choices={slashChoices}
           index={menuIndex}
           onHover={setMenuIndex}
@@ -501,6 +583,7 @@ export function TextItem(props: TextItemProps) {
       )}
       {active && menu?.kind === "variable" && (
         <VariableMenu
+          id={menuId}
           variables={variables}
           index={menuIndex}
           onHover={setMenuIndex}
diff --git a/packages/email-editor/src/components/ui/slider.tsx b/packages/email-editor/src/components/ui/slider.tsx
index 4301723a..bf632044 100644
--- a/packages/email-editor/src/components/ui/slider.tsx
+++ b/packages/email-editor/src/components/ui/slider.tsx
@@ -9,6 +9,7 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  "aria-label": ariaLabel,
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
@@ -52,6 +53,7 @@ function Slider({
           data-slot="slider-thumb"
           // biome-ignore lint/suspicious/noArrayIndexKey: one thumb per slider value; thumbs are positional and never reordered
           key={index}
+          aria-label={ariaLabel}
           className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
diff --git a/packages/email-editor/src/editor.css b/packages/email-editor/src/editor.css
index 04e21292..d90aa3f5 100644
--- a/packages/email-editor/src/editor.css
+++ b/packages/email-editor/src/editor.css
@@ -2002,3 +2002,16 @@ fieldset.sle-seg {
 .sle-body.style .sle-stage {
   padding-top: 12px;
 }
+/* A block's rendered preview: inert, and invisible to layout. */
+.sle-render {
+  display: contents;
+}
+/* Announcements for screen readers, such as a block moved by keyboard. */
+.sle-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

From 06268f8b7a041916b578f54d55f8692aa0295191 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 13:33:04 +0530
Subject: [PATCH 11/18] fix(email-editor): keep the editor's button reset off
 shadcn controls (#169)

The unlayered :where(.sle) reset beat Tailwind's layered utilities, so
select triggers lost their border and padding.
---
 packages/email-editor/src/editor.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/email-editor/src/editor.css b/packages/email-editor/src/editor.css
index d90aa3f5..2fa37666 100644
--- a/packages/email-editor/src/editor.css
+++ b/packages/email-editor/src/editor.css
@@ -57,7 +57,11 @@
 :where(.sle) * {
   box-sizing: border-box;
 }
-:where(.sle) button {
+/* shadcn/ui controls (they carry data-slot) style themselves with Tailwind
+   utilities in a cascade layer, which this unlayered reset would beat. The
+   whole selector stays in :where() so it adds no specificity over the
+   editor's own one-class rules. */
+:where(.sle button:not([data-slot])) {
   font: inherit;
   color: inherit;
   cursor: pointer;
@@ -65,9 +69,9 @@
   border: 0;
   padding: 0;
 }
-:where(.sle) input,
+:where(.sle input:not([data-slot])),
 :where(.sle) select,
-:where(.sle) textarea {
+:where(.sle textarea:not([data-slot])) {
   font: inherit;
   color: inherit;
 }

From 0cbb93a6ade01505ef82a2ba122a872e7d404399 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 18:54:03 +0530
Subject: [PATCH 12/18] fix(email-editor): dark inbox preview flips each
 block's own colours too (#169)

Blocks that set their own text colour stayed dark on the dark page. Dark text
is now lightened and light backgrounds darkened, as dark-mode mail clients do;
mid-tone colours such as a button's are kept.
---
 .../src/components/email-editor.tsx           |  5 +-
 .../email-editor/src/lib/palettes.test.ts     | 29 +++++++
 packages/email-editor/src/lib/palettes.ts     | 86 ++++++++++++++++++-
 3 files changed, 117 insertions(+), 3 deletions(-)
 create mode 100644 packages/email-editor/src/lib/palettes.test.ts

diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index 7f5534b9..4dae187c 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -21,7 +21,7 @@ import { setFallback } from "../lib/inline-markdown";
 import { countWords } from "../lib/markdown-edit";
 import { type MenuPlacement, placeMenu } from "../lib/menu-placement";
 import { normalizeEmail } from "../lib/normalize-email";
-import { darkStyle } from "../lib/palettes";
+import { darkBlock, darkStyle } from "../lib/palettes";
 import {
   explodeTextBlocks,
   itemMarkdown,
@@ -1297,8 +1297,9 @@ export function EmailEditor({
 
   function renderRow(row: Row) {
     if (mode === "write" && isItem(row.block)) return renderItem(row);
+    const sampled = sample && inStyle ? withSamples(row.block, samples) : row.block;
     const shown = (
-      sample && inStyle ? withSamples(row.block, samples) : row.block
+      inStyle && darkInbox ? darkBlock(sampled) : sampled
     ) as Required<EmailBlock>;
     const capabilities = getBlockCapabilities(row.block.blockType, blockRegistry);
     return (
diff --git a/packages/email-editor/src/lib/palettes.test.ts b/packages/email-editor/src/lib/palettes.test.ts
new file mode 100644
index 00000000..36b50dec
--- /dev/null
+++ b/packages/email-editor/src/lib/palettes.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "bun:test";
+import { darkBlock } from "./palettes";
+
+const text = (settings: Record<string, unknown>) => ({
+  id: "a",
+  blockType: "text",
+  settings,
+});
+
+describe("darkBlock", () => {
+  it("lightens dark text and darkens light backgrounds", () => {
+    const shown = darkBlock(
+      text({ content: "Hi", foregroundColor: "#0f172a", backgroundColor: "#f8fafc" }),
+    );
+    expect(shown.settings.foregroundColor).toBe("#d5ddf0");
+    expect(shown.settings.backgroundColor).toBe("#121f2b");
+    expect(shown.settings.content).toBe("Hi");
+  });
+
+  it("keeps light text and mid-tone colours such as a button's", () => {
+    const block = text({ foregroundColor: "#ffffff", backgroundColor: "#2563eb" });
+    expect(darkBlock(block)).toBe(block);
+  });
+
+  it("leaves colours it can't read alone", () => {
+    const block = text({ foregroundColor: "rebeccapurple" });
+    expect(darkBlock(block)).toBe(block);
+  });
+});
diff --git a/packages/email-editor/src/lib/palettes.ts b/packages/email-editor/src/lib/palettes.ts
index 84bec86b..f7765d67 100644
--- a/packages/email-editor/src/lib/palettes.ts
+++ b/packages/email-editor/src/lib/palettes.ts
@@ -1,4 +1,4 @@
-import type { Email, EmailStyle } from "../types/email-editor";
+import type { Email, EmailBlock, EmailStyle } from "../types/email-editor";
 
 export interface Palette {
   name: string;
@@ -114,3 +114,87 @@ export function darkStyle(style: EmailStyle): EmailStyle {
     },
   };
 }
+
+type Rgb = [number, number, number];
+
+function toRgb(hex: string): Rgb | null {
+  const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return null;
+  const digits =
+    match[1].length === 3
+      ? [...match[1]].map((digit) => digit + digit).join("")
+      : match[1];
+  return [0, 2, 4].map(
+    (at) => Number.parseInt(digits.slice(at, at + 2), 16) / 255,
+  ) as Rgb;
+}
+
+function luminance([r, g, b]: Rgb) {
+  const linear = (c: number) =>
+    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+
+/** The colour with its lightness flipped and clamped, hue and saturation kept. */
+function flipLightness([r, g, b]: Rgb, clamp: (lightness: number) => number) {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const lightness = (max + min) / 2;
+  const delta = max - min;
+  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+  const hue =
+    delta === 0
+      ? 0
+      : max === r
+        ? ((g - b) / delta + 6) % 6
+        : max === g
+          ? (b - r) / delta + 2
+          : (r - g) / delta + 4;
+  const next = clamp(1 - lightness);
+  const chroma = (1 - Math.abs(2 * next - 1)) * saturation;
+  const x = chroma * (1 - Math.abs((hue % 2) - 1));
+  const m = next - chroma / 2;
+  const [r1, g1, b1] =
+    hue < 1
+      ? [chroma, x, 0]
+      : hue < 2
+        ? [x, chroma, 0]
+        : hue < 3
+          ? [0, chroma, x]
+          : hue < 4
+            ? [0, x, chroma]
+            : hue < 5
+              ? [x, 0, chroma]
+              : [chroma, 0, x];
+  return `#${[r1, g1, b1]
+    .map((channel) =>
+      Math.round((channel + m) * 255)
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}`;
+}
+
+const TEXT_COLORS = ["foregroundColor", "textColor"];
+const SURFACE_COLORS = ["backgroundColor", "borderColor", "color"];
+
+/** A block's own colours as a dark-mode mail client shows them: dark text is
+ * lightened and light backgrounds and lines are darkened, while mid-tone
+ * colours such as a button's stay. Without this, a block that sets its own
+ * text colour reads dark on dark. */
+export function darkBlock<T extends EmailBlock>(block: T): T {
+  const settings = { ...(block.settings as Record<string, unknown>) };
+  let changed = false;
+  for (const key of [...TEXT_COLORS, ...SURFACE_COLORS]) {
+    const value = settings[key];
+    const rgb = typeof value === "string" ? toRgb(value) : null;
+    if (!rgb) continue;
+    const text = TEXT_COLORS.includes(key);
+    if (text ? luminance(rgb) >= 0.3 : luminance(rgb) <= 0.5) continue;
+    settings[key] = flipLightness(rgb, (lightness) =>
+      text ? Math.max(lightness, 0.75) : Math.min(Math.max(lightness, 0.12), 0.2),
+    );
+    changed = true;
+  }
+  return changed ? { ...block, settings } : block;
+}

From f604ca9eef8865b2d5ce4cf34d5e73198d15c74d Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 18:58:01 +0530
Subject: [PATCH 13/18] fix(email-editor): a palette recolours blocks that set
 their own colours (#169)

Starter templates give their text, buttons and dividers their own colours, so
a dark palette left them dark on dark. Choosing a palette now keeps each text
and background colour's tone between the new page and text colours, gives
buttons the accent, and lets links and dividers follow the palette.
---
 .../src/components/email-editor.tsx           | 24 +++++++-
 .../email-editor/src/components/inspector.tsx |  7 ++-
 .../email-editor/src/lib/palettes.test.ts     | 54 +++++++++++++++-
 packages/email-editor/src/lib/palettes.ts     | 61 +++++++++++++++++++
 4 files changed, 142 insertions(+), 4 deletions(-)

diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index 4dae187c..857c408f 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -21,7 +21,13 @@ import { setFallback } from "../lib/inline-markdown";
 import { countWords } from "../lib/markdown-edit";
 import { type MenuPlacement, placeMenu } from "../lib/menu-placement";
 import { normalizeEmail } from "../lib/normalize-email";
-import { darkBlock, darkStyle } from "../lib/palettes";
+import {
+  darkBlock,
+  darkStyle,
+  type Palette,
+  paletteContent,
+  paletteStyle,
+} from "../lib/palettes";
 import {
   explodeTextBlocks,
   itemMarkdown,
@@ -344,6 +350,21 @@ export function EmailEditor({
     [commitEmail],
   );
 
+  const applyPalette = useCallback(
+    (palette: Palette) => {
+      const email = emailRef.current;
+      commitEmail(
+        {
+          ...email,
+          content: paletteContent(email, palette),
+          style: deepMerge(email.style, paletteStyle(palette)),
+        },
+        "style",
+      );
+    },
+    [commitEmail],
+  );
+
   /** Settings from a block's form. For a whole text block, the settings apply
    * to all its items and new text is split into items again. */
   const updateBlock = useCallback(
@@ -1478,6 +1499,7 @@ export function EmailEditor({
             onTab={setInspectorTab}
             updateEmail={updateEmail}
             updateEmailStyle={updateEmailStyle}
+            onPalette={applyPalette}
             updateBlock={updateBlock}
             onEditInWrite={editInWrite}
             onCopied={(tag) => flash(`Copied ${tag}`)}
diff --git a/packages/email-editor/src/components/inspector.tsx b/packages/email-editor/src/components/inspector.tsx
index 6b1e7871..821bcb90 100644
--- a/packages/email-editor/src/components/inspector.tsx
+++ b/packages/email-editor/src/components/inspector.tsx
@@ -1,6 +1,6 @@
 import { Check, Copy, PenLine, Search } from "lucide-react";
 import { type KeyboardEvent, useId, useState } from "react";
-import { activePalette, PALETTES, paletteStyle } from "../lib/palettes";
+import { activePalette, type Palette, PALETTES } from "../lib/palettes";
 import type { BlockRegistry } from "../types/block-registry";
 import type {
   Email,
@@ -23,6 +23,7 @@ export function Inspector({
   onTab,
   updateEmail,
   updateEmailStyle,
+  onPalette,
   updateBlock,
   onEditInWrite,
   onCopied,
@@ -36,6 +37,8 @@ export function Inspector({
   onTab: (tab: Tab) => void;
   updateEmail: (email: Email) => void;
   updateEmailStyle: (style: Partial<EmailStyle>) => void;
+  /** The palette for the whole email, its blocks included. */
+  onPalette: (palette: Palette) => void;
   updateBlock: (id: string, content: Partial<EmailBlock>) => void;
   /** Back to writing, at the selected block. */
   onEditInWrite: (id: string) => void;
@@ -130,7 +133,7 @@ export function Inspector({
                     type="button"
                     className={`sle-preset${activePalette(email) === palette.name ? " on" : ""}`}
                     aria-pressed={activePalette(email) === palette.name}
-                    onClick={() => updateEmailStyle(paletteStyle(palette))}
+                    onClick={() => onPalette(palette)}
                   >
                     <span className="sw" style={{ background: palette.canvas }}>
                       <span
diff --git a/packages/email-editor/src/lib/palettes.test.ts b/packages/email-editor/src/lib/palettes.test.ts
index 36b50dec..9872f19a 100644
--- a/packages/email-editor/src/lib/palettes.test.ts
+++ b/packages/email-editor/src/lib/palettes.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "bun:test";
-import { darkBlock } from "./palettes";
+import { defaultEmail } from "./default-email";
+import { darkBlock, PALETTES, paletteContent } from "./palettes";
 
 const text = (settings: Record<string, unknown>) => ({
   id: "a",
@@ -27,3 +28,54 @@ describe("darkBlock", () => {
     expect(darkBlock(block)).toBe(block);
   });
 });
+
+describe("paletteContent", () => {
+  const night = PALETTES.find((palette) => palette.name === "Night");
+  if (!night) throw new Error("no Night palette");
+  const email = {
+    ...defaultEmail,
+    style: {
+      ...defaultEmail.style,
+      colors: { ...defaultEmail.style.colors, foreground: "#0f172a" as const },
+      structure: {
+        ...defaultEmail.style.structure,
+        page: { background: "#ffffff" as const, foreground: "#0f172a" as const },
+      },
+    },
+    content: [
+      {
+        id: "h",
+        blockType: "text",
+        settings: { content: "# Hi", foregroundColor: "#0f172a" },
+      },
+      {
+        id: "p",
+        blockType: "text",
+        settings: { content: "Body", foregroundColor: "#475569" },
+      },
+      {
+        id: "b",
+        blockType: "link",
+        settings: {
+          text: "Go",
+          isButton: true,
+          buttonColor: "#db2777",
+          textColor: "#0284c7",
+        },
+      },
+      { id: "s", blockType: "separator", settings: { color: "#dbe4ee" } },
+    ],
+  };
+
+  it("keeps each block's tone in the new palette", () => {
+    const [heading, body, button, divider] = paletteContent(email, night);
+    expect(heading.settings.foregroundColor).toBe(night.text);
+    // Muted body text stays between page and text, still readable.
+    expect(body.settings.foregroundColor).not.toBe(night.text);
+    expect(body.settings.foregroundColor).not.toBe("#475569");
+    expect(button.settings.buttonColor).toBe(night.accent);
+    expect(button.settings.textColor).toBeUndefined();
+    expect(divider.settings.color).toBeUndefined();
+    expect(heading.settings.content).toBe("# Hi");
+  });
+});
diff --git a/packages/email-editor/src/lib/palettes.ts b/packages/email-editor/src/lib/palettes.ts
index f7765d67..82a3a5c3 100644
--- a/packages/email-editor/src/lib/palettes.ts
+++ b/packages/email-editor/src/lib/palettes.ts
@@ -198,3 +198,64 @@ export function darkBlock<T extends EmailBlock>(block: T): T {
   }
   return changed ? { ...block, settings } : block;
 }
+
+function toHex(rgb: Rgb) {
+  return `#${rgb
+    .map((channel) =>
+      Math.round(Math.min(1, Math.max(0, channel)) * 255)
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}` as `#${string}`;
+}
+
+/** Where a colour sits between the page (0) and the text colour (1). */
+function tone(color: Rgb, page: Rgb, text: Rgb) {
+  const axis = text.map((channel, at) => channel - page[at]);
+  const length = axis.reduce((sum, part) => sum + part * part, 0);
+  if (length === 0) return 1;
+  return (
+    color.reduce((sum, channel, at) => sum + (channel - page[at]) * axis[at], 0) /
+    length
+  );
+}
+
+const mix = (from: Rgb, to: Rgb, amount: number) =>
+  from.map((channel, at) => channel + (to[at] - channel) * amount) as Rgb;
+
+/** The email's blocks recoloured for a palette. Without this, blocks that set
+ * their own colours stay as they were, dark on dark in a dark palette: text and
+ * backgrounds keep their tone between page and text (muted body text stays
+ * muted), buttons take the accent, and dividers and links follow the palette. */
+export function paletteContent(email: Email, palette: Palette): EmailBlock[] {
+  const oldPage = toRgb(email.style.structure.page.background ?? "#ffffff");
+  const oldText = toRgb(
+    email.style.structure.page.foreground ?? email.style.colors.foreground,
+  );
+  const newPage = toRgb(palette.page) as Rgb;
+  const newText = toRgb(palette.text) as Rgb;
+  const retone = (value: unknown, min: number) => {
+    const rgb = typeof value === "string" ? toRgb(value) : null;
+    if (!rgb || !oldPage || !oldText) return value;
+    const at = Math.min(1, Math.max(min, tone(rgb, oldPage, oldText)));
+    return toHex(mix(newPage, newText, at));
+  };
+  return email.content.map((block) => {
+    const settings = { ...(block.settings as Record<string, unknown>) };
+    if ("foregroundColor" in settings) {
+      // Never fainter than readable.
+      settings.foregroundColor = retone(settings.foregroundColor, 0.6);
+    }
+    if ("backgroundColor" in settings) {
+      settings.backgroundColor = retone(settings.backgroundColor, 0);
+    }
+    if (block.blockType === "link") {
+      delete settings.textColor;
+      if ("buttonColor" in settings) settings.buttonColor = palette.accent;
+      if ("buttonBorderColor" in settings) settings.buttonBorderColor = palette.accent;
+      if ("buttonTextColor" in settings) settings.buttonTextColor = palette.accentText;
+    }
+    if (block.blockType === "separator") delete settings.color;
+    return { ...block, settings } as typeof block;
+  });
+}

From 8a3d010513a3abfe41f6443d0549dbcdffd6762d Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 19:02:08 +0530
Subject: [PATCH 14/18] fix(email-editor): quotes are tinted from the palette,
 not light grey (#169)

React Email's default quote is a #f9f9f9 box with a #ccc bar, and Write mode
copied it, so on a dark palette the quote was a white slab with pale text.
The sent quote now mixes its tint and bar from the page and text colours,
and Write mode does the same with currentColor.
---
 packages/email-editor/src/editor.css            |  7 ++++---
 .../email-editor/src/lib/markdown-content.tsx   | 17 +++++++++++++++++
 packages/email-editor/src/lib/palettes.ts       |  8 ++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/email-editor/src/editor.css b/packages/email-editor/src/editor.css
index 2fa37666..18e7a80e 100644
--- a/packages/email-editor/src/editor.css
+++ b/packages/email-editor/src/editor.css
@@ -1921,10 +1921,11 @@ fieldset.sle-seg {
   left: 0;
   font-variant-numeric: tabular-nums;
 }
+/* Matches the sent quote: tinted from the text colour, so it reads on any palette. */
 .sle-item.k-quote {
-  padding: 1em 10px;
-  background: #f9f9f9;
-  border-left: 10px solid #ddd;
+  padding: 16px;
+  background: color-mix(in srgb, currentColor 6%, transparent);
+  border-left: 4px solid color-mix(in srgb, currentColor 30%, transparent);
 }
 .sle-item .sle-ed {
   min-height: 1em;
diff --git a/packages/email-editor/src/lib/markdown-content.tsx b/packages/email-editor/src/lib/markdown-content.tsx
index 0cba071e..f831bf1d 100644
--- a/packages/email-editor/src/lib/markdown-content.tsx
+++ b/packages/email-editor/src/lib/markdown-content.tsx
@@ -1,4 +1,5 @@
 import { Markdown } from "@react-email/components";
+import { blend } from "@/lib/palettes";
 import type { EmailStyle } from "@/types/email-editor";
 
 export interface MarkdownContentOptions {
@@ -48,6 +49,12 @@ export function MarkdownContent({
     margin: "16px 0 8px",
   });
 
+  // A quote is tinted from the page and text colours, so it reads on any
+  // palette; the default is a light grey box that vanishes on a dark page.
+  const page = style?.structure.page.background ?? "#ffffff";
+  const text =
+    style?.structure.page.foreground ?? style?.colors.foreground ?? "#000000";
+
   return (
     <Markdown
       markdownCustomStyles={{
@@ -71,6 +78,16 @@ export function MarkdownContent({
           listStyleType: "decimal",
         },
         li: { ...commonTextStyles, margin: "4px 0" },
+        blockQuote: {
+          ...commonTextStyles,
+          margin: "0 0 16px",
+          // The paragraph inside brings a 16px bottom margin; 1px of padding
+          // keeps it inside the box instead of collapsing through.
+          padding: "16px 16px 1px",
+          background: blend(page, text, 0.06, "transparent"),
+          borderLeft: `4px solid ${blend(page, text, 0.3, "currentColor")}`,
+          color: "inherit",
+        },
         link: {
           ...commonTextStyles,
           color: style?.colors.accent || "inherit",
diff --git a/packages/email-editor/src/lib/palettes.ts b/packages/email-editor/src/lib/palettes.ts
index 82a3a5c3..5f8d2cf4 100644
--- a/packages/email-editor/src/lib/palettes.ts
+++ b/packages/email-editor/src/lib/palettes.ts
@@ -223,6 +223,14 @@ function tone(color: Rgb, page: Rgb, text: Rgb) {
 const mix = (from: Rgb, to: Rgb, amount: number) =>
   from.map((channel, at) => channel + (to[at] - channel) * amount) as Rgb;
 
+/** A hex colour `amount` of the way from one colour to another, for tints
+ * that must be plain hex in an email. `fallback` when either can't be read. */
+export function blend(from: string, to: string, amount: number, fallback: string) {
+  const a = toRgb(from);
+  const b = toRgb(to);
+  return a && b ? toHex(mix(a, b, amount)) : fallback;
+}
+
 /** The email's blocks recoloured for a palette. Without this, blocks that set
  * their own colours stay as they were, dark on dark in a dark palette: text and
  * backgrounds keep their tone between page and text (muted body text stays

From 28dc039e68078254e04ccc1d2cb9d89d7a5d1bc7 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 19:16:56 +0530
Subject: [PATCH 15/18] fix(email-editor): readable text on every palette, in
 Write and dark inbox (#169)

A sweep of every palette in Write, Style and dark inbox found text under
WCAG AA:
- Dark inbox lightens an accent too dark to read as a link on the dark
  page, and gives buttons text to match.
- Recoloured block text is kept at 4.5:1 against the new page (the footer
  fell just short on Warm, Forest and Plain).
- The conditional label, preview text and "Preview in inbox" fade from the
  page's text colour instead of fixed greys, and merge-tag chips lean toward
  it, so they read on dark palettes.
- Preview text wraps instead of being cut off on narrow screens.
---
 .../src/blocks/conditional/block.tsx          |  3 +-
 .../src/components/doc-header.tsx             | 23 ++++++++++---
 packages/email-editor/src/editor.css          | 20 +++++++----
 .../email-editor/src/lib/palettes.test.ts     | 29 +++++++++++++++-
 packages/email-editor/src/lib/palettes.ts     | 34 +++++++++++++++++--
 5 files changed, 93 insertions(+), 16 deletions(-)

diff --git a/packages/email-editor/src/blocks/conditional/block.tsx b/packages/email-editor/src/blocks/conditional/block.tsx
index 68d7a46c..bc6a0ab1 100644
--- a/packages/email-editor/src/blocks/conditional/block.tsx
+++ b/packages/email-editor/src/blocks/conditional/block.tsx
@@ -52,7 +52,8 @@ export function ConditionalBlock({
               padding: "6px 14px 0",
               fontSize: "12px",
               fontWeight: 600,
-              color: "#737373",
+              // The text colour, faded: readable on light and dark pages.
+              opacity: 0.75,
             }}
           >
             {settings.has === false ? "Contacts without" : "Contacts tagged"}{" "}
diff --git a/packages/email-editor/src/components/doc-header.tsx b/packages/email-editor/src/components/doc-header.tsx
index d5383d5e..5d941d7b 100644
--- a/packages/email-editor/src/components/doc-header.tsx
+++ b/packages/email-editor/src/components/doc-header.tsx
@@ -91,7 +91,7 @@ export function DocHeader({
               if (event.key === "Enter" || (event.key === "ArrowDown" && atEnd)) {
                 event.preventDefault();
                 document
-                  .querySelector<HTMLInputElement>("[data-sle-field=preview]")
+                  .querySelector<HTMLTextAreaElement>("[data-sle-field=preview]")
                   ?.focus();
               }
             }}
@@ -100,19 +100,32 @@ export function DocHeader({
       )}
       <div className="fld">
         <span className="tg">Preview text</span>
-        <input
+        {/* One line of text that wraps, so a long preview stays visible. */}
+        <textarea
           className="sle-prev"
+          rows={1}
           aria-label="Preview text"
           placeholder="Preview text: the line shown after the subject in the inbox"
           data-sle-field="preview"
           onFocus={onFieldFocus}
           value={previewText}
-          onChange={(event) => onPreviewTextChange(event.target.value)}
+          onChange={(event) =>
+            onPreviewTextChange(event.target.value.replace(/\s*\n\s*/g, " "))
+          }
           onKeyDown={(event) => {
-            if (event.key === "Enter" || event.key === "ArrowDown") {
+            const field = event.currentTarget;
+            // On one line the arrows leave the field; once it wraps they move
+            // between its lines first.
+            const oneLine =
+              field.scrollHeight <=
+              Number.parseFloat(getComputedStyle(field).lineHeight) * 1.5;
+            const atStart =
+              oneLine || (field.selectionStart === 0 && field.selectionEnd === 0);
+            const atEnd = oneLine || field.selectionStart === field.value.length;
+            if (event.key === "Enter" || (event.key === "ArrowDown" && atEnd)) {
               event.preventDefault();
               onEnter();
-            } else if (event.key === "ArrowUp") {
+            } else if (event.key === "ArrowUp" && atStart) {
               const subject = document.querySelector<HTMLTextAreaElement>(
                 "[data-sle-field=subject]",
               );
diff --git a/packages/email-editor/src/editor.css b/packages/email-editor/src/editor.css
index 18e7a80e..9afe16b9 100644
--- a/packages/email-editor/src/editor.css
+++ b/packages/email-editor/src/editor.css
@@ -788,7 +788,8 @@
   border-radius: 4px;
   font: 500 0.82em / 1.6 var(--sle-mono);
   background: oklch(0.6 0.14 150 / 0.12);
-  color: oklch(0.42 0.12 150);
+  /* Green leaning toward the text colour: darker on light pages, lighter on dark. */
+  color: color-mix(in oklch, oklch(0.6 0.14 150) 55%, currentColor);
   border: 1px dashed oklch(0.6 0.14 150 / 0.5);
   text-transform: none;
   letter-spacing: 0;
@@ -1306,18 +1307,23 @@ select.sle-in {
   border: 0;
   outline: 0;
   background: none;
+  resize: none;
+  field-sizing: content;
+  min-height: 1.5em;
+  overflow: hidden;
   padding: 0;
   margin: 10px 0 0;
   font-family: inherit;
   font-size: 1.05em;
   line-height: 1.5;
-  color: var(--sle-muted);
+  /* On the email's page: faded from its text colour, so it reads on any palette. */
+  color: color-mix(in srgb, currentColor 72%, transparent);
   caret-color: var(--sle-accent);
 }
 .sle-subj::placeholder,
 .sle-prev::placeholder {
-  color: var(--sle-muted);
-  opacity: 0.55;
+  color: currentColor;
+  opacity: 0.45;
 }
 .sle-footnote {
   display: flex;
@@ -1627,7 +1633,8 @@ select.sle-in {
   gap: 14px;
   margin-top: 12px;
   font: 400 12.5px / 1.3 var(--sle-font);
-  color: var(--sle-muted);
+  /* On the email's page, so faded from its text colour, not the editor's grey. */
+  color: color-mix(in srgb, currentColor 70%, transparent);
 }
 .sle-meta .warn {
   color: oklch(0.55 0.13 70);
@@ -1637,10 +1644,9 @@ select.sle-in {
   align-items: center;
   gap: 5px;
   font-weight: 500;
-  color: var(--sle-muted);
 }
 .sle-meta .lnk:hover {
-  color: var(--sle-text);
+  text-decoration: underline;
 }
 .sle-ibx {
   display: grid;
diff --git a/packages/email-editor/src/lib/palettes.test.ts b/packages/email-editor/src/lib/palettes.test.ts
index 9872f19a..3fb7cbe0 100644
--- a/packages/email-editor/src/lib/palettes.test.ts
+++ b/packages/email-editor/src/lib/palettes.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "bun:test";
 import { defaultEmail } from "./default-email";
-import { darkBlock, PALETTES, paletteContent } from "./palettes";
+import { blend, darkBlock, darkStyle, PALETTES, paletteContent } from "./palettes";
 
 const text = (settings: Record<string, unknown>) => ({
   id: "a",
@@ -79,3 +79,30 @@ describe("paletteContent", () => {
     expect(heading.settings.content).toBe("# Hi");
   });
 });
+
+describe("darkStyle", () => {
+  it("lightens an accent too dark to read as a link, with button text to match", () => {
+    const style = {
+      ...defaultEmail.style,
+      colors: { ...defaultEmail.style.colors, accent: "#18181b" as const },
+    };
+    const dark = darkStyle(style).colors;
+    expect(dark.accent).not.toBe("#18181b");
+    expect(dark.accentForeground).toBe("#1c1c1e");
+  });
+
+  it("keeps an accent that already reads on a dark page", () => {
+    const style = {
+      ...defaultEmail.style,
+      colors: { ...defaultEmail.style.colors, accent: "#60a5fa" as const },
+    };
+    expect(darkStyle(style).colors.accent).toBe("#60a5fa");
+  });
+});
+
+describe("blend", () => {
+  it("mixes two hex colours, or falls back", () => {
+    expect(blend("#000000", "#ffffff", 0.5, "x")).toBe("#808080");
+    expect(blend("red", "#ffffff", 0.5, "x")).toBe("x");
+  });
+});
diff --git a/packages/email-editor/src/lib/palettes.ts b/packages/email-editor/src/lib/palettes.ts
index 5f8d2cf4..f43bc44a 100644
--- a/packages/email-editor/src/lib/palettes.ts
+++ b/packages/email-editor/src/lib/palettes.ts
@@ -104,6 +104,7 @@ export function darkStyle(style: EmailStyle): EmailStyle {
     ...style,
     colors: {
       ...style.colors,
+      ...darkAccent(style.colors.accent),
       background: "#000000",
       foreground: "#e7e7ea",
       border: "#333336",
@@ -117,6 +118,19 @@ export function darkStyle(style: EmailStyle): EmailStyle {
 
 type Rgb = [number, number, number];
 
+const DARK_PAGE: Rgb = [0x1c / 255, 0x1c / 255, 0x1e / 255];
+
+/** Links use the accent as text, so a dark accent is lightened until it reads
+ * on the dark page, and buttons get text that reads on the new accent. */
+function darkAccent(accent: string): Partial<EmailStyle["colors"]> {
+  const rgb = toRgb(accent);
+  if (!rgb || contrast(rgb, DARK_PAGE) >= 4.6) return {};
+  const next = readable(rgb, DARK_PAGE, [1, 1, 1]);
+  const ink: Rgb =
+    contrast(next, [1, 1, 1]) >= contrast(next, DARK_PAGE) ? [1, 1, 1] : DARK_PAGE;
+  return { accent: toHex(next), accentForeground: toHex(ink) };
+}
+
 function toRgb(hex: string): Rgb | null {
   const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
   if (!match) return null;
@@ -231,6 +245,21 @@ export function blend(from: string, to: string, amount: number, fallback: string
   return a && b ? toHex(mix(a, b, amount)) : fallback;
 }
 
+const contrast = (a: Rgb, b: Rgb) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+/** `color`, moved toward `toward` just far enough to read on `background`
+ * (WCAG AA is 4.5:1; 4.6 leaves room for rounding to hex). */
+function readable(color: Rgb, background: Rgb, toward: Rgb): Rgb {
+  for (let amount = 0; amount <= 1; amount += 0.05) {
+    const next = mix(color, toward, amount);
+    if (contrast(next, background) >= 4.6) return next;
+  }
+  return toward;
+}
+
 /** The email's blocks recoloured for a palette. Without this, blocks that set
  * their own colours stay as they were, dark on dark in a dark palette: text and
  * backgrounds keep their tone between page and text (muted body text stays
@@ -251,8 +280,9 @@ export function paletteContent(email: Email, palette: Palette): EmailBlock[] {
   return email.content.map((block) => {
     const settings = { ...(block.settings as Record<string, unknown>) };
     if ("foregroundColor" in settings) {
-      // Never fainter than readable.
-      settings.foregroundColor = retone(settings.foregroundColor, 0.6);
+      const toned = toRgb(String(retone(settings.foregroundColor, 0.6)));
+      // Never fainter than readable on the new page.
+      if (toned) settings.foregroundColor = toHex(readable(toned, newPage, newText));
     }
     if ("backgroundColor" in settings) {
       settings.backgroundColor = retone(settings.backgroundColor, 0);

From 5073ede41c7983e156520e0c350766b1b32ea61c Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 19:28:35 +0530
Subject: [PATCH 16/18] docs(email-editor): beginner-friendly README with
 accessibility standards (#169)

Explains what the editor does, a quick start with state, how to render HTML
for sending, every prop, the blocks, keyboard shortcuts, and what we test
against: WCAG 2.2 AA for the editor, WAI-ARIA Authoring Practices for its
controls, and 4.5:1 text contrast in the built-in palettes. Drops the claim
that Tailwind is required: styles.css is pre-built.
---
 packages/email-editor/README.md | 228 ++++++++++++++++++++++++++------
 1 file changed, 188 insertions(+), 40 deletions(-)

diff --git a/packages/email-editor/README.md b/packages/email-editor/README.md
index 07997a0f..7a596960 100644
--- a/packages/email-editor/README.md
+++ b/packages/email-editor/README.md
@@ -1,68 +1,216 @@
-# Introduction
+# @sendlit/email-editor
 
-A WYSIWYG email editor by SendLit.
+A React editor for designing marketing and transactional emails, by
+[SendLit](https://github.com/codelitdev/sendlit).
 
-## Installation
+You write the email like a document: type paragraphs, press `/` to add blocks
+(buttons, images, columns and more) and `{{` to add merge tags such as the
+reader's name. Switch to **Style** mode to pick colours and fonts and to preview
+the email on desktop, on mobile and in a dark-mode inbox. When you're done,
+turn the email into HTML that works in mail clients.
 
-The project depends of TailwindCSS, so you need to have it configured on your project, before installating this package.
+## Installation
 
 ```sh
 npm i @sendlit/email-editor
 ```
 
-### Importing the CSS
+It needs React 19.
 
-#### 1. Tailwind v4
+## Quick start
 
-In your CSS file, add
+The editor works on an `Email` object: its blocks and its style. Keep it in
+state, pass it in, and save it whenever `onChange` gives you a new one.
 
-```css
-@source "./node_modules/@sendlit/email-editor";
-# ... remaining code ...
-```
-
-#### 2. Tailwind v3
+```tsx
+import { useState } from "react";
+import { EmailEditor, defaultEmail, type Email } from "@sendlit/email-editor";
+import "@sendlit/email-editor/styles.css";
 
-In your tailwind config, add
+export default function App() {
+  const [email, setEmail] = useState<Email>(defaultEmail);
 
-```js
-module.exports = {
-    content: [
-        // ... remaining code ...
-        "./node_modules/@sendlit/email-editor",
-    ],
-    // ... remaining code ...
-};
+  return (
+    // The editor fills its container, so give it a height.
+    <div style={{ height: "100vh" }}>
+      <EmailEditor email={email} onChange={setEmail} />
+    </div>
+  );
+}
 ```
 
-## Tech Stack
+The editor keeps track of edits and undo history itself, so passing the value
+from `onChange` back in is safe: it recognises its own change. Passing a
+different email, such as one you just loaded, replaces what's in the editor
+and clears its undo history.
 
-- [React](https://react.dev/)
-- [TailwindCSS](https://tailwindcss.com/)
-- [Shadcn/ui](https://ui.shadcn.com/)
-- [React email](https://react.email/)
+## Sending the email
 
-## Usage
+The `Email` object is what you store. To send it, turn it into HTML and,
+optionally, a plain-text version:
 
-To show the email editor
+```ts
+import { renderEmailToHtml, renderEmailToPlainText } from "@sendlit/email-editor";
 
-```js
-import { EmailEditor } from "@sendlit/email-editor";
-import "@sendlit/email-editor/styles.css";
+const html = await renderEmailToHtml({ email });
+const text = renderEmailToPlainText(html);
+```
+
+The HTML is built with [React Email](https://react.email/), which produces
+table-based markup that mail clients such as Gmail and Outlook display
+correctly.
+
+## Options
+
+| Prop              | What it does                                                                                       |
+| ----------------- | -------------------------------------------------------------------------------------------------- |
+| `email`           | The email to start with. Required.                                                                 |
+| `onChange`        | Called with the updated email after every change. Required.                                        |
+| `subject`         | The subject line, shown above the email. Leave it out to hide the subject field.                   |
+| `onSubjectChange` | Called when the subject changes. Saving it is up to you.                                           |
+| `variables`       | Merge tags offered after `{{`, for example `{ tag: "{{ subscriber.name }}", description: "Name", sample: "Priya" }`. `sample` is shown when "Sample data" is on. |
+| `senderName`      | The sender shown in the inbox preview.                                                             |
+| `theme`           | The editor's own look: `"sendlit"` (default), `"neutral"` or `"dark"`. This doesn't change the email. |
+| `defaultMode`     | `"write"` (default) or `"style"`.                                                                  |
+| `blocks`          | The block types to offer. See [Choosing blocks](#choosing-blocks).                                 |
+| `renderContext`   | Data your own blocks need to render, such as an unsubscribe link. It is never saved in the email.  |
+
+## Writing and styling
+
+**Write** mode is for the words:
+
+- Type as you would in a document. Start a line with `#` for a heading, `-` for
+  a list or `>` for a quote. Select text for bold, italic and links.
+- Press `/` for the block menu, or `{{` for merge tags.
+- Drag a block by its handle to move it.
+- Undo and redo with Ctrl/⌘+Z and Shift+Ctrl/⌘+Z.
+- The subject and the preview text (the line inboxes show after the subject)
+  sit above the email, with an inbox preview.
+
+**Style** mode is for the look:
+
+- Pick a palette (Default, Warm, Forest, Mono, Plain or Night) or set your own
+  colours and fonts.
+- Select a block to change its settings.
+- Preview on desktop or mobile, with sample data, or in a dark-mode inbox.
+
+A **"Before you send"** checklist flags common problems, such as a missing
+subject or preview text, an empty button or an image without alt text.
+
+## Built-in blocks
+
+| Block         | What it is                                                       |
+| ------------- | ---------------------------------------------------------------- |
+| `text`        | Paragraphs, headings, lists and quotes, written as markdown      |
+| `link`        | A link, or a button                                              |
+| `image`       | An image with alt text, size and alignment                       |
+| `separator`   | A divider line                                                   |
+| `spacer`      | Empty space                                                      |
+| `columns`     | Two columns of text that can stack on small screens              |
+| `social`      | Buttons linking to your social profiles                          |
+| `html`        | Your own HTML, sent as written                                   |
+| `conditional` | Text shown only to contacts with (or without) a tag              |
+
+A `conditional` block is sent as a [Liquid](https://shopify.github.io/liquid/)
+condition on `subscriber.tags`, so it needs a sending tool that fills in
+subscriber data. Pass `showConditionals: true` to `renderEmailToHtml` to
+preview every section.
+
+## Choosing blocks
+
+`blocks` replaces the default list, so you can leave out built-in blocks or
+add your own:
+
+```tsx
+import { Image, Link, Text } from "@sendlit/email-editor/blocks";
+
+<EmailEditor email={email} onChange={setEmail} blocks={[Text, Link, Image]} />;
+```
 
-export default App() {
-    return (<EmailEditor  />)
+A block is an object with a `block` component (how it looks), a `settings`
+component (its form in Style mode), `metadata` (name, label and icon) and
+`defaultSettings`. It can also have a `quickEdit` component with the few fields
+worth changing while writing, shown in a small popover. Writing paragraph by
+paragraph only works with the built-in `text` block; without it, every block
+is added from the menu and edited through its settings.
+
+## Accessibility
+
+We build and test the editor against
+[WCAG 2.2](https://www.w3.org/TR/WCAG22/) at **Level AA**, the level most
+accessibility laws and policies ask for.
+
+**Using the editor**
+
+- Everything works from the keyboard. Each paragraph or block is one Tab stop,
+  and focus is always visible and never lost when a popover or menu closes.
+- Controls follow the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
+  for tabs, menus, listboxes and toolbars, so screen readers announce them as
+  expected. Rows are named after their content ("Paragraph: Thanks for
+  joining", "Button block: Get started"), and moves and messages are announced.
+- Links and buttons inside the email preview can't be followed by accident.
+- We check the editor with [axe-core](https://github.com/dequelabs/axe-core)
+  and by hand with the keyboard.
+
+**The emails you make**
+
+- The built-in palettes keep text at a contrast ratio of at least **4.5:1**
+  (WCAG AA). Choosing a palette recolours the blocks to match, and the
+  dark-inbox preview lightens text and links the way dark-mode mail apps do.
+- The checklist reminds you to give images alt text.
+- Colours you pick yourself aren't checked, so check their contrast when you
+  change them.
+
+This is our own testing, not a formal audit or certification. If you find a
+barrier, please [open an issue](https://github.com/codelitdev/sendlit/issues).
+
+### Keyboard shortcuts
+
+| Key                        | Does                                                         |
+| -------------------------- | ------------------------------------------------------------ |
+| Tab, Shift+Tab             | Moves between paragraphs, blocks and controls                |
+| Enter on a row             | Edits a paragraph, or opens a block's settings               |
+| Escape                     | Stops editing or closes the settings, staying on the row     |
+| ↑ / ↓                      | Moves between paragraphs and blocks, and up to the preview text |
+| Alt+Shift+↑ / ↓            | Moves the current paragraph or block up or down              |
+| `/`, `{{`                  | Opens the block menu or the merge tag menu                   |
+| Ctrl/⌘+B, I, K             | Bold, italic, link                                           |
+| Alt+F10                    | Moves to the format toolbar while text is selected           |
+| Ctrl/⌘+Z, Shift+Ctrl/⌘+Z   | Undo, redo                                                   |
+
+In Style mode, Enter on a block moves to its settings, Escape returns to the
+block, and the arrow keys move between blocks.
+
+## Styling the editor
+
+`styles.css` is pre-built and contains everything the editor needs, so you
+don't need Tailwind CSS. The editor's own look comes from `--sle-*` CSS
+variables on the `.sle` element (colours, corner radii and fonts). Override
+them in a stylesheet loaded after `styles.css` to re-skin it without touching
+the components:
+
+```css
+.sle {
+  --sle-accent: #7c3aed;
+  --sle-font: "Inter", sans-serif;
 }
 ```
 
-## Writing mode, subject and merge tags
+For the `neutral` and `dark` themes, use `.sle.t-neutral` or `.sle.t-dark` as
+the selector instead.
+
+If your app already uses Tailwind CSS and you'd rather it built the styles,
+point it at the package instead:
 
-`EmailEditor` opens in Write mode (subject and preview text above the email, inline markdown text, a `/` block menu, `{{` merge tags, drag to reorder) and has a Style mode for the look and the selected block. Pass `subject` and `onSubjectChange` to edit the subject in the editor, `variables` for merge tags, `senderName` for the inbox preview and `theme` (`"sendlit"`, `"neutral"` or `"dark"`).
+- **Tailwind v4:** add `@source "./node_modules/@sendlit/email-editor";` to your CSS.
+- **Tailwind v3:** add `"./node_modules/@sendlit/email-editor"` to `content` in
+  your Tailwind config.
 
-The editor's look is a set of `--sle-*` CSS variables on the `.sle` element, so it can be re-skinned without touching the components. The styles are in `@sendlit/email-editor/styles.css`.
+## Built with
 
-Besides text, link, image and separator it ships `spacer`, `columns`, `social`, `html` and `conditional` blocks. A `conditional` block becomes a Liquid condition on `subscriber.tags` when rendered for sending; pass `showConditionals` to `renderEmailToHtml` to preview every section.
+[React](https://react.dev/), [React Email](https://react.email/),
+[shadcn/ui](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/).
 
-## Custom blocks
+## License
 
-Pass `blocks` to choose the block types: add your own, and leave out any of the built-in ones. A block can provide `quickEdit` (and `quickEditLayout`) for the compact popover shown while writing; its full `settings` form appears in Style mode. Paragraph-by-paragraph writing applies to the built-in `text` block only, so a registry without it, or with a host block named `text`, gets ordinary selectable blocks.
+MIT

From 169ede0a9e099894e517045b0c5f9d12432c8796 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 19:46:59 +0530
Subject: [PATCH 17/18] style: sort imports in files changed for #169

bun run format only formats; biome ci also checks import order.
---
 apps/web/components/dashboard/email-editor-screen.tsx   | 4 ++--
 apps/web/components/dashboard/sequence-email-editor.tsx | 2 +-
 packages/email-editor/src/blocks/columns/index.ts       | 2 +-
 packages/email-editor/src/blocks/conditional/index.ts   | 2 +-
 packages/email-editor/src/blocks/html/index.ts          | 2 +-
 packages/email-editor/src/blocks/index.ts               | 8 ++++----
 packages/email-editor/src/blocks/social/index.ts        | 2 +-
 packages/email-editor/src/blocks/spacer/index.ts        | 2 +-
 packages/email-editor/src/components/email-editor.tsx   | 2 +-
 packages/email-editor/src/components/inspector.tsx      | 4 ++--
 packages/email-editor/src/components/text-item.tsx      | 2 +-
 packages/email-editor/src/email-editor.tsx              | 2 +-
 packages/email-editor/src/index.ts                      | 2 +-
 packages/email-editor/src/lib/block-choices.ts          | 2 +-
 packages/email-editor/src/lib/checklist.test.ts         | 2 +-
 15 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/web/components/dashboard/email-editor-screen.tsx b/apps/web/components/dashboard/email-editor-screen.tsx
index 00a062c5..6b306043 100644
--- a/apps/web/components/dashboard/email-editor-screen.tsx
+++ b/apps/web/components/dashboard/email-editor-screen.tsx
@@ -21,8 +21,8 @@ import {
   type UploaderProps,
 } from "@sendlit/email-editor/blocks";
 import { Check, LogOut } from "lucide-react";
-import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
 import {
   type ReactNode,
   useCallback,
@@ -32,6 +32,7 @@ import {
   useState,
 } from "react";
 import { Banner } from "@/components/dashboard/banner";
+import { EmailImageUploadDialog } from "@/components/dashboard/email-image-upload-dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -42,7 +43,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { EmailImageUploadDialog } from "@/components/dashboard/email-image-upload-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/codelit/button";
 import { IconButton } from "@/components/ui/codelit/icon-button";
diff --git a/apps/web/components/dashboard/sequence-email-editor.tsx b/apps/web/components/dashboard/sequence-email-editor.tsx
index 64acf169..85e4140a 100644
--- a/apps/web/components/dashboard/sequence-email-editor.tsx
+++ b/apps/web/components/dashboard/sequence-email-editor.tsx
@@ -10,9 +10,9 @@ import {
   type DeliverySourceSelection,
   getEventDefinition,
   getSequence,
-  updateSequence,
   listSendingOptions,
   type SendingOption,
+  updateSequence,
   updateSequenceEmail,
 } from "@/lib/api";
 import { ApiError } from "@/lib/api-client";
diff --git a/packages/email-editor/src/blocks/columns/index.ts b/packages/email-editor/src/blocks/columns/index.ts
index d527b946..2835fab3 100644
--- a/packages/email-editor/src/blocks/columns/index.ts
+++ b/packages/email-editor/src/blocks/columns/index.ts
@@ -1,8 +1,8 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { ColumnsBlock as block } from "./block";
 import { metadata } from "./metadata";
-import { ColumnsSettings as settings } from "./settings";
 import { ColumnsQuickEdit as quickEdit } from "./quick-edit";
+import { ColumnsSettings as settings } from "./settings";
 import type { ColumnsBlockSettings } from "./types";
 
 export const ColumnsBlock: BlockComponent<ColumnsBlockSettings> = {
diff --git a/packages/email-editor/src/blocks/conditional/index.ts b/packages/email-editor/src/blocks/conditional/index.ts
index c2ed5184..54f24218 100644
--- a/packages/email-editor/src/blocks/conditional/index.ts
+++ b/packages/email-editor/src/blocks/conditional/index.ts
@@ -1,8 +1,8 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { ConditionalBlock as block } from "./block";
 import { metadata } from "./metadata";
-import { ConditionalSettings as settings } from "./settings";
 import { ConditionalQuickEdit as quickEdit } from "./quick-edit";
+import { ConditionalSettings as settings } from "./settings";
 import type { ConditionalBlockSettings } from "./types";
 
 export { isValidConditionTag } from "./types";
diff --git a/packages/email-editor/src/blocks/html/index.ts b/packages/email-editor/src/blocks/html/index.ts
index 9a9bfc30..15bb9381 100644
--- a/packages/email-editor/src/blocks/html/index.ts
+++ b/packages/email-editor/src/blocks/html/index.ts
@@ -1,8 +1,8 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { HtmlBlock as block } from "./block";
 import { metadata } from "./metadata";
-import { HtmlSettings as settings } from "./settings";
 import { HtmlQuickEdit as quickEdit } from "./quick-edit";
+import { HtmlSettings as settings } from "./settings";
 import type { HtmlBlockSettings } from "./types";
 
 export const HtmlBlock: BlockComponent<HtmlBlockSettings> = {
diff --git a/packages/email-editor/src/blocks/index.ts b/packages/email-editor/src/blocks/index.ts
index 5f86da95..f044834f 100644
--- a/packages/email-editor/src/blocks/index.ts
+++ b/packages/email-editor/src/blocks/index.ts
@@ -1,3 +1,6 @@
+export { ColumnsBlock as Columns } from "./columns";
+export { ConditionalBlock as Conditional } from "./conditional";
+export { HtmlBlock as HtmlSnippet } from "./html";
 export { ImageBlock, ImageBlock as Image } from "./image";
 export type { ImageSettingsProps } from "./image/settings";
 export type {
@@ -9,9 +12,6 @@ export type {
 } from "./image/types";
 export { LinkBlock as Link } from "./link";
 export { SeparatorBlock as Separator } from "./separator";
-export { TextBlock as Text } from "./text";
-export { ColumnsBlock as Columns } from "./columns";
-export { ConditionalBlock as Conditional } from "./conditional";
-export { HtmlBlock as HtmlSnippet } from "./html";
 export { SocialBlock as Social } from "./social";
 export { SpacerBlock as Spacer } from "./spacer";
+export { TextBlock as Text } from "./text";
diff --git a/packages/email-editor/src/blocks/social/index.ts b/packages/email-editor/src/blocks/social/index.ts
index 4f6eae11..b35042d8 100644
--- a/packages/email-editor/src/blocks/social/index.ts
+++ b/packages/email-editor/src/blocks/social/index.ts
@@ -1,8 +1,8 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { SocialBlock as block } from "./block";
 import { metadata } from "./metadata";
-import { SocialSettings as settings } from "./settings";
 import { SocialQuickEdit as quickEdit } from "./quick-edit";
+import { SocialSettings as settings } from "./settings";
 import type { SocialBlockSettings } from "./types";
 
 export const SocialBlock: BlockComponent<SocialBlockSettings> = {
diff --git a/packages/email-editor/src/blocks/spacer/index.ts b/packages/email-editor/src/blocks/spacer/index.ts
index dcaa775a..4881dc08 100644
--- a/packages/email-editor/src/blocks/spacer/index.ts
+++ b/packages/email-editor/src/blocks/spacer/index.ts
@@ -1,8 +1,8 @@
 import type { BlockComponent } from "@/types/block-registry";
 import { SpacerBlock as block } from "./block";
 import { metadata } from "./metadata";
-import { SpacerSettings as settings } from "./settings";
 import { SpacerQuickEdit as quickEdit } from "./quick-edit";
+import { SpacerSettings as settings } from "./settings";
 import type { SpacerBlockSettings } from "./types";
 
 export const SpacerBlock: BlockComponent<SpacerBlockSettings> = {
diff --git a/packages/email-editor/src/components/email-editor.tsx b/packages/email-editor/src/components/email-editor.tsx
index 857c408f..6180dc7e 100644
--- a/packages/email-editor/src/components/email-editor.tsx
+++ b/packages/email-editor/src/components/email-editor.tsx
@@ -38,8 +38,8 @@ import {
   toRows,
 } from "../lib/text-items";
 import type { BlockRegistry } from "../types/block-registry";
-import type { Email, EmailBlock, EmailStyle } from "../types/email-editor";
 import type { BlockChoice, EditorTheme, EditorVariable } from "../types/editor-ui";
+import type { Email, EmailBlock, EmailStyle } from "../types/email-editor";
 import { BlockMenu } from "./block-menu";
 import { BlockRow, ItemRow, type RowEvents } from "./block-row";
 import { Checklist } from "./checklist";
diff --git a/packages/email-editor/src/components/inspector.tsx b/packages/email-editor/src/components/inspector.tsx
index 821bcb90..87ebde14 100644
--- a/packages/email-editor/src/components/inspector.tsx
+++ b/packages/email-editor/src/components/inspector.tsx
@@ -1,14 +1,14 @@
 import { Check, Copy, PenLine, Search } from "lucide-react";
 import { type KeyboardEvent, useId, useState } from "react";
-import { activePalette, type Palette, PALETTES } from "../lib/palettes";
+import { activePalette, PALETTES, type Palette } from "../lib/palettes";
 import type { BlockRegistry } from "../types/block-registry";
+import type { EditorVariable } from "../types/editor-ui";
 import type {
   Email,
   EmailBlock,
   EmailStyle,
   RuntimeEmailBlock,
 } from "../types/email-editor";
-import type { EditorVariable } from "../types/editor-ui";
 import { EmailSettings } from "./email-settings";
 
 type Tab = "email" | "block" | "variables";
diff --git a/packages/email-editor/src/components/text-item.tsx b/packages/email-editor/src/components/text-item.tsx
index 3c54db7a..9050ba42 100644
--- a/packages/email-editor/src/components/text-item.tsx
+++ b/packages/email-editor/src/components/text-item.tsx
@@ -28,8 +28,8 @@ import {
 } from "../lib/markdown-edit";
 import { type MenuPlacement, placeMenu } from "../lib/menu-placement";
 import { type ItemKind, itemMarkdown, parseItem, SHORTCUTS } from "../lib/text-items";
-import type { EmailStyle } from "../types/email-editor";
 import type { BlockChoice, EditorVariable } from "../types/editor-ui";
+import type { EmailStyle } from "../types/email-editor";
 import { BlockMenu, VariableMenu } from "./block-menu";
 
 type Menu = { kind: "slash"; query: string } | { kind: "variable" } | null;
diff --git a/packages/email-editor/src/email-editor.tsx b/packages/email-editor/src/email-editor.tsx
index 2fe80bdc..9d711ea5 100644
--- a/packages/email-editor/src/email-editor.tsx
+++ b/packages/email-editor/src/email-editor.tsx
@@ -10,8 +10,8 @@ import {
   Text,
 } from "@/blocks";
 import type { BlockComponent, BlockRegistry } from "@/types/block-registry";
-import type { Email } from "@/types/email-editor";
 import type { EditorTheme, EditorVariable } from "@/types/editor-ui";
+import type { Email } from "@/types/email-editor";
 import { EmailEditor as EmailEditorComponent } from "./components/email-editor";
 
 interface EmailEditorProps<TRenderContext = any> {
diff --git a/packages/email-editor/src/index.ts b/packages/email-editor/src/index.ts
index bf4c6ffe..544439cd 100644
--- a/packages/email-editor/src/index.ts
+++ b/packages/email-editor/src/index.ts
@@ -5,7 +5,6 @@ export type {
   UploaderProps,
 } from "./blocks/image/types";
 export { EmailEditor } from "./email-editor";
-export type { EditorTheme, EditorVariable } from "./types/editor-ui";
 export { defaultEmail } from "./lib/default-email";
 export { renderEmailToHtml } from "./lib/email-renderer";
 export { normalizeEmail } from "./lib/normalize-email";
@@ -16,6 +15,7 @@ export type {
   BlockPlacement,
   BlockRegistry,
 } from "./types/block-registry";
+export type { EditorTheme, EditorVariable } from "./types/editor-ui";
 export type {
   BlockRenderProps,
   BlockSettingsProps,
diff --git a/packages/email-editor/src/lib/block-choices.ts b/packages/email-editor/src/lib/block-choices.ts
index 92cc7075..291acc22 100644
--- a/packages/email-editor/src/lib/block-choices.ts
+++ b/packages/email-editor/src/lib/block-choices.ts
@@ -7,8 +7,8 @@ import {
   Pilcrow,
   TextQuote,
 } from "lucide-react";
-import type { BlockChoice } from "../types/editor-ui";
 import type { BlockRegistry } from "../types/block-registry";
+import type { BlockChoice } from "../types/editor-ui";
 import { getInsertableBlocks } from "./block-policy";
 
 const TEXT_CHOICES: BlockChoice[] = [
diff --git a/packages/email-editor/src/lib/checklist.test.ts b/packages/email-editor/src/lib/checklist.test.ts
index 89c00642..3e5990eb 100644
--- a/packages/email-editor/src/lib/checklist.test.ts
+++ b/packages/email-editor/src/lib/checklist.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "bun:test";
+import type { Email } from "../types/email-editor";
 import { checklistLabel, computeChecklist } from "./checklist";
 import { defaultEmail } from "./default-email";
-import type { Email } from "../types/email-editor";
 
 function email(content: Email["content"], previewText = "A preview"): Email {
   return {

From 32777538aa96c9e4b0ecf2e316a1098659028e25 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@sub.rajatsaxena.dev>
Date: Mon, 2 Nov 2026 22:34:14 +0530
Subject: [PATCH 18/18] feat(email-editor): fonts are set for the whole email,
 not per block (#169)

Blocks no longer carry their own font. Text, link and footer blocks use the
email's typography, the text block loses its Font Family setting, and the
built-in templates drop their per-block fonts. A font saved on an older block
is ignored; the API still accepts it on footers so older templates save.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/api/src/templates/system-templates.ts    | 19 -----------
 apps/api/src/templates/validation.ts          |  2 ++
 packages/email-blocks/src/footer/block.tsx    |  4 +--
 .../email-blocks/src/footer/footer.test.tsx   | 27 +++++++++++++++
 packages/email-blocks/src/footer/index.tsx    |  2 --
 packages/email-blocks/src/footer/types.ts     |  1 -
 packages/email-editor/README.md               |  3 +-
 .../email-editor/src/blocks/link/block.tsx    | 10 ++----
 .../email-editor/src/blocks/text/block.tsx    |  1 -
 .../email-editor/src/blocks/text/metadata.ts  |  2 --
 .../email-editor/src/blocks/text/settings.tsx | 18 ----------
 .../email-editor/src/blocks/text/types.ts     |  1 -
 .../email-editor/src/components/text-item.tsx |  8 ++---
 .../src/lib/email-renderer.test.tsx           | 34 +++++++++++++++++++
 .../email-editor/src/lib/markdown-content.tsx | 12 +++----
 15 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/apps/api/src/templates/system-templates.ts b/apps/api/src/templates/system-templates.ts
index 157de340..eb3a0f4a 100644
--- a/apps/api/src/templates/system-templates.ts
+++ b/apps/api/src/templates/system-templates.ts
@@ -114,7 +114,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           settings: {
             content: "# Make your next announcement feel premium",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "26px",
             foregroundColor: "#111827",
             paddingTop: "8px",
@@ -127,7 +126,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "This layout is designed for launches, waitlist openings, seasonal updates, and event drops where the headline and CTA need to carry the message clearly.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "17px",
             lineHeight: "1.7",
             foregroundColor: "#475569",
@@ -170,7 +168,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "## Why this template works\n\n- Fast visual hierarchy.\n- Clean body copy.\n- Strong CTA treatment.\n- Enough polish to feel current without being overdesigned.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "16px",
             lineHeight: "1.7",
             foregroundColor: "#111827",
@@ -189,7 +186,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           },
         },
         createFooterEmailBlock({
-          fontFamily: "Helvetica, sans-serif",
           paddingTop: "0px",
           paddingBottom: "0px",
         }),
@@ -267,7 +263,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           settings: {
             content: "# Welcome aboard",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "26px",
             foregroundColor: "#111827",
             paddingTop: "6px",
@@ -280,7 +275,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "Thanks for joining us. This template works well for onboarding, first-touch education, getting-started checklists, and setting expectations for what comes next.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "17px",
             lineHeight: "1.7",
             foregroundColor: "#475569",
@@ -313,7 +307,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "## What to do next\n\n- Complete your profile or setup.\n- Explore your dashboard or core feature.\n- Save this email for quick access later.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "16px",
             lineHeight: "1.7",
             foregroundColor: "#111827",
@@ -332,7 +325,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           },
         },
         createFooterEmailBlock({
-          fontFamily: "Helvetica, sans-serif",
           paddingTop: "0px",
           paddingBottom: "0px",
         }),
@@ -411,7 +403,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           settings: {
             content: "# Products your customers are ready to buy next",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "26px",
             foregroundColor: "#0f172a",
             paddingTop: "8px",
@@ -424,7 +415,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "Use this for upgrades, bundles, complementary offers, limited-time incentives, and premium add-ons that naturally follow an initial purchase.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "17px",
             lineHeight: "1.7",
             foregroundColor: "#475569",
@@ -457,7 +447,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "## Why this converts\n\n- Relevant add-on recommendation.\n- Clear next step.\n- A premium but simple visual treatment.\n- Plenty of room for benefits, pricing, or testimonials.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "16px",
             lineHeight: "1.7",
             foregroundColor: "#0f172a",
@@ -476,7 +465,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           },
         },
         createFooterEmailBlock({
-          fontFamily: "Helvetica, sans-serif",
           paddingTop: "0px",
           paddingBottom: "0px",
         }),
@@ -551,7 +539,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           settings: {
             content: "# What happened this week",
             alignment: "left",
-            fontFamily: "Arial, sans-serif",
             fontSize: "26px",
             foregroundColor: "#0f172a",
             paddingTop: "10px",
@@ -564,7 +551,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "Use this for curated updates, editorial roundups, key announcements, and useful links your audience will want to save.",
             alignment: "left",
-            fontFamily: "Arial, sans-serif",
             fontSize: "17px",
             lineHeight: "1.7",
             foregroundColor: "#475569",
@@ -588,7 +574,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "## Featured update\n\nShare the biggest story or insight first. A short explanation plus one strong CTA is usually enough.",
             alignment: "left",
-            fontFamily: "Arial, sans-serif",
             fontSize: "16px",
             lineHeight: "1.7",
             foregroundColor: "#0f172a",
@@ -621,7 +606,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "## Also inside\n\n- A quick tip or takeaway.\n- One resource worth sharing.\n- A subtle CTA to your offer or archive.",
             alignment: "left",
-            fontFamily: "Arial, sans-serif",
             fontSize: "16px",
             lineHeight: "1.7",
             foregroundColor: "#0f172a",
@@ -640,7 +624,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           },
         },
         createFooterEmailBlock({
-          fontFamily: "Arial, sans-serif",
           paddingTop: "0px",
           paddingBottom: "0px",
         }),
@@ -714,7 +697,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
             content:
               "# Start writing here\n\nAdd your message, links, and call to action.",
             alignment: "left",
-            fontFamily: "Helvetica, sans-serif",
             fontSize: "16px",
             foregroundColor: "#111827",
             paddingTop: "12px",
@@ -722,7 +704,6 @@ const MARKETING_SYSTEM_TEMPLATES: Array<
           },
         },
         createFooterEmailBlock({
-          fontFamily: "Helvetica, sans-serif",
           paddingTop: "8px",
           paddingBottom: "0px",
         }),
diff --git a/apps/api/src/templates/validation.ts b/apps/api/src/templates/validation.ts
index a553f6d9..b29a30f0 100644
--- a/apps/api/src/templates/validation.ts
+++ b/apps/api/src/templates/validation.ts
@@ -2,6 +2,8 @@ import { emailContentInputSchema, type TemplatePurpose } from "@sendlit/api-cont
 import type { Email, EmailBlock } from "@sendlit/email-editor";
 import { discoverRequiredTemplateVariables } from "../mail/render";
 
+// fontFamily is still accepted so older templates save, but the footer now
+// uses the email's text font and ignores it.
 const FOOTER_SETTINGS = new Set([
   "alignment",
   "fontFamily",
diff --git a/packages/email-blocks/src/footer/block.tsx b/packages/email-blocks/src/footer/block.tsx
index 4213f77c..145f27bc 100644
--- a/packages/email-blocks/src/footer/block.tsx
+++ b/packages/email-blocks/src/footer/block.tsx
@@ -4,6 +4,7 @@ import type { FooterSettings, SendLitEmailRenderContext } from "./types";
 
 export function FooterBlock({
   block,
+  style,
   renderContext,
   unsubscribeLabel,
   viewInBrowserLabel,
@@ -18,7 +19,6 @@ export function FooterBlock({
 
   const {
     alignment = "center",
-    fontFamily = "Arial, sans-serif",
     fontSize = "12px",
     foregroundColor = "#64748b",
     backgroundColor = "transparent",
@@ -39,7 +39,7 @@ export function FooterBlock({
         boxSizing: "border-box",
         width: "100%",
         textAlign: alignment,
-        fontFamily,
+        fontFamily: style?.typography.text.fontFamily || "Arial, sans-serif",
         fontSize,
         color: foregroundColor,
         backgroundColor,
diff --git a/packages/email-blocks/src/footer/footer.test.tsx b/packages/email-blocks/src/footer/footer.test.tsx
index d61de643..0e9c9bbf 100644
--- a/packages/email-blocks/src/footer/footer.test.tsx
+++ b/packages/email-blocks/src/footer/footer.test.tsx
@@ -129,6 +129,33 @@ describe("SendLit footer block", () => {
     expect(html).toContain("footer_render_context_required");
   });
 
+  it("uses the email's text font, not one saved on the footer", async () => {
+    const email = emailWithFooter();
+    const html = await renderEmailToHtml({
+      email: {
+        ...email,
+        style: {
+          ...email.style,
+          typography: {
+            ...email.style.typography,
+            text: { ...email.style.typography.text, fontFamily: "Georgia, serif" },
+          },
+        },
+        content: [{ blockType: "footer", settings: { fontFamily: "Courier" } }],
+      },
+      blocks: [footer],
+      renderContext: {
+        footer: {
+          mailingAddress: "123 Main Street",
+          unsubscribeUrl: "https://example.com/unsubscribe/token",
+        },
+      },
+    });
+
+    expect(html).toContain("Georgia, serif");
+    expect(html).not.toContain("Courier");
+  });
+
   it("is a locked final-placement add-on", () => {
     expect(footer.capabilities).toEqual({
       insertable: false,
diff --git a/packages/email-blocks/src/footer/index.tsx b/packages/email-blocks/src/footer/index.tsx
index 04a45754..daa5103a 100644
--- a/packages/email-blocks/src/footer/index.tsx
+++ b/packages/email-blocks/src/footer/index.tsx
@@ -10,7 +10,6 @@ import type {
 
 export const DEFAULT_FOOTER_SETTINGS: FooterSettings = {
   alignment: "center",
-  fontFamily: "Arial, sans-serif",
   fontSize: "12px",
   foregroundColor: "#64748b",
   backgroundColor: "transparent",
@@ -40,7 +39,6 @@ export function createFooterBlock({
       docs: {
         settings: {
           alignment: "Footer content alignment.",
-          fontFamily: "Footer font family.",
           fontSize: "Footer font size in pixels.",
           foregroundColor: "Footer text and link color.",
           backgroundColor: "Footer background color.",
diff --git a/packages/email-blocks/src/footer/types.ts b/packages/email-blocks/src/footer/types.ts
index 639b3e6a..930c8207 100644
--- a/packages/email-blocks/src/footer/types.ts
+++ b/packages/email-blocks/src/footer/types.ts
@@ -1,6 +1,5 @@
 export interface FooterSettings {
   alignment?: "left" | "center" | "right";
-  fontFamily?: string;
   fontSize?: `${number}px`;
   foregroundColor?: `#${string}`;
   backgroundColor?: `#${string}` | "transparent";
diff --git a/packages/email-editor/README.md b/packages/email-editor/README.md
index 7a596960..d40738d0 100644
--- a/packages/email-editor/README.md
+++ b/packages/email-editor/README.md
@@ -90,7 +90,8 @@ correctly.
 **Style** mode is for the look:
 
 - Pick a palette (Default, Warm, Forest, Mono, Plain or Night) or set your own
-  colours and fonts.
+  colours and fonts. Fonts apply to the whole email; blocks don't have their
+  own.
 - Select a block to change its settings.
 - Preview on desktop or mobile, with sample data, or in a dark-mode inbox.
 
diff --git a/packages/email-editor/src/blocks/link/block.tsx b/packages/email-editor/src/blocks/link/block.tsx
index fe3bf76c..289c8330 100644
--- a/packages/email-editor/src/blocks/link/block.tsx
+++ b/packages/email-editor/src/blocks/link/block.tsx
@@ -58,10 +58,7 @@ export function LinkBlock({ block, style }: LinkBlockProps) {
                 buttonBorderWidth !== "0px"
                   ? `${buttonBorderWidth} ${buttonBorderStyle} ${buttonBorderColor}`
                   : "none",
-              fontFamily:
-                block.settings.fontFamily ||
-                style?.typography.link.fontFamily ||
-                "Arial, sans-serif",
+              fontFamily: style?.typography.link.fontFamily || "Arial, sans-serif",
               lineHeight:
                 block.settings.lineHeight || style?.typography.link.lineHeight || "1.5",
               maxWidth: "100%",
@@ -92,10 +89,7 @@ export function LinkBlock({ block, style }: LinkBlockProps) {
             textDecoration,
             display: "inline-block", // Ensure the link is selectable even when empty
             padding: "4px 0", // Add minimal padding to ensure the link is clickable
-            fontFamily:
-              block.settings.fontFamily ||
-              style?.typography.link.fontFamily ||
-              "Arial, sans-serif",
+            fontFamily: style?.typography.link.fontFamily || "Arial, sans-serif",
             lineHeight:
               block.settings.lineHeight || style?.typography.link.lineHeight || "1.5",
           }}
diff --git a/packages/email-editor/src/blocks/text/block.tsx b/packages/email-editor/src/blocks/text/block.tsx
index 1c3efb7e..4bfab268 100644
--- a/packages/email-editor/src/blocks/text/block.tsx
+++ b/packages/email-editor/src/blocks/text/block.tsx
@@ -36,7 +36,6 @@ export function TextBlock({ block, style, selectedBlockId }: TextBlockProps) {
           content={content}
           style={style}
           options={{
-            fontFamily: block.settings.fontFamily,
             fontSize: block.settings.fontSize,
             lineHeight: block.settings.lineHeight,
             letterSpacing: block.settings.letterSpacing,
diff --git a/packages/email-editor/src/blocks/text/metadata.ts b/packages/email-editor/src/blocks/text/metadata.ts
index f62b1aa6..ff104b56 100644
--- a/packages/email-editor/src/blocks/text/metadata.ts
+++ b/packages/email-editor/src/blocks/text/metadata.ts
@@ -11,8 +11,6 @@ export const metadata: BlockMetadata = {
       content: "The text content to display. Use markdown to format the text.",
       alignment:
         "[Optional] The alignment of the text. Range: left, center, right, justify. Default: left",
-      fontFamily:
-        "[Optional] The font family to use. Range: Arial, Helvetica, Verdana, Georgia, Times New Roman, Monospace. Default: Arial, sans-serif",
       fontSize: "The font size to use. Format: 12px. Range: 12-48. Default: 16px",
       lineHeight: "The line height to use. Values: 1, 1.2, 1.5, 1.8, 2. Default: 1.5",
       foregroundColor: "[Optional] The color of the text. Format: #000000",
diff --git a/packages/email-editor/src/blocks/text/settings.tsx b/packages/email-editor/src/blocks/text/settings.tsx
index 337d68cc..06303274 100644
--- a/packages/email-editor/src/blocks/text/settings.tsx
+++ b/packages/email-editor/src/blocks/text/settings.tsx
@@ -44,16 +44,6 @@ export function TextSettings({ block, style, updateBlock }: TextSettingsProps) {
     { value: "48px", label: "48px" },
   ];
 
-  // Font family options
-  const fontFamilyOptions = [
-    { value: "Arial, sans-serif", label: "Arial" },
-    { value: "Helvetica, sans-serif", label: "Helvetica" },
-    { value: "Georgia, serif", label: "Georgia" },
-    { value: "'Times New Roman', serif", label: "Times New Roman" },
-    { value: "Verdana, sans-serif", label: "Verdana" },
-    { value: "monospace", label: "Monospace" },
-  ];
-
   // Line height options
   const lineHeightOptions = [
     { value: "1", label: "1" },
@@ -89,14 +79,6 @@ export function TextSettings({ block, style, updateBlock }: TextSettingsProps) {
         defaultValue="left"
       />
 
-      <SettingsSelect
-        label="Font Family"
-        value={block.settings.fontFamily || ""}
-        onChange={(value) => handleSettingChange("fontFamily", value)}
-        options={fontFamilyOptions}
-        defaultValue=""
-      />
-
       <SettingsSelect
         label="Font Size"
         value={block.settings.fontSize || "16px"}
diff --git a/packages/email-editor/src/blocks/text/types.ts b/packages/email-editor/src/blocks/text/types.ts
index 9dfff7cf..d1e17b47 100644
--- a/packages/email-editor/src/blocks/text/types.ts
+++ b/packages/email-editor/src/blocks/text/types.ts
@@ -3,7 +3,6 @@ import type { CommonBlockSettings } from "@/types/email-editor";
 export interface TextBlockSettings extends CommonBlockSettings {
   content: string;
   alignment?: "left" | "center" | "right" | "justify";
-  fontFamily?: string;
   fontSize?: `${number}px`;
   lineHeight?: `${number}`;
 }
diff --git a/packages/email-editor/src/components/text-item.tsx b/packages/email-editor/src/components/text-item.tsx
index 9050ba42..c4f72972 100644
--- a/packages/email-editor/src/components/text-item.tsx
+++ b/packages/email-editor/src/components/text-item.tsx
@@ -90,11 +90,9 @@ export function itemStyle(
         ? "1.5em 10px"
         : "0 0 16px";
   return {
-    fontFamily:
-      settings.fontFamily ||
-      (heading
-        ? style?.typography.header.fontFamily
-        : style?.typography.text.fontFamily),
+    fontFamily: heading
+      ? style?.typography.header.fontFamily
+      : style?.typography.text.fontFamily,
     fontSize,
     fontWeight: heading ? 700 : undefined,
     lineHeight: heading
diff --git a/packages/email-editor/src/lib/email-renderer.test.tsx b/packages/email-editor/src/lib/email-renderer.test.tsx
index 6a9a62fb..3e2b410a 100644
--- a/packages/email-editor/src/lib/email-renderer.test.tsx
+++ b/packages/email-editor/src/lib/email-renderer.test.tsx
@@ -213,3 +213,37 @@ describe("new blocks", () => {
     expect(html).not.toContain("{% if");
   });
 });
+
+describe("fonts", () => {
+  it("uses the email's fonts and ignores a font saved on a block", async () => {
+    const html = await renderEmailToHtml({
+      email: {
+        ...defaultEmail,
+        style: {
+          ...defaultEmail.style,
+          typography: {
+            ...defaultEmail.style.typography,
+            text: {
+              ...defaultEmail.style.typography.text,
+              fontFamily: "Georgia, serif",
+            },
+            link: {
+              ...defaultEmail.style.typography.link,
+              fontFamily: "Verdana, sans-serif",
+            },
+          },
+        },
+        content: [
+          { blockType: "text", settings: { content: "Hello", fontFamily: "Courier" } },
+          {
+            blockType: "link",
+            settings: { text: "Go", url: "https://example.com", fontFamily: "Courier" },
+          },
+        ],
+      },
+    });
+    expect(html).toContain("Georgia, serif");
+    expect(html).toContain("Verdana, sans-serif");
+    expect(html).not.toContain("Courier");
+  });
+});
diff --git a/packages/email-editor/src/lib/markdown-content.tsx b/packages/email-editor/src/lib/markdown-content.tsx
index f831bf1d..04b6ec52 100644
--- a/packages/email-editor/src/lib/markdown-content.tsx
+++ b/packages/email-editor/src/lib/markdown-content.tsx
@@ -3,7 +3,6 @@ import { blend } from "@/lib/palettes";
 import type { EmailStyle } from "@/types/email-editor";
 
 export interface MarkdownContentOptions {
-  fontFamily?: string;
   fontSize?: string;
   lineHeight?: string;
   letterSpacing?: string;
@@ -15,7 +14,8 @@ export interface MarkdownContentOptions {
 /**
  * Renders email markdown with the email's typography. Shared by every block
  * that holds markdown (text, columns, conditional section) so they all look
- * the same in the editor, the preview and the sent email.
+ * the same in the editor, the preview and the sent email. Fonts come only from
+ * the email's typography, never from a block.
  */
 export function MarkdownContent({
   content,
@@ -27,8 +27,7 @@ export function MarkdownContent({
   options?: MarkdownContentOptions;
 }) {
   const commonTextStyles = {
-    fontFamily:
-      options.fontFamily || style?.typography.text.fontFamily || "Arial, sans-serif",
+    fontFamily: style?.typography.text.fontFamily || "Arial, sans-serif",
     fontSize: options.fontSize || style?.typography.text.fontSize || "16px",
     lineHeight: options.lineHeight || style?.typography.text.lineHeight || "1.5",
     letterSpacing:
@@ -39,8 +38,7 @@ export function MarkdownContent({
       options.textDecoration || style?.typography.text.textDecoration || "none",
   };
 
-  const headerFontFamily =
-    options.fontFamily || style?.typography.header.fontFamily || "Arial, sans-serif";
+  const headerFontFamily = style?.typography.header.fontFamily || "Arial, sans-serif";
   const baseSize = Number.parseInt(options.fontSize || "16", 10);
   const heading = (multiplier: number, minimum: number) => ({
     fontWeight: "bold",
@@ -94,7 +92,7 @@ export function MarkdownContent({
         },
       }}
       markdownContainerStyles={{
-        fontFamily: options.fontFamily || "Arial, sans-serif",
+        fontFamily: commonTextStyles.fontFamily,
         textAlign: options.alignment || "left",
         fontSize: options.fontSize || "16px",
         lineHeight: options.lineHeight || "1.5",