@bettercms-ai/ui 0.17.1 → 0.18.0

package/dist/renderer.js

@@ -43,6 +43,8 @@ function pullQuoteHref(link) {
   }
   return "";
 }
+var isPortableTextBlock = (n) => !!n && typeof n === "object" && n._type === "block";
+var isPortableTextSpan = (n) => !!n && typeof n === "object" && n._type === "span";
 var PT_TYPES = {
   /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
   block: "bcmsBlock",
@@ -264,7 +266,9 @@ function normalizeCell(raw, at, mint, read) {
     ...raw.header === true ? { header: true } : {},
     ...span === void 0 ? {} : { span },
     ...rowSpan === void 0 ? {} : { rowSpan },
-    ...typeof raw.group === "string" ? { group: raw.group } : {}
+    ...typeof raw.group === "string" ? { group: raw.group } : {},
+    ...raw.highlight === true ? { highlight: true } : {},
+    ...raw.sortable === true ? { sortable: true } : {}
   };
 }
 function normalizeRow(raw, at, mint, read) {
@@ -273,7 +277,10 @@ function normalizeRow(raw, at, mint, read) {
     _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) && typeof raw.group === "string" ? { group: raw.group } : {}
+    ...isRecord(raw) && typeof raw.group === "string" ? { group: raw.group } : {},
+    // The V2 table's two row flags ("Totals row", "Highlight this row"); see `PortableTextTableRow`.
+    ...isRecord(raw) && raw.footer === true ? { footer: true } : {},
+    ...isRecord(raw) && raw.highlight === true ? { highlight: true } : {}
   };
 }
 function builtInTableToTable(node, key = randomKey) {
@@ -330,9 +337,53 @@ function tableExtras(node) {
     ...typeof node.caption === "string" ? { caption: node.caption } : {},
     ...typeof node.notes === "string" ? { notes: node.notes } : {},
     ...rowGroups ? { rowGroups } : {},
-    ...columnGroups ? { columnGroups } : {}
+    ...columnGroups ? { columnGroups } : {},
+    ...node.filterable === true ? { filterable: true } : {},
+    ...jsonLdOf(node.jsonLd) ? { jsonLd: jsonLdOf(node.jsonLd) } : {},
+    ...designOf(node.design) ? { design: designOf(node.design) } : {}
   };
 }
+function designOf(v) {
+  if (!isRecord(v)) return void 0;
+  const d = {
+    ...v.responsive === "stack" || v.responsive === "cards" ? { responsive: v.responsive } : {},
+    ...v.sticky === true ? { sticky: true } : {}
+  };
+  return Object.keys(d).length ? d : void 0;
+}
+var JSONLD_TYPES = ["ItemList", "Dataset", "Offers"];
+function jsonLdOf(v) {
+  if (!isRecord(v) || !JSONLD_TYPES.includes(v.type)) return void 0;
+  return {
+    type: v.type,
+    ...v.axis === "rows" || v.axis === "columns" ? { axis: v.axis } : {},
+    ...typeof v.priceRow === "string" && v.priceRow ? { priceRow: v.priceRow } : {}
+  };
+}
+function tableSections(table) {
+  const rows = Array.isArray(table.rows) ? table.rows : [];
+  const headCount = rows.findIndex((r) => !isRecord(r) || r.head !== true);
+  const head = rows.slice(0, headCount === -1 ? rows.length : headCount);
+  let footFrom = rows.length;
+  while (footFrom > head.length && isRecord(rows[footFrom - 1]) && rows[footFrom - 1].footer === true) footFrom -= 1;
+  return { head, body: rows.slice(head.length, footFrom), foot: rows.slice(footFrom) };
+}
+function highlightedColumns(table) {
+  return markedColumns(table, "highlight");
+}
+function sortableColumns(table) {
+  return markedColumns(table, "sortable");
+}
+function markedColumns(table, flag) {
+  const out = /* @__PURE__ */ new Set();
+  const first = Array.isArray(table.rows) ? table.rows[0] : void 0;
+  let at = 0;
+  for (const cell of isRecord(first) && Array.isArray(first.cells) ? first.cells : []) {
+    if (isRecord(cell) && cell[flag] === true) out.add(at);
+    at += isRecord(cell) && typeof cell.span === "number" && Number.isInteger(cell.span) && cell.span > 1 ? cell.span : 1;
+  }
+  return out;
+}
 function tableGroupLayout(table) {
   const rows = Array.isArray(table.rows) ? table.rows : [];
   const labels = (list) => new Map(
@@ -350,8 +401,7 @@ function tableGroupLayout(table) {
     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 { body } = tableSections(table);
   const runs = [];
   for (const row of body) {
     const key = isRecord(row) && typeof row.group === "string" && rowLabels.has(row.group) ? row.group : void 0;
@@ -390,6 +440,74 @@ function detachedComponentCopy(value) {
     ...typeof f.variant === "string" ? { variant: f.variant } : {}
   };
 }
+function componentCopyLines(copy) {
+  const line = (v) => {
+    if (typeof v === "number" && Number.isFinite(v)) return String(v);
+    if (typeof v === "string") {
+      const t = v.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/\s+/g, " ").trim();
+      return t || null;
+    }
+    if (isRecord3(v)) return line(v.label ?? v.text ?? v.title);
+    return null;
+  };
+  return Object.values(copy.props).map(line).filter((s) => !!s);
+}
+
+// ../richtext/src/plain.ts
+function portableTextToPlainText(value) {
+  if (!Array.isArray(value)) return "";
+  const lines = [];
+  for (const node of value) {
+    if (isPortableTextBlock(node)) {
+      lines.push(node.children.map((c) => isPortableTextSpan(c) ? c.text : "").join(""));
+      continue;
+    }
+    if (node._type === PT_TYPES.code && typeof node.code === "string") {
+      lines.push(node.code);
+    }
+    if (node._type === PT_TYPES.pullQuote) {
+      lines.push(...pullQuoteLines(node));
+      continue;
+    }
+    if (node._type === PT_TYPES.keyTakeaways) {
+      const { title, points } = keyTakeawaysView(node);
+      lines.push(...title ? [title] : [], ...points);
+      continue;
+    }
+    const table = migrateTable(node);
+    if (table) {
+      lines.push(...tableLines(table));
+      continue;
+    }
+    const copy = detachedComponentCopy(node);
+    if (copy) {
+      lines.push(...componentCopyLines(copy));
+      continue;
+    }
+  }
+  return lines.join("\n");
+}
+var tableLines = (table) => {
+  const rows = Array.isArray(table.rows) ? table.rows : [];
+  const rowLine = (row) => (Array.isArray(row?.cells) ? row.cells : []).map((cell) => portableTextToPlainText(cell?.content).replace(/\s+/g, " ").trim()).join(" ").trim();
+  const layout = tableGroupLayout(table);
+  const one = (s) => typeof s === "string" ? s.replace(/\s+/g, " ").trim() : "";
+  const head = layout.rows.length ? rows.slice(0, rows.length - layout.rows.reduce((n, r) => n + r.rows.length, 0)) : rows;
+  const lines = [
+    one(table.caption),
+    layout.columns.map((r) => one(r.label)).filter(Boolean).join(" "),
+    ...head.map(rowLine),
+    ...layout.rows.flatMap((run) => [...run.label === void 0 ? [] : [one(run.label)], ...run.rows.map(rowLine)]),
+    one(table.notes)
+  ];
+  const extras = /* @__PURE__ */ new Set([0, 1, lines.length - 1]);
+  return lines.filter((l, i) => l !== "" || !extras.has(i));
+};
+var pullQuoteLines = (v) => {
+  const text = (x) => typeof x === "string" ? x.trim() : "";
+  const by = [text(v.name), text(v.role)].filter(Boolean).join(", ");
+  return [text(v.quote), ...by ? [`\u2014 ${by}`] : []].filter(Boolean);
+};
 
 // ../richtext/src/read.ts
 var isRecord4 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
@@ -451,41 +569,71 @@ function Table({ value }) {
   );
   const rows = Array.isArray(value?.rows) ? value.rows : [];
   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 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, { ...span2 ? { colSpan: span2 } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }) }, cell?._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;
+  const marked = highlightedColumns(value);
+  const sortable = sortableColumns(value);
+  const design = designOf(value.design);
+  const stacked = design?.responsive === "stack" || design?.responsive === "cards";
+  const role = (r) => stacked ? { role: r } : {};
+  const labels = [];
+  if (stacked) {
+    const headRows = tableSections(value).head;
+    let at = 0;
+    for (const c of Array.isArray(headRows[headRows.length - 1]?.cells) ? headRows[headRows.length - 1].cells : []) {
+      const text = portableTextToPlainText(Array.isArray(c?.content) ? c.content : []).replace(/\s+/g, " ").trim();
+      const w = typeof c?.span === "number" && c.span > 1 ? c.span : 1;
+      for (let i = 0; i < w; i += 1) labels[at + i] = text;
+      at += w;
+    }
+  }
+  const cells = (row) => {
+    let col = 0;
+    return (Array.isArray(row?.cells) ? row.cells : []).map((cell) => {
+      const Tag = cell?.header === true ? "th" : "td";
+      const span2 = typeof cell?.span === "number" && cell.span > 1 ? cell.span : void 0;
+      const at = col;
+      col += span2 ?? 1;
+      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, { ...Tag === "td" ? role("cell") : {}, ...span2 ? { colSpan: span2 } : {}, ...rowSpan ? { rowSpan } : {}, ...stacked && Tag === "td" ? { "data-label": labels[at] || `Column ${at + 1}` } : {}, ...marked.has(at) ? { "data-highlight": "true" } : {}, children: /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
+    });
+  };
+  const rowEl = (row) => /* @__PURE__ */ jsx2("tr", { ...role("row"), ...row?.highlight === true ? { "data-highlight": "true" } : {}, children: cells(row) }, row?._key);
+  const sections = tableSections(value);
+  const head = sections.head.length;
+  const foot = sections.foot;
   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)]
+  const groupRow = layout.columns.length ? /* @__PURE__ */ jsx2("tr", { ...role("row"), children: layout.columns.flatMap(
+    (run, i) => run.label === void 0 ? Array.from({ length: run.width }, (_, k) => /* @__PURE__ */ jsx2("td", { ...role("cell") }, `${i}-${k}`)) : [/* @__PURE__ */ jsx2("th", { ...role("columnheader"), 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 }) }),
+  const bodies = layout.rows.length ? layout.rows.map((run, i) => /* @__PURE__ */ jsxs("tbody", { ...role("rowgroup"), "data-key": run.key, children: [
+    run.label !== void 0 && /* @__PURE__ */ jsx2("tr", { ...role("row"), children: /* @__PURE__ */ jsx2("th", { ...role("rowheader"), 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: [
+  ] }, i)) : sections.body.length > 0 && /* @__PURE__ */ jsx2("tbody", { ...role("rowgroup"), children: sections.body.map(rowEl) });
+  const table = /* @__PURE__ */ jsxs("table", { ...role("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: [
+    sortable.size ? (layout.columns.length ? layout.columns.map((run) => run.width) : [layout.width]).map((w, i, all) => {
+      const from = all.slice(0, i).reduce((n, x) => n + x, 0);
+      return /* @__PURE__ */ jsx2("colgroup", { children: Array.from({ length: w }, (_, k) => /* @__PURE__ */ jsx2("col", { ...sortable.has(from + k) ? { "data-sortable": "true" } : {} }, k)) }, i);
+    }) : layout.columns.map((run, i) => /* @__PURE__ */ jsx2("colgroup", { span: span(run.width) }, i)),
+    (groupRow || head > 0) && /* @__PURE__ */ jsxs("thead", { ...role("rowgroup"), children: [
       groupRow,
       rows.slice(0, head).map(rowEl)
     ] }),
-    bodies
+    bodies,
+    foot.length > 0 && /* @__PURE__ */ jsx2("tfoot", { ...role("rowgroup"), children: foot.map(rowEl) })
   ] });
-  return notes ? /* @__PURE__ */ jsxs("figure", { "data-rt": "table", children: [
+  const filter = value.filterable === true;
+  const ld = jsonLdOf(value.jsonLd);
+  const ldAttrs = ld ? { "data-jsonld": ld.type, ...ld.axis ? { "data-jsonld-axis": ld.axis } : {}, ...ld.priceRow ? { "data-jsonld-price": ld.priceRow } : {} } : {};
+  const designAttrs = design ? { ...design.responsive ? { "data-responsive": design.responsive } : {}, ...design.sticky ? { "data-sticky": "true" } : {} } : {};
+  return notes || filter || ld || design ? /* @__PURE__ */ jsxs("figure", { "data-rt": "table", ...designAttrs, ...filter ? { "data-filter": "true" } : {}, ...ldAttrs, children: [
     table,
-    /* @__PURE__ */ jsx2("p", { "data-notes": "", id: notesId, children: notes })
+    notes ? /* @__PURE__ */ jsx2("p", { "data-notes": "", id: notesId, children: notes }) : null
   ] }) : table;
 }
 function buildComponents(renderBlock) {