@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/rich-text/blocks.js

@@ -0,0 +1,1532 @@
+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 { 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 { FloatingPanel } from "../../ui/floating-panel.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
+/**
+* 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()
+* can write it back as static HTML.
+*
+* The image block is V2's: the toolbar (Replace · Align · Size S/M/L/Full · Link · Alt text · Remove) and the caption
+* under it, each stored on production's image block (see dom.ts). The callout (tone · title · message), toggle, video,
+* file and embedded component blocks are V2's too, limited to what their stored blocks keep: a callout's message and a
+* toggle's body are plain text (production stores them as text), a component is a linked card (its fields are edited
+* on the component itself).
+*
+* The table block is V2's TableBlock: the kit's table editor on the island's table value. The pull quote is V2's article
+* 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.
+*/
+function Island({ el, ctx }) {
+	const kind = el.getAttribute("data-rt-island");
+	const [model, setModel] = React.useState(() => el.__rt);
+	const [autoFocus] = React.useState(() => !!el.__rtFocus);
+	React.useEffect(() => {
+		el.__rtFocus = false;
+	}, [el]);
+	const set = React.useCallback((patch, label = "Edit block", record = true) => {
+		const prev = el.__rt;
+		const next = typeof patch === "function" ? patch(prev) : {
+			...prev,
+			...patch
+		};
+		if (record) ctx.record?.(el, prev, label, typeof patch !== "function");
+		el.__rt = next;
+		setModel(next);
+		ctx.emit();
+	}, [el, ctx]);
+	React.useEffect(() => {
+		el.__rtSet = (m) => {
+			el.__rt = m;
+			setModel(m);
+			ctx.emit();
+		};
+		return () => {
+			if (el.__rtSet) delete el.__rtSet;
+		};
+	}, [el, ctx]);
+	const onKeyDown = (e) => {
+		if (!e.currentTarget.contains(e.target)) return;
+		if (e.key === "Escape" && e.target.isContentEditable) {
+			e.preventDefault();
+			e.stopPropagation();
+			ctx.exit(el);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative select-text",
+		onKeyDown,
+		"data-island-kind": kind,
+		children: kind === "image" ? /* @__PURE__ */ jsx(ImageBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "table" ? /* @__PURE__ */ jsx(TableBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "pullquote" ? /* @__PURE__ */ jsx(PullQuoteBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "takeaways" ? /* @__PURE__ */ jsx(TakeawaysBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "callout" ? /* @__PURE__ */ jsx(CalloutBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "toggle" ? /* @__PURE__ */ jsx(ToggleBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "video" ? /* @__PURE__ */ jsx(VideoBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "file" ? /* @__PURE__ */ jsx(FileBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "component" ? /* @__PURE__ */ jsx(ComponentBlock, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : null
+	});
+}
+var Sep = () => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "mx-0.5 h-4 w-px shrink-0 bg-kit-line"
+});
+/** An address an image can be shown from: http(s) or a site path. */
+var imageUrlOk = (u) => /^(https?:)?\/\/[^\s]+$/i.test(u) || /^\/(?!\/)\S*$/.test(u);
+function PlainEditable({ value, onChange, label, placeholder, readOnly, autoFocus, multiline, onEnter, onBackspaceEmpty, className }) {
+	const ref = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || document.activeElement === el) return;
+		if (el.textContent !== value) el.textContent = value;
+	}, [value]);
+	React.useEffect(() => {
+		if (!autoFocus || !ref.current || readOnly) return;
+		ref.current.focus({ preventScroll: false });
+		placeCaret(ref.current);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "textbox",
+		"aria-label": label,
+		"aria-multiline": multiline || void 0,
+		"aria-readonly": readOnly || void 0,
+		tabIndex: readOnly ? -1 : 0,
+		contentEditable: readOnly ? false : "plaintext-only",
+		suppressContentEditableWarning: true,
+		spellCheck: true,
+		"data-placeholder": placeholder,
+		onInput: (e) => onChange((e.currentTarget.textContent ?? "").replace(/\u200b/g, "")),
+		onPaste: (e) => {
+			e.preventDefault();
+			const t = e.clipboardData.getData("text/plain");
+			document.execCommand("insertText", false, multiline ? t : t.replace(/\s*\n\s*/g, " "));
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Backspace" && onBackspaceEmpty && !(e.currentTarget.textContent ?? "").replace(/\u200b/g, "")) {
+				e.preventDefault();
+				onBackspaceEmpty();
+				return;
+			}
+			if (e.key !== "Enter") return;
+			if (multiline && !(e.metaKey || e.ctrlKey)) return;
+			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)
+	});
+}
+var RemoveBtn = ({ onClick, label }) => /* @__PURE__ */ jsx(IconButton, {
+	size: "xs",
+	label,
+	onClick,
+	className: "hover:text-kit-danger-fg",
+	children: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 })
+});
+/** Production's image layout (lib/richtext/imageLayout.ts): a size sets the column share; with none, the alignment does. */
+var SIZES = [
+	{
+		v: "s",
+		label: "S",
+		w: "33%"
+	},
+	{
+		v: "m",
+		label: "M",
+		w: "50%"
+	},
+	{
+		v: "l",
+		label: "L",
+		w: "75%"
+	},
+	{
+		v: "full",
+		label: "Full",
+		w: "100%"
+	}
+];
+var ALIGN_WIDTH = {
+	full: "100%",
+	center: "78%",
+	left: "62%",
+	right: "62%"
+};
+var ALIGNS = [
+	{
+		v: "full",
+		label: "Full width",
+		icon: /* @__PURE__ */ jsx(IconArrowsHorizontal, { stroke: 1.5 })
+	},
+	{
+		v: "center",
+		label: "Center",
+		icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, { stroke: 1.5 })
+	},
+	{
+		v: "left",
+		label: "Left",
+		icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, { stroke: 1.5 })
+	},
+	{
+		v: "right",
+		label: "Right",
+		icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, { stroke: 1.5 })
+	}
+];
+function ImageBlock({ m, set, el, ctx }) {
+	const { MediaPicker } = useKitServices();
+	const [picker, setPicker] = React.useState(false);
+	const [urlMode, setUrlMode] = React.useState(false);
+	const [url, setUrl] = React.useState("");
+	const [busy, setBusy] = React.useState(false);
+	const [linkOpen, setLinkOpen] = React.useState(false);
+	const ro = ctx.readOnly;
+	const pickerEl = MediaPicker ? /* @__PURE__ */ jsx(MediaPicker, {
+		open: picker,
+		onOpenChange: setPicker,
+		accept: ["image", "svg"],
+		onPick: (a) => a[0] && set({
+			src: a[0].url,
+			alt: a[0].alt || m.alt || ""
+		}, "Replace image")
+	}) : null;
+	if (!m.src) return /* @__PURE__ */ jsxs("div", {
+		className: "group/blk rounded-kit-lg border border-dashed border-kit-line-strong bg-kit-subtle px-4 py-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				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",
+						children: /* @__PURE__ */ jsx(IconPhoto, {
+							className: "size-4",
+							stroke: 1.5,
+							"aria-hidden": true
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-kit-sm font-medium text-kit-fg",
+							children: "Add an image"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-kit-xs text-kit-fg-3",
+							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 : urlMode || !MediaPicker ? /* @__PURE__ */ jsxs("form", {
+				className: "mt-3 flex items-center gap-2",
+				onSubmit: (e) => {
+					e.preventDefault();
+					const u = url.trim();
+					if (!imageUrlOk(u)) return ctx.notify("Paste a full image link that starts with https://", "Or a path on this site, like /images/hero.jpg.");
+					set({
+						src: u,
+						alt: m.alt ?? ""
+					}, "Add image");
+					ctx.exit(el);
+				},
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						autoFocus: true,
+						size: "sm",
+						value: url,
+						onChange: (e) => setUrl(e.target.value),
+						placeholder: "https://…",
+						"aria-label": "Image URL",
+						leading: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
+						className: "flex-1"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "primary",
+						type: "submit",
+						disabled: !url.trim(),
+						children: "Add"
+					}),
+					MediaPicker ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => setUrlMode(false),
+						children: "Cancel"
+					}) : null
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					leftIcon: /* @__PURE__ */ jsx(IconLibraryPhoto, { stroke: 1.5 }),
+					onClick: () => setPicker(true),
+					children: "Media library"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					leftIcon: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
+					onClick: () => setUrlMode(true),
+					children: "Paste URL"
+				})]
+			}),
+			pickerEl
+		]
+	});
+	const align = m.align ?? "full";
+	const size = m.size;
+	const width = size ? SIZES.find((x) => x.v === size)?.w ?? "100%" : ALIGN_WIDTH[align];
+	const justify = align === "left" ? "justify-start" : align === "right" ? "justify-end" : "justify-center";
+	const alignItem = ALIGNS.find((a) => a.v === align);
+	const toolBtn = "flex h-7 shrink-0 items-center gap-1 rounded-kit-md px-1.5 text-kit-xs text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-3.5";
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "group/blk relative m-0",
+		children: [
+			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"),
+				children: [
+					MediaPicker ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+						content: "Replace image",
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": "Replace image",
+							className: toolBtn,
+							onClick: () => setPicker(true),
+							children: [/* @__PURE__ */ jsx(IconReplace, {
+								stroke: 1.5,
+								"aria-hidden": true
+							}), ctx.dense ? null : "Replace"]
+						})
+					}), /* @__PURE__ */ jsx(Sep, {})] }) : null,
+					/* @__PURE__ */ jsxs(Menu, {
+						onOpenChange: setBusy,
+						children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": `Align: ${alignItem.label}`,
+							className: toolBtn,
+							children: [alignItem.icon, /* @__PURE__ */ jsx(IconChevronDown, {
+								className: "!size-3 text-kit-fg-3",
+								stroke: 1.5,
+								"aria-hidden": true
+							})]
+						}) }), /* @__PURE__ */ jsx(MenuContent, {
+							className: "w-40",
+							children: ALIGNS.map((a) => /* @__PURE__ */ jsx(MenuItem, {
+								icon: a.icon,
+								onClick: () => set({
+									align: a.v,
+									...a.v === "full" ? { size: "full" } : size === "full" || !size ? { size: "l" } : {}
+								}, "Align image"),
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "flex w-full items-center justify-between",
+									children: [a.label, align === a.v ? /* @__PURE__ */ jsx(IconCheck, {
+										className: "size-3.5 text-kit-fg-2",
+										stroke: 2,
+										"aria-hidden": true
+									}) : null]
+								})
+							}, a.v))
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-label": "Size",
+						className: "flex items-center",
+						children: SIZES.map((x) => {
+							const on = (size ?? (align === "full" ? "full" : null)) === x.v;
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-pressed": on,
+								"aria-label": `Size ${x.label}`,
+								onClick: () => set({
+									size: x.v,
+									...x.v === "full" ? { align: "full" } : align === "full" ? { align: "center" } : {}
+								}, "Resize image"),
+								className: cn("h-7 min-w-6 rounded-kit-md px-1 text-kit-xs text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg", on && "bg-kit-selected font-medium text-kit-fg"),
+								children: x.label
+							}, x.v);
+						})
+					}),
+					/* @__PURE__ */ jsx(Sep, {}),
+					/* @__PURE__ */ jsxs(Popover, {
+						open: linkOpen,
+						onOpenChange: (o) => {
+							setLinkOpen(o);
+							setBusy(o);
+						},
+						children: [/* @__PURE__ */ jsx(Tooltip, {
+							content: m.href ? `Links to ${m.href}` : "Link the image",
+							children: /* @__PURE__ */ jsx(PopoverTrigger, {
+								"aria-label": "Link the image",
+								className: cn(toolBtn, m.href && "text-kit-accent-fg"),
+								children: /* @__PURE__ */ jsx(IconLink, {
+									stroke: 1.5,
+									"aria-hidden": true
+								})
+							})
+						}), /* @__PURE__ */ jsxs(PopoverContent, {
+							className: "w-[340px] p-3",
+							finalFocus: false,
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "mb-2 text-kit-xs font-medium text-kit-fg-2",
+								children: "Link the image to"
+							}), /* @__PURE__ */ jsx(LinkForm, {
+								initial: { href: m.href ?? "" },
+								allowNewTab: false,
+								onSave: (v) => {
+									set({ href: v.href }, "Link image");
+									setLinkOpen(false);
+									setBusy(false);
+								},
+								onCancel: () => {
+									setLinkOpen(false);
+									setBusy(false);
+								},
+								onDetach: m.href ? () => {
+									set((x) => {
+										const { href: _gone, ...rest } = x;
+										return rest;
+									}, "Unlink image");
+									setLinkOpen(false);
+									setBusy(false);
+								} : void 0
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(AltPopover, {
+						alt: m.alt ?? "",
+						onSave: (alt) => set({ alt }, "Edit alt text"),
+						onOpen: setBusy,
+						btnClass: toolBtn
+					}),
+					/* @__PURE__ */ jsx(Sep, {}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: "Remove image",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Remove image",
+							className: cn(toolBtn, "hover:text-kit-danger-fg"),
+							onClick: () => ctx.remove(el),
+							children: /* @__PURE__ */ jsx(IconTrash, {
+								stroke: 1.5,
+								"aria-hidden": true
+							})
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex", justify),
+				children: /* @__PURE__ */ jsx("img", {
+					src: m.src,
+					alt: m.alt ?? "",
+					style: { width },
+					className: "block h-auto max-w-full rounded-kit-lg border border-kit-line",
+					draggable: false
+				})
+			}),
+			ro && !m.caption ? null : /* @__PURE__ */ jsx(PlainEditable, {
+				value: m.caption ?? "",
+				label: "Image caption",
+				readOnly: ro,
+				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"
+			}),
+			pickerEl
+		]
+	});
+}
+function AltPopover({ alt, onSave, onOpen, btnClass }) {
+	const [open, setOpen] = React.useState(false);
+	const [v, setV] = React.useState(alt);
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (o) => {
+			setOpen(o);
+			onOpen(o);
+			if (o) setV(alt);
+		},
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: alt ? "Alt text" : "Add alt text",
+			children: /* @__PURE__ */ jsx(PopoverTrigger, {
+				"aria-label": "Alt text",
+				className: cn(btnClass, !alt && "text-kit-warning-fg"),
+				children: /* @__PURE__ */ jsx(IconAlt, {
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-72",
+			finalFocus: false,
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: (e) => {
+					e.preventDefault();
+					onSave(v.trim());
+					setOpen(false);
+					onOpen(false);
+				},
+				className: "flex flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						className: "text-kit-xs font-medium text-kit-fg-2",
+						htmlFor: id,
+						children: "Alt text"
+					}),
+					/* @__PURE__ */ jsx(Textarea, {
+						id,
+						autoFocus: true,
+						value: v,
+						onChange: (e) => setV(e.target.value),
+						placeholder: "Describe the image",
+						rows: 2
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-kit-2xs text-kit-fg-3",
+						children: "Read aloud by screen readers and used by search engines."
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex justify-end",
+						children: /* @__PURE__ */ jsx(Button, {
+							size: "xs",
+							variant: "primary",
+							type: "submit",
+							children: "Done"
+						})
+					})
+				]
+			})
+		})]
+	});
+}
+var TONES = {
+	info: {
+		label: "Info",
+		icon: /* @__PURE__ */ jsx(IconInfoCircle, { stroke: 1.5 }),
+		box: "border-kit-info-line bg-kit-info-soft",
+		chip: "text-kit-info-fg"
+	},
+	tip: {
+		label: "Tip",
+		icon: /* @__PURE__ */ jsx(IconBulb, { stroke: 1.5 }),
+		box: "border-kit-success-line bg-kit-success-soft",
+		chip: "text-kit-success-fg"
+	},
+	warning: {
+		label: "Warning",
+		icon: /* @__PURE__ */ jsx(IconAlertTriangle, { stroke: 1.5 }),
+		box: "border-kit-warning-line bg-kit-warning-soft",
+		chip: "text-kit-warning-fg"
+	}
+};
+function CalloutBlock({ m, set, el, ctx, autoFocus }) {
+	const tone = CALLOUT_TONES.includes(m.tone ?? "") ? m.tone : "info";
+	const t = TONES[tone];
+	const body = React.useRef(null);
+	const ro = ctx.readOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/blk relative rounded-kit-lg border px-3.5 py-3", t.box),
+		"data-rt-isolate": "",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						disabled: ro,
+						render: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": `Callout tone: ${t.label}`,
+							className: cn("-ml-1 flex h-6 items-center gap-1 rounded-kit-md px-1.5 text-kit-xs font-medium hover:bg-kit-hover data-[popup-open]:bg-kit-hover [&_svg]:size-3.5", t.chip),
+							children: [
+								t.icon,
+								t.label,
+								ro ? null : /* @__PURE__ */ jsx(IconChevronDown, {
+									className: "!size-3 opacity-70",
+									stroke: 1.5,
+									"aria-hidden": true
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx(MenuContent, {
+						className: "w-36",
+						children: CALLOUT_TONES.map((k) => /* @__PURE__ */ jsx(MenuItem, {
+							icon: TONES[k].icon,
+							onClick: () => set({ tone: k }, "Change callout tone"),
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex w-full items-center justify-between",
+								children: [TONES[k].label, tone === k ? /* @__PURE__ */ jsx(IconCheck, {
+									className: "size-3.5 text-kit-fg-2",
+									stroke: 2,
+									"aria-hidden": true
+								}) : null]
+							})
+						}, k))
+					})] }),
+					/* @__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",
+						children: /* @__PURE__ */ jsx(RemoveBtn, {
+							onClick: () => ctx.remove(el),
+							label: "Remove callout"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(PlainEditable, {
+				value: m.title ?? "",
+				label: "Callout title",
+				readOnly: ro,
+				autoFocus,
+				placeholder: "Title",
+				onChange: (title) => set({ title }, "Edit callout title"),
+				onEnter: () => {
+					const b = body.current?.querySelector("[role=textbox]");
+					b?.focus();
+					if (b) placeCaret(b, false);
+				},
+				className: "mt-1 font-medium text-kit-fg"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: body,
+				children: /* @__PURE__ */ jsx(PlainEditable, {
+					multiline: true,
+					value: m.body ?? "",
+					label: "Callout message",
+					readOnly: ro,
+					placeholder: "Write a message…",
+					onChange: (b) => set({ body: b }, "Edit callout message"),
+					className: "mt-0.5 text-kit-fg-2"
+				})
+			})
+		]
+	});
+}
+function ToggleBlock({ m, set, el, ctx, autoFocus }) {
+	const [open, setOpen] = React.useState(!!autoFocus);
+	const body = React.useRef(null);
+	const bodyId = React.useId();
+	const ro = ctx.readOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/blk relative rounded-kit-md",
+		"data-rt-isolate": "",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-1",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-expanded": open,
+					"aria-controls": bodyId,
+					"aria-label": open ? "Collapse toggle" : "Expand toggle",
+					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"),
+						stroke: 1.5,
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx(PlainEditable, {
+					value: m.title ?? "",
+					label: "Toggle title",
+					readOnly: ro,
+					autoFocus,
+					placeholder: "Toggle title",
+					onChange: (title) => set({ title }, "Edit toggle title"),
+					onEnter: () => {
+						setOpen(true);
+						requestAnimationFrame(() => {
+							const b = body.current?.querySelector("[role=textbox]");
+							b?.focus();
+							if (b) placeCaret(b, false);
+						});
+					},
+					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",
+					children: /* @__PURE__ */ jsx(RemoveBtn, {
+						onClick: () => ctx.remove(el),
+						label: "Remove toggle"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: body,
+			id: bodyId,
+			hidden: !open,
+			className: "ml-3 mt-1 border-l border-kit-line pl-4",
+			children: /* @__PURE__ */ jsx(PlainEditable, {
+				multiline: true,
+				value: m.body ?? "",
+				label: "Toggle body",
+				readOnly: ro,
+				placeholder: "Hidden content. Click to write…",
+				onChange: (b) => set({ body: b }, "Edit toggle body"),
+				className: "py-0.5 text-kit-fg-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]);
+	const [error, setError] = React.useState(null);
+	const errId = React.useId();
+	const commit = () => {
+		const u = draft.trim();
+		if (u === (m.url ?? "")) return setError(null);
+		if (u && !videoUrlOk(u)) return setError("Paste a full link that starts with https://, or a path on this site.");
+		setError(null);
+		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": "",
+		children: [
+			ro ? null : /* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					autoFocus,
+					value: draft,
+					onChange: (e) => setDraft(e.target.value),
+					onBlur: commit,
+					onKeyDown: (e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							commit();
+						}
+					},
+					placeholder: "Paste a YouTube, Vimeo or video file link",
+					"aria-label": "Video URL",
+					"aria-invalid": !!error || void 0,
+					"aria-describedby": error ? errId : void 0,
+					spellCheck: false,
+					autoComplete: "off",
+					leading: /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 }),
+					className: "min-w-0 flex-1"
+				}), /* @__PURE__ */ jsx(RemoveBtn, {
+					onClick: () => ctx.remove(el),
+					label: "Remove video"
+				})]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				id: errId,
+				role: "alert",
+				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."]
+			})
+		]
+	});
+}
+var formatBytes = (n) => n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(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);
+	const [url, setUrl] = React.useState("");
+	const [name, setName] = React.useState("");
+	const ro = ctx.readOnly;
+	const has = !!(m.url && m.name);
+	const pickerEl = MediaPicker ? /* @__PURE__ */ jsx(MediaPicker, {
+		open: picker,
+		onOpenChange: setPicker,
+		accept: ["file"],
+		onPick: (a) => a[0] && set({
+			url: a[0].url,
+			name: a[0].name ?? a[0].url.split("/").pop() ?? "Download",
+			...a[0].size ? { size: a[0].size } : {}
+		}, "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",
+		"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
+		]
+	});
+	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",
+		"data-rt-isolate": "",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				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",
+						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: "text-kit-sm font-medium text-kit-fg",
+							children: "File"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-kit-xs text-kit-fg-3",
+							children: "No file yet."
+						})]
+					}),
+					ro ? null : /* @__PURE__ */ jsxs(Fragment, { children: [MediaPicker ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						leftIcon: /* @__PURE__ */ jsx(IconLibraryPhoto, { stroke: 1.5 }),
+						onClick: () => setPicker(true),
+						children: "Choose file"
+					}) : null, /* @__PURE__ */ jsx(RemoveBtn, {
+						onClick: () => ctx.remove(el),
+						label: "Remove file"
+					})] })
+				]
+			}),
+			ro ? null : /* @__PURE__ */ jsxs("form", {
+				className: "mt-2.5 flex flex-wrap items-center gap-2",
+				onSubmit: (e) => {
+					e.preventDefault();
+					const u = url.trim();
+					if (!/^https?:\/\/\S+$/i.test(u) && !/^\/(?!\/)\S*$/.test(u)) return ctx.notify("Paste a full file link that starts with https://", "Or a path on this site, like /files/spec.pdf.");
+					set({
+						url: u,
+						name: name.trim() || u.split("/").pop() || "Download"
+					}, "Add file");
+					ctx.exit(el);
+				},
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						autoFocus: autoFocus && !MediaPicker,
+						size: "sm",
+						value: url,
+						onChange: (e) => setUrl(e.target.value),
+						placeholder: "https://…/guide.pdf",
+						"aria-label": "File URL",
+						spellCheck: false,
+						autoComplete: "off",
+						leading: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
+						className: "min-w-40 flex-1"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: name,
+						onChange: (e) => setName(e.target.value),
+						placeholder: "Link text",
+						"aria-label": "File name shown to readers",
+						className: "min-w-28 flex-1"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "primary",
+						type: "submit",
+						disabled: !url.trim(),
+						children: "Add"
+					})
+				]
+			}),
+			pickerEl
+		]
+	});
+}
+function ComponentBlock({ m, el, ctx, set }) {
+	const { useComponentInfo } = useKitServices();
+	const overrides = React.useMemo(() => {
+		try {
+			const v = m.overrides ? JSON.parse(m.overrides) : {};
+			return v && typeof v === "object" && !Array.isArray(v) ? v : {};
+		} catch {
+			return {};
+		}
+	}, [m.overrides]);
+	if (useComponentInfo) return /* @__PURE__ */ jsx(ComponentCard, {
+		m,
+		el,
+		ctx,
+		use: useComponentInfo,
+		overrides,
+		set
+	});
+	const count = Object.keys(overrides).length;
+	const name = m.name || "Component";
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": `${name}, ${m.detached ? "separate copy" : "linked component"}`,
+		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: [
+			/* @__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(IconComponents, {
+					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: 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",
+						count ? ` · ${count} ${count === 1 ? "override" : "overrides"}` : "",
+						" · edits to the component show here too"
+					] })
+				})]
+			}),
+			ctx.readOnly ? null : /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-0.5 opacity-0 transition-opacity motion-reduce:transition-none group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100",
+				children: [ctx.duplicate ? /* @__PURE__ */ jsx(IconButton, {
+					size: "xs",
+					label: `Duplicate ${name}`,
+					onClick: () => ctx.duplicate?.(el),
+					children: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 })
+				}) : null, /* @__PURE__ */ jsx(RemoveBtn, {
+					onClick: () => ctx.remove(el),
+					label: `Remove ${name}`
+				})]
+			})
+		]
+	});
+}
+/**
+* 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.
+*/
+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
+	}
+};
+function TableBlock({ m, set, el, ctx }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "group/blk",
+		"data-rt-isolate": "",
+		children: /* @__PURE__ */ jsx(TableEditor, {
+			value: m,
+			onChange: (next) => set(() => next, "Edit table"),
+			readOnly: ctx.readOnly,
+			options: STORED_TABLE,
+			label: "Table",
+			actions: ctx.readOnly ? null : /* @__PURE__ */ jsx(RemoveBtn, {
+				onClick: () => ctx.remove(el),
+				label: "Remove table"
+			})
+		})
+	});
+}
+var PULL_QUOTE_LABEL = "Pull quote";
+/** V2 article.ts ARTICLE_SCHEMAS.pullquote: the properties panel is built from it. */
+var PULL_QUOTE_SCHEMA = {
+	name: "pullQuote",
+	title: PULL_QUOTE_LABEL,
+	kind: "object",
+	icon: "quote",
+	fields: [
+		{
+			name: "quote",
+			title: "Quote",
+			type: "text",
+			rows: 3,
+			validation: {
+				required: true,
+				recommendedMax: 200
+			}
+		},
+		{
+			name: "name",
+			title: "Name",
+			type: "string",
+			validation: { max: 60 }
+		},
+		{
+			name: "role",
+			title: "Role or source",
+			type: "string",
+			validation: { max: 80 }
+		},
+		{
+			name: "link",
+			title: "Source link",
+			type: "url",
+			description: "The name links here."
+		}
+	]
+};
+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 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", {
+		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]
+	}), editing ? /* @__PURE__ */ jsx(ArticlePanel, {
+		label,
+		anchor: cardEl,
+		nonce: open.nonce,
+		focusKey: open.focusKey,
+		onClose: close,
+		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; }` })]
+		})
+	}) : null] });
+}
+var TAKEAWAYS_LABEL = "Key takeaways";
+/** V2 article.ts ARTICLE_SCHEMAS.takeaways `points` max (the stored block's limit, key_takeaways_limit_exceeded) */
+var MAX_POINTS = 8;
+/** V2 article.ts ARTICLE_SCHEMAS.takeaways `title` max */
+var MAX_TITLE = 40;
+function TakeawaysBlock({ m, set, el, ctx, autoFocus }) {
+	const label = TAKEAWAYS_LABEL;
+	const card = React.useRef(null);
+	const box = React.useRef(null);
+	const ro = !!ctx.readOnly;
+	const focusCard = () => requestAnimationFrame(() => card.current?.focus({ preventScroll: true }));
+	const focusPoint = (i, atEnd = true) => requestAnimationFrame(() => {
+		const t = box.current?.querySelectorAll("[role=textbox]")[i];
+		if (!t) return;
+		t.focus();
+		placeCaret(t, atEnd);
+	});
+	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", {
+		ref: card,
+		role: "group",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-roledescription": "block",
+		"data-rt-isolate": "",
+		"data-article-block": "takeaways",
+		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,
+			children: [/* @__PURE__ */ jsx(PlainEditable, {
+				label: "Key takeaways title",
+				value: m.title,
+				placeholder: "Key takeaways",
+				readOnly: ro,
+				onChange: (title) => {
+					if (title.length > MAX_TITLE && m.title.length <= MAX_TITLE) ctx.notify(`A key takeaways title holds at most ${MAX_TITLE} characters.`, "Shorten it, or the change will not save.");
+					set({ title }, "Edit key takeaways title");
+				},
+				onEnter: () => focusPoint(0, false),
+				className: "text-kit-sm font-semibold text-kit-fg"
+			}), /* @__PURE__ */ jsx("ul", {
+				ref: box,
+				className: "m-0 mt-1.5 flex flex-col gap-1 p-0",
+				children: m.points.map((p, i) => /* @__PURE__ */ jsxs("li", {
+					className: "flex list-none items-baseline gap-2 text-[15px] leading-relaxed text-kit-fg",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "mt-[0.55em] size-1.5 shrink-0 self-start rounded-full bg-kit-accent"
+					}), /* @__PURE__ */ jsx(PlainEditable, {
+						label: `Point ${i + 1}`,
+						value: p,
+						placeholder: i === 0 ? "The first thing to remember" : "Another point",
+						readOnly: ro,
+						autoFocus: autoFocus && i === 0,
+						onChange: (v) => setPoint(i, v),
+						onEnter: () => {
+							if (m.points.length >= MAX_POINTS) {
+								ctx.notify(`Key takeaways hold at most ${MAX_POINTS} points.`, "Merge two points, or move this one into the text.");
+								return;
+							}
+							set((x) => ({
+								...x,
+								points: [
+									...x.points.slice(0, i + 1),
+									"",
+									...x.points.slice(i + 1)
+								]
+							}), "Add a key takeaways point");
+							focusPoint(i + 1);
+						},
+						onBackspaceEmpty: m.points.length > 1 ? () => {
+							set((x) => ({
+								...x,
+								points: x.points.filter((_, j) => j !== i)
+							}), "Remove a key takeaways point");
+							focusPoint(Math.max(0, i - 1));
+						} : void 0,
+						className: "flex-1"
+					})]
+				}, 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 })
+			})
+		})]
+	});
+}
+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",
+		children: [
+			/* @__PURE__ */ jsx(IconQuote, {
+				className: "mb-1 size-6 text-kit-accent-fg",
+				stroke: 1.5,
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("blockquote", {
+				"data-field": "quote",
+				className: cn("m-0 text-[22px] font-medium leading-snug tracking-[-0.01em]", m.quote ? "text-kit-fg" : "text-kit-fg-4"),
+				children: m.quote || "Write the quote"
+			}),
+			m.name || m.role ? /* @__PURE__ */ jsxs("figcaption", {
+				className: "mt-3 text-kit-sm text-kit-fg-2",
+				children: [
+					m.name ? /* @__PURE__ */ jsx("span", {
+						"data-field": "name",
+						className: cn("font-medium text-kit-fg", m.link && "underline decoration-kit-line-strong underline-offset-2"),
+						children: m.name
+					}) : null,
+					m.name && m.role ? ", " : null,
+					m.role ? /* @__PURE__ */ jsx("span", {
+						"data-field": "role",
+						children: m.role
+					}) : null
+				]
+			}) : /* @__PURE__ */ jsx("figcaption", {
+				"data-field": "name",
+				className: "mt-3 text-kit-sm text-kit-fg-4",
+				children: "Who said it"
+			})
+		]
+	});
+}
+//#endregion
+export { Island };
+
+//# sourceMappingURL=blocks.js.map