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

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

@@ -0,0 +1,104 @@
+import { useRichTextRefs } from "../../context.js";
+import { ArticleEmpty, ArticlePopoverBlock } from "./article-shell.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconUserCircle } from "@tabler/icons-react";
+//#region src/controls/rich-text/author.tsx
+/**
+* RICH TEXT · Author bio (kit-richtext-ui-spec.md §7): V2's article block, stored as the PT block object
+* `{ _type: "authorBio", author: { _ref } }`. Name, avatar and bio are derived from the referenced entry, never stored.
+*
+*   form      V2 article.ts:196-202: one required reference, "Author"; its collection comes from the field's config
+*             (V2 hard-codes col_authors). One setting → the shell's popover (D54); a fresh insert opens it.
+*   preview   V2 article-blocks.tsx:599-612: avatar, name and bio as the reader sees them; "Choose an author" when none
+*   data      KitServices.resolveRichTextRefs through useRichTextRefs. V2 read a local store synchronously; the kit asks
+*             the host, so a resolving card keeps the card's shape (no "Choose an author" flash) and a failure is named.
+*/
+var AUTHOR_LABEL = "Author bio";
+var authorDefault = () => ({ author: "" });
+/** The popover form; `to` is the authors collection from the field's config. */
+var authorSchema = (to) => ({
+	name: "authorBio",
+	title: AUTHOR_LABEL,
+	kind: "object",
+	icon: "user",
+	fields: [{
+		name: "author",
+		title: "Author",
+		type: "reference",
+		reference: { to },
+		validation: { required: true }
+	}]
+});
+function AuthorPreview({ m, onPick, ro }) {
+	const { items, loading, error } = useRichTextRefs(m.author ? {
+		kind: "authorBio",
+		ids: [m.author]
+	} : null);
+	const a = items.find((x) => x.id === m.author);
+	if (!m.author || !loading && !error && !a) return /* @__PURE__ */ jsx(ArticleEmpty, {
+		icon: /* @__PURE__ */ jsx(IconUserCircle, { stroke: 1.5 }),
+		title: AUTHOR_LABEL,
+		action: "Choose an author",
+		onAction: onPick,
+		ro
+	});
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "flex items-start gap-3.5 rounded-kit-lg border border-kit-line bg-kit-surface px-4 py-3.5",
+		"aria-label": a ? `About ${a.title}` : AUTHOR_LABEL,
+		"aria-busy": loading || void 0,
+		"data-field": "author",
+		children: [a?.avatar ? /* @__PURE__ */ jsx("img", {
+			src: a.avatar,
+			alt: "",
+			draggable: false,
+			className: "size-12 shrink-0 rounded-full border border-kit-line object-cover"
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "flex size-12 shrink-0 items-center justify-center rounded-full bg-kit-muted text-kit-fg-3",
+			children: /* @__PURE__ */ jsx(IconUserCircle, {
+				className: "size-6",
+				stroke: 1.5
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: a ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-kit-sm font-semibold text-kit-fg",
+				children: a.title
+			}), a.bio ? /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-kit-sm leading-relaxed text-kit-fg-2",
+				children: a.bio
+			}) : null] }) : error ? /* @__PURE__ */ jsxs("p", {
+				role: "status",
+				className: "text-kit-sm text-kit-warning-fg",
+				children: ["The author couldn't load: ", error]
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "text-kit-sm text-kit-fg-3",
+				children: "Loading the author…"
+			})
+		})]
+	});
+}
+function AuthorBlock({ m, set, el, ctx, autoFocus, collection }) {
+	const schema = React.useMemo(() => authorSchema([collection]), [collection]);
+	return /* @__PURE__ */ jsx(ArticlePopoverBlock, {
+		label: AUTHOR_LABEL,
+		kind: "author",
+		schema,
+		m,
+		set,
+		el,
+		ctx,
+		autoFocus,
+		toForm: (x) => ({ author: x.author || void 0 }),
+		fromForm: (v) => ({ author: typeof v.author === "string" ? v.author : "" }),
+		children: (open, ro) => /* @__PURE__ */ jsx(AuthorPreview, {
+			m,
+			onPick: () => open("author"),
+			ro
+		})
+	});
+}
+//#endregion
+export { AUTHOR_LABEL, AuthorBlock, AuthorPreview, authorDefault, authorSchema };
+
+//# sourceMappingURL=author.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"author.js","names":[],"sources":["../../../src/controls/rich-text/author.tsx"],"sourcesContent":["/**\n * RICH TEXT · Author bio (kit-richtext-ui-spec.md §7): V2's article block, stored as the PT block object\n * `{ _type: \"authorBio\", author: { _ref } }`. Name, avatar and bio are derived from the referenced entry, never stored.\n *\n *   form      V2 article.ts:196-202: one required reference, \"Author\"; its collection comes from the field's config\n *             (V2 hard-codes col_authors). One setting → the shell's popover (D54); a fresh insert opens it.\n *   preview   V2 article-blocks.tsx:599-612: avatar, name and bio as the reader sees them; \"Choose an author\" when none\n *   data      KitServices.resolveRichTextRefs through useRichTextRefs. V2 read a local store synchronously; the kit asks\n *             the host, so a resolving card keeps the card's shape (no \"Choose an author\" flash) and a failure is named.\n */\nimport * as React from \"react\";\nimport { IconUserCircle } from \"@tabler/icons-react\";\nimport { useRichTextRefs } from \"../../context\";\nimport type { TypeSchema } from \"../../schema/types\";\nimport { ArticleEmpty, ArticlePopoverBlock } from \"./article-shell\";\nimport type { IslandCtx } from \"./blocks\";\nimport type { IslandEl } from \"./dom\";\n\n/** The editor's model: the referenced entry's id (\"\" = none picked). The PT form wraps it as `{ _ref }`. */\nexport interface AuthorModel {\n  author: string;\n}\nexport const AUTHOR_LABEL = \"Author bio\";\nexport const authorDefault = (): AuthorModel => ({ author: \"\" });\n\n/** The popover form; `to` is the authors collection from the field's config. */\nexport const authorSchema = (to: string[]): TypeSchema => ({\n  name: \"authorBio\",\n  title: AUTHOR_LABEL,\n  kind: \"object\",\n  icon: \"user\",\n  fields: [{ name: \"author\", title: \"Author\", type: \"reference\", reference: { to }, validation: { required: true } }],\n});\n\nexport function AuthorPreview({ m, onPick, ro }: { m: AuthorModel; onPick: () => void; ro: boolean }) {\n  const { items, loading, error } = useRichTextRefs(m.author ? { kind: \"authorBio\", ids: [m.author] } : null);\n  const a = items.find((x) => x.id === m.author);\n  if (!m.author || (!loading && !error && !a))\n    return <ArticleEmpty icon={<IconUserCircle stroke={1.5} />} title={AUTHOR_LABEL} action=\"Choose an author\" onAction={onPick} ro={ro} />;\n  return (\n    <aside\n      className=\"flex items-start gap-3.5 rounded-kit-lg border border-kit-line bg-kit-surface px-4 py-3.5\"\n      aria-label={a ? `About ${a.title}` : AUTHOR_LABEL}\n      aria-busy={loading || undefined}\n      data-field=\"author\"\n    >\n      {a?.avatar ? (\n        <img src={a.avatar} alt=\"\" draggable={false} className=\"size-12 shrink-0 rounded-full border border-kit-line object-cover\" />\n      ) : (\n        <span className=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-kit-muted text-kit-fg-3\">\n          <IconUserCircle className=\"size-6\" stroke={1.5} />\n        </span>\n      )}\n      <div className=\"min-w-0 flex-1\">\n        {a ? (\n          <>\n            <p className=\"text-kit-sm font-semibold text-kit-fg\">{a.title}</p>\n            {a.bio ? <p className=\"mt-0.5 text-kit-sm leading-relaxed text-kit-fg-2\">{a.bio}</p> : null}\n          </>\n        ) : error ? (\n          <p role=\"status\" className=\"text-kit-sm text-kit-warning-fg\">\n            The author couldn't load: {error}\n          </p>\n        ) : (\n          <p className=\"text-kit-sm text-kit-fg-3\">Loading the author…</p>\n        )}\n      </div>\n    </aside>\n  );\n}\n\nexport function AuthorBlock({\n  m, set, el, ctx, autoFocus, collection,\n}: {\n  m: AuthorModel;\n  set: (fn: (m: AuthorModel) => AuthorModel, label?: string) => void;\n  el: IslandEl;\n  ctx: IslandCtx;\n  autoFocus: boolean;\n  /** the authors collection the reference picks from (the field's config) */\n  collection: string;\n}) {\n  const schema = React.useMemo(() => authorSchema([collection]), [collection]);\n  return (\n    <ArticlePopoverBlock<AuthorModel>\n      label={AUTHOR_LABEL}\n      kind=\"author\"\n      schema={schema}\n      m={m}\n      set={set}\n      el={el}\n      ctx={ctx}\n      autoFocus={autoFocus}\n      toForm={(x) => ({ author: x.author || undefined })}\n      fromForm={(v) => ({ author: typeof v.author === \"string\" ? v.author : \"\" })}\n    >\n      {(open, ro) => <AuthorPreview m={m} onPick={() => open(\"author\")} ro={ro} />}\n    </ArticlePopoverBlock>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAa,eAAe;AAC5B,IAAa,uBAAoC,EAAE,QAAQ,GAAG;;AAG9D,IAAa,gBAAgB,QAA8B;CACzD,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,QAAQ,CAAC;EAAE,MAAM;EAAU,OAAO;EAAU,MAAM;EAAa,WAAW,EAAE,GAAG;EAAG,YAAY,EAAE,UAAU,KAAK;CAAE,CAAC;AACpH;AAEA,SAAgB,cAAc,EAAE,GAAG,QAAQ,MAA2D;CACpG,MAAM,EAAE,OAAO,SAAS,UAAU,gBAAgB,EAAE,SAAS;EAAE,MAAM;EAAa,KAAK,CAAC,EAAE,MAAM;CAAE,IAAI,IAAI;CAC1G,MAAM,IAAI,MAAM,MAAM,MAAM,EAAE,OAAO,EAAE,MAAM;CAC7C,IAAI,CAAC,EAAE,UAAW,CAAC,WAAW,CAAC,SAAS,CAAC,GACvC,OAAO,oBAAC,cAAD;EAAc,MAAM,oBAAC,gBAAD,EAAgB,QAAQ,IAAM,CAAA;EAAG,OAAO;EAAc,QAAO;EAAmB,UAAU;EAAY;CAAK,CAAA;CACxI,OACE,qBAAC,SAAD;EACE,WAAU;EACV,cAAY,IAAI,SAAS,EAAE,UAAU;EACrC,aAAW,WAAW,KAAA;EACtB,cAAW;EAJb,UAAA,CAMG,GAAG,SACF,oBAAC,OAAD;GAAK,KAAK,EAAE;GAAQ,KAAI;GAAG,WAAW;GAAO,WAAU;EAAqE,CAAA,IAE5H,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,gBAAD;IAAgB,WAAU;IAAS,QAAQ;GAAM,CAAA;EAC7C,CAAA,GAER,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,IACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;IAAG,WAAU;IAAyC,UAAA,EAAE;GAAS,CAAA,GAChE,EAAE,MAAM,oBAAC,KAAD;IAAG,WAAU;IAAoD,UAAA,EAAE;GAAO,CAAA,IAAI,IACvF,EAAA,CAAA,IACA,QACF,qBAAC,KAAD;IAAG,MAAK;IAAS,WAAU;IAA3B,UAAA,CAA6D,8BAChC,KAC1B;GAEH,CAAA,IAAA,oBAAC,KAAD;IAAG,WAAU;IAA4B,UAAA;GAAsB,CAAA;EAE9D,CAAA,CACA;;AAEX;AAEA,SAAgB,YAAY,EAC1B,GAAG,KAAK,IAAI,KAAK,WAAW,cAS3B;CACD,MAAM,SAAS,MAAM,cAAc,aAAa,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC;CAC3E,OACE,oBAAC,qBAAD;EACE,OAAO;EACP,MAAK;EACG;EACL;EACE;EACD;EACC;EACM;EACX,SAAS,OAAO,EAAE,QAAQ,EAAE,UAAU,KAAA,EAAU;EAChD,WAAW,OAAO,EAAE,QAAQ,OAAO,EAAE,WAAW,WAAW,EAAE,SAAS,GAAG;EAEvE,WAAA,MAAM,OAAO,oBAAC,eAAD;GAAkB;GAAG,cAAc,KAAK,QAAQ;GAAO;EAAK,CAAA;CACxD,CAAA;AAEzB"}

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

@@ -0,0 +1,60 @@
+/**
+ * RICH TEXT · rich blocks ("islands", V2 HEAD controls/rich-text/blocks.tsx). Each renders through a portal into a
+ * contenteditable=false element inside the editor surface; its model lives on that element (`el.__rt`) so serialize()
+ * can write it back as static HTML.
+ *
+ * The image block is V2's: the toolbar (Replace · Align · Size S/M/L/Full · Link · Alt text · Remove) and the caption
+ * under it, each stored on production's image block (see dom.ts). The callout (tone · title · message), toggle, video,
+ * file and embedded component blocks are V2's too, limited to what their stored blocks keep: a callout's message and a
+ * toggle's body are plain text (production stores them as text), a component is a linked card (its fields are edited
+ * on the component itself).
+ *
+ * The table block is V2's TableBlock: the kit's table editor on the island's table value. The pull quote is V2's article
+ * block (article-blocks.tsx ArticleBlock + PullQuotePreview): drawn as the reader sees it, edited in the floating
+ * properties panel (4 settings → panel, CPO D54) through the kit SchemaForm. Key takeaways are V2's article block too,
+ * written in the text itself (article-blocks.tsx TakeawaysEditor, surface "inline"): a title line and a line per point.
+ * The embed island draws embed.tsx's block (V2's article Embed: Link, Title, Shape), keeping the keys it lacks absent.
+ */
+import * as React from "react";
+import { type IslandEl, type IslandKind, type IslandModels } from "./dom";
+import type { RichTextFeature } from "./codec";
+export interface IslandCtx {
+    readOnly?: boolean;
+    dense?: boolean;
+    emit: () => void;
+    remove: (el: IslandEl) => void;
+    /** Leave the block: caret to the start of the next line. */
+    exit: (el: IslandEl) => void;
+    /** CPO D54: an island write joins the body field's ONE undo history (`before` = the model it replaces) */
+    record?: (el: IslandEl, before: IslandModels[IslandKind], label: string, coalesce?: boolean) => void;
+    /** a refusal the author must see (an address the image cannot use) */
+    notify: (message: string, description?: string) => void;
+    duplicate?: (el: IslandEl) => void;
+    move?: (el: IslandEl, dir: -1 | 1) => void;
+    /** the body field's one history (D54): ⌘Z on a focused block or in its panel */
+    undo?: () => boolean;
+    /**
+     * One action as ONE undo step, in the host's history when it keeps one (the dock's toolbar Undo), else the body's
+     * own. `write` makes the change and answers the island it changed; `before` is that island's model before it. Answers
+     * the step's undo (an Undo toast): true, or the sentence saying why nothing was undone.
+     */
+    step?: (label: string, write: () => IslandEl | null, before?: IslandModels[IslandKind]) => () => true | string;
+    redo?: () => boolean;
+    /** Drag the block to a new position (the gutter grip's drag), for a grip drawn on the block itself */
+    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;
+}
+/** `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;
+export interface BlockProps<K extends IslandKind> {
+    m: IslandModels[K];
+    set: Setter<K>;
+    el: IslandEl;
+    ctx: IslandCtx;
+    autoFocus: boolean;
+}
+export declare function Island({ el, ctx }: {
+    el: IslandEl;
+    ctx: IslandCtx;
+}): import("react/jsx-runtime").JSX.Element;