@bettercms-ai/kit 2.0.0-next.0 → 2.0.0-next.1

package/dist/controls/rich-text/blocks.js

@@ -1,18 +1,18 @@
 import { cn } from "../../lib/cn.js";
 import { useKitServices } from "../../context.js";
 import { Button, IconButton } from "../../ui/button.js";
-import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
+import { Menu, MenuContent, MenuItem, MenuTrigger, Popover, PopoverContent, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
 import { Input, Textarea } from "../../ui/input.js";
 import { TableEditor } from "../table/table-editor.js";
-import { SchemaForm } from "../../engine/schema-form.js";
-import { eventKey } from "../../lib/key-event.js";
-import { FloatingPanel } from "../../ui/floating-panel.js";
-import { CALLOUT_TONES, detectEmbed, placeCaret } from "./dom.js";
+import { VideoPreview } from "../media.js";
+import { ArticleActions, ArticleCard, ArticleForm, ArticlePanel, articleCardKeyDown, useArticleOpen } from "./article-shell.js";
+import { CALLOUT_TONES, placeCaret } from "./dom.js";
 import { LinkForm } from "./link-form.js";
+import { EmbedBlock } from "./embed.js";
 import { ComponentCard } from "./component-card.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { IconAlertTriangle, IconAlt, IconArrowsHorizontal, IconArrowsMove, IconBrandCodepen, IconBrandFigma, IconBrandSpotify, IconBrandVimeo, IconBrandX, IconBrandYoutube, IconBulb, IconCheck, IconChevronDown, IconChevronRight, IconComponents, IconCopy, IconDimensions, IconDots, IconFileText, IconFileUpload, IconHeadphones, IconInfoCircle, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight, IconLayoutSidebar, IconLayoutSidebarRight, IconLibraryPhoto, IconLink, IconMap, IconMicrophone, IconPhoto, IconPlayerPlayFilled, IconQuote, IconReplace, IconSettings, IconTrash, IconWorld, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconAlt, IconArrowsHorizontal, IconBulb, IconCheck, IconChevronDown, IconChevronRight, IconComponents, IconCopy, IconFileText, IconFileUpload, IconInfoCircle, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight, IconLibraryPhoto, IconLink, IconPhoto, IconQuote, IconReplace, IconTrash, IconWorld } from "@tabler/icons-react";
 //#region src/controls/rich-text/blocks.tsx
 /**
 * RICH TEXT · rich blocks ("islands", V2 HEAD controls/rich-text/blocks.tsx). Each renders through a portal into a
@@ -29,8 +29,7 @@ import { IconAlertTriangle, IconAlt, IconArrowsHorizontal, IconArrowsMove, IconB
 * block (article-blocks.tsx ArticleBlock + PullQuotePreview): drawn as the reader sees it, edited in the floating
 * properties panel (4 settings → panel, CPO D54) through the kit SchemaForm. Key takeaways are V2's article block too,
 * written in the text itself (article-blocks.tsx TakeawaysEditor, surface "inline"): a title line and a line per point.
-* The embed is V2's article block too (ArticleBlock surface "popover" + EmbedPreview): a placeholder card of the link's
-* provider, edited in a popover beside it (Link, Title; V2's Shape has no stored key, see dom.ts).
+* The embed island draws embed.tsx's block (V2's article Embed: Link, Title, Shape), keeping the keys it lacks absent.
 */
 function Island({ el, ctx }) {
 	const kind = el.getAttribute("data-rt-island");
@@ -114,7 +113,7 @@ function Island({ el, ctx }) {
 			autoFocus,
 			m: model,
 			set
-		}) : kind === "embed" ? /* @__PURE__ */ jsx(EmbedBlock, {
+		}) : kind === "embed" ? /* @__PURE__ */ jsx(EmbedIsland, {
 			el,
 			ctx,
 			autoFocus,
@@ -135,6 +134,32 @@ function Island({ el, ctx }) {
 		}) : null
 	});
 }
+/** The island's stored embed (keys absent when the block lacks them) through embed.tsx's block (V2's model). */
+function EmbedIsland({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(EmbedBlock, {
+		m: {
+			url: m.url ?? "",
+			title: m.title ?? "",
+			aspect: m.aspect ?? "16:9"
+		},
+		set: (fn, label) => set((prev) => {
+			const next = fn({
+				url: prev.url ?? "",
+				title: prev.title ?? "",
+				aspect: prev.aspect ?? "16:9"
+			});
+			const out = { ...prev };
+			if (next.url !== (prev.url ?? "")) out.url = next.url;
+			if (next.title !== (prev.title ?? "")) out.title = next.title;
+			if (next.aspect !== (prev.aspect ?? "16:9")) out.aspect = next.aspect;
+			return out;
+		}, label),
+		el,
+		ctx,
+		autoFocus,
+		shape: ctx.allows?.("embedAspect") ?? false
+	});
+}
 var Sep = () => /* @__PURE__ */ jsx("span", {
 	"aria-hidden": true,
 	className: "mx-0.5 h-4 w-px shrink-0 bg-kit-line"
@@ -744,13 +769,6 @@ function ToggleBlock({ m, set, el, ctx, autoFocus }) {
 	});
 }
 var videoUrlOk = (u) => /^https?:\/\/\S+$/i.test(u) || /^\/(?!\/)\S*$/.test(u);
-function videoEmbedSrc(url) {
-	const yt = /(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([\w-]{6,})/i.exec(url);
-	if (yt) return `https://www.youtube-nocookie.com/embed/${yt[1]}`;
-	const vimeo = /vimeo\.com\/(?:video\/)?(\d+)/i.exec(url);
-	if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
-	return null;
-}
 function VideoBlock({ m, set, el, ctx, autoFocus }) {
 	const [draft, setDraft] = React.useState(m.url ?? "");
 	React.useEffect(() => setDraft(m.url ?? ""), [m.url]);
@@ -764,7 +782,6 @@ function VideoBlock({ m, set, el, ctx, autoFocus }) {
 		set({ url: u }, "Set video link");
 	};
 	const ro = ctx.readOnly;
-	const frame = m.url ? videoEmbedSrc(m.url) : null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "group/blk rounded-kit-lg border border-kit-line bg-kit-subtle p-2.5",
 		"data-rt-isolate": "",
@@ -802,20 +819,9 @@ function VideoBlock({ m, set, el, ctx, autoFocus }) {
 				className: "mb-2 px-1 text-kit-xs text-kit-danger-fg",
 				children: error
 			}) : null,
-			frame ? /* @__PURE__ */ jsx("iframe", {
-				src: frame,
-				title: m.title || "Video preview",
-				loading: "lazy",
-				tabIndex: -1,
-				sandbox: "allow-scripts allow-same-origin allow-presentation",
-				referrerPolicy: "strict-origin-when-cross-origin",
-				className: "pointer-events-none aspect-video w-full rounded-kit-md border-0 bg-kit-muted"
-			}) : m.url ? /* @__PURE__ */ jsx("video", {
-				src: m.url,
-				title: m.title || "Video preview",
-				controls: true,
-				preload: "metadata",
-				className: "aspect-video w-full rounded-kit-md bg-kit-muted"
+			m.url ? /* @__PURE__ */ jsx(VideoPreview, {
+				url: m.url,
+				title: "Video"
 			}) : /* @__PURE__ */ jsx("p", {
 				className: "px-1 pb-0.5 text-kit-xs text-kit-fg-3",
 				children: "No video yet."
@@ -1101,132 +1107,52 @@ var PULL_QUOTE_SCHEMA = {
 		}
 	]
 };
-var openArticle = null;
-var articleSubs = /* @__PURE__ */ new Set();
-var setOpenArticle = (next) => {
-	openArticle = next;
-	articleSubs.forEach((f) => f());
-};
-function useOpenArticle() {
-	return React.useSyncExternalStore((cb) => (articleSubs.add(cb), () => void articleSubs.delete(cb)), () => openArticle, () => openArticle);
-}
-var controlOf = (el) => Array.from(el.querySelectorAll("textarea, input:not([type=hidden]), [contenteditable=true], [role=combobox]")).find((n) => n.getClientRects().length) ?? Array.from(el.querySelectorAll(":scope > :not(:first-child) button")).find((n) => n.getClientRects().length);
-function focusField(root, key) {
-	if (!root) return;
-	const rows = Array.from(root.querySelectorAll("[data-field-key]"));
-	const row = key && rows.find((r) => r.getAttribute("data-field-key") === key) || rows[0];
-	if (!row) return;
-	row.scrollIntoView({ block: "nearest" });
-	controlOf(row)?.focus({ preventScroll: true });
-}
 function PullQuoteBlock({ m, set, el, ctx, autoFocus }) {
 	const label = PULL_QUOTE_LABEL;
-	const uid = React.useId();
 	const card = React.useRef(null);
 	const [cardEl, setCardEl] = React.useState(null);
-	const open = useOpenArticle();
-	const editing = open?.id === uid;
+	const ro = !!ctx.readOnly;
+	const { open, editing, openPanel, close } = useArticleOpen({
+		ro,
+		autoFocus
+	});
 	const cardRef = React.useCallback((n) => {
 		card.current = n;
 		if (n) setCardEl(n);
 	}, []);
-	const ro = !!ctx.readOnly;
 	const modelRef = React.useRef(m);
 	modelRef.current = m;
-	const openPanel = React.useCallback((k) => {
-		if (!ro) setOpenArticle({
-			id: uid,
-			focusKey: k ?? null,
-			nonce: (openArticle?.nonce ?? 0) + 1
-		});
-	}, [uid, ro]);
-	const close = React.useCallback(() => {
-		if (openArticle?.id === uid) setOpenArticle(null);
-	}, [uid]);
 	const focusCard = React.useCallback(() => requestAnimationFrame(() => card.current?.focus({ preventScroll: true })), []);
-	React.useEffect(() => () => {
-		if (openArticle?.id === uid) setOpenArticle(null);
-	}, [uid]);
-	React.useEffect(() => {
-		if (autoFocus && !ro) openPanel();
-	}, []);
 	/** a form edit joins the body's one undo history (D54); typing coalesces per field */
 	const commit = (next) => {
 		const prev = modelRef.current;
 		const field = Object.keys(next).find((k) => next[k] !== prev[k]) ?? "";
 		set(() => next, `Edit ${label.toLowerCase()} ${field}`);
 	};
-	const onKeyDown = (e) => {
-		if (e.defaultPrevented || e.target !== card.current) return;
-		const mod = e.metaKey || e.ctrlKey;
-		const k = eventKey(e);
-		if (mod && k === "z") {
-			e.preventDefault();
-			e.stopPropagation();
-			if (e.shiftKey) ctx.redo?.();
-			else ctx.undo?.();
-			return;
-		}
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			openPanel();
-			return;
-		}
-		if (e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			if (editing) close();
-			else ctx.exit(el);
-			return;
-		}
-		if (ro) return;
-		if (mod && k === "d" && ctx.duplicate) {
-			e.preventDefault();
-			e.stopPropagation();
-			ctx.duplicate(el);
-		} else if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && ctx.move) {
-			e.preventDefault();
-			ctx.move(el, e.key === "ArrowUp" ? -1 : 1);
-			focusCard();
-		} else if (e.key === "Backspace" || e.key === "Delete") {
-			e.preventDefault();
-			ctx.remove(el);
-		}
-	};
-	const actions = ro ? null : /* @__PURE__ */ jsxs("div", {
-		className: cn("absolute -top-3.5 right-2 z-[2] flex items-center gap-0.5 rounded-kit-md border border-kit-line bg-kit-surface-raised p-0.5 opacity-0 shadow-kit-sm transition-opacity", "group-hover/art:opacity-100 group-focus-within/art:opacity-100 pointer-coarse:opacity-100", editing && "opacity-100"),
-		children: [/* @__PURE__ */ jsx(IconButton, {
-			size: "xs",
-			label: `Edit ${label.toLowerCase()}`,
-			onClick: () => editing ? close() : openPanel(),
-			children: /* @__PURE__ */ jsx(IconSettings, { stroke: 1.5 })
-		}), /* @__PURE__ */ jsx(IconButton, {
-			size: "xs",
-			label: `Remove ${label.toLowerCase()}`,
-			onClick: () => ctx.remove(el),
-			className: "hover:text-kit-danger-fg",
-			children: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 })
-		})]
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ArticleCard, {
 		ref: cardRef,
-		role: "group",
-		tabIndex: 0,
-		"aria-label": `${label}${editing ? ", editing" : ""}`,
-		"aria-roledescription": "block",
-		"aria-haspopup": "dialog",
-		"aria-expanded": editing,
-		"data-rt-isolate": "",
-		"data-article-block": "pullquote",
-		onKeyDown,
-		onClick: (e) => {
-			if (ro || !e.currentTarget.contains(e.target)) return;
-			const t = e.target;
-			if (t.closest("button,a,[role=menuitem]")) return;
-			openPanel(t.closest("[data-field]")?.getAttribute("data-field") ?? null);
-		},
-		className: cn("group/art relative rounded-kit-lg outline-none transition-shadow duration-150", !ro && "cursor-pointer", "focus-visible:shadow-[0_0_0_1px_var(--kit-line-strong)]", editing ? "shadow-[0_0_0_2px_var(--kit-accent)] focus-visible:shadow-[0_0_0_2px_var(--kit-accent)]" : !ro && "hover:shadow-[0_0_0_1px_var(--kit-line)]"),
-		children: [/* @__PURE__ */ jsx(PullQuotePreview, { m }), actions]
+		label,
+		kind: "pullquote",
+		ro,
+		editing,
+		onOpen: openPanel,
+		onKeyDown: articleCardKeyDown({
+			card,
+			ctx,
+			el,
+			ro,
+			editing,
+			onOpen: openPanel,
+			onClose: close,
+			focusCard
+		}),
+		children: [/* @__PURE__ */ jsx(PullQuotePreview, { m }), /* @__PURE__ */ jsx(ArticleActions, {
+			label,
+			ctx,
+			el,
+			editing,
+			onEdit: () => editing ? close() : openPanel()
+		})]
 	}), editing ? /* @__PURE__ */ jsx(ArticlePanel, {
 		label,
 		anchor: cardEl,
@@ -1236,22 +1162,12 @@ function PullQuoteBlock({ m, set, el, ctx, autoFocus }) {
 		focusBack: focusCard,
 		ctx,
 		el,
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-article-form": "",
-			className: "min-w-0",
-			children: [/* @__PURE__ */ jsx(SchemaForm, {
-				schema: PULL_QUOTE_SCHEMA,
-				value: m,
-				onChange: (v) => commit(v),
-				variant: "panel",
-				scroll: false,
-				readOnly: ro,
-				rootLabel: label,
-				env: {
-					docId: `article:${PULL_QUOTE_SCHEMA.name}`,
-					docTitle: label
-				}
-			}), /* @__PURE__ */ jsx("style", { children: `[data-article-form] [data-kit-form] section:first-of-type { border-top-width: 0; margin-top: 0; padding-top: 0; }` })]
+		children: /* @__PURE__ */ jsx(ArticleForm, {
+			schema: PULL_QUOTE_SCHEMA,
+			label,
+			value: m,
+			onChange: (v) => commit(v),
+			ro
 		})
 	}) : null] });
 }
@@ -1274,47 +1190,19 @@ function TakeawaysBlock({ m, set, el, ctx, autoFocus }) {
 	});
 	const setPoint = (i, v) => set({ points: m.points.map((p, j) => j === i ? v : p) }, `Edit key takeaways point ${i + 1}`);
 	/** V2 ArticleBlock onKeyDown, on the block itself (its lines handle their own keys) */
-	const onKeyDown = (e) => {
-		if (e.defaultPrevented || e.target !== card.current) return;
-		const mod = e.metaKey || e.ctrlKey;
-		const k = eventKey(e);
-		if (mod && k === "z") {
-			e.preventDefault();
-			e.stopPropagation();
-			if (e.shiftKey) ctx.redo?.();
-			else ctx.undo?.();
-			return;
-		}
-		if (e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			ctx.exit(el);
-			return;
-		}
-		if (ro) return;
-		if (mod && k === "d" && ctx.duplicate) {
-			e.preventDefault();
-			e.stopPropagation();
-			ctx.duplicate(el);
-		} else if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && ctx.move) {
-			e.preventDefault();
-			ctx.move(el, e.key === "ArrowUp" ? -1 : 1);
-			focusCard();
-		} else if (e.key === "Backspace" || e.key === "Delete") {
-			e.preventDefault();
-			ctx.remove(el);
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
+	const onKeyDown = articleCardKeyDown({
+		card,
+		ctx,
+		el,
+		ro,
+		focusCard
+	});
+	return /* @__PURE__ */ jsxs(ArticleCard, {
 		ref: card,
-		role: "group",
-		tabIndex: 0,
-		"aria-label": label,
-		"aria-roledescription": "block",
-		"data-rt-isolate": "",
-		"data-article-block": "takeaways",
+		label,
+		kind: "takeaways",
+		ro,
 		onKeyDown,
-		className: "group/art relative rounded-kit-lg outline-none transition-shadow duration-150 focus-visible:shadow-[0_0_0_1px_var(--kit-line-strong)]",
 		children: [/* @__PURE__ */ jsxs("aside", {
 			className: "rounded-kit-lg border border-kit-line bg-kit-subtle px-4 py-3",
 			"aria-label": m.title || label,
@@ -1370,453 +1258,13 @@ function TakeawaysBlock({ m, set, el, ctx, autoFocus }) {
 					})]
 				}, i))
 			})]
-		}), ro ? null : /* @__PURE__ */ jsx("div", {
-			className: cn("absolute -top-3.5 right-2 z-[2] flex items-center gap-0.5 rounded-kit-md border border-kit-line bg-kit-surface-raised p-0.5 opacity-0 shadow-kit-sm transition-opacity", "group-hover/art:opacity-100 group-focus-within/art:opacity-100 pointer-coarse:opacity-100"),
-			children: /* @__PURE__ */ jsx(IconButton, {
-				size: "xs",
-				label: `Remove ${label.toLowerCase()}`,
-				onClick: () => ctx.remove(el),
-				className: "hover:text-kit-danger-fg",
-				children: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 })
-			})
-		})]
-	});
-}
-var EMBED_LABEL = "Embed";
-/** V2 article.ts ARTICLE_SCHEMAS.embed without `aspect` (the stored block keeps no shape): the popover is built from it. */
-var EMBED_SCHEMA = {
-	name: "embed",
-	title: EMBED_LABEL,
-	kind: "object",
-	icon: "code",
-	fields: [{
-		name: "url",
-		title: "Link",
-		type: "url",
-		placeholder: "Paste a YouTube, X, CodePen, Figma or map link",
-		validation: { required: true }
-	}, {
-		name: "title",
-		title: "Title",
-		type: "string",
-		validation: {
-			required: true,
-			max: 120
-		},
-		description: "Not shown. Read by screen readers."
-	}]
-};
-function EmbedBlock({ m, set, el, ctx, autoFocus }) {
-	const label = EMBED_LABEL;
-	const uid = React.useId();
-	const card = React.useRef(null);
-	const form = React.useRef(null);
-	const open = useOpenArticle();
-	const editing = open?.id === uid;
-	const ro = !!ctx.readOnly;
-	const modelRef = React.useRef(m);
-	modelRef.current = m;
-	const openPopover = React.useCallback((k) => {
-		if (!ro) setOpenArticle({
-			id: uid,
-			focusKey: k ?? null,
-			nonce: (openArticle?.nonce ?? 0) + 1
-		});
-	}, [uid, ro]);
-	const close = React.useCallback(() => {
-		if (openArticle?.id === uid) setOpenArticle(null);
-	}, [uid]);
-	const focusCard = React.useCallback(() => requestAnimationFrame(() => card.current?.focus({ preventScroll: true })), []);
-	React.useEffect(() => () => {
-		if (openArticle?.id === uid) setOpenArticle(null);
-	}, [uid]);
-	React.useEffect(() => {
-		if (autoFocus && !ro) openPopover();
-	}, []);
-	const nonce = editing ? open.nonce : 0;
-	React.useEffect(() => {
-		if (!nonce) return;
-		const id = requestAnimationFrame(() => focusField(form.current, openArticle?.focusKey ?? null));
-		return () => cancelAnimationFrame(id);
-	}, [nonce]);
-	/** a form edit joins the body's one undo history (D54); typing coalesces per field */
-	const commit = (next) => {
-		const prev = modelRef.current;
-		const field = ["url", "title"].find((k) => (next[k] ?? "") !== (prev[k] ?? "")) ?? "";
-		set(() => next, `Edit ${label.toLowerCase()} ${field}`);
-	};
-	const onKeyDown = (e) => {
-		if (e.defaultPrevented || e.target !== card.current) return;
-		const mod = e.metaKey || e.ctrlKey;
-		const k = eventKey(e);
-		if (mod && k === "z") {
-			e.preventDefault();
-			e.stopPropagation();
-			if (e.shiftKey) ctx.redo?.();
-			else ctx.undo?.();
-			return;
-		}
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			openPopover();
-			return;
-		}
-		if (e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			if (editing) close();
-			else ctx.exit(el);
-			return;
-		}
-		if (ro) return;
-		if (mod && k === "d" && ctx.duplicate) {
-			e.preventDefault();
-			e.stopPropagation();
-			ctx.duplicate(el);
-		} else if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && ctx.move) {
-			e.preventDefault();
-			ctx.move(el, e.key === "ArrowUp" ? -1 : 1);
-			focusCard();
-		} else if (e.key === "Backspace" || e.key === "Delete") {
-			e.preventDefault();
-			ctx.remove(el);
-		}
-	};
-	const actions = ro ? null : /* @__PURE__ */ jsxs("div", {
-		className: cn("absolute -top-3.5 right-2 z-[2] flex items-center gap-0.5 rounded-kit-md border border-kit-line bg-kit-surface-raised p-0.5 opacity-0 shadow-kit-sm transition-opacity", "group-hover/art:opacity-100 group-focus-within/art:opacity-100 pointer-coarse:opacity-100", editing && "opacity-100"),
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			content: `Edit ${label.toLowerCase()}`,
-			children: /* @__PURE__ */ jsx(IconButton, {
-				size: "xs",
-				label: `Edit ${label.toLowerCase()}`,
-				onClick: () => editing ? close() : openPopover(),
-				children: /* @__PURE__ */ jsx(IconSettings, { stroke: 1.5 })
-			})
-		}), /* @__PURE__ */ jsx(Tooltip, {
-			content: `Remove ${label.toLowerCase()}`,
-			children: /* @__PURE__ */ jsx(IconButton, {
-				size: "xs",
-				label: `Remove ${label.toLowerCase()}`,
-				onClick: () => ctx.remove(el),
-				className: "hover:text-kit-danger-fg",
-				children: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 })
-			})
-		})]
-	});
-	return /* @__PURE__ */ jsxs(Popover, {
-		open: editing,
-		onOpenChange: (o, d) => {
-			if (o) return;
-			close();
-			if (d?.reason !== "outside-press") focusCard();
-		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			ref: card,
-			role: "group",
-			tabIndex: 0,
-			"aria-label": `${label}${editing ? ", editing" : ""}`,
-			"aria-roledescription": "block",
-			"aria-haspopup": "dialog",
-			"aria-expanded": editing,
-			"data-rt-isolate": "",
-			"data-article-block": "embed",
-			onKeyDown,
-			onClick: (e) => {
-				if (ro || !e.currentTarget.contains(e.target)) return;
-				const t = e.target;
-				if (t.closest("button,a,[role=menuitem]")) return;
-				openPopover(t.closest("[data-field]")?.getAttribute("data-field") ?? null);
-			},
-			className: cn("group/art relative rounded-kit-lg outline-none transition-shadow duration-150", !ro && "cursor-pointer", "focus-visible:shadow-[0_0_0_1px_var(--kit-line-strong)]", editing ? "shadow-[0_0_0_2px_var(--kit-accent)] focus-visible:shadow-[0_0_0_2px_var(--kit-accent)]" : !ro && "hover:shadow-[0_0_0_1px_var(--kit-line)]"),
-			children: [
-				/* @__PURE__ */ jsx(EmbedPreview, {
-					m,
-					onAdd: () => openPopover("url"),
-					ro
-				}),
-				actions,
-				/* @__PURE__ */ jsx(PopoverAnchor, { render: /* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "pointer-events-none absolute right-2 top-2 size-px"
-				}) })
-			]
-		}), editing ? /* @__PURE__ */ jsxs(PopoverContent, {
-			align: "end",
-			side: "bottom",
-			className: "w-[340px] p-0",
-			initialFocus: false,
-			finalFocus: false,
-			onKeyDown: (e) => {
-				if ((e.metaKey || e.ctrlKey) && !e.altKey && eventKey(e) === "z" && !e.defaultPrevented) {
-					e.preventDefault();
-					if (e.shiftKey) ctx.redo?.();
-					else ctx.undo?.();
-				}
-			},
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex h-10 items-center gap-2 border-b border-kit-line-subtle pl-4 pr-1.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "flex-1 truncate text-kit-sm font-medium text-kit-fg",
-					children: label
-				}), /* @__PURE__ */ jsx(IconButton, {
-					size: "sm",
-					label: "Close",
-					onClick: () => (close(), focusCard()),
-					children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				ref: form,
-				className: "max-h-[min(480px,70vh)] overflow-y-auto pb-2",
-				children: /* @__PURE__ */ jsxs("div", {
-					"data-article-form": "",
-					className: "min-w-0",
-					children: [/* @__PURE__ */ jsx(SchemaForm, {
-						schema: EMBED_SCHEMA,
-						value: {
-							url: m.url ?? "",
-							title: m.title ?? ""
-						},
-						onChange: (v) => commit({
-							...modelRef.current,
-							url: String(v.url ?? ""),
-							title: String(v.title ?? "")
-						}),
-						variant: "panel",
-						scroll: false,
-						readOnly: ro,
-						rootLabel: label,
-						env: {
-							docId: `article:${EMBED_SCHEMA.name}`,
-							docTitle: label
-						}
-					}), /* @__PURE__ */ jsx("style", { children: `[data-article-form] [data-kit-form] section:first-of-type { border-top-width: 0; margin-top: 0; padding-top: 0; }` })]
-				})
-			})]
-		}) : null]
-	});
-}
-/** V2 article-blocks.tsx Empty: a block with nothing to show yet. */
-var ArticleEmpty = ({ icon, title, action, onAction, ro }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex items-center gap-3 rounded-kit-lg border border-dashed border-kit-line-strong bg-kit-subtle px-4 py-3.5",
-	children: [
-		/* @__PURE__ */ jsx("span", {
-			className: "flex size-8 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-control-bg text-kit-fg-2 [&_svg]:size-4",
-			children: icon
-		}),
-		/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 text-kit-sm font-medium text-kit-fg",
-			children: title
-		}),
-		ro ? null : /* @__PURE__ */ jsx(Button, {
-			size: "sm",
-			onClick: onAction,
-			children: action
-		})
-	]
-});
-var PROVIDER_ICON = {
-	youtube: /* @__PURE__ */ jsx(IconBrandYoutube, { stroke: 1.5 }),
-	vimeo: /* @__PURE__ */ jsx(IconBrandVimeo, { stroke: 1.5 }),
-	x: /* @__PURE__ */ jsx(IconBrandX, { stroke: 1.5 }),
-	codepen: /* @__PURE__ */ jsx(IconBrandCodepen, { stroke: 1.5 }),
-	figma: /* @__PURE__ */ jsx(IconBrandFigma, { stroke: 1.5 }),
-	maps: /* @__PURE__ */ jsx(IconMap, { stroke: 1.5 }),
-	spotify: /* @__PURE__ */ jsx(IconBrandSpotify, { stroke: 1.5 }),
-	podcast: /* @__PURE__ */ jsx(IconMicrophone, { stroke: 1.5 }),
-	audio: /* @__PURE__ */ jsx(IconHeadphones, { stroke: 1.5 }),
-	link: /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 })
-};
-/** V2 EmbedPreview: a faithful placeholder (provider, title and shape), no third-party frame in the editor. Drawn 16:9. */
-function EmbedPreview({ m, onAdd, ro }) {
-	if (!m.url) return /* @__PURE__ */ jsx(ArticleEmpty, {
-		icon: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
-		title: "Embed",
-		action: "Paste a link",
-		onAction: onAdd,
-		ro
-	});
-	const info = detectEmbed(m.url);
-	const icon = PROVIDER_ICON[info.provider];
-	const title = m.title || /* @__PURE__ */ jsx("span", {
-		className: "text-kit-warning-fg",
-		children: "Add a title"
-	});
-	if (info.shape === "frame") return /* @__PURE__ */ jsx("figure", {
-		className: "m-0",
-		"data-field": "url",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative mx-auto flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-kit-lg border border-kit-line bg-kit-subtle text-center",
-			style: { aspectRatio: "16 / 9" },
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "flex size-11 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse [&_svg]:size-5",
-					children: info.provider === "youtube" || info.provider === "vimeo" ? /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}) : icon
-				}),
-				/* @__PURE__ */ jsx("span", {
-					"data-field": "title",
-					className: "max-w-[80%] truncate text-kit-sm font-medium text-kit-fg",
-					children: title
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "absolute left-3 top-2.5 flex items-center gap-1.5 text-kit-xs text-kit-fg-2 [&_svg]:size-3.5",
-					children: [icon, info.label]
-				})
-			]
-		})
-	});
-	if (info.shape === "audio") return /* @__PURE__ */ jsxs("figure", {
-		className: "m-0 flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-subtle px-3 py-2.5",
-		"data-field": "url",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse [&_svg]:size-4",
-				children: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {})
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					"data-field": "title",
-					className: "block truncate text-kit-sm font-medium text-kit-fg",
-					children: title
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-1 text-kit-xs text-kit-fg-3 [&_svg]:size-3",
-					children: [icon, info.label]
-				})]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				className: "hidden h-1 w-28 rounded-full bg-kit-line-strong sm:block"
-			})
-		]
-	});
-	return /* @__PURE__ */ jsxs("figure", {
-		className: "m-0 flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-surface px-3 py-2.5",
-		"data-field": "url",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "flex size-9 shrink-0 items-center justify-center rounded-kit-md bg-kit-muted text-kit-fg-2 [&_svg]:size-4",
-			children: icon
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("span", {
-				"data-field": "title",
-				className: "block truncate text-kit-sm font-medium text-kit-fg",
-				children: title
-			}), /* @__PURE__ */ jsx("span", {
-				className: "block truncate text-kit-xs text-kit-fg-3",
-				children: info.shape === "post" ? `${info.label} · ${m.url.replace(/^https?:\/\/(www\.)?/, "")}` : m.url.replace(/^https?:\/\/(www\.)?/, "")
-			})]
+		}), /* @__PURE__ */ jsx(ArticleActions, {
+			label,
+			ctx,
+			el
 		})]
 	});
 }
-function ArticlePanel({ label, anchor, nonce, focusKey, onClose, focusBack, ctx, el, children }) {
-	const panel = React.useRef(null);
-	const titleId = React.useId();
-	const container = anchor?.closest("[data-expanded-editor]") ?? null;
-	React.useEffect(() => {
-		const timers = [];
-		let landed = false;
-		for (const ms of [
-			40,
-			90,
-			160,
-			260,
-			420,
-			640
-		]) timers.push(window.setTimeout(() => {
-			const root = panel.current?.el() ?? null;
-			if (!root?.querySelector("[data-field-key]")) return;
-			const a = document.activeElement;
-			const lost = !a || a === document.body || a.hasAttribute("data-expanded-editor") || a.hasAttribute("data-article-block");
-			if (root.contains(a)) return void (landed = true);
-			if (!landed || lost) focusField(root, focusKey);
-			if (root.contains(document.activeElement)) landed = true;
-		}, ms));
-		return () => timers.forEach((t) => window.clearTimeout(t));
-	}, [nonce]);
-	React.useEffect(() => panel.current?.announce(`${label} properties.`), [label]);
-	const header = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("span", {
-			id: titleId,
-			className: "min-w-0 flex-1 truncate text-kit-sm font-medium text-kit-fg",
-			children: label
-		}),
-		/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
-			size: "sm",
-			label: `${label} actions`,
-			children: /* @__PURE__ */ jsx(IconDots, { stroke: 1.5 })
-		}) }), /* @__PURE__ */ jsxs(MenuContent, {
-			align: "end",
-			className: "w-52",
-			children: [
-				ctx.readOnly || !ctx.duplicate ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuItem, {
-					icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
-					onClick: () => ctx.duplicate?.(el),
-					children: "Duplicate"
-				}), /* @__PURE__ */ jsx(MenuSeparator, {})] }),
-				/* @__PURE__ */ jsx(MenuItem, {
-					icon: /* @__PURE__ */ jsx(IconArrowsMove, { stroke: 1.5 }),
-					onClick: () => panel.current?.keyboard("move"),
-					children: "Move panel"
-				}),
-				/* @__PURE__ */ jsx(MenuItem, {
-					icon: /* @__PURE__ */ jsx(IconDimensions, { stroke: 1.5 }),
-					onClick: () => panel.current?.keyboard("resize"),
-					children: "Resize panel"
-				}),
-				/* @__PURE__ */ jsx(MenuItem, {
-					icon: /* @__PURE__ */ jsx(IconLayoutSidebar, { stroke: 1.5 }),
-					onClick: () => panel.current?.dock("left"),
-					children: "Dock left"
-				}),
-				/* @__PURE__ */ jsx(MenuItem, {
-					icon: /* @__PURE__ */ jsx(IconLayoutSidebarRight, { stroke: 1.5 }),
-					onClick: () => panel.current?.dock("right"),
-					children: "Dock right"
-				}),
-				ctx.readOnly ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
-					danger: true,
-					icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
-					onClick: () => ctx.remove(el),
-					children: "Remove"
-				})] })
-			]
-		})] }),
-		/* @__PURE__ */ jsx(IconButton, {
-			size: "sm",
-			label: "Close properties",
-			tooltip: "Close",
-			onClick: () => (onClose(), focusBack()),
-			children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
-		})
-	] });
-	return /* @__PURE__ */ jsx(FloatingPanel, {
-		ref: panel,
-		id: "article-properties",
-		labelledBy: titleId,
-		anchor,
-		container,
-		header,
-		onClose,
-		focusBack,
-		onPanelKeyDown: (e) => {
-			if ((e.metaKey || e.ctrlKey) && !e.altKey && eventKey(e) === "z" && !e.defaultPrevented) {
-				e.preventDefault();
-				if (e.shiftKey) ctx.redo?.();
-				else ctx.undo?.();
-			}
-		},
-		sheetFooter: /* @__PURE__ */ jsx(Button, {
-			size: "sm",
-			variant: "primary",
-			onClick: () => (onClose(), focusBack()),
-			children: "Done"
-		}),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "pb-3 pt-1",
-			children
-		})
-	});
-}
 function PullQuotePreview({ m }) {
 	return /* @__PURE__ */ jsxs("figure", {
 		className: "m-0 py-2 pl-5 pr-10",