@prenta/admin 0.97.3 → 0.97.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @actuate-media/cms-admin
 
+## 0.97.5
+
+### Patch Changes
+
+- c3ae495: Fix Post Details (and other `Modal` + `onDismiss` surfaces) discarding the form when clicking a nested dialog such as the media picker — outside interactions now ignore events that belong to another `[role="dialog"]`.
+
+## 0.97.4
+
+### Patch Changes
+
+- d165fe1: Site preview measures from a sentinel, not from padding arithmetic
+
+  `SitePreviewFrame` was the third copy of `container.clientWidth - 48` and the one left alone when the page and post canvases were unified, because it scales an **iframe** rather than a rendered surface and cannot render `CanvasSurface`.
+
+  Sharing the component was never the point; not writing `p-6` down a second time, in a second unit, four hundred lines from the class it mirrors, was. The 48 disagreed with reality the moment a scrollbar appeared and would have rotted silently if the gutter ever changed — nothing failing, the preview just scaling slightly wrong.
+
+  It now measures from a zero-height sentinel rendered as the first child of the padded container, subject to the same padding, scrollbar and host scaling as the frame, so its `offsetWidth` IS the usable width. Height still comes from the container — a zero-height sentinel can say nothing about it — but the vertical gutter is derived from the measured horizontal one rather than hardcoded again.
+
+  The source-level test that pins the other two canvases gained a third case, kept separate because the assertion is about the measurement and not about rendering the shared surface.
+
 ## 0.97.3
 
 ### Patch Changes

package/dist/__tests__/components/modal.render.test.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @vitest-environment happy-dom
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 /**
@@ -9,7 +11,14 @@ import { fireEvent, render, screen } from '@testing-library/react';
  * Escape / close both fire `onClose`. Hand-rolled `<div>` overlays gave us none
  * of this.
  */
-const { Modal } = await import('../../components/ui/Modal.js');
+const { Modal, isNestedDialogEvent } = await import('../../components/ui/Modal.js');
+function NestedDialog({ onOpenChange }) {
+    const [open, setOpen] = useState(true);
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            onOpenChange?.(next);
+        }, children: _jsx(Dialog.Portal, { children: _jsxs(Dialog.Content, { "aria-describedby": undefined, children: [_jsx(Dialog.Title, { children: "Media picker" }), _jsx("button", { type: "button", children: "Choose image" })] }) }) }));
+}
 describe('Modal accessibility', () => {
     it('does not render content while closed', () => {
         render(_jsx(Modal, { open: false, onClose: () => { }, title: "Edit page", children: _jsx("p", { children: "Body" }) }));
@@ -33,5 +42,56 @@ describe('Modal accessibility', () => {
         fireEvent.keyDown(document.body, { key: 'Escape' });
         expect(onClose).toHaveBeenCalled();
     });
+    it('routes Escape through onDismiss when provided', () => {
+        const onClose = vi.fn();
+        const onDismiss = vi.fn();
+        render(_jsx(Modal, { open: true, onClose: onClose, onDismiss: onDismiss, title: "Post details", children: _jsx("p", { children: "Body" }) }));
+        fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' });
+        expect(onDismiss).toHaveBeenCalled();
+        expect(onClose).not.toHaveBeenCalled();
+    });
+    it('keeps the parent open when interacting with a portaled nested dialog', async () => {
+        const onDismiss = vi.fn();
+        render(_jsx(Modal, { open: true, onClose: () => { }, onDismiss: onDismiss, title: "Post details", description: "Edit post details", children: _jsx("p", { children: "Body" }) }));
+        render(_jsx(NestedDialog, {}));
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        onDismiss.mockClear();
+        const chooseImage = screen.getByRole('button', { name: 'Choose image' });
+        fireEvent.pointerDown(chooseImage);
+        fireEvent.focusIn(chooseImage);
+        expect(onDismiss).not.toHaveBeenCalled();
+    });
+    it('closes only the portaled nested dialog on Escape', async () => {
+        const onDismiss = vi.fn();
+        const onNestedOpenChange = vi.fn();
+        render(_jsx(Modal, { open: true, onClose: () => { }, onDismiss: onDismiss, title: "Post details", description: "Edit post details", children: _jsx("p", { children: "Body" }) }));
+        render(_jsx(NestedDialog, { onOpenChange: onNestedOpenChange }));
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        onDismiss.mockClear();
+        onNestedOpenChange.mockClear();
+        fireEvent.keyDown(screen.getByRole('dialog', { name: 'Media picker' }), { key: 'Escape' });
+        expect(onNestedOpenChange).toHaveBeenCalledWith(false);
+        expect(screen.queryByRole('dialog', { name: 'Media picker' })).toBeNull();
+        expect(onDismiss).not.toHaveBeenCalled();
+    });
+});
+describe('isNestedDialogEvent (UpChat #27)', () => {
+    it('detects events that belong to a different dialog than the Modal content', () => {
+        const parent = document.createElement('div');
+        parent.setAttribute('role', 'dialog');
+        const nested = document.createElement('div');
+        nested.setAttribute('role', 'dialog');
+        const button = document.createElement('button');
+        nested.appendChild(button);
+        document.body.append(parent, nested);
+        // MediaPicker / ConfirmDialog portals sit outside this Modal's content —
+        // their clicks must not count as "interact outside" for dismiss.
+        expect(isNestedDialogEvent(button, parent)).toBe(true);
+        expect(isNestedDialogEvent(button, nested)).toBe(false);
+        expect(isNestedDialogEvent(parent, parent)).toBe(false);
+        expect(isNestedDialogEvent(null, parent)).toBe(false);
+        parent.remove();
+        nested.remove();
+    });
 });
 //# sourceMappingURL=modal.render.test.js.map

package/dist/__tests__/components/modal.render.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.render.test.js","sourceRoot":"","sources":["../../../src/__tests__/components/modal.render.test.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAElE;;;;;;GAMG;AAEH,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,MAAM,CAAC,8BAA8B,CAAC,CAAA;AAE9D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,CACJ,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,WAAW,YACtD,+BAAW,GACL,CACT,CAAA;QACD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAA;IACjD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2DAA2D,EAAE,GAAG,EAAE;QACnE,MAAM,CACJ,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,WAAW,YAC9C,+BAAW,GACL,CACT,CAAA;QACD,sEAAsE;QACtE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QACtE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IAC3E,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACvB,MAAM,CACJ,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,WAAW,YAC7C,+BAAW,GACL,CACT,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,CAAA;QACrE,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACvB,MAAM,CACJ,KAAC,KAAK,IAAC,IAAI,QAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,WAAW,YAC7C,+BAAW,GACL,CACT,CAAA;QACD,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAA;QACnD,MAAM,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAA;IACpC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"modal.render.test.js","sourceRoot":"","sources":["../../../src/__tests__/components/modal.render.test.tsx"],"names":[],"mappings":"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"}

package/dist/__tests__/views/canvas-surface-shared.test.js

@@ -49,5 +49,21 @@ describe('canvas surface is shared, not copied', () => {
             expect(read(rel), `${rel} re-implements the scale`).not.toMatch(/fitScale/);
         }
     });
+    /**
+     * `SitePreviewFrame` was the third copy of `clientWidth - 48` and the one
+     * followup 2 left alone, because it scales an IFRAME rather than a rendered
+     * surface and cannot render `CanvasSurface`. It can still measure the same
+     * way, and now does: the padding arithmetic is gone even though the
+     * component is not shared.
+     *
+     * Kept apart from CANVASES on purpose — the assertion here is about the
+     * measurement, not about rendering the shared surface, and folding it in
+     * would make the other two tests claim something untrue about it.
+     */
+    it('the site preview measures from a sentinel too, though it cannot share the surface', () => {
+        const preview = read('src/views/page-editor/SitePreviewFrame.tsx');
+        expect(preview, 'SitePreviewFrame still does padding arithmetic').not.toMatch(/clientWidth\s*-\s*\d/);
+        expect(preview, 'SitePreviewFrame does not measure from a sentinel').toMatch(/sentinelRef/);
+    });
 });
 //# sourceMappingURL=canvas-surface-shared.test.js.map

package/dist/__tests__/views/canvas-surface-shared.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-surface-shared.test.js","sourceRoot":"","sources":["../../../src/__tests__/views/canvas-surface-shared.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAE7C;;;;;;;;;;;;;GAaG;AAEH,MAAM,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;AAEhE;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE,CAC3B,YAAY,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC;KAC5B,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;KAChC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;AAEjC,MAAM,QAAQ,GAAG;IACf,wCAAwC;IACxC,4CAA4C;CAC7C,CAAA;AAED,QAAQ,CAAC,sCAAsC,EAAE,GAAG,EAAE;IACpD,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,gCAAgC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;QACtF,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,6BAA6B,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;QAClF,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sDAAsD,EAAE,GAAG,EAAE;QAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,yCAAyC,CAAC,CAAA;QAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;QACtC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QAEnC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,6BAA6B,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;YACjF,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,0BAA0B,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QAC7E,CAAC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"canvas-surface-shared.test.js","sourceRoot":"","sources":["../../../src/__tests__/views/canvas-surface-shared.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAE7C;;;;;;;;;;;;;GAaG;AAEH,MAAM,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;AAEhE;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE,CAC3B,YAAY,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC;KAC5B,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;KAChC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;AAEjC,MAAM,QAAQ,GAAG;IACf,wCAAwC;IACxC,4CAA4C;CAC7C,CAAA;AAED,QAAQ,CAAC,sCAAsC,EAAE,GAAG,EAAE;IACpD,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,gCAAgC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;QACtF,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,6BAA6B,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;QAClF,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sDAAsD,EAAE,GAAG,EAAE;QAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,yCAAyC,CAAC,CAAA;QAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;QACtC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QAEnC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,6BAA6B,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;YACjF,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,0BAA0B,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QAC7E,CAAC;IACH,CAAC,CAAC,CAAA;IAEF;;;;;;;;;;OAUG;IACH,EAAE,CAAC,mFAAmF,EAAE,GAAG,EAAE;QAC3F,MAAM,OAAO,GAAG,IAAI,CAAC,4CAA4C,CAAC,CAAA;QAClE,MAAM,CAAC,OAAO,EAAE,gDAAgD,CAAC,CAAC,GAAG,CAAC,OAAO,CAC3E,sBAAsB,CACvB,CAAA;QACD,MAAM,CAAC,OAAO,EAAE,mDAAmD,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IAC7F,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/components/ui/Modal.d.ts

@@ -32,6 +32,14 @@ export interface ModalProps {
      */
     onDismiss?: () => void;
 }
+/**
+ * True when the event originated inside a *different* `[role="dialog"]` than
+ * `content` (e.g. MediaPickerModal / ConfirmDialog portaled above this Modal).
+ * Nested dialogs must own their own dismiss; treating their clicks as "outside"
+ * would discard the parent form before the nested selection can apply
+ * (UpChat #27 / featured-image picker).
+ */
+export declare function isNestedDialogEvent(target: EventTarget | null, content: EventTarget | null): boolean;
 /**
  * The canonical admin modal. Built on Radix `Dialog`, which provides the
  * accessibility contract for free: focus is trapped while open and restored to

package/dist/components/ui/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Modal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,QAAA,MAAM,gBAAgB;;;IAGpB,mFAAmF;;CAE3E,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAErD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAW,EACX,WAAW,EACX,eAAe,EACf,SAAS,GACV,EAAE,UAAU,2CAmEZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Modal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAA;AAG9D,QAAA,MAAM,gBAAgB;;;IAGpB,mFAAmF;;CAE3E,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAErD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,OAAO,EAAE,WAAW,GAAG,IAAI,GAC1B,OAAO,CAIT;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAW,EACX,WAAW,EACX,eAAe,EACf,SAAS,GACV,EAAE,UAAU,2CA2EZ"}

package/dist/components/ui/Modal.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Dialog from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
+import { useRef } from 'react';
 import { adminPortalContainer } from '../../lib/portal-container.js';
 const MODAL_SIZE_CLASS = {
     md: 'max-w-lg',
@@ -9,6 +10,19 @@ const MODAL_SIZE_CLASS = {
     /** Wide form dialogs (post/page field editors) — body scrolls inside the shell. */
     xl: 'flex max-h-[min(92vh,880px)] max-w-5xl flex-col',
 };
+/**
+ * True when the event originated inside a *different* `[role="dialog"]` than
+ * `content` (e.g. MediaPickerModal / ConfirmDialog portaled above this Modal).
+ * Nested dialogs must own their own dismiss; treating their clicks as "outside"
+ * would discard the parent form before the nested selection can apply
+ * (UpChat #27 / featured-image picker).
+ */
+export function isNestedDialogEvent(target, content) {
+    if (!(target instanceof Element) || !(content instanceof Element))
+        return false;
+    const owningDialog = target.closest('[role="dialog"]');
+    return Boolean(owningDialog && owningDialog !== content);
+}
 /**
  * The canonical admin modal. Built on Radix `Dialog`, which provides the
  * accessibility contract for free: focus is trapped while open and restored to
@@ -22,6 +36,7 @@ const MODAL_SIZE_CLASS = {
  */
 export function Modal({ open, onClose, title, children, actions, size = 'md', description, initialFocusRef, onDismiss, }) {
     const scrollBody = size === 'xl';
+    const contentRef = useRef(null);
     function handleDismissAttempt() {
         if (onDismiss)
             onDismiss();
@@ -31,7 +46,13 @@ export function Modal({ open, onClose, title, children, actions, size = 'md', de
     return (_jsx(Dialog.Root, { open: open, onOpenChange: (next) => {
             if (!next)
                 handleDismissAttempt();
-        }, children: _jsxs(Dialog.Portal, { container: adminPortalContainer(), children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-60 bg-black/50" }), _jsxs(Dialog.Content, { className: `bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`, onInteractOutside: (event) => {
+        }, children: _jsxs(Dialog.Portal, { container: adminPortalContainer(), children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-60 bg-black/50" }), _jsxs(Dialog.Content, { ref: contentRef, className: `bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`, onInteractOutside: (event) => {
+                        // Radix dispatches this custom event on the outside target, so
+                        // `event.currentTarget` is not the parent Dialog.Content.
+                        if (isNestedDialogEvent(event.target, contentRef.current)) {
+                            event.preventDefault();
+                            return;
+                        }
                         if (!onDismiss)
                             return;
                         event.preventDefault();

package/dist/components/ui/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/ui/Modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAEhC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAEpE,MAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,mFAAmF;IACnF,EAAE,EAAE,iDAAiD;CAC7C,CAAA;AA+BV;;;;;;;;;;GAUG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,IAAI,EACX,WAAW,EACX,eAAe,EACf,SAAS,GACE;IACX,MAAM,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAEhC,SAAS,oBAAoB;QAC3B,IAAI,SAAS;YAAE,SAAS,EAAE,CAAA;;YACrB,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,OAAO,CACL,KAAC,MAAM,CAAC,IAAI,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,IAAI;gBAAE,oBAAoB,EAAE,CAAA;QACnC,CAAC,YAED,MAAC,MAAM,CAAC,MAAM,IAAC,SAAS,EAAE,oBAAoB,EAAE,aAC9C,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,gCAAgC,GAAG,EAC7D,MAAC,MAAM,CAAC,OAAO,IACb,SAAS,EAAE,+KAA+K,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAClN,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE;wBAC3B,IAAI,CAAC,SAAS;4BAAE,OAAM;wBACtB,KAAK,CAAC,cAAc,EAAE,CAAA;wBACtB,oBAAoB,EAAE,CAAA;oBACxB,CAAC,EACD,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE;wBACzB,IAAI,CAAC,SAAS;4BAAE,OAAM;wBACtB,KAAK,CAAC,cAAc,EAAE,CAAA;wBACtB,oBAAoB,EAAE,CAAA;oBACxB,CAAC,EACD,eAAe,EACb,eAAe;wBACb,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;4BACR,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;gCAC5B,KAAK,CAAC,cAAc,EAAE,CAAA;gCACtB,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;4BACjC,CAAC;wBACH,CAAC;wBACH,CAAC,CAAC,SAAS,aAGf,eAAK,SAAS,EAAC,oEAAoE,aACjF,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,qCAAqC,YAAE,KAAK,GAAgB,EACpF,KAAC,MAAM,CAAC,KAAK,IAAC,OAAO,kBACnB,iBACE,IAAI,EAAC,QAAQ,gBACF,cAAc,EACzB,SAAS,EAAC,sKAAsK,YAEhL,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,wBAAe,GAC9B,GACI,IACX,EACL,WAAW,IAAI,CACd,KAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAC,yCAAyC,YACpE,WAAW,GACO,CACtB,EACD,cAAK,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,CAAC,WAAW,YAClF,QAAQ,GACL,EACL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,yDAAyD,YAAE,OAAO,GAAO,CACzF,IACc,IACH,GACJ,CACf,CAAA;AACH,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/ui/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/views/page-editor/SitePreviewFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SitePreviewFrame.d.ts","sourceRoot":"","sources":["../../../src/views/page-editor/SitePreviewFrame.tsx"],"names":[],"mappings":"AAKA,OAAO,EAUL,KAAK,qBAAqB,EAE3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE7D,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,qBAAqB;IAC7B,uEAAuE;IACvE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,QAAQ,EAAE,UAAU,CAAA;IACpB,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAA;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxE,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAChD,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAA;CACpE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,QAAQ,EACR,SAAS,EACT,KAAsB,EACtB,UAAiB,EACjB,QAAQ,EACR,oBAAwB,EACxB,eAAe,EACf,YAAY,EACZ,oBAAoB,GACrB,EAAE,qBAAqB,2CAiJvB"}
+{"version":3,"file":"SitePreviewFrame.d.ts","sourceRoot":"","sources":["../../../src/views/page-editor/SitePreviewFrame.tsx"],"names":[],"mappings":"AAKA,OAAO,EAUL,KAAK,qBAAqB,EAE3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE7D,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,qBAAqB;IAC7B,uEAAuE;IACvE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,QAAQ,EAAE,UAAU,CAAA;IACpB,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAA;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxE,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAChD,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAA;CACpE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,QAAQ,EACR,SAAS,EACT,KAAsB,EACtB,UAAiB,EACjB,QAAQ,EACR,oBAAwB,EACxB,eAAe,EACf,YAAY,EACZ,oBAAoB,GACrB,EAAE,qBAAqB,2CAiLvB"}

package/dist/views/page-editor/SitePreviewFrame.js

@@ -14,6 +14,7 @@ import { getViewport } from './viewports.js';
 export function SitePreviewFrame({ src, viewport, reloadKey, title = 'Site preview', selectedId = null, sections, suppressSectionsEcho = 0, onSelectSection, onCanvasEdit, onCanvasRequestMedia, }) {
     const vp = getViewport(viewport);
     const containerRef = useRef(null);
+    const sentinelRef = useRef(null);
     const iframeRef = useRef(null);
     const [scale, setScale] = useState(1);
     const [frameHeight, setFrameHeight] = useState(600);
@@ -21,13 +22,38 @@ export function SitePreviewFrame({ src, viewport, reloadKey, title = 'Site previ
     const [canvasReady, setCanvasReady] = useState(false);
     const canvasOrigin = canvasOriginFromSrc(src);
     const lastSuppressRef = useRef(suppressSectionsEcho);
+    /**
+     * Measure from a zero-height sentinel, never `clientWidth - 48`.
+     *
+     * The 48 was `p-6` written down a second time, in a second unit, four
+     * hundred lines from the class it mirrors. It disagrees with reality the
+     * moment a scrollbar appears, and it rots silently if the gutter ever
+     * changes — nothing fails, the preview just scales slightly wrong.
+     *
+     * The sentinel is subject to the same padding, the same scrollbar and the
+     * same host scaling as the frame, so its `offsetWidth` IS the usable width
+     * and there is no arithmetic to get wrong. Same rule as `CanvasSurface`,
+     * which is where this was first learned; this file is the third copy of the
+     * arithmetic and the last one to go.
+     *
+     * Height still comes from the container, because the sentinel is
+     * deliberately zero-height and can say nothing about it — but it is read as
+     * `clientHeight - (clientWidth - sentinelWidth)`, deriving the vertical
+     * gutter from the measured horizontal one rather than hardcoding it again.
+     * That holds for the symmetric `p-6` this uses and degrades to the old
+     * behaviour rather than breaking if it ever stops being symmetric.
+     */
     useLayoutEffect(() => {
         const container = containerRef.current;
-        if (!container)
+        const sentinel = sentinelRef.current;
+        if (!container || !sentinel)
             return;
         const recompute = () => {
-            const availableW = container.clientWidth - 48;
-            const availableH = container.clientHeight - 48;
+            const availableW = sentinel.offsetWidth;
+            if (availableW <= 0)
+                return;
+            const gutter = Math.max(0, container.clientWidth - availableW);
+            const availableH = container.clientHeight - gutter;
             const next = Math.min(1, availableW / vp.width);
             setScale(next > 0 ? next : 1);
             setFrameHeight(availableH > 0 ? availableH : 600);
@@ -35,6 +61,7 @@ export function SitePreviewFrame({ src, viewport, reloadKey, title = 'Site previ
         recompute();
         const ro = new ResizeObserver(recompute);
         ro.observe(container);
+        ro.observe(sentinel);
         return () => ro.disconnect();
     }, [vp.width]);
     useEffect(() => {
@@ -128,7 +155,7 @@ export function SitePreviewFrame({ src, viewport, reloadKey, title = 'Site previ
         }, PREVIEW_SECTIONS_DEBOUNCE_MS);
         return () => window.clearTimeout(timer);
     }, [canvasOrigin, loaded, canvasReady, sections, reloadKey, suppressSectionsEcho]);
-    return (_jsxs("div", { ref: containerRef, className: "bg-muted relative h-full overflow-hidden p-6", children: [(!src || !loaded) && (_jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2", "aria-live": "polite", children: [_jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin", "aria-hidden": true }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Loading site preview\u2026" })] })), src && (_jsx("div", { className: "mx-auto", style: { width: vp.width * scale, height: frameHeight }, children: _jsx("iframe", { ref: iframeRef, src: src, title: title, onLoad: () => setLoaded(true), className: "border-border bg-card rounded-xl border shadow-sm", style: {
+    return (_jsxs("div", { ref: containerRef, className: "bg-muted relative h-full overflow-hidden p-6", children: [_jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-0" }), (!src || !loaded) && (_jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2", "aria-live": "polite", children: [_jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin", "aria-hidden": true }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Loading site preview\u2026" })] })), src && (_jsx("div", { className: "mx-auto", style: { width: vp.width * scale, height: frameHeight }, children: _jsx("iframe", { ref: iframeRef, src: src, title: title, onLoad: () => setLoaded(true), className: "border-border bg-card rounded-xl border shadow-sm", style: {
                         width: vp.width,
                         height: frameHeight / scale,
                         transform: `scale(${scale})`,

package/dist/views/page-editor/SitePreviewFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"SitePreviewFrame.js","sourceRoot":"","sources":["../../../src/views/page-editor/SitePreviewFrame.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SitePreviewFrame.js","sourceRoot":"","sources":["../../../src/views/page-editor/SitePreviewFrame.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prenta/admin",
-  "version": "0.97.3",
+  "version": "0.97.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -99,10 +99,10 @@
     "typescript": "^5.7.0",
     "vitest": "^4.1.0",
     "@prenta/component-blocks": "0.3.0",
-    "@prenta/core": "0.123.0",
     "@prenta/plugin-ai": "0.6.0",
     "@prenta/plugin-blocks": "0.2.0",
     "@prenta/plugin-commerce": "0.2.0",
+    "@prenta/core": "0.123.0",
     "@prenta/plugin-forms": "0.1.0",
     "@prenta/plugin-media": "0.2.0",
     "@prenta/plugin-navigation": "0.3.0",

package/src/__tests__/components/modal.render.test.tsx

@@ -1,4 +1,6 @@
 // @vitest-environment happy-dom
+import * as Dialog from '@radix-ui/react-dialog'
+import { useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 
@@ -10,7 +12,28 @@ import { fireEvent, render, screen } from '@testing-library/react'
  * of this.
  */
 
-const { Modal } = await import('../../components/ui/Modal.js')
+const { Modal, isNestedDialogEvent } = await import('../../components/ui/Modal.js')
+
+function NestedDialog({ onOpenChange }: { onOpenChange?: (open: boolean) => void }) {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next)
+        onOpenChange?.(next)
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Content aria-describedby={undefined}>
+          <Dialog.Title>Media picker</Dialog.Title>
+          <button type="button">Choose image</button>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
 
 describe('Modal accessibility', () => {
   it('does not render content while closed', () => {
@@ -54,4 +77,89 @@ describe('Modal accessibility', () => {
     fireEvent.keyDown(document.body, { key: 'Escape' })
     expect(onClose).toHaveBeenCalled()
   })
+
+  it('routes Escape through onDismiss when provided', () => {
+    const onClose = vi.fn()
+    const onDismiss = vi.fn()
+    render(
+      <Modal open onClose={onClose} onDismiss={onDismiss} title="Post details">
+        <p>Body</p>
+      </Modal>,
+    )
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+    expect(onDismiss).toHaveBeenCalled()
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('keeps the parent open when interacting with a portaled nested dialog', async () => {
+    const onDismiss = vi.fn()
+    render(
+      <Modal
+        open
+        onClose={() => {}}
+        onDismiss={onDismiss}
+        title="Post details"
+        description="Edit post details"
+      >
+        <p>Body</p>
+      </Modal>,
+    )
+    render(<NestedDialog />)
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    onDismiss.mockClear()
+
+    const chooseImage = screen.getByRole('button', { name: 'Choose image' })
+    fireEvent.pointerDown(chooseImage)
+    fireEvent.focusIn(chooseImage)
+
+    expect(onDismiss).not.toHaveBeenCalled()
+  })
+
+  it('closes only the portaled nested dialog on Escape', async () => {
+    const onDismiss = vi.fn()
+    const onNestedOpenChange = vi.fn()
+    render(
+      <Modal
+        open
+        onClose={() => {}}
+        onDismiss={onDismiss}
+        title="Post details"
+        description="Edit post details"
+      >
+        <p>Body</p>
+      </Modal>,
+    )
+    render(<NestedDialog onOpenChange={onNestedOpenChange} />)
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    onDismiss.mockClear()
+    onNestedOpenChange.mockClear()
+
+    fireEvent.keyDown(screen.getByRole('dialog', { name: 'Media picker' }), { key: 'Escape' })
+
+    expect(onNestedOpenChange).toHaveBeenCalledWith(false)
+    expect(screen.queryByRole('dialog', { name: 'Media picker' })).toBeNull()
+    expect(onDismiss).not.toHaveBeenCalled()
+  })
+})
+
+describe('isNestedDialogEvent (UpChat #27)', () => {
+  it('detects events that belong to a different dialog than the Modal content', () => {
+    const parent = document.createElement('div')
+    parent.setAttribute('role', 'dialog')
+    const nested = document.createElement('div')
+    nested.setAttribute('role', 'dialog')
+    const button = document.createElement('button')
+    nested.appendChild(button)
+    document.body.append(parent, nested)
+
+    // MediaPicker / ConfirmDialog portals sit outside this Modal's content —
+    // their clicks must not count as "interact outside" for dismiss.
+    expect(isNestedDialogEvent(button, parent)).toBe(true)
+    expect(isNestedDialogEvent(button, nested)).toBe(false)
+    expect(isNestedDialogEvent(parent, parent)).toBe(false)
+    expect(isNestedDialogEvent(null, parent)).toBe(false)
+
+    parent.remove()
+    nested.remove()
+  })
 })

package/src/__tests__/views/canvas-surface-shared.test.ts

@@ -58,4 +58,23 @@ describe('canvas surface is shared, not copied', () => {
       expect(read(rel), `${rel} re-implements the scale`).not.toMatch(/fitScale/)
     }
   })
+
+  /**
+   * `SitePreviewFrame` was the third copy of `clientWidth - 48` and the one
+   * followup 2 left alone, because it scales an IFRAME rather than a rendered
+   * surface and cannot render `CanvasSurface`. It can still measure the same
+   * way, and now does: the padding arithmetic is gone even though the
+   * component is not shared.
+   *
+   * Kept apart from CANVASES on purpose — the assertion here is about the
+   * measurement, not about rendering the shared surface, and folding it in
+   * would make the other two tests claim something untrue about it.
+   */
+  it('the site preview measures from a sentinel too, though it cannot share the surface', () => {
+    const preview = read('src/views/page-editor/SitePreviewFrame.tsx')
+    expect(preview, 'SitePreviewFrame still does padding arithmetic').not.toMatch(
+      /clientWidth\s*-\s*\d/,
+    )
+    expect(preview, 'SitePreviewFrame does not measure from a sentinel').toMatch(/sentinelRef/)
+  })
 })

package/src/components/ui/Modal.tsx

@@ -2,7 +2,7 @@
 
 import * as Dialog from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
-import { type ReactNode, type RefObject } from 'react'
+import { type ReactNode, type RefObject, useRef } from 'react'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 
 const MODAL_SIZE_CLASS = {
@@ -41,6 +41,22 @@ export interface ModalProps {
   onDismiss?: () => void
 }
 
+/**
+ * True when the event originated inside a *different* `[role="dialog"]` than
+ * `content` (e.g. MediaPickerModal / ConfirmDialog portaled above this Modal).
+ * Nested dialogs must own their own dismiss; treating their clicks as "outside"
+ * would discard the parent form before the nested selection can apply
+ * (UpChat #27 / featured-image picker).
+ */
+export function isNestedDialogEvent(
+  target: EventTarget | null,
+  content: EventTarget | null,
+): boolean {
+  if (!(target instanceof Element) || !(content instanceof Element)) return false
+  const owningDialog = target.closest('[role="dialog"]')
+  return Boolean(owningDialog && owningDialog !== content)
+}
+
 /**
  * The canonical admin modal. Built on Radix `Dialog`, which provides the
  * accessibility contract for free: focus is trapped while open and restored to
@@ -64,6 +80,7 @@ export function Modal({
   onDismiss,
 }: ModalProps) {
   const scrollBody = size === 'xl'
+  const contentRef = useRef<HTMLDivElement>(null)
 
   function handleDismissAttempt() {
     if (onDismiss) onDismiss()
@@ -80,8 +97,15 @@ export function Modal({
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
         <Dialog.Content
+          ref={contentRef}
           className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`}
           onInteractOutside={(event) => {
+            // Radix dispatches this custom event on the outside target, so
+            // `event.currentTarget` is not the parent Dialog.Content.
+            if (isNestedDialogEvent(event.target, contentRef.current)) {
+              event.preventDefault()
+              return
+            }
             if (!onDismiss) return
             event.preventDefault()
             handleDismissAttempt()

package/src/views/page-editor/SitePreviewFrame.tsx

@@ -73,6 +73,7 @@ export function SitePreviewFrame({
 }: SitePreviewFrameProps) {
   const vp = getViewport(viewport)
   const containerRef = useRef<HTMLDivElement>(null)
+  const sentinelRef = useRef<HTMLDivElement>(null)
   const iframeRef = useRef<HTMLIFrameElement>(null)
   const [scale, setScale] = useState(1)
   const [frameHeight, setFrameHeight] = useState(600)
@@ -81,12 +82,36 @@ export function SitePreviewFrame({
   const canvasOrigin = canvasOriginFromSrc(src)
   const lastSuppressRef = useRef(suppressSectionsEcho)
 
+  /**
+   * Measure from a zero-height sentinel, never `clientWidth - 48`.
+   *
+   * The 48 was `p-6` written down a second time, in a second unit, four
+   * hundred lines from the class it mirrors. It disagrees with reality the
+   * moment a scrollbar appears, and it rots silently if the gutter ever
+   * changes — nothing fails, the preview just scales slightly wrong.
+   *
+   * The sentinel is subject to the same padding, the same scrollbar and the
+   * same host scaling as the frame, so its `offsetWidth` IS the usable width
+   * and there is no arithmetic to get wrong. Same rule as `CanvasSurface`,
+   * which is where this was first learned; this file is the third copy of the
+   * arithmetic and the last one to go.
+   *
+   * Height still comes from the container, because the sentinel is
+   * deliberately zero-height and can say nothing about it — but it is read as
+   * `clientHeight - (clientWidth - sentinelWidth)`, deriving the vertical
+   * gutter from the measured horizontal one rather than hardcoding it again.
+   * That holds for the symmetric `p-6` this uses and degrades to the old
+   * behaviour rather than breaking if it ever stops being symmetric.
+   */
   useLayoutEffect(() => {
     const container = containerRef.current
-    if (!container) return
+    const sentinel = sentinelRef.current
+    if (!container || !sentinel) return
     const recompute = () => {
-      const availableW = container.clientWidth - 48
-      const availableH = container.clientHeight - 48
+      const availableW = sentinel.offsetWidth
+      if (availableW <= 0) return
+      const gutter = Math.max(0, container.clientWidth - availableW)
+      const availableH = container.clientHeight - gutter
       const next = Math.min(1, availableW / vp.width)
       setScale(next > 0 ? next : 1)
       setFrameHeight(availableH > 0 ? availableH : 600)
@@ -94,6 +119,7 @@ export function SitePreviewFrame({
     recompute()
     const ro = new ResizeObserver(recompute)
     ro.observe(container)
+    ro.observe(sentinel)
     return () => ro.disconnect()
   }, [vp.width])
 
@@ -186,6 +212,12 @@ export function SitePreviewFrame({
 
   return (
     <div ref={containerRef} className="bg-muted relative h-full overflow-hidden p-6">
+      {/*
+       * Zero-height sentinel — see the measurement effect above. Must stay the
+       * first child and must stay zero-height. `absolute` would defeat it: it
+       * has to sit in the padding box to inherit the gutter it is measuring.
+       */}
+      <div ref={sentinelRef} aria-hidden className="h-0" />
       {(!src || !loaded) && (
         <div
           className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2"