diff --git a/packages/base/codemirror-editor.gts b/packages/base/codemirror-editor.gts
index b368da55a47..d38ab55c8c0 100644
--- a/packages/base/codemirror-editor.gts
+++ b/packages/base/codemirror-editor.gts
@@ -5,6 +5,7 @@ import { modifier } from 'ember-modifier';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { scheduleOnce } from '@ember/runloop';
+import { htmlSafe } from '@ember/template';
 import { Tooltip } from '@cardstack/boxel-ui/components';
 import { eq, not } from '@cardstack/boxel-ui/helpers';
 
@@ -16,7 +17,10 @@ import {
   CardContextName,
   trimJsonExtension,
 } from '@cardstack/runtime-common';
-import { type BfmRefRange } from '@cardstack/runtime-common/bfm-card-references';
+import {
+  type BfmRefFormat,
+  type BfmRefRange,
+} from '@cardstack/runtime-common/bfm-card-references';
 import { consume } from 'ember-provide-consume-context';
 import {
   type BaseDef,
@@ -47,10 +51,13 @@ import PencilIcon from '@cardstack/boxel-icons/pencil';
 interface CardWidgetTarget {
   element: HTMLElement;
   cardId: string;
-  format: 'atom' | 'embedded';
+  format: BfmRefFormat;
   kind: 'inline' | 'block';
   // 'card' refs resolve to CardDef instances; 'file' refs to FileDef instances.
   refType: 'card' | 'file';
+  // Inline sizing derived from the directive's size specifier (width/height plus
+  // `overflow: hidden` for fitted). Undefined for non-fitted formats.
+  style?: string;
 }
 
 interface CardRenderTarget extends CardWidgetTarget {
@@ -995,7 +1002,11 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
           t.cardId === pending[i].cardId &&
           t.kind === pending[i].kind &&
           t.refType === pending[i].refType &&
-          t.element === pending[i].element,
+          t.element === pending[i].element &&
+          // A size-only edit changes format/style without touching url/kind/
+          // refType/element — include them so the preview actually re-renders.
+          t.format === pending[i].format &&
+          t.style === pending[i].style,
       )
     ) {
       return;
@@ -1339,7 +1350,13 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
                 }}
                   {{#if (isInline target.kind)}}
                     <span
-                      class='codemirror-card-slot codemirror-card-slot--inline'
+                      class='codemirror-card-slot
+                        {{if
+                          (eq target.format 'atom')
+                          'codemirror-card-slot--inline'
+                          'codemirror-card-slot--inline-embed'
+                        }}'
+                      style={{if target.style (htmlSafe target.style)}}
                       data-test-codemirror-file-slot-inline={{if
                         (eq target.refType 'file')
                         ''
@@ -1363,6 +1380,7 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
                   {{else}}
                     <div
                       class='codemirror-card-slot codemirror-card-slot--block'
+                      style={{if target.style (htmlSafe target.style)}}
                       data-test-codemirror-file-slot-block={{if
                         (eq target.refType 'file')
                         ''
@@ -1636,6 +1654,14 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
           cursor: pointer;
         }
 
+        /* Inline embeds with an explicit non-atom format flow inline-block so a
+           sized card sits in the text run without the atom pill's flex chrome,
+           mirroring the saved/preview markdown renderers. */
+        .codemirror-editor :deep(.codemirror-card-slot--inline-embed) {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
         .codemirror-editor :deep(.codemirror-card-slot--block) {
           display: block;
           border: 1px solid var(--boxel-border-color, #c4c4c4);
diff --git a/packages/host/app/components/markdown-embed-chooser/format-selection.ts b/packages/host/app/components/markdown-embed-chooser/format-selection.ts
index 30f6ee766ac..5bb4a7e415f 100644
--- a/packages/host/app/components/markdown-embed-chooser/format-selection.ts
+++ b/packages/host/app/components/markdown-embed-chooser/format-selection.ts
@@ -278,6 +278,18 @@ export default class EmbedFormatSelection {
     }
   }
 
+  // A Custom-size fitted embed must carry at least one explicit dimension —
+  // otherwise it serializes to the size-less bare `fitted`, which defeats the
+  // point of the Custom option. Every named format (atom/embedded/isolated and
+  // the fixed fitted variants) already carries its size, so it is always
+  // insertable; the consumer disables the insert CTA when this is false.
+  get hasValidSize(): boolean {
+    if (this.category !== 'custom') {
+      return true;
+    }
+    return this.width !== undefined || this.height !== undefined;
+  }
+
   // True once any format/placement/size field has diverged from the seeded
   // snapshot. Target identity (the user swapped in a different card/file) is
   // tracked separately by the tab panel, which owns the resolved target.
diff --git a/packages/host/app/components/markdown-embed-chooser/pane.gts b/packages/host/app/components/markdown-embed-chooser/pane.gts
index e8b82fb4222..4d913586cea 100644
--- a/packages/host/app/components/markdown-embed-chooser/pane.gts
+++ b/packages/host/app/components/markdown-embed-chooser/pane.gts
@@ -118,8 +118,15 @@ export default class MarkdownEmbedPreviewPane extends Component<Signature> {
     this.args.selection.setKind(kind);
   }
 
+  // A Custom-size fitted embed with no dimensions would insert a size-less
+  // bare `fitted`, so the CTA is held disabled until a valid size is entered.
+  private get ctaDisabled(): boolean {
+    return !this.args.selection.hasValidSize;
+  }
+
   @action
   private insert() {
+    if (this.ctaDisabled) return;
     let bfm = this.bfmString;
     if (!bfm) return;
     this.args.onInsert(bfm);
@@ -207,6 +214,7 @@ export default class MarkdownEmbedPreviewPane extends Component<Signature> {
         <Button
           @kind='primary'
           @size='small'
+          @disabled={{this.ctaDisabled}}
           class='markdown-embed-preview-pane__cta'
           data-test-markdown-embed-preview-cta
           {{on 'click' this.insert}}
diff --git a/packages/host/app/lib/codemirror-context.ts b/packages/host/app/lib/codemirror-context.ts
index 5e92acdf279..329fc513d23 100644
--- a/packages/host/app/lib/codemirror-context.ts
+++ b/packages/host/app/lib/codemirror-context.ts
@@ -45,8 +45,11 @@ import {
 } from '@codemirror/view';
 
 import {
+  type BfmRefFormat,
   type BfmRefRange,
+  bfmRefFormatAndSize,
   extractBfmRefRanges,
+  parseBfmSizeSpec,
 } from '@cardstack/runtime-common/bfm-card-references';
 
 // ── Card widget target interface ────────────────────────────────────────────
@@ -54,11 +57,15 @@ import {
 export interface CardWidgetTarget {
   element: HTMLElement;
   cardId: string;
-  format: 'atom' | 'embedded';
+  format: BfmRefFormat;
   kind: 'inline' | 'block';
   // 'card' refs (`:card[URL]`) resolve to CardDef instances; 'file' refs
   // (`:file[URL]`) resolve to FileDef instances.
   refType: 'card' | 'file';
+  // Inline sizing (`width`/`height`, plus `overflow: hidden` for fitted) derived
+  // from the directive's size specifier. Undefined for non-fitted formats.
+  // Mirrors the style the saved/preview markdown renderers apply.
+  style?: string;
 }
 
 // ── State effect for opening card search ────────────────────────────────────
@@ -140,6 +147,12 @@ class CardWidget extends WidgetType {
     readonly cardId: string,
     readonly kind: 'inline' | 'block',
     readonly refType: 'card' | 'file' = 'card',
+    // Size specifier fields parsed from the directive's `| spec` segment.
+    // `width`/`height` stay strings for a clean DOM data-attr round-trip;
+    // `format` is the parsed render format. Undefined when absent.
+    readonly format?: BfmRefFormat,
+    readonly width?: string,
+    readonly height?: string,
   ) {
     super();
   }
@@ -148,7 +161,12 @@ class CardWidget extends WidgetType {
     return (
       this.cardId === other.cardId &&
       this.kind === other.kind &&
-      this.refType === other.refType
+      this.refType === other.refType &&
+      // A size-only edit (e.g. `w:400` → `w:600`) must invalidate the widget so
+      // CM6 rebuilds the DOM with fresh data-attrs instead of reusing the old one.
+      this.format === other.format &&
+      this.width === other.width &&
+      this.height === other.height
     );
   }
 
@@ -158,6 +176,17 @@ class CardWidget extends WidgetType {
     el.setAttribute('data-card-id', this.cardId);
     el.setAttribute('data-card-kind', this.kind);
     el.setAttribute('data-bfm-ref-type', this.refType);
+    // Emit the size spec so `notifyTargets` can re-derive format + style off the
+    // DOM, using the same attribute names as the render-side BFM markup.
+    if (this.format !== undefined) {
+      el.setAttribute('data-boxel-bfm-format', this.format);
+    }
+    if (this.width !== undefined) {
+      el.setAttribute('data-boxel-bfm-width', this.width);
+    }
+    if (this.height !== undefined) {
+      el.setAttribute('data-boxel-bfm-height', this.height);
+    }
     el.className = `cm-card-widget cm-card-widget--${this.kind}`;
     el.contentEditable = 'false';
     return el;
@@ -639,6 +668,34 @@ function buildLinkDecorations(
 
 // ── Card decorations ───────────────────────────────────────────────────────
 
+// Parse a directive's inner content (between `[` and `]`) into the URL/id and
+// the CardWidget size args. `width`/`height` are kept as strings so they
+// round-trip cleanly through DOM data-attrs, where `notifyTargets` re-derives
+// format + style.
+function parseCardWidgetContent(content: string): {
+  cardId: string;
+  format?: BfmRefFormat;
+  width?: string;
+  height?: string;
+} {
+  let trimmed = content.trim();
+  let pipeIdx = trimmed.indexOf('|');
+  if (pipeIdx < 0) {
+    return { cardId: trimmed };
+  }
+  let cardId = trimmed.substring(0, pipeIdx).trim();
+  let spec = parseBfmSizeSpec(trimmed.substring(pipeIdx + 1).trim());
+  if (!spec) {
+    return { cardId };
+  }
+  return {
+    cardId,
+    format: spec.format,
+    width: spec.width !== undefined ? String(spec.width) : undefined,
+    height: spec.height !== undefined ? String(spec.height) : undefined,
+  };
+}
+
 function buildCardDecorations(
   state: EditorState,
   cursorLine: number,
@@ -657,11 +714,7 @@ function buildCardDecorations(
       let to = from + match[0].length;
       if (isInsideCode(state, from, to)) continue;
 
-      let cardId = match[1].trim();
-      let pipeIdx = cardId.indexOf('|');
-      if (pipeIdx >= 0) {
-        cardId = cardId.substring(0, pipeIdx).trim();
-      }
+      let { cardId, format, width, height } = parseCardWidgetContent(match[1]);
 
       let line = doc.lineAt(from);
       let onCursor = livePreview && line.number === cursorLine;
@@ -684,7 +737,14 @@ function buildCardDecorations(
             class: 'cm-bfm-card-ref cm-bfm-card-ref--inline',
           }),
         });
-        let previewWidget = new CardWidget(cardId, 'block', refType);
+        let previewWidget = new CardWidget(
+          cardId,
+          'block',
+          refType,
+          format,
+          width,
+          height,
+        );
         decos.push({
           from: to,
           to: to,
@@ -692,7 +752,14 @@ function buildCardDecorations(
         });
       } else {
         // Replace source text with widget
-        let widget = new CardWidget(cardId, 'block', refType);
+        let widget = new CardWidget(
+          cardId,
+          'block',
+          refType,
+          format,
+          width,
+          height,
+        );
         decos.push({
           from,
           to,
@@ -708,7 +775,7 @@ function buildCardDecorations(
       let to = from + match[0].length;
       if (isInsideCode(state, from, to)) continue;
 
-      let cardId = match[1].trim();
+      let { cardId, format, width, height } = parseCardWidgetContent(match[1]);
       let onCursor = livePreview && isOnCursorLine(state, from, cursorLine);
 
       if (!livePreview) {
@@ -729,7 +796,14 @@ function buildCardDecorations(
             class: 'cm-bfm-card-ref cm-bfm-card-ref--inline',
           }),
         });
-        let previewWidget = new CardWidget(cardId, 'inline', refType);
+        let previewWidget = new CardWidget(
+          cardId,
+          'inline',
+          refType,
+          format,
+          width,
+          height,
+        );
         decos.push({
           from: to,
           to: to,
@@ -737,7 +811,14 @@ function buildCardDecorations(
         });
       } else {
         // Replace source text with inline widget
-        let widget = new CardWidget(cardId, 'inline', refType);
+        let widget = new CardWidget(
+          cardId,
+          'inline',
+          refType,
+          format,
+          width,
+          height,
+        );
         decos.push({
           from,
           to,
@@ -851,12 +932,30 @@ function createCardTargetNotifier(
               (el.getAttribute('data-bfm-ref-type') as 'card' | 'file') ??
               'card';
             if (cardId) {
+              // Re-derive format + sizing from the directive's size attributes,
+              // matching the saved/preview markdown renderers. Inline embeds
+              // default to atom, block embeds to embedded.
+              let { format, sizeStyle } = bfmRefFormatAndSize(
+                el.getAttribute('data-boxel-bfm-format') ?? undefined,
+                el.getAttribute('data-boxel-bfm-width') ?? undefined,
+                el.getAttribute('data-boxel-bfm-height') ?? undefined,
+                kind === 'inline' ? 'atom' : 'embedded',
+              );
+              // Fitted slots carry the width/height plus `overflow: hidden` so
+              // the resolved instance occupies the requested footprint.
+              let style =
+                format === 'fitted'
+                  ? sizeStyle
+                    ? `${sizeStyle}; overflow: hidden`
+                    : 'overflow: hidden'
+                  : undefined;
               targets.push({
                 element: el as HTMLElement,
                 cardId,
-                format: kind === 'inline' ? 'atom' : 'embedded',
+                format,
                 kind,
                 refType,
+                style,
               });
             }
           }
diff --git a/packages/host/tests/acceptance/markdown-embed-chooser-test.gts b/packages/host/tests/acceptance/markdown-embed-chooser-test.gts
index 609d251546c..5c0472d1435 100644
--- a/packages/host/tests/acceptance/markdown-embed-chooser-test.gts
+++ b/packages/host/tests/acceptance/markdown-embed-chooser-test.gts
@@ -203,6 +203,76 @@ module('Acceptance | markdown embed chooser modal', function (hooks) {
     );
   });
 
+  test('Custom-size fitted holds Accept disabled until a valid size is entered', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[{ id: noteId, format: 'isolated' }]],
+    });
+
+    await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+    await waitFor(
+      `[data-test-stack-card="${noteId}"] [data-test-codemirror-editor]`,
+      { timeout: 5000 },
+    );
+    await waitFor('[data-test-toolbar="add-embed"]', { timeout: 5000 });
+
+    await click('[data-test-toolbar="add-embed"]');
+    await click('[data-test-toolbar-embed="card"]');
+    await waitFor('[data-test-markdown-embed-chooser-modal]', {
+      timeout: 5000,
+    });
+
+    await fillIn(
+      '[data-test-markdown-embed-chooser-tab-panel="card"] [data-test-search-field]',
+      'Mango',
+    );
+    await waitFor(
+      `[data-test-markdown-embed-chooser-tab-panel="card"] [data-test-item-button="${mangoId}"]`,
+      { timeout: 5000 },
+    );
+    await click(
+      `[data-test-markdown-embed-chooser-tab-panel="card"] [data-test-item-button="${mangoId}"]`,
+    );
+    await waitFor('[data-test-markdown-embed-preview-cta]:not([disabled])', {
+      timeout: 5000,
+    });
+
+    // Selecting Custom size with no dimensions must hold the CTA disabled so a
+    // size-less bare `fitted` directive can't be inserted.
+    await click('[data-test-markdown-embed-preview-format-select]');
+    await waitFor('[data-test-format-option="custom"]', { timeout: 5000 });
+    await click('[data-test-format-option="custom"]');
+    await waitFor('[data-test-markdown-embed-preview-size]', { timeout: 5000 });
+    assert
+      .dom('[data-test-markdown-embed-preview-cta]')
+      .isDisabled('Accept is disabled while Custom size has no dimensions');
+
+    // A size that matches no named variant keeps the selection on Custom; once
+    // entered, the CTA unlocks and inserts a directive carrying those dims.
+    await fillIn('[data-test-markdown-embed-preview-width]', '512');
+    await fillIn('[data-test-markdown-embed-preview-height]', '384');
+    await waitFor('[data-test-markdown-embed-preview-cta]:not([disabled])', {
+      timeout: 5000,
+    });
+    await click('[data-test-markdown-embed-preview-cta]');
+
+    await waitUntil(
+      () => !document.querySelector('[data-test-markdown-embed-chooser-modal]'),
+    );
+    await settled();
+
+    let editorEl = document.querySelector(
+      `[data-test-stack-card="${noteId}"] [data-test-codemirror-editor] .cm-editor`,
+    ) as HTMLElement | null;
+    let docText = editorEl
+      ? cmContext.EditorView.findFromDOM(editorEl)?.state.doc.toString()?.trim()
+      : undefined;
+    assert.strictEqual(
+      docText,
+      `::card[../Pet/mango | w:512 h:384]`,
+      'custom fitted inserts the entered width and height',
+    );
+  });
+
   test('cursor inside an existing directive swaps the toolbar to the Edit pencil', async function (assert) {
     // Open the card on the stack, then patch the body content to a pre-
     // existing :card[...] directive so the cursor lands inside it once the
diff --git a/packages/host/tests/integration/components/codemirror-editor-test.gts b/packages/host/tests/integration/components/codemirror-editor-test.gts
index b070e0a3a76..a4e0c054686 100644
--- a/packages/host/tests/integration/components/codemirror-editor-test.gts
+++ b/packages/host/tests/integration/components/codemirror-editor-test.gts
@@ -442,6 +442,143 @@ module('Integration | codemirror-context', function (hooks) {
     }
   });
 
+  // ── BFM format/size threading (CS-12112) ──
+
+  async function collectTargets(content: string): Promise<{
+    targets: CardWidgetTarget[];
+    element: HTMLElement;
+    destroy: () => void;
+  }> {
+    let element = document.createElement('div');
+    document.body.appendChild(element);
+    let targets: CardWidgetTarget[] = [];
+    let state = cmContext.createEditorState({
+      content,
+      onDocChange: () => {},
+      onCardTargetsChange: (t: CardWidgetTarget[]) => {
+        targets = t;
+      },
+      onOpenCardSearch: () => {},
+    });
+    let view = new cmContext.EditorView({ state, parent: element });
+    // eslint-disable-next-line @cardstack/boxel/no-raf-for-state -- waiting for rAF-based codemirror widget notification
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await settled();
+    return {
+      targets,
+      element,
+      destroy: () => {
+        view.destroy();
+        element.remove();
+      },
+    };
+  }
+
+  test('block fitted embed with explicit size threads format + size style', async function (assert) {
+    let { targets, element, destroy } = await collectTargets(
+      '::card[https://example.com/cards/1 | fitted w:400 h:300]',
+    );
+    try {
+      let target = targets.find((t) => t.kind === 'block');
+      assert.strictEqual(target?.format, 'fitted', 'format is fitted');
+      assert.ok(
+        target?.style?.includes('width: 400px'),
+        'style carries the width',
+      );
+      assert.ok(
+        target?.style?.includes('height: 300px'),
+        'style carries the height',
+      );
+      assert.ok(
+        target?.style?.includes('overflow: hidden'),
+        'fitted style carries overflow: hidden',
+      );
+
+      let widget = element.querySelector('.cm-card-widget--block');
+      assert.strictEqual(
+        widget?.getAttribute('data-boxel-bfm-format'),
+        'fitted',
+        'widget DOM carries the format attribute',
+      );
+      assert.strictEqual(
+        widget?.getAttribute('data-boxel-bfm-width'),
+        '400',
+        'widget DOM carries the width attribute',
+      );
+      assert.strictEqual(
+        widget?.getAttribute('data-boxel-bfm-height'),
+        '300',
+        'widget DOM carries the height attribute',
+      );
+    } finally {
+      destroy();
+    }
+  });
+
+  test('block isolated embed threads isolated format with no size style', async function (assert) {
+    let { targets, destroy } = await collectTargets(
+      '::card[https://example.com/cards/1 | isolated]',
+    );
+    try {
+      let target = targets.find((t) => t.kind === 'block');
+      assert.strictEqual(target?.format, 'isolated', 'format is isolated');
+      assert.notOk(target?.style, 'isolated embed has no inline size style');
+    } finally {
+      destroy();
+    }
+  });
+
+  test('embeds without a size spec fall back to atom (inline) / embedded (block)', async function (assert) {
+    let { targets, destroy } = await collectTargets(
+      ':card[https://example.com/cards/1] and\n\n::card[https://example.com/cards/2]',
+    );
+    try {
+      let inline = targets.find((t) => t.kind === 'inline');
+      let block = targets.find((t) => t.kind === 'block');
+      assert.strictEqual(inline?.format, 'atom', 'inline default is atom');
+      assert.strictEqual(
+        block?.format,
+        'embedded',
+        'block default is embedded',
+      );
+    } finally {
+      destroy();
+    }
+  });
+
+  test('file embeds thread format + size style like card embeds', async function (assert) {
+    let { targets, destroy } = await collectTargets(
+      '::file[https://example.com/files/a.pdf | fitted w:400 h:300]\n\n::file[https://example.com/files/b.pdf | isolated]',
+    );
+    try {
+      let fitted = targets.find(
+        (t) => t.refType === 'file' && t.format === 'fitted',
+      );
+      assert.ok(fitted, 'a fitted file target is present');
+      assert.strictEqual(fitted?.refType, 'file', 'refType is file');
+      assert.ok(
+        fitted?.style?.includes('width: 400px'),
+        'file fitted target carries the width',
+      );
+      assert.ok(
+        fitted?.style?.includes('height: 300px'),
+        'file fitted target carries the height',
+      );
+      assert.ok(
+        fitted?.style?.includes('overflow: hidden'),
+        'file fitted target carries overflow: hidden',
+      );
+
+      let isolated = targets.find(
+        (t) => t.refType === 'file' && t.format === 'isolated',
+      );
+      assert.ok(isolated, 'isolated file target is present');
+      assert.notOk(isolated?.style, 'isolated file target has no size style');
+    } finally {
+      destroy();
+    }
+  });
+
   // ── Text insertion for card refs ──
 
   test('inserting :card[URL] text creates inline card ref', async function (assert) {
diff --git a/packages/host/tests/integration/components/rich-markdown-field-test.gts b/packages/host/tests/integration/components/rich-markdown-field-test.gts
index 3d03a0ec76e..32358d6dd52 100644
--- a/packages/host/tests/integration/components/rich-markdown-field-test.gts
+++ b/packages/host/tests/integration/components/rich-markdown-field-test.gts
@@ -598,6 +598,304 @@ module('Integration | RichMarkdownField', function (hooks) {
     }
   });
 
+  test('edit-mode compose preview renders a block fitted embed at the specified size', async function (assert) {
+    // Exercises the real edit path: the field renders in compose mode and
+    // resolves the embed via the getCards resource (linkedCards is empty in
+    // edit mode), the same way the operator-mode editor does.
+    class Pet extends CardDef {
+      static displayName = 'Pet';
+      @field name = contains(StringField);
+      @field cardTitle = contains(StringField, {
+        computeVia: function (this: Pet) {
+          return this.name;
+        },
+      });
+      static fitted = class Fitted extends Component<typeof this> {
+        <template>
+          <div data-test-pet-fitted>{{@model.name}}</div>
+        </template>
+      };
+    }
+
+    class ArticleCard extends CardDef {
+      @field body = contains(RichMarkdownField);
+    }
+
+    await setupIntegrationTestRealm({
+      mockMatrixUtils,
+      contents: {
+        'pet.gts': { Pet },
+        'article.gts': { ArticleCard },
+        'Pet/mango.json': {
+          data: {
+            attributes: { name: 'Mango', cardTitle: 'Mango' },
+            meta: {
+              adoptsFrom: { module: '../pet', name: 'Pet' },
+            },
+          },
+        },
+        'article-1.json': {
+          data: {
+            attributes: {
+              body: {
+                content: `::card[${testRealmURL}Pet/mango | fitted w:400 h:300]\n`,
+              },
+            },
+            meta: {
+              adoptsFrom: { module: './article', name: 'ArticleCard' },
+            },
+          },
+        },
+      },
+    });
+
+    let store = getService('store');
+    let article = (await store.get(`${testRealmURL}article-1`)) as BaseDef;
+    await store.loaded();
+
+    await renderCard(loader, article, 'edit');
+
+    // The fitted card must actually render in the compose preview — a broken
+    // size path shows the URL fallback instead.
+    await waitFor('[data-test-pet-fitted]', { timeout: 10_000 });
+    assert
+      .dom('[data-test-pet-fitted]')
+      .exists('block fitted embed renders the referenced card, not a fallback');
+    assert
+      .dom('.codemirror-card-fallback')
+      .doesNotExist('no URL fallback remains once the card resolves');
+
+    let slot = document
+      .querySelector('[data-test-pet-fitted]')!
+      .closest('.codemirror-card-slot--block') as HTMLElement | null;
+    assert.ok(slot, 'the card renders inside a block slot');
+    assert.strictEqual(
+      slot?.style.width,
+      '400px',
+      'block fitted slot carries the requested width',
+    );
+    assert.strictEqual(
+      slot?.style.height,
+      '300px',
+      'block fitted slot carries the requested height',
+    );
+    assert.strictEqual(
+      slot?.style.overflow,
+      'hidden',
+      'block fitted slot clips overflow',
+    );
+  });
+
+  test('edit-mode compose preview renders a prefix-form (@-RRI) ref with a named fitted variant', async function (assert) {
+    // Mirrors the reported failing case: a block embed whose ref is a
+    // prefix-form RRI (`@scope/name/...`) with a named fitted variant
+    // (`double-strip`), resolved in edit mode via getCards.
+    class Pet extends CardDef {
+      static displayName = 'Pet';
+      @field name = contains(StringField);
+      @field cardTitle = contains(StringField, {
+        computeVia: function (this: Pet) {
+          return this.name;
+        },
+      });
+      static fitted = class Fitted extends Component<typeof this> {
+        <template>
+          <div data-test-pet-fitted>{{@model.name}}</div>
+        </template>
+      };
+    }
+
+    class ArticleCard extends CardDef {
+      @field body = contains(RichMarkdownField);
+    }
+
+    await setupIntegrationTestRealm({
+      mockMatrixUtils,
+      contents: {
+        'pet.gts': { Pet },
+        'article.gts': { ArticleCard },
+        'Pet/mango.json': {
+          data: {
+            attributes: { name: 'Mango', cardTitle: 'Mango' },
+            meta: {
+              adoptsFrom: { module: '../pet', name: 'Pet' },
+            },
+          },
+        },
+        'article-1.json': {
+          data: {
+            attributes: {
+              body: {
+                content: `::card[@test/cards/Pet/mango | double-strip]\n`,
+              },
+            },
+            meta: {
+              adoptsFrom: { module: './article', name: 'ArticleCard' },
+            },
+          },
+        },
+      },
+    });
+
+    let virtualNetwork = getService('network').virtualNetwork;
+    virtualNetwork.addRealmMapping('@test/cards/', testRealmURL);
+    try {
+      let store = getService('store');
+      let article = (await store.get('@test/cards/article-1')) as BaseDef;
+      await store.loaded();
+
+      await renderCard(loader, article, 'edit');
+
+      await waitFor('[data-test-pet-fitted]', { timeout: 10_000 });
+      assert
+        .dom('[data-test-pet-fitted]')
+        .exists('prefix-form ref renders the card, not a URL fallback');
+      assert
+        .dom('.codemirror-card-fallback')
+        .doesNotExist('no URL fallback remains once the card resolves');
+
+      let slot = document
+        .querySelector('[data-test-pet-fitted]')!
+        .closest('.codemirror-card-slot--block') as HTMLElement | null;
+      assert.strictEqual(
+        slot?.style.width,
+        '250px',
+        'double-strip width is applied',
+      );
+      assert.strictEqual(
+        slot?.style.height,
+        '65px',
+        'double-strip height is applied',
+      );
+    } finally {
+      virtualNetwork.removeRealmMapping('@test/cards/');
+    }
+  });
+
+  test('edit-mode compose preview flows inline embeds by format (atom pill vs sized inline-block)', async function (assert) {
+    // The compose editor must route inline embeds the same way the
+    // saved/preview renderers do: an atom ref keeps the atom pill chrome, while
+    // a non-atom (embedded/fitted) inline ref flows as a chrome-less
+    // inline-block slot that also carries any fitted size style.
+    class Pet extends CardDef {
+      static displayName = 'Pet';
+      @field name = contains(StringField);
+      @field cardTitle = contains(StringField, {
+        computeVia: function (this: Pet) {
+          return this.name;
+        },
+      });
+      static atom = class Atom extends Component<typeof this> {
+        <template>
+          <span data-test-pet-atom>{{@model.name}}</span>
+        </template>
+      };
+      static embedded = class Embedded extends Component<typeof this> {
+        <template>
+          <div data-test-pet-embedded>{{@model.name}}</div>
+        </template>
+      };
+      static fitted = class Fitted extends Component<typeof this> {
+        <template>
+          <div data-test-pet-fitted>{{@model.name}}</div>
+        </template>
+      };
+    }
+
+    class ArticleCard extends CardDef {
+      @field body = contains(RichMarkdownField);
+    }
+
+    await setupIntegrationTestRealm({
+      mockMatrixUtils,
+      contents: {
+        'pet.gts': { Pet },
+        'article.gts': { ArticleCard },
+        'Pet/mango.json': {
+          data: {
+            attributes: { name: 'Mango', cardTitle: 'Mango' },
+            meta: {
+              adoptsFrom: { module: '../pet', name: 'Pet' },
+            },
+          },
+        },
+        'article-1.json': {
+          data: {
+            attributes: {
+              body: {
+                content: `Embedded: :card[${testRealmURL}Pet/mango | embedded]\n\nAtom: :card[${testRealmURL}Pet/mango | atom]\n\nFitted: :card[${testRealmURL}Pet/mango | fitted w:200 h:100]\n`,
+              },
+            },
+            meta: {
+              adoptsFrom: { module: './article', name: 'ArticleCard' },
+            },
+          },
+        },
+      },
+    });
+
+    let store = getService('store');
+    let article = (await store.get(`${testRealmURL}article-1`)) as BaseDef;
+    await store.loaded();
+
+    await renderCard(loader, article, 'edit');
+
+    await waitFor('[data-test-pet-embedded]', { timeout: 10_000 });
+    await waitFor('[data-test-pet-atom]', { timeout: 10_000 });
+    await waitFor('[data-test-pet-fitted]', { timeout: 10_000 });
+
+    let embeddedSlot = document
+      .querySelector('[data-test-pet-embedded]')!
+      .closest('[data-test-codemirror-card-slot-inline]');
+    assert
+      .dom(embeddedSlot)
+      .hasClass(
+        'codemirror-card-slot--inline-embed',
+        'a non-atom inline embed flows as an inline-block slot',
+      );
+    assert
+      .dom(embeddedSlot)
+      .doesNotHaveClass(
+        'codemirror-card-slot--inline',
+        'a non-atom inline embed does not use the atom pill flow class',
+      );
+
+    let atomSlot = document
+      .querySelector('[data-test-pet-atom]')!
+      .closest('[data-test-codemirror-card-slot-inline]');
+    assert
+      .dom(atomSlot)
+      .hasClass(
+        'codemirror-card-slot--inline',
+        'a plain (atom) inline ref keeps the atom pill flow class',
+      );
+
+    let fittedSlot = document
+      .querySelector('[data-test-pet-fitted]')!
+      .closest('[data-test-codemirror-card-slot-inline]') as HTMLElement | null;
+    assert
+      .dom(fittedSlot)
+      .hasClass(
+        'codemirror-card-slot--inline-embed',
+        'a fitted inline embed flows as an inline-block slot',
+      );
+    assert.strictEqual(
+      fittedSlot?.style.width,
+      '200px',
+      'fitted inline slot carries the requested width',
+    );
+    assert.strictEqual(
+      fittedSlot?.style.height,
+      '100px',
+      'fitted inline slot carries the requested height',
+    );
+    assert.strictEqual(
+      fittedSlot?.style.overflow,
+      'hidden',
+      'fitted inline slot clips overflow',
+    );
+  });
+
   test('inline card reference with a non-atom format resolves to an inline-block slot', async function (assert) {
     class Pet extends CardDef {
       static displayName = 'Pet';