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

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, 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 { VideoPreview } from "../media.js";
+import { ArticleActions, ArticleCard, ArticleForm, ArticlePanel, articleCardKeyDown, useArticleOpen } from "./article-shell.js";
 import { CALLOUT_TONES, placeCaret } from "./dom.js";
-import { FloatingPanel } from "../../ui/floating-panel.js";
 import { LinkForm } from "./link-form.js";
+import { EmbedBlock } from "./embed.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, 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
 * contenteditable=false element inside the editor surface; its model lives on that element (`el.__rt`) so serialize()
@@ -28,6 +29,7 @@ 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 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");
@@ -111,6 +113,12 @@ function Island({ el, ctx }) {
 			autoFocus,
 			m: model,
 			set
+		}) : kind === "embed" ? /* @__PURE__ */ jsx(EmbedIsland, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
 		}) : kind === "file" ? /* @__PURE__ */ jsx(FileBlock, {
 			el,
 			ctx,
@@ -126,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"
@@ -172,10 +206,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 +308,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 +381,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 +463,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 +530,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 +665,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 +696,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 +721,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 +744,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,19 +763,12 @@ 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"
 			})
 		})]
 	});
 }
 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]);
@@ -766,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": "",
@@ -804,32 +819,17 @@ 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"
-			}) : /* @__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."]
+			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."
 			})
 		]
 	});
 }
-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 +848,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 +910,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 +984,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 +1006,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 +1029,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", {
@@ -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 = e.key.toLowerCase();
-		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 = e.key.toLowerCase();
-		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,126 +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 })
-			})
+		}), /* @__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]);
-	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 })
-			})
-		] }),
-		onClose,
-		focusBack,
-		onPanelKeyDown: (e) => {
-			if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "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",