@happyvertical/smrt-ui 0.57.5 → 0.57.7

package/dist/charts/Chart.svelte

@@ -20,12 +20,37 @@ export interface Props {
   title?: string;
   /** Locale used to format displayed numeric values. */
   locale?: string;
+  /**
+   * How much room the chart takes. `compact` is a sparkline for a card (a
+   * line with no axis, labels or readout); `tall` gives a page's main chart
+   * room. Default `regular`.
+   */
+  size?: 'compact' | 'regular' | 'tall';
+  /**
+   * Line: label the value axis (top, middle and bottom values, short form)
+   * with light gridlines. Default on for `tall`.
+   */
+  valueAxis?: boolean;
+  /**
+   * Line: let the pointer and the arrow keys read each value in a tooltip
+   * (a slider whose value text is the point). Default on for `tall`.
+   */
+  explore?: boolean;
+  /**
+   * Line: the peak and latest values under the chart. Default on; a page
+   * that shows its own headline figures turns it off.
+   */
+  readout?: boolean;
 }
 let {
   data,
   style: requestedStyle = 'bar',
   title = '',
   locale = 'en',
+  size = 'regular',
+  valueAxis,
+  explore,
+  readout = true,
 }: Props = $props();
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -33,6 +58,7 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 const { t } = useI18n();
+const uid = $props.id();
 const MAX_POINTS = 60;
 
 const chart = $derived(isRecord(data) ? data : null);
@@ -55,6 +81,10 @@ const STYLES = ['bar', 'line', 'table', 'pie', 'stat'] as const;
 const style = $derived(
   STYLES.find((candidate) => candidate === requestedStyle) ?? 'bar',
 );
+/** Whether the line draws its value axis (`showAxis`, readable before it). */
+function requestedAxis(): boolean {
+  return size !== 'compact' && (valueAxis ?? size === 'tall');
+}
 const fmt = (value: number): string =>
   formatWidgetValue(value, {
     format: chart?.format ?? 'integer',
@@ -63,7 +93,17 @@ const fmt = (value: number): string =>
   });
 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);
+/** A round number at or above `value` (1, 2, 2.5 or 5 times a power of ten). */
+function niceCeil(value: number): number {
+  if (value <= 0) return 0;
+  const power = 10 ** Math.floor(Math.log10(value));
+  const step = [1, 2, 2.5, 5, 10].find((n) => value / power <= n) ?? 10;
+  return step * power;
+}
+// The line's top: the peak, or with a value axis two round steps above zero
+// (so the ticks read $0 / $50K / $100K and the peak never meets the frame).
+const top = $derived(requestedAxis() && max > 0 ? niceCeil(max / 2) * 2 : max);
+const span = $derived(top - min || 1);
 const polyline = $derived(
   points
     .map((point, index) => {
@@ -122,9 +162,83 @@ const deltaText = $derived(
         },
       ),
 );
+// Line axis: at most three labels (first, middle, last), so long or many
+// labels never overflow the chart's width.
+const axisLabels = $derived.by(() => {
+  if (points.length <= 2) return points.map((point) => point.label);
+  const middle = points[Math.floor((points.length - 1) / 2)];
+  return [points[0].label, middle.label, points[points.length - 1].label];
+});
+const peak = $derived(
+  points.reduce<{ label: string; value: number } | null>(
+    (best, point) => (!best || point.value > best.value ? point : best),
+    null,
+  ),
+);
 const summary = $derived(
   `${title}. ${t(M['ui.overview.chart.summary'], { count: points.length })}`,
 );
+
+// Line extras: the value axis and the explorable readout.
+const compact = $derived(size === 'compact');
+const showAxis = $derived(requestedAxis());
+const explorable = $derived(!compact && (explore ?? size === 'tall'));
+const short = (value: number): string =>
+  formatWidgetValue(value, {
+    format: chart?.format ?? 'integer',
+    currency: chart?.currency,
+    locale,
+    compact: true,
+  });
+const axisValues = $derived([top, (top + min) / 2, min]);
+/** A point's place in the 100 x 40 plot. */
+function place(index: number): { x: number; y: number } {
+  const point = points[index];
+  const x = points.length === 1 ? 50 : (index / (points.length - 1)) * 100;
+  const y = 36 - (((point?.value ?? 0) - min) / span) * 32;
+  return { x, y };
+}
+let active = $state<number | null>(null);
+const activePoint = $derived(
+  active !== null && points[active]
+    ? { ...points[active], ...place(active) }
+    : null,
+);
+const activeText = $derived(
+  activePoint
+    ? t(M['ui.overview.chart.point'], {
+        label: activePoint.label,
+        value: fmt(activePoint.value),
+      })
+    : '',
+);
+function pointAt(event: PointerEvent) {
+  const box = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  if (box.width <= 0 || points.length === 0) return;
+  const ratio = Math.min(
+    1,
+    Math.max(0, (event.clientX - box.left) / box.width),
+  );
+  active = Math.round(ratio * (points.length - 1));
+}
+function step(event: KeyboardEvent) {
+  const last = points.length - 1;
+  if (last < 0) return;
+  const current = active ?? -1;
+  const next =
+    event.key === 'ArrowRight' || event.key === 'ArrowUp'
+      ? Math.min(last, current + 1)
+      : event.key === 'ArrowLeft' || event.key === 'ArrowDown'
+        ? Math.max(0, current < 0 ? last : current - 1)
+        : event.key === 'Home'
+          ? 0
+          : event.key === 'End'
+            ? last
+            : null;
+  if (next === null) return;
+  event.preventDefault();
+  active = next;
+}
 </script>
 
 {#snippet dataTable(hidden: boolean)}
@@ -144,6 +258,36 @@ const summary = $derived(
   </table>
 {/snippet}
 
+{#snippet linePlot(interactive: boolean)}
+  <svg
+    class="smrt-chart__line"
+    viewBox="0 0 100 40"
+    preserveAspectRatio="none"
+    role={interactive ? undefined : 'img'}
+    aria-label={interactive ? undefined : summary}
+    aria-hidden={interactive ? 'true' : undefined}
+  >
+    {#if showAxis}
+      {#each [4, 20, 36] as y (y)}
+        <line class="smrt-chart__grid" x1="0" x2="100" y1={y} y2={y} vector-effect="non-scaling-stroke" />
+      {/each}
+    {/if}
+    <polyline points={polyline} fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" />
+    {#if activePoint}
+      <line class="smrt-chart__guide" x1={activePoint.x} x2={activePoint.x} y1="0" y2="40" vector-effect="non-scaling-stroke" />
+    {/if}
+  </svg>
+  {#if activePoint}
+    <span class="smrt-chart__dot" style:inset-inline-start="{activePoint.x}%" style:inset-block-start="{(activePoint.y / 40) * 100}%" aria-hidden="true"></span>
+    <span
+      class="smrt-chart__tip"
+      data-edge={activePoint.x < 15 ? 'start' : activePoint.x > 85 ? 'end' : undefined}
+      style:inset-inline-start="{activePoint.x}%"
+      aria-hidden="true"
+    ><span>{activePoint.label}</span><strong>{fmt(activePoint.value)}</strong></span>
+  {/if}
+{/snippet}
+
 {#if points.length === 0}
   <p class="smrt-chart__empty" data-smrt-component="Chart">{t(M['ui.overview.no_data'])}</p>
 {:else if style === 'table'}
@@ -200,14 +344,50 @@ const summary = $derived(
     <p class="smrt-chart__empty" data-smrt-component="Chart">{t(M['ui.overview.no_data'])}</p>
   {/if}
 {:else if style === 'line'}
-  <div class="smrt-chart" data-smrt-component="Chart">
-    <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>
+  <div class="smrt-chart smrt-chart--line" data-size={size} data-smrt-component="Chart">
+    <div class="smrt-chart__frame" class:smrt-chart__frame--axis={showAxis}>
+      {#if showAxis}
+        <p class="smrt-chart__values" aria-hidden="true">
+          {#each axisValues as value, index (index)}<span>{short(value)}</span>{/each}
+        </p>
+      {/if}
+      <div class="smrt-chart__body">
+        {#if explorable}
+          <div
+            class="smrt-chart__plot"
+            role="slider"
+            tabindex="0"
+            aria-label={summary}
+            aria-describedby="{uid}-explore"
+            aria-orientation="horizontal"
+            aria-valuemin={0}
+            aria-valuemax={Math.max(0, points.length - 1)}
+            aria-valuenow={active ?? points.length - 1}
+            aria-valuetext={activeText || (latest ? t(M['ui.overview.chart.point'], { label: latest.label, value: fmt(latest.value) }) : '')}
+            onpointermove={pointAt}
+            onpointerleave={() => (active = null)}
+            onkeydown={step}
+            onblur={() => (active = null)}
+          >
+            {@render linePlot(true)}
+          </div>
+        {:else}
+          <div class="smrt-chart__plot">{@render linePlot(false)}</div>
+        {/if}
+        {#if !compact}
+          <p class="smrt-chart__axis" aria-hidden="true">
+            {#each axisLabels as label, index (index)}<span>{label}</span>{/each}
+          </p>
+        {/if}
+      </div>
+    </div>
+    {#if explorable}<span id="{uid}-explore" class="smrt-chart__table">{t(M['ui.overview.chart.explore'])}</span>{/if}
+    {#if readout && !compact && peak && latest}
+      <p class="smrt-chart__readout">
+        <span>{t(M['ui.overview.chart.peak'], { value: fmt(peak.value), label: peak.label })}</span>
+        <span>{t(M['ui.overview.chart.latest'], { value: fmt(latest.value), label: latest.label })}</span>
+      </p>
+    {/if}
     {@render dataTable(true)}
   </div>
 {:else}
@@ -228,8 +408,28 @@ const summary = $derived(
 @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__line { display: block; inline-size: 100%; block-size: 7rem; overflow: visible; }
+  .smrt-chart--line[data-size='compact'] .smrt-chart__line { block-size: 2.5rem; }
+  .smrt-chart--line[data-size='tall'] .smrt-chart__line { block-size: 14rem; }
+  .smrt-chart__frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-2); }
+  .smrt-chart__frame--axis { grid-template-columns: auto minmax(0, 1fr); }
+  .smrt-chart__body { display: grid; gap: var(--smrt-spacing-1); min-inline-size: 0; }
+  .smrt-chart__values { display: flex; flex-direction: column; justify-content: space-between; margin: 0; block-size: 14rem; padding-block: calc(14rem * 0.1 - 0.5lh) calc(14rem * 0.1 - 0.5lh); box-sizing: border-box; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-small-size); font-variant-numeric: tabular-nums; text-align: end; }
+  .smrt-chart--line:not([data-size='tall']) .smrt-chart__values { block-size: 7rem; padding-block: calc(7rem * 0.1 - 0.5lh); }
+  .smrt-chart__grid { stroke: var(--smrt-color-outline-variant); stroke-width: 1; stroke-dasharray: 2 3; }
+  .smrt-chart__plot { position: relative; border-radius: var(--smrt-radius-small); outline: none; touch-action: pan-y; }
+  .smrt-chart__plot[role='slider'] { cursor: crosshair; }
+  .smrt-chart__plot:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .smrt-chart__guide { stroke: var(--smrt-color-outline); stroke-width: 1; }
+  .smrt-chart__dot { position: absolute; inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-primary); outline: var(--smrt-focus-ring-width) solid var(--smrt-color-surface); transform: translate(-50%, -50%); pointer-events: none; }
+  .smrt-chart__tip { position: absolute; inset-block-start: 0; display: grid; gap: 0; padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-small); background: var(--smrt-color-inverse-surface); color: var(--smrt-color-inverse-on-surface); font-size: var(--smrt-typography-label-medium-size); line-height: 1.3; white-space: nowrap; transform: translate(-50%, calc(-100% - var(--smrt-spacing-1))); pointer-events: none; box-shadow: var(--smrt-elevation-2); font-variant-numeric: tabular-nums; }
+  .smrt-chart__tip[data-edge='start'] { transform: translate(0, calc(-100% - var(--smrt-spacing-1))); }
+  .smrt-chart__tip[data-edge='end'] { transform: translate(-100%, calc(-100% - var(--smrt-spacing-1))); }
+
+  .smrt-chart__axis { display: flex; justify-content: space-between; gap: var(--smrt-spacing-2); margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.75rem); }
+  .smrt-chart__axis span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .smrt-chart__axis span:last-child { text-align: end; }
+  .smrt-chart__readout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--smrt-spacing-1) var(--smrt-spacing-3); margin: 0; color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-body-small-size, 0.75rem); font-variant-numeric: tabular-nums; }
   .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; }

package/dist/charts/Chart.svelte.d.ts

@@ -8,6 +8,27 @@ export interface Props {
     title?: string;
     /** Locale used to format displayed numeric values. */
     locale?: string;
+    /**
+     * How much room the chart takes. `compact` is a sparkline for a card (a
+     * line with no axis, labels or readout); `tall` gives a page's main chart
+     * room. Default `regular`.
+     */
+    size?: 'compact' | 'regular' | 'tall';
+    /**
+     * Line: label the value axis (top, middle and bottom values, short form)
+     * with light gridlines. Default on for `tall`.
+     */
+    valueAxis?: boolean;
+    /**
+     * Line: let the pointer and the arrow keys read each value in a tooltip
+     * (a slider whose value text is the point). Default on for `tall`.
+     */
+    explore?: boolean;
+    /**
+     * Line: the peak and latest values under the chart. Default on; a page
+     * that shows its own headline figures turns it off.
+     */
+    readout?: boolean;
 }
 declare const Chart: import("svelte").Component<Props, {}, "">;
 type Chart = ReturnType<typeof Chart>;

package/dist/charts/Chart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../src/charts/Chart.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB,mEAAmE;IACnE,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2MD,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../src/charts/Chart.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB,mEAAmE;IACnE,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+UD,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/charts/format.d.ts

@@ -4,10 +4,22 @@ export interface FormatWidgetValueOptions {
     /** ISO 4217 code for `money` (default USD). */
     currency?: string;
     locale: string;
+    /** Short form for tight spaces such as an axis (`$83K`, `1.2M`). */
+    compact?: boolean;
 }
 /**
  * Format a metric value. `money` takes integer minor units, `percent` takes a
  * fraction (0.25 is 25%). Non-finite input renders as an en dash.
  */
-export declare function formatWidgetValue(value: unknown, { format, currency, locale }: FormatWidgetValueOptions): string;
+export declare function formatWidgetValue(value: unknown, { format, currency, locale, compact, }: FormatWidgetValueOptions): string;
+/** Time bucket granularities `formatTimeBucket` names. */
+export type TimeBucketUnit = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+/**
+ * A time bucket's start (an ISO-8601 instant, or a SQL `YYYY-MM-DD HH:MM:SS`)
+ * as a short label for its granularity, in UTC, so buckets read the same
+ * everywhere: `Jan 2025` for a month, `Q1 2025`, `2025`, `Jan 6` for a day or
+ * week, `Jan 6, 14:00` for an hour or minute. Unparseable input is returned
+ * unchanged.
+ */
+export declare function formatTimeBucket(value: string, unit: TimeBucketUnit, locale: string): string;
 //# sourceMappingURL=format.d.ts.map

package/dist/charts/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/charts/format.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAYD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,EACd,EAAE,MAAkB,EAAE,QAAgB,EAAE,MAAM,EAAE,EAAE,wBAAwB,GACzE,MAAM,CA4BR"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/charts/format.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAYD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,EACd,EACE,MAAkB,EAClB,QAAgB,EAChB,MAAM,EACN,OAAe,GAChB,EAAE,wBAAwB,GAC1B,MAAM,CAkCR;AAED,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GACtB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,MAAM,GACb,MAAM,CA2BR"}

package/dist/charts/format.js

@@ -20,10 +20,13 @@ function safeLocale(locale) {
  * Format a metric value. `money` takes integer minor units, `percent` takes a
  * fraction (0.25 is 25%). Non-finite input renders as an en dash.
  */
-export function formatWidgetValue(value, { format = 'integer', currency = 'USD', locale }) {
+export function formatWidgetValue(value, { format = 'integer', currency = 'USD', locale, compact = false, }) {
     if (typeof value !== 'number' || !Number.isFinite(value))
         return EN_DASH;
     const tag = safeLocale(locale);
+    const short = compact
+        ? { notation: 'compact', maximumFractionDigits: 1 }
+        : {};
     switch (format) {
         case 'money': {
             const code = /^[A-Za-z]{3}$/.test(currency)
@@ -33,6 +36,7 @@ export function formatWidgetValue(value, { format = 'integer', currency = 'USD',
             return new Intl.NumberFormat(tag, {
                 style: 'currency',
                 currency: code,
+                ...short,
             }).format(value / 10 ** digits);
         }
         case 'percent':
@@ -41,8 +45,47 @@ export function formatWidgetValue(value, { format = 'integer', currency = 'USD',
                 maximumFractionDigits: 1,
             }).format(value);
         case 'decimal':
-            return new Intl.NumberFormat(tag, { maximumFractionDigits: 2 }).format(value);
+            return new Intl.NumberFormat(tag, {
+                maximumFractionDigits: 2,
+                ...short,
+            }).format(value);
+        default:
+            return new Intl.NumberFormat(tag, {
+                maximumFractionDigits: 0,
+                ...short,
+            }).format(value);
+    }
+}
+/**
+ * A time bucket's start (an ISO-8601 instant, or a SQL `YYYY-MM-DD HH:MM:SS`)
+ * as a short label for its granularity, in UTC, so buckets read the same
+ * everywhere: `Jan 2025` for a month, `Q1 2025`, `2025`, `Jan 6` for a day or
+ * week, `Jan 6, 14:00` for an hour or minute. Unparseable input is returned
+ * unchanged.
+ */
+export function formatTimeBucket(value, unit, locale) {
+    const date = new Date(/^\d{4}-\d{2}-\d{2} \d/.test(value) ? `${value.replace(' ', 'T')}Z` : value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    const tag = safeLocale(locale);
+    const format = (options) => new Intl.DateTimeFormat(tag, { timeZone: 'UTC', ...options }).format(date);
+    switch (unit) {
+        case 'year':
+            return format({ year: 'numeric' });
+        case 'quarter':
+            return `Q${Math.floor(date.getUTCMonth() / 3) + 1} ${date.getUTCFullYear()}`;
+        case 'month':
+            return format({ month: 'short', year: 'numeric' });
+        case 'week':
+        case 'day':
+            return format({ month: 'short', day: 'numeric' });
         default:
-            return new Intl.NumberFormat(tag, { maximumFractionDigits: 0 }).format(value);
+            return format({
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hourCycle: 'h23',
+            });
     }
 }

package/dist/charts/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Chart } from './Chart.svelte';
-export type { FormatWidgetValueOptions, WidgetValueFormat } from './format.js';
-export { formatWidgetValue } from './format.js';
+export type { FormatWidgetValueOptions, TimeBucketUnit, WidgetValueFormat, } from './format.js';
+export { formatTimeBucket, formatWidgetValue } from './format.js';
 export type { ChartData } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/charts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACV,wBAAwB,EACxB,cAAc,EACd,iBAAiB,GAClB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/charts/index.js

@@ -1,2 +1,2 @@
 export { default as Chart } from './Chart.svelte';
-export { formatWidgetValue } from './format.js';
+export { formatTimeBucket, formatWidgetValue } from './format.js';

package/dist/charts/strings.d.ts

@@ -6,5 +6,9 @@ export declare const M: {
     readonly 'ui.overview.chart.table': "ui.overview.chart.table";
     readonly 'ui.overview.chart.label_column': "ui.overview.chart.label_column";
     readonly 'ui.overview.chart.value_column': "ui.overview.chart.value_column";
+    readonly 'ui.overview.chart.peak': "ui.overview.chart.peak";
+    readonly 'ui.overview.chart.latest': "ui.overview.chart.latest";
+    readonly 'ui.overview.chart.explore': "ui.overview.chart.explore";
+    readonly 'ui.overview.chart.point': "ui.overview.chart.point";
 };
 //# sourceMappingURL=strings.d.ts.map

package/dist/charts/strings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/charts/strings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;CAQZ,CAAC"}
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/charts/strings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;CAaZ,CAAC"}

package/dist/charts/strings.js

@@ -7,4 +7,8 @@ export const M = defineMessages({
     'ui.overview.chart.table': 'Chart data',
     'ui.overview.chart.label_column': 'Label',
     'ui.overview.chart.value_column': 'Value',
+    'ui.overview.chart.peak': 'Peak {value} · {label}',
+    'ui.overview.chart.latest': 'Latest {value} · {label}',
+    'ui.overview.chart.explore': 'Use the arrow keys to read each value; Home and End jump to the first and last.',
+    'ui.overview.chart.point': '{label}: {value}',
 });

package/dist/components/chat/assistant-request.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Asking the page's assistant from anywhere on the page: a "New report" button,
+ * an empty state, a help hint. Pure DOM, so a widget can ask without knowing
+ * which assistant (if any) the host mounted, and the assistant can listen
+ * without importing the widget's package.
+ *
+ * The requester dispatches a bubbling, cancelable event with the prompt to put
+ * in the composer. Whoever takes it calls `preventDefault()`:
+ * - an app shell with an assistant dock opens the dock and re-dispatches the
+ *   request from inside it, so a dock that mounts only when open still gets it;
+ * - the assistant dock fills its composer with the prompt and focuses it. The
+ *   prompt is never sent on the person's behalf: they edit and send it.
+ *
+ * `requestAssistant` returns whether anything took it, so the requester can
+ * explain where to ask instead when no assistant is on the page.
+ */
+/** The bubbling DOM event that asks the page's assistant. */
+export declare const ASSISTANT_REQUEST_EVENT = "smrt-assistant-request";
+export interface AssistantRequestDetail {
+    /** Text to put in the assistant's composer, for the person to edit and send. */
+    prompt: string;
+}
+/** Ask the page's assistant from `from`; `true` when something took the request. */
+export declare function requestAssistant(from: Element, detail: AssistantRequestDetail): boolean;
+//# sourceMappingURL=assistant-request.d.ts.map

package/dist/components/chat/assistant-request.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assistant-request.d.ts","sourceRoot":"","sources":["../../../src/components/chat/assistant-request.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,6DAA6D;AAC7D,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,gFAAgF;IAChF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,oFAAoF;AACpF,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,sBAAsB,GAC7B,OAAO,CAOT"}

package/dist/components/chat/assistant-request.js

@@ -0,0 +1,24 @@
+/**
+ * Asking the page's assistant from anywhere on the page: a "New report" button,
+ * an empty state, a help hint. Pure DOM, so a widget can ask without knowing
+ * which assistant (if any) the host mounted, and the assistant can listen
+ * without importing the widget's package.
+ *
+ * The requester dispatches a bubbling, cancelable event with the prompt to put
+ * in the composer. Whoever takes it calls `preventDefault()`:
+ * - an app shell with an assistant dock opens the dock and re-dispatches the
+ *   request from inside it, so a dock that mounts only when open still gets it;
+ * - the assistant dock fills its composer with the prompt and focuses it. The
+ *   prompt is never sent on the person's behalf: they edit and send it.
+ *
+ * `requestAssistant` returns whether anything took it, so the requester can
+ * explain where to ask instead when no assistant is on the page.
+ */
+/** The bubbling DOM event that asks the page's assistant. */
+export const ASSISTANT_REQUEST_EVENT = 'smrt-assistant-request';
+/** Ask the page's assistant from `from`; `true` when something took the request. */
+export function requestAssistant(from, detail) {
+    const event = new CustomEvent(ASSISTANT_REQUEST_EVENT, { bubbles: true, composed: true, cancelable: true, detail });
+    from.dispatchEvent(event);
+    return event.defaultPrevented;
+}

package/dist/components/chat/index.d.ts

@@ -1,9 +1,11 @@
 /**
  * Chat primitives — subpath `@happyvertical/smrt-ui/chat`.
  *
- * MessageBubble (user/agent/system), ReactionPicker, TypingIndicator. Generic,
+ * MessageBubble (user/agent/system), ReactionPicker, TypingIndicator, and
+ * `requestAssistant` (ask the page's assistant from any element). Generic,
  * tokenised, a11y-checked building blocks for chat UIs (L3 #1422).
  */
+export { ASSISTANT_REQUEST_EVENT, type AssistantRequestDetail, requestAssistant, } from './assistant-request.js';
 export { default as MessageBubble } from './MessageBubble.svelte';
 export { default as ReactionPicker } from './ReactionPicker.svelte';
 export { default as TypingIndicator } from './TypingIndicator.svelte';

package/dist/components/chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,uBAAuB,EACvB,KAAK,sBAAsB,EAC3B,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/chat/index.js

@@ -1,9 +1,11 @@
 /**
  * Chat primitives — subpath `@happyvertical/smrt-ui/chat`.
  *
- * MessageBubble (user/agent/system), ReactionPicker, TypingIndicator. Generic,
+ * MessageBubble (user/agent/system), ReactionPicker, TypingIndicator, and
+ * `requestAssistant` (ask the page's assistant from any element). Generic,
  * tokenised, a11y-checked building blocks for chat UIs (L3 #1422).
  */
+export { ASSISTANT_REQUEST_EVENT, requestAssistant, } from './assistant-request.js';
 export { default as MessageBubble } from './MessageBubble.svelte';
 export { default as ReactionPicker } from './ReactionPicker.svelte';
 export { default as TypingIndicator } from './TypingIndicator.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.57.5",
+  "version": "0.57.7",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -164,7 +164,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.57.5",
+    "@happyvertical/smrt-types": "0.57.7",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {