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

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

@@ -17,6 +17,8 @@
  */
 import * as React from "react";
 import { type IslandEl, type IslandKind, type IslandModels } from "./dom";
+import { type OutlineStore } from "./toc";
+import type { RichTextRead } from "./codec";
 import type { RichTextFeature } from "./codec";
 export interface IslandCtx {
     readOnly?: boolean;
@@ -44,6 +46,10 @@ export interface IslandCtx {
     drag?: (el: IslandEl, e: React.PointerEvent) => void;
     /** what the field's stored shape keeps (the host codec's features): a setting it cannot store is not drawn */
     allows?: (f: RichTextFeature) => boolean;
+    /** the body's live outline (its top-level H2/H3), which a table of contents lists */
+    outline?: OutlineStore;
+    /** where an author bio and related posts point (the field's config, from the host codec) */
+    references?: RichTextRead["references"];
 }
 /** `label` names the step in the editor's one undo history ("Edit alt text"). */
 export type Setter<K extends IslandKind> = (patch: Partial<IslandModels[K]> | ((m: IslandModels[K]) => IslandModels[K]), label?: string, record?: boolean) => void;

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

@@ -1,3 +1,4 @@
+import { isCropRect } from "../../adapters/values.js";
 import { cn } from "../../lib/cn.js";
 import { useKitServices } from "../../context.js";
 import { Button, IconButton } from "../../ui/button.js";
@@ -6,9 +7,14 @@ import { Input, Textarea } from "../../ui/input.js";
 import { TableEditor } from "../table/table-editor.js";
 import { VideoPreview } from "../media.js";
 import { ArticleActions, ArticleCard, ArticleForm, ArticlePanel, articleCardKeyDown, useArticleOpen } from "./article-shell.js";
+import { AuthorBlock } from "./author.js";
 import { CALLOUT_TONES, placeCaret } from "./dom.js";
 import { LinkForm } from "./link-form.js";
 import { EmbedBlock } from "./embed.js";
+import { GalleryBlock } from "./gallery.js";
+import { TocBlock } from "./toc.js";
+import { ColumnsBlock } from "./columns.js";
+import { RelatedBlock } from "./related.js";
 import { ComponentCard } from "./component-card.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -119,6 +125,36 @@ function Island({ el, ctx }) {
 			autoFocus,
 			m: model,
 			set
+		}) : kind === "gallery" ? /* @__PURE__ */ jsx(GalleryIsland, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "toc" ? /* @__PURE__ */ jsx(TocIsland, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "columns" ? /* @__PURE__ */ jsx(ColumnsIsland, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "author" ? /* @__PURE__ */ jsx(AuthorIsland, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
+		}) : kind === "related" ? /* @__PURE__ */ jsx(RelatedIsland, {
+			el,
+			ctx,
+			autoFocus,
+			m: model,
+			set
 		}) : kind === "file" ? /* @__PURE__ */ jsx(FileBlock, {
 			el,
 			ctx,
@@ -160,6 +196,157 @@ function EmbedIsland({ m, set, el, ctx, autoFocus }) {
 		shape: ctx.allows?.("embedAspect") ?? false
 	});
 }
+/** The island's stored gallery (src, alt, caption per image) through gallery.tsx's block (V2's model, an image value each). */
+/** RT9: a gallery image's framing, image-url's 0–1 focal point ⇄ the kit image value's percent */
+var toGallery = (m) => ({
+	layout: m.layout ?? "grid",
+	images: m.images.map((x) => ({
+		_key: x._key,
+		image: x.src ? {
+			url: x.src,
+			...x.alt !== void 0 ? { alt: x.alt } : {},
+			...x.crop ? { crop: x.crop } : {},
+			...x.focal ? { focal: {
+				x: x.focal.x * 100,
+				y: x.focal.y * 100
+			} } : {}
+		} : null,
+		caption: x.caption ?? ""
+	}))
+});
+var cropOf = (c) => isCropRect(c) ? {
+	top: c.top,
+	right: c.right,
+	bottom: c.bottom,
+	left: c.left
+} : void 0;
+var focalOf = (f) => {
+	const p = f;
+	return typeof p?.x === "number" && typeof p?.y === "number" ? {
+		x: Math.round(p.x) / 100,
+		y: Math.round(p.y) / 100
+	} : void 0;
+};
+function GalleryIsland({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(GalleryBlock, {
+		m: toGallery(m),
+		set: (fn, label) => set((prev) => {
+			const next = fn(toGallery(prev));
+			const out = {
+				...prev,
+				images: next.images.map((x) => {
+					const crop = cropOf(x.image?.crop);
+					const focal = focalOf(x.image?.focal);
+					return {
+						_key: x._key,
+						src: x.image?.url ?? "",
+						...x.image?.alt !== void 0 ? { alt: x.image.alt } : {},
+						...x.caption ? { caption: x.caption } : {},
+						...crop ? { crop } : {},
+						...focal ? { focal } : {}
+					};
+				})
+			};
+			if (next.layout !== (prev.layout ?? "grid")) out.layout = next.layout;
+			return out;
+		}, label),
+		el,
+		ctx,
+		autoFocus
+	});
+}
+/** The island's stored table of contents (title, depth) through toc.tsx's block, which lists the editor's live outline. */
+function TocIsland({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(TocBlock, {
+		m: {
+			title: m.title ?? "",
+			depth: m.depth ?? "3"
+		},
+		set: (fn, label) => set((prev) => {
+			const next = fn({
+				title: prev.title ?? "",
+				depth: prev.depth ?? "3"
+			});
+			const out = { ...prev };
+			if (next.title !== (prev.title ?? "")) out.title = next.title;
+			if (next.depth !== (prev.depth ?? "3")) out.depth = next.depth;
+			return out;
+		}, label),
+		el,
+		ctx,
+		autoFocus
+	});
+}
+/** The island's stored columns (gap, each column's HTML) through columns.tsx's block. */
+function ColumnsIsland({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(ColumnsBlock, {
+		m: {
+			gap: m.gap ?? "m",
+			cols: m.cols
+		},
+		set: (fn, label) => set((prev) => {
+			const next = fn({
+				gap: prev.gap ?? "m",
+				cols: prev.cols
+			});
+			const out = {
+				...prev,
+				cols: next.cols
+			};
+			if (next.gap !== (prev.gap ?? "m")) out.gap = next.gap;
+			return out;
+		}, label),
+		el,
+		ctx,
+		autoFocus
+	});
+}
+/** The island's stored author reference through author.tsx's block, picking from the field's authors collection. */
+function AuthorIsland({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(AuthorBlock, {
+		m: { author: m.author ?? "" },
+		set: (fn, label) => set((prev) => {
+			const next = fn({ author: prev.author ?? "" });
+			return next.author === (prev.author ?? "") ? prev : {
+				...prev,
+				author: next.author
+			};
+		}, label),
+		el,
+		ctx,
+		autoFocus,
+		collection: ctx.references?.authors ?? ""
+	});
+}
+/** The island's stored related posts through related.tsx's block, over the field's posts collection. */
+var toRelated = (m) => ({
+	title: m.title ?? "",
+	mode: m.mode ?? "topic",
+	count: m.count ?? 3,
+	posts: m.posts
+});
+function RelatedIsland({ m, set, el, ctx, autoFocus }) {
+	return /* @__PURE__ */ jsx(RelatedBlock, {
+		m: toRelated(m),
+		set: (fn, label) => set((prev) => {
+			const was = toRelated(prev);
+			const next = fn(was);
+			const out = {
+				...prev,
+				posts: next.posts
+			};
+			if (next.title !== was.title) out.title = next.title;
+			if (next.mode !== was.mode) out.mode = next.mode;
+			if (next.count !== was.count) out.count = next.count;
+			return out;
+		}, label),
+		el,
+		ctx,
+		autoFocus,
+		collection: ctx.references?.posts ?? "",
+		excludeId: ctx.references?.entryId
+	});
+}
 var Sep = () => /* @__PURE__ */ jsx("span", {
 	"aria-hidden": true,
 	className: "mx-0.5 h-4 w-px shrink-0 bg-kit-line"