@happyvertical/smrt-svelte 0.55.18 → 0.55.19

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

@@ -1,8 +1,10 @@
 <script lang="ts">
 /**
- * Chart widget (#3727): bars or a line over labelled values, drawn from the
- * loaded data. Every chart carries its numbers as text (bar values inline, a
- * visually hidden table for the line) so it is readable without sight.
+ * 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';
@@ -32,7 +34,10 @@ const points = $derived.by(() => {
   }
   return out;
 });
-const style = $derived(options.style === 'line' ? 'line' : 'bar');
+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',
@@ -51,13 +56,132 @@ const polyline = $derived(
     })
     .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}>
@@ -67,20 +191,7 @@ const summary = $derived(
       <span>{points[0].label}</span>
       <span>{points[points.length - 1].label}</span>
     </p>
-    <table class="smrt-chart__table">
-      <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>
+    {@render dataTable(true)}
   </div>
 {:else}
   <ul class="smrt-chart__bars" aria-label={summary} data-smrt-component="ChartWidget">
@@ -109,6 +220,35 @@ const summary = $derived(
   .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; }
 }
 </style>

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":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,WAAW,CAAC;AAoG3D,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":"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"}

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

@@ -13,8 +13,12 @@ import { safeHref } from '../markdown.js';
 import type { WidgetComponentProps } from '../types.js';
 import { isRecord, type ShortcutsWidgetData } from './data.js';
 
-let { data, iconComponent }: WidgetComponentProps<ShortcutsWidgetData> =
-  $props();
+let {
+  data,
+  iconComponent,
+  locale,
+  presentation = 'card',
+}: WidgetComponentProps<ShortcutsWidgetData> = $props();
 
 const { t } = useI18n();
 const MAX_ITEMS = 48;
@@ -25,8 +29,21 @@ interface Card {
   href: string;
   icon: string;
   description?: string;
+  count?: number;
 }
 
+const numberFormat = $derived(new Intl.NumberFormat(locale));
+const plural = $derived(new Intl.PluralRules(locale));
+const countLabel = (count: number): string =>
+  t(
+    M[
+      plural.select(count) === 'one'
+        ? 'ui.overview.shortcuts.records_one'
+        : 'ui.overview.shortcuts.records_other'
+    ],
+    { count: numberFormat.format(count) },
+  );
+
 const cards = $derived.by((): Card[] => {
   if (!isRecord(data) || !Array.isArray(data.items)) return [];
   const out: Card[] = [];
@@ -42,6 +59,12 @@ const cards = $derived.by((): Card[] => {
         typeof item.icon === 'string' ? item.icon : SHELL_DEFAULT_SECTION_ICON,
       description:
         typeof item.description === 'string' ? item.description : undefined,
+      count:
+        typeof item.count === 'number' &&
+        Number.isFinite(item.count) &&
+        item.count >= 0
+          ? item.count
+          : undefined,
     });
   }
   return out;
@@ -51,7 +74,7 @@ const cards = $derived.by((): Card[] => {
 {#if cards.length === 0}
   <p class="smrt-shortcuts__empty" data-smrt-component="ShortcutsWidget">{t(M['ui.overview.shortcuts.empty'])}</p>
 {:else}
-  <ul class="smrt-shortcuts" data-smrt-component="ShortcutsWidget">
+  <ul class="smrt-shortcuts" data-presentation={presentation} data-smrt-component="ShortcutsWidget">
     {#each cards as card (card.id)}
       <li class="smrt-shortcuts__card">
         <a class="smrt-shortcuts__link" href={card.href}>
@@ -60,6 +83,7 @@ const cards = $derived.by((): Card[] => {
               <ShellSectionIcon name={card.icon} size={28} {iconComponent} />
             </span>
             <span class="smrt-shortcuts__title">{card.label}</span>
+            {#if card.count !== undefined}<span class="smrt-shortcuts__count">{countLabel(card.count)}</span>{/if}
           </span>
           {#if card.description}<span class="smrt-shortcuts__desc">{card.description}</span>{/if}
         </a>
@@ -81,6 +105,11 @@ const cards = $derived.by((): Card[] => {
   .smrt-shortcuts__icon :global(.smrt-shell-section-icon) { inline-size: 28px; block-size: 28px; }
   .smrt-shortcuts__title { font-weight: var(--smrt-typography-weight-medium, 500); overflow-wrap: anywhere; }
   .smrt-shortcuts__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
+  .smrt-shortcuts__count { margin-inline-start: auto; flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.75rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  /* Plain: entries sit directly on the panel, no frame per entry. */
+  .smrt-shortcuts[data-presentation='plain'] { gap: var(--smrt-spacing-1); }
+  .smrt-shortcuts[data-presentation='plain'] .smrt-shortcuts__card { border: 0; border-radius: var(--smrt-radius-medium); background: transparent; }
+  .smrt-shortcuts[data-presentation='plain'] .smrt-shortcuts__card:hover { background: color-mix(in srgb, var(--smrt-color-on-surface) calc(var(--smrt-state-hover) * 100%), transparent); }
   .smrt-shortcuts__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
 }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/ShortcutsWidget.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAuE/D,QAAA,MAAM,eAAe,+EAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShortcutsWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/ShortcutsWidget.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AA+F/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/core.d.ts

@@ -16,7 +16,15 @@ import type { WidgetDefinition, WidgetLoad } from '../types.js';
 import type { ChartWidgetData, MetricWidgetData, RecordListWidgetData, ShortcutsWidgetData } from './data.js';
 /** Metric: one number from a model. Options: model, measure, field, filter. */
 export declare function createMetricWidget(load: WidgetLoad<MetricWidgetData>): WidgetDefinition<MetricWidgetData>;
-/** Chart: values grouped by a field over a period. */
+/** Chart option-schema version: 2 added the `table`, `pie` and `stat` styles. */
+export declare const CHART_OPTIONS_VERSION = 2;
+/** Chart options written at v1 (`style` bar or line) are valid at v2 unchanged. */
+export declare function migrateChartOptions(options: Record<string, unknown>, fromVersion: number): Record<string, unknown> | null;
+/**
+ * Chart: values grouped by a field over a period, drawn as `bar`, `line`,
+ * `table`, `pie` (donut) or `stat` (headline value with its change). This is
+ * the renderer half of the runtime-report chart hints (#3878).
+ */
 export declare function createChartWidget(load: WidgetLoad<ChartWidgetData>): WidgetDefinition<ChartWidgetData>;
 /** Record list: the latest or top records of a model. */
 export declare function createRecordListWidget(load: WidgetLoad<RecordListWidgetData>): WidgetDefinition<RecordListWidgetData>;

package/dist/components/overview/widgets/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EAEX,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,WAAW,CAAC;AA2CnB,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,UAAU,CAAC,gBAAgB,CAAC,GACjC,gBAAgB,CAAC,gBAAgB,CAAC,CAgBpC;AAED,sDAAsD;AACtD,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC,GAChC,gBAAgB,CAAC,eAAe,CAAC,CA0CnC;AAED,yDAAyD;AACzD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,UAAU,CAAC,oBAAoB,CAAC,GACrC,gBAAgB,CAAC,oBAAoB,CAAC,CAkCxC;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,CAAC,mBAAmB,CAAC,GACpC,gBAAgB,CAAC,mBAAmB,CAAC,CAmBvC;AAED,sDAAsD;AACtD,wBAAgB,gBAAgB,IAAI,gBAAgB,CAoBnD;AAED,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;CAC7C;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,GAAE,cAAsC,EAChD,OAAO,GAAE,iBAAsB,EAC/B,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,GAClC,MAAM,IAAI,CAyBZ"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EAEX,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,WAAW,CAAC;AA2CnB,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,UAAU,CAAC,gBAAgB,CAAC,GACjC,gBAAgB,CAAC,gBAAgB,CAAC,CAgBpC;AAED,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,mFAAmF;AACnF,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,WAAW,EAAE,MAAM,GAClB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAIhC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC,GAChC,gBAAgB,CAAC,eAAe,CAAC,CAiDnC;AAED,yDAAyD;AACzD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,UAAU,CAAC,oBAAoB,CAAC,GACrC,gBAAgB,CAAC,oBAAoB,CAAC,CAkCxC;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,CAAC,mBAAmB,CAAC,GACpC,gBAAgB,CAAC,mBAAmB,CAAC,CAmBvC;AAED,sDAAsD;AACtD,wBAAgB,gBAAgB,IAAI,gBAAgB,CAoBnD;AAED,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;CAC7C;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,GAAE,cAAsC,EAChD,OAAO,GAAE,iBAAsB,EAC/B,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,GAClC,MAAM,IAAI,CAyBZ"}

package/dist/components/overview/widgets/core.js

@@ -71,7 +71,19 @@ export function createMetricWidget(load) {
         load,
     };
 }
-/** Chart: values grouped by a field over a period. */
+/** Chart option-schema version: 2 added the `table`, `pie` and `stat` styles. */
+export const CHART_OPTIONS_VERSION = 2;
+/** Chart options written at v1 (`style` bar or line) are valid at v2 unchanged. */
+export function migrateChartOptions(options, fromVersion) {
+    return fromVersion >= 1 && fromVersion < CHART_OPTIONS_VERSION
+        ? { ...options }
+        : null;
+}
+/**
+ * Chart: values grouped by a field over a period, drawn as `bar`, `line`,
+ * `table`, `pie` (donut) or `stat` (headline value with its change). This is
+ * the renderer half of the runtime-report chart hints (#3878).
+ */
 export function createChartWidget(load) {
     return {
         type: 'chart',
@@ -106,12 +118,19 @@ export function createChartWidget(load) {
                 choices: [
                     { value: 'bar', label: 'ui.overview.opt.style_bar' },
                     { value: 'line', label: 'ui.overview.opt.style_line' },
+                    { value: 'table', label: 'ui.overview.opt.style_table' },
+                    { value: 'pie', label: 'ui.overview.opt.style_pie' },
+                    { value: 'stat', label: 'ui.overview.opt.style_stat' },
                 ],
             },
             filterField,
         ],
         component: ChartWidget,
         load,
+        // v2 widens `style` from bar | line to bar | line | table | pie | stat
+        // (#3888). Every v1 option set is still valid, so migration is identity.
+        version: CHART_OPTIONS_VERSION,
+        migrate: migrateChartOptions,
         defaultSpan: 2,
     };
 }

package/dist/components/overview/widgets/data.d.ts

@@ -26,6 +26,12 @@ export interface ChartWidgetData {
     format?: WidgetValueFormat;
     currency?: string;
     href?: string;
+    /**
+     * `stat` style: percent change of the headline (the last point) against the
+     * period before (12.5 means +12.5%). Absent, it is derived from the last two
+     * points.
+     */
+    delta?: number | null;
 }
 /** `records`: the rows to list. The loader chooses the title field. */
 export interface RecordListWidgetData {
@@ -41,15 +47,19 @@ export interface RecordListWidgetData {
     /** Link to the full list. */
     href?: string;
 }
+/** One page a shortcut links to (#3888). `count` is the record count, when known. */
+export interface ShortcutEntry {
+    href: string;
+    label: string;
+    icon?: string;
+    description?: string;
+    count?: number;
+}
 /** `shortcuts`: cards that link to pages. */
 export interface ShortcutsWidgetData {
-    items: {
+    items: (ShortcutEntry & {
         id: string;
-        label: string;
-        href: string;
-        icon?: string;
-        description?: string;
-    }[];
+    })[];
 }
 /** The part of a shell nav model section `shortcutsFromNav` reads. */
 export interface ShortcutNavSection {

package/dist/components/overview/widgets/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/data.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,oEAAoE;AACpE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qFAAqF;AACrF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,uEAAuE;AACvE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,6CAA6C;AAC7C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,EAAE,CAAC;CACL;AAED,sEAAsE;AACtE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS;QACd,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,IAAI,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAC7D,EAAE,CAAC;CACL;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,SAAS,kBAAkB,EAAE,EACvC,SAAS,CAAC,EAAE,MAAM,GACjB,mBAAmB,CAoBrB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAEzE"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/data.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,oEAAoE;AACpE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qFAAqF;AACrF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,uEAAuE;AACvE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qFAAqF;AACrF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,6CAA6C;AAC7C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,aAAa,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;CAC3C;AAED,sEAAsE;AACtE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS;QACd,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,IAAI,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAC7D,EAAE,CAAC;CACL;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,SAAS,kBAAkB,EAAE,EACvC,SAAS,CAAC,EAAE,MAAM,GACjB,mBAAmB,CAoBrB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAEzE"}

package/dist/components/workspace/admin-shell/AdminShell.svelte

@@ -1006,6 +1006,19 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     return toggleOn(edge) || showToggle(edge);
   }
 
+  $effect(() => {
+    const next = {
+      top: topRendered,
+      left: shell.isEdgeShown('left'),
+      right: rightRendered,
+      bottom: bottomRendered,
+    };
+    const prev = untrack(() => shell.regionsRendered);
+    if ((Object.keys(next) as PanelEdge[]).some((e) => next[e] !== prev[e])) {
+      shell.regionsRendered = next;
+    }
+  });
+
   $effect(() => {
     shell.hotkeysAvailable = (['top', 'left', 'right', 'bottom'] as const).some(
       hotkeyActive,

package/dist/components/workspace/admin-shell/AdminShell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/workspace/admin-shell/ShellSettingsPanel.svelte

@@ -22,8 +22,12 @@ interface Props {
   account?: boolean;
   /** Where the sign-out control goes; the control is hidden when neither this nor `onSignOut` is given. */
   signOutHref?: string;
-  /** Called by the sign-out control instead of following `signOutHref`. */
-  onSignOut?: () => void;
+  /**
+   * Called by the sign-out control instead of following `signOutHref`. May
+   * return a promise: the control is busy and disabled while it is pending;
+   * a rejection shows an inline error and leaves the section as it was.
+   */
+  onSignOut?: () => unknown;
 }
 
 const {
@@ -52,18 +56,49 @@ const REGION_OF_EDGE: Record<PanelEdge, ShellRegion> = {
 const regionLabel = (edge: PanelEdge) =>
   t(SHELL_REGION_MESSAGES[REGION_OF_EDGE[edge]]);
 
-/** The areas this shell offers; hidden ones stay listed when a layout can restore them. */
+/**
+ * The areas this shell offers. A region the user hid stays listed so Show can
+ * restore it; a region that is shown but not rendered (nothing to put in it, or
+ * not presented at this width) is left out because its row would do nothing.
+ */
 const rows = $derived(
   layout
     ? layout.panels
-        .filter((panel) => panel.available)
+        .filter(
+          (panel) =>
+            panel.available &&
+            (!panel.visible || shell.regionsRendered[panel.edge]),
+        )
         .map((panel) => ({ edge: panel.edge, visible: panel.visible }))
     : edges
-        .filter((edge) => shell.panels[edge] !== 'hidden')
+        .filter(
+          (edge) =>
+            shell.panels[edge] !== 'hidden' && shell.regionsRendered[edge],
+        )
         .map((edge) => ({ edge, visible: true })),
 );
-const visibleCount = $derived(rows.filter((row) => row.visible).length);
+/** Counts every shown region, rendered or not, so the last real one can't be hidden. */
+const visibleCount = $derived(
+  layout
+    ? layout.panels.filter((panel) => panel.available && panel.visible).length
+    : rows.length,
+);
 const shortcutRows = $derived(rows.filter((row) => row.visible));
+let signingOut = $state(false);
+let signOutFailed = $state(false);
+
+async function runSignOut() {
+  if (signingOut || !onSignOut) return;
+  signingOut = true;
+  signOutFailed = false;
+  try {
+    await onSignOut();
+  } catch {
+    signOutFailed = true;
+  } finally {
+    signingOut = false;
+  }
+}
 const canSignOut = $derived(Boolean(signOutHref || onSignOut));
 const hotkeysEnabled = $derived(shell.settings.hotkeysEnabled !== false);
 
@@ -118,9 +153,19 @@ function conflictFor(edge: PanelEdge): string | null {
       {/if}
       {#if canSignOut}
         {#if onSignOut}
-          <Button variant="secondary" size="sm" onclick={onSignOut}>
+          <Button
+            variant="secondary"
+            size="sm"
+            loading={signingOut}
+            onclick={runSignOut}
+          >
             {t(M['ui.shell_settings.sign_out'])}
           </Button>
+          {#if signOutFailed}
+            <p role="alert" data-smrt-part="error">
+              {t(M['ui.shell_settings.sign_out_failed'])}
+            </p>
+          {/if}
         {:else}
           <Button variant="secondary" size="sm" href={signOutHref}>
             {t(M['ui.shell_settings.sign_out'])}

package/dist/components/workspace/admin-shell/ShellSettingsPanel.svelte.d.ts

@@ -5,8 +5,12 @@ interface Props {
     account?: boolean;
     /** Where the sign-out control goes; the control is hidden when neither this nor `onSignOut` is given. */
     signOutHref?: string;
-    /** Called by the sign-out control instead of following `signOutHref`. */
-    onSignOut?: () => void;
+    /**
+     * Called by the sign-out control instead of following `signOutHref`. May
+     * return a promise: the control is busy and disabled while it is pending;
+     * a rejection shows an inline error and leaves the section as it was.
+     */
+    onSignOut?: () => unknown;
 }
 declare const ShellSettingsPanel: import("svelte").Component<Props, {}, "">;
 type ShellSettingsPanel = ReturnType<typeof ShellSettingsPanel>;

package/dist/components/workspace/admin-shell/ShellSettingsPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShellSettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSettingsPanel.svelte.ts"],"names":[],"mappings":"AAoBA,UAAU,KAAK;IACb,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA+MD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ShellSettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSettingsPanel.svelte.ts"],"names":[],"mappings":"AAoBA,UAAU,KAAK;IACb,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC;CAC3B;AAmPD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}