@happyvertical/smrt-reports 0.57.6 → 0.57.7

package/dist/svelte/ReportPicker.svelte.d.ts

@@ -1,9 +1,12 @@
+import { type ReportSourceInfo } from './describe.js';
 import type { RuntimeReportsClient } from './types.js';
 export interface Props {
     client?: RuntimeReportsClient;
     reportId?: string;
     measure?: string;
     dimension?: string;
+    /** The report sources by label and fields, for measure and grouping names. */
+    sources?: readonly ReportSourceInfo[];
     onchange: (value: {
         reportId: string;
         measure: string;

package/dist/svelte/ReportPicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportPicker.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,oBAAoB,EAAsB,MAAM,YAAY,CAAC;AAG3E,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;CACZ;AAkED,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ReportPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportPicker.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,KAAK,EAAE,oBAAoB,EAAsB,MAAM,YAAY,CAAC;AAG3E,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;CACZ;AA2FD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/ReportResult.svelte

@@ -1,69 +1,250 @@
 <script lang="ts">
-import { Chart } from '@happyvertical/smrt-ui/charts';
+/**
+ * A report's result: one measure charted at a time (a measure switch when
+ * there are several), or the whole result as a table with formatted columns
+ * (money, "Jan 2025" buckets). `full` is a report's page: a Chart/Table
+ * switch, headline figures for the shown measure (total, average, peak) and a
+ * tall chart with a value axis. `compact` is the assistant's preview card: a
+ * quiet table toggle and a regular chart.
+ */
+import {
+  Chart,
+  formatTimeBucket,
+  type TimeBucketUnit,
+} from '@happyvertical/smrt-ui/charts';
+import { SegmentedControl, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
+import {
+  measureColumns,
+  measureFormat,
+  reportFigures,
+  timeAxis,
+} from './describe.js';
 import { M } from './messages.js';
 import { reportCell, validReportResult } from './result.js';
-import type { RuntimeReportResult } from './types.js';
+import type { RuntimeReportResult, RuntimeReportSpec } from './types.js';
+
+type Column = RuntimeReportResult['columns'][number];
 
 export interface Props {
   result: RuntimeReportResult;
+  /** `compact` (default) for a preview card, `full` for a report's page. */
+  variant?: 'compact' | 'full';
+  /** The report's spec, so figures know which measures add up. */
+  spec?: RuntimeReportSpec;
+  /** Chart or table, bindable so the page's actions can follow it. */
+  view?: 'chart' | 'table';
   locale?: string;
   currency?: string;
 }
-let { result, locale = 'en', currency = 'USD' }: Props = $props();
+let {
+  result,
+  variant = 'compact',
+  spec,
+  view = $bindable('chart'),
+  locale = 'en',
+  currency = 'USD',
+}: Props = $props();
 const { t } = useI18n();
-let table = $state(false);
 const valid = $derived(validReportResult(result));
-const measures = $derived(
+const measures = $derived(valid ? measureColumns(result) : []);
+let picked = $state<string | null>(null);
+const measure = $derived(measures.find((c) => c.id === picked) ?? measures[0]);
+const xColumn = $derived(
   valid
-    ? result.columns.filter((c) =>
-        (
-          result.chart.y ??
-          result.columns.filter((c) => c.role === 'measure').map((c) => c.id)
-        ).includes(c.id),
-      )
-    : [],
+    ? result.chart.x
+      ? result.columns.find((c) => c.id === result.chart.x)
+      : result.columns.find((c) => c.role === 'dimension')
+    : undefined,
 );
-function cell(value: unknown, column: RuntimeReportResult['columns'][number]) {
+const axis = $derived(valid ? timeAxis(result) : undefined);
+const tableOnly = $derived(valid && result.chart.type === 'table');
+const showTable = $derived(tableOnly || view === 'table');
+
+/** A time bucket reads by its granularity ("Jan 2025"), never as an ISO instant. */
+function bucketLabel(value: unknown, column: Column | undefined) {
+  if (typeof value === 'string' && column?.bucket) {
+    return formatTimeBucket(value, column.bucket as TimeBucketUnit, locale);
+  }
+  return undefined;
+}
+function cell(value: unknown, column: Column) {
   return typeof value === 'boolean'
     ? t(M[value ? 'reports.yes' : 'reports.no'])
-    : reportCell(value, column, locale, currency);
+    : (bucketLabel(value, column) ??
+        reportCell(value, column, locale, currency));
 }
+const groupLabel = (row: RuntimeReportResult['rows'][number]) =>
+  xColumn ? cell(row[xColumn.id], xColumn) : (measure?.label ?? '');
+const figures = $derived(
+  variant === 'full' && valid && measure
+    ? reportFigures(result, measure, {
+        t,
+        locale,
+        currency,
+        groupLabel,
+        fn: spec?.measures.find((m) => m.as === measure.id)?.fn,
+      })
+    : [],
+);
+const chartData = $derived(
+  valid && measure
+    ? {
+        points: result.rows
+          .filter((row) => typeof row[measure.id] === 'number')
+          .map((row) => ({
+            label: groupLabel(row),
+            value: row[measure.id] as number,
+          })),
+        format: measureFormat(measure),
+        currency,
+      }
+    : null,
+);
+/** "Total amount by month", "Number of invoices by Status". */
+const seriesLabel = $derived(
+  measure
+    ? axis?.bucket
+      ? t(M['reports.dimension_bucket'], {
+          field: measure.label,
+          bucket: t(`reports.bucket_unit.${axis.bucket}`),
+        })
+      : xColumn
+        ? t(M['reports.dimension_bucket'], {
+            field: measure.label,
+            bucket: xColumn.label.toLowerCase(),
+          })
+        : measure.label
+    : '',
+);
+const numeric = (column: Column) =>
+  column.type === 'integer' || column.type === 'decimal';
+const measureOptions = $derived(
+  measures.map((c) => ({ value: c.id, label: c.label })),
+);
 </script>
 
-<div data-smrt-component="ReportResult">
+<div class="report-result" data-smrt-component="ReportResult" data-variant={variant}>
   {#if !valid}
     <p role="alert">{t(M['reports.invalid'])}</p>
   {:else if result.rows.length === 0}
-    <p>{t(M['reports.no_rows'])}</p>
+    <p class="report-result__empty">{t(M['reports.no_rows'])}</p>
   {:else}
-    {#if result.chart.type !== 'table'}
-      <Button type="button" onclick={() => table = !table}>{t(M[table ? 'reports.chart' : 'reports.table'])}</Button>
+    {#if variant === 'full'}
+      <div class="report-result__controls">
+        {#if !tableOnly}
+          <SegmentedControl
+            label={t(M['reports.view'])}
+            options={[
+              { value: 'chart', label: t(M['reports.view_chart']) },
+              { value: 'table', label: t(M['reports.view_table']) },
+            ]}
+            value={view}
+            onvaluechange={(value) => (view = value === 'table' ? 'table' : 'chart')}
+          />
+        {/if}
+        {#if measures.length > 1 && !showTable}
+          {#if measures.length <= 3}
+            <SegmentedControl
+              label={t(M['reports.measure_pick'])}
+              options={measureOptions}
+              value={measure?.id}
+              onvaluechange={(value) => (picked = String(value))}
+            />
+          {:else}
+            <Select
+              aria-label={t(M['reports.measure_pick'])}
+              value={measure?.id}
+              onchange={(event) => (picked = event.currentTarget.value)}
+            >
+              {#each measureOptions as option (option.value)}<option value={option.value}>{option.label}</option>{/each}
+            </Select>
+          {/if}
+        {/if}
+      </div>
+      {#if figures.length > 0 && !showTable}
+        <dl class="report-result__figures" aria-label={t(M['reports.figures'])}>
+          {#each figures as figure (figure.label)}
+            <div class="report-result__figure">
+              <dt>{figure.label}{#if figure.detail}<span class="report-result__figure-detail">{' · '}{figure.detail}</span>{/if}</dt>
+              <dd><span class="report-result__figure-value">{figure.value}</span></dd>
+            </div>
+          {/each}
+        </dl>
+      {/if}
+    {:else if !tableOnly}
+      <div class="report-result__toggle">
+        <Button type="button" variant="ghost" size="sm" aria-pressed={view === 'table'} onclick={() => (view = view === 'table' ? 'chart' : 'table')}>{t(M[view === 'table' ? 'reports.chart' : 'reports.table'])}</Button>
+      </div>
     {/if}
-    {#if table || result.chart.type === 'table'}
-      <table>
-        <caption>{result.title}</caption>
-        <thead><tr>{#each result.columns as column (column.id)}<th scope="col">{column.label}</th>{/each}</tr></thead>
-        <tbody>{#each result.rows as row, i (i)}<tr>{#each result.columns as column (column.id)}<td>{cell(row[column.id], column)}</td>{/each}</tr>{/each}</tbody>
-      </table>
-    {:else}
-      {#each measures as column (column.id)}
-        <Chart title={column.label} style={result.chart.type} {locale} data={{
-          points: result.rows.filter(row => typeof row[column.id] === 'number').map(row => ({ label: result.chart.x ? String(row[result.chart.x] ?? '–') : column.label, value: row[column.id] as number })),
-          format: column.format === 'money' ? 'money' : column.type === 'integer' ? 'integer' : 'decimal', currency,
-        }} />
-      {/each}
+    {#if showTable}
+      <div class="report-result__table">
+        <table>
+          <caption>{result.title}</caption>
+          <thead>
+            <tr>
+              {#each result.columns as column (column.id)}
+                <th scope="col" class:report-result__num={numeric(column)}>{column.label}</th>
+              {/each}
+            </tr>
+          </thead>
+          <tbody>
+            {#each result.rows as row, i (i)}
+              <tr>
+                {#each result.columns as column (column.id)}
+                  <td class:report-result__num={numeric(column)}>{cell(row[column.id], column)}</td>
+                {/each}
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {:else if measure && chartData}
+      {#if variant === 'full' || measures.length > 1}
+        <p class="report-result__series">{seriesLabel}</p>
+      {/if}
+      <Chart
+        title={measure.label}
+        style={result.chart.type}
+        size={variant === 'full' ? 'tall' : 'regular'}
+        valueAxis={variant === 'full'}
+        readout={variant !== 'full'}
+        {locale}
+        data={chartData}
+      />
+      {#if variant === 'compact' && measures.length > 1}
+        <p class="report-result__more">
+          {measures.slice(1).map((c) => c.label).join(', ')} · {t(M['reports.table']).toLowerCase()}
+        </p>
+      {/if}
     {/if}
-    {#if result.truncated}<p>{t(M['reports.truncated'])}</p>{/if}
+    {#if result.truncated}<p class="report-result__empty">{t(M['reports.truncated'])}</p>{/if}
   {/if}
 </div>
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  [data-smrt-component='ReportResult'] { display: grid; gap: var(--smrt-spacing-3); overflow: auto; }
-  table { border-collapse: collapse; inline-size: 100%; }
-  th, td { padding: var(--smrt-spacing-2); border-block-end: var(--smrt-hairline); text-align: start; font-variant-numeric: tabular-nums; }
+  .report-result { display: grid; gap: var(--smrt-spacing-3); inline-size: 100%; min-inline-size: 0; }
+  .report-result[data-variant='full'] { gap: var(--smrt-spacing-4); }
+  .report-result__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-2) var(--smrt-spacing-4); }
+  .report-result__toggle { display: flex; justify-content: flex-end; }
+  .report-result__empty, .report-result__more { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+  .report-result__series { margin: 0; color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-large-font); }
+  .report-result__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--smrt-spacing-3); margin: 0; }
+  .report-result__figure { display: grid; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: var(--smrt-hairline); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface-container-low); }
+  .report-result__figure dt { color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-medium-size); }
+  .report-result__figure dd { display: grid; margin: 0; }
+  .report-result__figure-value { font: var(--smrt-typography-headline-small-font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+  .report-result__figure-detail { color: var(--smrt-color-on-surface-variant); }
+  .report-result__table { overflow-x: auto; border: var(--smrt-hairline); border-radius: var(--smrt-radius-medium); }
+  table { border-collapse: collapse; inline-size: 100%; font-size: var(--smrt-typography-body-small-size); }
+  caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  th, td { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border-block-end: var(--smrt-hairline); text-align: start; white-space: nowrap; }
+  thead th { background: var(--smrt-surface-sunken); color: var(--smrt-color-on-surface-variant); font-weight: var(--smrt-typography-label-large-weight); }
+  tbody tr:last-child td { border-block-end: none; }
+  .report-result__num { text-align: end; font-variant-numeric: tabular-nums; }
+  .report-result[data-variant='compact'] th, .report-result[data-variant='compact'] td { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); }
 }
 </style>

package/dist/svelte/ReportResult.svelte.d.ts

@@ -1,10 +1,16 @@
-import type { RuntimeReportResult } from './types.js';
+import type { RuntimeReportResult, RuntimeReportSpec } from './types.js';
 export interface Props {
     result: RuntimeReportResult;
+    /** `compact` (default) for a preview card, `full` for a report's page. */
+    variant?: 'compact' | 'full';
+    /** The report's spec, so figures know which measures add up. */
+    spec?: RuntimeReportSpec;
+    /** Chart or table, bindable so the page's actions can follow it. */
+    view?: 'chart' | 'table';
     locale?: string;
     currency?: string;
 }
-declare const ReportResult: import("svelte").Component<Props, {}, "">;
+declare const ReportResult: import("svelte").Component<Props, {}, "view">;
 type ReportResult = ReturnType<typeof ReportResult>;
 export default ReportResult;
 //# sourceMappingURL=ReportResult.svelte.d.ts.map

package/dist/svelte/ReportResult.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportResult.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportResult.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6DD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ReportResult.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportResult.svelte.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAKzE,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,gEAAgE;IAChE,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoLD,QAAA,MAAM,YAAY,+CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/RuntimeReportWidgetOptions.svelte

@@ -42,7 +42,7 @@ function save() {
 }
 </script>
 
-<div data-smrt-component="RuntimeReportWidgetOptions">
+<div class="report-widget-options" data-smrt-component="RuntimeReportWidgetOptions">
   <ReportPicker
     {client}
     reportId={value.reportId}
@@ -56,3 +56,11 @@ function save() {
     <Button type="button" variant="primary" onclick={save}>{t(M['reports.save'])}</Button>
   </FormActionBar>
 </div>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .report-widget-options { display: grid; gap: var(--smrt-spacing-4); }
+  .report-widget-options > p { margin: 0; color: var(--smrt-color-error); }
+}
+</style>

package/dist/svelte/RuntimeReportWidgetOptions.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeReportWidgetOptions.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/RuntimeReportWidgetOptions.svelte.ts"],"names":[],"mappings":"AAaA,KAAK,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;AAChE,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAgDD,QAAA,MAAM,0BAA0B,2CAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"RuntimeReportWidgetOptions.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/RuntimeReportWidgetOptions.svelte.ts"],"names":[],"mappings":"AAaA,KAAK,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;AAChE,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAkDD,QAAA,MAAM,0BAA0B,2CAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/svelte/SavedReportCard.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+/**
+ * One saved report as a card: its title (the whole card opens it), a line
+ * saying what it covers, a headline figure from its latest run with a
+ * sparkline over time, and when it was saved and run. The same card is the
+ * Saved reports page's and the Reports section page's.
+ */
+
+import type { MenuItem } from '@happyvertical/smrt-ui';
+import {
+  Chart,
+  formatTimeBucket,
+  type TimeBucketUnit,
+} from '@happyvertical/smrt-ui/charts';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Badge, Menu, Skeleton } from '@happyvertical/smrt-ui/ui';
+import {
+  describeReport,
+  measureColumns,
+  measureFormat,
+  type ReportSourceInfo,
+  relativeTime,
+  reportFigures,
+  timeAxis,
+} from './describe.js';
+import { M } from './messages.js';
+import { reportCell } from './result.js';
+import type { RuntimeReportResult, SavedRuntimeReport } from './types.js';
+
+export interface Props {
+  report: SavedRuntimeReport;
+  /** The report's page. */
+  href: string;
+  /** Its latest run; `undefined` while it runs, `null` when it could not run. */
+  result?: RuntimeReportResult | null;
+  /** The report's source by label and fields, for its description line. */
+  source?: ReportSourceInfo;
+  /** The secondary actions (Archive, Restore) of its "more" menu. */
+  actions?: MenuItem[];
+  /** Who saved it, as the host names them ("You"). */
+  author?: string;
+  /** Heading level of the title, under the surrounding page's heading. */
+  headingLevel?: 2 | 3;
+  locale?: string;
+  currency?: string;
+}
+let {
+  report,
+  href,
+  result,
+  source,
+  actions = [],
+  author,
+  headingLevel = 2,
+  locale = 'en',
+  currency = 'USD',
+}: Props = $props();
+const { t } = useI18n();
+
+const description = $derived(
+  describeReport(report.spec, {
+    t,
+    locale,
+    currency,
+    source,
+    columns: result?.columns,
+  }),
+);
+const measure = $derived(result ? measureColumns(result)[0] : undefined);
+const axis = $derived(result ? timeAxis(result) : undefined);
+const groupLabel = (row: RuntimeReportResult['rows'][number]) => {
+  const x = axis ?? result?.columns.find((c) => c.role === 'dimension');
+  const value = x ? row[x.id] : undefined;
+  if (typeof value === 'string' && axis?.bucket) {
+    return formatTimeBucket(value, axis.bucket as TimeBucketUnit, locale);
+  }
+  return x ? reportCell(value, x, locale, currency) : '';
+};
+const fn = $derived(
+  measure
+    ? report.spec.measures.find((m) => m.as === measure.id)?.fn
+    : undefined,
+);
+/** The card's one figure: the total when it adds up, else the latest or peak. */
+const figure = $derived.by(() => {
+  if (!result || !measure) return null;
+  const figures = reportFigures(result, measure, {
+    t,
+    locale,
+    currency,
+    groupLabel,
+    fn,
+  });
+  const total = figures.find((f) => f.label === t(M['reports.figure.total']));
+  if (figures.length === 1)
+    return { label: measure.label, value: figures[0].value };
+  // A total is the measure itself over the period.
+  if (total) return { label: measure.label, value: total.value };
+  const peak = figures.at(-1);
+  return peak
+    ? {
+        label: `${measure.label} · ${t(M['reports.figure.peak']).toLowerCase()}`,
+        value: peak.value,
+        detail: peak.detail,
+      }
+    : null;
+});
+/** An ungrouped report's other measures, one line each ("Total amount $12,400"). */
+const extra = $derived.by(() => {
+  if (!result || axis || result.columns.some((c) => c.role === 'dimension'))
+    return [];
+  const row = result.rows[0];
+  return row
+    ? measureColumns(result)
+        .slice(1, 3)
+        .map((column) => ({
+          label: column.label,
+          value: reportCell(row[column.id], column, locale, currency),
+        }))
+    : [];
+});
+const series = $derived.by(() => {
+  if (!result || !measure || !axis) return null;
+  const points = result.rows
+    .filter((row) => typeof row[measure.id] === 'number')
+    .map((row) => ({
+      label: groupLabel(row),
+      value: row[measure.id] as number,
+    }));
+  return points.length > 1
+    ? { points, format: measureFormat(measure), currency }
+    : null;
+});
+const groups = $derived(
+  result && !axis && result.columns.some((c) => c.role === 'dimension')
+    ? result.rows.length
+    : 0,
+);
+const saved = $derived(
+  report.savedAt
+    ? author
+      ? t(M['reports.saved_by_at'], {
+          author,
+          time: relativeTime(report.savedAt, locale),
+        })
+      : t(M['reports.saved_at'], { time: relativeTime(report.savedAt, locale) })
+    : author
+      ? t(M['reports.saved_by'], { author })
+      : '',
+);
+</script>
+
+<article
+  class="saved-report-card"
+  data-smrt-component="SavedReportCard"
+  data-report-id={report.id}
+  data-archived={report.status === 'archived' ? '' : undefined}
+>
+  <div class="saved-report-card__head">
+    <svelte:element this={`h${headingLevel}`} class="saved-report-card__title">
+      <a href={href}>{report.title}</a>
+    </svelte:element>
+    {#if report.status === 'archived'}<Badge size="sm">{t(M['reports.archived_badge'])}</Badge>{/if}
+    {#if actions.length}
+      <div class="saved-report-card__menu">
+        <Menu variant="icon" placement="bottom-end" triggerLabel={t(M['reports.more'], { title: report.title })} items={actions}>
+          {#snippet trigger()}<span aria-hidden="true">⋯</span>{/snippet}
+        </Menu>
+      </div>
+    {/if}
+  </div>
+  <p class="saved-report-card__line">{description.line}</p>
+  <div class="saved-report-card__figure">
+    {#if result === undefined}
+      <Skeleton variant="text" lines={2} label={t(M['reports.running'])} />
+    {:else if result === null}
+      <p class="saved-report-card__muted">{t(M['reports.run_failed'])}</p>
+    {:else if result.rows.length === 0}
+      <p class="saved-report-card__muted">{t(M['reports.no_rows'])}</p>
+    {:else if figure}
+      <p class="saved-report-card__label">{figure.label}</p>
+      <p class="saved-report-card__value">{figure.value}{#if figure.detail}<span class="saved-report-card__detail"> · {figure.detail}</span>{/if}</p>
+      {#if series && measure}
+        <div class="saved-report-card__spark">
+          <Chart data={series} style="line" size="compact" title={measure.label} {locale} />
+        </div>
+      {:else if extra.length}
+        <dl class="saved-report-card__extra">
+          {#each extra as item (item.label)}<div><dt>{item.label}</dt><dd>{item.value}</dd></div>{/each}
+        </dl>
+      {:else if groups > 1}
+        <p class="saved-report-card__muted">{t(M['reports.groups_count'], { count: groups })}</p>
+      {/if}
+    {/if}
+  </div>
+  <!-- Its figures are fresh from this run, so the card says only when it was
+       saved; the report's page also says when it last ran. -->
+  {#if saved}
+    <p class="saved-report-card__meta">{saved}</p>
+  {/if}
+</article>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .saved-report-card {
+    position: relative;
+    display: grid;
+    grid-template-rows: auto auto 1fr auto;
+    gap: var(--smrt-spacing-2);
+    min-inline-size: 0;
+    padding: var(--smrt-spacing-4);
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-radius-large);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
+    transition: border-color var(--smrt-duration-fast) var(--smrt-easing-standard), background-color var(--smrt-duration-fast) var(--smrt-easing-standard);
+  }
+  .saved-report-card:hover { background: var(--smrt-color-surface-container); border-color: var(--smrt-color-outline); }
+  .saved-report-card:focus-within:has(.saved-report-card__title a:focus-visible) { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .saved-report-card[data-archived] { background: var(--smrt-color-surface); }
+  .saved-report-card__head { display: flex; align-items: flex-start; gap: var(--smrt-spacing-2); min-inline-size: 0; }
+  .saved-report-card__title { flex: 1 1 auto; min-inline-size: 0; margin: 0; font: var(--smrt-typography-title-medium-font); overflow-wrap: anywhere; }
+  .saved-report-card__title a { color: inherit; text-decoration: none; outline: none; }
+  /* The whole card opens the report; the menu sits above the link. */
+  .saved-report-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+  .saved-report-card__menu { position: relative; z-index: 1; flex: none; margin-block: calc(var(--smrt-spacing-2) * -1); margin-inline-end: calc(var(--smrt-spacing-2) * -1); }
+  .saved-report-card__line { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); overflow-wrap: anywhere; }
+  .saved-report-card__figure { display: grid; align-content: start; gap: var(--smrt-spacing-1); min-block-size: 4.5rem; }
+  .saved-report-card__label { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-medium-size); }
+  .saved-report-card__value { margin: 0; font: var(--smrt-typography-headline-small-font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+  .saved-report-card__detail { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-body-small-font); }
+  .saved-report-card__spark { margin-block-start: var(--smrt-spacing-1); }
+  .saved-report-card__extra { display: grid; gap: var(--smrt-spacing-1); margin: 0; font-size: var(--smrt-typography-body-small-size); }
+  .saved-report-card__extra > div { display: flex; flex-wrap: wrap; gap: 0 var(--smrt-spacing-2); }
+  .saved-report-card__extra dt { color: var(--smrt-color-on-surface-variant); }
+  .saved-report-card__extra dd { margin: 0; font-variant-numeric: tabular-nums; }
+  .saved-report-card__muted { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+  .saved-report-card__meta { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-medium-size); }
+  @media (prefers-reduced-motion: reduce) { .saved-report-card { transition: none; } }
+}
+</style>

package/dist/svelte/SavedReportCard.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+ * One saved report as a card: its title (the whole card opens it), a line
+ * saying what it covers, a headline figure from its latest run with a
+ * sparkline over time, and when it was saved and run. The same card is the
+ * Saved reports page's and the Reports section page's.
+ */
+import type { MenuItem } from '@happyvertical/smrt-ui';
+import { type ReportSourceInfo } from './describe.js';
+import type { RuntimeReportResult, SavedRuntimeReport } from './types.js';
+export interface Props {
+    report: SavedRuntimeReport;
+    /** The report's page. */
+    href: string;
+    /** Its latest run; `undefined` while it runs, `null` when it could not run. */
+    result?: RuntimeReportResult | null;
+    /** The report's source by label and fields, for its description line. */
+    source?: ReportSourceInfo;
+    /** The secondary actions (Archive, Restore) of its "more" menu. */
+    actions?: MenuItem[];
+    /** Who saved it, as the host names them ("You"). */
+    author?: string;
+    /** Heading level of the title, under the surrounding page's heading. */
+    headingLevel?: 2 | 3;
+    locale?: string;
+    currency?: string;
+}
+declare const SavedReportCard: import("svelte").Component<Props, {}, "">;
+type SavedReportCard = ReturnType<typeof SavedReportCard>;
+export default SavedReportCard;
+//# sourceMappingURL=SavedReportCard.svelte.d.ts.map

package/dist/svelte/SavedReportCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SavedReportCard.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/SavedReportCard.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAQvD,OAAO,EAIL,KAAK,gBAAgB,EAItB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAG1E,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,MAAM,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACpC,yEAAyE;IACzE,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,mEAAmE;IACnE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAuKD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}