@happyvertical/smrt-svelte 0.55.23 → 0.56.0

package/dist/components/overview/widgets/ChartWidget.svelte

@@ -1,272 +1,12 @@
 <script lang="ts">
-/**
- * Chart widget (#3727, #3888): bars, a line, a plain table, a donut or a single
- * headline value over labelled values, drawn from the loaded data. Every chart
- * carries its numbers as text (bar values inline, a visible table for `table`,
- * a visually hidden table for the line and the donut, the value itself for
- * `stat`) so it is readable without sight.
- */
-import { useI18n } from '@happyvertical/smrt-ui/i18n';
-import { M } from '../../../i18n/strings.overview.js';
-import { formatWidgetValue } from '../format.js';
+import { Chart } from '@happyvertical/smrt-ui/charts';
 import type { WidgetComponentProps } from '../types.js';
-import { type ChartWidgetData, isRecord } from './data.js';
+import type { ChartWidgetData } from './data.js';
 
 let { options, data, title, locale }: WidgetComponentProps<ChartWidgetData> =
   $props();
-
-const { t } = useI18n();
-const MAX_POINTS = 60;
-
-const chart = $derived(isRecord(data) ? data : null);
-const points = $derived.by(() => {
-  if (!chart || !Array.isArray(chart.points)) return [];
-  const out: { label: string; value: number }[] = [];
-  for (const point of chart.points.slice(0, MAX_POINTS)) {
-    if (
-      isRecord(point) &&
-      typeof point.label === 'string' &&
-      typeof point.value === 'number' &&
-      Number.isFinite(point.value)
-    ) {
-      out.push({ label: point.label, value: point.value });
-    }
-  }
-  return out;
-});
-const STYLES = ['bar', 'line', 'table', 'pie', 'stat'] as const;
-const style = $derived(
-  STYLES.find((candidate) => candidate === options.style) ?? 'bar',
-);
-const fmt = (value: number): string =>
-  formatWidgetValue(value, {
-    format: chart?.format ?? 'integer',
-    currency: chart?.currency,
-    locale,
-  });
-const max = $derived(Math.max(0, ...points.map((point) => point.value)));
-const min = $derived(Math.min(0, ...points.map((point) => point.value)));
-const span = $derived(max - min || 1);
-const polyline = $derived(
-  points
-    .map((point, index) => {
-      const x = points.length === 1 ? 50 : (index / (points.length - 1)) * 100;
-      const y = 36 - ((point.value - min) / span) * 32;
-      return `${x.toFixed(2)},${y.toFixed(2)}`;
-    })
-    .join(' '),
-);
-
-// Donut: slices are percentages of the positive total on a circle whose
-// path length is 100, so a segment's dash length is its share.
-const total = $derived(
-  points.reduce((sum, point) => sum + Math.max(0, point.value), 0),
-);
-const slices = $derived.by(() => {
-  let offset = 0;
-  return points.map((point, index) => {
-    const share = total > 0 ? (Math.max(0, point.value) / total) * 100 : 0;
-    const slice = { ...point, index, share, offset };
-    offset += share;
-    return slice;
-  });
-});
-const percent = (share: number): string =>
-  formatWidgetValue(share / 100, { format: 'percent', locale });
-
-// Stat: the latest value, and its change against the one before.
-const latest = $derived(points.at(-1));
-const delta = $derived.by((): number | null => {
-  if (
-    chart &&
-    typeof chart.delta === 'number' &&
-    Number.isFinite(chart.delta)
-  ) {
-    return chart.delta;
-  }
-  const previous = points.at(-2);
-  if (!latest || !previous || previous.value === 0) return null;
-  return ((latest.value - previous.value) / Math.abs(previous.value)) * 100;
-});
-const deltaText = $derived(
-  delta === null || delta === 0
-    ? ''
-    : t(
-        M[
-          delta > 0
-            ? 'ui.overview.metric.change_up'
-            : 'ui.overview.metric.change_down'
-        ],
-        {
-          value: formatWidgetValue(Math.abs(delta) / 100, {
-            format: 'percent',
-            locale,
-          }),
-        },
-      ),
-);
-const summary = $derived(
-  `${title}. ${t(M['ui.overview.chart.summary'], { count: points.length })}`,
-);
 </script>
 
-{#snippet dataTable(hidden: boolean)}
-  <table class={hidden ? 'smrt-chart__table' : 'smrt-chart__data'}>
-    <caption>{t(M['ui.overview.chart.table'])}</caption>
-    <thead>
-      <tr>
-        <th scope="col">{t(M['ui.overview.chart.label_column'])}</th>
-        <th scope="col">{t(M['ui.overview.chart.value_column'])}</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each points as point, index (index)}
-        <tr><th scope="row">{point.label}</th><td>{fmt(point.value)}</td></tr>
-      {/each}
-    </tbody>
-  </table>
-{/snippet}
-
-{#if points.length === 0}
-  <p class="smrt-chart__empty" data-smrt-component="ChartWidget">{t(M['ui.overview.no_data'])}</p>
-{:else if style === 'table'}
-  <div class="smrt-chart smrt-chart--table" data-smrt-component="ChartWidget">
-    {@render dataTable(false)}
-  </div>
-{:else if style === 'stat'}
-  {#if latest}
-    <div class="smrt-chart smrt-chart--stat" data-smrt-component="ChartWidget">
-      <p class="smrt-chart__headline">{fmt(latest.value)}</p>
-      <p class="smrt-chart__caption">{latest.label}</p>
-      {#if deltaText}
-        <p class="smrt-chart__delta" data-direction={(delta ?? 0) > 0 ? 'up' : 'down'}>
-          <span aria-hidden="true">{(delta ?? 0) > 0 ? '▲' : '▼'}</span>
-          {deltaText}
-        </p>
-      {/if}
-    </div>
-  {/if}
-{:else if style === 'pie'}
-  {#if total > 0}
-    <div class="smrt-chart smrt-chart--pie" data-smrt-component="ChartWidget">
-      <svg class="smrt-chart__donut" viewBox="0 0 42 42" role="img" aria-label={summary}>
-        {#each slices as slice (slice.index)}
-          {#if slice.share > 0}
-            <circle
-              class="smrt-chart__slice"
-              data-slot={slice.index % 8}
-              cx="21"
-              cy="21"
-              r="15.9155"
-              fill="none"
-              stroke-width="6"
-              pathLength="100"
-              stroke-dasharray="{slice.share} {100 - slice.share}"
-              stroke-dashoffset={-slice.offset}
-              transform="rotate(-90 21 21)"
-            />
-          {/if}
-        {/each}
-      </svg>
-      <ul class="smrt-chart__legend" aria-hidden="true">
-        {#each slices as slice (slice.index)}
-          <li class="smrt-chart__legend-item">
-            <span class="smrt-chart__swatch" data-slot={slice.index % 8}></span>
-            <span class="smrt-chart__label">{slice.label}</span>
-            <span class="smrt-chart__value">{fmt(slice.value)} · {percent(slice.share)}</span>
-          </li>
-        {/each}
-      </ul>
-      {@render dataTable(true)}
-    </div>
-  {:else}
-    <p class="smrt-chart__empty" data-smrt-component="ChartWidget">{t(M['ui.overview.no_data'])}</p>
-  {/if}
-{:else if style === 'line'}
-  <div class="smrt-chart" data-smrt-component="ChartWidget">
-    <svg class="smrt-chart__line" viewBox="0 0 100 40" preserveAspectRatio="none" role="img" aria-label={summary}>
-      <polyline points={polyline} fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" />
-    </svg>
-    <p class="smrt-chart__axis" aria-hidden="true">
-      <span>{points[0].label}</span>
-      <span>{points[points.length - 1].label}</span>
-    </p>
-    {@render dataTable(true)}
-  </div>
-{:else}
-  <ul class="smrt-chart__bars" aria-label={summary} data-smrt-component="ChartWidget">
-    {#each points as point, index (index)}
-      <li class="smrt-chart__row">
-        <span class="smrt-chart__label">{point.label}</span>
-        <span class="smrt-chart__track" aria-hidden="true">
-          <span class="smrt-chart__bar" style:inline-size="{max > 0 ? (Math.max(0, point.value) / max) * 100 : 0}%"></span>
-        </span>
-        <span class="smrt-chart__value">{fmt(point.value)}</span>
-      </li>
-    {/each}
-  </ul>
-{/if}
-
-<style>
-@layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
-  .smrt-chart { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-primary); }
-  .smrt-chart__line { inline-size: 100%; block-size: 7rem; overflow: visible; }
-  .smrt-chart__axis { display: flex; justify-content: space-between; margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.75rem); }
-  .smrt-chart__bars { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
-  .smrt-chart__row { display: grid; grid-template-columns: minmax(4rem, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-2); font-size: var(--smrt-typography-body-medium-size, 0.875rem); color: var(--smrt-color-on-surface); }
-  .smrt-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .smrt-chart__track { display: block; block-size: 0.625rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); overflow: hidden; }
-  .smrt-chart__bar { display: block; block-size: 100%; border-radius: inherit; background: var(--smrt-color-primary); }
-  .smrt-chart__value { font-variant-numeric: tabular-nums; color: var(--smrt-color-on-surface-variant); }
-  .smrt-chart__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
-  .smrt-chart--table { color: var(--smrt-color-on-surface); }
-  .smrt-chart__data { inline-size: 100%; border-collapse: collapse; font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
-  .smrt-chart__data caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
-  .smrt-chart__data th, .smrt-chart__data td { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-block-end: var(--smrt-hairline); text-align: start; }
-  .smrt-chart__data thead th { background: var(--smrt-surface-sunken); color: var(--smrt-color-on-surface-variant); font-weight: var(--smrt-typography-weight-medium, 500); }
-  .smrt-chart__data tbody th { font-weight: inherit; overflow-wrap: anywhere; }
-  .smrt-chart__data td, .smrt-chart__data thead th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
-  .smrt-chart--stat { gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }
-  .smrt-chart__headline { margin: 0; font-size: var(--smrt-typography-display-small-size, 2rem); font-weight: var(--smrt-typography-weight-medium, 500); line-height: 1.1; font-variant-numeric: tabular-nums; }
-  .smrt-chart__caption { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
-  .smrt-chart__delta { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.875rem); }
-  .smrt-chart--pie { grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); align-items: center; gap: var(--smrt-spacing-4); }
-  .smrt-chart__donut { inline-size: 100%; block-size: auto; }
-  .smrt-chart__slice[data-slot='0'], .smrt-chart__swatch[data-slot='0'] { stroke: var(--smrt-color-primary); background: var(--smrt-color-primary); }
-  .smrt-chart__slice[data-slot='1'], .smrt-chart__swatch[data-slot='1'] { stroke: var(--smrt-color-secondary); background: var(--smrt-color-secondary); }
-  .smrt-chart__slice[data-slot='2'], .smrt-chart__swatch[data-slot='2'] { stroke: var(--smrt-color-tertiary); background: var(--smrt-color-tertiary); }
-  .smrt-chart__slice[data-slot='3'], .smrt-chart__swatch[data-slot='3'] { stroke: var(--smrt-color-info); background: var(--smrt-color-info); }
-  .smrt-chart__slice[data-slot='4'], .smrt-chart__swatch[data-slot='4'] { stroke: var(--smrt-color-primary-container); background: var(--smrt-color-primary-container); }
-  .smrt-chart__slice[data-slot='5'], .smrt-chart__swatch[data-slot='5'] { stroke: var(--smrt-color-secondary-container); background: var(--smrt-color-secondary-container); }
-  .smrt-chart__slice[data-slot='6'], .smrt-chart__swatch[data-slot='6'] { stroke: var(--smrt-color-tertiary-container); background: var(--smrt-color-tertiary-container); }
-  .smrt-chart__slice[data-slot='7'], .smrt-chart__swatch[data-slot='7'] { stroke: var(--smrt-color-info-container); background: var(--smrt-color-info-container); }
-  .smrt-chart__legend { display: grid; gap: var(--smrt-spacing-1); margin: 0; padding: 0; list-style: none; color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
-  .smrt-chart__legend-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-2); }
-  .smrt-chart__swatch { inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--smrt-radius-small); }
-  .smrt-chart__legend .smrt-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  @media (prefers-reduced-motion: no-preference) {
-    .smrt-chart__slice { transition: stroke-dasharray var(--smrt-duration-normal) var(--smrt-easing-standard), stroke-dashoffset var(--smrt-duration-normal) var(--smrt-easing-standard); }
-    .smrt-chart__bar { transition: inline-size var(--smrt-duration-normal) var(--smrt-easing-standard); }
-  }
-  .smrt-chart__table { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
-  /* Forced colors (#3908): selected and open states keep a non-colour indicator. */
-  @media (forced-colors: active) {
-    /* Series keys: system colours cycle by slot (the user's own palette), so
-       slices and legend swatches stay distinguishable without author colours.
-       The legend always carries label, value and share as text. */
-    .smrt-chart__slice[data-slot='0'], .smrt-chart__swatch[data-slot='0'] { stroke: CanvasText; background: CanvasText; }
-    .smrt-chart__slice[data-slot='1'], .smrt-chart__swatch[data-slot='1'] { stroke: Highlight; background: Highlight; }
-    .smrt-chart__slice[data-slot='2'], .smrt-chart__swatch[data-slot='2'] { stroke: LinkText; background: LinkText; }
-    .smrt-chart__slice[data-slot='3'], .smrt-chart__swatch[data-slot='3'] { stroke: VisitedText; background: VisitedText; }
-    .smrt-chart__slice[data-slot='4'], .smrt-chart__swatch[data-slot='4'] { stroke: ActiveText; background: ActiveText; }
-    .smrt-chart__slice[data-slot='5'], .smrt-chart__swatch[data-slot='5'] { stroke: GrayText; background: GrayText; }
-    .smrt-chart__slice[data-slot='6'], .smrt-chart__swatch[data-slot='6'] { stroke: ButtonText; background: ButtonText; }
-    .smrt-chart__slice[data-slot='7'], .smrt-chart__swatch[data-slot='7'] { stroke: MarkText; background: MarkText; }
-    .smrt-chart__swatch { border: var(--smrt-hairline-strong); }
-    .smrt-chart__slice { stroke-linecap: butt; }
-    .smrt-chart__track { background: Canvas; border: var(--smrt-hairline-strong); }
-    .smrt-chart__bar { background: Highlight; }
-  }
-}
-</style>
+<div data-smrt-component="ChartWidget">
+  <Chart data={data ?? null} style={String(options.style ?? 'bar')} {title} {locale} />
+</div>

package/dist/components/overview/widgets/ChartWidget.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { WidgetComponentProps } from '../types.js';
-import { type ChartWidgetData } from './data.js';
+import type { ChartWidgetData } from './data.js';
 declare const ChartWidget: import("svelte").Component<WidgetComponentProps<ChartWidgetData>, {}, "">;
 type ChartWidget = ReturnType<typeof ChartWidget>;
 export default ChartWidget;

package/dist/components/overview/widgets/ChartWidget.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/ChartWidget.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,WAAW,CAAC;AAqM3D,QAAA,MAAM,WAAW,2EAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ChartWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/ChartWidget.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAiBjD,QAAA,MAAM,WAAW,2EAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/overview/widgets/LineItemsWidget.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+/**
+ * Line items widget (#3718 record page): a document's lines as a table
+ * (item, quantity, unit price, amount) with a footer, then the totals block
+ * aligned under the amounts: subtotal, discount and tax when present, total.
+ * The record's own figures are shown as they are; a missing one is computed
+ * from the lines and says so; when the record and the lines disagree, a
+ * visible flag says what the lines add up to (`lineItemTotals`).
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../../i18n/strings.overview.js';
+import { safeHref } from '../markdown.js';
+import type { WidgetComponentProps } from '../types.js';
+import { isRecord, type LineItemsWidgetData } from './data.js';
+import { lineItemTotals, sumLineAmounts } from './line-totals.js';
+import RecordTable from './RecordTable.svelte';
+import {
+  formatRecordCell,
+  readRecordRows,
+  resolveRecordColumns,
+} from './record-table.js';
+
+let { data, locale, title }: WidgetComponentProps<LineItemsWidgetData> =
+  $props();
+
+const { t } = useI18n();
+
+const rows = $derived(readRecordRows(data));
+const columns = $derived(
+  resolveRecordColumns([], isRecord(data) ? data.columns : undefined),
+);
+const total = $derived(
+  isRecord(data) &&
+    typeof data.total === 'number' &&
+    Number.isFinite(data.total)
+    ? data.total
+    : rows.length,
+);
+const currency = $derived(
+  isRecord(data) && typeof data.currency === 'string'
+    ? data.currency
+    : undefined,
+);
+const summaryValues = $derived.by(() => {
+  if (!isRecord(data) || !isRecord(data.summaries)) return undefined;
+  const out: Record<string, number> = {};
+  for (const [key, value] of Object.entries(data.summaries)) {
+    if (typeof value === 'number' && Number.isFinite(value)) out[key] = value;
+  }
+  return out;
+});
+/** The line amount column: the last money column that is summed. */
+const amountKey = $derived(
+  [...columns]
+    .reverse()
+    .find((c) => c.role === 'money' && c.summarize !== false)?.key,
+);
+const lineSum = $derived.by((): number | null => {
+  if (!amountKey) return null;
+  const hosted = summaryValues?.[amountKey];
+  if (typeof hosted === 'number') return hosted;
+  if (total > rows.length) return null;
+  return sumLineAmounts(rows.map((row) => row.cells?.[amountKey]));
+});
+const result = $derived(
+  lineItemTotals(
+    isRecord(data) && isRecord(data.totals)
+      ? (data.totals as LineItemsWidgetData['totals'])
+      : undefined,
+    lineSum,
+  ),
+);
+const viewAll = $derived(
+  isRecord(data) && typeof data.href === 'string' ? safeHref(data.href) : null,
+);
+
+function money(value: number): string {
+  return formatRecordCell({ role: 'money' }, value, { currency, locale });
+}
+
+const LABELS = {
+  subtotal: M['ui.overview.line_items.subtotal'],
+  discount: M['ui.overview.line_items.discount'],
+  tax: M['ui.overview.line_items.tax'],
+  total: M['ui.overview.line_items.total'],
+} as const;
+</script>
+
+<div class="smrt-line-items" data-smrt-component="LineItemsWidget">
+  {#if rows.length > 0 && columns.length > 0}
+    <RecordTable
+      {rows}
+      {columns}
+      {locale}
+      label={title}
+      {currency}
+      summaries
+      {summaryValues}
+      {total}
+    />
+  {:else}
+    <p class="smrt-line-items__empty">{t(M['ui.overview.line_items.empty'])}</p>
+  {/if}
+  {#if result.lines.length > 0}
+    <dl class="smrt-line-items__totals">
+      {#each result.lines as line (line.key)}
+        <div class="smrt-line-items__total" class:smrt-line-items__total--grand={line.key === 'total'}>
+          <dt>
+            {t(LABELS[line.key])}
+            {#if line.computed}<span class="smrt-line-items__computed">{t(M['ui.overview.line_items.computed'])}</span>{/if}
+          </dt>
+          <dd>{line.key === 'discount' ? `−${money(line.value)}` : money(line.value)}</dd>
+        </div>
+      {/each}
+    </dl>
+  {/if}
+  {#if result.mismatch}
+    <p class="smrt-line-items__flag">
+      <strong>{t(M['ui.overview.line_items.mismatch'], { amount: money(result.mismatch.lines) })}</strong>
+      {t(M[result.mismatch.field === 'subtotal' ? 'ui.overview.line_items.mismatch_subtotal' : 'ui.overview.line_items.mismatch_total'], { amount: money(result.mismatch.recorded) })}
+    </p>
+  {/if}
+  {#if viewAll}
+    <p class="smrt-line-items__foot"><a href={viewAll}>{t(M['ui.overview.records.view_all'])}</a></p>
+  {/if}
+</div>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .smrt-line-items { display: grid; gap: var(--smrt-spacing-3); min-inline-size: 0; }
+  .smrt-line-items__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+  .smrt-line-items__totals { display: grid; justify-self: end; gap: var(--smrt-spacing-1); min-inline-size: min(100%, 18rem); margin: 0; font-variant-numeric: tabular-nums; }
+  .smrt-line-items__total { display: flex; justify-content: space-between; gap: var(--smrt-spacing-4); }
+  .smrt-line-items__total dt { color: var(--smrt-color-on-surface-variant); }
+  .smrt-line-items__total dd { margin: 0; text-align: end; }
+  .smrt-line-items__total--grand { padding-block-start: var(--smrt-spacing-2); border-block-start: var(--smrt-hairline); font-weight: var(--smrt-typography-weight-semibold); }
+  .smrt-line-items__total--grand dt { color: var(--smrt-color-on-surface); }
+  .smrt-line-items__computed { margin-inline-start: var(--smrt-spacing-1); font-size: var(--smrt-typography-body-small-size, 0.75rem); }
+  .smrt-line-items__flag { margin: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border-inline-start: var(--smrt-spacing-1) solid var(--smrt-color-warning); border-radius: var(--smrt-radius-sm); background: var(--smrt-color-warning-container); color: var(--smrt-color-on-warning-container); }
+  .smrt-line-items__foot { display: flex; justify-content: flex-end; margin: 0; }
+  .smrt-line-items__foot a { color: var(--smrt-color-primary); }
+}
+</style>

package/dist/components/overview/widgets/LineItemsWidget.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetComponentProps } from '../types.js';
+import { type LineItemsWidgetData } from './data.js';
+declare const LineItemsWidget: import("svelte").Component<WidgetComponentProps<LineItemsWidgetData>, {}, "">;
+type LineItemsWidget = ReturnType<typeof LineItemsWidget>;
+export default LineItemsWidget;
+//# sourceMappingURL=LineItemsWidget.svelte.d.ts.map

package/dist/components/overview/widgets/LineItemsWidget.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineItemsWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/LineItemsWidget.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAwH/D,QAAA,MAAM,eAAe,+EAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/overview/widgets/RecordListWidget.svelte

@@ -3,14 +3,32 @@
  * Record list widget (#3727): the rows a loader chose, each optionally a
  * link. The loader owns which field is the title and which records the viewer
  * may see; the widget only draws what it is given.
+ *
+ * With columns (the `columns` option, else the data's `columns`) the rows
+ * render as a compact table of their `cells` (`RecordTable`): identifier,
+ * status badge, date and amount by role, with a totals footer (on by
+ * default when a money or quantity column exists; the `summaries` option
+ * overrides). Without columns, the title list.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../../i18n/strings.overview.js';
 import { safeHref } from '../markdown.js';
 import type { WidgetComponentProps } from '../types.js';
 import { isRecord, type RecordListWidgetData } from './data.js';
+import RecordTable from './RecordTable.svelte';
+import {
+  isSummedColumn,
+  parseColumnsOption,
+  readRecordRows,
+  resolveRecordColumns,
+} from './record-table.js';
 
-let { data, locale }: WidgetComponentProps<RecordListWidgetData> = $props();
+let {
+  data,
+  locale,
+  options,
+  title,
+}: WidgetComponentProps<RecordListWidgetData> = $props();
 
 const { t } = useI18n();
 const MAX_ROWS = 50;
@@ -46,9 +64,54 @@ const total = $derived(
 const viewAll = $derived(
   isRecord(data) && typeof data.href === 'string' ? safeHref(data.href) : null,
 );
+
+const columns = $derived(
+  resolveRecordColumns(
+    parseColumnsOption(options?.columns),
+    isRecord(data) ? data.columns : undefined,
+  ),
+);
+const tableRows = $derived(readRecordRows(data));
+const showSummaries = $derived(
+  typeof options?.summaries === 'boolean'
+    ? options.summaries
+    : columns.some((c) => isSummedColumn(c)),
+);
+const dataTotal = $derived(
+  isRecord(data) &&
+    typeof data.total === 'number' &&
+    Number.isFinite(data.total)
+    ? data.total
+    : null,
+);
+const summaryValues = $derived.by(() => {
+  if (!isRecord(data) || !isRecord(data.summaries)) return undefined;
+  const out: Record<string, number> = {};
+  for (const [key, value] of Object.entries(data.summaries)) {
+    if (typeof value === 'number' && Number.isFinite(value)) out[key] = value;
+  }
+  return out;
+});
 </script>
 
-{#if rows.length === 0}
+{#if columns.length > 0 && tableRows.length > 0}
+  <RecordTable
+    rows={tableRows}
+    {columns}
+    {locale}
+    label={title}
+    currency={isRecord(data) && typeof data.currency === 'string' ? data.currency : undefined}
+    timeZone={isRecord(data) && typeof data.timeZone === 'string' ? data.timeZone : undefined}
+    summaries={showSummaries}
+    {summaryValues}
+    total={dataTotal}
+  />
+  {#if viewAll}
+    <p class="smrt-records__foot smrt-records__foot--end" data-smrt-component="RecordListWidget">
+      <a href={viewAll}>{t(M['ui.overview.records.view_all'])}</a>
+    </p>
+  {/if}
+{:else if rows.length === 0}
   <p class="smrt-records__empty" data-smrt-component="RecordListWidget">{t(M['ui.overview.records.empty'])}</p>
 {:else}
   <ul class="smrt-records" data-smrt-component="RecordListWidget">
@@ -67,7 +130,7 @@ const viewAll = $derived(
     {/each}
   </ul>
 {/if}
-{#if total !== null || viewAll}
+{#if columns.length === 0 && (total !== null || viewAll)}
   <p class="smrt-records__foot" data-smrt-component="RecordListWidget">
     {#if total !== null}
       <span>{t(M['ui.overview.records.total'], { count: new Intl.NumberFormat(locale).format(total) })}</span>
@@ -88,6 +151,7 @@ const viewAll = $derived(
   .smrt-records__sub, .smrt-records__meta { color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-records__meta { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
   .smrt-records__foot { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); margin: var(--smrt-spacing-2) 0 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
+  .smrt-records__foot--end { justify-content: flex-end; }
   .smrt-records__foot a { color: var(--smrt-color-primary); }
   .smrt-records__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
 }

package/dist/components/overview/widgets/RecordListWidget.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordListWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/RecordListWidget.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAgFhE,QAAA,MAAM,gBAAgB,gFAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"RecordListWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/RecordListWidget.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAiIhE,QAAA,MAAM,gBAAgB,gFAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}