@bettercms-ai/ui 0.18.0 → 0.20.0

package/dist/renderer.js

@@ -36,6 +36,7 @@ import React from "react";
 import { PortableText as PT } from "@portabletext/react";
 
 // ../richtext/src/types.ts
+var PT_TABLE_COLUMN_TYPES = ["text", "number", "money", "boolean", "rating", "link"];
 function pullQuoteHref(link) {
   if (typeof link === "string") return link.trim();
   if (link && typeof link === "object" && typeof link.href === "string") {
@@ -268,7 +269,12 @@ function normalizeCell(raw, at, mint, read) {
     ...rowSpan === void 0 ? {} : { rowSpan },
     ...typeof raw.group === "string" ? { group: raw.group } : {},
     ...raw.highlight === true ? { highlight: true } : {},
-    ...raw.sortable === true ? { sortable: true } : {}
+    ...raw.sortable === true ? { sortable: true } : {},
+    // The V2 table's typed cells: the column (first-row cell), the per-cell type, the typed value.
+    ...columnOf(raw.column) ? { column: columnOf(raw.column) } : {},
+    ...isColumnType(raw.type) ? { type: raw.type } : {},
+    ...typeof raw.value === "boolean" || typeof raw.value === "number" && Number.isFinite(raw.value) ? { value: raw.value } : {},
+    ...typeof raw.note === "string" && raw.note ? { note: raw.note } : {}
   };
 }
 function normalizeRow(raw, at, mint, read) {
@@ -280,7 +286,8 @@ function normalizeRow(raw, at, mint, read) {
     ...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 } : {}
+    ...isRecord(raw) && raw.highlight === true ? { highlight: true } : {},
+    ...isRecord(raw) && isColumnType(raw.type) ? { type: raw.type } : {}
   };
 }
 function builtInTableToTable(node, key = randomKey) {
@@ -340,9 +347,18 @@ function tableExtras(node) {
     ...columnGroups ? { columnGroups } : {},
     ...node.filterable === true ? { filterable: true } : {},
     ...jsonLdOf(node.jsonLd) ? { jsonLd: jsonLdOf(node.jsonLd) } : {},
-    ...designOf(node.design) ? { design: designOf(node.design) } : {}
+    ...designOf(node.design) ? { design: designOf(node.design) } : {},
+    ...footnotesOf(node.footnotes) ? { footnotes: footnotesOf(node.footnotes) } : {}
   };
 }
+function footnotesOf(v) {
+  if (!Array.isArray(v)) return void 0;
+  const out = v.filter((f) => isRecord(f) && typeof f._key === "string" && f._key !== "").map((f) => ({ _key: f._key, text: typeof f.text === "string" ? f.text : "" }));
+  return out.length ? out : void 0;
+}
+function footnoteNumbers(table) {
+  return new Map((footnotesOf(table.footnotes) ?? []).map((f, i) => [f._key, i + 1]));
+}
 function designOf(v) {
   if (!isRecord(v)) return void 0;
   const d = {
@@ -415,6 +431,133 @@ function tableGroupLayout(table) {
     width
   };
 }
+var NUMERIC_TYPES = /* @__PURE__ */ new Set(["number", "money", "rating"]);
+var isColumnType = (v) => PT_TABLE_COLUMN_TYPES.includes(v);
+function columnOf(v) {
+  if (!isRecord(v)) return void 0;
+  const str = (x) => typeof x === "string" && x !== "" ? x : void 0;
+  const int = (x, lo, hi) => Number.isInteger(x) && x >= lo && x <= hi ? x : void 0;
+  const c = {
+    ...isColumnType(v.type) ? { type: v.type } : {},
+    ...str(v.description) ? { description: str(v.description) } : {},
+    ...str(v.unit) ? { unit: str(v.unit) } : {},
+    ...typeof v.currency === "string" && /^[A-Z]{3}$/.test(v.currency) ? { currency: v.currency } : {},
+    ...int(v.decimals, 0, 10) !== void 0 ? { decimals: int(v.decimals, 0, 10) } : {},
+    ...v.align === "start" || v.align === "center" || v.align === "end" ? { align: v.align } : {},
+    ...str(v.trueLabel) ? { trueLabel: str(v.trueLabel) } : {},
+    ...str(v.falseLabel) ? { falseLabel: str(v.falseLabel) } : {},
+    ...int(v.max, 1, 10) !== void 0 ? { max: int(v.max, 1, 10) } : {}
+  };
+  return Object.keys(c).length ? c : void 0;
+}
+function tableColumns(table) {
+  const out = [];
+  const first = Array.isArray(table.rows) ? table.rows[0] : void 0;
+  for (const cell of isRecord(first) && Array.isArray(first.cells) ? first.cells : []) {
+    const w = isRecord(cell) && typeof cell.span === "number" && Number.isInteger(cell.span) && cell.span > 1 ? cell.span : 1;
+    const col = isRecord(cell) ? columnOf(cell.column) : void 0;
+    for (let i = 0; i < w; i += 1) out.push(col);
+  }
+  return out;
+}
+function isTypedTable(table) {
+  if (tableColumns(table).some(Boolean)) return true;
+  return (Array.isArray(table.rows) ? table.rows : []).some(
+    (r) => isRecord(r) && (r.type !== void 0 || Array.isArray(r.cells) && r.cells.some((c) => isRecord(c) && (c.type !== void 0 || c.value !== void 0)))
+  );
+}
+var cellTypeOf = (col, row, cell) => (isRecord(cell) && isColumnType(cell.type) ? cell.type : void 0) ?? (isRecord(row) && isColumnType(row.type) ? row.type : void 0) ?? col?.type ?? "text";
+var columnAlign = (col, type) => col?.align ?? (NUMERIC_TYPES.has(type) ? "end" : "start");
+var TRUE_WORDS = /* @__PURE__ */ new Set(["\u2713", "\u2714", "\u2714\uFE0F", "\u2611", "\u2705", "yes", "y", "true", "included", "available", "supported", "x \u2713", "check", "\u25CF"]);
+var FALSE_WORDS = /* @__PURE__ */ new Set(["\u2717", "\u2715", "\u2716", "\u274C", "\xD7", "x", "no", "n", "false", "not included", "unavailable", "not available", "unsupported", "\u2014", "\u2013", "-", "\u25CB"]);
+function toBool(v) {
+  if (typeof v === "boolean") return v;
+  if (typeof v !== "string") return null;
+  const s = v.trim().toLowerCase();
+  return TRUE_WORDS.has(s) ? true : FALSE_WORDS.has(s) ? false : null;
+}
+function toNumber(v) {
+  if (typeof v === "number") return Number.isFinite(v) ? v : null;
+  if (typeof v !== "string") return null;
+  const s = v.replace(/[,\s]/g, "").replace(/[^\d.+-]/g, "");
+  if (!s || !/^[+-]?\d*\.?\d+$/.test(s)) return null;
+  return Number(s);
+}
+var formatNumber = (n, decimals) => new Intl.NumberFormat("en-US", decimals != null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : { maximumFractionDigits: 6 }).format(n);
+function formatMoney(n, currency = "USD", decimals) {
+  try {
+    const whole = Number.isInteger(n) && decimals == null;
+    return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: whole ? 0 : decimals ?? 2, maximumFractionDigits: whole ? 0 : decimals ?? 2 }).format(n);
+  } catch {
+    return `${formatNumber(n, decimals)} ${currency}`;
+  }
+}
+var boolLabels = (col) => ({ yes: col?.trueLabel || "Included", no: col?.falseLabel || "Not included" });
+function typedCellText(col, type, v) {
+  if (v == null || v === "") return "";
+  const words = String(v).replace(/\s+/g, " ").trim();
+  switch (type) {
+    case "boolean": {
+      const b = toBool(v);
+      return b == null ? words : b ? boolLabels(col).yes : boolLabels(col).no;
+    }
+    case "number": {
+      const n = toNumber(v);
+      return n == null ? words : `${formatNumber(n, col?.decimals)}${col?.unit ? /^[%°]/.test(col.unit) ? col.unit : ` ${col.unit}` : ""}`;
+    }
+    case "money": {
+      const n = toNumber(v);
+      return n == null ? words : formatMoney(n, col?.currency || "USD", col?.decimals);
+    }
+    case "rating": {
+      const n = toNumber(v);
+      return n == null ? words : `${formatNumber(n, 1).replace(/\.0$/, "")} out of ${col?.max ?? 5}`;
+    }
+    default:
+      return words;
+  }
+}
+var escHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function typedCellView(column, row, cell, inHead) {
+  if (inHead) {
+    const align2 = columnAlign(column, column?.type ?? "text");
+    return { lead: align2 !== "start" ? [["data-align", align2]] : [], tail: column?.description ? [["title", column.description]] : [] };
+  }
+  const type = cellTypeOf(column, row, cell);
+  const words = portableTextWords(cell.content);
+  const v = typeof cell.value === "number" || typeof cell.value === "boolean" ? cell.value : words;
+  const tail = isColumnType(cell.type) ? [["data-type", cell.type]] : [];
+  let inner;
+  if (v === "") {
+    inner = cell.header === true ? "" : '<span aria-hidden="true" class="bt-dash">\u2014</span><span class="bt-sr">No value</span>';
+    tail.push(["data-empty", ""]);
+  } else if (type === "boolean") {
+    const b = toBool(v);
+    if (b == null) inner = escHtml(words);
+    else {
+      const { yes, no } = boolLabels(column);
+      inner = `<span aria-hidden="true" class="bt-bool" data-bool="${b}">${b ? "\u2713" : "\u2013"}</span><span class="bt-sr">${escHtml(b ? yes : no)}</span>`;
+      tail.push(["data-value", String(b)]);
+    }
+  } else if (type === "rating") {
+    const n = toNumber(v);
+    if (n == null) inner = escHtml(words);
+    else {
+      inner = `<span aria-hidden="true" class="bt-star">\u2605</span> ${escHtml(formatNumber(n, 1).replace(/\.0$/, ""))}<span class="bt-dim"> / ${column?.max ?? 5}</span>`;
+      tail.push(["data-value", String(n)]);
+    }
+  } else if (type === "number" || type === "money") {
+    const n = toNumber(v);
+    inner = escHtml(typedCellText(column, type, v));
+    if (n != null) tail.push(["data-value", String(n)]);
+  }
+  const align = columnAlign(column, type);
+  if (align !== "start") tail.push(["data-align", align]);
+  return { lead: [], tail, ...inner === void 0 ? {} : { inner } };
+}
+function portableTextWords(content) {
+  return (Array.isArray(content) ? content : []).map((b) => isRecord(b) && Array.isArray(b.children) ? b.children.map((c) => isRecord(c) && typeof c.text === "string" ? c.text : "").join("") : "").join(" ").replace(/\s+/g, " ").trim();
+}
 
 // ../richtext/src/key-takeaways.ts
 var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
@@ -498,9 +641,12 @@ var tableLines = (table) => {
     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)
+    one(table.notes),
+    // footnotes, numbered as the html numbers them (V2 tableSearchText reads them too)
+    ...(Array.isArray(table.footnotes) ? table.footnotes : []).map((f, i) => one(`[${i + 1}] ${typeof f?.text === "string" ? f.text : ""}`))
   ];
-  const extras = /* @__PURE__ */ new Set([0, 1, lines.length - 1]);
+  const fnCount = Array.isArray(table.footnotes) ? table.footnotes.length : 0;
+  const extras = /* @__PURE__ */ new Set([0, 1, lines.length - 1 - fnCount]);
   return lines.filter((l, i) => l !== "" || !extras.has(i));
 };
 var pullQuoteLines = (v) => {
@@ -585,6 +731,13 @@ function Table({ value }) {
       at += w;
     }
   }
+  const columns = tableColumns(value);
+  const typed = isTypedTable(value);
+  const headSet = new Set(tableSections(value).head);
+  const props = (list) => Object.fromEntries(list);
+  const fnNumber = footnoteNumbers(value);
+  const footnotes = footnotesOf(value.footnotes) ?? [];
+  const tableId = typeof value._key === "string" && value._key ? value._key : "tbl";
   const cells = (row) => {
     let col = 0;
     return (Array.isArray(row?.cells) ? row.cells : []).map((cell) => {
@@ -593,19 +746,27 @@ function Table({ value }) {
       const at = col;
       col += span2 ?? 1;
       const rowSpan = typeof cell?.rowSpan === "number" && cell.rowSpan > 1 ? cell.rowSpan : void 0;
+      const n = typeof cell?.note === "string" ? fnNumber.get(cell.note) : 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 view = typed ? typedCellView(columns[at], row, cell ?? {}, headSet.has(row)) : void 0;
+      const noteAttr = n ? [["data-note", cell.note]] : [];
+      const tail = [...(view?.tail ?? []).filter(([k]) => k !== "data-align"), ...noteAttr, ...(view?.tail ?? []).filter(([k]) => k === "data-align")];
+      const supHtml = n ? `<sup><a href="#${tableId}-fn-${n}" aria-label="Note ${n}">${n}</a></sup>` : "";
+      return /* @__PURE__ */ jsx2(Tag, { ...Tag === "td" ? role("cell") : {}, ...span2 ? { colSpan: span2 } : {}, ...rowSpan ? { rowSpan } : {}, ...props(view?.lead ?? []), ...stacked && Tag === "td" ? { "data-label": labels[at] || `Column ${at + 1}` } : {}, ...marked.has(at) ? { "data-highlight": "true" } : {}, ...props(tail), ...view?.inner !== void 0 ? { dangerouslySetInnerHTML: { __html: view.inner + supHtml } } : {}, children: view?.inner !== void 0 ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }),
+        n ? /* @__PURE__ */ jsx2("sup", { children: /* @__PURE__ */ jsx2("a", { href: `#${tableId}-fn-${n}`, "aria-label": `Note ${n}`, children: n }) }) : null
+      ] }) }, cell?._key);
     });
   };
-  const rowEl = (row) => /* @__PURE__ */ jsx2("tr", { ...role("row"), ...row?.highlight === true ? { "data-highlight": "true" } : {}, children: cells(row) }, row?._key);
+  const rowEl = (row) => /* @__PURE__ */ jsx2("tr", { ...role("row"), ...typeof row?.type === "string" ? { "data-type": row.type } : {}, ...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 notesId = (notes || footnotes.length) && 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", { ...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)]
@@ -614,11 +775,26 @@ function Table({ value }) {
     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)) : sections.body.length > 0 && /* @__PURE__ */ jsx2("tbody", { ...role("rowgroup"), children: sections.body.map(rowEl) });
+  const colProps = (i) => {
+    const c = columns[i];
+    return {
+      ...c ? { "data-type": c.type ?? "text" } : {},
+      ...c?.unit ? { "data-unit": c.unit } : {},
+      ...c?.currency ? { "data-currency": c.currency } : {},
+      ...c?.decimals != null ? { "data-decimals": String(c.decimals) } : {},
+      ...c?.align ? { "data-align": c.align } : {},
+      ...sortable.has(i) ? { "data-sortable": "true" } : {},
+      ...c?.trueLabel ? { "data-true": c.trueLabel } : {},
+      ...c?.falseLabel ? { "data-false": c.falseLabel } : {},
+      ...c?.max != null ? { "data-max": String(c.max) } : {},
+      ...c?.description ? { "data-description": c.description } : {}
+    };
+  };
   const table = /* @__PURE__ */ jsxs("table", { ...role("table"), ...value.legacy === true ? { className: "bcms-table" } : {}, ...notesId ? { "aria-describedby": notesId } : {}, children: [
     caption && /* @__PURE__ */ jsx2("caption", { children: caption }),
-    sortable.size ? (layout.columns.length ? layout.columns.map((run) => run.width) : [layout.width]).map((w, i, all) => {
+    sortable.size || columns.some(Boolean) ? (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);
+      return /* @__PURE__ */ jsx2("colgroup", { children: Array.from({ length: w }, (_, k) => /* @__PURE__ */ jsx2("col", { ...colProps(from + k) }, 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,
@@ -631,9 +807,12 @@ function Table({ value }) {
   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: [
+  return notes || filter || ld || design || footnotes.length ? /* @__PURE__ */ jsxs("figure", { "data-rt": "table", ...designAttrs, ...filter ? { "data-filter": "true" } : {}, ...ldAttrs, children: [
     table,
-    notes ? /* @__PURE__ */ jsx2("p", { "data-notes": "", id: notesId, children: notes }) : null
+    footnotes.length ? /* @__PURE__ */ jsxs("div", { className: "bt-notes", id: `${tableId}-notes`, children: [
+      notes ? /* @__PURE__ */ jsx2("p", { "data-notes": "", children: notes }) : null,
+      /* @__PURE__ */ jsx2("ol", { "data-footnotes": "", children: footnotes.map((f, i) => /* @__PURE__ */ jsx2("li", { id: `${tableId}-fn-${i + 1}`, "data-key": f._key, children: f.text }, f._key)) })
+    ] }) : notes ? /* @__PURE__ */ jsx2("p", { "data-notes": "", id: notesId, children: notes }) : null
   ] }) : table;
 }
 function buildComponents(renderBlock) {
@@ -656,6 +835,8 @@ function buildComponents(renderBlock) {
       [PT_TYPES.block]: ({ value }) => {
         const rendered = renderBlock?.(value);
         if (rendered !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: rendered });
+        const builtIn = calloutOrToggle(value);
+        if (builtIn) return builtIn;
         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 }) });
@@ -772,6 +953,35 @@ function runsOf(blocks) {
   }
   return runs;
 }
+function paragraphs(text) {
+  return text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean).map((p, i) => /* @__PURE__ */ jsx2("p", { children: p.split("\n").map((line, j) => j === 0 ? line : [/* @__PURE__ */ jsx2("br", {}, j), line]) }, i));
+}
+var CALLOUT_TONES = /* @__PURE__ */ new Set(["info", "tip", "warning"]);
+function calloutOrToggle(value) {
+  const v = value ?? {};
+  const f = v.fields && typeof v.fields === "object" ? v.fields : {};
+  const text = (x) => typeof x === "string" ? x.trim() : "";
+  if (v.schemaKey === "builtin:callout") {
+    const tone = CALLOUT_TONES.has(text(f.tone)) ? text(f.tone) : "info";
+    const title = text(f.title);
+    const body = paragraphs(typeof f.message === "string" ? f.message : "");
+    if (!title && !body.length) return /* @__PURE__ */ jsx2(Fragment, {});
+    return /* @__PURE__ */ jsxs("div", { className: `bcms-callout bcms-callout--${tone}`, "data-rt": "callout", "data-callout": tone, role: "note", children: [
+      title ? /* @__PURE__ */ jsx2("p", { className: "bcms-callout__title", "data-title": "", children: title }) : null,
+      /* @__PURE__ */ jsx2("div", { className: "bcms-callout__body", "data-body": "", children: body })
+    ] });
+  }
+  if (v.schemaKey === "builtin:toggle") {
+    const title = text(f.title);
+    const body = paragraphs(typeof f.body === "string" ? f.body : "");
+    if (!title && !body.length) return /* @__PURE__ */ jsx2(Fragment, {});
+    return /* @__PURE__ */ jsxs("details", { className: "bcms-toggle", "data-rt": "toggle", children: [
+      /* @__PURE__ */ jsx2("summary", { className: "bcms-toggle__title", children: title }),
+      /* @__PURE__ */ jsx2("div", { className: "bcms-toggle__body", "data-body": "", children: body })
+    ] });
+  }
+  return null;
+}
 function PortableText({ value, bindingBase, renderBlock }) {
   const blocks = React.useMemo(() => normalizePortableText(readValue(value)), [value]);
   const components = React.useMemo(() => buildComponents(renderBlock), [renderBlock]);