@richardmcquiston01/dashboard-widgets-toolkit 0.4.1 → 0.6.0

package/dist/react.js

@@ -3,80 +3,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/react/card.tsx
 
-// src/core/grid.ts
-var WIDTH_COLUMNS = 12;
-var MIN_WIDGET_WIDTH = 2;
-var MAX_WIDGET_WIDTH = 12;
-function isWidgetWidth(value) {
-  return typeof value === "number" && Number.isInteger(value) && value >= MIN_WIDGET_WIDTH && value <= MAX_WIDGET_WIDTH;
-}
-function widthForSize(size) {
-  switch (size) {
-    case "small":
-      return 3;
-    case "large":
-      return 6;
-    case "full":
-      return 12;
-    default:
-      return 4;
-  }
-}
-function itemWidth(item) {
-  return isWidgetWidth(item.width) ? item.width : widthForSize(item.defaultSize);
-}
-function usesWidthColumns(items) {
-  return items.some((item) => item.width !== void 0);
-}
-function fillsWidth(fill) {
-  return fill === "width" || fill === "both";
-}
-function fillsHeight(fill) {
-  return fill === "height" || fill === "both";
-}
-function baseColumnSpan(size, columns, largeSpan = 2) {
-  if (size === "full") return columns;
-  if (size === "large") return Math.min(largeSpan, columns);
-  return 1;
-}
-function fillColumnSpans(items, columns, largeSpan = 2) {
-  return placeAndFill(
-    items,
-    columns,
-    (item, trackCount) => baseColumnSpan(item.defaultSize, trackCount, largeSpan)
-  );
-}
-function fillWidthSpans(items) {
-  return placeAndFill(items, WIDTH_COLUMNS, itemWidth);
-}
-function placeAndFill(items, columns, spanOf) {
-  const trackCount = Math.max(1, Math.floor(columns));
-  const spans = /* @__PURE__ */ new Map();
-  let row = [];
-  let used = 0;
-  function closeRow() {
-    const fillers = row.filter(({ item }) => fillsWidth(item.fill));
-    const leftover = trackCount - used;
-    if (fillers.length > 0) {
-      const share = Math.floor(leftover / fillers.length);
-      const remainder = leftover % fillers.length;
-      fillers.forEach(({ item, span }, index) => {
-        spans.set(item.key, span + share + (index < remainder ? 1 : 0));
-      });
-    }
-    row = [];
-    used = 0;
-  }
-  for (const item of items) {
-    const span = Math.min(spanOf(item, trackCount), trackCount);
-    if (used + span > trackCount && row.length > 0) closeRow();
-    row.push({ item, span });
-    used += span;
-  }
-  closeRow();
-  return spans;
-}
-
 // src/core/format.ts
 var DEFAULT_CURRENCY = "USD";
 function localeArgument(locale) {
@@ -140,23 +66,393 @@ function formatPercentChange(change, locale) {
     signDisplay: "exceptZero"
   }).format(rounded / 100);
 }
-var DEFAULT_COMPARISON_LABEL = "previous period";
-function kpiDelta(current, previous, options = {}) {
-  const percent = percentChange(current, previous);
-  if (percent === null) {
-    return null;
+var DEFAULT_COMPARISON_LABEL = "previous period";
+function kpiDelta(current, previous, options = {}) {
+  const percent = percentChange(current, previous);
+  if (percent === null) {
+    return null;
+  }
+  const text = formatPercentChange(percent, options.locale);
+  const direction = text === "\xB10%" ? "flat" : percent > 0 ? "up" : "down";
+  const higherIsBetter = options.higherIsBetter ?? true;
+  const sentiment = direction === "flat" ? "neutral" : direction === "up" === higherIsBetter ? "good" : "bad";
+  return {
+    percent,
+    direction,
+    sentiment,
+    text,
+    description: `${text} vs ${options.comparisonLabel ?? DEFAULT_COMPARISON_LABEL}`
+  };
+}
+
+// src/core/result.ts
+function ok(value) {
+  return { ok: true, value };
+}
+function err(error) {
+  return { ok: false, error };
+}
+function describeUnknownError(cause) {
+  if (cause instanceof Error) {
+    return cause.message === "" ? cause.name : cause.message;
+  }
+  if (typeof cause === "string") {
+    return cause;
+  }
+  try {
+    const json = JSON.stringify(cause);
+    return json ?? String(cause);
+  } catch {
+    return String(cause);
+  }
+}
+
+// src/core/url.ts
+var SCHEME_PATTERN = /^([a-z][a-z0-9+.-]*):/i;
+var IGNORED_IN_SCHEME = /[\u0000- \u007f]/g;
+function schemeOf(url) {
+  const match = SCHEME_PATTERN.exec(
+    url.replace(IGNORED_IN_SCHEME, "")
+  );
+  return match === null ? null : (match[1] ?? "").toLowerCase();
+}
+function isSafeHref(url) {
+  if (url.trim() === "") {
+    return false;
+  }
+  const scheme = schemeOf(url);
+  return scheme === null || scheme === "http" || scheme === "https" || scheme === "mailto";
+}
+function isSafeImageUrl(url) {
+  if (url.trim() === "") {
+    return false;
+  }
+  const scheme = schemeOf(url);
+  return scheme === null || scheme === "http" || scheme === "https";
+}
+
+// src/core/detail.ts
+var DEFAULT_DETAIL_PAGE_SIZE = 25;
+function resolveDetailOptions(definition) {
+  const detail = definition.detail;
+  if (detail === void 0 || detail === false) return void 0;
+  const options = detail === true ? {} : detail;
+  return {
+    title: options.title ?? definition.title,
+    pageSize: options.pageSize ?? DEFAULT_DETAIL_PAGE_SIZE,
+    mode: options.mode ?? "client"
+  };
+}
+function resolveTableControls(definition) {
+  const setting = definition.tableControls;
+  if (setting === void 0 || setting === false) return void 0;
+  const options = setting === true ? {} : setting;
+  const resolved = {
+    search: options.search ?? true,
+    sort: options.sort ?? true
+  };
+  return resolved.search || resolved.sort ? resolved : void 0;
+}
+function defaultDetailQuery(pageSize = DEFAULT_DETAIL_PAGE_SIZE) {
+  return { page: 1, pageSize };
+}
+function fold(text) {
+  return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+function cellValue(cell) {
+  return cell.value ?? cell.text;
+}
+function cellMatches(cell, needle) {
+  return fold(String(cellValue(cell))).includes(needle);
+}
+function compareCells(a, b, collator) {
+  const left = cellValue(a);
+  const right = cellValue(b);
+  if (typeof left === "number" && typeof right === "number") {
+    return left - right;
+  }
+  if (typeof left === "number") return -1;
+  if (typeof right === "number") return 1;
+  return collator.compare(left, right);
+}
+function queryRows(data, query, locale) {
+  const indexOf = new Map(
+    data.columns.map((column, index) => [column.key, index])
+  );
+  const filterEntries = [];
+  for (const [key, text] of Object.entries(query.filters ?? {})) {
+    const index = indexOf.get(key);
+    if (index === void 0) {
+      return err(
+        `Detail query: filter column "${key}" does not exist. Columns: ${listKeys(data)}.`
+      );
+    }
+    const needle = fold(text.trim());
+    if (needle !== "") filterEntries.push({ index, needle });
+  }
+  let sortIndex = -1;
+  if (query.sort !== void 0) {
+    const found = indexOf.get(query.sort.column);
+    const column = found === void 0 ? void 0 : data.columns[found];
+    if (found === void 0 || column === void 0) {
+      return err(
+        `Detail query: sort column "${query.sort.column}" does not exist. Columns: ${listKeys(data)}.`
+      );
+    }
+    if (column.sortable === false) {
+      return err(
+        `Detail query: column "${column.key}" is not sortable (sortable: false).`
+      );
+    }
+    sortIndex = found;
+  }
+  const search = fold((query.search ?? "").trim());
+  let rows = data.rows.filter(
+    (row) => filterEntries.every(({ index, needle }) => {
+      const cell = row[index];
+      return cell !== void 0 && cellMatches(cell, needle);
+    }) && (search === "" || row.some((cell) => cellMatches(cell, search)))
+  );
+  if (query.sort !== void 0 && sortIndex >= 0) {
+    const collator = new Intl.Collator(locale, {
+      numeric: true,
+      sensitivity: "base"
+    });
+    const sign = query.sort.direction === "desc" ? -1 : 1;
+    rows = rows.map((row, position) => ({ row, position })).sort((a, b) => {
+      const left = a.row[sortIndex];
+      const right = b.row[sortIndex];
+      const order = left === void 0 || right === void 0 ? 0 : sign * compareCells(left, right, collator);
+      return order || a.position - b.position;
+    }).map(({ row }) => row);
+  }
+  const pageSize = Math.max(1, Math.floor(query.pageSize));
+  const pageCount = Math.max(1, Math.ceil(rows.length / pageSize));
+  const page = Math.min(Math.max(1, Math.floor(query.page)), pageCount);
+  return ok({
+    rows: rows.slice((page - 1) * pageSize, page * pageSize),
+    totalRows: rows.length,
+    page,
+    pageCount
+  });
+}
+function listKeys(data) {
+  return data.columns.map((column) => `"${column.key}"`).join(", ");
+}
+function describeType(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
+function validateDetailData(data, subject = "Detail data") {
+  const problems = [];
+  if (typeof data !== "object" || data === null || Array.isArray(data)) {
+    return err(`${subject}: must be an object, got ${describeType(data)}.`);
+  }
+  const record = data;
+  const columns = record["columns"];
+  const rows = record["rows"];
+  const keys = /* @__PURE__ */ new Set();
+  let columnCount = 0;
+  if (!Array.isArray(columns) || columns.length === 0) {
+    problems.push(
+      `columns must be a non-empty array, got ${describeType(columns)}.`
+    );
+  } else {
+    columnCount = columns.length;
+    columns.forEach((column, index) => {
+      const at = `columns[${index}]`;
+      if (typeof column !== "object" || column === null) {
+        problems.push(`${at} must be an object, got ${describeType(column)}.`);
+        return;
+      }
+      const fields = column;
+      const key = fields["key"];
+      if (typeof key !== "string" || key === "") {
+        problems.push(`${at}.key must be a non-empty string.`);
+      } else if (keys.has(key)) {
+        problems.push(`${at}.key "${key}" is used by an earlier column.`);
+      } else {
+        keys.add(key);
+      }
+      if (typeof fields["label"] !== "string") {
+        problems.push(
+          `${at}.label must be a string, got ${describeType(fields["label"])}.`
+        );
+      }
+      for (const flag of ["numeric", "sortable", "filterable"]) {
+        const flagValue = fields[flag];
+        if (flagValue !== void 0 && typeof flagValue !== "boolean") {
+          problems.push(
+            `${at}.${flag} must be a boolean, got ${describeType(flagValue)}.`
+          );
+        }
+      }
+    });
+  }
+  if (!Array.isArray(rows)) {
+    problems.push(`rows must be an array, got ${describeType(rows)}.`);
+  } else {
+    rows.forEach((row, rowIndex) => {
+      if (!Array.isArray(row)) {
+        problems.push(
+          `rows[${rowIndex}] must be an array of cells, got ${describeType(row)}.`
+        );
+        return;
+      }
+      if (columnCount > 0 && row.length !== columnCount) {
+        problems.push(
+          `rows[${rowIndex}] has ${row.length} cells but there are ${columnCount} columns.`
+        );
+      }
+      row.forEach((cell, cellIndex) => {
+        const at = `rows[${rowIndex}][${cellIndex}]`;
+        if (typeof cell !== "object" || cell === null) {
+          problems.push(`${at} must be an object, got ${describeType(cell)}.`);
+          return;
+        }
+        const fields = cell;
+        if (typeof fields["text"] !== "string") {
+          problems.push(
+            `${at}.text must be a string, got ${describeType(fields["text"])}.`
+          );
+        }
+        const value = fields["value"];
+        if (value !== void 0 && typeof value !== "string" && !(typeof value === "number" && Number.isFinite(value))) {
+          problems.push(
+            `${at}.value must be a string or a finite number, got ${describeType(value)}.`
+          );
+        }
+        const href = fields["href"];
+        if (href !== void 0) {
+          if (typeof href !== "string") {
+            problems.push(
+              `${at}.href must be a string, got ${describeType(href)}.`
+            );
+          } else if (!isSafeHref(href)) {
+            problems.push(
+              `${at}.href "${href}" is not allowed (only http, https, mailto and relative URLs).`
+            );
+          }
+        }
+      });
+    });
+  }
+  const totalRows = record["totalRows"];
+  if (totalRows !== void 0 && !(typeof totalRows === "number" && Number.isInteger(totalRows) && totalRows >= 0)) {
+    problems.push(
+      `totalRows must be a non-negative whole number, got ${describeType(totalRows)}.`
+    );
+  }
+  if (problems.length > 0) {
+    return err(`${subject}: ${problems.join(" ")}`);
+  }
+  return ok(data);
+}
+function tableDetailData(data) {
+  return {
+    columns: data.columns.map((column, index) => ({
+      key: `c${index}`,
+      label: column.label,
+      ...column.numeric === void 0 ? {} : { numeric: column.numeric }
+    })),
+    rows: data.rows
+  };
+}
+function deriveDetailData(data, locale) {
+  if (data.kind === "TABLE") {
+    return data.footer === void 0 ? tableDetailData(data) : void 0;
+  }
+  if (data.kind === "BAR_LIST") {
+    return {
+      columns: [
+        { key: "label", label: "Name" },
+        { key: "value", label: "Value", numeric: true }
+      ],
+      rows: data.items.map((item) => [
+        { text: item.label },
+        {
+          text: item.display ?? formatValue(item.value, "number", { locale }),
+          value: item.value
+        }
+      ])
+    };
+  }
+  return void 0;
+}
+
+// src/core/grid.ts
+var WIDTH_COLUMNS = 12;
+var MIN_WIDGET_WIDTH = 2;
+var MAX_WIDGET_WIDTH = 12;
+function isWidgetWidth(value) {
+  return typeof value === "number" && Number.isInteger(value) && value >= MIN_WIDGET_WIDTH && value <= MAX_WIDGET_WIDTH;
+}
+function widthForSize(size) {
+  switch (size) {
+    case "small":
+      return 3;
+    case "large":
+      return 6;
+    case "full":
+      return 12;
+    default:
+      return 4;
+  }
+}
+function itemWidth(item) {
+  return isWidgetWidth(item.width) ? item.width : widthForSize(item.defaultSize);
+}
+function usesWidthColumns(items) {
+  return items.some((item) => item.width !== void 0);
+}
+function fillsWidth(fill) {
+  return fill === "width" || fill === "both";
+}
+function fillsHeight(fill) {
+  return fill === "height" || fill === "both";
+}
+function baseColumnSpan(size, columns, largeSpan = 2) {
+  if (size === "full") return columns;
+  if (size === "large") return Math.min(largeSpan, columns);
+  return 1;
+}
+function fillColumnSpans(items, columns, largeSpan = 2) {
+  return placeAndFill(
+    items,
+    columns,
+    (item, trackCount) => baseColumnSpan(item.defaultSize, trackCount, largeSpan)
+  );
+}
+function fillWidthSpans(items) {
+  return placeAndFill(items, WIDTH_COLUMNS, itemWidth);
+}
+function placeAndFill(items, columns, spanOf) {
+  const trackCount = Math.max(1, Math.floor(columns));
+  const spans = /* @__PURE__ */ new Map();
+  let row = [];
+  let used = 0;
+  function closeRow() {
+    const fillers = row.filter(({ item }) => fillsWidth(item.fill));
+    const leftover = trackCount - used;
+    if (fillers.length > 0) {
+      const share = Math.floor(leftover / fillers.length);
+      const remainder = leftover % fillers.length;
+      fillers.forEach(({ item, span }, index) => {
+        spans.set(item.key, span + share + (index < remainder ? 1 : 0));
+      });
+    }
+    row = [];
+    used = 0;
   }
-  const text = formatPercentChange(percent, options.locale);
-  const direction = text === "\xB10%" ? "flat" : percent > 0 ? "up" : "down";
-  const higherIsBetter = options.higherIsBetter ?? true;
-  const sentiment = direction === "flat" ? "neutral" : direction === "up" === higherIsBetter ? "good" : "bad";
-  return {
-    percent,
-    direction,
-    sentiment,
-    text,
-    description: `${text} vs ${options.comparisonLabel ?? DEFAULT_COMPARISON_LABEL}`
-  };
+  for (const item of items) {
+    const span = Math.min(spanOf(item, trackCount), trackCount);
+    if (used + span > trackCount && row.length > 0) closeRow();
+    row.push({ item, span });
+    used += span;
+  }
+  closeRow();
+  return spans;
 }
 
 // src/core/scale.ts
@@ -728,30 +1024,6 @@ function GraphWidget({
     }
   );
 }
-
-// src/core/url.ts
-var SCHEME_PATTERN = /^([a-z][a-z0-9+.-]*):/i;
-var IGNORED_IN_SCHEME = /[\u0000- \u007f]/g;
-function schemeOf(url) {
-  const match = SCHEME_PATTERN.exec(
-    url.replace(IGNORED_IN_SCHEME, "")
-  );
-  return match === null ? null : (match[1] ?? "").toLowerCase();
-}
-function isSafeHref(url) {
-  if (url.trim() === "") {
-    return false;
-  }
-  const scheme = schemeOf(url);
-  return scheme === null || scheme === "http" || scheme === "https" || scheme === "mailto";
-}
-function isSafeImageUrl(url) {
-  if (url.trim() === "") {
-    return false;
-  }
-  const scheme = schemeOf(url);
-  return scheme === null || scheme === "http" || scheme === "https";
-}
 function isNewTabTarget(target) {
   return target !== void 0 && target !== "" && target !== "_self";
 }
@@ -914,29 +1186,120 @@ function GaugeWidget({
   ] });
 }
 function TableWidget({
-  data
+  data,
+  controls
+}) {
+  if (controls === void 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "dwt-table-wrap", children: [
+      /* @__PURE__ */ jsx(TableView, { data }),
+      data.footer !== void 0 && /* @__PURE__ */ jsx("p", { className: "dwt-note", children: data.footer })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(InteractiveTable, { data, controls });
+}
+function TableView({
+  data,
+  rows = data.rows,
+  sort,
+  onSort
 }) {
   const slot = useSlotClassName();
-  return /* @__PURE__ */ jsxs("div", { className: "dwt-table-wrap", children: [
-    /* @__PURE__ */ jsxs("table", { className: slot("table", "dwt-table"), children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: data.columns.map((column, index) => /* @__PURE__ */ jsx(
+  const { labels } = useWidgetSettings();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("table", { className: slot("table", "dwt-table"), children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: data.columns.map((column, index) => {
+      const key = `c${index}`;
+      const sorted = sort?.column === key;
+      return /* @__PURE__ */ jsx(
         "th",
         {
           scope: "col",
           className: column.numeric === true ? "dwt-numeric" : void 0,
-          children: column.label
+          "aria-sort": sorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
+          children: onSort === void 0 ? column.label : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "dwt-detail-sort",
+              "aria-label": labels.sortBy(column.label),
+              onClick: () => onSort(key),
+              children: [
+                column.label,
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: !sorted ? " \u2195" : sort?.direction === "asc" ? " \u2191" : " \u2193" })
+              ]
+            }
+          )
         },
         index
-      )) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: data.rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(
-        "td",
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: data.columns[cellIndex]?.numeric === true ? "dwt-numeric" : void 0,
+        children: cell.href === void 0 ? cell.text : /* @__PURE__ */ jsx(WidgetLink, { href: cell.href, className: "dwt-link", children: cell.text })
+      },
+      cellIndex
+    )) }, rowIndex)) })
+  ] }) });
+}
+function nextTableSort(current, column) {
+  if (current?.column !== column) return { column, direction: "asc" };
+  return current.direction === "asc" ? { column, direction: "desc" } : void 0;
+}
+function InteractiveTable({
+  data,
+  controls
+}) {
+  const slot = useSlotClassName();
+  const { labels, locale } = useWidgetSettings();
+  const searchId = useId();
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState(void 0);
+  const localeTag = typeof locale === "string" ? locale : locale?.[0];
+  const query = {
+    page: 1,
+    pageSize: Math.max(1, data.rows.length),
+    ...controls.search && search !== "" ? { search } : {},
+    ...controls.sort && sort !== void 0 ? { sort } : {}
+  };
+  const result = queryRows(tableDetailData(data), query, localeTag);
+  const page = result.ok ? result.value : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "dwt-table-wrap", children: [
+    controls.search && /* @__PURE__ */ jsxs("div", { className: "dwt-table-search", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: searchId, className: "dwt-visually-hidden", children: labels.search }),
+      /* @__PURE__ */ jsx(
+        "input",
         {
-          className: data.columns[cellIndex]?.numeric === true ? "dwt-numeric" : void 0,
-          children: cell.href === void 0 ? cell.text : /* @__PURE__ */ jsx(WidgetLink, { href: cell.href, className: "dwt-link", children: cell.text })
-        },
-        cellIndex
-      )) }, rowIndex)) })
+          id: searchId,
+          type: "search",
+          placeholder: labels.search,
+          value: search,
+          onChange: (event) => setSearch(event.target.value)
+        }
+      )
     ] }),
+    result.ok ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "dwt-visually-hidden",
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: page !== void 0 && page.totalRows === 0 ? labels.noResults : page === void 0 ? "" : labels.showingRows(1, page.rows.length, page.totalRows)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TableView,
+        {
+          data,
+          rows: page?.rows ?? data.rows,
+          sort,
+          onSort: controls.sort ? (column) => setSort(nextTableSort(sort, column)) : void 0
+        }
+      ),
+      page !== void 0 && page.totalRows === 0 && /* @__PURE__ */ jsx("p", { className: "dwt-note", children: labels.noResults })
+    ] }) : /* @__PURE__ */ jsx("p", { role: "alert", className: slot("error", "dwt-error"), children: result.error }),
     data.footer !== void 0 && /* @__PURE__ */ jsx("p", { className: "dwt-note", children: data.footer })
   ] });
 }
@@ -992,7 +1355,8 @@ function AlertListWidget({
   ] });
 }
 function WidgetContent({
-  data
+  data,
+  tableControls
 }) {
   switch (data.kind) {
     case "TEXT":
@@ -1002,7 +1366,7 @@ function WidgetContent({
     case "GAUGE":
       return /* @__PURE__ */ jsx(GaugeWidget, { data });
     case "TABLE":
-      return /* @__PURE__ */ jsx(TableWidget, { data });
+      return /* @__PURE__ */ jsx(TableWidget, { data, controls: tableControls });
     case "BAR_LIST":
       return /* @__PURE__ */ jsx(BarListWidget, { data });
     case "ALERT_LIST":
@@ -1193,7 +1557,13 @@ function ResolvedWidgetCard({
       ...definition.fill === void 0 ? {} : { fill: definition.fill },
       ...widget.status === "empty" ? { emptyText: widget.emptyText } : {},
       ...widget.status === "error" ? { error: widget.error } : {},
-      children: widget.status === "ok" ? /* @__PURE__ */ jsx(WidgetContent, { data: widget.data }) : null
+      children: widget.status === "ok" ? /* @__PURE__ */ jsx(
+        WidgetContent,
+        {
+          data: widget.data,
+          tableControls: resolveTableControls(definition)
+        }
+      ) : null
     }
   );
 }
@@ -1207,342 +1577,82 @@ var EMPTY_LAYOUT = Object.freeze({
 function bySortOrder(items) {
   return items.map((item, index) => ({ item, index })).sort(
     (a, b) => (a.item.sortOrder ?? 0) - (b.item.sortOrder ?? 0) || a.index - b.index
-  ).map(({ item }) => item);
-}
-function visibleWidgets(definitions, layout) {
-  const hidden = new Set(layout.hidden);
-  const visible = definitions.filter((d) => !hidden.has(d.key));
-  const byKey = new Map(visible.map((d) => [d.key, d]));
-  const ordered = [];
-  for (const key of layout.order) {
-    const definition = byKey.get(key);
-    if (definition !== void 0) {
-      ordered.push(definition);
-      byKey.delete(key);
-    }
-  }
-  for (const definition of bySortOrder(visible)) {
-    if (byKey.has(definition.key)) ordered.push(definition);
-  }
-  return ordered;
-}
-function hiddenWidgets(definitions, layout) {
-  const hidden = new Set(layout.hidden);
-  return bySortOrder(definitions.filter((d) => hidden.has(d.key)));
-}
-function moveWidget(definitions, layout, key, toIndex) {
-  const current = visibleWidgets(definitions, layout).map(
-    (d) => d.key
-  );
-  const fromIndex = current.indexOf(key);
-  if (fromIndex === -1 || !Number.isInteger(toIndex) || toIndex < 0 || toIndex >= current.length || toIndex === fromIndex) {
-    return layout;
-  }
-  const next = [...current];
-  next.splice(fromIndex, 1);
-  next.splice(toIndex, 0, key);
-  return { ...layout, order: next };
-}
-function moveWidgetBy(definitions, layout, key, offset) {
-  const current = visibleWidgets(definitions, layout).map(
-    (d) => d.key
-  );
-  const fromIndex = current.indexOf(key);
-  if (fromIndex === -1) return layout;
-  const toIndex = Math.max(
-    0,
-    Math.min(current.length - 1, fromIndex + Math.trunc(offset))
-  );
-  return moveWidget(definitions, layout, key, toIndex);
-}
-function isHidden(layout, key) {
-  return layout.hidden.includes(key);
-}
-function isMinimized(layout, key) {
-  return layout.minimized.includes(key);
-}
-function hideWidget(layout, key) {
-  if (isHidden(layout, key)) return layout;
-  return { ...layout, hidden: [...layout.hidden, key] };
-}
-function showWidget(layout, key) {
-  if (!isHidden(layout, key)) return layout;
-  return {
-    ...layout,
-    hidden: layout.hidden.filter((k) => k !== key),
-    minimized: layout.minimized.filter((k) => k !== key)
-  };
-}
-function minimizeWidget(layout, key) {
-  if (isMinimized(layout, key)) return layout;
-  return { ...layout, minimized: [...layout.minimized, key] };
-}
-function restoreWidget(layout, key) {
-  if (!isMinimized(layout, key)) return layout;
-  return { ...layout, minimized: layout.minimized.filter((k) => k !== key) };
-}
-function toggleMinimized(layout, key) {
-  return isMinimized(layout, key) ? restoreWidget(layout, key) : minimizeWidget(layout, key);
-}
-
-// src/core/result.ts
-function ok(value) {
-  return { ok: true, value };
-}
-function err(error) {
-  return { ok: false, error };
-}
-function describeUnknownError(cause) {
-  if (cause instanceof Error) {
-    return cause.message === "" ? cause.name : cause.message;
-  }
-  if (typeof cause === "string") {
-    return cause;
-  }
-  try {
-    const json = JSON.stringify(cause);
-    return json ?? String(cause);
-  } catch {
-    return String(cause);
-  }
-}
-
-// src/core/detail.ts
-var DEFAULT_DETAIL_PAGE_SIZE = 25;
-function resolveDetailOptions(definition) {
-  const detail = definition.detail;
-  if (detail === void 0 || detail === false) return void 0;
-  const options = detail === true ? {} : detail;
-  return {
-    title: options.title ?? definition.title,
-    pageSize: options.pageSize ?? DEFAULT_DETAIL_PAGE_SIZE,
-    mode: options.mode ?? "client"
-  };
-}
-function defaultDetailQuery(pageSize = DEFAULT_DETAIL_PAGE_SIZE) {
-  return { page: 1, pageSize };
-}
-function fold(text) {
-  return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
-}
-function cellValue(cell) {
-  return cell.value ?? cell.text;
-}
-function cellMatches(cell, needle) {
-  return fold(String(cellValue(cell))).includes(needle);
-}
-function compareCells(a, b, collator) {
-  const left = cellValue(a);
-  const right = cellValue(b);
-  if (typeof left === "number" && typeof right === "number") {
-    return left - right;
-  }
-  if (typeof left === "number") return -1;
-  if (typeof right === "number") return 1;
-  return collator.compare(left, right);
+  ).map(({ item }) => item);
 }
-function queryRows(data, query, locale) {
-  const indexOf = new Map(
-    data.columns.map((column, index) => [column.key, index])
-  );
-  const filterEntries = [];
-  for (const [key, text] of Object.entries(query.filters ?? {})) {
-    const index = indexOf.get(key);
-    if (index === void 0) {
-      return err(
-        `Detail query: filter column "${key}" does not exist. Columns: ${listKeys(data)}.`
-      );
+function visibleWidgets(definitions, layout) {
+  const hidden = new Set(layout.hidden);
+  const visible = definitions.filter((d) => !hidden.has(d.key));
+  const byKey = new Map(visible.map((d) => [d.key, d]));
+  const ordered = [];
+  for (const key of layout.order) {
+    const definition = byKey.get(key);
+    if (definition !== void 0) {
+      ordered.push(definition);
+      byKey.delete(key);
     }
-    const needle = fold(text.trim());
-    if (needle !== "") filterEntries.push({ index, needle });
   }
-  let sortIndex = -1;
-  if (query.sort !== void 0) {
-    const found = indexOf.get(query.sort.column);
-    const column = found === void 0 ? void 0 : data.columns[found];
-    if (found === void 0 || column === void 0) {
-      return err(
-        `Detail query: sort column "${query.sort.column}" does not exist. Columns: ${listKeys(data)}.`
-      );
-    }
-    if (column.sortable === false) {
-      return err(
-        `Detail query: column "${column.key}" is not sortable (sortable: false).`
-      );
-    }
-    sortIndex = found;
+  for (const definition of bySortOrder(visible)) {
+    if (byKey.has(definition.key)) ordered.push(definition);
   }
-  const search = fold((query.search ?? "").trim());
-  let rows = data.rows.filter(
-    (row) => filterEntries.every(({ index, needle }) => {
-      const cell = row[index];
-      return cell !== void 0 && cellMatches(cell, needle);
-    }) && (search === "" || row.some((cell) => cellMatches(cell, search)))
+  return ordered;
+}
+function hiddenWidgets(definitions, layout) {
+  const hidden = new Set(layout.hidden);
+  return bySortOrder(definitions.filter((d) => hidden.has(d.key)));
+}
+function moveWidget(definitions, layout, key, toIndex) {
+  const current = visibleWidgets(definitions, layout).map(
+    (d) => d.key
   );
-  if (query.sort !== void 0 && sortIndex >= 0) {
-    const collator = new Intl.Collator(locale, {
-      numeric: true,
-      sensitivity: "base"
-    });
-    const sign = query.sort.direction === "desc" ? -1 : 1;
-    rows = rows.map((row, position) => ({ row, position })).sort((a, b) => {
-      const left = a.row[sortIndex];
-      const right = b.row[sortIndex];
-      const order = left === void 0 || right === void 0 ? 0 : sign * compareCells(left, right, collator);
-      return order || a.position - b.position;
-    }).map(({ row }) => row);
+  const fromIndex = current.indexOf(key);
+  if (fromIndex === -1 || !Number.isInteger(toIndex) || toIndex < 0 || toIndex >= current.length || toIndex === fromIndex) {
+    return layout;
   }
-  const pageSize = Math.max(1, Math.floor(query.pageSize));
-  const pageCount = Math.max(1, Math.ceil(rows.length / pageSize));
-  const page = Math.min(Math.max(1, Math.floor(query.page)), pageCount);
-  return ok({
-    rows: rows.slice((page - 1) * pageSize, page * pageSize),
-    totalRows: rows.length,
-    page,
-    pageCount
-  });
+  const next = [...current];
+  next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, key);
+  return { ...layout, order: next };
 }
-function listKeys(data) {
-  return data.columns.map((column) => `"${column.key}"`).join(", ");
+function moveWidgetBy(definitions, layout, key, offset) {
+  const current = visibleWidgets(definitions, layout).map(
+    (d) => d.key
+  );
+  const fromIndex = current.indexOf(key);
+  if (fromIndex === -1) return layout;
+  const toIndex = Math.max(
+    0,
+    Math.min(current.length - 1, fromIndex + Math.trunc(offset))
+  );
+  return moveWidget(definitions, layout, key, toIndex);
 }
-function describeType(value) {
-  if (value === null) return "null";
-  if (Array.isArray(value)) return "array";
-  return typeof value;
+function isHidden(layout, key) {
+  return layout.hidden.includes(key);
 }
-function validateDetailData(data, subject = "Detail data") {
-  const problems = [];
-  if (typeof data !== "object" || data === null || Array.isArray(data)) {
-    return err(`${subject}: must be an object, got ${describeType(data)}.`);
-  }
-  const record = data;
-  const columns = record["columns"];
-  const rows = record["rows"];
-  const keys = /* @__PURE__ */ new Set();
-  let columnCount = 0;
-  if (!Array.isArray(columns) || columns.length === 0) {
-    problems.push(
-      `columns must be a non-empty array, got ${describeType(columns)}.`
-    );
-  } else {
-    columnCount = columns.length;
-    columns.forEach((column, index) => {
-      const at = `columns[${index}]`;
-      if (typeof column !== "object" || column === null) {
-        problems.push(`${at} must be an object, got ${describeType(column)}.`);
-        return;
-      }
-      const fields = column;
-      const key = fields["key"];
-      if (typeof key !== "string" || key === "") {
-        problems.push(`${at}.key must be a non-empty string.`);
-      } else if (keys.has(key)) {
-        problems.push(`${at}.key "${key}" is used by an earlier column.`);
-      } else {
-        keys.add(key);
-      }
-      if (typeof fields["label"] !== "string") {
-        problems.push(
-          `${at}.label must be a string, got ${describeType(fields["label"])}.`
-        );
-      }
-      for (const flag of ["numeric", "sortable", "filterable"]) {
-        const flagValue = fields[flag];
-        if (flagValue !== void 0 && typeof flagValue !== "boolean") {
-          problems.push(
-            `${at}.${flag} must be a boolean, got ${describeType(flagValue)}.`
-          );
-        }
-      }
-    });
-  }
-  if (!Array.isArray(rows)) {
-    problems.push(`rows must be an array, got ${describeType(rows)}.`);
-  } else {
-    rows.forEach((row, rowIndex) => {
-      if (!Array.isArray(row)) {
-        problems.push(
-          `rows[${rowIndex}] must be an array of cells, got ${describeType(row)}.`
-        );
-        return;
-      }
-      if (columnCount > 0 && row.length !== columnCount) {
-        problems.push(
-          `rows[${rowIndex}] has ${row.length} cells but there are ${columnCount} columns.`
-        );
-      }
-      row.forEach((cell, cellIndex) => {
-        const at = `rows[${rowIndex}][${cellIndex}]`;
-        if (typeof cell !== "object" || cell === null) {
-          problems.push(`${at} must be an object, got ${describeType(cell)}.`);
-          return;
-        }
-        const fields = cell;
-        if (typeof fields["text"] !== "string") {
-          problems.push(
-            `${at}.text must be a string, got ${describeType(fields["text"])}.`
-          );
-        }
-        const value = fields["value"];
-        if (value !== void 0 && typeof value !== "string" && !(typeof value === "number" && Number.isFinite(value))) {
-          problems.push(
-            `${at}.value must be a string or a finite number, got ${describeType(value)}.`
-          );
-        }
-        const href = fields["href"];
-        if (href !== void 0) {
-          if (typeof href !== "string") {
-            problems.push(
-              `${at}.href must be a string, got ${describeType(href)}.`
-            );
-          } else if (!isSafeHref(href)) {
-            problems.push(
-              `${at}.href "${href}" is not allowed (only http, https, mailto and relative URLs).`
-            );
-          }
-        }
-      });
-    });
-  }
-  const totalRows = record["totalRows"];
-  if (totalRows !== void 0 && !(typeof totalRows === "number" && Number.isInteger(totalRows) && totalRows >= 0)) {
-    problems.push(
-      `totalRows must be a non-negative whole number, got ${describeType(totalRows)}.`
-    );
-  }
-  if (problems.length > 0) {
-    return err(`${subject}: ${problems.join(" ")}`);
-  }
-  return ok(data);
+function isMinimized(layout, key) {
+  return layout.minimized.includes(key);
 }
-function deriveDetailData(data, locale) {
-  if (data.kind === "TABLE") {
-    if (data.footer !== void 0) return void 0;
-    return {
-      columns: data.columns.map((column, index) => ({
-        key: `c${index}`,
-        label: column.label,
-        ...column.numeric === void 0 ? {} : { numeric: column.numeric }
-      })),
-      rows: data.rows
-    };
-  }
-  if (data.kind === "BAR_LIST") {
-    return {
-      columns: [
-        { key: "label", label: "Name" },
-        { key: "value", label: "Value", numeric: true }
-      ],
-      rows: data.items.map((item) => [
-        { text: item.label },
-        {
-          text: item.display ?? formatValue(item.value, "number", { locale }),
-          value: item.value
-        }
-      ])
-    };
-  }
-  return void 0;
+function hideWidget(layout, key) {
+  if (isHidden(layout, key)) return layout;
+  return { ...layout, hidden: [...layout.hidden, key] };
+}
+function showWidget(layout, key) {
+  if (!isHidden(layout, key)) return layout;
+  return {
+    ...layout,
+    hidden: layout.hidden.filter((k) => k !== key),
+    minimized: layout.minimized.filter((k) => k !== key)
+  };
+}
+function minimizeWidget(layout, key) {
+  if (isMinimized(layout, key)) return layout;
+  return { ...layout, minimized: [...layout.minimized, key] };
+}
+function restoreWidget(layout, key) {
+  if (!isMinimized(layout, key)) return layout;
+  return { ...layout, minimized: layout.minimized.filter((k) => k !== key) };
+}
+function toggleMinimized(layout, key) {
+  return isMinimized(layout, key) ? restoreWidget(layout, key) : minimizeWidget(layout, key);
 }
 function nextSort(current, column) {
   if (current?.column !== column) return { column, direction: "asc" };
@@ -1783,22 +1893,30 @@ function WidgetDetailDialog({
     }
   );
 }
-function useDetailData(definition, load, enabled) {
+function useDetailData(definition, load, enabled, fallback) {
   const [state, setState] = useState({ status: "loading" });
   const [attempt, setAttempt] = useState(0);
   useEffect(() => {
-    if (!enabled || load === void 0) return void 0;
+    if (!enabled) return void 0;
     const controller = new AbortController();
     setState({ status: "loading" });
     Promise.resolve().then(
-      () => load(definition, {
+      () => load === void 0 ? void 0 : load(definition, {
         signal: controller.signal,
         query: defaultDetailQuery()
       })
     ).then((raw) => {
       if (controller.signal.aborted) return;
+      const data = raw ?? fallback;
+      if (data === void 0) {
+        setState({
+          status: "error",
+          error: `Widget "${definition.key}" detail: no data. The loader returned nothing for this widget and its card does not hold the full data (use a loader that returns rows, or a TABLE without a footer or a BAR_LIST).`
+        });
+        return;
+      }
       const checked = validateDetailData(
-        raw,
+        data,
         `Widget "${definition.key}" detail`
       );
       setState(
@@ -1812,7 +1930,7 @@ function useDetailData(definition, load, enabled) {
       });
     });
     return () => controller.abort();
-  }, [enabled, load, definition, attempt]);
+  }, [enabled, load, fallback, definition, attempt]);
   return { state, reload: () => setAttempt((count) => count + 1) };
 }
 var NARROW_VIEWPORT_QUERY = "(max-width: 640px)";
@@ -1910,12 +2028,16 @@ function DetailHost({
   const options = resolveDetailOptions(definition);
   const pageSize = options?.pageSize ?? 25;
   const [query, setQuery] = useState(defaultDetailQuery(pageSize));
-  const derived = widget.status === "ok" ? deriveDetailData(widget.data, locale) : void 0;
-  const load = useMemo(
-    () => loadDetail ?? (derived === void 0 ? void 0 : () => derived),
-    [loadDetail, derived]
+  const derived = useMemo(
+    () => widget.status === "ok" ? deriveDetailData(widget.data, locale) : void 0,
+    [widget, locale]
+  );
+  const { state, reload } = useDetailData(
+    definition,
+    loadDetail,
+    true,
+    derived
   );
-  const { state, reload } = useDetailData(definition, load, true);
   const title = options?.title ?? definition.title;
   return /* @__PURE__ */ jsx(WidgetDetailDialog, { title, open: true, onClose, children: /* @__PURE__ */ jsx(
     WidgetDetail,
@@ -1923,10 +2045,7 @@ function DetailHost({
       title,
       query,
       onQueryChange: setQuery,
-      status: load === void 0 ? "error" : state.status,
-      ...load === void 0 ? {
-        error: `Widget "${definition.key}" has no detail data: pass loadDetail, or use a TABLE without a footer or a BAR_LIST.`
-      } : {},
+      status: state.status,
       ...state.data === void 0 ? {} : { data: state.data },
       ...state.error === void 0 ? {} : { error: state.error },
       onRetry: reload