@bettercms-ai/ui 0.17.1 → 0.19.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") {
@@ -43,6 +44,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 +267,14 @@ 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 } : {},
+    // 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) {
@@ -273,7 +283,11 @@ 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 } : {},
+    ...isRecord(raw) && isColumnType(raw.type) ? { type: raw.type } : {}
   };
 }
 function builtInTableToTable(node, key = randomKey) {
@@ -330,9 +344,62 @@ 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) } : {},
+    ...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 = {
+    ...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 +417,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;
@@ -365,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);
@@ -390,6 +583,77 @@ 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),
+    // 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 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) => {
+  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 +715,104 @@ 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 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) => {
+      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 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;
+      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"), ...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", { 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 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 }),
-    layout.columns.map((run, i) => /* @__PURE__ */ jsx2("colgroup", { span: span(run.width) }, i)),
-    (groupRow || head > 0) && /* @__PURE__ */ jsxs("thead", { children: [
+    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", { ...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,
       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 || footnotes.length ? /* @__PURE__ */ jsxs("figure", { "data-rt": "table", ...designAttrs, ...filter ? { "data-filter": "true" } : {}, ...ldAttrs, children: [
     table,
-    /* @__PURE__ */ jsx2("p", { "data-notes": "", id: notesId, children: notes })
+    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) {