@bettercms-ai/kit 0.1.1 → 2.0.0

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

@@ -0,0 +1,623 @@
+import { cn } from "../../lib/cn.js";
+import { PopoverContent } from "../../ui/overlay.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowLeft, IconBlockquote, IconChevronRight, IconComponents, IconFileText, IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconInfoCircle, IconLayoutNavbarCollapse, IconList, IconListDetails, IconListNumbers, IconPhoto, IconPilcrow, IconQuote, IconSearch, IconSeparatorHorizontal, IconTable, IconTerminal2, IconVideo } from "@tabler/icons-react";
+//#region src/controls/rich-text/catalog.tsx
+/**
+* RICH TEXT · the block catalogue shared by the toolbar Insert menu, the gutter "+" and the "/" slash menu (V2 HEAD
+* controls/rich-text/catalog.tsx, CPO D55).
+*
+*   browse    Text · Media · Data, grouped, then one quiet "More components N" row that opens the components the
+*             field may embed (V2 HEAD catalog.tsx MORE), with its own search and a way back ("All blocks")
+*   search    every block and every embeddable component in one list: recently used first among the strong matches,
+*             then by match (label, aliases, then description)
+*   no match  "No match."
+*
+* Only the blocks the field accepts are offered (`features`, from the host's codec: each block is offered only where
+* the field's stored shape has a place for it). Not in this catalogue, and why:
+*   Footnote, Gallery, Embed, Columns, Checklist, Button, Table of contents, Related posts, Author bio
+*     production's rich text has no stored block for them (a checklist renders as a bulleted list; production's embed
+*     frames the raw link, which providers refuse, so Video is the one media link offered). A stored embed (an
+*     imported `<iframe>`, whose address is already the provider's frame) opens and is edited as V2's Embed block.
+*
+* Components come from the host (KitServices.useInsertableComponents: the project's components, narrowed to the ones
+* the field's config accepts), handed in through CatalogComponentsProvider. Without that service none is offered.
+* Deviation from V2: the library has no inline / page-section placement, so every component sits in one
+* "Components" group (V2: "Article" and "Page sections"), and no live preview flyout is drawn beside a row.
+*/
+var i = (I) => /* @__PURE__ */ jsx(I, { stroke: 1.5 });
+var rows = (list) => list.map(([id, label, description, icon, aliases]) => ({
+	key: id,
+	id,
+	label,
+	description,
+	icon,
+	aliases
+}));
+var TEXT = rows([
+	[
+		"p",
+		"Text",
+		"Plain body text",
+		i(IconPilcrow),
+		["paragraph", "body"]
+	],
+	[
+		"h2",
+		"Heading 2",
+		"Section heading",
+		i(IconH2),
+		["title", "subtitle"]
+	],
+	[
+		"h3",
+		"Heading 3",
+		"Subsection heading",
+		i(IconH3)
+	],
+	[
+		"h4",
+		"Heading 4",
+		"Minor heading",
+		i(IconH4)
+	],
+	[
+		"quote",
+		"Quote",
+		"A quoted passage",
+		i(IconBlockquote),
+		["blockquote"]
+	],
+	[
+		"pullquote",
+		"Pull quote",
+		"A highlighted line with who said it",
+		i(IconQuote),
+		[
+			"pq",
+			"testimonial",
+			"attribution"
+		]
+	],
+	[
+		"ul",
+		"List",
+		"Bulleted list",
+		i(IconList),
+		[
+			"bullets",
+			"bulleted list",
+			"unordered"
+		]
+	],
+	[
+		"ol",
+		"Numbered list",
+		"Ordered steps",
+		i(IconListNumbers),
+		["ordered", "steps"]
+	],
+	[
+		"toggle",
+		"Toggle",
+		"Collapsible title and body",
+		i(IconLayoutNavbarCollapse),
+		[
+			"accordion",
+			"details",
+			"collapse"
+		]
+	],
+	[
+		"callout",
+		"Callout",
+		"A highlighted note with a tone",
+		i(IconInfoCircle),
+		[
+			"note",
+			"tip",
+			"warning",
+			"aside"
+		]
+	],
+	[
+		"takeaways",
+		"Key takeaways",
+		"The story in a few points",
+		i(IconListDetails),
+		[
+			"summary",
+			"tldr",
+			"tl;dr",
+			"highlights"
+		]
+	],
+	[
+		"hr",
+		"Divider",
+		"A line between parts",
+		i(IconSeparatorHorizontal),
+		[
+			"line",
+			"separator",
+			"rule"
+		]
+	],
+	[
+		"code",
+		"Code",
+		"Monospaced snippet",
+		i(IconTerminal2),
+		[
+			"code block",
+			"snippet",
+			"pre"
+		]
+	]
+]);
+var MEDIA = rows([
+	[
+		"image",
+		"Image",
+		"Image with alt text and caption",
+		i(IconPhoto),
+		[
+			"img",
+			"picture",
+			"photo"
+		]
+	],
+	[
+		"video",
+		"Video",
+		"A YouTube, Vimeo or video file link",
+		i(IconVideo),
+		[
+			"mp4",
+			"youtube",
+			"yt",
+			"vimeo",
+			"clip",
+			"movie"
+		]
+	],
+	[
+		"file",
+		"File",
+		"A downloadable PDF or file",
+		i(IconFileText),
+		[
+			"pdf",
+			"download",
+			"attachment"
+		]
+	]
+]);
+var DATA = rows([[
+	"table",
+	"Table",
+	"Rows and columns",
+	i(IconTable),
+	[
+		"grid",
+		"data",
+		"comparison",
+		"spreadsheet"
+	]
+]]);
+/** Found by search, not listed: rare in a body (H1 is the page title). */
+var SEARCH_ONLY = rows([
+	[
+		"h1",
+		"Heading 1",
+		"Largest heading",
+		i(IconH1)
+	],
+	[
+		"h5",
+		"Heading 5",
+		"Smallest heading",
+		i(IconH5)
+	],
+	[
+		"h6",
+		"Heading 6",
+		"Eyebrow heading",
+		i(IconH6)
+	]
+]);
+/** The feature a block needs (Text needs none). */
+var NEEDS = {
+	p: null,
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	h6: "h6",
+	quote: "blockquote",
+	ul: "ul",
+	ol: "ol",
+	code: "pre",
+	hr: "hr",
+	image: "image",
+	pullquote: "pullquote",
+	takeaways: "takeaways",
+	callout: "callout",
+	toggle: "toggle",
+	video: "video",
+	file: "file",
+	table: "table"
+};
+var MORE = {
+	key: "more",
+	kind: "folder",
+	label: "More blocks",
+	description: "Shared across your site",
+	icon: i(IconComponents)
+};
+var BACK = {
+	key: "back",
+	kind: "back",
+	label: "All blocks",
+	description: "",
+	icon: i(IconArrowLeft)
+};
+var componentRow = (c) => ({
+	key: `c:${c.id}`,
+	kind: "component",
+	component: c,
+	label: c.name,
+	description: c.description || "Shared across your site",
+	icon: i(IconComponents)
+});
+var ComponentsContext = React.createContext(null);
+var CatalogComponentsProvider = ComponentsContext.Provider;
+/** The components this field may embed (a component card's Swap component). */
+var useCatalogComponents = () => React.useContext(ComponentsContext);
+var blockAllowed = (id, allows) => {
+	const need = NEEDS[id];
+	return !need || allows(need);
+};
+var RECENTS_KEY = "kit-rt-insert-recents";
+var recents = (() => {
+	try {
+		const v = JSON.parse(globalThis.localStorage?.getItem(RECENTS_KEY) ?? "[]");
+		return Array.isArray(v) ? v.filter((x) => typeof x === "string") : [];
+	} catch {
+		return [];
+	}
+})();
+var recentSubs = /* @__PURE__ */ new Set();
+/** Remember a pick so search ranks it first next time. */
+function noteRecent(it) {
+	recents = [it.key, ...recents.filter((k) => k !== it.key)].slice(0, 12);
+	try {
+		globalThis.localStorage?.setItem(RECENTS_KEY, JSON.stringify(recents));
+	} catch {}
+	recentSubs.forEach((s) => s());
+}
+function useRecents() {
+	return React.useSyncExternalStore((cb) => {
+		recentSubs.add(cb);
+		return () => recentSubs.delete(cb);
+	}, () => recents, () => recents);
+}
+/** 5 exact (label, id or alias) · 4 label or alias starts with it · 3 a word of the label starts with it · 2 inside the
+*  label · 1 the description. */
+var score = (q, it) => {
+	const l = it.label.toLowerCase();
+	const al = it.aliases ?? [];
+	if (l === q || it.id === q || al.includes(q)) return 5;
+	if (l.startsWith(q) || al.some((a) => a.startsWith(q))) return 4;
+	if (l.split(/[\s-]+/).some((w) => w.startsWith(q))) return 3;
+	if (l.includes(q)) return 2;
+	return it.description.toLowerCase().includes(q) ? 1 : 0;
+};
+/** Ranked by recently used among the strong matches, then by match, then catalogue order. */
+var rank = (q, list, recent) => list.map((it, i) => {
+	const s = score(q, it);
+	const r = recent.indexOf(it.key);
+	return {
+		it,
+		s,
+		strong: s >= 3 ? 1 : 0,
+		r: s >= 3 && r >= 0 ? r : 999,
+		i
+	};
+}).filter((x) => x.s > 0).sort((a, b) => b.strong - a.strong || a.r - b.r || b.s - a.s || a.i - b.i).map((x) => x.it);
+/** `folder`: the More components view (its way back first, then the components, searched by `query`). */
+function useCatalog(query, allows, folder = false, own) {
+	const recent = useRecents();
+	const provided = React.useContext(ComponentsContext);
+	const lib = own === void 0 ? provided : own;
+	return React.useMemo(() => {
+		const q = query.trim().toLowerCase().replace(/^\//, "");
+		const keep = (list) => list.filter((it) => !it.id || blockAllowed(it.id, allows));
+		const comps = (lib?.components ?? []).map(componentRow);
+		let sections;
+		let noMatch = false;
+		let emptyText = "No match.";
+		if (folder) {
+			const found = q ? rank(q, comps, recent) : comps;
+			noMatch = !!q && !!comps.length && !found.length;
+			if (!comps.length) emptyText = lib?.error ?? (lib?.loading ? "Loading blocks…" : "This field takes no blocks.");
+			sections = [{
+				title: null,
+				items: [BACK]
+			}, {
+				title: "Blocks",
+				items: found
+			}];
+		} else if (q) {
+			const found = rank(q, [
+				...keep(TEXT),
+				...keep(MEDIA),
+				...keep(DATA),
+				...keep(SEARCH_ONLY),
+				...comps
+			], recent);
+			noMatch = !found.length;
+			sections = [{
+				title: null,
+				items: found
+			}];
+		} else sections = [
+			{
+				title: "Text",
+				items: keep(TEXT)
+			},
+			{
+				title: "Media",
+				items: keep(MEDIA)
+			},
+			{
+				title: "Data",
+				items: keep(DATA)
+			},
+			{
+				title: null,
+				items: lib && (comps.length || lib.loading || lib.error) ? [{
+					...MORE,
+					...comps.length ? { count: comps.length } : {}
+				}] : []
+			}
+		];
+		sections = sections.filter((s) => s.items.length);
+		const flat = sections.flatMap((s) => s.items);
+		const empty = !flat.some((it) => it.kind !== "back");
+		return {
+			sections,
+			flat,
+			empty,
+			noMatch,
+			emptyText
+		};
+	}, [
+		query,
+		allows,
+		recent,
+		lib,
+		folder
+	]);
+}
+function CatalogList({ sections, flat, active, onHover, onPick, empty, emptyText = "No match.", noMatch, detail, listId, className }) {
+	const box = React.useRef(null);
+	React.useEffect(() => {
+		const b = box.current;
+		const row = b?.querySelector(`[data-idx="${active}"]`);
+		if (!b || !row) return;
+		if (row.offsetTop < b.scrollTop) b.scrollTop = row.offsetTop - 6;
+		else if (row.offsetTop + row.offsetHeight > b.scrollTop + b.clientHeight) b.scrollTop = row.offsetTop + row.offsetHeight - b.clientHeight + 6;
+	}, [active]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		id: listId,
+		role: "listbox",
+		"aria-label": "Blocks",
+		className: cn("relative max-h-[320px] overflow-y-auto p-1.5", className),
+		children: [
+			noMatch ? /* @__PURE__ */ jsx("div", {
+				className: "px-2 pb-1 pt-1.5 text-kit-sm text-kit-fg-3",
+				children: "No match."
+			}) : null,
+			sections.map((s, si) => /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": s.title ?? void 0,
+				className: cn(!s.title && si > 0 && s.items[0]?.kind === "folder" && "mt-1.5 border-t border-kit-line-subtle pt-1.5"),
+				children: [s.title ? /* @__PURE__ */ jsx("div", {
+					className: "px-2 pb-0.5 pt-2 text-kit-2xs font-medium text-kit-fg-3",
+					children: s.title
+				}) : null, s.items.map((it) => {
+					const idx = flat.indexOf(it);
+					const on = idx === active;
+					const desc = detail && it.kind !== "back" && it.kind !== "folder" ? it.description : "";
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": on,
+						"aria-description": !desc && it.description ? it.description : void 0,
+						"data-idx": idx,
+						id: `${listId}-${idx}`,
+						onMouseDown: (e) => e.preventDefault(),
+						onMouseMove: () => !on && onHover(idx),
+						onClick: () => onPick(it),
+						className: cn("flex w-full items-center gap-2 rounded-kit-md px-2 text-left transition-colors motion-reduce:transition-none", desc ? "py-1.5" : "h-8", it.kind === "back" ? "text-kit-fg-2" : "text-kit-fg", on && "bg-kit-hover text-kit-fg"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: cn("flex shrink-0 items-center justify-center text-kit-fg-2 [&_svg]:size-4", desc ? "size-7 rounded-kit-md border border-kit-line bg-kit-control-bg" : "size-5"),
+								children: it.icon
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "block truncate text-kit-sm",
+									children: it.label
+								}), desc ? /* @__PURE__ */ jsx("span", {
+									className: "block truncate text-kit-xs text-kit-fg-3",
+									children: desc
+								}) : null]
+							}),
+							it.count != null ? /* @__PURE__ */ jsx("span", {
+								className: "text-kit-2xs tabular-nums text-kit-fg-3",
+								children: it.count
+							}) : null,
+							it.kind === "folder" ? /* @__PURE__ */ jsx(IconChevronRight, {
+								className: "size-3.5 shrink-0 text-kit-fg-3",
+								stroke: 1.5,
+								"aria-hidden": true
+							}) : null
+						]
+					}, it.key);
+				})]
+			}, s.title ?? `s${si}`)),
+			empty ? /* @__PURE__ */ jsx("div", {
+				className: "px-2 py-6 text-center text-kit-sm text-kit-fg-3",
+				children: emptyText
+			}) : null
+		]
+	});
+}
+var Footer = () => /* @__PURE__ */ jsx("div", {
+	"data-hint": "shortcuts",
+	className: "flex h-7 shrink-0 items-center border-t border-kit-line px-3 text-kit-2xs text-kit-fg-3",
+	children: /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("kbd", {
+		className: "font-kit-sans",
+		children: "↵"
+	}), " select · type to search"] })
+});
+/** Shared keyboard model: ↑↓ wrap, Home/End, Enter / Tab, → into More components. Returns true when handled. */
+function catalogKey(e, flat, active, setActive, pick, homeEnd = true) {
+	const n = flat.length;
+	if (!n) return false;
+	if (e.key === "ArrowDown") return setActive((active + 1) % n), true;
+	if (e.key === "ArrowUp") return setActive((active - 1 + n) % n), true;
+	if (homeEnd && e.key === "Home") return setActive(0), true;
+	if (homeEnd && e.key === "End") return setActive(n - 1), true;
+	if (e.key === "ArrowRight" && flat[active]?.kind === "folder") return pick(flat[active]), true;
+	if (e.key === "Enter" || e.key === "Tab") {
+		const it = flat[active];
+		if (it) pick(it);
+		return true;
+	}
+	return false;
+}
+function InsertMenuContent({ onInsert, allows, keepFocusOnClose, align = "start", side = "bottom" }) {
+	const [q, setQ] = React.useState("");
+	const [active, setActive] = React.useState(0);
+	const input = React.useRef(null);
+	const listId = React.useId();
+	const [folder, setFolder] = React.useState(false);
+	const { sections, flat, empty, emptyText, noMatch } = useCatalog(q, allows, folder);
+	React.useEffect(() => setActive(folder && flat.length > 1 ? 1 : 0), [q, folder]);
+	const leave = () => {
+		setFolder(false);
+		setQ("");
+		input.current?.focus();
+	};
+	const pick = (it) => {
+		if (it.kind === "folder") {
+			setFolder(true);
+			setQ("");
+			input.current?.focus();
+		} else if (it.kind === "back") leave();
+		else onInsert(it);
+	};
+	return /* @__PURE__ */ jsxs(PopoverContent, {
+		side,
+		align,
+		className: "flex max-h-[420px] w-[320px] flex-col overflow-hidden p-0",
+		initialFocus: input,
+		finalFocus: keepFocusOnClose ? () => !keepFocusOnClose() : void 0,
+		onKeyDownCapture: (e) => {
+			if (!folder || e.key !== "Escape") return;
+			e.preventDefault();
+			e.stopPropagation();
+			leave();
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-10 shrink-0 items-center gap-2 border-b border-kit-line px-3",
+				children: [/* @__PURE__ */ jsx(IconSearch, {
+					className: "size-4 shrink-0 text-kit-fg-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("input", {
+					ref: input,
+					value: q,
+					onChange: (e) => setQ(e.target.value),
+					onKeyDown: (e) => {
+						if (folder && e.key === "Backspace" && !q) {
+							e.preventDefault();
+							e.stopPropagation();
+							leave();
+						} else if (catalogKey(e, flat, active, setActive, pick, !q)) e.preventDefault();
+					},
+					role: "combobox",
+					"aria-expanded": true,
+					"aria-controls": listId,
+					"aria-activedescendant": flat.length ? `${listId}-${active}` : void 0,
+					"aria-label": folder ? "Search blocks" : "Search or pick a block",
+					placeholder: folder ? "Search blocks" : "Search or pick a block",
+					className: "h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3 focus-visible:shadow-none"
+				})]
+			}),
+			/* @__PURE__ */ jsx(CatalogList, {
+				sections,
+				flat,
+				active,
+				onHover: setActive,
+				onPick: pick,
+				empty,
+				emptyText,
+				noMatch,
+				detail: !!q || folder,
+				listId,
+				className: "min-h-0 flex-1"
+			}),
+			/* @__PURE__ */ jsx(Footer, {})
+		]
+	});
+}
+function SlashMenuPanel({ query, folder = false, active, setActive, onPick, allows, maxHeight }) {
+	const listId = React.useId();
+	const { sections, flat, empty, emptyText, noMatch } = useCatalog(query, allows, folder);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-kit-scope": "",
+		className: "glass-strong flex w-[320px] flex-col overflow-hidden rounded-kit-xl border border-kit-line",
+		style: maxHeight ? { maxHeight } : void 0,
+		onMouseDown: (e) => e.preventDefault(),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-8 shrink-0 items-center gap-2 border-b border-kit-line px-3 text-kit-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("flex-1 truncate", query ? "text-kit-fg" : "text-kit-fg-3"),
+					children: query ? `${folder ? "More blocks · " : ""}/${query}` : folder ? "More blocks" : "Type to search"
+				}), /* @__PURE__ */ jsx("kbd", {
+					"data-hint": "shortcuts",
+					className: "font-kit-sans text-kit-2xs text-kit-fg-3",
+					children: "esc"
+				})]
+			}),
+			/* @__PURE__ */ jsx(CatalogList, {
+				sections,
+				flat,
+				active,
+				onHover: setActive,
+				onPick,
+				empty,
+				emptyText,
+				noMatch,
+				detail: !!query || folder,
+				listId,
+				className: "max-h-[300px] min-h-0 flex-1"
+			}),
+			/* @__PURE__ */ jsx(Footer, {})
+		]
+	});
+}
+//#endregion
+export { CatalogComponentsProvider, CatalogList, InsertMenuContent, SlashMenuPanel, blockAllowed, catalogKey, noteRecent, useCatalog, useCatalogComponents };
+
+//# sourceMappingURL=catalog.js.map