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

package/{controls → dist/controls}/rich-text/blocks.js

@@ -1,18 +1,19 @@
 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, PopoverContent, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverAnchor, 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 { CALLOUT_TONES, placeCaret } from "./dom.js";
+import { eventKey } from "../../lib/key-event.js";
 import { FloatingPanel } from "../../ui/floating-panel.js";
+import { CALLOUT_TONES, detectEmbed, placeCaret } from "./dom.js";
 import { LinkForm } from "./link-form.js";
 import { ComponentCard } from "./component-card.js";
 import * as React from "react";
-import { IconAlertTriangle, IconAlt, IconArrowsHorizontal, IconArrowsMove, IconBulb, IconCheck, IconChevronDown, IconChevronRight, IconComponents, IconCopy, IconDimensions, IconDots, IconFileText, IconInfoCircle, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight, IconLayoutSidebar, IconLayoutSidebarRight, IconLibraryPhoto, IconLink, IconPhoto, IconQuote, IconReplace, IconSettings, IconTrash, IconVideo, IconWorld, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/rich-text/blocks.tsx
+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";
+//#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
 * contenteditable=false element inside the editor surface; its model lives on that element (`el.__rt`) so serialize()
@@ -28,6 +29,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * 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).
 */
 function Island({ el, ctx }) {
 	const kind = el.getAttribute("data-rt-island");
@@ -111,6 +114,12 @@ function Island({ el, ctx }) {
 			autoFocus,
 			m: model,
 			set
+		}) : kind === "embed" ? /* @__PURE__ */ jsx(EmbedBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
 		}) : kind === "file" ? /* @__PURE__ */ jsx(FileBlock, {
 			el,
 			ctx,
@@ -172,10 +181,10 @@ function PlainEditable({ value, onChange, label, placeholder, readOnly, autoFocu
 			e.preventDefault();
 			onEnter?.();
 		},
-		className: cn("min-w-0 cursor-text whitespace-pre-wrap break-words outline-none empty:before:pointer-events-none empty:before:text-kit-fg-4 empty:before:content-[attr(data-placeholder)]", className)
+		className: cn("min-w-0 cursor-text whitespace-pre-wrap break-words outline-none focus-visible:shadow-none empty:before:pointer-events-none empty:before:text-kit-fg-4 empty:before:content-[attr(data-placeholder)]", className)
 	});
 }
-var RemoveBtn = ({ onClick, label }) => /* @__PURE__ */ jsx(IconButton, {
+var RemoveBtn = ({ onClick, label = "Remove block" }) => /* @__PURE__ */ jsx(IconButton, {
 	size: "xs",
 	label,
 	onClick,
@@ -274,19 +283,9 @@ function ImageBlock({ m, set, el, ctx }) {
 							children: MediaPicker ? "Pick one from the media library or paste a link." : "Paste a link to the image."
 						})]
 					}),
-					ro ? null : /* @__PURE__ */ jsx(Tooltip, {
-						content: "Remove image",
-						children: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": "Remove image",
-							onClick: () => ctx.remove(el),
-							className: "flex size-6 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-danger-fg",
-							children: /* @__PURE__ */ jsx(IconTrash, {
-								className: "size-3.5",
-								stroke: 1.5,
-								"aria-hidden": true
-							})
-						})
+					ro ? null : /* @__PURE__ */ jsx(RemoveBtn, {
+						onClick: () => ctx.remove(el),
+						label: "Remove image"
 					})
 				]
 			}),
@@ -357,8 +356,7 @@ function ImageBlock({ m, set, el, ctx }) {
 			ro ? null : /* @__PURE__ */ jsxs("div", {
 				role: "toolbar",
 				"aria-label": "Image tools",
-				"data-kit-scope": "",
-				className: cn("absolute left-1/2 top-2 z-[3] flex h-8 max-w-[calc(100%-16px)] -translate-x-1/2 items-center gap-0.5 overflow-x-auto rounded-kit-lg border border-kit-line bg-kit-surface px-1 opacity-0 shadow-kit-sm transition-opacity duration-150 motion-reduce:transition-none", "group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100", busy && "opacity-100"),
+				className: cn("glass-strong absolute left-1/2 top-2 z-[3] flex h-8 -translate-x-1/2 items-center gap-0.5 rounded-kit-lg border border-kit-line px-1 opacity-0 transition-opacity duration-150", "group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100", busy && "opacity-100"),
 				children: [
 					MediaPicker ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
 						content: "Replace image",
@@ -440,7 +438,7 @@ function ImageBlock({ m, set, el, ctx }) {
 								})
 							})
 						}), /* @__PURE__ */ jsxs(PopoverContent, {
-							className: "w-[340px] p-3",
+							className: "w-[340px] rounded-kit-lg p-3",
 							finalFocus: false,
 							children: [/* @__PURE__ */ jsx("p", {
 								className: "mb-2 text-kit-xs font-medium text-kit-fg-2",
@@ -507,7 +505,7 @@ function ImageBlock({ m, set, el, ctx }) {
 				placeholder: ro ? "" : "Add a caption…",
 				onChange: (caption) => set({ caption }, "Edit caption"),
 				onEnter: () => ctx.exit(el),
-				className: "mt-1.5 text-center text-kit-sm text-kit-fg-3"
+				className: "mt-1.5 text-center text-kit-sm text-kit-fg-3 empty:before:text-kit-fg-4"
 			}),
 			pickerEl
 		]
@@ -642,7 +640,7 @@ function CalloutBlock({ m, set, el, ctx, autoFocus }) {
 					})] }),
 					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 					ro ? null : /* @__PURE__ */ jsx("div", {
-						className: "opacity-0 transition-opacity motion-reduce:transition-none group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100",
+						className: "opacity-0 transition-opacity group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100",
 						children: /* @__PURE__ */ jsx(RemoveBtn, {
 							onClick: () => ctx.remove(el),
 							label: "Remove callout"
@@ -673,7 +671,7 @@ function CalloutBlock({ m, set, el, ctx, autoFocus }) {
 					readOnly: ro,
 					placeholder: "Write a message…",
 					onChange: (b) => set({ body: b }, "Edit callout message"),
-					className: "mt-0.5 text-kit-fg-2"
+					className: "mt-0.5 text-kit-fg-2 [&_p+p]:mt-2"
 				})
 			})
 		]
@@ -698,7 +696,7 @@ function ToggleBlock({ m, set, el, ctx, autoFocus }) {
 					onClick: () => setOpen((o) => !o),
 					className: "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg",
 					children: /* @__PURE__ */ jsx(IconChevronRight, {
-						className: cn("size-4 transition-transform duration-150 motion-reduce:transition-none", open && "rotate-90"),
+						className: cn("size-4 transition-transform duration-150", open && "rotate-90"),
 						stroke: 1.5,
 						"aria-hidden": true
 					})
@@ -721,7 +719,7 @@ function ToggleBlock({ m, set, el, ctx, autoFocus }) {
 					className: "flex-1 py-0.5 font-medium text-kit-fg"
 				}),
 				ro ? null : /* @__PURE__ */ jsx("div", {
-					className: "opacity-0 transition-opacity motion-reduce:transition-none group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100",
+					className: "opacity-0 transition-opacity group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100",
 					children: /* @__PURE__ */ jsx(RemoveBtn, {
 						onClick: () => ctx.remove(el),
 						label: "Remove toggle"
@@ -740,7 +738,7 @@ function ToggleBlock({ m, set, el, ctx, autoFocus }) {
 				readOnly: ro,
 				placeholder: "Hidden content. Click to write…",
 				onChange: (b) => set({ body: b }, "Edit toggle body"),
-				className: "py-0.5 text-kit-fg-2"
+				className: "py-0.5 text-kit-fg-2 [&_p+p]:mt-2"
 			})
 		})]
 	});
@@ -818,18 +816,14 @@ function VideoBlock({ m, set, el, ctx, autoFocus }) {
 				controls: true,
 				preload: "metadata",
 				className: "aspect-video w-full rounded-kit-md bg-kit-muted"
-			}) : /* @__PURE__ */ jsxs("p", {
-				className: "flex items-center gap-1.5 px-1 pb-0.5 text-kit-xs text-kit-fg-3",
-				children: [/* @__PURE__ */ jsx(IconVideo, {
-					className: "size-3.5",
-					stroke: 1.5,
-					"aria-hidden": true
-				}), "No video yet."]
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "px-1 pb-0.5 text-kit-xs text-kit-fg-3",
+				children: "No video yet."
 			})
 		]
 	});
 }
-var formatBytes = (n) => n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`;
+var formatBytes = (n) => n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`;
 function FileBlock({ m, set, el, ctx, autoFocus }) {
 	const { MediaPicker } = useKitServices();
 	const [picker, setPicker] = React.useState(false);
@@ -848,45 +842,47 @@ function FileBlock({ m, set, el, ctx, autoFocus }) {
 		}, "Choose file")
 	}) : null;
 	if (has) return /* @__PURE__ */ jsxs("div", {
-		className: "group/blk flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-surface px-3 py-2.5",
+		className: "group/blk",
 		"data-rt-isolate": "",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "flex size-9 shrink-0 items-center justify-center rounded-kit-md bg-kit-muted text-kit-fg-2",
-				children: /* @__PURE__ */ jsx(IconFileText, {
-					className: "size-[18px]",
-					stroke: 1.5,
-					"aria-hidden": true
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "truncate text-kit-sm font-medium text-kit-fg",
-					children: m.name
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "truncate text-kit-xs text-kit-fg-3",
-					children: [m.size ? `${formatBytes(m.size)} · ` : "", (m.name.includes(".") ? m.name.split(".").pop() : "file").toUpperCase()]
-				})]
-			}),
-			ro ? null : /* @__PURE__ */ jsxs(Fragment, { children: [MediaPicker ? /* @__PURE__ */ jsx(Button, {
-				size: "xs",
-				variant: "ghost",
-				onClick: () => setPicker(true),
-				children: "Replace"
-			}) : null, /* @__PURE__ */ jsx(RemoveBtn, {
-				onClick: () => ctx.remove(el),
-				label: "Remove file"
-			})] }),
-			pickerEl
-		]
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-surface px-3 py-2.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex size-9 shrink-0 items-center justify-center rounded-kit-md bg-kit-muted text-kit-fg-2",
+					children: /* @__PURE__ */ jsx(IconFileText, {
+						className: "size-[18px]",
+						stroke: 1.5,
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate text-kit-sm font-medium text-kit-fg",
+						children: m.name
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "truncate text-kit-xs text-kit-fg-3",
+						children: [m.size ? `${formatBytes(m.size)} · ` : "", (m.name.includes(".") ? m.name.split(".").pop() : "file").toUpperCase()]
+					})]
+				}),
+				ro ? null : /* @__PURE__ */ jsxs(Fragment, { children: [MediaPicker ? /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					onClick: () => setPicker(true),
+					children: "Replace"
+				}) : null, /* @__PURE__ */ jsx(RemoveBtn, {
+					onClick: () => ctx.remove(el),
+					label: "Remove file"
+				})] })
+			]
+		}), pickerEl]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group/blk rounded-kit-lg border border-dashed border-kit-line-strong bg-kit-subtle px-3 py-2.5",
+		className: "group/blk",
 		"data-rt-isolate": "",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3",
+				className: "flex items-center gap-3 rounded-kit-lg border border-dashed border-kit-line-strong bg-kit-subtle px-3 py-2.5",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "flex size-9 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-control-bg text-kit-fg-3",
@@ -908,7 +904,7 @@ function FileBlock({ m, set, el, ctx, autoFocus }) {
 					}),
 					ro ? null : /* @__PURE__ */ jsxs(Fragment, { children: [MediaPicker ? /* @__PURE__ */ jsx(Button, {
 						size: "sm",
-						leftIcon: /* @__PURE__ */ jsx(IconLibraryPhoto, { stroke: 1.5 }),
+						leftIcon: /* @__PURE__ */ jsx(IconFileUpload, { stroke: 1.5 }),
 						onClick: () => setPicker(true),
 						children: "Choose file"
 					}) : null, /* @__PURE__ */ jsx(RemoveBtn, {
@@ -982,10 +978,10 @@ function ComponentBlock({ m, el, ctx, set }) {
 		set
 	});
 	const count = Object.keys(overrides).length;
-	const name = m.name || "Component";
+	const name = m.name || "Block";
 	return /* @__PURE__ */ jsxs("div", {
 		role: "group",
-		"aria-label": `${name}, ${m.detached ? "separate copy" : "linked component"}`,
+		"aria-label": `${name}, ${m.detached ? "separate copy" : "linked block"}`,
 		className: "group/blk flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-surface px-3 py-2.5",
 		"data-rt-isolate": "",
 		children: [
@@ -1004,8 +1000,8 @@ function ComponentBlock({ m, el, ctx, set }) {
 					children: name
 				}), /* @__PURE__ */ jsx("div", {
 					className: "truncate text-kit-xs text-kit-fg-3",
-					children: m.detached ? "Separate copy · edits to the component don't reach it" : /* @__PURE__ */ jsxs(Fragment, { children: [
-						m.ref ? "Linked component" : "Component with no source",
+					children: m.detached ? "Separate copy · edits to the block don't reach it" : /* @__PURE__ */ jsxs(Fragment, { children: [
+						m.ref ? "Linked block" : "Block with no source",
 						count ? ` · ${count} ${count === 1 ? "override" : "overrides"}` : "",
 						" · edits to the component show here too"
 					] })
@@ -1027,24 +1023,28 @@ function ComponentBlock({ m, el, ctx, set }) {
 	});
 }
 /**
-* What production's rich-text table keeps: text and link cells, the header row and row headers, an optional caption,
-* the note under the table and row groups (`caption`, `notes`, `rowGroups`). Footnotes have no place there.
+* What production's rich-text table keeps: typed columns (V2's Text, Number, Price, Yes / No, Link and Rating with their unit,
+* currency, decimals, alignment, yes / no words, scale and description; a row's and a cell's type and a cell's value: a
+* first-row cell's `column`, a row's / cell's `type`, a cell's `value`), the header row and row headers, an optional caption,
+* the note under the table, row groups, the totals row and the row and column highlights (`caption`, `notes`,
+* `rowGroups`, a row's `footer` / `highlight`, a first-row cell's `highlight` / `sortable`, the table's `filterable`).
+* the table's `jsonLd` and `design` (On phones, Keep column names in view)). Footnotes are stored as the table's `footnotes` and a cell's `note` (V2's default, allowFootnotes on). No setting is
+* pinned: V2's island passes no options, so its editor offers GENERAL_TABLE (sort, search and the JSON-LD choice on,
+* everything else at its default), and so does this.
 */
 var STORED_TABLE = {
-	columnTypes: ["text", "link"],
 	requireCaption: false,
 	allowGroups: true,
-	allowFootnotes: false,
 	allowNote: true,
 	settings: {
-		headers: true,
-		totals: false,
-		phones: [],
-		highlight: false,
-		sticky: false,
-		sort: false,
-		search: false
-	}
+		sort: true,
+		search: true
+	},
+	jsonLd: [
+		"ItemList",
+		"Dataset",
+		"Offers"
+	]
 };
 function TableBlock({ m, set, el, ctx }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -1159,7 +1159,7 @@ function PullQuoteBlock({ m, set, el, ctx, autoFocus }) {
 	const onKeyDown = (e) => {
 		if (e.defaultPrevented || e.target !== card.current) return;
 		const mod = e.metaKey || e.ctrlKey;
-		const k = e.key.toLowerCase();
+		const k = eventKey(e);
 		if (mod && k === "z") {
 			e.preventDefault();
 			e.stopPropagation();
@@ -1277,7 +1277,7 @@ function TakeawaysBlock({ m, set, el, ctx, autoFocus }) {
 	const onKeyDown = (e) => {
 		if (e.defaultPrevented || e.target !== card.current) return;
 		const mod = e.metaKey || e.ctrlKey;
-		const k = e.key.toLowerCase();
+		const k = eventKey(e);
 		if (mod && k === "z") {
 			e.preventDefault();
 			e.stopPropagation();
@@ -1382,6 +1382,332 @@ function TakeawaysBlock({ m, set, el, ctx, autoFocus }) {
 		})]
 	});
 }
+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\.)?/, "")
+			})]
+		})]
+	});
+}
 function ArticlePanel({ label, anchor, nonce, focusKey, onClose, focusBack, ctx, el, children }) {
 	const panel = React.useRef(null);
 	const titleId = React.useId();
@@ -1408,71 +1734,72 @@ function ArticlePanel({ label, anchor, nonce, focusKey, onClose, focusBack, ctx,
 		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: /* @__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 })
-			})
-		] }),
+		header,
 		onClose,
 		focusBack,
 		onPanelKeyDown: (e) => {
-			if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "z" && !e.defaultPrevented) {
+			if ((e.metaKey || e.ctrlKey) && !e.altKey && eventKey(e) === "z" && !e.defaultPrevented) {
 				e.preventDefault();
 				if (e.shiftKey) ctx.redo?.();
 				else ctx.undo?.();