mail-editor-pancake 0.0.0 → 0.0.8

package/packages/core/src/editor/RightPanel.ts

@@ -2,18 +2,30 @@ import { EditorView, basicSetup } from 'codemirror';
 import { html as cmHtml } from '@codemirror/lang-html';
 import { EditorState } from '@codemirror/state';
 import type { Registry } from '../registry/registry';
-import { findBlockLocation, findSection, type Store, type DocChangedDetail } from '../store/store';
+import {
+  findBlockLocation,
+  findSection,
+  isTwoColumnLayout,
+  setSectionLayout,
+  type Store,
+  type DocChangedDetail,
+} from '../store/store';
 import type {
   Block,
   BlockSchemaField,
   EditorUiOptions,
   EmailDoc,
   Section,
+  SectionLayout,
 } from '../types';
 import { defaultSocialIconBackground } from '../socialDefaults';
+import { bindColorPickerInput } from './ColorPickerPopover';
+import { normalizeAccentHex } from '../utils/accentColor';
 import { clear, h } from '../utils/dom';
 import { metaWidthInputString, parseMetaWidthFromUserInput, parseSectionWidthFromUserInput, sectionWidthInputString } from '../utils/contentWidth';
+import { FONT_WEIGHT_STEP_OPTIONS, normalizeFontWeightStep } from '../utils/fontWeightSteps';
 import type { ImageAssetsHandlers, ImageFieldContext } from './imageAssets';
+import { FocusBreadcrumb } from './FocusBreadcrumb';
 import { openImageGalleryModal } from './ImageGalleryModal';
 
 /** 与社交组 block 中每行元素结构一致（core 不依赖 blocks） */
@@ -47,6 +59,12 @@ function layoutWidthNumeric(raw: string, mode: 'px' | '%'): number {
 export interface RightPanelOptions {
   store: Store;
   registry: Registry;
+  /** 聚焦路径根节点文案（文档级），默认「邮件」 */
+  docRootLabel?: string;
+  /** 点击路径中的 Section 层级 */
+  onFocusSection: (sectionId: string) => void;
+  /** 点击路径中的文档级层级（等同 Esc 从 Section 上浮） */
+  onFocusDocument: () => void;
   /**
    * 可选。配置后，schema 中 `type: 'image'` 的字段会显示「上传 / 图床」按钮并调用对应回调。
    */
@@ -64,6 +82,9 @@ type RightTab = 'props' | 'code';
 export class RightPanel {
   el: HTMLElement;
   private opts: RightPanelOptions;
+  private headEl: HTMLElement;
+  private contentEl: HTMLElement;
+  private focusCrumb: FocusBreadcrumb;
   private currentTab: RightTab = 'props';
   private codeView: EditorView | null = null;
 
@@ -78,6 +99,17 @@ export class RightPanel {
   constructor(opts: RightPanelOptions) {
     this.opts = opts;
     this.el = h('aside', { class: 'sm-panel sm-panel--right' });
+    this.focusCrumb = new FocusBreadcrumb({
+      store: opts.store,
+      registry: opts.registry,
+      docRootLabel: opts.docRootLabel ?? '邮件',
+      onFocusDocument: () => opts.onFocusDocument(),
+      onFocusSection: (id) => opts.onFocusSection(id),
+    });
+    this.headEl = h('div', { class: 'sm-panel__head' }, [this.focusCrumb.el]);
+    this.contentEl = h('div', { class: 'sm-panel__body' });
+    this.el.append(this.headEl, this.contentEl);
+    this._syncHeadVisibility();
     this._render();
     opts.store.subscribe((detail?: DocChangedDetail) => {
       if (detail?.source === 'history') {
@@ -94,10 +126,17 @@ export class RightPanel {
     });
     opts.store.subscribeSelection(() => {
       this.currentTab = 'props';
+      this._syncHeadVisibility();
       this._render();
     });
   }
 
+  /** 文档级（无选中）时不展示面包屑，避免与「邮件设置」标题重复 */
+  private _syncHeadVisibility() {
+    const show = !!this.opts.store.selection;
+    this.headEl.hidden = !show;
+  }
+
   /** 焦点在右栏可编辑控件上时不要整栏重渲染（避免输入/CodeMirror 失焦） */
   private _shouldSkipRenderBecauseFocused(): boolean {
     const ae = document.activeElement as HTMLElement | null;
@@ -143,20 +182,20 @@ export class RightPanel {
 
   private _render() {
     this._destroyCodeView();
-    clear(this.el);
+    clear(this.contentEl);
 
     const sel = this.opts.store.selection;
     const doc = this.opts.store.doc;
 
     if (!sel) {
-      this.el.append(this._renderDocForm(doc));
+      this.contentEl.append(this._renderDocForm(doc));
       return;
     }
 
     if (sel.kind === 'section') {
       const section = findSection(doc, sel.sectionId);
       if (!section) return;
-      this.el.append(this._renderSectionForm(section));
+      this.contentEl.append(this._renderSectionForm(section));
       return;
     }
 
@@ -167,8 +206,8 @@ export class RightPanel {
         this._tabBtn('props', '属性'),
         this._tabBtn('code', '代码'),
       ]);
-      this.el.append(tabs);
-      this.el.append(
+      this.contentEl.append(tabs);
+      this.contentEl.append(
         h('div', { class: 'sm-empty-form' }, ['该组件可能已被删除，请重新选中画布中的块。']),
       );
       return;
@@ -179,11 +218,11 @@ export class RightPanel {
       this._tabBtn('props', '属性'),
       this._tabBtn('code', '代码'),
     ]);
-    this.el.append(tabs);
+    this.contentEl.append(tabs);
 
     if (this.currentTab === 'props') {
       if (loc.block.lockedMjml) {
-        this.el.append(
+        this.contentEl.append(
           h('div', { class: 'sm-empty-form' }, [
             '该组件已被代码模式锁定。',
             h('div', { style: 'margin-top:8px;' }, [
@@ -205,14 +244,14 @@ export class RightPanel {
           ]),
         );
       } else if (def) {
-        this.el.append(this._renderBlockForm(loc.block, def.schema));
+        this.contentEl.append(this._renderBlockForm(loc.block, def.schema));
       } else {
-        this.el.append(
+        this.contentEl.append(
           h('div', { class: 'sm-empty-form' }, [`未注册的组件: ${loc.block.type}`]),
         );
       }
     } else {
-      this.el.append(this._renderBlockCodeView(loc.block));
+      this.contentEl.append(this._renderBlockCodeView(loc.block));
     }
   }
 
@@ -306,7 +345,7 @@ export class RightPanel {
         'doc:styles.fontSize',
       ),
       this._docFontWeightField(
-        doc.styles.fontWeight ?? 'normal',
+        doc.styles.fontWeight ?? '400',
         (v) =>
           this.opts.store.update((d) => {
             d.styles.fontWeight = v;
@@ -351,6 +390,19 @@ export class RightPanel {
     const a = section.attrs;
     return h('form', { class: 'sm-form', onsubmit: (e: Event) => e.preventDefault() }, [
       h('div', { class: 'sm-panel__title' }, ['Section 设置']),
+      ...(isTwoColumnLayout(section.layout)
+        ? [
+            this._twoColumnRatioField(
+              section.layout,
+              (layout) =>
+                this.opts.store.update((d) => {
+                  const s = findSection(d, section.id);
+                  if (s) setSectionLayout(s, layout);
+                }),
+              `section:${section.id}:layout`,
+            ),
+          ]
+        : []),
       this._colorField(
         '背景色',
         a.backgroundColor ?? '',
@@ -360,6 +412,7 @@ export class RightPanel {
             if (s) s.attrs.backgroundColor = v || undefined;
           }),
         `section:${section.id}:attrs.bg`,
+        '留空=透明',
       ),
       this._layoutWidthField(
         '区域宽度',
@@ -439,12 +492,16 @@ export class RightPanel {
   private _field(field: BlockSchemaField, block: Block): HTMLElement {
     const blockId = block.id;
     const fp = `block:${blockId}:${field.key}`;
-    const value = (block.props as any)[field.key];
+    const def = this.opts.registry.get(block.type);
+    const defaults = def?.defaultProps as Record<string, unknown> | undefined;
+    const raw = (block.props as Record<string, unknown>)[field.key];
+    const value: unknown =
+      raw !== undefined && raw !== null ? raw : defaults?.[field.key];
     const onChange = (v: any) => this._updateBlock(blockId, field.key, v);
 
     switch (field.type) {
       case 'textarea':
-        return this._textareaField(field.label, value ?? '', onChange, field.help, fp);
+        return this._textareaField(field.label, String(value ?? ''), onChange, field.help, fp);
       case 'number':
         return this._numberField(
           field.label,
@@ -455,16 +512,54 @@ export class RightPanel {
           field.step ?? 1,
           fp,
         );
-      case 'color':
-        return this._colorField(field.label, value ?? '', onChange, fp);
-      case 'select':
-        return this._selectField(field.label, value ?? '', field.options ?? [], onChange, fp);
+      case 'color': {
+        const rawColor = (block.props as Record<string, unknown>)[field.key];
+        const stored =
+          rawColor !== undefined && rawColor !== null ? String(rawColor).trim() : '';
+        return this._colorField(
+          field.label,
+          stored,
+          (v) => onChange(v.trim()),
+          fp,
+          field.placeholder ?? '',
+        );
+      }
+      case 'select': {
+        const isFw = field.key === 'fontWeight' || field.key === 'labelFontWeight';
+        const opts = field.options?.length
+          ? field.options
+          : isFw
+            ? FONT_WEIGHT_STEP_OPTIONS
+            : [];
+        if (isFw && field.inheritGlobal) {
+          const stored =
+            raw !== undefined && raw !== null ? String(raw).trim() : '';
+          return this._fontWeightInheritField(
+            field.label,
+            stored,
+            normalizeFontWeightStep(this.opts.store.doc.styles.fontWeight),
+            (v) => onChange(v),
+            fp,
+            opts,
+            field.help,
+          );
+        }
+        const displayVal = isFw
+          ? normalizeFontWeightStep(String(value ?? ''))
+          : String(value ?? '');
+        if (isFw || field.selectVariant === 'segmented') {
+          const el = this._segmentedSelectField(field.label, displayVal, opts, onChange, fp);
+          if (field.help) el.append(h('div', { class: 'sm-field__help' }, [field.help]));
+          return el;
+        }
+        return this._selectField(field.label, displayVal, opts, onChange, fp);
+      }
       case 'switch':
         return this._switchField(field.label, !!value, onChange, field.help, fp);
       case 'image':
         return this._imageField(
           field.label,
-          value ?? '',
+          String(value ?? ''),
           onChange,
           field.placeholder ?? 'https://',
           fp,
@@ -473,32 +568,33 @@ export class RightPanel {
       case 'url':
       case 'text': {
         if (field.key === 'width' && this._preferSliderControls()) {
-          const el = this._layoutWidthField(
+          return this._layoutWidthField(
             field.label,
             String(value ?? ''),
             (v) => onChange(v),
             fp,
             field.help,
           );
-          if (field.placeholder && !field.help) {
-            el.append(h('div', { class: 'sm-field__help' }, [field.placeholder]));
-          }
-          return el;
         }
-        if (field.key === 'fontSize' && this._preferSliderControls()) {
-          const el = this._fontSizeSliderField(
+        if (field.key === 'fontSize' && field.inheritGlobal) {
+          const rawFs =
+            raw !== undefined && raw !== null ? String(raw).trim() : '';
+          return this._fontSizeSliderField(
             field.label,
-            String(value ?? ''),
-            (v) => onChange(v),
+            rawFs,
+            (v) => onChange(v.trim()),
             fp,
             field.help,
+            this.opts.store.doc.styles.fontSize,
           );
-          if (field.placeholder && !field.help) {
-            el.append(h('div', { class: 'sm-field__help' }, [field.placeholder]));
-          }
-          return el;
         }
-        const row = this._textField(field.label, value ?? '', onChange, field.placeholder ?? '', fp);
+        const row = this._textField(
+          field.label,
+          String(value ?? ''),
+          onChange,
+          field.placeholder ?? '',
+          fp,
+        );
         if (field.help) row.append(h('div', { class: 'sm-field__help' }, [field.help]));
         return row;
       }
@@ -528,16 +624,22 @@ export class RightPanel {
           });
         }, `${fp}:pad`, resetQuad);
       }
-      case 'socialLinkList':
+      case 'socialLinkList': {
+        const rows = Array.isArray(value)
+          ? (value as SocialLinkRow[])
+          : Array.isArray(defaults?.[field.key])
+            ? (defaults[field.key] as SocialLinkRow[])
+            : [];
         return this._socialLinkListField(
           field.label,
-          Array.isArray(value) ? (value as SocialLinkRow[]) : [],
+          rows,
           field.options ?? [],
           blockId,
           field.key,
           field.help,
           fp,
         );
+      }
       default:
         return h('div');
     }
@@ -653,16 +755,18 @@ export class RightPanel {
           ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:icon` } : {}),
           oninput: (e: Event) => syncItem(i, { iconSrc: (e.target as HTMLInputElement).value }),
         }),
-        h('input', {
-          class: 'sm-social-link-list__color sm-social-link-list__color--compact',
-          type: 'color',
-          title: '图标背景色',
-          value: bgDisplay.length >= 4 ? bgDisplay : bgResolved,
-          ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:bg` } : {}),
-          oninput: (e: Event) =>
-            syncItem(i, { backgroundColor: (e.target as HTMLInputElement).value }),
-        }),
       );
+      const bgPick = h('input', {
+        class: 'sm-social-link-list__color sm-social-link-list__color--compact',
+        type: 'color',
+        value: bgDisplay.length >= 4 ? bgDisplay : bgResolved,
+        ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:bg` } : {}),
+      }) as HTMLInputElement;
+      bindColorPickerInput(bgPick, {
+        liveCommit: true,
+        onCommit: (hex) => syncItem(i, { backgroundColor: hex }),
+      });
+      extras.append(bgPick);
       rowWrap.append(extras);
 
       listEl.append(rowWrap);
@@ -886,21 +990,53 @@ export class RightPanel {
     };
 
     if (!this._preferSliderControls()) {
+      const inp = h('input', {
+        class: 'sm-input',
+        type: 'number',
+        value: String(value),
+        min,
+        max,
+        step,
+        ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
+      }) as HTMLInputElement;
+
+      const commitPlain = () => {
+        const t = inp.value.trim();
+        const fb = snap(value);
+        if (t === '') {
+          inp.value = String(fb);
+          onChange(fb);
+          return;
+        }
+        const v = Number(t);
+        const s = snap(Number.isNaN(v) ? fb : v);
+        inp.value = String(s);
+        onChange(s);
+      };
+
+      /** min>0 时中途输入会被 snap 打断（如想输入 16 会先变成 10），仅失焦/Enter 提交 */
+      if (min > 0) {
+        inp.addEventListener('blur', commitPlain);
+        inp.addEventListener('keydown', (e) => {
+          if ((e as KeyboardEvent).key === 'Enter') inp.blur();
+        });
+      } else {
+        inp.addEventListener('input', () => {
+          const t = inp.value.trim();
+          if (t === '') return;
+          const v = Number(t);
+          if (Number.isNaN(v)) return;
+          onChange(snap(v));
+        });
+        inp.addEventListener('blur', commitPlain);
+        inp.addEventListener('keydown', (e) => {
+          if ((e as KeyboardEvent).key === 'Enter') commitPlain();
+        });
+      }
+
       return h('div', { class: 'sm-field' }, [
         h('label', { class: 'sm-field__label' }, [label]),
-        h('input', {
-          class: 'sm-input',
-          type: 'number',
-          value: String(value),
-          min,
-          max,
-          step,
-          ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
-          oninput: (e: Event) => {
-            const v = Number((e.target as HTMLInputElement).value);
-            if (!Number.isNaN(v)) onChange(v);
-          },
-        }),
+        inp,
       ]);
     }
 
@@ -911,28 +1047,54 @@ export class RightPanel {
       max,
       step,
       value: String(v0),
-      oninput: (e: Event) => {
-        const s = snap(Number((e.target as HTMLInputElement).value));
-        num.value = String(s);
-        onChange(s);
-      },
-    });
+    }) as HTMLInputElement;
+
     const num = h('input', {
       class: 'sm-input',
       type: 'number',
-      value: String(v0),
       min,
       max,
       step,
+      value: String(v0),
       ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
-      oninput: (e: Event) => {
-        const raw = Number((e.target as HTMLInputElement).value);
-        if (Number.isNaN(raw)) return;
-        const s = snap(raw);
-        range.value = String(s);
-        (e.target as HTMLInputElement).value = String(s);
-        onChange(s);
-      },
+    }) as HTMLInputElement;
+
+    const syncFromSlider = (n: number) => {
+      const s = snap(n);
+      range.value = String(s);
+      num.value = String(s);
+      onChange(s);
+    };
+
+    range.addEventListener('input', () => {
+      syncFromSlider(Number(range.value));
+    });
+
+    num.addEventListener('input', () => {
+      const t = num.value.trim();
+      if (t === '') return;
+      const raw = Number(t);
+      if (Number.isNaN(raw)) return;
+      range.value = String(snap(raw));
+    });
+
+    num.addEventListener('blur', () => {
+      const t = num.value.trim();
+      const fb = snap(Number(range.value));
+      if (t === '') {
+        syncFromSlider(fb);
+        return;
+      }
+      const raw = Number(t);
+      if (Number.isNaN(raw)) {
+        syncFromSlider(fb);
+        return;
+      }
+      syncFromSlider(raw);
+    });
+
+    num.addEventListener('keydown', (e) => {
+      if ((e as KeyboardEvent).key === 'Enter') num.blur();
     });
 
     return h('div', { class: 'sm-field' }, [
@@ -945,27 +1107,107 @@ export class RightPanel {
     value: string,
     onChange: (v: string) => void,
     focusPrefix?: string,
+    placeholder = '#ffffff',
   ) {
     const pickToken = focusPrefix ? `${focusPrefix}:pick` : undefined;
     const textToken = focusPrefix ? `${focusPrefix}:text` : undefined;
+    const pick = h('input', {
+      type: 'color',
+      ...(pickToken ? { 'data-sm-focus': pickToken } : {}),
+    }) as HTMLInputElement;
+    const text = h('input', {
+      class: 'sm-input',
+      type: 'text',
+      placeholder,
+      ...(textToken ? { 'data-sm-focus': textToken } : {}),
+    }) as HTMLInputElement;
+
+    let lastValid = value.trim();
+
+    const applyPickInherit = () => {
+      pick.value = '#808080';
+      pick.classList.add('sm-color-row__pick--inherit');
+      pick.title = placeholder || '未设置';
+    };
+
+    const applyStored = (stored: string) => {
+      const trimmed = stored.trim();
+      text.value = trimmed;
+      const hex = normalizeAccentHex(trimmed);
+      if (hex) {
+        pick.value = hex;
+        pick.classList.remove('sm-color-row__pick--inherit');
+        pick.title = '';
+      } else {
+        applyPickInherit();
+      }
+    };
+
+    applyStored(value);
+
+    const previewPick = (hex: string) => {
+      text.value = hex;
+      pick.value = hex;
+      pick.classList.remove('sm-color-row__pick--inherit');
+      pick.title = '';
+      lastValid = hex;
+    };
+
+    const commitPick = (hex: string) => {
+      previewPick(hex);
+      onChange(hex);
+    };
+
+    bindColorPickerInput(pick, {
+      getValue: () => text.value.trim() || pick.value,
+      placeholder,
+      allowClear: true,
+      onPreview: previewPick,
+      onCommit: commitPick,
+      onClear: () => {
+        applyStored('');
+        lastValid = '';
+        onChange('');
+      },
+    });
+
+    text.addEventListener('input', () => {
+      const raw = text.value;
+      const hex = normalizeAccentHex(raw);
+      if (hex) {
+        pick.value = hex;
+        pick.classList.remove('sm-color-row__pick--inherit');
+        pick.title = '';
+        lastValid = hex;
+      } else if (!raw.trim()) {
+        applyPickInherit();
+        lastValid = '';
+      }
+      onChange(raw);
+    });
+
+    text.addEventListener('blur', () => {
+      const raw = text.value.trim();
+      if (!raw) {
+        applyStored('');
+        lastValid = '';
+        onChange('');
+        return;
+      }
+      const hex = normalizeAccentHex(raw);
+      if (hex) {
+        applyStored(hex);
+        lastValid = hex;
+        if (hex !== raw) onChange(hex);
+        return;
+      }
+      applyStored(lastValid);
+      onChange(lastValid);
+    });
+
     return h('div', { class: 'sm-field' }, [
       h('label', { class: 'sm-field__label' }, [label]),
-      h('div', { class: 'sm-color-row' }, [
-        h('input', {
-          type: 'color',
-          value: value || '#ffffff',
-          ...(pickToken ? { 'data-sm-focus': pickToken } : {}),
-          oninput: (e: Event) => onChange((e.target as HTMLInputElement).value),
-        }),
-        h('input', {
-          class: 'sm-input',
-          type: 'text',
-          value,
-          placeholder: '#ffffff',
-          ...(textToken ? { 'data-sm-focus': textToken } : {}),
-          oninput: (e: Event) => onChange((e.target as HTMLInputElement).value),
-        }),
-      ]),
+      h('div', { class: 'sm-color-row' }, [pick, text]),
     ]);
   }
   private _selectField(
@@ -992,6 +1234,43 @@ export class RightPanel {
       sel,
     ]);
   }
+
+  /** select 平铺：与顶栏 sm-segmented 视觉一致，占满右栏宽度 */
+  private _segmentedSelectField(
+    label: string,
+    value: string,
+    options: { label: string; value: string }[],
+    onChange: (v: string) => void,
+    focusToken?: string,
+    wrap = false,
+  ) {
+    const group = h('div', {
+      class: `sm-segmented sm-segmented--fill${wrap ? ' sm-segmented--wrap' : ''}`,
+      role: 'group',
+      'aria-label': label,
+    });
+    for (const o of options) {
+      const active = o.value === value;
+      group.append(
+        h(
+          'button',
+          {
+            type: 'button',
+            class: `sm-segmented__item${active ? ' sm-segmented__item--active' : ''}`,
+            'aria-pressed': active ? 'true' : 'false',
+            title: o.label,
+            ...(focusToken ? { 'data-sm-focus': `${focusToken}:${o.value}` } : {}),
+            onclick: () => onChange(o.value),
+          },
+          [o.label],
+        ),
+      );
+    }
+    return h('div', { class: 'sm-field' }, [
+      h('label', { class: 'sm-field__label' }, [label]),
+      group,
+    ]);
+  }
   private _switchField(
     label: string,
     value: boolean,
@@ -1036,8 +1315,8 @@ export class RightPanel {
     ];
     const emit = () => onChange([...current]);
 
-    const makePlain = (v: number | undefined, idx: number) =>
-      h('input', {
+    const makePlain = (v: number | undefined, idx: number) => {
+      const inp = h('input', {
         class: 'sm-input',
         type: 'number',
         min: 0,
@@ -1045,12 +1324,32 @@ export class RightPanel {
         value: String(v ?? 0),
         title: titles[idx],
         ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:${idx}` } : {}),
-        oninput: (e: Event) => {
-          const raw = Number((e.target as HTMLInputElement).value);
-          current[idx] = clampPad(Number.isNaN(raw) ? 0 : raw);
-          emit();
-        },
+      }) as HTMLInputElement;
+      inp.addEventListener('input', () => {
+        const t = inp.value.trim();
+        if (t === '') return;
+        const raw = Number(t);
+        if (Number.isNaN(raw)) return;
+        current[idx] = clampPad(raw);
+        emit();
+      });
+      inp.addEventListener('blur', () => {
+        const t = inp.value.trim();
+        if (t === '') {
+          inp.value = String(current[idx]);
+          return;
+        }
+        const raw = Number(t);
+        const c = clampPad(Number.isNaN(raw) ? current[idx] : raw);
+        inp.value = String(c);
+        current[idx] = c;
+        emit();
+      });
+      inp.addEventListener('keydown', (e) => {
+        if ((e as KeyboardEvent).key === 'Enter') inp.blur();
       });
+      return inp;
+    };
 
     const makeSliderRow = (v: number | undefined, idx: number) => {
       const cur = clampPad(v ?? 0);
@@ -1061,13 +1360,15 @@ export class RightPanel {
         step: 1,
         value: String(cur),
         title: titles[idx],
-        oninput: (e: Event) => {
-          const c = clampPad(Number((e.target as HTMLInputElement).value));
-          current[idx] = c;
-          num.value = String(c);
-          emit();
-        },
+      }) as HTMLInputElement;
+
+      range.addEventListener('input', () => {
+        const c = clampPad(Number(range.value));
+        current[idx] = c;
+        num.value = String(c);
+        emit();
       });
+
       const num = h('input', {
         class: 'sm-input',
         type: 'number',
@@ -1076,16 +1377,38 @@ export class RightPanel {
         value: String(cur),
         title: titles[idx],
         ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:${idx}` } : {}),
-        oninput: (e: Event) => {
-          const rawN = Number((e.target as HTMLInputElement).value);
-          if (Number.isNaN(rawN)) return;
-          const c = clampPad(rawN);
-          current[idx] = c;
-          range.value = String(c);
-          (e.target as HTMLInputElement).value = String(c);
-          emit();
-        },
+      }) as HTMLInputElement;
+
+      num.addEventListener('input', () => {
+        const t = num.value.trim();
+        if (t === '') return;
+        const rawN = Number(t);
+        if (Number.isNaN(rawN)) return;
+        const c = clampPad(rawN);
+        range.value = String(c);
+        current[idx] = c;
+        emit();
       });
+
+      num.addEventListener('blur', () => {
+        const t = num.value.trim();
+        if (t === '') {
+          num.value = String(current[idx]);
+          range.value = String(current[idx]);
+          return;
+        }
+        const rawN = Number(t);
+        const c = clampPad(Number.isNaN(rawN) ? current[idx] : rawN);
+        num.value = String(c);
+        range.value = String(c);
+        current[idx] = c;
+        emit();
+      });
+
+      num.addEventListener('keydown', (e) => {
+        if ((e as KeyboardEvent).key === 'Enter') num.blur();
+      });
+
       return h('div', { class: 'sm-spacing-row' }, [
         h('span', { class: 'sm-spacing-row__axis' }, [titles[idx]]),
         range,
@@ -1126,6 +1449,188 @@ export class RightPanel {
     ]);
   }
 
+  /** 「继承全局」开关行：开=跟随邮件全局，关=块级固定值 */
+  private _globalInheritSwitch(
+    inheritOn: boolean,
+    globalDisplay: string,
+    onToggle: (inherit: boolean) => void,
+    focusToken?: string,
+  ): { el: HTMLElement; setInherit: (on: boolean, display?: string) => void } {
+    const input = h('input', {
+      type: 'checkbox',
+      class: 'sm-inherit-switch__input',
+      role: 'switch',
+      ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
+      ...(inheritOn ? { checked: true } : {}),
+    }) as HTMLInputElement;
+    const valueEl = h('span', {
+      class: 'sm-inherit-switch__value',
+      hidden: !inheritOn,
+    }, [globalDisplay]);
+    const el = h('div', { class: 'sm-inherit-switch' }, [
+      h('label', { class: 'sm-inherit-switch__label' }, [
+        input,
+        h('span', { class: 'sm-inherit-switch__text' }, ['继承全局']),
+      ]),
+      valueEl,
+    ]);
+    input.addEventListener('change', () => onToggle(input.checked));
+    const setInherit = (on: boolean, display?: string) => {
+      input.checked = on;
+      if (display !== undefined) valueEl.textContent = display;
+      valueEl.hidden = !on;
+    };
+    return { el, setInherit };
+  }
+
+  private _fontWeightInheritField(
+    label: string,
+    stored: string,
+    globalWeight: string,
+    onChange: (v: string) => void,
+    focusToken: string,
+    options: { label: string; value: string }[],
+    help?: string,
+  ): HTMLElement {
+    let inheriting = !stored;
+    const group = h('div', {
+      class: 'sm-segmented sm-segmented--fill',
+      role: 'group',
+      'aria-label': label,
+    });
+
+    const syncGroup = () => {
+      group.classList.toggle('sm-segmented--disabled', inheriting);
+      const display = inheriting ? '' : normalizeFontWeightStep(stored || globalWeight);
+      clear(group);
+      for (const o of options) {
+        const active = !inheriting && o.value === display;
+        group.append(
+          h(
+            'button',
+            {
+              type: 'button',
+              class: `sm-segmented__item${active ? ' sm-segmented__item--active' : ''}`,
+              'aria-pressed': active ? 'true' : 'false',
+              title: o.label,
+              ...(focusToken ? { 'data-sm-focus': `${focusToken}:${o.value}` } : {}),
+              onclick: () => {
+                inheriting = false;
+                stored = o.value;
+                inheritSwitch.setInherit(false);
+                syncGroup();
+                onChange(o.value);
+              },
+            },
+            [o.label],
+          ),
+        );
+      }
+    };
+
+    const inheritSwitch = this._globalInheritSwitch(
+      inheriting,
+      globalWeight,
+      (on) => {
+        if (on) {
+          inheriting = true;
+          stored = '';
+          inheritSwitch.setInherit(true, globalWeight);
+          syncGroup();
+          onChange('');
+          return;
+        }
+        inheriting = false;
+        stored = globalWeight;
+        inheritSwitch.setInherit(false);
+        syncGroup();
+        onChange(globalWeight);
+      },
+      `${focusToken}:inherit`,
+    );
+
+    syncGroup();
+
+    const wrap = h('div', { class: 'sm-field' }, [
+      h('label', { class: 'sm-field__label' }, [label]),
+      inheritSwitch.el,
+      group,
+    ]);
+    if (help) wrap.append(h('div', { class: 'sm-field__help' }, [help]));
+    return wrap;
+  }
+
+  private _fontSizeInheritTextField(
+    label: string,
+    stored: string,
+    onChange: (v: string) => void,
+    focusToken: string,
+    globalFontSize: string,
+    help?: string,
+  ): HTMLElement {
+    const globalPx = this._snapFontSizeToPx(globalFontSize);
+    let inheriting = !stored.trim();
+    const input = h('input', {
+      class: 'sm-input',
+      type: 'text',
+      ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
+    }) as HTMLInputElement;
+
+    const syncInput = () => {
+      input.disabled = inheriting;
+      input.value = inheriting ? '' : stored;
+      input.placeholder = inheriting ? '' : '如 16px';
+      input.classList.toggle('sm-input--inherit-disabled', inheriting);
+    };
+
+    const inheritSwitch = this._globalInheritSwitch(
+      inheriting,
+      `${globalPx}px`,
+      (on) => {
+        if (on) {
+          inheriting = true;
+          stored = '';
+          inheritSwitch.setInherit(true, `${globalPx}px`);
+          syncInput();
+          onChange('');
+          return;
+        }
+        inheriting = false;
+        stored = `${globalPx}px`;
+        inheritSwitch.setInherit(false);
+        syncInput();
+        onChange(stored);
+      },
+      `${focusToken}:inherit`,
+    );
+
+    syncInput();
+
+    input.addEventListener('input', () => {
+      if (inheriting) return;
+      stored = input.value;
+      onChange(stored);
+    });
+
+    input.addEventListener('blur', () => {
+      if (inheriting) return;
+      const t = input.value.trim();
+      if (!t) {
+        stored = `${globalPx}px`;
+        input.value = stored;
+        onChange(stored);
+      }
+    });
+
+    const wrap = h('div', { class: 'sm-field' }, [
+      h('label', { class: 'sm-field__label' }, [label]),
+      inheritSwitch.el,
+      input,
+    ]);
+    if (help) wrap.append(h('div', { class: 'sm-field__help' }, [help]));
+    return wrap;
+  }
+
   private _snapFontSizeToPx(value: string): number {
     const t = (value ?? '').trim();
     const m = t.match(/^(\d+(\.\d+)?)/);
@@ -1139,49 +1644,128 @@ export class RightPanel {
     onChange: (v: string) => void,
     focusToken: string,
     help?: string,
+    globalFontSize?: string,
   ) {
+    const inheritGlobal = globalFontSize !== undefined;
     if (!this._preferSliderControls()) {
+      if (inheritGlobal) {
+        return this._fontSizeInheritTextField(
+          label,
+          value,
+          onChange,
+          focusToken,
+          globalFontSize,
+          help,
+        );
+      }
       return this._textField(label, value ?? '', onChange, '', focusToken);
     }
+
     const min = 10;
     const max = 48;
     const step = 1;
     const snap = (n: number) => Math.min(max, Math.max(min, Math.round(n)));
-    const px = snap(this._snapFontSizeToPx(value ?? ''));
+    const globalPx = snap(this._snapFontSizeToPx(globalFontSize ?? value ?? '16px'));
+    let stored = value.trim();
+    let inheriting = inheritGlobal && !stored;
 
+    const sliderRow = h('div', { class: 'sm-field__slider-row' });
     const range = h('input', {
       type: 'range',
       min,
       max,
       step,
-      value: String(px),
-      oninput: (e: Event) => {
-        const s = snap(Number((e.target as HTMLInputElement).value));
-        num.value = String(s);
-        onChange(`${s}px`);
-      },
-    });
+    }) as HTMLInputElement;
     const num = h('input', {
       class: 'sm-input',
       type: 'number',
       min,
       max,
       step,
-      value: String(px),
       'data-sm-focus': focusToken,
-      oninput: (e: Event) => {
-        const rawN = Number((e.target as HTMLInputElement).value);
-        if (Number.isNaN(rawN)) return;
-        const s = snap(rawN);
+    }) as HTMLInputElement;
+    sliderRow.append(range, num);
+
+    const syncSlider = () => {
+      sliderRow.classList.toggle('sm-field__slider-row--inherit', inheriting);
+      num.disabled = inheriting;
+      if (inheriting) {
+        range.value = String(globalPx);
+        num.value = '';
+      } else {
+        const s = snap(this._snapFontSizeToPx(stored || `${globalPx}px`));
         range.value = String(s);
-        (e.target as HTMLInputElement).value = String(s);
-        onChange(`${s}px`);
-      },
+        num.value = String(s);
+      }
+    };
+
+    let inheritSwitch: ReturnType<RightPanel['_globalInheritSwitch']> | null = null;
+    if (inheritGlobal) {
+      inheritSwitch = this._globalInheritSwitch(
+        inheriting,
+        `${globalPx}px`,
+        (on) => {
+          if (on) {
+            inheriting = true;
+            stored = '';
+            inheritSwitch!.setInherit(true, `${globalPx}px`);
+            syncSlider();
+            onChange('');
+            return;
+          }
+          inheriting = false;
+          stored = `${globalPx}px`;
+          inheritSwitch!.setInherit(false);
+          syncSlider();
+          onChange(stored);
+        },
+        `${focusToken}:inherit`,
+      );
+    }
+
+    syncSlider();
+
+    const leaveInherit = () => {
+      if (!inheriting) return;
+      inheriting = false;
+      inheritSwitch?.setInherit(false);
+      syncSlider();
+    };
+
+    range.addEventListener('input', () => {
+      leaveInherit();
+      const s = snap(Number(range.value));
+      num.value = String(s);
+      stored = `${s}px`;
+      onChange(stored);
+    });
+
+    num.addEventListener('input', () => {
+      if (inheriting) return;
+      const rawN = Number(num.value);
+      if (Number.isNaN(rawN)) return;
+      range.value = String(snap(rawN));
+    });
+
+    num.addEventListener('blur', () => {
+      if (inheriting) return;
+      const t = num.value.trim();
+      const fb = snap(Number(range.value));
+      const s = snap(t === '' || Number.isNaN(Number(t)) ? fb : Number(t));
+      stored = `${s}px`;
+      num.value = String(s);
+      range.value = String(s);
+      onChange(stored);
+    });
+
+    num.addEventListener('keydown', (e) => {
+      if ((e as KeyboardEvent).key === 'Enter') num.blur();
     });
 
     const wrap = h('div', { class: 'sm-field' }, [
       h('label', { class: 'sm-field__label' }, [label]),
-      h('div', { class: 'sm-field__slider-row' }, [range, num]),
+      ...(inheritSwitch ? [inheritSwitch.el] : []),
+      sliderRow,
     ]);
     if (help) wrap.append(h('div', { class: 'sm-field__help' }, [help]));
     return wrap;
@@ -1238,6 +1822,8 @@ export class RightPanel {
     const min = 1;
     const displayN = mode === 'auto' ? 280 : layoutWidthNumeric(raw, mode === '%' ? '%' : 'px');
 
+    const clampW = (n: number) => Math.max(min, Math.min(max, Math.round(n)));
+
     const range = h('input', {
       type: 'range',
       min,
@@ -1245,13 +1831,8 @@ export class RightPanel {
       step: 1,
       value: String(displayN),
       disabled: mode === 'auto',
-      oninput: (e: Event) => {
-        if (mode === 'auto') return;
-        const c = Math.max(min, Math.min(max, Math.round(Number((e.target as HTMLInputElement).value))));
-        num.value = String(c);
-        onChange(mode === '%' ? `${c}%` : `${c}px`);
-      },
-    });
+    }) as HTMLInputElement;
+
     const num = h('input', {
       class: 'sm-input',
       type: 'number',
@@ -1261,15 +1842,44 @@ export class RightPanel {
       value: String(displayN),
       disabled: mode === 'auto',
       ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
-      oninput: (e: Event) => {
-        if (mode === 'auto') return;
-        const rawN = Number((e.target as HTMLInputElement).value);
-        if (Number.isNaN(rawN)) return;
-        const c = Math.max(min, Math.min(max, Math.round(rawN)));
-        range.value = String(c);
-        (e.target as HTMLInputElement).value = String(c);
-        onChange(mode === '%' ? `${c}%` : `${c}px`);
-      },
+    }) as HTMLInputElement;
+
+    const emitW = (c: number) => {
+      const v = clampW(c);
+      range.value = String(v);
+      num.value = String(v);
+      onChange(mode === '%' ? `${v}%` : `${v}px`);
+    };
+
+    range.addEventListener('input', () => {
+      if (mode === 'auto') return;
+      emitW(Number(range.value));
+    });
+
+    num.addEventListener('input', () => {
+      if (mode === 'auto') return;
+      const t = num.value.trim();
+      if (t === '') return;
+      const rawN = Number(t);
+      if (Number.isNaN(rawN)) return;
+      range.value = String(clampW(rawN));
+    });
+
+    num.addEventListener('blur', () => {
+      if (mode === 'auto') return;
+      const t = num.value.trim();
+      const fb = clampW(Number(range.value));
+      if (t === '') {
+        emitW(fb);
+        return;
+      }
+      const rawN = Number(t);
+      emitW(Number.isNaN(rawN) ? fb : rawN);
+    });
+
+    num.addEventListener('keydown', (e) => {
+      if (mode === 'auto') return;
+      if ((e as KeyboardEvent).key === 'Enter') num.blur();
     });
 
     const sliderRow = h(
@@ -1310,34 +1920,26 @@ export class RightPanel {
   }
 
   private _docFontWeightField(value: string, onChange: (v: string) => void, focusToken: string) {
-    const opts = [
-      { label: '常规', value: 'normal' },
-      { label: '中等 500', value: '500' },
-      { label: '半粗 600', value: '600' },
-      { label: '加粗 700', value: 'bold' },
-    ];
-    if (!this._preferSliderControls()) {
-      return this._selectField('字重', value ?? 'normal', opts, onChange, focusToken);
-    }
-    const cur = value || 'normal';
-    const row = h('div', { class: 'sm-segmented sm-segmented--wrap' });
-    for (const o of opts) {
-      row.append(
-        h(
-          'button',
-          {
-            type: 'button',
-            class: `sm-segmented__item ${o.value === cur ? 'sm-segmented__item--active' : ''}`,
-            onclick: () => onChange(o.value),
-          },
-          [o.label],
-        ),
-      );
-    }
-    return h('div', { class: 'sm-field' }, [
-      h('label', { class: 'sm-field__label' }, ['字重']),
-      row,
-    ]);
+    const cur = normalizeFontWeightStep(value);
+    return this._segmentedSelectField('字重', cur, FONT_WEIGHT_STEP_OPTIONS, onChange, focusToken);
+  }
+
+  private _twoColumnRatioField(
+    layout: SectionLayout,
+    onChange: (layout: SectionLayout) => void,
+    focusToken: string,
+  ) {
+    return this._segmentedSelectField(
+      '列比例',
+      layout,
+      [
+        { label: '1:1', value: '1-1' },
+        { label: '1:2', value: '1-2' },
+        { label: '2:1', value: '2-1' },
+      ],
+      (v) => onChange(v as SectionLayout),
+      focusToken,
+    );
   }
 
   private _renderBlockCodeView(block: Block): HTMLElement {