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

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

@@ -0,0 +1,213 @@
+import { useRichTextRefs } from "../../context.js";
+import { ArticleEmpty, ArticlePanelBlock } from "./article-shell.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconPlus } from "@tabler/icons-react";
+//#region src/controls/rich-text/related.tsx
+/**
+* RICH TEXT · Related posts (kit-richtext-ui-spec.md §6): V2's article block, stored as the PT block object
+* `{ _type: "relatedPosts", title?, mode, count, posts: { _ref }[] }`. Each post's title, cover, category and URL are
+* derived from the referenced or queried entries, never stored.
+*
+*   modes     e1 2026-10-24 (signed deviation from V2's Automatic | Hand-picked): Same topic (topic) · Newest (newest) ·
+*             Hand-picked (manual). "How many" shows for the two automatic modes, Posts for Hand-picked. The schema's
+*             `hidden` is "show only when" (schema/types.ts), as V2's was.
+*   form      V2 article.ts:167-195: Title (≤40, default "Related stories"), Stories (segmented), How many (1–6),
+*             Posts (1–6 unique references to the field's collection). Four settings → the floating panel (D54).
+*   preview   V2 article-blocks.tsx:572-597: the title with the automatic mode's tag, three post cards (4:3 cover,
+*             two-line title, category); "Pick stories" when Hand-picked holds nothing that resolves.
+*   data      KitServices.resolveRichTextRefs (useRichTextRefs): ids for Hand-picked, a query for the automatic modes.
+*             A fresh insert focuses the card (V2 article-blocks.tsx:131).
+*/
+var RELATED_LABEL = "Related posts";
+var relatedDefault = () => ({
+	title: "Related stories",
+	mode: "topic",
+	count: 3,
+	posts: []
+});
+var MODE_TAG = {
+	topic: "Same topic",
+	newest: "Newest"
+};
+var asMode = (v) => v === "newest" || v === "manual" ? v : "topic";
+var clampCount = (v) => Math.min(6, Math.max(1, Math.round(Number(v) || 3)));
+/** The panel form; `to` is the field's collection. "How many" explains the chosen automatic mode. */
+var relatedSchema = (to, mode) => ({
+	name: "relatedPosts",
+	title: RELATED_LABEL,
+	kind: "object",
+	icon: "news",
+	fields: [
+		{
+			name: "title",
+			title: "Title",
+			type: "string",
+			validation: { max: 40 }
+		},
+		{
+			name: "mode",
+			title: "Stories",
+			type: "select",
+			layout: "segmented",
+			initialValue: "topic",
+			options: [
+				{
+					value: "topic",
+					label: "Same topic"
+				},
+				{
+					value: "newest",
+					label: "Newest"
+				},
+				{
+					value: "manual",
+					label: "Hand-picked"
+				}
+			]
+		},
+		{
+			name: "count",
+			title: "How many",
+			type: "number",
+			hidden: {
+				field: "mode",
+				op: "in",
+				value: ["topic", "newest"]
+			},
+			numeric: {
+				min: 1,
+				max: 6,
+				step: 1
+			},
+			description: mode === "newest" ? "Newest first." : "Same topic, newest first."
+		},
+		{
+			name: "posts",
+			title: "Posts",
+			type: "array",
+			hidden: {
+				field: "mode",
+				equals: "manual"
+			},
+			validation: {
+				min: 1,
+				max: 6,
+				unique: true
+			},
+			of: [{
+				name: "post",
+				title: "Post",
+				type: "reference",
+				reference: { to }
+			}]
+		}
+	]
+});
+/** What the preview asks the host for: the picked ids, or the automatic mode's query. */
+function relatedRequest(m, collection, excludeId) {
+	if (m.mode === "manual") return m.posts.length ? {
+		kind: "relatedPosts",
+		ids: m.posts
+	} : null;
+	return {
+		kind: "relatedPosts",
+		query: {
+			collection,
+			mode: m.mode,
+			count: m.count,
+			excludeId
+		}
+	};
+}
+function RelatedPreview({ m, onPick, ro, collection, excludeId }) {
+	const { items, loading, error } = useRichTextRefs(relatedRequest(m, collection, excludeId));
+	const posts = m.mode === "manual" ? m.posts.map((id) => items.find((x) => x.id === id)).filter((x) => !!x) : items;
+	if (m.mode === "manual" && !loading && !error && !posts.length) return /* @__PURE__ */ jsx(ArticleEmpty, {
+		icon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+		title: m.title || "Related posts",
+		action: "Pick stories",
+		onAction: onPick,
+		ro
+	});
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "rounded-kit-lg border border-kit-line bg-kit-surface px-4 py-3",
+		"aria-label": m.title || "Related posts",
+		"aria-busy": loading || void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex items-baseline gap-2",
+			children: [m.title ? /* @__PURE__ */ jsx("p", {
+				"data-field": "title",
+				className: "text-kit-sm font-semibold text-kit-fg",
+				children: m.title
+			}) : null, m.mode !== "manual" ? /* @__PURE__ */ jsx("span", {
+				"data-field": "mode",
+				className: "text-kit-2xs text-kit-fg-3",
+				children: MODE_TAG[m.mode]
+			}) : null]
+		}), error ? /* @__PURE__ */ jsxs("p", {
+			role: "status",
+			className: "text-kit-sm text-kit-warning-fg",
+			children: ["The stories couldn't load: ", error]
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "m-0 grid grid-cols-3 gap-3 p-0",
+			"data-field": m.mode === "manual" ? "posts" : "count",
+			children: posts.map((e) => /* @__PURE__ */ jsxs("li", {
+				className: "min-w-0 list-none",
+				children: [
+					e.cover ? /* @__PURE__ */ jsx("img", {
+						src: e.cover,
+						alt: "",
+						draggable: false,
+						className: "block aspect-[4/3] w-full rounded-kit-md border border-kit-line object-cover"
+					}) : /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] rounded-kit-md bg-kit-muted" }),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1.5 line-clamp-2 text-kit-xs font-medium leading-snug text-kit-fg",
+						children: e.title
+					}),
+					e.category ? /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 truncate text-kit-2xs text-kit-fg-3",
+						children: e.category
+					}) : null
+				]
+			}, e.id))
+		})]
+	});
+}
+function RelatedBlock({ m, set, el, ctx, autoFocus, collection, excludeId }) {
+	const schema = React.useMemo(() => relatedSchema([collection], m.mode), [collection, m.mode]);
+	return /* @__PURE__ */ jsx(ArticlePanelBlock, {
+		label: RELATED_LABEL,
+		kind: "related",
+		schema,
+		m,
+		set,
+		el,
+		ctx,
+		autoFocus,
+		openOnInsert: false,
+		toForm: (x) => ({
+			title: x.title,
+			mode: x.mode,
+			count: x.count,
+			posts: x.posts
+		}),
+		fromForm: (v) => ({
+			title: String(v.title ?? ""),
+			mode: asMode(v.mode),
+			count: clampCount(v.count),
+			posts: Array.isArray(v.posts) ? v.posts.filter((x) => typeof x === "string") : []
+		}),
+		children: (open, ro) => /* @__PURE__ */ jsx(RelatedPreview, {
+			m,
+			onPick: () => open("posts"),
+			ro,
+			collection,
+			excludeId
+		})
+	});
+}
+//#endregion
+export { RELATED_LABEL, RelatedBlock, RelatedPreview, relatedDefault, relatedRequest, relatedSchema };
+
+//# sourceMappingURL=related.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"related.js","names":[],"sources":["../../../src/controls/rich-text/related.tsx"],"sourcesContent":["/**\n * RICH TEXT · Related posts (kit-richtext-ui-spec.md §6): V2's article block, stored as the PT block object\n * `{ _type: \"relatedPosts\", title?, mode, count, posts: { _ref }[] }`. Each post's title, cover, category and URL are\n * derived from the referenced or queried entries, never stored.\n *\n *   modes     e1 2026-10-24 (signed deviation from V2's Automatic | Hand-picked): Same topic (topic) · Newest (newest) ·\n *             Hand-picked (manual). \"How many\" shows for the two automatic modes, Posts for Hand-picked. The schema's\n *             `hidden` is \"show only when\" (schema/types.ts), as V2's was.\n *   form      V2 article.ts:167-195: Title (≤40, default \"Related stories\"), Stories (segmented), How many (1–6),\n *             Posts (1–6 unique references to the field's collection). Four settings → the floating panel (D54).\n *   preview   V2 article-blocks.tsx:572-597: the title with the automatic mode's tag, three post cards (4:3 cover,\n *             two-line title, category); \"Pick stories\" when Hand-picked holds nothing that resolves.\n *   data      KitServices.resolveRichTextRefs (useRichTextRefs): ids for Hand-picked, a query for the automatic modes.\n *             A fresh insert focuses the card (V2 article-blocks.tsx:131).\n */\nimport * as React from \"react\";\nimport { IconPlus } from \"@tabler/icons-react\";\nimport { useRichTextRefs, type KitRichTextRefRequest } from \"../../context\";\nimport type { TypeSchema } from \"../../schema/types\";\nimport { ArticleEmpty, ArticlePanelBlock } from \"./article-shell\";\nimport type { IslandCtx } from \"./blocks\";\nimport type { IslandEl } from \"./dom\";\n\nexport type RelatedMode = \"topic\" | \"newest\" | \"manual\";\nexport interface RelatedModel {\n  title: string;\n  mode: RelatedMode;\n  count: number;\n  /** entry ids, Hand-picked only; the PT form wraps each as `{ _key, _ref }` */\n  posts: string[];\n}\nexport const RELATED_LABEL = \"Related posts\";\nexport const relatedDefault = (): RelatedModel => ({ title: \"Related stories\", mode: \"topic\", count: 3, posts: [] });\nconst MODE_TAG: Record<Exclude<RelatedMode, \"manual\">, string> = { topic: \"Same topic\", newest: \"Newest\" };\nconst asMode = (v: unknown): RelatedMode => (v === \"newest\" || v === \"manual\" ? v : \"topic\");\nconst clampCount = (v: unknown) => Math.min(6, Math.max(1, Math.round(Number(v) || 3)));\n\n/** The panel form; `to` is the field's collection. \"How many\" explains the chosen automatic mode. */\nexport const relatedSchema = (to: string[], mode: RelatedMode): TypeSchema => ({\n  name: \"relatedPosts\",\n  title: RELATED_LABEL,\n  kind: \"object\",\n  icon: \"news\",\n  fields: [\n    { name: \"title\", title: \"Title\", type: \"string\", validation: { max: 40 } },\n    {\n      name: \"mode\",\n      title: \"Stories\",\n      type: \"select\",\n      layout: \"segmented\",\n      initialValue: \"topic\",\n      options: [\n        { value: \"topic\", label: \"Same topic\" },\n        { value: \"newest\", label: \"Newest\" },\n        { value: \"manual\", label: \"Hand-picked\" },\n      ],\n    },\n    {\n      name: \"count\",\n      title: \"How many\",\n      type: \"number\",\n      hidden: { field: \"mode\", op: \"in\", value: [\"topic\", \"newest\"] },\n      numeric: { min: 1, max: 6, step: 1 },\n      description: mode === \"newest\" ? \"Newest first.\" : \"Same topic, newest first.\",\n    },\n    {\n      name: \"posts\",\n      title: \"Posts\",\n      type: \"array\",\n      hidden: { field: \"mode\", equals: \"manual\" },\n      validation: { min: 1, max: 6, unique: true },\n      of: [{ name: \"post\", title: \"Post\", type: \"reference\", reference: { to } }],\n    },\n  ],\n});\n\n/** What the preview asks the host for: the picked ids, or the automatic mode's query. */\nexport function relatedRequest(m: RelatedModel, collection?: string, excludeId?: string): KitRichTextRefRequest | null {\n  if (m.mode === \"manual\") return m.posts.length ? { kind: \"relatedPosts\", ids: m.posts } : null;\n  return { kind: \"relatedPosts\", query: { collection, mode: m.mode, count: m.count, excludeId } };\n}\n\nexport function RelatedPreview({ m, onPick, ro, collection, excludeId }: { m: RelatedModel; onPick: () => void; ro: boolean; collection?: string; excludeId?: string }) {\n  const { items, loading, error } = useRichTextRefs(relatedRequest(m, collection, excludeId));\n  // Hand-picked keeps the picked order; a post that no longer resolves is skipped (V2 .filter)\n  const posts = m.mode === \"manual\" ? m.posts.map((id) => items.find((x) => x.id === id)).filter((x): x is NonNullable<typeof x> => !!x) : items;\n  if (m.mode === \"manual\" && !loading && !error && !posts.length)\n    return <ArticleEmpty icon={<IconPlus stroke={1.5} />} title={m.title || RELATED_LABEL} action=\"Pick stories\" onAction={onPick} ro={ro} />;\n  return (\n    <aside className=\"rounded-kit-lg border border-kit-line bg-kit-surface px-4 py-3\" aria-label={m.title || RELATED_LABEL} aria-busy={loading || undefined}>\n      <div className=\"mb-2 flex items-baseline gap-2\">\n        {m.title ? (\n          <p data-field=\"title\" className=\"text-kit-sm font-semibold text-kit-fg\">\n            {m.title}\n          </p>\n        ) : null}\n        {m.mode !== \"manual\" ? (\n          <span data-field=\"mode\" className=\"text-kit-2xs text-kit-fg-3\">\n            {MODE_TAG[m.mode]}\n          </span>\n        ) : null}\n      </div>\n      {error ? (\n        <p role=\"status\" className=\"text-kit-sm text-kit-warning-fg\">\n          The stories couldn't load: {error}\n        </p>\n      ) : (\n        <ul className=\"m-0 grid grid-cols-3 gap-3 p-0\" data-field={m.mode === \"manual\" ? \"posts\" : \"count\"}>\n          {posts.map((e) => (\n            <li key={e.id} className=\"min-w-0 list-none\">\n              {e.cover ? (\n                <img src={e.cover} alt=\"\" draggable={false} className=\"block aspect-[4/3] w-full rounded-kit-md border border-kit-line object-cover\" />\n              ) : (\n                <div className=\"aspect-[4/3] rounded-kit-md bg-kit-muted\" />\n              )}\n              <p className=\"mt-1.5 line-clamp-2 text-kit-xs font-medium leading-snug text-kit-fg\">{e.title}</p>\n              {e.category ? <p className=\"mt-0.5 truncate text-kit-2xs text-kit-fg-3\">{e.category}</p> : null}\n            </li>\n          ))}\n        </ul>\n      )}\n    </aside>\n  );\n}\n\nexport function RelatedBlock({\n  m, set, el, ctx, autoFocus, collection, excludeId,\n}: {\n  m: RelatedModel;\n  set: (fn: (m: RelatedModel) => RelatedModel, label?: string) => void;\n  el: IslandEl;\n  ctx: IslandCtx;\n  autoFocus: boolean;\n  /** the posts collection (the field's config) */\n  collection: string;\n  /** the entry being edited, left out of the automatic modes */\n  excludeId?: string;\n}) {\n  const schema = React.useMemo(() => relatedSchema([collection], m.mode), [collection, m.mode]);\n  return (\n    <ArticlePanelBlock<RelatedModel>\n      label={RELATED_LABEL}\n      kind=\"related\"\n      schema={schema}\n      m={m}\n      set={set}\n      el={el}\n      ctx={ctx}\n      autoFocus={autoFocus}\n      openOnInsert={false}\n      toForm={(x) => ({ title: x.title, mode: x.mode, count: x.count, posts: x.posts })}\n      fromForm={(v) => ({\n        title: String(v.title ?? \"\"),\n        mode: asMode(v.mode),\n        count: clampCount(v.count),\n        posts: Array.isArray(v.posts) ? v.posts.filter((x): x is string => typeof x === \"string\") : [],\n      })}\n    >\n      {(open, ro) => <RelatedPreview m={m} onPick={() => open(\"posts\")} ro={ro} collection={collection} excludeId={excludeId} />}\n    </ArticlePanelBlock>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import type { TypeSchema } from "../../schema/types";
+import type { IslandCtx } from "./blocks";
+import { type IslandEl } from "./dom";
+export interface TocModel {
+    title: string;
+    depth: "2" | "3";
+}
+export declare const TOC_LABEL = "Table of contents";
+export declare const tocDefault: () => TocModel;
+/** The popover form (V2 ARTICLE_SCHEMAS.toc). Two settings → the shell's popover (D54). */
+export declare const TOC_SCHEMA: TypeSchema;
+export interface OutlineItem {
+    id: string;
+    text: string;
+    depth: 2 | 3;
+}
+/** V2 article.ts:250-251. ponytail: richtext's one slugify replaces this when it lands (plan RT5); it must stay equal. */
+export declare const slugify: (s: string) => string;
+/** The body's H2 and H3, top level only, in order, with stable de-duplicated ids. */
+export declare function outlineOf(root: ParentNode): OutlineItem[];
+export declare const tocVisible: (outline: OutlineItem[], depth: TocModel["depth"]) => OutlineItem[];
+/** One live outline per editor: the editor sets it after each input, every TOC preview subscribes. */
+export interface OutlineStore {
+    get: () => OutlineItem[];
+    subscribe: (fn: () => void) => () => void;
+    set: (next: OutlineItem[]) => void;
+}
+export declare function createOutlineStore(): OutlineStore;
+export declare const NO_OUTLINE: OutlineStore;
+/** `host` is the TOC's island element; its parent is the editor surface whose headings it lists. */
+export declare function TocPreview({ m, outline, host }: {
+    m: TocModel;
+    outline: OutlineStore;
+    host: HTMLElement;
+}): import("react/jsx-runtime").JSX.Element;
+export interface TocBlockProps {
+    m: TocModel;
+    set: (fn: (m: TocModel) => TocModel, label?: string) => void;
+    el: IslandEl;
+    /** the editor's live outline rides the island context */
+    ctx: IslandCtx & {
+        outline?: OutlineStore;
+    };
+    autoFocus: boolean;
+}
+export declare function TocBlock({ m, set, el, ctx, autoFocus }: TocBlockProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,161 @@
+import { cn } from "../../lib/cn.js";
+import { ArticlePopoverBlock } from "./article-shell.js";
+import { placeCaret } from "./dom.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/controls/rich-text/toc.tsx
+/**
+* RICH TEXT · Table of contents (kit-richtext-ui-spec.md §5): V2's article block, stored as the PT block object
+* `{ _type: "tableOfContents", title?, depth: "2" | "3" }`. The list is derived from the same body's top-level H2/H3,
+* never stored.
+*
+*   form      V2 article.ts:137-156: Title (max 40, default "In this article"), Headings H2 | H2 and H3 (segmented)
+*   outline   V2 article.ts:248-266: the body's top-level non-empty H2/H3 in order, ids slugified and de-duplicated
+*             (x, x-2, …), the same ids the site stamps on its headings
+*   preview   V2 article-blocks.tsx:537-568: the nav as the reader sees it; each entry a button that scrolls the
+*             heading to the centre and puts the caret in it; "No headings yet." when there are none
+*   store     V2 article-blocks.tsx:45-66: one live outline per editor, so every TOC follows the headings as they are typed
+*
+* The block itself (card, chip, popover at its corner) is the shared article shell (article-shell.tsx, kit-40); it
+* opens on a fresh insert by focusing the card only (V2 article-blocks.tsx:131).
+*/
+var TOC_LABEL = "Table of contents";
+var tocDefault = () => ({
+	title: "In this article",
+	depth: "3"
+});
+/** The popover form (V2 ARTICLE_SCHEMAS.toc). Two settings → the shell's popover (D54). */
+var TOC_SCHEMA = {
+	name: "tableOfContents",
+	title: TOC_LABEL,
+	kind: "object",
+	icon: "list-tree",
+	fields: [{
+		name: "title",
+		title: "Title",
+		type: "string",
+		validation: { max: 40 }
+	}, {
+		name: "depth",
+		title: "Headings",
+		type: "select",
+		layout: "segmented",
+		initialValue: "3",
+		options: [{
+			value: "2",
+			label: "H2"
+		}, {
+			value: "3",
+			label: "H2 and H3"
+		}]
+	}]
+};
+/** V2 article.ts:250-251. ponytail: richtext's one slugify replaces this when it lands (plan RT5); it must stay equal. */
+var slugify = (s) => s.toLowerCase().normalize("NFKD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "section";
+/** The body's H2 and H3, top level only, in order, with stable de-duplicated ids. */
+function outlineOf(root) {
+	const used = /* @__PURE__ */ new Set();
+	const out = [];
+	root.querySelectorAll(":scope > h2, :scope > h3").forEach((h) => {
+		const text = (h.textContent ?? "").replace(/​/g, "").trim();
+		if (!text) return;
+		let id = slugify(text);
+		for (let n = 2; used.has(id); n++) id = `${slugify(text)}-${n}`;
+		used.add(id);
+		out.push({
+			id,
+			text,
+			depth: h.tagName === "H2" ? 2 : 3
+		});
+	});
+	return out;
+}
+var tocVisible = (outline, depth) => outline.filter((o) => o.depth === 2 || depth === "3");
+function createOutlineStore() {
+	let cur = [];
+	const subs = /* @__PURE__ */ new Set();
+	return {
+		get: () => cur,
+		subscribe: (fn) => (subs.add(fn), () => void subs.delete(fn)),
+		set: (next) => {
+			if (JSON.stringify(next) === JSON.stringify(cur)) return;
+			cur = next;
+			subs.forEach((f) => f());
+		}
+	};
+}
+var NO_OUTLINE = {
+	get: () => [],
+	subscribe: () => () => {},
+	set: () => {}
+};
+/** `host` is the TOC's island element; its parent is the editor surface whose headings it lists. */
+function TocPreview({ m, outline, host }) {
+	const all = React.useSyncExternalStore(outline.subscribe, outline.get, outline.get);
+	const items = tocVisible(all, m.depth);
+	const go = (it) => {
+		const root = host.parentElement;
+		if (!root) return;
+		const h = Array.from(root.querySelectorAll(":scope > h2, :scope > h3")).filter((h) => (h.textContent ?? "").replace(/​/g, "").trim())[all.indexOf(it)];
+		if (!h) return;
+		h.scrollIntoView?.({
+			block: "center",
+			behavior: "smooth"
+		});
+		root.focus({ preventScroll: true });
+		placeCaret(h);
+	};
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": m.title || "Table of contents",
+		className: "rounded-kit-lg border border-kit-line bg-kit-surface px-4 py-3",
+		children: [m.title ? /* @__PURE__ */ jsx("p", {
+			"data-field": "title",
+			className: "mb-1.5 text-kit-sm font-semibold text-kit-fg",
+			children: m.title
+		}) : null, items.length ? /* @__PURE__ */ jsx("ol", {
+			className: "m-0 flex list-none flex-col gap-0.5 p-0 text-kit-sm",
+			children: items.map((it, i) => /* @__PURE__ */ jsx("li", {
+				className: cn(it.depth === 3 && "pl-4"),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => (e.stopPropagation(), go(it)),
+					className: "max-w-full truncate rounded-kit-sm text-left text-kit-fg-2 hover:text-kit-fg hover:underline",
+					children: it.text
+				})
+			}, `${it.id}-${i}`))
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "text-kit-sm text-kit-fg-3",
+			children: "No headings yet."
+		})]
+	});
+}
+function TocBlock({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(ArticlePopoverBlock, {
+		label: TOC_LABEL,
+		kind: "toc",
+		schema: TOC_SCHEMA,
+		m,
+		set,
+		el,
+		ctx,
+		autoFocus,
+		openOnInsert: false,
+		toForm: (x) => ({
+			title: x.title,
+			depth: x.depth
+		}),
+		fromForm: (v) => ({
+			title: String(v.title ?? ""),
+			depth: v.depth === "2" ? "2" : "3"
+		}),
+		children: () => /* @__PURE__ */ jsx(TocPreview, {
+			m,
+			outline: ctx.outline ?? NO_OUTLINE,
+			host: el
+		})
+	});
+}
+//#endregion
+export { NO_OUTLINE, TOC_LABEL, TOC_SCHEMA, TocBlock, TocPreview, createOutlineStore, outlineOf, slugify, tocDefault, tocVisible };
+
+//# sourceMappingURL=toc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toc.js","names":[],"sources":["../../../src/controls/rich-text/toc.tsx"],"sourcesContent":["/**\n * RICH TEXT · Table of contents (kit-richtext-ui-spec.md §5): V2's article block, stored as the PT block object\n * `{ _type: \"tableOfContents\", title?, depth: \"2\" | \"3\" }`. The list is derived from the same body's top-level H2/H3,\n * never stored.\n *\n *   form      V2 article.ts:137-156: Title (max 40, default \"In this article\"), Headings H2 | H2 and H3 (segmented)\n *   outline   V2 article.ts:248-266: the body's top-level non-empty H2/H3 in order, ids slugified and de-duplicated\n *             (x, x-2, …), the same ids the site stamps on its headings\n *   preview   V2 article-blocks.tsx:537-568: the nav as the reader sees it; each entry a button that scrolls the\n *             heading to the centre and puts the caret in it; \"No headings yet.\" when there are none\n *   store     V2 article-blocks.tsx:45-66: one live outline per editor, so every TOC follows the headings as they are typed\n *\n * The block itself (card, chip, popover at its corner) is the shared article shell (article-shell.tsx, kit-40); it\n * opens on a fresh insert by focusing the card only (V2 article-blocks.tsx:131).\n */\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport type { TypeSchema } from \"../../schema/types\";\nimport { ArticlePopoverBlock } from \"./article-shell\";\nimport type { IslandCtx } from \"./blocks\";\nimport { placeCaret, type IslandEl } from \"./dom\";\n\nexport interface TocModel {\n  title: string;\n  depth: \"2\" | \"3\";\n}\nexport const TOC_LABEL = \"Table of contents\";\nexport const tocDefault = (): TocModel => ({ title: \"In this article\", depth: \"3\" });\n\n/** The popover form (V2 ARTICLE_SCHEMAS.toc). Two settings → the shell's popover (D54). */\nexport const TOC_SCHEMA: TypeSchema = {\n  name: \"tableOfContents\",\n  title: TOC_LABEL,\n  kind: \"object\",\n  icon: \"list-tree\",\n  fields: [\n    { name: \"title\", title: \"Title\", type: \"string\", validation: { max: 40 } },\n    {\n      name: \"depth\",\n      title: \"Headings\",\n      type: \"select\",\n      layout: \"segmented\",\n      initialValue: \"3\",\n      options: [\n        { value: \"2\", label: \"H2\" },\n        { value: \"3\", label: \"H2 and H3\" },\n      ],\n    },\n  ],\n};\n\n/* ── Outline ───────────────────────────────────────────────────────── */\nexport interface OutlineItem {\n  id: string;\n  text: string;\n  depth: 2 | 3;\n}\n/** V2 article.ts:250-251. ponytail: richtext's one slugify replaces this when it lands (plan RT5); it must stay equal. */\nexport const slugify = (s: string) =>\n  s.toLowerCase().normalize(\"NFKD\").replace(/[̀-ͯ]/g, \"\").replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\").slice(0, 60) || \"section\";\n\n/** The body's H2 and H3, top level only, in order, with stable de-duplicated ids. */\nexport function outlineOf(root: ParentNode): OutlineItem[] {\n  const used = new Set<string>();\n  const out: OutlineItem[] = [];\n  root.querySelectorAll(\":scope > h2, :scope > h3\").forEach((h) => {\n    const text = (h.textContent ?? \"\").replace(/​/g, \"\").trim();\n    if (!text) return;\n    let id = slugify(text);\n    for (let n = 2; used.has(id); n++) id = `${slugify(text)}-${n}`;\n    used.add(id);\n    out.push({ id, text, depth: h.tagName === \"H2\" ? 2 : 3 });\n  });\n  return out;\n}\nexport const tocVisible = (outline: OutlineItem[], depth: TocModel[\"depth\"]) => outline.filter((o) => o.depth === 2 || depth === \"3\");\n\n/** One live outline per editor: the editor sets it after each input, every TOC preview subscribes. */\nexport interface OutlineStore {\n  get: () => OutlineItem[];\n  subscribe: (fn: () => void) => () => void;\n  set: (next: OutlineItem[]) => void;\n}\nexport function createOutlineStore(): OutlineStore {\n  let cur: OutlineItem[] = [];\n  const subs = new Set<() => void>();\n  return {\n    get: () => cur,\n    subscribe: (fn) => (subs.add(fn), () => void subs.delete(fn)),\n    set: (next) => {\n      if (JSON.stringify(next) === JSON.stringify(cur)) return;\n      cur = next;\n      subs.forEach((f) => f());\n    },\n  };\n}\nexport const NO_OUTLINE: OutlineStore = { get: () => [], subscribe: () => () => {}, set: () => {} };\n\n/* ── Preview (what the reader sees) ────────────────────────────────── */\n/** `host` is the TOC's island element; its parent is the editor surface whose headings it lists. */\nexport function TocPreview({ m, outline, host }: { m: TocModel; outline: OutlineStore; host: HTMLElement }) {\n  const all = React.useSyncExternalStore(outline.subscribe, outline.get, outline.get);\n  const items = tocVisible(all, m.depth);\n  const go = (it: OutlineItem) => {\n    const root = host.parentElement;\n    if (!root) return;\n    const hs = Array.from(root.querySelectorAll<HTMLElement>(\":scope > h2, :scope > h3\")).filter((h) => (h.textContent ?? \"\").replace(/​/g, \"\").trim());\n    const h = hs[all.indexOf(it)];\n    if (!h) return;\n    h.scrollIntoView?.({ block: \"center\", behavior: \"smooth\" });\n    root.focus({ preventScroll: true });\n    placeCaret(h);\n  };\n  return (\n    <nav aria-label={m.title || TOC_LABEL} className=\"rounded-kit-lg border border-kit-line bg-kit-surface px-4 py-3\">\n      {m.title ? (\n        <p data-field=\"title\" className=\"mb-1.5 text-kit-sm font-semibold text-kit-fg\">\n          {m.title}\n        </p>\n      ) : null}\n      {items.length ? (\n        <ol className=\"m-0 flex list-none flex-col gap-0.5 p-0 text-kit-sm\">\n          {items.map((it, i) => (\n            <li key={`${it.id}-${i}`} className={cn(it.depth === 3 && \"pl-4\")}>\n              <button type=\"button\" onClick={(e) => (e.stopPropagation(), go(it))} className=\"max-w-full truncate rounded-kit-sm text-left text-kit-fg-2 hover:text-kit-fg hover:underline\">\n                {it.text}\n              </button>\n            </li>\n          ))}\n        </ol>\n      ) : (\n        <p className=\"text-kit-sm text-kit-fg-3\">No headings yet.</p>\n      )}\n    </nav>\n  );\n}\n\n/* ── The block (V2 ArticleBlock, surface \"popover\") ────────────────── */\nexport interface TocBlockProps {\n  m: TocModel;\n  set: (fn: (m: TocModel) => TocModel, label?: string) => void;\n  el: IslandEl;\n  /** the editor's live outline rides the island context */\n  ctx: IslandCtx & { outline?: OutlineStore };\n  autoFocus: boolean;\n}\n\nexport function TocBlock({ m, set, el, ctx, autoFocus }: TocBlockProps) {\n  return (\n    <ArticlePopoverBlock<TocModel>\n      label={TOC_LABEL}\n      kind=\"toc\"\n      schema={TOC_SCHEMA}\n      m={m}\n      set={set}\n      el={el}\n      ctx={ctx}\n      autoFocus={autoFocus}\n      openOnInsert={false}\n      toForm={(x) => ({ title: x.title, depth: x.depth })}\n      fromForm={(v) => ({ title: String(v.title ?? \"\"), depth: v.depth === \"2\" ? \"2\" : \"3\" })}\n    >\n      {() => <TocPreview m={m} outline={ctx.outline ?? NO_OUTLINE} host={el} />}\n    </ArticlePopoverBlock>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,YAAY;AACzB,IAAa,oBAA8B;CAAE,OAAO;CAAmB,OAAO;AAAI;;AAGlF,IAAa,aAAyB;CACpC,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,QAAQ,CACN;EAAE,MAAM;EAAS,OAAO;EAAS,MAAM;EAAU,YAAY,EAAE,KAAK,GAAG;CAAE,GACzE;EACE,MAAM;EACN,OAAO;EACP,MAAM;EACN,QAAQ;EACR,cAAc;EACd,SAAS,CACP;GAAE,OAAO;GAAK,OAAO;EAAK,GAC1B;GAAE,OAAO;GAAK,OAAO;EAAY,CACnC;CACF,CACF;AACF;;AASA,IAAa,WAAW,MACtB,EAAE,YAAY,CAAC,CAAC,UAAU,MAAM,CAAC,CAAC,QAAQ,UAAU,EAAE,CAAC,CAAC,QAAQ,eAAe,GAAG,CAAC,CAAC,QAAQ,YAAY,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE,KAAK;;AAG9H,SAAgB,UAAU,MAAiC;CACzD,MAAM,uBAAO,IAAI,IAAY;CAC7B,MAAM,MAAqB,CAAC;CAC5B,KAAK,iBAAiB,0BAA0B,CAAC,CAAC,SAAS,MAAM;EAC/D,MAAM,QAAQ,EAAE,eAAe,GAAA,CAAI,QAAQ,MAAM,EAAE,CAAC,CAAC,KAAK;EAC1D,IAAI,CAAC,MAAM;EACX,IAAI,KAAK,QAAQ,IAAI;EACrB,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,KAAK,GAAG,QAAQ,IAAI,EAAE,GAAG;EAC5D,KAAK,IAAI,EAAE;EACX,IAAI,KAAK;GAAE;GAAI;GAAM,OAAO,EAAE,YAAY,OAAO,IAAI;EAAE,CAAC;CAC1D,CAAC;CACD,OAAO;AACT;AACA,IAAa,cAAc,SAAwB,UAA6B,QAAQ,QAAQ,MAAM,EAAE,UAAU,KAAK,UAAU,GAAG;AAQpI,SAAgB,qBAAmC;CACjD,IAAI,MAAqB,CAAC;CAC1B,MAAM,uBAAO,IAAI,IAAgB;CACjC,OAAO;EACL,WAAW;EACX,YAAY,QAAQ,KAAK,IAAI,EAAE,SAAS,KAAK,KAAK,OAAO,EAAE;EAC3D,MAAM,SAAS;GACb,IAAI,KAAK,UAAU,IAAI,MAAM,KAAK,UAAU,GAAG,GAAG;GAClD,MAAM;GACN,KAAK,SAAS,MAAM,EAAE,CAAC;EACzB;CACF;AACF;AACA,IAAa,aAA2B;CAAE,WAAW,CAAC;CAAG,uBAAuB,CAAC;CAAG,WAAW,CAAC;AAAE;;AAIlG,SAAgB,WAAW,EAAE,GAAG,SAAS,QAAmE;CAC1G,MAAM,MAAM,MAAM,qBAAqB,QAAQ,WAAW,QAAQ,KAAK,QAAQ,GAAG;CAClF,MAAM,QAAQ,WAAW,KAAK,EAAE,KAAK;CACrC,MAAM,MAAM,OAAoB;EAC9B,MAAM,OAAO,KAAK;EAClB,IAAI,CAAC,MAAM;EAEX,MAAM,IADK,MAAM,KAAK,KAAK,iBAA8B,0BAA0B,CAAC,CAAC,CAAC,QAAQ,OAAO,EAAE,eAAe,GAAA,CAAI,QAAQ,MAAM,EAAE,CAAC,CAAC,KAAK,CACvI,CAAA,CAAG,IAAI,QAAQ,EAAE;EAC3B,IAAI,CAAC,GAAG;EACR,EAAE,iBAAiB;GAAE,OAAO;GAAU,UAAU;EAAS,CAAC;EAC1D,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;EAClC,WAAW,CAAC;CACd;CACA,OACE,qBAAC,OAAD;EAAK,cAAY,EAAE,SAAA;EAAoB,WAAU;EAAjD,UAAA,CACG,EAAE,QACD,oBAAC,KAAD;GAAG,cAAW;GAAQ,WAAU;GAC7B,UAAA,EAAE;EACF,CAAA,IACD,MACH,MAAM,SACL,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,MAAM,KAAK,IAAI,MACd,oBAAC,MAAD;IAA0B,WAAW,GAAG,GAAG,UAAU,KAAK,MAAM;IAC9D,UAAA,oBAAC,UAAD;KAAQ,MAAK;KAAS,UAAU,OAAO,EAAE,gBAAgB,GAAG,GAAG,EAAE;KAAI,WAAU;KAC5E,UAAA,GAAG;IACE,CAAA;GACN,GAJK,GAAG,GAAG,GAAG,GAAG,GAIjB,CACL;EACC,CAAA,IAEJ,oBAAC,KAAD;GAAG,WAAU;GAA4B,UAAA;EAAmB,CAAA,CAE3D;;AAET;AAYA,SAAgB,SAAS,EAAE,GAAG,KAAK,IAAI,KAAK,aAA4B;CACtE,OACE,oBAAC,qBAAD;EACE,OAAO;EACP,MAAK;EACL,QAAQ;EACL;EACE;EACD;EACC;EACM;EACX,cAAc;EACd,SAAS,OAAO;GAAE,OAAO,EAAE;GAAO,OAAO,EAAE;EAAM;EACjD,WAAW,OAAO;GAAE,OAAO,OAAO,EAAE,SAAS,EAAE;GAAG,OAAO,EAAE,UAAU,MAAM,MAAM;EAAI;EAE9E,gBAAA,oBAAC,YAAD;GAAe;GAAG,SAAS,IAAI,WAAW;GAAY,MAAM;EAAK,CAAA;CACrD,CAAA;AAEzB"}

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

@@ -13,6 +13,8 @@ export interface Fmt {
     italic: boolean;
     underline: boolean;
     strike: boolean;
+    sup: boolean;
+    sub: boolean;
     ul: boolean;
     ol: boolean;
     /** lower-case tag of the caret's top-level block, or "island" */
@@ -21,7 +23,7 @@ export interface Fmt {
     onLink: boolean;
 }
 export declare const EMPTY_FMT: Fmt;
-export type MarkCmd = "bold" | "italic" | "underline" | "strikeThrough";
+export type MarkCmd = "bold" | "italic" | "underline" | "strikeThrough" | "superscript" | "subscript";
 export declare const MARK_FEATURE: Record<MarkCmd, RichTextFeature>;
 export declare const STYLES: {
     tag: string;
@@ -36,7 +38,7 @@ export declare const stylesFor: (allows: (f: RichTextFeature) => boolean) => {
     short: string;
     icon: React.ReactNode;
 }[];
-export declare function ToolButton({ label, tip, icon, onClick, active, disabled, shortcut, children, className, }: {
+export declare function ToolButton({ label, tip, icon, onClick, active, disabled, shortcut, children, className, side, }: {
     label: string;
     tip?: string;
     icon: React.ReactNode;
@@ -46,6 +48,8 @@ export declare function ToolButton({ label, tip, icon, onClick, active, disabled
     shortcut?: string;
     children?: React.ReactNode;
     className?: string;
+    /** The tooltip's side; the overlay's default (top) when omitted. */
+    side?: "top" | "bottom" | "left" | "right";
 }): import("react/jsx-runtime").JSX.Element;
 /** "Block style" dropdown. Compact trigger: Text / H1…H6 / Quote. */
 export declare function StyleMenu({ block, styles, onPick, onOpenChange, disabled, className, }: {

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

@@ -2,14 +2,16 @@ import { cn } from "../../lib/cn.js";
 import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
 import { InsertMenuContent } from "./catalog.js";
 import "react";
-import { IconArrowsMaximize, IconBlockquote, IconBold, IconCheck, IconChevronDown, IconClearFormatting, IconCode, IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconItalic, IconLink, IconList, IconListNumbers, IconMarkdown, IconMarkdownOff, IconMessage, IconPilcrow, IconPlus, IconStrikethrough, IconTerminal2, IconUnderline } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/rich-text/toolbar.tsx
+import { IconArrowsMaximize, IconBlockquote, IconBold, IconCheck, IconChevronDown, IconClearFormatting, IconCode, IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconItalic, IconLink, IconList, IconListNumbers, IconMarkdown, IconMarkdownOff, IconMessage, IconPilcrow, IconPlus, IconStrikethrough, IconTerminal2, IconUnderline } from "@tabler/icons-react";
+//#region src/controls/rich-text/toolbar.tsx
 var EMPTY_FMT = {
 	bold: false,
 	italic: false,
 	underline: false,
 	strike: false,
+	sup: false,
+	sub: false,
 	ul: false,
 	ol: false,
 	block: "p",
@@ -20,7 +22,9 @@ var MARK_FEATURE = {
 	bold: "bold",
 	italic: "italic",
 	underline: "underline",
-	strikeThrough: "strike"
+	strikeThrough: "strike",
+	superscript: "sup",
+	subscript: "sub"
 };
 var STYLES = [
 	{
@@ -75,10 +79,11 @@ var STYLES = [
 /** The block styles a field accepts (Text always). */
 var stylesFor = (allows) => STYLES.filter((s) => s.tag === "p" || allows(s.tag));
 var keepCaret = (e) => e.preventDefault();
-function ToolButton({ label, tip, icon, onClick, active, disabled, shortcut, children, className }) {
+function ToolButton({ label, tip, icon, onClick, active, disabled, shortcut, children, className, side }) {
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: tip ?? label,
 		shortcut,
+		side,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-label": label,
@@ -155,7 +160,7 @@ function FormatToolbar({ open, sticky, stickyTop = 0, width, dense, fmt, md, all
 	const markLabel = (m) => m === "underline" ? "Underline" : "Strikethrough";
 	const more = foldUS && marks.length || foldLists && lists.length || foldClear || foldMd || allows("code") || allows("pre");
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("overflow-clip rounded-t-kit-lg transition-[height] duration-150 ease-out", open ? "h-8 pointer-coarse:h-11" : "h-0", sticky && open && "sticky z-[4]"),
+		className: cn("overflow-clip rounded-t-kit-lg", open ? "h-8 pointer-coarse:h-11" : "h-0", sticky && open && "sticky z-[4]"),
 		style: sticky && open ? { top: stickyTop } : void 0,
 		inert: !open,
 		"aria-hidden": !open,
@@ -165,7 +170,7 @@ function FormatToolbar({ open, sticky, stickyTop = 0, width, dense, fmt, md, all
 			onMouseDown: (e) => {
 				if (!e.target.closest("button")) e.preventDefault();
 			},
-			className: cn("flex h-full items-center gap-0.5 border-b border-kit-line bg-kit-subtle px-1 transition-opacity duration-[120ms] ease-out", open ? "opacity-100" : "opacity-0"),
+			className: cn("flex h-full items-center gap-0.5 border-b border-kit-line bg-kit-subtle px-1 transition-opacity duration-[120ms] ease-out motion-reduce:transition-none", open ? "opacity-100" : "opacity-0"),
 			children: [
 				styles.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StyleMenu, {
 					block: fmt.block,
@@ -333,6 +338,6 @@ function FormatToolbar({ open, sticky, stickyTop = 0, width, dense, fmt, md, all
 	});
 }
 //#endregion
-export { EMPTY_FMT, FormatToolbar, MARK_FEATURE, StyleMenu, ToolButton, stylesFor };
+export { EMPTY_FMT, FormatToolbar, MARK_FEATURE, STYLES, StyleMenu, ToolButton, stylesFor };
 
 //# sourceMappingURL=toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/controls/rich-text/toolbar.tsx"],"sourcesContent":["/**\n * RICH TEXT · the field toolbar (V2 HEAD controls/rich-text/toolbar.tsx, production order):\n *   Style ▾ | B I U S | • 1. | Link, Clear formatting, Comment | ▾ more | + Insert   ·····   Markdown · Open full editor\n * The overflow is a chevron next to the formatting, never a second \"⋯\" (the field's label row owns the one ⋯ menu).\n * It takes no room at rest (h-0, inert, aria-hidden) and slides open to 32px when the field is in use. Items fold into\n * \"More formatting options\" as the field narrows. A control whose element the field does not accept is not drawn.\n */\nimport * as React from \"react\";\nimport {\n  IconArrowsMaximize, IconBlockquote, IconBold, IconCheck, IconChevronDown, IconClearFormatting, IconCode, IconH1, IconH2, IconH3, IconH4, IconH5,\n  IconH6, IconItalic, IconLink, IconList, IconListNumbers, IconMarkdown, IconMarkdownOff, IconMessage, IconPilcrow, IconPlus, IconStrikethrough,\n  IconTerminal2, IconUnderline,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverTrigger, Tooltip } from \"../../ui/overlay\";\nimport { InsertMenuContent, type CatalogItem } from \"./catalog\";\nimport type { RichTextFeature } from \"./codec\";\n\nexport interface Fmt {\n  bold: boolean;\n  italic: boolean;\n  underline: boolean;\n  strike: boolean;\n  sup: boolean;\n  sub: boolean;\n  ul: boolean;\n  ol: boolean;\n  /** lower-case tag of the caret's top-level block, or \"island\" */\n  block: string;\n  hasSel: boolean;\n  onLink: boolean;\n}\nexport const EMPTY_FMT: Fmt = { bold: false, italic: false, underline: false, strike: false, sup: false, sub: false, ul: false, ol: false, block: \"p\", hasSel: false, onLink: false };\n\nexport type MarkCmd = \"bold\" | \"italic\" | \"underline\" | \"strikeThrough\" | \"superscript\" | \"subscript\";\nexport const MARK_FEATURE: Record<MarkCmd, RichTextFeature> = { bold: \"bold\", italic: \"italic\", underline: \"underline\", strikeThrough: \"strike\", superscript: \"sup\", subscript: \"sub\" };\n\nexport const STYLES: { tag: string; label: string; short: string; icon: React.ReactNode }[] = [\n  { tag: \"p\", label: \"Text\", short: \"Text\", icon: <IconPilcrow stroke={1.5} /> },\n  { tag: \"h1\", label: \"Heading 1\", short: \"H1\", icon: <IconH1 stroke={1.5} /> },\n  { tag: \"h2\", label: \"Heading 2\", short: \"H2\", icon: <IconH2 stroke={1.5} /> },\n  { tag: \"h3\", label: \"Heading 3\", short: \"H3\", icon: <IconH3 stroke={1.5} /> },\n  { tag: \"h4\", label: \"Heading 4\", short: \"H4\", icon: <IconH4 stroke={1.5} /> },\n  { tag: \"h5\", label: \"Heading 5\", short: \"H5\", icon: <IconH5 stroke={1.5} /> },\n  { tag: \"h6\", label: \"Heading 6\", short: \"H6\", icon: <IconH6 stroke={1.5} /> },\n  { tag: \"blockquote\", label: \"Quote\", short: \"Quote\", icon: <IconBlockquote stroke={1.5} /> },\n];\n/** The block styles a field accepts (Text always). */\nexport const stylesFor = (allows: (f: RichTextFeature) => boolean) => STYLES.filter((s) => s.tag === \"p\" || allows(s.tag as RichTextFeature));\n\nconst keepCaret = (e: React.MouseEvent) => e.preventDefault();\n\nexport function ToolButton({\n  label,\n  tip,\n  icon,\n  onClick,\n  active,\n  disabled,\n  shortcut,\n  children,\n  className,\n  side,\n}: {\n  label: string;\n  tip?: string;\n  icon: React.ReactNode;\n  onClick?: () => void;\n  active?: boolean;\n  disabled?: boolean;\n  shortcut?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** The tooltip's side; the overlay's default (top) when omitted. */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}) {\n  return (\n    <Tooltip content={tip ?? label} shortcut={shortcut} side={side}>\n      <button\n        type=\"button\"\n        aria-label={label}\n        aria-pressed={active}\n        aria-disabled={disabled || undefined}\n        onMouseDown={keepCaret}\n        onClick={() => !disabled && onClick?.()}\n        className={cn(\n          \"flex h-7 min-w-7 shrink-0 items-center justify-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg [&_svg]:size-4\",\n          active && \"bg-kit-selected text-kit-fg\",\n          disabled && \"opacity-40 hover:bg-transparent hover:text-kit-fg-2\",\n          className,\n        )}\n      >\n        {icon}\n        {children}\n      </button>\n    </Tooltip>\n  );\n}\n\n/** \"Block style\" dropdown. Compact trigger: Text / H1…H6 / Quote. */\nexport function StyleMenu({\n  block,\n  styles,\n  onPick,\n  onOpenChange,\n  disabled,\n  className,\n}: {\n  block: string;\n  styles: typeof STYLES;\n  onPick: (tag: string) => void;\n  onOpenChange?: (o: boolean) => void;\n  disabled?: boolean;\n  className?: string;\n}) {\n  const cur = STYLES.find((s) => s.tag === block);\n  return (\n    <Menu onOpenChange={onOpenChange}>\n      <Tooltip content=\"Block style\">\n        <MenuTrigger\n          disabled={disabled}\n          aria-label=\"Block style\"\n          onMouseDown={keepCaret}\n          className={cn(\n            \"flex h-7 shrink-0 items-center gap-1 rounded-kit-md pl-2 pr-1.5 text-kit-sm font-medium text-kit-fg hover:bg-kit-hover disabled:opacity-40 data-[popup-open]:bg-kit-hover\",\n            !cur && \"text-kit-fg-2\",\n            className,\n          )}\n        >\n          {cur?.short ?? \"Text\"}\n          <IconChevronDown className=\"size-3.5 text-kit-fg-3\" stroke={1.5} aria-hidden />\n        </MenuTrigger>\n      </Tooltip>\n      <MenuContent className=\"w-48\" finalFocus={false}>\n        {styles.map((s) => (\n          <MenuItem key={s.tag} icon={s.icon} onClick={() => onPick(s.tag)}>\n            <span className=\"flex w-full items-center justify-between\">\n              {s.label}\n              {block === s.tag ? <IconCheck className=\"size-3.5 text-kit-fg-2\" stroke={2} aria-hidden /> : null}\n            </span>\n          </MenuItem>\n        ))}\n      </MenuContent>\n    </Menu>\n  );\n}\n\nconst Sep = () => <span aria-hidden className=\"mx-1 h-4 w-px shrink-0 bg-kit-line\" />;\n\nexport function FormatToolbar({\n  open,\n  sticky,\n  stickyTop = 0,\n  width,\n  dense,\n  fmt,\n  md,\n  allows,\n  hideFullscreen,\n  insertOpen,\n  setInsertOpen,\n  onMenuOpen,\n  onStyle,\n  onMark,\n  onList,\n  onLink,\n  onClear,\n  onComment,\n  onInlineCode,\n  onCodeBlock,\n  onInsert,\n  keepFocusOnInsertClose,\n  onFullscreen,\n  onMarkdown,\n  saveSel,\n}: {\n  open: boolean;\n  sticky: boolean;\n  stickyTop?: number;\n  width: number;\n  dense: boolean;\n  fmt: Fmt;\n  md: boolean;\n  allows: (f: RichTextFeature) => boolean;\n  hideFullscreen?: boolean;\n  insertOpen: boolean;\n  setInsertOpen: (o: boolean) => void;\n  onMenuOpen: (name: \"style\" | \"more\", o: boolean) => void;\n  onStyle: (tag: string) => void;\n  onMark: (cmd: MarkCmd) => void;\n  onList: (kind: \"ul\" | \"ol\") => void;\n  onLink: () => void;\n  onClear: () => void;\n  onComment?: () => void;\n  onInlineCode: () => void;\n  onCodeBlock: () => void;\n  onInsert: (it: CatalogItem) => void;\n  keepFocusOnInsertClose: () => boolean;\n  onFullscreen: () => void;\n  onMarkdown: () => void;\n  saveSel: () => void;\n}) {\n  const w = width - (dense ? 40 : 0);\n  const foldUS = w < 430;\n  const foldLists = w < 480;\n  const foldMd = w < 400;\n  const foldClear = w < 360;\n  const insertLabel = w >= 590;\n  const off = md;\n  const styles = stylesFor(allows);\n  const marks = ([\"underline\", \"strikeThrough\"] as const).filter((m) => allows(MARK_FEATURE[m]));\n  const lists = ([\"ul\", \"ol\"] as const).filter((l) => allows(l));\n  const linkTip = fmt.hasSel || fmt.onLink ? \"Link\" : \"Link (select some text first)\";\n  const commentTip = fmt.hasSel ? \"Comment\" : \"Comment (select some text first)\";\n  const check = (on: boolean) => (on ? <IconCheck className=\"ml-auto size-3.5 text-kit-fg-2\" stroke={2} aria-hidden /> : null);\n  const listIcon = (l: \"ul\" | \"ol\") => (l === \"ul\" ? <IconList stroke={1.5} /> : <IconListNumbers stroke={1.5} />);\n  const listLabel = (l: \"ul\" | \"ol\") => (l === \"ul\" ? \"Bulleted list\" : \"Numbered list\");\n  const markIcon = (m: \"underline\" | \"strikeThrough\") => (m === \"underline\" ? <IconUnderline stroke={1.5} /> : <IconStrikethrough stroke={1.5} />);\n  const markLabel = (m: \"underline\" | \"strikeThrough\") => (m === \"underline\" ? \"Underline\" : \"Strikethrough\");\n  const more = (foldUS && marks.length) || (foldLists && lists.length) || foldClear || foldMd || allows(\"code\") || allows(\"pre\");\n\n  return (\n    <div\n      // Opens at once: it shows on every focus of the body, and a height animation is layout work every frame.\n      className={cn(\"overflow-clip rounded-t-kit-lg\", open ? \"h-8 pointer-coarse:h-11\" : \"h-0\", sticky && open && \"sticky z-[4]\")}\n      style={sticky && open ? { top: stickyTop } : undefined}\n      inert={!open}\n      aria-hidden={!open}\n    >\n      <div\n        role=\"toolbar\"\n        aria-label=\"Text formatting\"\n        onMouseDown={(e) => {\n          if (!(e.target as HTMLElement).closest(\"button\")) e.preventDefault();\n        }}\n        className={cn(\"flex h-full items-center gap-0.5 border-b border-kit-line bg-kit-subtle px-1 transition-opacity duration-[120ms] ease-out motion-reduce:transition-none\", open ? \"opacity-100\" : \"opacity-0\")}\n      >\n        {styles.length > 1 ? (\n          <>\n            <StyleMenu block={fmt.block} styles={styles} onPick={onStyle} disabled={off} onOpenChange={(o) => onMenuOpen(\"style\", o)} />\n            <Sep />\n          </>\n        ) : null}\n        {allows(\"bold\") ? <ToolButton label=\"Bold\" icon={<IconBold stroke={1.5} />} shortcut=\"⌘B\" active={fmt.bold} disabled={off} onClick={() => onMark(\"bold\")} /> : null}\n        {allows(\"italic\") ? <ToolButton label=\"Italic\" icon={<IconItalic stroke={1.5} />} shortcut=\"⌘I\" active={fmt.italic} disabled={off} onClick={() => onMark(\"italic\")} /> : null}\n        {foldUS\n          ? null\n          : marks.map((m) => (\n              <ToolButton key={m} label={markLabel(m)} icon={markIcon(m)} shortcut={m === \"underline\" ? \"⌘U\" : undefined} active={m === \"underline\" ? fmt.underline : fmt.strike} disabled={off} onClick={() => onMark(m)} />\n            ))}\n        {foldLists || !lists.length ? null : (\n          <>\n            <Sep />\n            {lists.map((l) => (\n              <ToolButton key={l} label={listLabel(l)} icon={listIcon(l)} active={fmt[l]} disabled={off} onClick={() => onList(l)} />\n            ))}\n          </>\n        )}\n        <Sep />\n        {allows(\"link\") ? (\n          <ToolButton label=\"Link\" tip={linkTip} icon={<IconLink stroke={1.5} />} shortcut={fmt.hasSel || fmt.onLink ? \"⌘K\" : undefined} active={fmt.onLink} disabled={off || !(fmt.hasSel || fmt.onLink)} onClick={onLink} />\n        ) : null}\n        {foldClear ? null : <ToolButton label=\"Clear formatting\" icon={<IconClearFormatting stroke={1.5} />} disabled={off} onClick={onClear} />}\n        {onComment ? <ToolButton label=\"Comment\" tip={commentTip} icon={<IconMessage stroke={1.5} />} disabled={off || !fmt.hasSel} onClick={onComment} /> : null}\n        {more ? (\n          <Menu onOpenChange={(o) => onMenuOpen(\"more\", o)}>\n            <Tooltip content=\"More formatting\">\n              <MenuTrigger\n                aria-label=\"More formatting options\"\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  saveSel();\n                }}\n                className=\"flex h-7 w-5 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-3.5\"\n              >\n                <IconChevronDown stroke={1.5} aria-hidden />\n              </MenuTrigger>\n            </Tooltip>\n            <MenuContent align=\"start\" className=\"w-56\" finalFocus={false}>\n              {foldUS\n                ? marks.map((m) => (\n                    <MenuItem key={m} disabled={off} icon={markIcon(m)} shortcut={m === \"underline\" ? \"⌘U\" : undefined} onClick={() => onMark(m)}>\n                      <span className=\"flex w-full items-center\">\n                        {markLabel(m)}\n                        {check(m === \"underline\" ? fmt.underline : fmt.strike)}\n                      </span>\n                    </MenuItem>\n                  ))\n                : null}\n              {foldLists\n                ? lists.map((l) => (\n                    <MenuItem key={l} disabled={off} icon={listIcon(l)} onClick={() => onList(l)}>\n                      {listLabel(l)}\n                    </MenuItem>\n                  ))\n                : null}\n              {foldClear ? (\n                <MenuItem disabled={off} icon={<IconClearFormatting stroke={1.5} />} onClick={onClear}>\n                  Clear formatting\n                </MenuItem>\n              ) : null}\n              {foldMd ? (\n                <MenuItem icon={md ? <IconMarkdownOff stroke={1.5} /> : <IconMarkdown stroke={1.5} />} onClick={onMarkdown}>\n                  {md ? \"Return to rich text\" : \"View and edit as Markdown\"}\n                </MenuItem>\n              ) : null}\n              {(foldUS && marks.length) || (foldLists && lists.length) || foldClear || foldMd ? <MenuSeparator /> : null}\n              {allows(\"code\") ? (\n                <MenuItem disabled={off} icon={<IconCode stroke={1.5} />} shortcut=\"⌘E\" onClick={onInlineCode}>\n                  Inline code\n                </MenuItem>\n              ) : null}\n              {allows(\"pre\") ? (\n                <MenuItem disabled={off} icon={<IconTerminal2 stroke={1.5} />} onClick={onCodeBlock}>\n                  Code\n                </MenuItem>\n              ) : null}\n            </MenuContent>\n          </Menu>\n        ) : null}\n        <Sep />\n        <Popover open={insertOpen} onOpenChange={setInsertOpen}>\n          <Tooltip content=\"Insert a block\">\n            <PopoverTrigger\n              disabled={off}\n              aria-label=\"Insert\"\n              onMouseDown={() => saveSel()}\n              className=\"flex h-7 shrink-0 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg disabled:opacity-40 data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-4\"\n            >\n              <IconPlus stroke={1.5} aria-hidden />\n              {insertLabel ? \"Insert\" : null}\n            </PopoverTrigger>\n          </Tooltip>\n          {insertOpen ? <InsertMenuContent allows={allows} onInsert={onInsert} keepFocusOnClose={keepFocusOnInsertClose} /> : null}\n        </Popover>\n\n        <span className=\"min-w-1 flex-1\" />\n\n        {foldMd ? null : (\n          <ToolButton label={md ? \"Return to rich text\" : \"View and edit as Markdown\"} icon={md ? <IconMarkdownOff stroke={1.5} /> : <IconMarkdown stroke={1.5} />} active={md} onClick={onMarkdown} />\n        )}\n        {hideFullscreen ? null : <ToolButton label=\"Expand editor\" icon={<IconArrowsMaximize stroke={1.5} />} shortcut=\"⌘↵\" onClick={onFullscreen} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}