@bettercms-ai/kit 2.0.0 → 2.0.2

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

@@ -0,0 +1,28 @@
+import type { TypeSchema } from "../../schema/types";
+import type { IslandCtx } from "./blocks";
+import { type IslandEl } from "./dom";
+export type EmbedAspect = "16:9" | "4:3" | "1:1" | "9:16";
+export declare const EMBED_ASPECTS: readonly EmbedAspect[];
+export interface EmbedBlockModel {
+    url: string;
+    title: string;
+    aspect: EmbedAspect;
+}
+export declare const EMBED_LABEL = "Embed";
+export declare const embedDefault: () => EmbedBlockModel;
+export declare const EMBED_SCHEMA: TypeSchema;
+/** A faithful placeholder: provider, title and shape, no third-party frame in the editor. */
+export declare function EmbedPreview({ m, onAdd, ro }: {
+    m: EmbedBlockModel;
+    onAdd: () => void;
+    ro: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EmbedBlock({ m, set, el, ctx, autoFocus, shape, }: {
+    /** the Shape setting is drawn only where the host stores it (e1 2026-10-24: no control that does not persist) */
+    shape?: boolean;
+    m: EmbedBlockModel;
+    set: (fn: (m: EmbedBlockModel) => EmbedBlockModel, label?: string) => void;
+    el: IslandEl;
+    ctx: IslandCtx;
+    autoFocus: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,210 @@
+import { cn } from "../../lib/cn.js";
+import { ArticleEmpty, ArticlePopoverBlock } from "./article-shell.js";
+import { detectEmbed } from "./dom.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconBrandCodepen, IconBrandFigma, IconBrandSpotify, IconBrandVimeo, IconBrandX, IconBrandYoutube, IconHeadphones, IconLink, IconMap, IconMicrophone, IconPlayerPlayFilled, IconWorld } from "@tabler/icons-react";
+//#region src/controls/rich-text/embed.tsx
+var EMBED_ASPECTS = [
+	"16:9",
+	"4:3",
+	"1:1",
+	"9:16"
+];
+var EMBED_LABEL = "Embed";
+var embedDefault = () => ({
+	url: "",
+	title: "",
+	aspect: "16:9"
+});
+var asAspect = (v) => EMBED_ASPECTS.includes(v) ? v : "16:9";
+var EMBED_SCHEMA = {
+	name: "embed",
+	title: EMBED_LABEL,
+	kind: "object",
+	icon: "code",
+	fields: [
+		{
+			name: "url",
+			title: "Link",
+			type: "url",
+			placeholder: "Paste a YouTube, X, CodePen, Figma or map link",
+			validation: { required: true }
+		},
+		{
+			name: "title",
+			title: "Title",
+			type: "string",
+			validation: {
+				required: true,
+				max: 120
+			},
+			description: "Not shown. Read by screen readers."
+		},
+		{
+			name: "aspect",
+			title: "Shape",
+			type: "select",
+			initialValue: "16:9",
+			options: [
+				{
+					value: "16:9",
+					label: "16:9",
+					description: "Landscape"
+				},
+				{
+					value: "4:3",
+					label: "4:3",
+					description: "Classic"
+				},
+				{
+					value: "1:1",
+					label: "1:1",
+					description: "Square"
+				},
+				{
+					value: "9:16",
+					label: "9:16",
+					description: "Portrait"
+				}
+			]
+		}
+	]
+};
+/** EMBED_SCHEMA without Shape, for a host whose stored embed keeps no aspect (a stored one still draws). */
+var NO_SHAPE_SCHEMA = {
+	...EMBED_SCHEMA,
+	fields: EMBED_SCHEMA.fields.filter((f) => f.name !== "aspect")
+};
+var PROVIDER_ICON = {
+	youtube: /* @__PURE__ */ jsx(IconBrandYoutube, { stroke: 1.5 }),
+	vimeo: /* @__PURE__ */ jsx(IconBrandVimeo, { stroke: 1.5 }),
+	x: /* @__PURE__ */ jsx(IconBrandX, { stroke: 1.5 }),
+	codepen: /* @__PURE__ */ jsx(IconBrandCodepen, { stroke: 1.5 }),
+	figma: /* @__PURE__ */ jsx(IconBrandFigma, { stroke: 1.5 }),
+	maps: /* @__PURE__ */ jsx(IconMap, { stroke: 1.5 }),
+	spotify: /* @__PURE__ */ jsx(IconBrandSpotify, { stroke: 1.5 }),
+	podcast: /* @__PURE__ */ jsx(IconMicrophone, { stroke: 1.5 }),
+	audio: /* @__PURE__ */ jsx(IconHeadphones, { stroke: 1.5 }),
+	link: /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 })
+};
+var ASPECT_RATIO = {
+	"16:9": "16 / 9",
+	"4:3": "4 / 3",
+	"1:1": "1 / 1",
+	"9:16": "9 / 16"
+};
+var bare = (url) => url.replace(/^https?:\/\/(www\.)?/, "");
+/** A faithful placeholder: provider, title and shape, no third-party frame in the editor. */
+function EmbedPreview({ m, onAdd, ro }) {
+	if (!m.url) return /* @__PURE__ */ jsx(ArticleEmpty, {
+		icon: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
+		title: EMBED_LABEL,
+		action: "Paste a link",
+		onAction: onAdd,
+		ro
+	});
+	const info = detectEmbed(m.url);
+	const icon = PROVIDER_ICON[info.provider];
+	const title = m.title || /* @__PURE__ */ jsx("span", {
+		className: "text-kit-warning-fg",
+		children: "Add a title"
+	});
+	if (info.shape === "frame") return /* @__PURE__ */ jsx("figure", {
+		className: "m-0",
+		"data-field": "url",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("relative mx-auto flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-kit-lg border border-kit-line bg-kit-subtle text-center", m.aspect === "9:16" && "max-w-[300px]"),
+			style: { aspectRatio: ASPECT_RATIO[m.aspect] },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex size-11 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse [&_svg]:size-5",
+					children: info.provider === "youtube" || info.provider === "vimeo" ? /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}) : icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-field": "title",
+					className: "max-w-[80%] truncate text-kit-sm font-medium text-kit-fg",
+					children: title
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "absolute left-3 top-2.5 flex items-center gap-1.5 text-kit-xs text-kit-fg-2 [&_svg]:size-3.5",
+					children: [icon, info.label]
+				})
+			]
+		})
+	});
+	if (info.shape === "audio") return /* @__PURE__ */ jsxs("figure", {
+		className: "m-0 flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-subtle px-3 py-2.5",
+		"data-field": "url",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse [&_svg]:size-4",
+				children: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-field": "title",
+					className: "block truncate text-kit-sm font-medium text-kit-fg",
+					children: title
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1 text-kit-xs text-kit-fg-3 [&_svg]:size-3",
+					children: [icon, info.label]
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "hidden h-1 w-28 rounded-full bg-kit-line-strong sm:block"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "m-0 flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-surface px-3 py-2.5",
+		"data-field": "url",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex size-9 shrink-0 items-center justify-center rounded-kit-md bg-kit-muted text-kit-fg-2 [&_svg]:size-4",
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-field": "title",
+				className: "block truncate text-kit-sm font-medium text-kit-fg",
+				children: title
+			}), /* @__PURE__ */ jsx("span", {
+				className: "block truncate text-kit-xs text-kit-fg-3",
+				children: info.shape === "post" ? `${info.label} · ${bare(m.url)}` : bare(m.url)
+			})]
+		})]
+	});
+}
+function EmbedBlock({ m, set, el, ctx, autoFocus, shape = true }) {
+	return /* @__PURE__ */ jsx(ArticlePopoverBlock, {
+		label: EMBED_LABEL,
+		kind: "embed",
+		schema: shape ? EMBED_SCHEMA : NO_SHAPE_SCHEMA,
+		m,
+		set,
+		el,
+		ctx,
+		autoFocus,
+		toForm: (x) => ({
+			url: x.url,
+			title: x.title,
+			aspect: x.aspect
+		}),
+		fromForm: (v, prev) => ({
+			url: String(v.url ?? ""),
+			title: String(v.title ?? ""),
+			aspect: shape ? asAspect(v.aspect) : prev.aspect
+		}),
+		children: (open, ro) => /* @__PURE__ */ jsx(EmbedPreview, {
+			m,
+			onAdd: () => open("url"),
+			ro
+		})
+	});
+}
+//#endregion
+export { EMBED_ASPECTS, EMBED_LABEL, EMBED_SCHEMA, EmbedBlock, EmbedPreview, embedDefault };
+
+//# sourceMappingURL=embed.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embed.js","names":[],"sources":["../../../src/controls/rich-text/embed.tsx"],"sourcesContent":["/**\n * RICH TEXT · Embed (kit-richtext-ui-spec.md §3): V2's article block, stored as the PT block object\n * `{ _type: \"embed\", url, title, aspect }`. The provider and its shape are detected from the link (dom.ts detectEmbed),\n * never stored. Supersedes blocks.tsx EmbedBlock/EmbedPreview, which had no stored Shape (kit-40 removes those).\n *\n *   form      V2 article.ts:115-136: Link (required), Title (required, max 120, screen-reader only), Shape (a select:\n *             16:9 Landscape, 4:3 Classic, 1:1 Square, 9:16 Portrait). Three settings → the shell's popover (D54).\n *   preview   V2 article-blocks.tsx:482-535: a faithful placeholder, nothing third-party in the editor. A frame is\n *             drawn at its Shape (9:16 capped at 300px wide), audio as a slim player, an X post or any other link as a\n *             card. On the site an X post is a static card by default (owner, 2026-10-24); the editor shows V2's card.\n */\nimport * as React from \"react\";\nimport {\n  IconBrandCodepen, IconBrandFigma, IconBrandSpotify, IconBrandVimeo, IconBrandX, IconBrandYoutube, IconHeadphones, IconLink, IconMap, IconMicrophone,\n  IconPlayerPlayFilled, IconWorld,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport type { TypeSchema } from \"../../schema/types\";\nimport { ArticleEmpty, ArticlePopoverBlock } from \"./article-shell\";\nimport type { IslandCtx } from \"./blocks\";\nimport { detectEmbed, type IslandEl } from \"./dom\";\n\nexport type EmbedAspect = \"16:9\" | \"4:3\" | \"1:1\" | \"9:16\";\nexport const EMBED_ASPECTS: readonly EmbedAspect[] = [\"16:9\", \"4:3\", \"1:1\", \"9:16\"];\nexport interface EmbedBlockModel {\n  url: string;\n  title: string;\n  aspect: EmbedAspect;\n}\nexport const EMBED_LABEL = \"Embed\";\nexport const embedDefault = (): EmbedBlockModel => ({ url: \"\", title: \"\", aspect: \"16:9\" });\nconst asAspect = (v: unknown): EmbedAspect => (EMBED_ASPECTS.includes(v as EmbedAspect) ? (v as EmbedAspect) : \"16:9\");\n\nexport const EMBED_SCHEMA: TypeSchema = {\n  name: \"embed\",\n  title: EMBED_LABEL,\n  kind: \"object\",\n  icon: \"code\",\n  fields: [\n    { name: \"url\", title: \"Link\", type: \"url\", placeholder: \"Paste a YouTube, X, CodePen, Figma or map link\", validation: { required: true } },\n    { name: \"title\", title: \"Title\", type: \"string\", validation: { required: true, max: 120 }, description: \"Not shown. Read by screen readers.\" },\n    {\n      name: \"aspect\",\n      title: \"Shape\",\n      type: \"select\",\n      initialValue: \"16:9\",\n      options: [\n        { value: \"16:9\", label: \"16:9\", description: \"Landscape\" },\n        { value: \"4:3\", label: \"4:3\", description: \"Classic\" },\n        { value: \"1:1\", label: \"1:1\", description: \"Square\" },\n        { value: \"9:16\", label: \"9:16\", description: \"Portrait\" },\n      ],\n    },\n  ],\n};\n\n/** EMBED_SCHEMA without Shape, for a host whose stored embed keeps no aspect (a stored one still draws). */\nconst NO_SHAPE_SCHEMA: TypeSchema = { ...EMBED_SCHEMA, fields: EMBED_SCHEMA.fields.filter((f) => f.name !== \"aspect\") };\n\nconst PROVIDER_ICON: Record<string, React.ReactNode> = {\n  youtube: <IconBrandYoutube stroke={1.5} />, vimeo: <IconBrandVimeo stroke={1.5} />, x: <IconBrandX stroke={1.5} />, codepen: <IconBrandCodepen stroke={1.5} />,\n  figma: <IconBrandFigma stroke={1.5} />, maps: <IconMap stroke={1.5} />, spotify: <IconBrandSpotify stroke={1.5} />, podcast: <IconMicrophone stroke={1.5} />,\n  audio: <IconHeadphones stroke={1.5} />, link: <IconWorld stroke={1.5} />,\n};\nconst ASPECT_RATIO: Record<EmbedAspect, string> = { \"16:9\": \"16 / 9\", \"4:3\": \"4 / 3\", \"1:1\": \"1 / 1\", \"9:16\": \"9 / 16\" };\nconst bare = (url: string) => url.replace(/^https?:\\/\\/(www\\.)?/, \"\");\n\n/** A faithful placeholder: provider, title and shape, no third-party frame in the editor. */\nexport function EmbedPreview({ m, onAdd, ro }: { m: EmbedBlockModel; onAdd: () => void; ro: boolean }) {\n  if (!m.url) return <ArticleEmpty icon={<IconLink stroke={1.5} />} title={EMBED_LABEL} action=\"Paste a link\" onAction={onAdd} ro={ro} />;\n  const info = detectEmbed(m.url);\n  const icon = PROVIDER_ICON[info.provider];\n  const title = m.title || <span className=\"text-kit-warning-fg\">Add a title</span>;\n  if (info.shape === \"frame\")\n    return (\n      <figure className=\"m-0\" data-field=\"url\">\n        <div\n          className={cn(\n            \"relative mx-auto flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-kit-lg border border-kit-line bg-kit-subtle text-center\",\n            m.aspect === \"9:16\" && \"max-w-[300px]\",\n          )}\n          style={{ aspectRatio: ASPECT_RATIO[m.aspect] }}\n        >\n          <span className=\"flex size-11 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse [&_svg]:size-5\">\n            {info.provider === \"youtube\" || info.provider === \"vimeo\" ? <IconPlayerPlayFilled /> : icon}\n          </span>\n          <span data-field=\"title\" className=\"max-w-[80%] truncate text-kit-sm font-medium text-kit-fg\">{title}</span>\n          <span className=\"absolute left-3 top-2.5 flex items-center gap-1.5 text-kit-xs text-kit-fg-2 [&_svg]:size-3.5\">\n            {icon}\n            {info.label}\n          </span>\n        </div>\n      </figure>\n    );\n  if (info.shape === \"audio\")\n    return (\n      <figure className=\"m-0 flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-subtle px-3 py-2.5\" data-field=\"url\">\n        <span className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse [&_svg]:size-4\">\n          <IconPlayerPlayFilled />\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <span data-field=\"title\" className=\"block truncate text-kit-sm font-medium text-kit-fg\">{title}</span>\n          <span className=\"flex items-center gap-1 text-kit-xs text-kit-fg-3 [&_svg]:size-3\">\n            {icon}\n            {info.label}\n          </span>\n        </span>\n        <span aria-hidden className=\"hidden h-1 w-28 rounded-full bg-kit-line-strong sm:block\" />\n      </figure>\n    );\n  return (\n    <figure className=\"m-0 flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-surface px-3 py-2.5\" data-field=\"url\">\n      <span className=\"flex size-9 shrink-0 items-center justify-center rounded-kit-md bg-kit-muted text-kit-fg-2 [&_svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1\">\n        <span data-field=\"title\" className=\"block truncate text-kit-sm font-medium text-kit-fg\">{title}</span>\n        <span className=\"block truncate text-kit-xs text-kit-fg-3\">{info.shape === \"post\" ? `${info.label} · ${bare(m.url)}` : bare(m.url)}</span>\n      </span>\n    </figure>\n  );\n}\n\nexport function EmbedBlock({\n  m, set, el, ctx, autoFocus, shape = true,\n}: {\n  /** the Shape setting is drawn only where the host stores it (e1 2026-10-24: no control that does not persist) */\n  shape?: boolean;\n  m: EmbedBlockModel;\n  set: (fn: (m: EmbedBlockModel) => EmbedBlockModel, label?: string) => void;\n  el: IslandEl;\n  ctx: IslandCtx;\n  autoFocus: boolean;\n}) {\n  return (\n    <ArticlePopoverBlock<EmbedBlockModel>\n      label={EMBED_LABEL}\n      kind=\"embed\"\n      schema={shape ? EMBED_SCHEMA : NO_SHAPE_SCHEMA}\n      m={m}\n      set={set}\n      el={el}\n      ctx={ctx}\n      autoFocus={autoFocus}\n      toForm={(x) => ({ url: x.url, title: x.title, aspect: x.aspect })}\n      fromForm={(v, prev) => ({ url: String(v.url ?? \"\"), title: String(v.title ?? \"\"), aspect: shape ? asAspect(v.aspect) : prev.aspect })}\n    >\n      {(open, ro) => <EmbedPreview m={m} onAdd={() => open(\"url\")} ro={ro} />}\n    </ArticlePopoverBlock>\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;