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

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

@@ -1,11 +1,11 @@
 import { Sparkle } from "../../ui/button.js";
 import { Menu, MenuContent, MenuItem, MenuTrigger } from "../../ui/overlay.js";
 import { StyleMenu, ToolButton, stylesFor } from "./toolbar.js";
-import { IconBold, IconCode, IconItalic, IconLink, IconMessage, IconStrikethrough, IconUnderline } from "@tabler/icons-react";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
+import { IconBold, IconCode, IconItalic, IconLink, IconMessage, IconStrikethrough, IconSubscript, IconSuperscript, IconUnderline } from "@tabler/icons-react";
 import { createPortal } from "react-dom";
-//#region src/kit/controls/rich-text/floating.tsx
+//#region src/controls/rich-text/floating.tsx
 /**
 * RICH TEXT · the selection bubble: AI rewrite, style, marks, link (V2 HEAD controls/rich-text/floating.tsx).
 * V2's inline "Ask AI" prompt took free text; the host's AI service rewrites by preset only, so it is not drawn.
@@ -33,26 +33,28 @@ function SelectionBubble({ rect, fmt, allows, saveSel, onAi, onStyle, onMark, on
 	const above = rect.top - 44;
 	const top = above < 8 || !!avoid && above < avoid.bottom + 4 && above + 36 > avoid.top ? rect.bottom + 8 : above;
 	const styles = stylesFor(allows);
-	return createPortal(/* @__PURE__ */ jsxs(motion.div, {
-		initial: {
-			opacity: 0,
-			y: 4
-		},
-		animate: {
-			opacity: 1,
-			y: 0
-		},
-		transition: { duration: .14 },
+	const ref = React.useRef(null);
+	const [w, setW] = React.useState(460);
+	React.useLayoutEffect(() => {
+		if (ref.current) setW(ref.current.offsetWidth);
+	}, [
+		fmt.block,
+		!!onAi,
+		!!onComment
+	]);
+	return createPortal(/* @__PURE__ */ jsxs("div", {
 		onMouseDown: (e) => {
 			if (!e.target.closest("button")) e.preventDefault();
 		},
+		ref,
 		style: {
 			top,
-			left: Math.min(window.innerWidth - 400, Math.max(8, rect.left + rect.width / 2 - 190))
+			boxShadow: "var(--kit-shadow-sm)",
+			left: Math.min(window.innerWidth - w - 8, Math.max(8, rect.left + rect.width / 2 - w / 2))
 		},
 		"data-floating-layer": "",
 		"data-kit-scope": "",
-		className: "pointer-events-auto fixed z-[85] flex h-9 items-center gap-0.5 rounded-kit-lg border border-kit-line bg-kit-surface px-1 text-kit-fg shadow-kit-sm [.dark_&]:border-kit-line-strong [.dark_&]:bg-[#252528]",
+		className: "glass-strong pointer-events-auto fixed z-[calc(var(--kit-z-popover,84)_+_1)] flex h-9 items-center gap-0.5 rounded-kit-lg border border-kit-line px-1",
 		role: "toolbar",
 		"aria-label": "Selection formatting",
 		children: [
@@ -110,6 +112,18 @@ function SelectionBubble({ rect, fmt, allows, saveSel, onAi, onStyle, onMark, on
 				active: fmt.strike,
 				onClick: () => onMark("strikeThrough")
 			}) : null,
+			allows("sup") ? /* @__PURE__ */ jsx(ToolButton, {
+				label: "Superscript",
+				icon: /* @__PURE__ */ jsx(IconSuperscript, { stroke: 1.5 }),
+				active: fmt.sup,
+				onClick: () => onMark("superscript")
+			}) : null,
+			allows("sub") ? /* @__PURE__ */ jsx(ToolButton, {
+				label: "Subscript",
+				icon: /* @__PURE__ */ jsx(IconSubscript, { stroke: 1.5 }),
+				active: fmt.sub,
+				onClick: () => onMark("subscript")
+			}) : null,
 			allows("code") ? /* @__PURE__ */ jsx(ToolButton, {
 				label: "Inline code",
 				icon: /* @__PURE__ */ jsx(IconCode, { stroke: 1.5 }),
@@ -123,15 +137,18 @@ function SelectionBubble({ rect, fmt, allows, saveSel, onAi, onStyle, onMark, on
 				active: fmt.onLink,
 				onClick: onLink
 			}) : null,
-			onComment ? /* @__PURE__ */ jsx(ToolButton, {
+			onComment ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "mx-0.5 h-4 w-px bg-kit-line"
+			}), /* @__PURE__ */ jsx(ToolButton, {
 				label: "Comment",
 				icon: /* @__PURE__ */ jsx(IconMessage, { stroke: 1.5 }),
 				onClick: onComment
-			}) : null
+			})] }) : null
 		]
 	}), document.body);
 }
 //#endregion
-export { SelectionBubble };
+export { BUBBLE_AI, SelectionBubble };
 
 //# sourceMappingURL=floating.js.map

package/dist/controls/rich-text/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","names":[],"sources":["../../../src/controls/rich-text/floating.tsx"],"sourcesContent":["/**\n * RICH TEXT · the selection bubble: AI rewrite, style, marks, link (V2 HEAD controls/rich-text/floating.tsx).\n * V2's inline \"Ask AI\" prompt took free text; the host's AI service rewrites by preset only, so it is not drawn.\n */\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { IconBold, IconCode, IconItalic, IconLink, IconMessage, IconStrikethrough, IconSubscript, IconSuperscript, IconUnderline } from \"@tabler/icons-react\";\nimport { Sparkle } from \"../../ui/button\";\nimport { Menu, MenuContent, MenuItem, MenuTrigger } from \"../../ui/overlay\";\nimport type { AiPreset } from \"../../context\";\nimport type { RichTextFeature } from \"./codec\";\nimport { StyleMenu, ToolButton, stylesFor, type Fmt, type MarkCmd } from \"./toolbar\";\n\n/** The bubble's rewrite directions (V2: improve, shorter, punchier, grammar), as the host service's presets. */\nexport const BUBBLE_AI: { id: AiPreset; label: string }[] = [\n  { id: \"improve\", label: \"Improve writing\" },\n  { id: \"shorter\", label: \"Make shorter\" },\n  { id: \"simplify\", label: \"Simplify\" },\n  { id: \"grammar\", label: \"Fix spelling and grammar\" },\n];\n\nexport function SelectionBubble({\n  rect,\n  fmt,\n  allows,\n  saveSel,\n  onAi,\n  onStyle,\n  onMark,\n  onInlineCode,\n  onLink,\n  onComment,\n  avoid,\n}: {\n  rect: DOMRect;\n  /** The editor's own toolbar row (when it is open): the bubble never sits on top of it. */\n  avoid?: DOMRect | null;\n  fmt: Fmt;\n  allows: (f: RichTextFeature) => boolean;\n  saveSel: () => void;\n  /** Absent when the person has no AI (D58: ai.use) or the host has no AI service: the AI menu and its divider are not drawn. */\n  onAi?: (preset: AiPreset) => void;\n  onStyle: (tag: string) => void;\n  onMark: (cmd: MarkCmd) => void;\n  onInlineCode: () => void;\n  onLink: () => void;\n  onComment?: () => void;\n}) {\n  // Above the selection by default; flips below it when above would cover the editor's toolbar or leave the viewport.\n  const above = rect.top - 44;\n  const blocked = above < 8 || (!!avoid && above < avoid.bottom + 4 && above + 36 > avoid.top);\n  const top = blocked ? rect.bottom + 8 : above;\n  const styles = stylesFor(allows);\n  // centre on the selection with the bubble's real width (it grows with AI, style and comment), never past either edge\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [w, setW] = React.useState(460);\n  React.useLayoutEffect(() => {\n    if (ref.current) setW(ref.current.offsetWidth);\n  }, [fmt.block, !!onAi, !!onComment]);\n  return createPortal(\n    // No entrance motion: the bubble shows on every text selection, a 100+/day action.\n    <div\n      onMouseDown={(e) => {\n        if (!(e.target as HTMLElement).closest(\"button\")) e.preventDefault();\n      }}\n      ref={ref}\n      style={{ top, boxShadow: \"var(--kit-shadow-sm)\", left: Math.min(window.innerWidth - w - 8, Math.max(8, rect.left + rect.width / 2 - w / 2)) }}\n      data-floating-layer=\"\"\n      data-kit-scope=\"\"\n      /* V2 floating.tsx:57-59: glass-strong for the raised fill and hairline; the tight shadow-sm (inline, so it beats the\n         glass drop) keeps the shadow off the selected text right under the bubble */\n      className=\"glass-strong pointer-events-auto fixed z-[calc(var(--kit-z-popover,84)_+_1)] flex h-9 items-center gap-0.5 rounded-kit-lg border border-kit-line px-1\"\n      role=\"toolbar\"\n      aria-label=\"Selection formatting\"\n    >\n      {onAi ? (\n        <>\n          <Menu>\n            <MenuTrigger\n              onMouseDown={(e) => {\n                e.preventDefault();\n                saveSel();\n              }}\n              className=\"flex h-7 items-center gap-1.5 rounded-kit-md px-2 text-kit-sm text-kit-fg hover:bg-kit-hover data-[popup-open]:bg-kit-hover\"\n            >\n              <Sparkle size={14} /> Improve writing\n            </MenuTrigger>\n            <MenuContent className=\"w-52\" finalFocus={false}>\n              {BUBBLE_AI.map((p) => (\n                <MenuItem key={p.id} icon={<Sparkle size={16} />} onClick={() => onAi(p.id)}>\n                  {p.label}\n                </MenuItem>\n              ))}\n            </MenuContent>\n          </Menu>\n          <span aria-hidden className=\"mx-0.5 h-4 w-px bg-kit-line\" />\n        </>\n      ) : null}\n      {fmt.block !== \"island\" && styles.length > 1 ? (\n        <>\n          <StyleMenu block={fmt.block} styles={styles} onPick={onStyle} />\n          <span aria-hidden className=\"mx-0.5 h-4 w-px bg-kit-line\" />\n        </>\n      ) : null}\n      {allows(\"bold\") ? <ToolButton label=\"Bold\" icon={<IconBold stroke={1.5} />} shortcut=\"⌘B\" active={fmt.bold} onClick={() => onMark(\"bold\")} /> : null}\n      {allows(\"italic\") ? <ToolButton label=\"Italic\" icon={<IconItalic stroke={1.5} />} shortcut=\"⌘I\" active={fmt.italic} onClick={() => onMark(\"italic\")} /> : null}\n      {allows(\"underline\") ? <ToolButton label=\"Underline\" icon={<IconUnderline stroke={1.5} />} shortcut=\"⌘U\" active={fmt.underline} onClick={() => onMark(\"underline\")} /> : null}\n      {allows(\"strike\") ? <ToolButton label=\"Strikethrough\" icon={<IconStrikethrough stroke={1.5} />} active={fmt.strike} onClick={() => onMark(\"strikeThrough\")} /> : null}\n      {/* x² and x₂: one at a time (picking one inside the other swaps them) */}\n      {allows(\"sup\") ? <ToolButton label=\"Superscript\" icon={<IconSuperscript stroke={1.5} />} active={fmt.sup} onClick={() => onMark(\"superscript\")} /> : null}\n      {allows(\"sub\") ? <ToolButton label=\"Subscript\" icon={<IconSubscript stroke={1.5} />} active={fmt.sub} onClick={() => onMark(\"subscript\")} /> : null}\n      {allows(\"code\") ? <ToolButton label=\"Inline code\" icon={<IconCode stroke={1.5} />} shortcut=\"⌘E\" onClick={onInlineCode} /> : null}\n      {allows(\"link\") ? <ToolButton label=\"Link\" icon={<IconLink stroke={1.5} />} shortcut=\"⌘K\" active={fmt.onLink} onClick={onLink} /> : null}\n      {onComment ? (\n        <>\n          <span aria-hidden className=\"mx-0.5 h-4 w-px bg-kit-line\" />\n          <ToolButton label=\"Comment\" icon={<IconMessage stroke={1.5} />} onClick={onComment} />\n        </>\n      ) : null}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/dist/controls/rich-text/footnote.d.ts

@@ -0,0 +1,41 @@
+export declare const FN_MARK = "sup[data-rt=fn]";
+/** The toast when a footnote cannot go where the caret is (V2 rich-text-editor.tsx:613). */
+export declare const FOOTNOTE_REFUSED: {
+    readonly title: "Put the caret in the text first";
+    readonly description: "Footnotes number the story's own text, not text inside a block.";
+};
+/** The popover's chrome (V2 rich-text-editor.tsx:1650). */
+export declare const FOOTNOTE_POPOVER_CLASS = "w-[320px] rounded-kit-lg p-3";
+/** The body's own markers in text order (markers inside a rich block are not the body's). */
+export declare const footnoteMarkers: (root: HTMLElement) => HTMLElement[];
+/** Numbers the markers 1…n in text order; returns them with their notes, for the list. */
+export declare function renumberFootnotes(root: HTMLElement): {
+    el: HTMLElement;
+    note: string;
+}[];
+/** A new, empty marker at the caret. Null when the caret is outside the body's text (a rich block, code, elsewhere). */
+export declare function insertFootnote(root: HTMLElement): HTMLElement | null;
+/** The caret right after a marker, in the body. */
+export declare function caretAfterMarker(root: HTMLElement, m: HTMLElement): void;
+/** "Back to the text": scroll the marker to the centre, caret after it, and flash it (1200ms). */
+export declare function backToMarker(root: HTMLElement, m: HTMLElement): void;
+/** The note of one footnote: one setting, edited in a popover at its marker (V2 D54 / D55). */
+export declare function FootnoteEditor({ n, note, onChange, onRemove, onDone }: {
+    n: number;
+    note: string;
+    onChange: (v: string) => void;
+    onRemove: () => void;
+    onDone: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** The notes under the body, numbered in text order, each with a way back to its marker. Renders nothing when empty. */
+export declare function FootnotesList({ notes, readOnly, density, onEdit, onBack, }: {
+    notes: {
+        el: HTMLElement;
+        note: string;
+    }[];
+    readOnly?: boolean;
+    /** the editor's spacing: bare (no chrome), dense (panel), default */
+    density?: "bare" | "dense" | "default";
+    onEdit: (el: HTMLElement) => void;
+    onBack: (el: HTMLElement) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,185 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../ui/button.js";
+import { Tooltip } from "../../ui/overlay.js";
+import { Textarea } from "../../ui/input.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconTrash } from "@tabler/icons-react";
+//#region src/controls/rich-text/footnote.tsx
+/**
+* RICH TEXT · Footnotes (kit-richtext-ui-spec.md §1): V2's inline footnote, stored as the PT inline object
+* `{ _type: "footnote", note }`, written in the editor as `<sup data-rt="fn" data-note contenteditable="false">N</sup>`.
+* The number, the notes list and the way back are derived from the markers' text order, never stored.
+*
+* Editor chrome, not an island: the editor owns the clicks and the popover's anchor; this module is the V2 parts.
+*   insert    V2 ops.ts:182-205: at the caret through the browser's insert (⌘Z takes it back), never inside a rich
+*             block or code; null then, and the editor toasts FOOTNOTE_REFUSED (V2 rich-text-editor.tsx:610-615)
+*   numbers   V2 dom.ts:429-436: the body's own markers in text order, 1…n
+*   popover   V2 FootnoteEditor (rich-text-editor.tsx:1736-1777) at the marker, w-[320px] rounded p-3
+*   list      V2 notes section (rich-text-editor.tsx:1533-1560): each note a button that edits it, and ↩ back to it
+*   back      V2 backToMarker (rich-text-editor.tsx:1095-1100): scroll to it, caret after it, a 1200ms accent flash
+*/
+var FN_MARK = "sup[data-rt=fn]";
+/** The toast when a footnote cannot go where the caret is (V2 rich-text-editor.tsx:613). */
+var FOOTNOTE_REFUSED = {
+	title: "Put the caret in the text first",
+	description: "Footnotes number the story's own text, not text inside a block."
+};
+/** The popover's chrome (V2 rich-text-editor.tsx:1650). */
+var FOOTNOTE_POPOVER_CLASS = "w-[320px] rounded-kit-lg p-3";
+/** The body's own markers in text order (markers inside a rich block are not the body's). */
+var footnoteMarkers = (root) => Array.from(root.querySelectorAll(FN_MARK)).filter((m) => !m.closest("[data-rt-island],[data-rt-isolate]"));
+/** Numbers the markers 1…n in text order; returns them with their notes, for the list. */
+function renumberFootnotes(root) {
+	return footnoteMarkers(root).map((m, i) => {
+		if (m.textContent !== String(i + 1)) m.textContent = String(i + 1);
+		return {
+			el: m,
+			note: m.getAttribute("data-note") ?? ""
+		};
+	});
+}
+/** A new, empty marker at the caret. Null when the caret is outside the body's text (a rich block, code, elsewhere). */
+function insertFootnote(root) {
+	const s = window.getSelection();
+	if (!s || !s.rangeCount || !root.contains(s.anchorNode)) return null;
+	const at = s.anchorNode?.nodeType === 1 ? s.anchorNode : s.anchorNode?.parentElement;
+	if (!at || at.closest("[data-rt-island],[data-rt-isolate]") || at.closest("pre")) return null;
+	root.focus({ preventScroll: true });
+	if (typeof document.execCommand === "function") document.execCommand("insertHTML", false, `<sup data-rt="fn" data-note="" contenteditable="false" data-fn-new="">1</sup>​`);
+	let sup = root.querySelector("sup[data-fn-new]");
+	if (!sup) {
+		sup = document.createElement("sup");
+		sup.setAttribute("data-rt", "fn");
+		sup.setAttribute("data-note", "");
+		sup.setAttribute("contenteditable", "false");
+		sup.textContent = "1";
+		const r = s.getRangeAt(0);
+		r.collapse(false);
+		r.insertNode(sup);
+		const after = document.createTextNode("​");
+		sup.after(after);
+		const c = document.createRange();
+		c.setStart(after, after.length);
+		c.collapse(true);
+		s.removeAllRanges();
+		s.addRange(c);
+	}
+	sup.removeAttribute("data-fn-new");
+	renumberFootnotes(root);
+	return sup;
+}
+/** The caret right after a marker, in the body. */
+function caretAfterMarker(root, m) {
+	const s = window.getSelection();
+	if (!s || !m.isConnected) return;
+	root.focus({ preventScroll: true });
+	const r = document.createRange();
+	r.setStartAfter(m);
+	r.collapse(true);
+	s.removeAllRanges();
+	s.addRange(r);
+}
+/** "Back to the text": scroll the marker to the centre, caret after it, and flash it (1200ms). */
+function backToMarker(root, m) {
+	if (!m.isConnected) return;
+	m.scrollIntoView?.({
+		block: "center",
+		behavior: "smooth"
+	});
+	caretAfterMarker(root, m);
+	m.animate?.([{ boxShadow: "0 0 0 3px var(--kit-accent-soft)" }, { boxShadow: "0 0 0 0 transparent" }], { duration: 1200 });
+}
+/** The note of one footnote: one setting, edited in a popover at its marker (V2 D54 / D55). */
+function FootnoteEditor({ n, note, onChange, onRemove, onDone }) {
+	const [v, setV] = React.useState(note);
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-2",
+		onSubmit: (e) => {
+			e.preventDefault();
+			onDone();
+		},
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				htmlFor: id,
+				className: "text-kit-xs font-medium text-kit-fg-2",
+				children: ["Footnote ", n]
+			}),
+			/* @__PURE__ */ jsx(Textarea, {
+				id,
+				autoFocus: true,
+				rows: 3,
+				value: v,
+				placeholder: "Write the note",
+				onChange: (e) => {
+					setV(e.target.value);
+					onChange(e.target.value);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && !e.shiftKey) {
+						e.preventDefault();
+						onDone();
+					}
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					leftIcon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+					onClick: onRemove,
+					className: "hover:text-kit-danger-fg",
+					children: "Remove"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "primary",
+					type: "submit",
+					children: "Done"
+				})]
+			})
+		]
+	});
+}
+/** The notes under the body, numbered in text order, each with a way back to its marker. Renders nothing when empty. */
+function FootnotesList({ notes, readOnly, density = "default", onEdit, onBack }) {
+	if (!notes.length) return null;
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "Footnotes",
+		className: cn("border-t border-kit-line-subtle text-kit-sm text-kit-fg-2", density === "bare" ? "mt-4 pt-2" : density === "dense" ? "mx-2.5 mb-2 pt-2" : "mx-4 mb-3 pt-2.5"),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "m-0 flex list-decimal flex-col gap-1 pl-5 marker:text-kit-fg-3",
+			children: notes.map((n, i) => /* @__PURE__ */ jsx("li", {
+				className: "pl-1",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex items-start gap-1",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: readOnly,
+						"aria-label": `Footnote ${i + 1}: ${n.note || "empty"}. Edit`,
+						onClick: () => onEdit(n.el),
+						className: "min-w-0 flex-1 rounded-kit-sm text-left leading-relaxed enabled:hover:text-kit-fg",
+						children: n.note || /* @__PURE__ */ jsx("span", {
+							className: "text-kit-warning-fg",
+							children: "Empty note"
+						})
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						content: "Back to the text",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": `Back to reference ${i + 1}`,
+							onClick: () => onBack(n.el),
+							className: "shrink-0 rounded-kit-sm px-1 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+							children: "↩"
+						})
+					})]
+				})
+			}, i))
+		})
+	});
+}
+//#endregion
+export { FN_MARK, FOOTNOTE_POPOVER_CLASS, FOOTNOTE_REFUSED, FootnoteEditor, FootnotesList, backToMarker, caretAfterMarker, footnoteMarkers, insertFootnote, renumberFootnotes };
+
+//# sourceMappingURL=footnote.js.map

package/dist/controls/rich-text/footnote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footnote.js","names":[],"sources":["../../../src/controls/rich-text/footnote.tsx"],"sourcesContent":["/**\n * RICH TEXT · Footnotes (kit-richtext-ui-spec.md §1): V2's inline footnote, stored as the PT inline object\n * `{ _type: \"footnote\", note }`, written in the editor as `<sup data-rt=\"fn\" data-note contenteditable=\"false\">N</sup>`.\n * The number, the notes list and the way back are derived from the markers' text order, never stored.\n *\n * Editor chrome, not an island: the editor owns the clicks and the popover's anchor; this module is the V2 parts.\n *   insert    V2 ops.ts:182-205: at the caret through the browser's insert (⌘Z takes it back), never inside a rich\n *             block or code; null then, and the editor toasts FOOTNOTE_REFUSED (V2 rich-text-editor.tsx:610-615)\n *   numbers   V2 dom.ts:429-436: the body's own markers in text order, 1…n\n *   popover   V2 FootnoteEditor (rich-text-editor.tsx:1736-1777) at the marker, w-[320px] rounded p-3\n *   list      V2 notes section (rich-text-editor.tsx:1533-1560): each note a button that edits it, and ↩ back to it\n *   back      V2 backToMarker (rich-text-editor.tsx:1095-1100): scroll to it, caret after it, a 1200ms accent flash\n */\nimport * as React from \"react\";\nimport { IconTrash } from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../../ui/button\";\nimport { Textarea } from \"../../ui/input\";\nimport { Tooltip } from \"../../ui/overlay\";\n\nexport const FN_MARK = \"sup[data-rt=fn]\";\n/** The toast when a footnote cannot go where the caret is (V2 rich-text-editor.tsx:613). */\nexport const FOOTNOTE_REFUSED = {\n  title: \"Put the caret in the text first\",\n  description: \"Footnotes number the story's own text, not text inside a block.\",\n} as const;\n/** The popover's chrome (V2 rich-text-editor.tsx:1650). */\nexport const FOOTNOTE_POPOVER_CLASS = \"w-[320px] rounded-kit-lg p-3\";\n\n/** The body's own markers in text order (markers inside a rich block are not the body's). */\nexport const footnoteMarkers = (root: HTMLElement): HTMLElement[] =>\n  Array.from(root.querySelectorAll<HTMLElement>(FN_MARK)).filter((m) => !m.closest(\"[data-rt-island],[data-rt-isolate]\"));\n\n/** Numbers the markers 1…n in text order; returns them with their notes, for the list. */\nexport function renumberFootnotes(root: HTMLElement): { el: HTMLElement; note: string }[] {\n  return footnoteMarkers(root).map((m, i) => {\n    if (m.textContent !== String(i + 1)) m.textContent = String(i + 1);\n    return { el: m, note: m.getAttribute(\"data-note\") ?? \"\" };\n  });\n}\n\n/** A new, empty marker at the caret. Null when the caret is outside the body's text (a rich block, code, elsewhere). */\nexport function insertFootnote(root: HTMLElement): HTMLElement | null {\n  const s = window.getSelection();\n  if (!s || !s.rangeCount || !root.contains(s.anchorNode)) return null;\n  const at = s.anchorNode?.nodeType === 1 ? (s.anchorNode as HTMLElement) : s.anchorNode?.parentElement;\n  if (!at || at.closest(\"[data-rt-island],[data-rt-isolate]\") || at.closest(\"pre\")) return null;\n  root.focus({ preventScroll: true });\n  if (typeof document.execCommand === \"function\") document.execCommand(\"insertHTML\", false, `<sup data-rt=\"fn\" data-note=\"\" contenteditable=\"false\" data-fn-new=\"\">1</sup>​`);\n  let sup = root.querySelector<HTMLElement>(\"sup[data-fn-new]\");\n  if (!sup) {\n    // the browser dropped the marker (or has no execCommand): place it by hand\n    sup = document.createElement(\"sup\");\n    sup.setAttribute(\"data-rt\", \"fn\");\n    sup.setAttribute(\"data-note\", \"\");\n    sup.setAttribute(\"contenteditable\", \"false\");\n    sup.textContent = \"1\";\n    const r = s.getRangeAt(0);\n    r.collapse(false);\n    r.insertNode(sup);\n    const after = document.createTextNode(\"​\");\n    sup.after(after);\n    const c = document.createRange();\n    c.setStart(after, after.length);\n    c.collapse(true);\n    s.removeAllRanges();\n    s.addRange(c);\n  }\n  sup.removeAttribute(\"data-fn-new\");\n  renumberFootnotes(root);\n  return sup;\n}\n\n/** The caret right after a marker, in the body. */\nexport function caretAfterMarker(root: HTMLElement, m: HTMLElement) {\n  const s = window.getSelection();\n  if (!s || !m.isConnected) return;\n  root.focus({ preventScroll: true });\n  const r = document.createRange();\n  r.setStartAfter(m);\n  r.collapse(true);\n  s.removeAllRanges();\n  s.addRange(r);\n}\n\n/** \"Back to the text\": scroll the marker to the centre, caret after it, and flash it (1200ms). */\nexport function backToMarker(root: HTMLElement, m: HTMLElement) {\n  if (!m.isConnected) return;\n  m.scrollIntoView?.({ block: \"center\", behavior: \"smooth\" });\n  caretAfterMarker(root, m);\n  m.animate?.([{ boxShadow: \"0 0 0 3px var(--kit-accent-soft)\" }, { boxShadow: \"0 0 0 0 transparent\" }], { duration: 1200 });\n}\n\n/** The note of one footnote: one setting, edited in a popover at its marker (V2 D54 / D55). */\nexport function FootnoteEditor({ n, note, onChange, onRemove, onDone }: { n: number; note: string; onChange: (v: string) => void; onRemove: () => void; onDone: () => void }) {\n  const [v, setV] = React.useState(note);\n  const id = React.useId();\n  return (\n    <form\n      className=\"flex flex-col gap-2\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        onDone();\n      }}\n    >\n      <label htmlFor={id} className=\"text-kit-xs font-medium text-kit-fg-2\">\n        Footnote {n}\n      </label>\n      <Textarea\n        id={id}\n        autoFocus\n        rows={3}\n        value={v}\n        placeholder=\"Write the note\"\n        onChange={(e) => {\n          setV(e.target.value);\n          onChange(e.target.value);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" && !e.shiftKey) {\n            e.preventDefault();\n            onDone();\n          }\n        }}\n      />\n      <div className=\"flex items-center justify-between\">\n        <Button size=\"xs\" variant=\"ghost\" leftIcon={<IconTrash stroke={1.5} />} onClick={onRemove} className=\"hover:text-kit-danger-fg\">\n          Remove\n        </Button>\n        <Button size=\"xs\" variant=\"primary\" type=\"submit\">\n          Done\n        </Button>\n      </div>\n    </form>\n  );\n}\n\n/** The notes under the body, numbered in text order, each with a way back to its marker. Renders nothing when empty. */\nexport function FootnotesList({\n  notes,\n  readOnly,\n  density = \"default\",\n  onEdit,\n  onBack,\n}: {\n  notes: { el: HTMLElement; note: string }[];\n  readOnly?: boolean;\n  /** the editor's spacing: bare (no chrome), dense (panel), default */\n  density?: \"bare\" | \"dense\" | \"default\";\n  onEdit: (el: HTMLElement) => void;\n  onBack: (el: HTMLElement) => void;\n}) {\n  if (!notes.length) return null;\n  return (\n    <section\n      aria-label=\"Footnotes\"\n      className={cn(\"border-t border-kit-line-subtle text-kit-sm text-kit-fg-2\", density === \"bare\" ? \"mt-4 pt-2\" : density === \"dense\" ? \"mx-2.5 mb-2 pt-2\" : \"mx-4 mb-3 pt-2.5\")}\n    >\n      <ol className=\"m-0 flex list-decimal flex-col gap-1 pl-5 marker:text-kit-fg-3\">\n        {notes.map((n, i) => (\n          <li key={i} className=\"pl-1\">\n            <span className=\"flex items-start gap-1\">\n              <button\n                type=\"button\"\n                disabled={readOnly}\n                aria-label={`Footnote ${i + 1}: ${n.note || \"empty\"}. Edit`}\n                onClick={() => onEdit(n.el)}\n                className=\"min-w-0 flex-1 rounded-kit-sm text-left leading-relaxed enabled:hover:text-kit-fg\"\n              >\n                {n.note || <span className=\"text-kit-warning-fg\">Empty note</span>}\n              </button>\n              <Tooltip content=\"Back to the text\">\n                <button type=\"button\" aria-label={`Back to reference ${i + 1}`} onClick={() => onBack(n.el)} className=\"shrink-0 rounded-kit-sm px-1 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n                  ↩\n                </button>\n              </Tooltip>\n            </span>\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/controls/rich-text/gallery.d.ts

@@ -0,0 +1,28 @@
+import type { TypeSchema } from "../../schema/types";
+import type { ImageValue } from "../media";
+import type { IslandCtx } from "./blocks";
+import type { IslandEl } from "./dom";
+export interface GalleryImage {
+    _key: string;
+    image: ImageValue | null;
+    caption: string;
+}
+export interface GalleryModel {
+    layout: "grid" | "carousel";
+    images: GalleryImage[];
+}
+export declare const GALLERY_LABEL = "Gallery";
+export declare const galleryDefault: () => GalleryModel;
+export declare const GALLERY_SCHEMA: TypeSchema;
+export declare function GalleryPreview({ m, onAdd, ro }: {
+    m: GalleryModel;
+    onAdd: () => void;
+    ro: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GalleryBlock({ m, set, el, ctx, autoFocus, }: {
+    m: GalleryModel;
+    set: (fn: (m: GalleryModel) => GalleryModel, label?: string) => void;
+    el: IslandEl;
+    ctx: IslandCtx;
+    autoFocus: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,167 @@
+import { cn } from "../../lib/cn.js";
+import { ArticleEmpty, ArticlePanelBlock } from "./article-shell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconPhoto } from "@tabler/icons-react";
+//#region src/controls/rich-text/gallery.tsx
+/**
+* RICH TEXT · Gallery (kit-richtext-ui-spec.md §2): V2's article block, stored as the PT block object
+* `{ _type: "gallery", layout: "grid" | "carousel", images: { _key, image, caption? }[] }`; each image is the rich-text
+* image's own shape (src/alt + media id), so media rewrites and alt audits reach it.
+*
+*   form      V2 article.ts:75-114: Images (a grid list, 2–24, each a required image + caption ≤160), Layout
+*             (Grid | Carousel, segmented). A list of objects → the floating properties panel (D54); a fresh insert opens it.
+*   preview   V2 article-blocks.tsx:451-480: Grid in 2 columns for 2 or 4 images, else 3, square crops; Carousel a
+*             72%-wide scroll-snap row of 4:3 crops with "N images · carousel"; "Add images" when there are none.
+*/
+var GALLERY_LABEL = "Gallery";
+var galleryDefault = () => ({
+	layout: "grid",
+	images: []
+});
+var GALLERY_SCHEMA = {
+	name: "gallery",
+	title: GALLERY_LABEL,
+	kind: "object",
+	icon: "photo",
+	fields: [{
+		name: "images",
+		title: "Images",
+		type: "array",
+		itemNoun: "image",
+		arrayLayout: "grid",
+		validation: {
+			min: 2,
+			max: 24
+		},
+		of: [{
+			name: "photo",
+			title: "Image",
+			type: "object",
+			icon: "photo",
+			preview: {
+				title: "caption",
+				media: "image",
+				fallback: "Untitled image"
+			},
+			fields: [{
+				name: "image",
+				title: "Image",
+				type: "image",
+				validation: { required: true }
+			}, {
+				name: "caption",
+				title: "Caption",
+				type: "string",
+				validation: { max: 160 }
+			}]
+		}]
+	}, {
+		name: "layout",
+		title: "Layout",
+		type: "select",
+		layout: "segmented",
+		initialValue: "grid",
+		options: [{
+			value: "grid",
+			label: "Grid"
+		}, {
+			value: "carousel",
+			label: "Carousel"
+		}]
+	}]
+};
+function GalleryPreview({ m, onAdd, ro }) {
+	const imgs = m.images.filter((x) => x.image?.url);
+	if (!imgs.length) return /* @__PURE__ */ jsx(ArticleEmpty, {
+		icon: /* @__PURE__ */ jsx(IconPhoto, { stroke: 1.5 }),
+		title: GALLERY_LABEL,
+		action: "Add images",
+		onAction: onAdd,
+		ro
+	});
+	if (m.layout === "carousel") return /* @__PURE__ */ jsxs("figure", {
+		className: "m-0",
+		"data-field": "images",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "m-0 flex snap-x gap-2 overflow-x-auto p-0 pb-1",
+			"aria-label": GALLERY_LABEL,
+			children: imgs.map((x) => /* @__PURE__ */ jsxs("li", {
+				className: "w-[72%] shrink-0 snap-start list-none",
+				children: [/* @__PURE__ */ jsx("img", {
+					src: x.image.url,
+					alt: x.image.alt ?? "",
+					draggable: false,
+					className: "block aspect-[4/3] w-full rounded-kit-lg border border-kit-line object-cover"
+				}), x.caption ? /* @__PURE__ */ jsx("p", {
+					className: "mt-1 truncate text-kit-xs text-kit-fg-3",
+					children: x.caption
+				}) : null]
+			}, x._key))
+		}), /* @__PURE__ */ jsxs("figcaption", {
+			className: "mt-1 text-kit-2xs text-kit-fg-3",
+			children: [
+				imgs.length,
+				" ",
+				imgs.length === 1 ? "image" : "images",
+				" · carousel"
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsx("figure", {
+		className: "m-0",
+		"data-field": "images",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: cn("m-0 grid gap-2 p-0", imgs.length === 2 || imgs.length === 4 ? "grid-cols-2" : "grid-cols-3"),
+			"aria-label": GALLERY_LABEL,
+			children: imgs.map((x) => /* @__PURE__ */ jsxs("li", {
+				className: "list-none",
+				children: [/* @__PURE__ */ jsx("img", {
+					src: x.image.url,
+					alt: x.image.alt ?? "",
+					draggable: false,
+					className: "block aspect-square w-full rounded-kit-lg border border-kit-line object-cover"
+				}), x.caption ? /* @__PURE__ */ jsx("p", {
+					className: "mt-1 truncate text-kit-xs text-kit-fg-3",
+					children: x.caption
+				}) : null]
+			}, x._key))
+		})
+	});
+}
+var asImages = (v) => Array.isArray(v) ? v.map((x, i) => {
+	const o = x ?? {};
+	return {
+		_key: typeof o._key === "string" ? o._key : `g${i}`,
+		image: o.image ?? null,
+		caption: typeof o.caption === "string" ? o.caption : ""
+	};
+}) : [];
+function GalleryBlock({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(ArticlePanelBlock, {
+		label: GALLERY_LABEL,
+		kind: "gallery",
+		schema: GALLERY_SCHEMA,
+		m,
+		set,
+		el,
+		ctx,
+		autoFocus,
+		toForm: (x) => ({
+			images: x.images,
+			layout: x.layout
+		}),
+		fromForm: (v) => ({
+			images: asImages(v.images),
+			layout: v.layout === "carousel" ? "carousel" : "grid"
+		}),
+		children: (open, ro) => /* @__PURE__ */ jsx(GalleryPreview, {
+			m,
+			onAdd: () => open("images"),
+			ro
+		})
+	});
+}
+//#endregion
+export { GALLERY_LABEL, GALLERY_SCHEMA, GalleryBlock, GalleryPreview, galleryDefault };
+
+//# sourceMappingURL=gallery.js.map

package/dist/controls/rich-text/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":[],"sources":["../../../src/controls/rich-text/gallery.tsx"],"sourcesContent":["/**\n * RICH TEXT · Gallery (kit-richtext-ui-spec.md §2): V2's article block, stored as the PT block object\n * `{ _type: \"gallery\", layout: \"grid\" | \"carousel\", images: { _key, image, caption? }[] }`; each image is the rich-text\n * image's own shape (src/alt + media id), so media rewrites and alt audits reach it.\n *\n *   form      V2 article.ts:75-114: Images (a grid list, 2–24, each a required image + caption ≤160), Layout\n *             (Grid | Carousel, segmented). A list of objects → the floating properties panel (D54); a fresh insert opens it.\n *   preview   V2 article-blocks.tsx:451-480: Grid in 2 columns for 2 or 4 images, else 3, square crops; Carousel a\n *             72%-wide scroll-snap row of 4:3 crops with \"N images · carousel\"; \"Add images\" when there are none.\n */\nimport { IconPhoto } from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport type { TypeSchema } from \"../../schema/types\";\nimport type { ImageValue } from \"../media\";\nimport { ArticleEmpty, ArticlePanelBlock } from \"./article-shell\";\nimport type { IslandCtx } from \"./blocks\";\nimport type { IslandEl } from \"./dom\";\n\nexport interface GalleryImage {\n  _key: string;\n  image: ImageValue | null;\n  caption: string;\n}\nexport interface GalleryModel {\n  layout: \"grid\" | \"carousel\";\n  images: GalleryImage[];\n}\nexport const GALLERY_LABEL = \"Gallery\";\nexport const galleryDefault = (): GalleryModel => ({ layout: \"grid\", images: [] });\n\nexport const GALLERY_SCHEMA: TypeSchema = {\n  name: \"gallery\",\n  title: GALLERY_LABEL,\n  kind: \"object\",\n  icon: \"photo\",\n  fields: [\n    {\n      name: \"images\",\n      title: \"Images\",\n      type: \"array\",\n      itemNoun: \"image\",\n      arrayLayout: \"grid\",\n      validation: { min: 2, max: 24 },\n      of: [\n        {\n          name: \"photo\",\n          title: \"Image\",\n          type: \"object\",\n          icon: \"photo\",\n          preview: { title: \"caption\", media: \"image\", fallback: \"Untitled image\" },\n          fields: [\n            { name: \"image\", title: \"Image\", type: \"image\", validation: { required: true } },\n            { name: \"caption\", title: \"Caption\", type: \"string\", validation: { max: 160 } },\n          ],\n        },\n      ],\n    },\n    {\n      name: \"layout\",\n      title: \"Layout\",\n      type: \"select\",\n      layout: \"segmented\",\n      initialValue: \"grid\",\n      options: [\n        { value: \"grid\", label: \"Grid\" },\n        { value: \"carousel\", label: \"Carousel\" },\n      ],\n    },\n  ],\n};\n\nexport function GalleryPreview({ m, onAdd, ro }: { m: GalleryModel; onAdd: () => void; ro: boolean }) {\n  const imgs = m.images.filter((x) => x.image?.url);\n  if (!imgs.length) return <ArticleEmpty icon={<IconPhoto stroke={1.5} />} title={GALLERY_LABEL} action=\"Add images\" onAction={onAdd} ro={ro} />;\n  if (m.layout === \"carousel\")\n    return (\n      <figure className=\"m-0\" data-field=\"images\">\n        <ul className=\"m-0 flex snap-x gap-2 overflow-x-auto p-0 pb-1\" aria-label={GALLERY_LABEL}>\n          {imgs.map((x) => (\n            <li key={x._key} className=\"w-[72%] shrink-0 snap-start list-none\">\n              <img src={x.image!.url} alt={x.image!.alt ?? \"\"} draggable={false} className=\"block aspect-[4/3] w-full rounded-kit-lg border border-kit-line object-cover\" />\n              {x.caption ? <p className=\"mt-1 truncate text-kit-xs text-kit-fg-3\">{x.caption}</p> : null}\n            </li>\n          ))}\n        </ul>\n        <figcaption className=\"mt-1 text-kit-2xs text-kit-fg-3\">\n          {imgs.length} {imgs.length === 1 ? \"image\" : \"images\"} · carousel\n        </figcaption>\n      </figure>\n    );\n  return (\n    <figure className=\"m-0\" data-field=\"images\">\n      <ul className={cn(\"m-0 grid gap-2 p-0\", imgs.length === 2 || imgs.length === 4 ? \"grid-cols-2\" : \"grid-cols-3\")} aria-label={GALLERY_LABEL}>\n        {imgs.map((x) => (\n          <li key={x._key} className=\"list-none\">\n            <img src={x.image!.url} alt={x.image!.alt ?? \"\"} draggable={false} className=\"block aspect-square w-full rounded-kit-lg border border-kit-line object-cover\" />\n            {x.caption ? <p className=\"mt-1 truncate text-kit-xs text-kit-fg-3\">{x.caption}</p> : null}\n          </li>\n        ))}\n      </ul>\n    </figure>\n  );\n}\n\nconst asImages = (v: unknown): GalleryImage[] =>\n  Array.isArray(v)\n    ? v.map((x, i) => {\n        const o = (x ?? {}) as Record<string, unknown>;\n        return { _key: typeof o._key === \"string\" ? o._key : `g${i}`, image: (o.image as ImageValue | null) ?? null, caption: typeof o.caption === \"string\" ? o.caption : \"\" };\n      })\n    : [];\n\nexport function GalleryBlock({\n  m, set, el, ctx, autoFocus,\n}: {\n  m: GalleryModel;\n  set: (fn: (m: GalleryModel) => GalleryModel, label?: string) => void;\n  el: IslandEl;\n  ctx: IslandCtx;\n  autoFocus: boolean;\n}) {\n  return (\n    <ArticlePanelBlock<GalleryModel>\n      label={GALLERY_LABEL}\n      kind=\"gallery\"\n      schema={GALLERY_SCHEMA}\n      m={m}\n      set={set}\n      el={el}\n      ctx={ctx}\n      autoFocus={autoFocus}\n      toForm={(x) => ({ images: x.images, layout: x.layout })}\n      fromForm={(v) => ({ images: asImages(v.images), layout: v.layout === \"carousel\" ? \"carousel\" : \"grid\" })}\n    >\n      {(open, ro) => <GalleryPreview m={m} onAdd={() => open(\"images\")} ro={ro} />}\n    </ArticlePanelBlock>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { ACTIONS, CONTROLS } from "../../engine/kit-field.js";
 import { RichTextControl, RichTextExpandAction } from "./control.js";
-//#region src/kit/controls/rich-text/index.ts
+//#region src/controls/rich-text/index.ts
 /**
 * Rich text: registers the control and its label-row action (one line each, so lanes merge cleanly).
 * Imported for its side effect by whatever loads the kit's controls; import the parts themselves by path.

package/dist/controls/rich-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/controls/rich-text/index.ts"],"sourcesContent":["/**\n * Rich text: registers the control and its label-row action (one line each, so lanes merge cleanly).\n * Imported for its side effect by whatever loads the kit's controls; import the parts themselves by path.\n */\nimport { ACTIONS, CONTROLS } from \"../../engine/kit-field\";\nimport { RichTextControl, RichTextExpandAction } from \"./control\";\n\nCONTROLS.richtext = RichTextControl;\nACTIONS.richtext = RichTextExpandAction;\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW;AACpB,QAAQ,WAAW"}

package/{controls → dist/controls}/rich-text/link-form.d.ts

@@ -4,10 +4,12 @@ export interface TextLink {
 }
 /** An address a link may carry: http(s), mailto, tel, a site path or an in-page anchor. */
 export declare function linkProblem(href: string): string | null;
-export declare function LinkForm({ initial, allowNewTab, onSave, onCancel, onDetach, }: {
+export declare function LinkForm({ initial, allowNewTab, onSave, onCancel, onDetach, dirty, }: {
     initial: TextLink;
     allowNewTab: boolean;
     onSave: (v: TextLink) => void;
     onCancel: () => void;
     onDetach?: () => void;
+    /** something the host draws beside the form changed (a button's label), so Apply has something to save */
+    dirty?: boolean;
 }): import("react/jsx-runtime").JSX.Element;