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

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

@@ -0,0 +1,181 @@
+import { cn } from "../../lib/cn.js";
+import { Button, IconButton } from "../../ui/button.js";
+import { Segmented } from "../../ui/controls.js";
+import { Tooltip } from "../../ui/overlay.js";
+import { placeCaret, rid } from "./dom.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconMinus, IconPlus, IconTrash } from "@tabler/icons-react";
+//#region src/controls/rich-text/columns.tsx
+/**
+* RICH TEXT · Columns (kit-richtext-ui-spec.md §4): V2's columns island, stored as the PT block object
+* `{ _type: "columns", gap: "s" | "m" | "l", columns: { _key, content: PortableTextBlock[] }[] }`: 2–4 columns of
+* text blocks only, depth 1 (plan R5). The editor holds each column as its HTML, as V2 does; the codec maps it.
+*
+*   block     V2 rich-text/blocks.tsx:536-570: a grid of dashed columns (gap s 8px · m 16px · l 28px), each a nested
+*             Editable (paragraphs and marks; paste is plain text), and the bar under it: Add column (≤4), Remove column
+*             (the last, ≥2), Gap S | M | L, Remove columns. Escape inside a column leaves the island (Island onKeyDown).
+*   editable  V2 rich-text/blocks.tsx:54-120, ported here (the kit's own PlainEditable is plain text only).
+*/
+var COLUMNS_MIN = 2;
+var COLUMNS_MAX = 4;
+var columnsDefault = () => ({
+	gap: "m",
+	cols: [{
+		id: rid("col"),
+		html: ""
+	}, {
+		id: rid("col"),
+		html: ""
+	}]
+});
+var GAP = {
+	s: "8px",
+	m: "16px",
+	l: "28px"
+};
+/** V2 blocks.tsx:191: the controls row under a block, muted at rest, full strength on hover / focus */
+var BAR = "mt-1.5 flex flex-wrap items-center gap-1 text-kit-fg-3 opacity-70 transition-opacity group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100";
+var Sep = () => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "mx-0.5 h-4 w-px shrink-0 bg-kit-line"
+});
+/** A small rich-text region inside a block (V2 Editable): paragraphs and marks, plain-text paste, a placeholder. */
+function Editable({ html, onChange, placeholder, className, readOnly, label, autoFocus, ...rest }) {
+	const ref = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || document.activeElement === el) return;
+		if (el.innerHTML !== html) el.innerHTML = html;
+	}, [html]);
+	React.useEffect(() => {
+		if (!autoFocus || !ref.current) return;
+		ref.current.focus({ preventScroll: false });
+		placeCaret(ref.current);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		role: "textbox",
+		"aria-label": label,
+		"aria-multiline": true,
+		tabIndex: readOnly ? -1 : 0,
+		contentEditable: !readOnly,
+		suppressContentEditableWarning: true,
+		spellCheck: true,
+		"data-placeholder": placeholder,
+		onInput: (e) => {
+			const el = e.currentTarget;
+			if (!el.textContent && !el.querySelector("img,br + br")) el.innerHTML = "";
+			onChange(el.innerHTML);
+		},
+		onPaste: (e) => {
+			e.preventDefault();
+			document.execCommand?.("insertText", false, e.clipboardData.getData("text/plain"));
+		},
+		className: cn("min-w-0 cursor-text whitespace-pre-wrap break-words outline-none focus-visible:shadow-none empty:before:pointer-events-none empty:before:text-kit-fg-4 empty:before:content-[attr(data-placeholder)]", className)
+	});
+}
+function ColumnsBlock({ m, set, el, ctx, autoFocus }) {
+	const ro = !!ctx.readOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/blk",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid",
+			style: {
+				gridTemplateColumns: `repeat(${m.cols.length}, minmax(0, 1fr))`,
+				gap: GAP[m.gap]
+			},
+			children: m.cols.map((c, i) => /* @__PURE__ */ jsx("div", {
+				className: "min-h-14 rounded-kit-md border border-dashed border-kit-line px-2.5 py-2 transition-colors focus-within:border-kit-line-strong hover:border-kit-line-strong",
+				children: /* @__PURE__ */ jsx(Editable, {
+					label: `Column ${i + 1}`,
+					html: c.html,
+					readOnly: ro,
+					autoFocus: autoFocus && i === 0,
+					placeholder: `Column ${i + 1}`,
+					onChange: (html) => set((x) => ({
+						...x,
+						cols: x.cols.map((y) => y.id === c.id ? {
+							...y,
+							html
+						} : y)
+					}), `Edit column ${i + 1}`),
+					className: "min-h-10 [&_p+p]:mt-2"
+				})
+			}, c.id))
+		}), ro ? null : /* @__PURE__ */ jsxs("div", {
+			className: BAR,
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+					disabled: m.cols.length >= 4,
+					onClick: () => set((x) => ({
+						...x,
+						cols: [...x.cols, {
+							id: rid("col"),
+							html: ""
+						}]
+					}), "Add column"),
+					children: "Add column"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					leftIcon: /* @__PURE__ */ jsx(IconMinus, { stroke: 1.5 }),
+					disabled: m.cols.length <= 2,
+					onClick: () => set((x) => ({
+						...x,
+						cols: x.cols.slice(0, -1)
+					}), "Remove column"),
+					children: "Remove column"
+				}),
+				/* @__PURE__ */ jsx(Sep, {}),
+				/* @__PURE__ */ jsx("span", {
+					className: "px-1 text-kit-xs text-kit-fg-3",
+					children: "Gap"
+				}),
+				/* @__PURE__ */ jsx(Segmented, {
+					"aria-label": "Gap",
+					size: "sm",
+					value: m.gap,
+					onChange: (gap) => set((x) => ({
+						...x,
+						gap
+					}), "Change column gap"),
+					items: [
+						{
+							value: "s",
+							label: "S"
+						},
+						{
+							value: "m",
+							label: "M"
+						},
+						{
+							value: "l",
+							label: "L"
+						}
+					]
+				}),
+				/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: "Remove columns",
+					children: /* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
+						label: "Remove columns",
+						onClick: () => ctx.remove(el),
+						className: "hover:text-kit-danger-fg",
+						children: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 })
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { COLUMNS_MAX, COLUMNS_MIN, ColumnsBlock, Editable, columnsDefault };
+
+//# sourceMappingURL=columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","names":[],"sources":["../../../src/controls/rich-text/columns.tsx"],"sourcesContent":["/**\n * RICH TEXT · Columns (kit-richtext-ui-spec.md §4): V2's columns island, stored as the PT block object\n * `{ _type: \"columns\", gap: \"s\" | \"m\" | \"l\", columns: { _key, content: PortableTextBlock[] }[] }`: 2–4 columns of\n * text blocks only, depth 1 (plan R5). The editor holds each column as its HTML, as V2 does; the codec maps it.\n *\n *   block     V2 rich-text/blocks.tsx:536-570: a grid of dashed columns (gap s 8px · m 16px · l 28px), each a nested\n *             Editable (paragraphs and marks; paste is plain text), and the bar under it: Add column (≤4), Remove column\n *             (the last, ≥2), Gap S | M | L, Remove columns. Escape inside a column leaves the island (Island onKeyDown).\n *   editable  V2 rich-text/blocks.tsx:54-120, ported here (the kit's own PlainEditable is plain text only).\n */\nimport * as React from \"react\";\nimport { IconMinus, IconPlus, IconTrash } from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button, IconButton } from \"../../ui/button\";\nimport { Segmented } from \"../../ui/controls\";\nimport { Tooltip } from \"../../ui/overlay\";\nimport type { IslandCtx } from \"./blocks\";\nimport { placeCaret, rid, type IslandEl } from \"./dom\";\n\nexport type ColumnsGap = \"s\" | \"m\" | \"l\";\nexport interface ColumnsModel {\n  gap: ColumnsGap;\n  cols: { id: string; html: string }[];\n}\nexport const COLUMNS_MIN = 2;\nexport const COLUMNS_MAX = 4;\nexport const columnsDefault = (): ColumnsModel => ({ gap: \"m\", cols: [{ id: rid(\"col\"), html: \"\" }, { id: rid(\"col\"), html: \"\" }] });\nconst GAP: Record<ColumnsGap, string> = { s: \"8px\", m: \"16px\", l: \"28px\" };\n/** V2 blocks.tsx:191: the controls row under a block, muted at rest, full strength on hover / focus */\nconst BAR = \"mt-1.5 flex flex-wrap items-center gap-1 text-kit-fg-3 opacity-70 transition-opacity group-hover/blk:opacity-100 group-focus-within/blk:opacity-100 pointer-coarse:opacity-100\";\nconst Sep = () => <span aria-hidden className=\"mx-0.5 h-4 w-px shrink-0 bg-kit-line\" />;\n\n/** A small rich-text region inside a block (V2 Editable): paragraphs and marks, plain-text paste, a placeholder. */\nexport function Editable({\n  html, onChange, placeholder, className, readOnly, label, autoFocus, ...rest\n}: {\n  html: string;\n  onChange: (v: string) => void;\n  placeholder?: string;\n  className?: string;\n  readOnly?: boolean;\n  label: string;\n  autoFocus?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || document.activeElement === el) return;\n    if (el.innerHTML !== html) el.innerHTML = html;\n  }, [html]);\n  React.useEffect(() => {\n    if (!autoFocus || !ref.current) return;\n    ref.current.focus({ preventScroll: false });\n    placeCaret(ref.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"textbox\"\n      aria-label={label}\n      aria-multiline\n      tabIndex={readOnly ? -1 : 0}\n      contentEditable={!readOnly}\n      suppressContentEditableWarning\n      spellCheck\n      data-placeholder={placeholder}\n      onInput={(e) => {\n        const el = e.currentTarget;\n        if (!el.textContent && !el.querySelector(\"img,br + br\")) el.innerHTML = \"\";\n        onChange(el.innerHTML);\n      }}\n      onPaste={(e) => {\n        e.preventDefault();\n        document.execCommand?.(\"insertText\", false, e.clipboardData.getData(\"text/plain\"));\n      }}\n      className={cn(\n        \"min-w-0 cursor-text whitespace-pre-wrap break-words outline-none focus-visible:shadow-none empty:before:pointer-events-none empty:before:text-kit-fg-4 empty:before:content-[attr(data-placeholder)]\",\n        className,\n      )}\n    />\n  );\n}\n\nexport function ColumnsBlock({\n  m, set, el, ctx, autoFocus,\n}: {\n  m: ColumnsModel;\n  set: (fn: (m: ColumnsModel) => ColumnsModel, label?: string) => void;\n  el: IslandEl;\n  ctx: IslandCtx;\n  autoFocus: boolean;\n}) {\n  const ro = !!ctx.readOnly;\n  return (\n    <div className=\"group/blk\">\n      <div className=\"grid\" style={{ gridTemplateColumns: `repeat(${m.cols.length}, minmax(0, 1fr))`, gap: GAP[m.gap] }}>\n        {m.cols.map((c, i) => (\n          <div key={c.id} className=\"min-h-14 rounded-kit-md border border-dashed border-kit-line px-2.5 py-2 transition-colors focus-within:border-kit-line-strong hover:border-kit-line-strong\">\n            <Editable\n              label={`Column ${i + 1}`}\n              html={c.html}\n              readOnly={ro}\n              autoFocus={autoFocus && i === 0}\n              placeholder={`Column ${i + 1}`}\n              onChange={(html) => set((x) => ({ ...x, cols: x.cols.map((y) => (y.id === c.id ? { ...y, html } : y)) }), `Edit column ${i + 1}`)}\n              className=\"min-h-10 [&_p+p]:mt-2\"\n            />\n          </div>\n        ))}\n      </div>\n      {ro ? null : (\n        <div className={BAR}>\n          <Button\n            size=\"xs\"\n            variant=\"ghost\"\n            leftIcon={<IconPlus stroke={1.5} />}\n            disabled={m.cols.length >= COLUMNS_MAX}\n            onClick={() => set((x) => ({ ...x, cols: [...x.cols, { id: rid(\"col\"), html: \"\" }] }), \"Add column\")}\n          >\n            Add column\n          </Button>\n          <Button\n            size=\"xs\"\n            variant=\"ghost\"\n            leftIcon={<IconMinus stroke={1.5} />}\n            disabled={m.cols.length <= COLUMNS_MIN}\n            onClick={() => set((x) => ({ ...x, cols: x.cols.slice(0, -1) }), \"Remove column\")}\n          >\n            Remove column\n          </Button>\n          <Sep />\n          <span className=\"px-1 text-kit-xs text-kit-fg-3\">Gap</span>\n          <Segmented<ColumnsGap>\n            aria-label=\"Gap\"\n            size=\"sm\"\n            value={m.gap}\n            onChange={(gap) => set((x) => ({ ...x, gap }), \"Change column gap\")}\n            items={[{ value: \"s\", label: \"S\" }, { value: \"m\", label: \"M\" }, { value: \"l\", label: \"L\" }]}\n          />\n          <span className=\"flex-1\" />\n          <Tooltip content=\"Remove columns\">\n            <IconButton size=\"xs\" label=\"Remove columns\" onClick={() => ctx.remove(el)} className=\"hover:text-kit-danger-fg\">\n              <IconTrash stroke={1.5} />\n            </IconButton>\n          </Tooltip>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -28,9 +28,9 @@
  *               <div data-body><p>…` (the message is plain text: paragraphs and line breaks)
  *   toggle      `bcmsBlock` builtin:toggle {title, body}: `<details data-rt="toggle"><summary>…<div data-body><p>…`
  *   video       the `video` block {src, title}: `<div data-rt="video" data-url data-title>`
- *   embed       `bcmsBlock` builtin:video {url, title} (the package's embed: `<iframe src title>` on the page), V2's
- *               article Embed: `<figure data-rt="embed" data-url data-title><a href>…`. V2's Shape (`aspect`) has no
- *               stored key, so it is not offered: every embed draws 16:9.
+ *   embed       V2's article Embed {url, title, aspect}: `<figure data-rt="embed" data-url data-title data-aspect><a href>…`
+ *               (embed.tsx). Stored today as `bcmsBlock` builtin:video {url, title}, which keeps no aspect; the PT
+ *               `embed` block (plan RT3) does.
  *   file        the `file` block {src, name, size}: `<div data-rt="file" data-url data-name data-size>`
  *   component   `bcmsBlock` "component" {componentId, overrides, variant} (CPO D28): `<div data-rt="component" data-ref
  *               data-id data-name data-overrides data-variant>` — a linked instance of a project component, shown as a card.
@@ -95,10 +95,11 @@ export interface VideoModel {
     title?: string;
     extra?: string;
 }
-/** V2 EmbedModel (article.ts) without `aspect`, which the stored block has no key for. */
+/** V2 EmbedModel (article.ts); `aspect` absent draws 16:9 (embed.tsx). */
 export interface EmbedModel {
     url?: string;
     title?: string;
+    aspect?: "16:9" | "4:3" | "1:1" | "9:16";
     extra?: string;
 }
 export type EmbedProvider = "youtube" | "vimeo" | "x" | "codepen" | "figma" | "maps" | "spotify" | "podcast" | "audio" | "link";

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

@@ -30,9 +30,9 @@ import { boolLabels, cellText, cellValue, emptyTable, formatNumber, isCellObject
 *               <div data-body><p>…` (the message is plain text: paragraphs and line breaks)
 *   toggle      `bcmsBlock` builtin:toggle {title, body}: `<details data-rt="toggle"><summary>…<div data-body><p>…`
 *   video       the `video` block {src, title}: `<div data-rt="video" data-url data-title>`
-*   embed       `bcmsBlock` builtin:video {url, title} (the package's embed: `<iframe src title>` on the page), V2's
-*               article Embed: `<figure data-rt="embed" data-url data-title><a href>…`. V2's Shape (`aspect`) has no
-*               stored key, so it is not offered: every embed draws 16:9.
+*   embed       V2's article Embed {url, title, aspect}: `<figure data-rt="embed" data-url data-title data-aspect><a href>…`
+*               (embed.tsx). Stored today as `bcmsBlock` builtin:video {url, title}, which keeps no aspect; the PT
+*               `embed` block (plan RT3) does.
 *   file        the `file` block {src, name, size}: `<div data-rt="file" data-url data-name data-size>`
 *   component   `bcmsBlock` "component" {componentId, overrides, variant} (CPO D28): `<div data-rt="component" data-ref
 *               data-id data-name data-overrides data-variant>` — a linked instance of a project component, shown as a card.
@@ -64,6 +64,12 @@ var CALLOUT_TONES = [
 	"tip",
 	"warning"
 ];
+var EMBED_ASPECT_VALUES = [
+	"16:9",
+	"4:3",
+	"1:1",
+	"9:16"
+];
 var hostOf = (url) => {
 	try {
 		return new URL(url).hostname.replace(/^www\./, "");
@@ -260,7 +266,7 @@ function renderStatic(kind, model) {
 		}
 		case "embed": {
 			const m = model;
-			return `<figure data-rt="embed"${attr("data-url", m.url)}${attr("data-title", m.title)}${xAttr(m.extra)}>${m.url ? `<a href="${escAttr(m.url)}">${esc(m.title || m.url)}</a>` : ""}</figure>`;
+			return `<figure data-rt="embed"${attr("data-url", m.url)}${attr("data-title", m.title)}${attr("data-aspect", m.aspect)}${xAttr(m.extra)}>${m.url ? `<a href="${escAttr(m.url)}">${esc(m.title || m.url)}</a>` : ""}</figure>`;
 		}
 		case "file": {
 			const m = model;
@@ -810,8 +816,10 @@ function parseIsland(kind, el) {
 			const m = {};
 			const url = attrOf(el, "data-url");
 			const title = attrOf(el, "data-title");
+			const aspect = attrOf(el, "data-aspect");
 			if (url !== void 0) m.url = url;
 			if (title !== void 0) m.title = title;
+			if (aspect !== void 0 && EMBED_ASPECT_VALUES.includes(aspect)) m.aspect = aspect;
 			const extra = attrOf(el, "data-extra");
 			if (extra) m.extra = extra;
 			return m;
@@ -925,6 +933,7 @@ function serialize(root) {
 		c.replaceWith(tpl.content);
 	});
 	clone.querySelectorAll("[data-hint]").forEach((n) => n.removeAttribute("data-hint"));
+	clone.querySelectorAll("ul[data-task] > li").forEach((li) => (li.removeAttribute("role"), li.removeAttribute("aria-checked")));
 	while (clone.children.length > 1 && clone.lastElementChild && isEmptyP(clone.lastElementChild)) clone.lastElementChild.remove();
 	const html = clone.innerHTML.replace(/​/g, "");
 	return html === "<p><br></p>" || html === "<p></p>" ? "" : html;