docblocks-react-ui 0.3.1 → 0.4.0

package/dist/{Editor-BvKqUGXH.mjs → Editor-BgG_An_T.mjs}

@@ -1,4 +1,4 @@
-import { a as isSafeDownloadHref, c as cn, i as clamp, n as TriangleAlert, o as preventDefault, r as assertNever, s as stopPropagation, t as isEmbeddablePdfUrl } from "./constants-D4FTL0ph.mjs";
+import { a as ChevronLeft, c as isSafeDownloadHref, d as cn, i as ChevronRight, l as preventDefault, n as X, o as assertNever, r as TriangleAlert, s as clamp, t as isEmbeddablePdfUrl, u as stopPropagation } from "./constants-BaAj3jDA.mjs";
 import { useStore } from "zustand";
 import * as React from "react";
 import { Component, Fragment, createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -2023,40 +2023,6 @@ function ChevronDown(props) {
 	});
 }
 //#endregion
-//#region src/shared/ui/icons/ChevronLeft.tsx
-function ChevronLeft(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 24,
-		height: 24,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
-	});
-}
-//#endregion
-//#region src/shared/ui/icons/ChevronRight.tsx
-function ChevronRight(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 24,
-		height: 24,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-	});
-}
-//#endregion
 //#region src/shared/ui/icons/ChevronUp.tsx
 function ChevronUp(props) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -3767,23 +3733,6 @@ function Underline(props) {
 	});
 }
 //#endregion
-//#region src/shared/ui/icons/X.tsx
-function X(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 24,
-		height: 24,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
-	});
-}
-//#endregion
 //#region src/shared/ui/icons/Zap.tsx
 function Zap(props) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -4137,7 +4086,11 @@ var blocks_default$1 = {
 		"wrap": "Wrap long lines",
 		"rendering": "rendering…",
 		"pdfPreviewUnavailable": "PDF preview unavailable ({error}). Showing the built-in viewer.",
-		"pdfLoading": "loading preview…"
+		"pdfLoading": "loading preview…",
+		"pdfPrevPage": "Previous page",
+		"pdfNextPage": "Next page",
+		"pdfFullscreen": "Expand to fullscreen",
+		"pdfCloseFullscreen": "Close fullscreen"
 	},
 	image: {
 		"placeholder": "image",
@@ -4149,7 +4102,13 @@ var blocks_default$1 = {
 	embed: {
 		"zoomIn": "Zoom in",
 		"zoomOut": "Zoom out",
-		"zoomReset": "Reset zoom"
+		"zoomReset": "Reset zoom",
+		"resizeHeight": "Resize embed height",
+		"editUrl": "Edit URL",
+		"saveUrl": "Save URL",
+		"cancelEdit": "Cancel",
+		"srcPlaceholder": "Embed URL (https://…)",
+		"unsafeHint": "Only absolute http(s):// URLs are supported."
 	},
 	syncEmbed: {
 		"broken": "The master document for this synced block is unavailable.",
@@ -4479,7 +4438,7 @@ var slash_default$1 = {
 		"code": "Code block",
 		"codeMermaid": "Code block (mermaid)",
 		"divider": "Divider",
-		"image": "Image",
+		"file": "File",
 		"embed": "Embed",
 		"database": "Database",
 		"frame": "Frame",
@@ -4507,7 +4466,7 @@ var slash_default$1 = {
 	},
 	embed: {
 		"urlPlaceholder": "Embed URL (https://…)",
-		"unsafeHint": "Only absolute https://… (the html kind stands the data:text/html snippet)."
+		"unsafeHint": "Only absolute http(s):// URLs are supported."
 	}
 };
 //#endregion
@@ -4579,7 +4538,11 @@ var blocks_default = {
 		"wrap": "Переносить длинные строки",
 		"rendering": "Рисование…",
 		"pdfPreviewUnavailable": "Превью PDF недоступно ({error}). Показан встроенный просмотрщик.",
-		"pdfLoading": "Загрузка превью…"
+		"pdfLoading": "Загрузка превью…",
+		"pdfPrevPage": "Предыдущая страница",
+		"pdfNextPage": "Следующая страница",
+		"pdfFullscreen": "Развернуть на весь экран",
+		"pdfCloseFullscreen": "Закрыть полноэкранный режим"
 	},
 	image: {
 		"placeholder": "изображение",
@@ -4591,7 +4554,13 @@ var blocks_default = {
 	embed: {
 		"zoomIn": "Приблизить",
 		"zoomOut": "Отдалить",
-		"zoomReset": "Сбросить масштаб"
+		"zoomReset": "Сбросить масштаб",
+		"resizeHeight": "Изменить высоту встраивания",
+		"editUrl": "Изменить ссылку",
+		"saveUrl": "Сохранить ссылку",
+		"cancelEdit": "Отмена",
+		"srcPlaceholder": "URL встраивания (https://…)",
+		"unsafeHint": "Поддерживаются только абсолютные URL http(s)://."
 	},
 	syncEmbed: {
 		"broken": "Мастер-документ для этого синхронизируемого блока недоступен.",
@@ -4921,7 +4890,7 @@ var slash_default = {
 		"code": "Блок кода",
 		"codeMermaid": "Блок кода (mermaid)",
 		"divider": "Разделитель",
-		"image": "Изображение",
+		"file": "Файл",
 		"embed": "Встраивание",
 		"database": "База данных",
 		"frame": "Фрейм",
@@ -4949,7 +4918,7 @@ var slash_default = {
 	},
 	embed: {
 		"urlPlaceholder": "URL встраивания (https://…)",
-		"unsafeHint": "Только абсолютный https://… (вид html принимает сниппет data:text/html)."
+		"unsafeHint": "Поддерживаются только абсолютные URL http(s)://."
 	}
 };
 //#endregion
@@ -10393,22 +10362,16 @@ function FrameSlashPicker({ onCommit, onCancel }) {
 //#endregion
 //#region src/editing/slash/SlashEmbedForm.tsx
 /**
-* The slash `Embed` form (the embed-creation affordance):
-* a URL input (auto-focused) + a kind selector (default `iframe` — all kinds
-* render as an iframe in v1; the kind is a renderer hint). The menu stands
-* open over the phrase while the form stands; the commit (the URL's Enter, or
-* the check) lands the phrase strip + the `insertBlock('embed', { kind, src })`
-* in the caller's transact. An empty (or whitespace-only) URL commits nothing
-* (the menu stands open on the phrase — the Image / Database contract).
-*/
-/** The embed's kind catalog (the core `EmbedAttrs.kind` enum). */
-const EMBED_KINDS = [
-	"iframe",
-	"github",
-	"figma",
-	"loom",
-	"html"
-];
+* The slash `Embed` form (the embed-creation affordance): a URL input
+* (auto-focused) only — the kind stands the `iframe` default (the renderer's
+* hint; all kinds render as an iframe). The menu stands open over the phrase
+* while the form stands; the commit (the URL's Enter, or the check) lands the
+* phrase strip + the `insertBlock('embed', { kind: "iframe", src })` in the
+* caller's transact. An empty (or whitespace-only) URL commits nothing (the
+* menu stands open on the phrase — the Image / Database contract).
+*/
+/** The embed's kind (the renderer's hint — the form stands the URL only). */
+const EMBED_KIND_IFRAME = "iframe";
 /** The form's i18n scope: the package's instance stands the provider's seat
 *  over the form (the form stands also outside the editor's scope). */
 function SlashEmbedForm(props) {
@@ -10418,7 +10381,6 @@ function SlashEmbedForm(props) {
 function SlashEmbedFormInner({ onCommit, onCancel }) {
 	const { t } = useTranslation("slash");
 	const [url, setUrl] = useState("");
-	const [kind, setKind] = useState("iframe");
 	const urlInputRef = useRef(null);
 	useEffect(() => {
 		urlInputRef.current?.focus();
@@ -10426,18 +10388,15 @@ function SlashEmbedFormInner({ onCommit, onCancel }) {
 	const commit = () => {
 		const trimmed = url.trim();
 		if (trimmed.length === 0) return;
-		if (!isSafeEmbedSrc(kind, trimmed)) return;
-		onCommit({
-			kind,
-			src: trimmed
-		});
+		if (!isSafeEmbedSrc(EMBED_KIND_IFRAME, trimmed)) return;
+		onCommit(trimmed);
 	};
 	const stopFormKey = (event) => {
 		event.stopPropagation();
 		if (event.key === "Escape") onCancel();
 	};
-	const canCommit = url.trim().length > 0 && isSafeEmbedSrc(kind, url.trim());
-	const unsafeHint = url.trim().length > 0 && !isSafeEmbedSrc(kind, url.trim()) ? t("embed.unsafeHint") : null;
+	const canCommit = url.trim().length > 0 && isSafeEmbedSrc(EMBED_KIND_IFRAME, url.trim());
+	const unsafeHint = url.trim().length > 0 && !isSafeEmbedSrc(EMBED_KIND_IFRAME, url.trim()) ? t("embed.unsafeHint") : null;
 	const onUrlKeyDown = (event) => {
 		stopFormKey(event);
 		if (event.key === "Enter") {
@@ -10446,51 +10405,36 @@ function SlashEmbedFormInner({ onCommit, onCancel }) {
 		}
 	};
 	const onUrlChange = (event) => setUrl(event.target.value);
-	const onKindChange = (event) => setKind(event.target.value);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "docblocks/slash-embed-form",
 		className: "flex w-56 flex-col gap-2 p-1",
-		children: [
-			/* @__PURE__ */ jsx(Input, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Input, {
 				size: "sm",
 				ref: urlInputRef,
 				type: "text",
 				"data-slot": "docblocks/slash-embed-url",
-				className: "rounded-sm",
+				className: "h-7 flex-1 rounded-sm",
 				placeholder: t("embed.urlPlaceholder"),
 				value: url,
 				onKeyDown: onUrlKeyDown,
 				onChange: onUrlChange
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1",
-				children: [/* @__PURE__ */ jsx(BareSelect, {
-					"data-slot": "docblocks/slash-embed-kind",
-					className: "h-7 min-w-0 flex-1 cursor-default rounded-sm px-1",
-					value: kind,
-					onKeyDown: stopFormKey,
-					onChange: onKindChange,
-					children: EMBED_KINDS.map((value) => /* @__PURE__ */ jsx("option", {
-						value,
-						children: value
-					}, value))
-				}), /* @__PURE__ */ jsx(Button, {
-					"data-slot": "docblocks/slash-embed-insert",
-					variant: "outline",
-					size: "icon",
-					className: "size-7 cursor-default rounded-sm bg-transparent disabled:cursor-default dark:bg-transparent",
-					disabled: !canCommit,
-					onMouseDown: preventDefault,
-					onClick: commit,
-					children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
-				})]
-			}),
-			unsafeHint !== null && /* @__PURE__ */ jsx("p", {
-				"data-slot": "docblocks/slash-embed-hint",
-				className: "px-1 text-xs text-destructive",
-				children: unsafeHint
-			})
-		]
+			}), /* @__PURE__ */ jsx(Button, {
+				"data-slot": "docblocks/slash-embed-insert",
+				variant: "outline",
+				size: "icon",
+				className: "\n            size-7 shrink-0 cursor-default rounded-sm bg-transparent\n            disabled:cursor-default\n            dark:bg-transparent\n          ",
+				disabled: !canCommit,
+				onMouseDown: preventDefault,
+				onClick: commit,
+				children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+			})]
+		}), unsafeHint !== null && /* @__PURE__ */ jsx("p", {
+			"data-slot": "docblocks/slash-embed-hint",
+			className: "px-1 text-xs text-destructive",
+			children: unsafeHint
+		})]
 	});
 }
 /** The v1 command list (filterable by the typed query). The `label` is the
@@ -10577,8 +10521,8 @@ const SLASH_COMMANDS = [
 		type: "divider"
 	},
 	{
-		label: "Image",
-		labelKey: "blocks.image",
+		label: "File",
+		labelKey: "blocks.file",
 		icon: Image,
 		type: "image"
 	},
@@ -11263,7 +11207,7 @@ function useSlashMenu(rootRef) {
 		doc,
 		rootRef
 	]);
-	const commitEmbed = useCallback((input) => {
+	const commitEmbed = useCallback((src) => {
 		const pending = pendingEmbedRef.current;
 		pendingEmbedRef.current = null;
 		setEmbedForm(false);
@@ -11284,8 +11228,8 @@ function useSlashMenu(rootRef) {
 					doc.deleteText(blockId, slashOffset, queryEnd);
 				}
 				const embedId = doc.insertBlock("embed", {
-					kind: input.kind,
-					src: input.src,
+					kind: "iframe",
+					src,
 					...ind
 				}, {
 					parent: parentId,
@@ -11897,15 +11841,18 @@ function NotPublishedPlaceholder() {
 //#endregion
 //#region src/editor-provider/constants.ts
 /**
-* The safe embed sandbox (the default when no `embedSandbox` policy is
-* supplied): the embedded content stands an opaque origin (no
-* `allow-same-origin`), so it cannot read the parent's DOM, cookies, or state;
-* scripts, forms, and popups still run, so interactive embeds keep working.
-* Grant `allow-same-origin` — and `allow-scripts` together with it — only for
-* trusted origins via the `embedSandbox` policy: that combination lets the
-* frame lift its own sandbox.
-*/
-const DEFAULT_EMBED_SANDBOX = "allow-scripts allow-forms allow-popups";
+* The embed sandbox (the default when no `embedSandbox` policy is supplied):
+* the embedded content runs with its own origin's grants (`allow-same-origin`
+* — the real-app requirement: a dashboard's own storage / cookies stand,
+* so the app boots like in a plain tab) + scripts, forms, and popups.
+* The frame's document stands a separate document either way: a
+* cross-origin embed cannot reach the parent's DOM or state. The one
+* posture consequence: a same-origin URL (the page's own origin) reaches
+* the parent over `window.parent` — the document author's own choice to
+* embed it. The `embedSandbox` policy stands the restriction (the
+* opaque-origin stand — no `allow-same-origin` — for the untrusted embeds).
+*/
+const DEFAULT_EMBED_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-popups";
 const defaultEmbedSandbox = () => DEFAULT_EMBED_SANDBOX;
 //#endregion
 //#region src/editor-provider/context.ts
@@ -12738,20 +12685,34 @@ function DatabaseBlock({ id, block }) {
 * only (all kinds render as an iframe; per-kind card renderers come later),
 * so an unknown kind (newer data) still renders the same iframe. `src` is a
 * URL, not a blob key: the consumer's blob resolver does not apply. The
-* iframe stands a `sandbox` attribute — the safe default (no
-* `allow-same-origin`, so the embedded content is an opaque origin and cannot
-* read the parent's DOM / state; scripts, forms, and popups still run) or the
-* consumer's `embedSandbox` policy (grant `allow-same-origin` only for trusted
-* origins). The block is not text-editable, so the wrapper carries no gutter
+* iframe stands a `sandbox` attribute — the default grants the same-origin
+* (the embedded app's own storage / cookies stand, so the real apps boot
+* like in a plain tab) or the consumer's `embedSandbox` policy (the
+* opaque-origin's restriction over the untrusted, `null` for the fully
+* trusted). The block is not text-editable, so the wrapper carries no gutter
 * handle.
 *
-* Pan/zoom (view state): the iframe stands a CSS
+* Height (the stretched stand): the wrapper's height stands the
+* `--docblocks-embed-height` token (the default — the minimum). The
+* bottom-edge resize handle (the hover reveal, the keyboard's arrows)
+* stretches it over the minimum; the stretched px stand the block's
+* `height` attr (the null idiom: null / absent = the token's default), so
+* the reload restores it and the panes share it over the wire (the commit
+* stands the gesture's rest — one write per drag, one per key press).
+*
+* Pan/zoom (the persisted view): the iframe stands a CSS
 * `translate(x, y) scale(s)` transform (the wrapper clips the overflow). The
-* transform is PURE view state — it is not document data, so `toJSON()`, the
-* wire, and the clipboard never see it (each editor instance owns its own
-* view; the two panes pan/zoom independently). The controls:
+* view stands the block's `zoom` / `panX` / `panY` attrs (the null idiom:
+* null / absent = the identity) — the reload restores the view and the wire
+* carries it over the panes (the panes share the persisted view; a pane's
+* gesture writes over the doc, the others adopt it). The write is debounced
+* over the gesture's bursts (one doc write per rest). The controls:
 *
 * - the hover toolbar (zoom in / out, the percent, reset) — always stands;
+* - the toolbar's URL edit (the editing mode's stand): the panel over the
+*   toolbar changes the `src` (the safe non-empty's write — the unsafe's
+*   rejection over the slash form's rule; the iframe's navigation over the
+*   new src, the view's / the height's attrs stand untouched);
 * - the wheel — `ctrl`/`cmd` zooms at the cursor, a plain wheel pans
 *   vertically (content opposite to the delta, the canvas idiom);
 * - the modifier drag — a `space` / `alt`-held pointer drag pans (the iframe
@@ -12771,12 +12732,36 @@ const EMBED_MAX_SCALE = 4;
 const EMBED_ZOOM_STEP = 1.2;
 /** The wheel's continuous zoom factor (the exponential of the delta, the canvas pinch idiom). */
 const EMBED_WHEEL_ZOOM = .002;
+/** The view's persist debounce (the gesture's bursts stand one doc write per rest). */
+const EMBED_PERSIST_DEBOUNCE_MS = 250;
+/** The height's fallback minimum (px): the `--docblocks-embed-height` token's default (the non-CSS environment's stand — jsdom). */
+const EMBED_MIN_HEIGHT = 300;
+/** The resize handle's key step (px per arrow press). */
+const EMBED_RESIZE_KEY_STEP = 16;
 /** The identity view: the iframe at its natural size, filling the wrapper. */
 const EMBED_VIEW_IDENTITY = {
 	scale: 1,
 	x: 0,
 	y: 0
 };
+/** The view over the block's persisted attrs (the null idiom's restore). */
+function viewOfAttrs(zoom, panX, panY) {
+	return {
+		scale: zoom ?? 1,
+		x: panX ?? 0,
+		y: panY ?? 0
+	};
+}
+/**
+* The view's wire stand: the gesture's floating-point's residue must not
+* stand a non-identity's persist (the zoom-out/in's round-trip lands the
+* 0.9999…'s "identity"). The zoom's round to the label's 1%'s precision,
+* the pan's to the 0.1 px (the sub-pixel's residue stands the identity).
+*/
+function roundViewValue(value, places) {
+	const factor = 10 ** places;
+	return Math.round(value * factor) / factor;
+}
 /**
 * Clamp the pan against the scaled embed's overflow. The embed cannot be
 * dragged past the container: at `scale <= 1` it fits (or is smaller) and
@@ -12802,17 +12787,61 @@ function zoomAtPoint(view, cx, cy, nextScale) {
 		y: cy - (cy - view.y) * factor
 	};
 }
+/**
+* The height's wire stand: the token's minimum over the wrapper (the
+* themed token's stand), the fallback's default over the non-CSS's stand
+* (jsdom's empty computed value).
+*/
+function readEmbedMinHeight(wrapper) {
+	const raw = getComputedStyle(wrapper).getPropertyValue("--docblocks-embed-height");
+	const value = Number.parseFloat(raw);
+	return Number.isFinite(value) && value > 0 ? value : EMBED_MIN_HEIGHT;
+}
 function EmbedBlock({ id, block }) {
 	const { t } = useTranslation("blocks");
 	const { kind, src, title } = block.attrs;
-	const { embedSandbox } = useEditorContext();
+	const { doc, embedSandbox, viewMode } = useEditorContext();
 	const sandbox = embedSandbox(src);
 	const wrapperRef = useRef(null);
-	const [view, setView] = useState(EMBED_VIEW_IDENTITY);
+	const [view, setView] = useState(() => viewOfAttrs(block.attrs.zoom, block.attrs.panX, block.attrs.panY));
 	const viewRef = useRef(view);
 	viewRef.current = view;
+	const [height, setHeight] = useState(block.attrs.height ?? null);
+	const heightRef = useRef(height);
+	heightRef.current = height;
+	const [tokenMin, setTokenMin] = useState(EMBED_MIN_HEIGHT);
+	const resizeSession = useRef(null);
 	const [panModifier, setPanModifier] = useState(false);
 	const panSession = useRef(null);
+	const [editOpen, setEditOpen] = useState(false);
+	const [draft, setDraft] = useState(src);
+	const editInputRef = useRef(null);
+	/** The edit's open: the draft stands the block's own src (the cancel's restore). */
+	const openEdit = () => {
+		setDraft(src);
+		setEditOpen(true);
+	};
+	const closeEdit = () => setEditOpen(false);
+	useEffect(() => {
+		if (editOpen) editInputRef.current?.focus();
+	}, [editOpen]);
+	const trimmedDraft = draft.trim();
+	const canSave = trimmedDraft.length > 0 && isSafeEmbedSrc(kind, trimmedDraft);
+	const editHint = trimmedDraft.length > 0 && !isSafeEmbedSrc(kind, trimmedDraft) ? t("embed.unsafeHint") : null;
+	/** The edit's commit: the safe non-empty draft stands the `src`'s write.
+	*  The unchanged draft writes nothing (no updatedAt's stamp, no wire update). */
+	const commitEdit = () => {
+		if (!canSave) return;
+		if (trimmedDraft !== src) doc.updateBlock(id, { src: trimmedDraft });
+		setEditOpen(false);
+	};
+	const onEditKeyDown = (event) => {
+		event.stopPropagation();
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commitEdit();
+		} else if (event.key === "Escape") closeEdit();
+	};
 	useEffect(() => {
 		const isPanModifier = (event) => event.code === "Space" || event.key === "Alt";
 		const onKeyDown = (event) => {
@@ -12879,6 +12908,125 @@ function EmbedBlock({ id, block }) {
 	const zoomOut = () => zoomBy(1 / EMBED_ZOOM_STEP);
 	const resetView = () => setView(EMBED_VIEW_IDENTITY);
 	const atIdentity = view.scale === EMBED_VIEW_IDENTITY.scale && view.x === 0 && view.y === 0;
+	/**
+	* The persisted view's write (the debounce over the gesture's bursts): the
+	* non-identity view stands the block's attrs (the zoom / panX / panY — the
+	* null idiom: the identity parts stand `null`, the reader's restore), so
+	* the reload / the new tab's embed stands the same view. The values stand
+	* the wire's precision (the 1%'s zoom, the 0.1 px's pan — the rounding's
+	* guard over the floating-point's residue). The no-op stand: a view equal
+	* to the block's own attrs writes nothing (no updatedAt's stamp, no wire
+	* update).
+	*/
+	useEffect(() => {
+		const zoom = roundViewValue(view.scale, 2);
+		const x = roundViewValue(view.x, 1);
+		const y = roundViewValue(view.y, 1);
+		if (zoom === (block.attrs.zoom ?? 1) && x === (block.attrs.panX ?? 0) && y === (block.attrs.panY ?? 0)) return;
+		const timer = window.setTimeout(() => {
+			doc.updateBlock(id, {
+				zoom: zoom === 1 ? null : zoom,
+				panX: x === 0 ? null : x,
+				panY: y === 0 ? null : y
+			});
+		}, EMBED_PERSIST_DEBOUNCE_MS);
+		return () => window.clearTimeout(timer);
+	}, [
+		view,
+		block.attrs,
+		doc,
+		id
+	]);
+	/**
+	* The remote's stand: the panes share the persisted view over the wire — a
+	* pane's peer lands a view different from the local's (the block's attrs
+	* stand the peer's write), so the local's view adopts it. Own writes land
+	* equal to the local's view and stand no adopt. The adopt clamps the
+	* restored pan to the current wrapper (a stale pan over a narrower pane's
+	* clip must not blank the embed).
+	*/
+	useEffect(() => {
+		const scale = block.attrs.zoom ?? 1;
+		const x = block.attrs.panX ?? 0;
+		const y = block.attrs.panY ?? 0;
+		const v = viewRef.current;
+		if (scale === v.scale && x === v.x && y === v.y) return;
+		const rect = wrapperRef.current?.getBoundingClientRect();
+		const clamped = rect === void 0 || rect.width === 0 || rect.height === 0 ? {
+			x,
+			y
+		} : clampEmbedPan(scale, x, y, rect.width, rect.height);
+		setView({
+			scale,
+			x: clamped.x,
+			y: clamped.y
+		});
+	}, [block.attrs]);
+	/** The token's minimum's measure (the themed's stand) over the mount. */
+	useLayoutEffect(() => {
+		const wrapper = wrapperRef.current;
+		if (wrapper === null) return;
+		setTokenMin(readEmbedMinHeight(wrapper));
+	}, []);
+	/**
+	* The remote's stand over the height: the panes share the stretched stand
+	* over the wire — a pane's peer lands a height different from the local's
+	* (the block's `height` attr's stand the peer's write), so the local's
+	* state adopts it. Own commits land equal to the local's state and stand
+	* no adopt.
+	*/
+	useEffect(() => {
+		const attrHeight = block.attrs.height ?? null;
+		if (attrHeight === heightRef.current) return;
+		setHeight(attrHeight);
+	}, [block.attrs]);
+	const onResizePointerDown = (event) => {
+		if (event.button !== 0) return;
+		event.stopPropagation();
+		const wrapper = wrapperRef.current;
+		if (wrapper === null) return;
+		const min = readEmbedMinHeight(wrapper);
+		const rect = wrapper.getBoundingClientRect();
+		event.target.setPointerCapture?.(event.pointerId);
+		resizeSession.current = {
+			pointerId: event.pointerId,
+			startY: event.clientY,
+			startHeight: rect.height,
+			min,
+			lastHeight: rect.height
+		};
+	};
+	const onResizePointerMove = (event) => {
+		const session = resizeSession.current;
+		if (session === null || event.pointerId !== session.pointerId) return;
+		const next = Math.max(session.startHeight + (event.clientY - session.startY), session.min);
+		session.lastHeight = next;
+		setHeight(next);
+	};
+	const endResize = (event) => {
+		const session = resizeSession.current;
+		if (session === null || event.pointerId !== session.pointerId) return;
+		event.target.releasePointerCapture?.(event.pointerId);
+		resizeSession.current = null;
+		const committed = Math.round(session.lastHeight);
+		if (committed <= session.min) {
+			if ((block.attrs.height ?? null) !== null) doc.updateBlock(id, { height: null });
+		} else if (committed !== (block.attrs.height ?? null)) doc.updateBlock(id, { height: committed });
+	};
+	const onResizeKeyDown = (event) => {
+		const wrapper = wrapperRef.current;
+		if (wrapper === null) return;
+		const min = readEmbedMinHeight(wrapper);
+		const delta = event.key === "ArrowDown" ? EMBED_RESIZE_KEY_STEP : event.key === "ArrowUp" ? -16 : null;
+		if (delta === null) return;
+		event.preventDefault();
+		const current = Math.max(heightRef.current ?? min, min);
+		const next = Math.max(current + delta, min);
+		setHeight(next <= min ? null : next);
+		if (next <= min) {
+			if ((block.attrs.height ?? null) !== null) doc.updateBlock(id, { height: null });
+		} else if (next !== (block.attrs.height ?? null)) doc.updateBlock(id, { height: next });
+	};
 	const onPointerDown = (event) => {
 		if (!panModifier || event.button !== 0) return;
 		if (event.target.closest("button") !== null) return;
@@ -12920,71 +13068,151 @@ function EmbedBlock({ id, block }) {
 		"data-block-id": id,
 		"data-kind": kind,
 		className: "\n        group relative my-(--docblocks-block-spacing) h-(--docblocks-embed-height) overflow-hidden\n        rounded-(--docblocks-radius) border-(length:--docblocks-divider-border-width)\n        border-(--docblocks-divider-border-color) outline-none\n      ",
-		style: { cursor: panModifier ? panSession.current !== null ? "grabbing" : "grab" : void 0 },
+		style: {
+			...height !== null ? { height: Math.max(height, tokenMin) } : {},
+			cursor: panModifier ? panSession.current !== null ? "grabbing" : "grab" : void 0
+		},
 		onPointerDown,
 		onPointerMove,
 		onPointerUp: endPan,
 		onPointerCancel: endPan,
-		children: [isSafeEmbedSrc(kind, src) ? /* @__PURE__ */ jsx("iframe", {
-			"data-slot": "docblocks/embed",
-			src,
-			title: title ?? kind,
-			loading: "lazy",
-			sandbox: sandbox ?? void 0,
-			className: "block h-full w-full border-0",
-			style: {
-				transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
-				transformOrigin: "0 0",
-				pointerEvents: panModifier ? "none" : "auto"
-			}
-		}) : /* @__PURE__ */ jsx("div", {
-			"data-slot": "docblocks/embed-blocked",
-			className: "\n            flex h-full w-full items-center justify-center p-4 text-center text-sm text-(--docblocks-muted-text-color)\n          ",
-			children: title ?? kind
-		}), /* @__PURE__ */ jsxs("div", {
-			"data-slot": "docblocks/embed-toolbar",
-			className: "\n          pointer-events-none absolute top-1.5 right-1.5 z-10 flex items-center gap-0.5 rounded-(--docblocks-radius)\n          border-(length:--docblocks-divider-border-width) border-(--docblocks-divider-border-color)\n          bg-(--docblocks-page-card-background) p-0.5 text-(--docblocks-text-color) opacity-0\n          shadow-(--docblocks-formatbar-shadow) transition-opacity\n          group-focus-within:pointer-events-auto group-focus-within:opacity-100\n          group-hover:pointer-events-auto group-hover:opacity-100\n        ",
-			children: [
-				/* @__PURE__ */ jsx(Button, {
-					"data-slot": "docblocks/embed-zoom-out",
-					variant: "ghost",
-					size: "icon",
-					"aria-label": t("embed.zoomOut"),
-					className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
-					disabled: view.scale <= EMBED_MIN_SCALE,
-					onMouseDown: preventDefault,
-					onClick: zoomOut,
-					children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					"data-slot": "docblocks/embed-zoom",
-					className: "min-w-10 px-1 text-center text-xs text-(--docblocks-text-color) tabular-nums",
-					children: [Math.round(view.scale * 100), "%"]
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					"data-slot": "docblocks/embed-zoom-in",
-					variant: "ghost",
-					size: "icon",
-					"aria-label": t("embed.zoomIn"),
-					className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
-					disabled: view.scale >= EMBED_MAX_SCALE,
-					onMouseDown: preventDefault,
-					onClick: zoomIn,
-					children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					"data-slot": "docblocks/embed-zoom-reset",
-					variant: "ghost",
-					size: "icon",
-					"aria-label": t("embed.zoomReset"),
-					className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
-					disabled: atIdentity,
-					onMouseDown: preventDefault,
-					onClick: resetView,
-					children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
-				})
-			]
-		})]
+		children: [
+			isSafeEmbedSrc(kind, src) ? /* @__PURE__ */ jsx("iframe", {
+				"data-slot": "docblocks/embed",
+				src,
+				title: title ?? kind,
+				loading: "lazy",
+				sandbox: sandbox ?? void 0,
+				className: "block h-full w-full border-0",
+				style: {
+					transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+					transformOrigin: "0 0",
+					pointerEvents: panModifier ? "none" : "auto"
+				}
+			}) : /* @__PURE__ */ jsx("div", {
+				"data-slot": "docblocks/embed-blocked",
+				className: "\n            flex h-full w-full items-center justify-center p-4 text-center text-sm text-(--docblocks-muted-text-color)\n          ",
+				children: title ?? kind
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "docblocks/embed-toolbar",
+				className: "\n          pointer-events-none absolute top-1.5 right-1.5 z-10 flex items-center gap-0.5 rounded-(--docblocks-radius)\n          border-(length:--docblocks-divider-border-width) border-(--docblocks-divider-border-color)\n          bg-(--docblocks-page-card-background) p-0.5 text-(--docblocks-text-color) opacity-0\n          shadow-(--docblocks-formatbar-shadow) transition-opacity\n          group-focus-within:pointer-events-auto group-focus-within:opacity-100\n          group-hover:pointer-events-auto group-hover:opacity-100\n        ",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						"data-slot": "docblocks/embed-zoom-out",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": t("embed.zoomOut"),
+						className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
+						disabled: view.scale <= EMBED_MIN_SCALE,
+						onMouseDown: preventDefault,
+						onClick: zoomOut,
+						children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						"data-slot": "docblocks/embed-zoom",
+						className: "min-w-10 px-1 text-center text-xs text-(--docblocks-text-color) tabular-nums",
+						children: [Math.round(view.scale * 100), "%"]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						"data-slot": "docblocks/embed-zoom-in",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": t("embed.zoomIn"),
+						className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
+						disabled: view.scale >= EMBED_MAX_SCALE,
+						onMouseDown: preventDefault,
+						onClick: zoomIn,
+						children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						"data-slot": "docblocks/embed-zoom-reset",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": t("embed.zoomReset"),
+						className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
+						disabled: atIdentity,
+						onMouseDown: preventDefault,
+						onClick: resetView,
+						children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+					}),
+					!viewMode && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "mx-0.5 h-4 w-px bg-(--docblocks-divider-border-color)",
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsx(Button, {
+						"data-slot": "docblocks/embed-edit-url",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": t("embed.editUrl"),
+						className: "size-6 cursor-default rounded-sm text-(--docblocks-text-color)",
+						onMouseDown: preventDefault,
+						onClick: openEdit,
+						children: /* @__PURE__ */ jsx(Pen, { className: "size-4" })
+					})] })
+				]
+			}),
+			!viewMode && editOpen && /* @__PURE__ */ jsxs("div", {
+				"data-slot": "docblocks/embed-edit",
+				className: "\n            absolute top-8 right-1.5 z-10 flex w-56 flex-col gap-1.5 rounded-(--docblocks-radius)\n            border-(length:--docblocks-divider-border-width) border-(--docblocks-divider-border-color)\n            bg-(--docblocks-page-card-background) p-1.5 text-(--docblocks-text-color)\n            shadow-(--docblocks-formatbar-shadow)\n          ",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							size: "sm",
+							ref: editInputRef,
+							type: "text",
+							"data-slot": "docblocks/embed-edit-input",
+							className: "h-7 flex-1 rounded-sm",
+							placeholder: t("embed.srcPlaceholder"),
+							value: draft,
+							onChange: (event) => setDraft(event.target.value),
+							onKeyDown: onEditKeyDown
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							"data-slot": "docblocks/embed-edit-save",
+							variant: "ghost",
+							size: "icon",
+							"aria-label": t("embed.saveUrl"),
+							className: "size-7 shrink-0 cursor-default rounded-sm text-(--docblocks-text-color) disabled:opacity-50",
+							disabled: !canSave,
+							onMouseDown: preventDefault,
+							onClick: commitEdit,
+							children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							"data-slot": "docblocks/embed-edit-cancel",
+							variant: "ghost",
+							size: "icon",
+							"aria-label": t("embed.cancelEdit"),
+							className: "size-7 shrink-0 cursor-default rounded-sm text-(--docblocks-text-color)",
+							onMouseDown: preventDefault,
+							onClick: closeEdit,
+							children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+						})
+					]
+				}), editHint !== null && /* @__PURE__ */ jsx("p", {
+					"data-slot": "docblocks/embed-edit-hint",
+					className: "px-1 text-xs text-destructive",
+					children: editHint
+				})]
+			}),
+			!viewMode && /* @__PURE__ */ jsx("div", {
+				"data-slot": "docblocks/embed-resize",
+				role: "slider",
+				"aria-orientation": "vertical",
+				"aria-valuemin": tokenMin,
+				"aria-valuenow": Math.max(height ?? tokenMin, tokenMin),
+				"aria-label": t("embed.resizeHeight"),
+				tabIndex: 0,
+				className: "\n            absolute inset-x-0 bottom-0 z-10 flex h-2 cursor-row-resize items-end justify-center opacity-0\n            transition-opacity outline-none\n            group-focus-within:opacity-100\n            group-hover:opacity-100\n          ",
+				onPointerDown: onResizePointerDown,
+				onPointerMove: onResizePointerMove,
+				onPointerUp: endResize,
+				onPointerCancel: endResize,
+				onKeyDown: onResizeKeyDown,
+				children: /* @__PURE__ */ jsx("div", { className: "mb-0.5 h-0.5 w-10 rounded-full bg-(--docblocks-divider-border-color)" })
+			})
+		]
 	});
 }
 //#endregion
@@ -18092,7 +18320,8 @@ function TextBlock({ id, block, tag, nested, collapsible = false, flat = false,
 				size: "icon",
 				onClick: (event) => deleteBlock(event.currentTarget, id),
 				onMouseDown: onControlMouseDown,
-				className: cn("absolute top-[calc((var(--docblocks-line-box-height)-var(--docblocks-gutter-size))/2)] right-0", "cursor-pointer rounded-full opacity-0 group-hover:opacity-100", "text-(--docblocks-gutter-color)", "size-5", selected && "opacity-100"),
+				className: cn("absolute top-[calc((var(--docblocks-line-box-height)-var(--docblocks-gutter-size))/2)]", "cursor-pointer rounded-full opacity-0 group-hover:opacity-100", "text-(--docblocks-gutter-color)", "size-5", selected && "opacity-100"),
+				style: { right: "var(--docblocks-gutter-left)" },
 				children: /* @__PURE__ */ jsx(Trash, {})
 			}),
 			block.type === "list-item" && block.attrs.list === "task" && /* @__PURE__ */ jsx(Checkbox, {
@@ -18660,67 +18889,36 @@ function TitleMenu({ slot, ariaLabel, open, onOpenChange, onCommit }) {
 //#endregion
 //#region src/canvas/FrameBlock.tsx
 /**
-* The canvas frame's renderer: the viewport window (the "camera") into the
-* frame's own surface's content. The CanvasItem's wrapper carries the
-* geometry + the selection + the move/resize preview; inside it: the full
-* box (the true window — overflow hidden) over the canvas's own background
-* (the background's color + the dot grid phase-aligned to the world's
-* grid — the seamless canvas continuation that hides the content under
-* the window) and the container's thin rounded border (the selection's
-* color on the selection). The window's content is the inert clipped
-* copy of the surface's children (FrameWindowContent) at the window's
-* offset (the surface's world origin over the box's local point): moving
-* the frame pans the window — the content stands at its world coordinates
-* (the offset re-derives over the effective geometry — the committed box
-* plus the move/resize preview) while the box slides. The frame's title
-* chip (the container's idiom) stands over the shared CanvasTitleChip.
-* The frame-chain's cycle guard: a frame rendered inside another frame's
-* window carries the chain's ids and excludes the chain + itself from its
-* window's content (the chain grows strictly down the nesting — the
-* recursion is finite, no depth limit needed).
-*/
-/** The frame chain's stand of a direct surface child (no window above).
-* The stable module constant stands the default — the memo's identity
-* comparison bails over the resting items. */
-const EMPTY_FRAME_CHAIN = /* @__PURE__ */ new Set();
-function FrameBlock({ id, movePreview = null, resizeBox = null, selected = false, frameChain = EMPTY_FRAME_CHAIN }) {
+* The canvas frame's renderer: the frame's boundary — the rectangle that
+* defines the region the page-frame block renders. The CanvasItem's wrapper
+* carries the geometry + the selection + the move/resize preview; the box
+* stands the container's thin rounded border (the selection's color on the
+* selection) over the canvas's own background. The frame renders the
+* boundary only — no content copy: the canvas's own figures stand behind the
+* transparent box (the canvas frame is a region marker, not a window), and
+* the content's mirror (the surface's children clipped to the frame's
+* region) stands on the page-frame block's side (FramePageBlock). The
+* frame's title chip (the container's idiom) stands over the shared
+* CanvasTitleChip.
+*/
+function FrameBlock({ id, selected = false }) {
 	const { t } = useTranslation("canvas");
-	const { parentId, parentType } = useBlockContext();
+	const { parentType } = useBlockContext();
 	const block = useBlock(id);
 	if (parentType !== "surface" || block === void 0 || block.type !== "frame") return /* @__PURE__ */ jsx(PlaceholderBlock, { type: "frame" });
-	const committed = effectiveGeometry(block);
-	const effective = {
-		x: (resizeBox?.x ?? committed.x) + (movePreview?.dx ?? 0),
-		y: (resizeBox?.y ?? committed.y) + (movePreview?.dy ?? 0),
-		w: resizeBox?.w ?? committed.w,
-		h: resizeBox?.h ?? committed.h
-	};
-	const offset = frameWindowOffset(effective);
 	const selectedColor = "var(--docblocks-canvas-selection-border-color)";
-	const ringColor = selected ? selectedColor : "var(--docblocks-canvas-group-border-color)";
-	const boxStyle = {
-		backgroundColor: "var(--docblocks-canvas-background)",
-		...frameDotBackground(effective.x - effective.w / 2, effective.y - effective.h / 2),
-		boxShadow: `inset 0 0 0 1px ${ringColor}`,
-		outline: selected ? `var(--docblocks-canvas-selection-border-width) solid ${selectedColor}` : void 0,
-		outlineOffset: 1
-	};
-	const excludedIds = useMemo(() => [...frameChain, id], [frameChain, id]);
-	const childFrameChain = useMemo(() => /* @__PURE__ */ new Set([...frameChain, id]), [frameChain, id]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "docblocks/frame",
 		"data-block-id": id,
 		className: "h-full w-full",
 		children: [/* @__PURE__ */ jsx("div", {
-			"data-slot": "docblocks/frame-window",
-			className: "absolute inset-0 overflow-hidden rounded-(--docblocks-radius)",
-			style: boxStyle,
-			children: /* @__PURE__ */ jsx(FrameWindowContent, {
-				surfaceId: parentId,
-				offset,
-				excludedIds,
-				frameChain: childFrameChain
-			})
+			"data-slot": "docblocks/frame-boundary",
+			className: "absolute inset-0 rounded-(--docblocks-radius)",
+			style: {
+				boxShadow: `inset 0 0 0 1px ${selected ? selectedColor : "var(--docblocks-canvas-group-border-color)"}`,
+				outline: selected ? `var(--docblocks-canvas-selection-border-width) solid ${selectedColor}` : void 0,
+				outlineOffset: 1
+			}
 		}), /* @__PURE__ */ jsx(CanvasTitleChip, {
 			id,
 			title: block.attrs?.title ?? "",
@@ -22768,7 +22966,7 @@ const CANVAS_ITEM_LABEL_KEYS = {
 * order, the line can stand over or under a figure); `interactive`
 * toggles the line's hit path (the page view's surface stands it inert).
 */
-const CanvasItem = memo(function CanvasItem({ id, pendingConnector = null, movePreview = null, resizeBox = null, interactive = true, kbFocused = false, frameChain = EMPTY_FRAME_CHAIN }) {
+const CanvasItem = memo(function CanvasItem({ id, pendingConnector = null, movePreview = null, resizeBox = null, interactive = true, kbFocused = false }) {
 	const { t } = useTranslation("canvas");
 	const { store, renderers } = useEditorContext();
 	const { siblings } = useBlockContext();
@@ -22803,10 +23001,7 @@ const CanvasItem = memo(function CanvasItem({ id, pendingConnector = null, moveP
 			tag: "div"
 		}) : block.type === "frame" ? /* @__PURE__ */ jsx(FrameBlock, {
 			id,
-			movePreview,
-			resizeBox,
-			selected,
-			frameChain
+			selected
 		}) : block.type === "group" ? /* @__PURE__ */ jsx(GroupBlock, {
 			id,
 			block,
@@ -22853,7 +23048,7 @@ const CanvasItem = memo(function CanvasItem({ id, pendingConnector = null, moveP
 		style,
 		children: content
 	});
-}, (prev, next) => prev.id === next.id && prev.pendingConnector === next.pendingConnector && prev.movePreview === next.movePreview && prev.resizeBox === next.resizeBox && prev.interactive === next.interactive && prev.kbFocused === next.kbFocused && prev.frameChain === next.frameChain);
+}, (prev, next) => prev.id === next.id && prev.pendingConnector === next.pendingConnector && prev.movePreview === next.movePreview && prev.resizeBox === next.resizeBox && prev.interactive === next.interactive && prev.kbFocused === next.kbFocused);
 //#endregion
 //#region src/canvas/ConnectorArrowDefs.tsx
 /** The surface's arrowhead defs (the hidden 0x0 svg): the marker ids stand
@@ -22968,7 +23163,7 @@ function ConnectorArrowDefs({ id }) {
 *  context providers are not DOM nodes, so several surfaces merge onto the
 *  same canvas in root order (the later surface paints on top: the DOM
 *  order is the z-order). */
-function SurfaceLayer({ id, children, pendingConnector, movePreview, resizePreview, endpointDrag, endpointPreview, showPorts, endpointSnap, kbFocusId = null, inert = false, excludedIds, frameChain }) {
+function SurfaceLayer({ id, children, pendingConnector, movePreview, resizePreview, endpointDrag, endpointPreview, showPorts, endpointSnap, kbFocusId = null, inert = false, excludedIds }) {
 	const contextValue = useBlockContextValue(id, children, "surface");
 	const session = useMemo(() => ({
 		movePreview,
@@ -23001,8 +23196,7 @@ function SurfaceLayer({ id, children, pendingConnector, movePreview, resizePrevi
 			pendingConnector,
 			movePreview: movePreview !== null && movePreview.ids.includes(childId) ? movePreview : null,
 			resizeBox: resizePreview !== null && resizePreview.id === childId ? resizePreview.box : null,
-			kbFocused: kbFocusId === childId,
-			frameChain
+			kbFocused: kbFocusId === childId
 		}, childId)),
 		showPorts && /* @__PURE__ */ jsx(PortDots, {
 			id,
@@ -23097,8 +23291,7 @@ function PortDots({ id, snapped }) {
 //#endregion
 //#region src/canvas/FrameWindowContent.tsx
 const EMPTY_IDS$1 = [];
-const EMPTY_CHAIN = /* @__PURE__ */ new Set();
-function FrameWindowContent({ surfaceId, offset, excludedIds = EMPTY_IDS$1, frameChain = EMPTY_CHAIN, className }) {
+function FrameWindowContent({ surfaceId, offset, excludedIds = EMPTY_IDS$1, className }) {
 	const surface = useBlock(surfaceId);
 	const children = surface !== void 0 && surface.type === "surface" ? surface.children ?? EMPTY_IDS$1 : EMPTY_IDS$1;
 	return /* @__PURE__ */ jsx("div", {
@@ -23124,8 +23317,7 @@ function FrameWindowContent({ surfaceId, offset, excludedIds = EMPTY_IDS$1, fram
 				endpointSnap: null,
 				kbFocusId: null,
 				inert: true,
-				excludedIds,
-				frameChain
+				excludedIds
 			}), /* @__PURE__ */ jsx(ConnectorLabelChips, { children })]
 		})
 	});
@@ -23134,11 +23326,13 @@ function FrameWindowContent({ surfaceId, offset, excludedIds = EMPTY_IDS$1, fram
 //#region src/blocks/FramePageBlock.tsx
 /**
 * The page-frame block's renderer: the inline window into the referenced
-* canvas frame's surface — the same window the canvas frame stands
-* (FrameWindowContent over the window's offset; the box's background the
-* canvas's own background + the dot grid phase-aligned to the world's
-* grid; the container's thin rounded border), inlined in the page flow at
-* 1:1 (no fit/zoom controls — the v1 boundary). The box's height is the
+* canvas frame's surface — the content's mirror (FrameWindowContent over
+* the window's offset; the box's background the canvas's own background +
+* the dot grid phase-aligned to the world's grid; the container's thin
+* rounded border), inlined in the page flow at
+* 1:1 (no fit/zoom controls — the v1 boundary). The canvas frame stands the
+* boundary only (a region marker) — this page block is the sole renderer
+* of the frame's content. The box's height is the
 * referenced frame's 1:1; the width is the frame's width clipped to the
 * row's measured width (the window's center stays at the frame's center —
 * a narrow row clips the wide window horizontally, the offset and the dot
@@ -23232,7 +23426,6 @@ function FramePageWindow({ id, frameId, surfaceId, referenced }) {
 	};
 	const title = referenced.attrs?.title ?? "";
 	const excludedIds = useMemo(() => [frameId], [frameId]);
-	const frameChain = useMemo(() => /* @__PURE__ */ new Set([frameId]), [frameId]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: rowRef,
 		"data-slot": "docblocks/frame-page",
@@ -23250,8 +23443,7 @@ function FramePageWindow({ id, frameId, surfaceId, referenced }) {
 			children: /* @__PURE__ */ jsx(FrameWindowContent, {
 				surfaceId,
 				offset,
-				excludedIds,
-				frameChain
+				excludedIds
 			})
 		})
 	});
@@ -27766,6 +27958,15 @@ function positionAtPoint(doc, root, x, y) {
 * soft-break lines) itself — a permanent capture listener, independent of
 * the session (the real pointer's third press starts no session: the
 * pointer's detail stands 3 and the session guard returns).
+*
+* The iframe's focus exception: a press while the document's focus stands
+* in a frame (the embed's iframe) tears the session down and lets the
+* mousedown's default stand — the default's focus move out of the frame
+* is the editor's document's focus, and suppressing it would seat the
+* caret over the unfocused document (no visible caret, the keys' no-
+* stand). The browser's native caret's seat stands the press; a double
+* press over the focused frame stands the same stand over the detail's
+* check.
 */
 function useCrossDrag(rootRef, doc) {
 	const sessionRef = useRef(null);
@@ -27799,12 +28000,19 @@ function useCrossDrag(rootRef, doc) {
 			if (session === null || root === null || event.button !== 0) return;
 			const target = event.target instanceof Element ? event.target : null;
 			if (target === null || !root.contains(target)) return;
-			if (event.detail >= 2) {
+			const tearDown = () => {
 				sessionRef.current = null;
 				window.removeEventListener("pointermove", move);
 				window.removeEventListener("pointerup", end);
 				window.removeEventListener("pointercancel", end);
 				window.removeEventListener("mousedown", mousedown, true);
+			};
+			if (event.detail >= 2) {
+				tearDown();
+				return;
+			}
+			if (document.activeElement instanceof HTMLIFrameElement) {
+				tearDown();
 				return;
 			}
 			event.preventDefault();
@@ -27846,6 +28054,7 @@ function useCrossDrag(rootRef, doc) {
 			if (target === null || !root.contains(target)) return;
 			const inner = target.closest("[data-slot=\"docblocks/block-content\"]");
 			if (inner === null || inner.closest("[data-slot=\"docblocks/editor\"]") !== root) return;
+			if (document.activeElement instanceof HTMLIFrameElement) return;
 			const blockId = inner.dataset.blockId;
 			const head = locatePosition(inner, 0);
 			const tail = locatePosition(inner, doc.getTextLength(blockId));
@@ -28357,7 +28566,8 @@ const RowItem = memo(function RowItem({ node, layoutSlide, isDragged, animated,
 				size: "icon",
 				onClick: (event) => deleteBlock(event.currentTarget, node.id),
 				onMouseDown: onHandleMouseDown,
-				className: cn("absolute top-[calc((var(--docblocks-line-box-height)-var(--docblocks-gutter-size))/2)] right-0", "cursor-pointer rounded-full opacity-0 group-hover:opacity-100", "text-(--docblocks-gutter-color)", "size-5", selected && "opacity-100"),
+				className: cn("absolute top-[calc((var(--docblocks-line-box-height)-var(--docblocks-gutter-size))/2)]", "cursor-pointer rounded-full opacity-0 group-hover:opacity-100", "text-(--docblocks-gutter-color)", "size-5", selected && "opacity-100"),
+				style: { right: "var(--docblocks-gutter-left)" },
 				children: /* @__PURE__ */ jsx(Trash, {})
 			}),
 			/* @__PURE__ */ jsx(BlockNodeView, {