@bettercms-ai/ui 0.16.0 → 0.17.0

package/dist/renderer.d.ts

@@ -19,8 +19,8 @@ interface BlocksRendererProps {
     annotate?: boolean;
     /**
      * The instant block windows (`block.window`) are read against. Defaults to the render time.
-     * A block outside its window is not rendered, at any depth; with `annotate` it is rendered and
-     * marked `data-bcms-window="pending|expired"` instead.
+     * A block outside its window, or hidden on every breakpoint, is not rendered, at any depth; with
+     * `annotate` it is rendered and marked `data-bcms-window="pending|expired"` / `data-bcms-hidden="all"`.
      */
     now?: Date;
 }

package/dist/renderer.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/renderer.tsx
-import { RESPONSIVE_CSS, hideOnAttr, splitButtonStyle, usesHideOn, visibleBlocks, windowState } from "@bettercms-ai/types";
+import { RESPONSIVE_CSS, hiddenEverywhere, hideOnAttr, splitButtonStyle, usesHideOn, visibleBlocks, windowState } from "@bettercms-ai/types";
 
 // src/blocks/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -36,6 +36,13 @@ import React from "react";
 import { PortableText as PT } from "@portabletext/react";
 
 // ../richtext/src/types.ts
+function pullQuoteHref(link) {
+  if (typeof link === "string") return link.trim();
+  if (link && typeof link === "object" && typeof link.href === "string") {
+    return link.href.trim();
+  }
+  return "";
+}
 var PT_TYPES = {
   /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
   block: "bcmsBlock",
@@ -53,6 +60,10 @@ var PT_TYPES = {
   video: "video",
   /** A downloadable document — a PDF, a spec sheet. `<a href download>`, nothing more. */
   file: "file",
+  /** A pull quote — see `PortableTextPullQuote`. The V2 kit's `<figure data-rt="pullquote">`. */
+  pullQuote: "pullQuote",
+  /** Key takeaways — see `PortableTextKeyTakeaways`. The V2 kit's `<aside data-rt="takeaways">`. */
+  keyTakeaways: "keyTakeaways",
   /**
    * A table. Spelled `table`, unprefixed, because that is what every other Portable Text
    * producer calls one — the Sanity-shaped `{_type:"table", rows}` this platform used to refuse
@@ -77,8 +88,11 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
   PT_TYPES.divider,
   PT_TYPES.mention,
   PT_TYPES.video,
-  PT_TYPES.file
+  PT_TYPES.file,
+  PT_TYPES.pullQuote,
+  PT_TYPES.keyTakeaways
 ]);
+var EMBEDDED_COMPONENT_KEY = "component";
 
 // ../richtext/src/styled.ts
 var STYLED_TAGS = [
@@ -249,7 +263,8 @@ function normalizeCell(raw, at, mint, read) {
     content: Array.isArray(raw.content) ? read(raw.content, inner) : textContent(typeof raw.text === "string" ? raw.text : "", inner),
     ...raw.header === true ? { header: true } : {},
     ...span === void 0 ? {} : { span },
-    ...rowSpan === void 0 ? {} : { rowSpan }
+    ...rowSpan === void 0 ? {} : { rowSpan },
+    ...typeof raw.group === "string" ? { group: raw.group } : {}
   };
 }
 function normalizeRow(raw, at, mint, read) {
@@ -257,7 +272,8 @@ function normalizeRow(raw, at, mint, read) {
   return {
     _key: isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", at),
     cells: cells.map((c, col) => normalizeCell(c, [at, col], mint, read)),
-    ...isRecord(raw) && raw.head === true ? { head: true } : {}
+    ...isRecord(raw) && raw.head === true ? { head: true } : {},
+    ...isRecord(raw) && typeof raw.group === "string" ? { group: raw.group } : {}
   };
 }
 function builtInTableToTable(node, key = randomKey) {
@@ -302,24 +318,93 @@ function migrateTable(node, key = randomKey, read = asIs) {
     rows: rows.map((r, i) => normalizeRow(r, i, mint, read)),
     // Carried through: a migrated table that an author saves back is still the same table, and
     // dropping the flag on that save would change the page the next time it renders.
-    ...node.legacy === true ? { legacy: true } : {}
+    ...node.legacy === true ? { legacy: true } : {},
+    ...tableExtras(node)
+  };
+}
+function tableExtras(node) {
+  const groups = (list) => Array.isArray(list) ? list.filter((g) => isRecord(g) && typeof g._key === "string" && g._key !== "").map((g) => ({ _key: g._key, label: typeof g.label === "string" ? g.label : "" })) : void 0;
+  const rowGroups = groups(node.rowGroups);
+  const columnGroups = groups(node.columnGroups);
+  return {
+    ...typeof node.caption === "string" ? { caption: node.caption } : {},
+    ...typeof node.notes === "string" ? { notes: node.notes } : {},
+    ...rowGroups ? { rowGroups } : {},
+    ...columnGroups ? { columnGroups } : {}
+  };
+}
+function tableGroupLayout(table) {
+  const rows = Array.isArray(table.rows) ? table.rows : [];
+  const labels = (list) => new Map(
+    (Array.isArray(list) ? list : []).filter((g) => isRecord(g) && typeof g._key === "string").map((g) => [g._key, typeof g.label === "string" ? g.label : ""])
+  );
+  const cellsOf = (row) => isRecord(row) && Array.isArray(row.cells) ? row.cells : [];
+  const spanOf2 = (cell) => isRecord(cell) && typeof cell.span === "number" && Number.isInteger(cell.span) && cell.span > 1 ? cell.span : 1;
+  const width = rows.reduce((max, row) => Math.max(max, cellsOf(row).reduce((n, c) => n + spanOf2(c), 0)), 0);
+  const colLabels = labels(table.columnGroups);
+  const columns = [];
+  for (const cell of cellsOf(rows[0])) {
+    const key = isRecord(cell) && typeof cell.group === "string" && colLabels.has(cell.group) ? cell.group : void 0;
+    const last = columns[columns.length - 1];
+    if (last && last.key === key) last.width += spanOf2(cell);
+    else columns.push({ width: spanOf2(cell), ...key === void 0 ? {} : { key, label: colLabels.get(key) } });
+  }
+  const rowLabels = labels(table.rowGroups);
+  const headCount = rows.findIndex((r) => !isRecord(r) || r.head !== true);
+  const body = headCount === -1 ? [] : rows.slice(headCount);
+  const runs = [];
+  for (const row of body) {
+    const key = isRecord(row) && typeof row.group === "string" && rowLabels.has(row.group) ? row.group : void 0;
+    const last = runs[runs.length - 1];
+    if (last && last.key === key) last.rows.push(row);
+    else runs.push({ rows: [row], ...key === void 0 ? {} : { key, label: rowLabels.get(key) } });
+  }
+  return {
+    columns: columns.some((r) => r.key !== void 0) ? columns : [],
+    rows: runs.some((r) => r.key !== void 0) ? runs : [],
+    width
   };
 }
 
-// ../richtext/src/read.ts
+// ../richtext/src/key-takeaways.ts
 var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function keyTakeawaysView(value) {
+  const v = isRecord2(value) ? value : {};
+  const title = typeof v.title === "string" ? v.title.trim() : "";
+  const points = (Array.isArray(v.points) ? v.points : []).map((p) => typeof p === "string" ? p.trim() : "").filter(Boolean);
+  return { title, points };
+}
+
+// ../richtext/src/component-copy.ts
+var isRecord3 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var fieldsOf = (value) => isRecord3(value) && value.schemaKey === EMBEDDED_COMPONENT_KEY && isRecord3(value.fields) ? value.fields : null;
+function detachedComponentCopy(value) {
+  const f = fieldsOf(value);
+  if (!f || f.detached !== true || !Array.isArray(f.blocks)) return null;
+  return {
+    id: isRecord3(value) && typeof value._key === "string" ? value._key : "",
+    componentId: typeof f.componentId === "string" ? f.componentId : "",
+    props: isRecord3(f.props) ? f.props : {},
+    blocks: f.blocks,
+    ...typeof f.sourcePublishedAt === "string" ? { sourcePublishedAt: f.sourcePublishedAt } : {},
+    ...typeof f.variant === "string" ? { variant: f.variant } : {}
+  };
+}
+
+// ../richtext/src/read.ts
+var isRecord4 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 function normalizePortableText(value, key = randomKey) {
   if (!Array.isArray(value)) return [];
   return value.flatMap((raw) => {
-    if (!isRecord2(raw) || typeof raw._type !== "string") return [];
+    if (!isRecord4(raw) || typeof raw._type !== "string") return [];
     const table = migrateTable(raw, key, (v, cellKey) => normalizePortableText(v, cellKey));
     if (table) return [table];
-    const node = { ...raw, _key: isRecord2(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
+    const node = { ...raw, _key: isRecord4(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
     if (node._type === "block") {
       if (!Array.isArray(node.markDefs)) node.markDefs = [];
       if (typeof node.style !== "string") node.style = "normal";
       node.children = (Array.isArray(node.children) ? node.children : []).map((c) => {
-        if (!isRecord2(c)) return c;
+        if (!isRecord4(c)) return c;
         const child = { ...c, _key: typeof c._key === "string" && c._key ? c._key : key() };
         if (child._type === "span" && !Array.isArray(child.marks)) child.marks = [];
         return child;
@@ -329,9 +414,9 @@ function normalizePortableText(value, key = randomKey) {
   });
 }
 function readStructuredContent(props) {
-  if (!isRecord2(props)) return null;
+  if (!isRecord4(props)) return null;
   const candidate = props.content ?? props.value;
-  const arr = Array.isArray(candidate) ? candidate : isRecord2(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
+  const arr = Array.isArray(candidate) ? candidate : isRecord4(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
   return arr && arr.length > 0 ? arr : null;
 }
 
@@ -368,19 +453,40 @@ function Table({ value }) {
   if (rows.length === 0) return null;
   const cells = (row) => (Array.isArray(row?.cells) ? row.cells : []).map((cell) => {
     const Tag = cell?.header === true ? "th" : "td";
-    const span = typeof cell?.span === "number" && cell.span > 1 ? cell.span : void 0;
+    const span2 = typeof cell?.span === "number" && cell.span > 1 ? cell.span : void 0;
     const rowSpan = typeof cell?.rowSpan === "number" && cell.rowSpan > 1 ? cell.rowSpan : void 0;
     const content = Array.isArray(cell?.content) ? cell.content : [];
     const lone = content.length === 1 && content[0]._type === "block" && content[0].style === "normal" && !content[0].listItem;
-    return /* @__PURE__ */ jsx2(Tag, { ...span ? { colSpan: span } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
+    return /* @__PURE__ */ jsx2(Tag, { ...span2 ? { colSpan: span2 } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
   });
-  const rendered = rows.map((row) => /* @__PURE__ */ jsx2("tr", { children: cells(row) }, row?._key));
+  const rowEl = (row) => /* @__PURE__ */ jsx2("tr", { children: cells(row) }, row?._key);
   const headCount = rows.findIndex((r) => r?.head !== true);
   const head = headCount === -1 ? rows.length : headCount;
-  return /* @__PURE__ */ jsxs("table", { ...value.legacy === true ? { className: "bcms-table" } : {}, children: [
-    head > 0 && /* @__PURE__ */ jsx2("thead", { children: rendered.slice(0, head) }),
-    head < rows.length && /* @__PURE__ */ jsx2("tbody", { children: rendered.slice(head) })
+  const layout = tableGroupLayout(value);
+  const caption = typeof value.caption === "string" ? value.caption.trim() : "";
+  const notes = typeof value.notes === "string" ? value.notes.trim() : "";
+  const notesId = notes && typeof value._key === "string" && value._key ? `${value._key}-notes` : void 0;
+  const span = (n) => n > 1 ? n : void 0;
+  const groupRow = layout.columns.length ? /* @__PURE__ */ jsx2("tr", { children: layout.columns.flatMap(
+    (run, i) => run.label === void 0 ? Array.from({ length: run.width }, (_, k) => /* @__PURE__ */ jsx2("td", {}, `${i}-${k}`)) : [/* @__PURE__ */ jsx2("th", { scope: "colgroup", colSpan: span(run.width), "data-group": run.key, children: run.label }, i)]
+  ) }) : null;
+  const bodies = layout.rows.length ? layout.rows.map((run, i) => /* @__PURE__ */ jsxs("tbody", { "data-key": run.key, children: [
+    run.label !== void 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2("th", { scope: "rowgroup", colSpan: span(layout.width), children: run.label }) }),
+    run.rows.map(rowEl)
+  ] }, i)) : head < rows.length && /* @__PURE__ */ jsx2("tbody", { children: rows.slice(head).map(rowEl) });
+  const table = /* @__PURE__ */ jsxs("table", { ...value.legacy === true ? { className: "bcms-table" } : {}, ...notesId ? { "aria-describedby": notesId } : {}, children: [
+    caption && /* @__PURE__ */ jsx2("caption", { children: caption }),
+    layout.columns.map((run, i) => /* @__PURE__ */ jsx2("colgroup", { span: span(run.width) }, i)),
+    (groupRow || head > 0) && /* @__PURE__ */ jsxs("thead", { children: [
+      groupRow,
+      rows.slice(0, head).map(rowEl)
+    ] }),
+    bodies
   ] });
+  return notes ? /* @__PURE__ */ jsxs("figure", { "data-rt": "table", children: [
+    table,
+    /* @__PURE__ */ jsx2("p", { "data-notes": "", id: notesId, children: notes })
+  ] }) : table;
 }
 function buildComponents(renderBlock) {
   return {
@@ -402,10 +508,47 @@ function buildComponents(renderBlock) {
       [PT_TYPES.block]: ({ value }) => {
         const rendered = renderBlock?.(value);
         if (rendered !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: rendered });
+        const copy = detachedComponentCopy(value);
+        if (copy) {
+          return /* @__PURE__ */ jsx2("div", { className: "bcms-block bcms-block--component", "data-bcms-component-copy": copy.componentId, "data-bcms-instance": copy.id, children: /* @__PURE__ */ jsx2(BlocksRenderer, { blocks: copy.blocks }) });
+        }
         const v = value;
         const key = typeof v.schemaKey === "string" ? v.schemaKey : "block";
         return /* @__PURE__ */ jsx2("div", { className: "bcms-block", "data-bcms-schema-key": key });
       },
+      /**
+       * A pull quote — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
+       * `<figure data-rt="pullquote">`, the name linked (and the quote cited) only through
+       * `safeHref`. pull-quote.test.tsx compares the two.
+       */
+      [PT_TYPES.pullQuote]: ({ value }) => {
+        const v = value;
+        const text = (x) => typeof x === "string" ? x.trim() : "";
+        const quote = typeof v.quote === "string" ? v.quote : "";
+        const name = text(v.name);
+        const role = text(v.role);
+        const href = safeHref(pullQuoteHref(v.link)) ?? void 0;
+        return /* @__PURE__ */ jsxs("figure", { "data-rt": "pullquote", children: [
+          /* @__PURE__ */ jsx2("blockquote", { cite: href, children: /* @__PURE__ */ jsx2("p", { children: quote }) }),
+          name || role ? /* @__PURE__ */ jsxs("figcaption", { children: [
+            name ? href ? /* @__PURE__ */ jsx2("a", { href, "data-name": "", children: name }) : /* @__PURE__ */ jsx2("span", { "data-name": "", children: name }) : null,
+            name && role ? ", " : null,
+            role ? /* @__PURE__ */ jsx2("span", { "data-role": "", children: role }) : null
+          ] }) : null
+        ] });
+      },
+      /**
+       * Key takeaways — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
+       * `<aside data-rt="takeaways">`, read through the one `keyTakeawaysView` both renderers share.
+       * portable-text-key-takeaways.test.tsx compares the two.
+       */
+      [PT_TYPES.keyTakeaways]: ({ value }) => {
+        const { title, points } = keyTakeawaysView(value);
+        return /* @__PURE__ */ jsxs("aside", { "data-rt": "takeaways", children: [
+          title ? /* @__PURE__ */ jsx2("p", { "data-title": "", children: title }) : null,
+          /* @__PURE__ */ jsx2("ul", { children: points.map((p, i) => /* @__PURE__ */ jsx2("li", { children: p }, i)) })
+        ] });
+      },
       [PT_TYPES.mention]: ({ value }) => {
         const v = value;
         return /* @__PURE__ */ jsx2("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
@@ -989,8 +1132,9 @@ function styleOf(block) {
 function withHide(block, wrapperStyle, el, stampAt) {
   const hide = hideOnAttr(block.style);
   const state = stampAt ? windowState(block, stampAt) : "live";
-  if (!wrapperStyle && !hide && state === "live") return el;
-  return /* @__PURE__ */ jsx15("div", { style: wrapperStyle, ...hide ? { "data-bcms-hide": hide } : {}, ...state === "live" ? {} : { "data-bcms-window": state }, children: el });
+  const hidden = !!stampAt && hiddenEverywhere(block);
+  if (!wrapperStyle && !hide && state === "live" && !hidden) return el;
+  return /* @__PURE__ */ jsx15("div", { style: wrapperStyle, ...hide ? { "data-bcms-hide": hide } : {}, ...state === "live" ? {} : { "data-bcms-window": state }, ...hidden ? { "data-bcms-hidden": "all" } : {}, children: el });
 }
 function bindingProps(block, annotate) {
   if (!annotate || !block.id) return {};