@vantageos/mosaic 0.3.1 → 0.5.0

package/dist/display.js

@@ -1,7 +1,7 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { z } from 'zod';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/display/TableView.tsx
 
@@ -27,6 +27,8 @@ var EN = {
   "TokenDisplayOnceModal.copied": "Copied",
   "StatusBadge.aria.status": "Status",
   "StatusBadge.error.invalidProps": "StatusBadge: invalid props",
+  "Badge.aria.label": "Badge",
+  "Badge.error.invalidProps": "Badge: invalid props",
   "EmptyState.error.invalidProps": "EmptyState: invalid props",
   "Toast.aria.close": "Close notification",
   "Toast.error.invalidProps": "Toast: invalid props",
@@ -96,7 +98,99 @@ var EN = {
   "Select.search.placeholder": "Search\u2026",
   "Select.empty": "No options available",
   "Select.error.required": "Select an option",
-  "Select.error.invalidProps": "Select: invalid props"
+  "Select.error.invalidProps": "Select: invalid props",
+  "ModelContext.selection.one": "1 row selected",
+  "ModelContext.selection.many": "{n} rows selected",
+  "ModelContext.selection.none": "No rows selected",
+  "TableView.sort.by": "Sort by",
+  "TableView.select.row": "Select row",
+  "TableView.select.all": "Select all rows",
+  "TableView.loading": "Loading table",
+  "StatCard.title": "Statistic",
+  "StatCard.trend.up": "Up",
+  "StatCard.trend.down": "Down",
+  "StatCard.trend.flat": "Flat",
+  "StatCard.empty.message": "No statistic to display",
+  "StatCard.loading": "Loading statistic",
+  "StatCard.error.invalidProps": "StatCard: invalid props",
+  "BalanceCard.title": "Balance",
+  "BalanceCard.network": "Network",
+  "BalanceCard.testnet": "Testnet",
+  "BalanceCard.address": "Address",
+  "BalanceCard.contract": "Token contract",
+  "BalanceCard.value": "Value",
+  "BalanceCard.copy": "Copy address",
+  "BalanceCard.copied": "Address copied",
+  "BalanceCard.empty.message": "No balance to display",
+  "BalanceCard.loading": "Loading balance",
+  "BalanceCard.error.invalidProps": "BalanceCard: invalid props",
+  "Timeline.title": "Timeline",
+  "Timeline.status.done": "Done",
+  "Timeline.status.current": "In progress",
+  "Timeline.status.pending": "Pending",
+  "Timeline.status.blocked": "Blocked",
+  "Timeline.completed": "{n} completed",
+  "Timeline.more": "{n} more",
+  "Timeline.empty.message": "No steps to display",
+  "Timeline.loading": "Loading timeline",
+  "Timeline.error.invalidProps": "Timeline: invalid props",
+  "MessageFeed.title": "Messages",
+  "MessageFeed.unread": "Unread",
+  "MessageFeed.attachment": "Attachment",
+  "MessageFeed.showing": "Showing the latest {n} of {total}",
+  "MessageFeed.empty.message": "No messages",
+  "MessageFeed.loading": "Loading messages",
+  "MessageFeed.error.invalidProps": "MessageFeed: invalid props",
+  "PipelineBoard.title": "Pipeline",
+  "PipelineBoard.deals.one": "1 deal",
+  "PipelineBoard.deals.many": "{n} deals",
+  "PipelineBoard.total": "Total",
+  "PipelineBoard.stage.empty": "No deals",
+  "PipelineBoard.filter.label": "Show stages",
+  "PipelineBoard.summary.open": "Open full board",
+  "PipelineBoard.more": "{n} more stages",
+  "PipelineBoard.empty.message": "No pipeline to display",
+  "PipelineBoard.loading": "Loading pipeline",
+  "PipelineBoard.error.invalidProps": "PipelineBoard: invalid props",
+  "PipelineBoard.col.stage": "Stage",
+  "PipelineBoard.col.deals": "Deals",
+  "TransactionPreview.title": "Transaction preview",
+  "TransactionPreview.notice": "NOT SIGNED - preparation only",
+  "TransactionPreview.kind.transfer": "Transfer",
+  "TransactionPreview.kind.swap": "Swap",
+  "TransactionPreview.testnet": "Testnet",
+  "TransactionPreview.field.network": "Network",
+  "TransactionPreview.field.from": "From",
+  "TransactionPreview.field.to": "To",
+  "TransactionPreview.field.amount": "Amount",
+  "TransactionPreview.field.fee": "Network fee",
+  "TransactionPreview.field.sell": "Sell",
+  "TransactionPreview.field.buy": "Buy",
+  "TransactionPreview.field.minReceived": "Minimum received",
+  "TransactionPreview.field.route": "Route",
+  "TransactionPreview.field.priceImpact": "Price impact",
+  "TransactionPreview.field.expires": "Quote expires",
+  "TransactionPreview.priceImpact.high": "High price impact",
+  "TransactionPreview.simulation.success": "Simulation succeeded",
+  "TransactionPreview.simulation.failed": "Simulation failed",
+  "TransactionPreview.simulation.unavailable": "Simulation unavailable",
+  "TransactionPreview.warnings": "Warnings",
+  "TransactionPreview.handoff": "Open in wallet",
+  "TransactionPreview.empty.message": "No transaction to preview",
+  "TransactionPreview.loading": "Loading preview",
+  "TransactionPreview.error.invalidProps": "TransactionPreview: invalid props",
+  "ProgressBar.title": "Progress",
+  "ConfirmDialog.title": "Confirmation",
+  "ConfirmDialog.options": "Answers",
+  "TableView.title": "Data table",
+  "TableView.markdown.more": "{n} more rows",
+  "MarkdownRenderer.title": "Markdown content",
+  "TokenDisplayOnceModal.title": "Token (shown once)",
+  "StatusBadge.title": "Status",
+  "TokenDisplayOnceModal.notice.once": "The value is shown once, in the app view only.",
+  "TokenDisplayOnceModal.field.scope": "Scope",
+  "TokenDisplayOnceModal.field.expires": "Expires",
+  "TokenDisplayOnceModal.field.fingerprint": "Fingerprint"
 };
 var FR = {
   // ─── Non-forms components ──────────────────────────────────────────────────
@@ -119,6 +213,8 @@ var FR = {
   "TokenDisplayOnceModal.copied": "Copi\xE9",
   "StatusBadge.aria.status": "Statut",
   "StatusBadge.error.invalidProps": "StatusBadge : propri\xE9t\xE9s invalides",
+  "Badge.aria.label": "Badge",
+  "Badge.error.invalidProps": "Badge : propri\xE9t\xE9s invalides",
   "EmptyState.error.invalidProps": "EmptyState : propri\xE9t\xE9s invalides",
   "Toast.aria.close": "Fermer la notification",
   "Toast.error.invalidProps": "Toast : propri\xE9t\xE9s invalides",
@@ -188,7 +284,99 @@ var FR = {
   "Select.search.placeholder": "Rechercher\u2026",
   "Select.empty": "Aucune option disponible",
   "Select.error.required": "S\xE9lectionnez une option",
-  "Select.error.invalidProps": "Select : propri\xE9t\xE9s invalides"
+  "Select.error.invalidProps": "Select : propri\xE9t\xE9s invalides",
+  "ModelContext.selection.one": "1 ligne s\xE9lectionn\xE9e",
+  "ModelContext.selection.many": "{n} lignes s\xE9lectionn\xE9es",
+  "ModelContext.selection.none": "Aucune ligne s\xE9lectionn\xE9e",
+  "TableView.sort.by": "Trier par",
+  "TableView.select.row": "S\xE9lectionner la ligne",
+  "TableView.select.all": "Tout s\xE9lectionner",
+  "TableView.loading": "Chargement du tableau",
+  "StatCard.title": "Statistique",
+  "StatCard.trend.up": "En hausse",
+  "StatCard.trend.down": "En baisse",
+  "StatCard.trend.flat": "Stable",
+  "StatCard.empty.message": "Aucune statistique \xE0 afficher",
+  "StatCard.loading": "Chargement de la statistique",
+  "StatCard.error.invalidProps": "StatCard : propri\xE9t\xE9s invalides",
+  "BalanceCard.title": "Solde",
+  "BalanceCard.network": "R\xE9seau",
+  "BalanceCard.testnet": "R\xE9seau de test",
+  "BalanceCard.address": "Adresse",
+  "BalanceCard.contract": "Contrat du jeton",
+  "BalanceCard.value": "Valeur",
+  "BalanceCard.copy": "Copier l'adresse",
+  "BalanceCard.copied": "Adresse copi\xE9e",
+  "BalanceCard.empty.message": "Aucun solde \xE0 afficher",
+  "BalanceCard.loading": "Chargement du solde",
+  "BalanceCard.error.invalidProps": "BalanceCard : propri\xE9t\xE9s invalides",
+  "Timeline.title": "Chronologie",
+  "Timeline.status.done": "Termin\xE9",
+  "Timeline.status.current": "En cours",
+  "Timeline.status.pending": "\xC0 venir",
+  "Timeline.status.blocked": "Bloqu\xE9",
+  "Timeline.completed": "{n} termin\xE9(s)",
+  "Timeline.more": "{n} de plus",
+  "Timeline.empty.message": "Aucune \xE9tape \xE0 afficher",
+  "Timeline.loading": "Chargement de la chronologie",
+  "Timeline.error.invalidProps": "Timeline : propri\xE9t\xE9s invalides",
+  "MessageFeed.title": "Messages",
+  "MessageFeed.unread": "Non lu",
+  "MessageFeed.attachment": "Pi\xE8ce jointe",
+  "MessageFeed.showing": "Affichage des {n} derniers sur {total}",
+  "MessageFeed.empty.message": "Aucun message",
+  "MessageFeed.loading": "Chargement des messages",
+  "MessageFeed.error.invalidProps": "MessageFeed : propri\xE9t\xE9s invalides",
+  "PipelineBoard.title": "Pipeline",
+  "PipelineBoard.deals.one": "1 affaire",
+  "PipelineBoard.deals.many": "{n} affaires",
+  "PipelineBoard.total": "Total",
+  "PipelineBoard.stage.empty": "Aucune affaire",
+  "PipelineBoard.filter.label": "Afficher les \xE9tapes",
+  "PipelineBoard.summary.open": "Ouvrir le tableau complet",
+  "PipelineBoard.more": "{n} \xE9tapes de plus",
+  "PipelineBoard.empty.message": "Aucun pipeline \xE0 afficher",
+  "PipelineBoard.loading": "Chargement du pipeline",
+  "PipelineBoard.error.invalidProps": "PipelineBoard : propri\xE9t\xE9s invalides",
+  "PipelineBoard.col.stage": "\xC9tape",
+  "PipelineBoard.col.deals": "Affaires",
+  "TransactionPreview.title": "Aper\xE7u de transaction",
+  "TransactionPreview.notice": "NON SIGN\xC9 - pr\xE9paration uniquement",
+  "TransactionPreview.kind.transfer": "Transfert",
+  "TransactionPreview.kind.swap": "\xC9change",
+  "TransactionPreview.testnet": "R\xE9seau de test",
+  "TransactionPreview.field.network": "R\xE9seau",
+  "TransactionPreview.field.from": "De",
+  "TransactionPreview.field.to": "\xC0",
+  "TransactionPreview.field.amount": "Montant",
+  "TransactionPreview.field.fee": "Frais de r\xE9seau",
+  "TransactionPreview.field.sell": "Vendre",
+  "TransactionPreview.field.buy": "Acheter",
+  "TransactionPreview.field.minReceived": "Minimum re\xE7u",
+  "TransactionPreview.field.route": "Itin\xE9raire",
+  "TransactionPreview.field.priceImpact": "Impact sur le prix",
+  "TransactionPreview.field.expires": "Expiration du devis",
+  "TransactionPreview.priceImpact.high": "Impact sur le prix \xE9lev\xE9",
+  "TransactionPreview.simulation.success": "Simulation r\xE9ussie",
+  "TransactionPreview.simulation.failed": "Simulation \xE9chou\xE9e",
+  "TransactionPreview.simulation.unavailable": "Simulation indisponible",
+  "TransactionPreview.warnings": "Avertissements",
+  "TransactionPreview.handoff": "Ouvrir dans le portefeuille",
+  "TransactionPreview.empty.message": "Aucune transaction \xE0 pr\xE9visualiser",
+  "TransactionPreview.loading": "Chargement de l'aper\xE7u",
+  "TransactionPreview.error.invalidProps": "TransactionPreview : propri\xE9t\xE9s invalides",
+  "ProgressBar.title": "Progression",
+  "ConfirmDialog.title": "Confirmation",
+  "ConfirmDialog.options": "R\xE9ponses",
+  "TableView.title": "Tableau de donn\xE9es",
+  "TableView.markdown.more": "{n} lignes de plus",
+  "MarkdownRenderer.title": "Contenu Markdown",
+  "TokenDisplayOnceModal.title": "Jeton (affich\xE9 une fois)",
+  "StatusBadge.title": "Statut",
+  "TokenDisplayOnceModal.notice.once": "La valeur n'est affich\xE9e qu'une fois, dans la vue de l'application uniquement.",
+  "TokenDisplayOnceModal.field.scope": "Port\xE9e",
+  "TokenDisplayOnceModal.field.expires": "Expire le",
+  "TokenDisplayOnceModal.field.fingerprint": "Empreinte"
 };
 var TABLE = {
   en: EN,
@@ -197,92 +385,279 @@ var TABLE = {
 function t(key, locale = "en") {
   return TABLE[locale]?.[key] ?? TABLE.en[key];
 }
+
+// src/components/display/Skeleton.logic.ts
+function getAnimationClass(animation) {
+  switch (animation) {
+    case "pulse":
+      return "animate-pulse";
+    case "wave":
+      return "skeleton-wave";
+    case "none":
+      return "";
+  }
+}
+function getVariantClass(variant) {
+  switch (variant) {
+    case "rect":
+      return "rounded-md";
+    case "circle":
+      return "rounded-full";
+    case "text":
+      return "rounded";
+  }
+}
+var SKELETON_BG_CLASS = "bg-gray-200 dark:bg-gray-700";
+function textLineKey(index) {
+  return `skeleton-line-${index}`;
+}
+function lastLineWidth(index, total, baseWidth) {
+  if (total > 1 && index === total - 1) {
+    return "75%";
+  }
+  return baseWidth;
+}
+var SkeletonPropsSchema = z.object({
+  variant: z.enum(["rect", "circle", "text"]).default("rect"),
+  width: z.union([z.string().min(1), z.number().positive()]).optional(),
+  height: z.union([z.string().min(1), z.number().positive()]).optional(),
+  count: z.number().int().min(1).max(20).default(1),
+  animation: z.enum(["pulse", "wave", "none"]).default("pulse"),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateSkeletonProps(raw) {
+  return SkeletonPropsSchema.parse(raw);
+}
+function resolveSkeletonDimensions(variant, width, height) {
+  const toCss = (v, fallback) => {
+    if (v === void 0) return fallback;
+    if (typeof v === "number") return `${v}px`;
+    return v;
+  };
+  if (variant === "circle") {
+    const size = width !== void 0 ? toCss(width, "40px") : height !== void 0 ? toCss(height, "40px") : "40px";
+    return { widthCss: size, heightCss: size };
+  }
+  if (variant === "text") {
+    return {
+      widthCss: toCss(width, "100%"),
+      heightCss: toCss(height, "16px")
+    };
+  }
+  return {
+    widthCss: toCss(width, "100%"),
+    heightCss: toCss(height, "100px")
+  };
+}
+function SkeletonInner({ variant, width, height, count, animation, locale }) {
+  const { widthCss, heightCss } = resolveSkeletonDimensions(variant, width, height);
+  const animClass = getAnimationClass(animation);
+  const variantClass = getVariantClass(variant);
+  const ariaLabel = t("Skeleton.aria.label", locale);
+  const baseClass = `${SKELETON_BG_CLASS} ${variantClass} ${animClass}`.trim();
+  if (variant === "text") {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: role="status" is the correct ARIA pattern for loading indicators; <output> conveys form output semantics which is incorrect here
+      /* @__PURE__ */ jsx("div", { role: "status", "aria-label": ariaLabel, "aria-busy": "true", className: "flex flex-col gap-2", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `block ${baseClass}`,
+          style: {
+            width: lastLineWidth(i, count, widthCss),
+            height: heightCss
+          },
+          "aria-hidden": "true"
+        },
+        textLineKey(i)
+      )) })
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-busy": "true",
+      className: `block ${baseClass}`,
+      style: { width: widthCss, height: heightCss }
+    }
+  );
+}
+function Skeleton(raw) {
+  try {
+    const props = validateSkeletonProps(raw);
+    return /* @__PURE__ */ jsx(SkeletonInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("span", { role: "alert", className: "text-red-600 text-sm", children: t("Skeleton.error.invalidProps", locale) });
+  }
+}
+
+// src/components/display/TableView.logic.ts
+function isMissing(v) {
+  return v === null || v === void 0 || v === "";
+}
+var DECIMAL = /^(-)?(\d+)(?:\.(\d+))?$/;
+function parseDecimal(s) {
+  const m = DECIMAL.exec(s.trim());
+  if (!m) return void 0;
+  const int = (m[2] ?? "0").replace(/^0+(?=\d)/, "");
+  const frac = (m[3] ?? "").replace(/0+$/, "");
+  const zero = int === "0" && frac === "";
+  return { neg: m[1] === "-" && !zero, int, frac };
+}
+function compareDecimalStrings(a, b) {
+  const x = parseDecimal(a);
+  const y = parseDecimal(b);
+  if (!x || !y) return 0;
+  if (x.neg !== y.neg) return x.neg ? -1 : 1;
+  const sign = x.neg ? -1 : 1;
+  if (x.int.length !== y.int.length) return sign * (x.int.length < y.int.length ? -1 : 1);
+  if (x.int !== y.int) return sign * (x.int < y.int ? -1 : 1);
+  const len = Math.max(x.frac.length, y.frac.length);
+  const fx = x.frac.padEnd(len, "0");
+  const fy = y.frac.padEnd(len, "0");
+  if (fx === fy) return 0;
+  return sign * (fx < fy ? -1 : 1);
+}
+var collators = /* @__PURE__ */ new Map();
+function collator(locale) {
+  let c = collators.get(locale);
+  if (!c) {
+    c = new Intl.Collator(locale, { numeric: true, sensitivity: "base" });
+    collators.set(locale, c);
+  }
+  return c;
+}
+function compareCells(a, b, kind, locale) {
+  if (kind === "amount") return compareDecimalStrings(String(a), String(b));
+  if (kind === "number") {
+    const x = Number(a);
+    const y = Number(b);
+    if (Number.isNaN(x) || Number.isNaN(y)) return collator(locale).compare(String(a), String(b));
+    return x === y ? 0 : x < y ? -1 : 1;
+  }
+  return collator(locale).compare(String(a), String(b));
+}
+function sortItems(items, getValue, kind, direction, locale) {
+  const sign = direction === "asc" ? 1 : -1;
+  return items.map((item, index) => ({ item, index, value: getValue(item) })).sort((p, q) => {
+    const pm = isMissing(p.value);
+    const qm = isMissing(q.value);
+    if (pm || qm) return pm && qm ? p.index - q.index : pm ? 1 : -1;
+    const c = compareCells(p.value, q.value, kind, locale);
+    return c !== 0 ? sign * c : p.index - q.index;
+  }).map((e) => e.item);
+}
+function nextSort(current, key) {
+  if (!current || current.key !== key) return { key, direction: "asc" };
+  return current.direction === "asc" ? { key, direction: "desc" } : void 0;
+}
+function toggleSelection(current, key, mode) {
+  if (mode === "none") return new Set(current);
+  if (mode === "single") return current.has(key) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([key]);
+  const next = new Set(current);
+  if (!next.delete(key)) next.add(key);
+  return next;
+}
+function toggleAll(current, allKeys) {
+  return allKeys.length > 0 && allKeys.every((k) => current.has(k)) ? /* @__PURE__ */ new Set() : new Set(allKeys);
+}
+var ColumnKindSchema = z.enum(["text", "number", "amount", "icon"]);
+var AlignSchema = z.enum(["start", "center", "end"]);
 var ColumnDefSchema = z.object({
   key: z.string().min(1),
-  header: z.string().min(1)
+  header: z.string().min(1),
+  /** Cell kind: drives comparison and rendering. `amount` = decimal STRING, never a float. */
+  type: ColumnKindSchema.default("text"),
+  /** Defaults to `end` for `number` / `amount` columns, `start` otherwise. */
+  align: AlignSchema.optional(),
+  /** CSS width: a number is pixels. */
+  width: z.union([z.string().min(1), z.number().positive()]).optional(),
+  sortable: z.boolean().default(false),
+  /**
+   * Values of this column are masked in the A-1 markdown fallback and kept out of the HTML
+   * props of a tool result (delivered via the result `_meta`), never written to `content[]`.
+   */
+  sensitive: z.boolean().default(false)
   // render is a runtime function — excluded from Zod, typed separately
 });
+var SortSchema = z.object({ key: z.string().min(1), direction: z.enum(["asc", "desc"]) });
 var TableViewPropsSchema = z.object({
   columns: z.array(ColumnDefSchema).min(1, "TableView requires at least one column"),
+  /**
+   * Serialisable rows, for views built through `createMosaicResource` (the React props carry
+   * `rows` separately).
+   */
+  rows: z.array(z.record(z.unknown())).default([]),
   virtualizeThreshold: z.number().int().positive().default(100),
   ariaLabel: z.string().min(1),
-  locale: z.enum(["en", "fr"]).default("en")
+  locale: z.enum(["en", "fr"]).default("en"),
+  selectionMode: z.enum(["none", "single", "multiple"]).default("none"),
+  /** Initial sort. */
+  sort: SortSchema.optional(),
+  stickyHeader: z.boolean().default(false),
+  /** Scroll region height when `stickyHeader` is on (pixels). */
+  maxHeight: z.number().int().positive().default(400),
+  density: z.enum(["comfortable", "compact"]).default("comfortable"),
+  loading: z.boolean().default(false)
 });
 function validateTableViewProps(raw) {
   return TableViewPropsSchema.parse(raw);
 }
 var OVERSCAN = 5;
-function TableView(props) {
-  let validatedThreshold = 100;
+var SKELETON_ROWS = ["head", "r1", "r2", "r3", "r4", "r5"];
+function resolveLocale(l) {
+  return l === "fr" ? "fr" : "en";
+}
+function validate(props) {
   try {
     const validated = validateTableViewProps({
-      columns: props.columns.map(({ key, header }) => ({ key, header })),
+      columns: props.columns.map(({ key, header, type, align, width, sortable }) => ({
+        key,
+        header,
+        type,
+        align,
+        width,
+        sortable
+      })),
       virtualizeThreshold: props.virtualizeThreshold,
       ariaLabel: props.ariaLabel,
-      locale: props.locale
+      locale: props.locale,
+      selectionMode: props.selectionMode,
+      density: props.density
     });
-    validatedThreshold = validated.virtualizeThreshold;
+    return validated.virtualizeThreshold;
   } catch {
-    const locale = props.locale === "fr" ? "fr" : "en";
-    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TableView.error.invalidProps", locale) });
+    return void 0;
   }
-  const isVirtual = props.rows.length > validatedThreshold;
-  const resolvedLocale = props.locale === "fr" ? "fr" : "en";
-  if (isVirtual) {
-    return /* @__PURE__ */ jsx(
-      VirtualTable,
-      {
-        rows: props.rows,
-        columns: props.columns,
-        ariaLabel: props.ariaLabel,
-        locale: resolvedLocale,
-        onRowClick: props.onRowClick
-      }
-    );
+}
+function TableView(props) {
+  const threshold = validate(props);
+  if (threshold === void 0) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TableView.error.invalidProps", resolveLocale(props.locale)) });
   }
   return /* @__PURE__ */ jsx(
-    StaticTable,
+    TableCore,
     {
+      ...props,
       rows: props.rows,
-      columns: props.columns,
-      ariaLabel: props.ariaLabel,
-      locale: resolvedLocale,
-      onRowClick: props.onRowClick
+      virtualizeThreshold: threshold,
+      locale: resolveLocale(props.locale)
     }
   );
 }
 function StreamingTableView(props) {
-  let validatedThreshold = 100;
-  try {
-    const validated = validateTableViewProps({
-      columns: props.columns.map(({ key, header }) => ({ key, header })),
-      virtualizeThreshold: props.virtualizeThreshold,
-      ariaLabel: props.ariaLabel,
-      locale: props.locale
-    });
-    validatedThreshold = validated.virtualizeThreshold;
-  } catch {
-    const locale = props.locale === "fr" ? "fr" : "en";
-    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TableView.error.invalidProps", locale) });
+  const threshold = validate(props);
+  if (threshold === void 0) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TableView.error.invalidProps", resolveLocale(props.locale)) });
   }
-  return /* @__PURE__ */ jsx(
-    StreamingTableViewInner,
-    {
-      ...props,
-      virtualizeThreshold: validatedThreshold,
-      onRowClick: props.onRowClick
-    }
-  );
+  return /* @__PURE__ */ jsx(StreamingTableViewInner, { ...props, virtualizeThreshold: threshold });
 }
 function StreamingTableViewInner({
-  columns,
   rows$,
-  virtualizeThreshold = 100,
-  ariaLabel,
-  locale,
-  onRowClick
+  ...rest
 }) {
-  const resolvedLocale = locale === "fr" ? "fr" : "en";
   const [rows, setRows] = useState([]);
   useEffect(() => {
     setRows([]);
@@ -293,87 +668,282 @@ function StreamingTableViewInner({
       sub.unsubscribe();
     };
   }, [rows$]);
-  const isVirtual = rows.length > virtualizeThreshold;
-  if (isVirtual) {
+  return /* @__PURE__ */ jsx(TableCore, { ...rest, rows, locale: resolveLocale(rest.locale) });
+}
+function kindOf(col) {
+  return col.type ?? "text";
+}
+function alignOf(col) {
+  return col.align ?? (col.type === "amount" || col.type === "number" ? "end" : "start");
+}
+function cellText(row, key) {
+  return String(row[key] ?? "");
+}
+function safeIconSrc(v) {
+  if (typeof v !== "string") return void 0;
+  return /^(https?:\/\/|data:image\/)/i.test(v) ? v : void 0;
+}
+function renderCell(col, row) {
+  if (col.render) {
+    return col.render(row);
+  }
+  const value = row[col.key];
+  if (col.type === "icon") {
+    const src = safeIconSrc(value);
+    return src ? /* @__PURE__ */ jsx("img", { src, alt: "", width: 20, height: 20, style: { verticalAlign: "middle" } }) : null;
+  }
+  if (col.type === "amount" || col.type === "number") {
+    return /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: String(value ?? "") });
+  }
+  return String(value ?? "");
+}
+function TableCore(props) {
+  const {
+    columns,
+    rows,
+    ariaLabel,
+    locale,
+    selectionMode = "none",
+    stickyHeader = false,
+    density = "comfortable"
+  } = props;
+  const [innerSort, setInnerSort] = useState(props.defaultSort);
+  const sort = props.sort === void 0 ? innerSort : props.sort ?? void 0;
+  const onSort = (key) => {
+    const next = nextSort(sort, key);
+    if (props.sort === void 0) setInnerSort(next);
+    props.onSortChange?.(next);
+  };
+  const items = useMemo(
+    () => rows.map((row, i) => {
+      const id = row.id;
+      return { row, key: id != null ? String(id) : `row-${i}` };
+    }),
+    [rows]
+  );
+  const sorted = useMemo(() => {
+    const col = sort ? columns.find((c) => c.key === sort.key) : void 0;
+    if (!sort || !col) return items;
+    return sortItems(
+      items,
+      (it) => it.row[col.key],
+      kindOf(col),
+      sort.direction,
+      locale
+    );
+  }, [items, sort, columns, locale]);
+  const [innerSelected, setInnerSelected] = useState(
+    () => new Set(props.defaultSelectedKeys ?? [])
+  );
+  const selected = props.selectedKeys ? new Set(props.selectedKeys) : innerSelected;
+  const commit = (next) => {
+    if (!props.selectedKeys) setInnerSelected(next);
+    const chosen = sorted.filter((it) => next.has(it.key));
+    props.onSelectionChange?.(
+      chosen.map((it) => it.row),
+      chosen.map((it) => it.key)
+    );
+  };
+  const selection = selectionMode === "none" ? void 0 : {
+    mode: selectionMode,
+    selected,
+    toggle: (key) => commit(toggleSelection(selected, key, selectionMode)),
+    toggleAll: () => commit(
+      toggleAll(
+        selected,
+        sorted.map((it) => it.key)
+      )
+    )
+  };
+  if (props.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("TableView.loading", locale), lang: locale, children: SKELETON_ROWS.map((_, i) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        height: i === 0 ? 24 : 36,
+        locale
+      },
+      SKELETON_ROWS[i]
+    )) });
+  }
+  const content = {
+    items: sorted,
+    columns,
+    ariaLabel,
+    locale,
+    onRowClick: props.onRowClick,
+    sort,
+    onSort,
+    selection,
+    sticky: stickyHeader,
+    density
+  };
+  const isVirtual = rows.length > props.virtualizeThreshold;
+  if (isVirtual) return /* @__PURE__ */ jsx(VirtualTable, { ...content });
+  if (stickyHeader) {
     return /* @__PURE__ */ jsx(
-      VirtualTable,
+      "div",
       {
-        rows,
-        columns,
-        ariaLabel,
-        locale: resolvedLocale,
-        onRowClick
+        tabIndex: 0,
+        role: "region",
+        "aria-label": ariaLabel,
+        style: { maxHeight: props.maxHeight ?? 400, overflow: "auto" },
+        children: /* @__PURE__ */ jsx(StaticTable, { ...content })
       }
     );
   }
+  return /* @__PURE__ */ jsx(StaticTable, { ...content });
+}
+var CELL_PADDING = { comfortable: void 0, compact: "2px 6px" };
+function HeaderRow({
+  columns,
+  locale,
+  sort,
+  onSort,
+  selection,
+  sticky,
+  density,
+  items
+}) {
+  const padding = CELL_PADDING[density];
+  const stickyStyle = sticky ? { position: "sticky", top: 0, background: "var(--mosaic-color-background, Canvas)" } : {};
+  const allSelected = items.length > 0 && items.every((it) => selection?.selected.has(it.key));
+  const someSelected = items.some((it) => selection?.selected.has(it.key));
+  return /* @__PURE__ */ jsxs("tr", { children: [
+    selection ? /* @__PURE__ */ jsx("th", { scope: "col", style: { ...stickyStyle, padding, width: 32 }, children: selection.mode === "multiple" ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        "aria-label": t("TableView.select.all", locale),
+        checked: allSelected,
+        ref: (el) => {
+          if (el) el.indeterminate = someSelected && !allSelected;
+        },
+        onChange: selection.toggleAll
+      }
+    ) : null }) : null,
+    columns.map((col) => {
+      const dir = sort?.key === col.key ? sort.direction : void 0;
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          "aria-sort": col.sortable ? dir === "asc" ? "ascending" : dir === "desc" ? "descending" : "none" : void 0,
+          style: {
+            ...stickyStyle,
+            padding,
+            textAlign: alignOf(col),
+            ...col.width !== void 0 ? { width: col.width } : {}
+          },
+          children: col.sortable ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${t("TableView.sort.by", locale)} ${col.header}`,
+              onClick: () => onSort(col.key),
+              style: { all: "inherit", cursor: "pointer", padding: 0 },
+              children: [
+                col.header,
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: dir === "asc" ? " \u25B2" : dir === "desc" ? " \u25BC" : "" })
+              ]
+            }
+          ) : col.header
+        },
+        col.key
+      );
+    })
+  ] });
+}
+function SelectCell({
+  item,
+  columns,
+  selection,
+  locale,
+  padding
+}) {
+  const first = columns[0];
+  const label = `${t("TableView.select.row", locale)}: ${first ? cellText(item.row, first.key) : item.key}`;
   return /* @__PURE__ */ jsx(
-    StaticTable,
+    "td",
     {
-      rows,
-      columns,
-      ariaLabel,
-      locale: resolvedLocale,
-      onRowClick
+      style: { padding, width: 32 },
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: selection.mode === "multiple" ? "checkbox" : "radio",
+          name: selection.mode === "single" ? "mosaic-table-selection" : void 0,
+          "aria-label": label,
+          checked: selection.selected.has(item.key),
+          onChange: () => selection.toggle(item.key),
+          onKeyDown: (e) => e.stopPropagation()
+        }
+      )
     }
   );
 }
-function renderCell(col, row) {
-  if (col.render) {
-    return col.render(row);
-  }
-  return String(row[col.key] ?? "");
+function rowActivation(onRowClick, row, index) {
+  if (!onRowClick) return {};
+  return {
+    role: "button",
+    tabIndex: 0,
+    onClick: () => onRowClick(row, index),
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onRowClick(row, index);
+      }
+    }
+  };
 }
-function StaticTable({
-  rows,
-  columns,
-  ariaLabel,
-  locale,
-  onRowClick
-}) {
+function StaticTable(props) {
+  const { items, columns, ariaLabel, locale, onRowClick, selection, density } = props;
   const emptyMsg = t("TableView.empty.message", locale);
+  const padding = CELL_PADDING[density];
+  const colSpan = columns.length + (selection ? 1 : 0);
   return /* @__PURE__ */ jsxs(
     "table",
     {
       "aria-label": ariaLabel,
-      "aria-rowcount": rows.length,
+      "aria-rowcount": items.length,
+      "data-density": density,
       style: { width: "100%", borderCollapse: "collapse" },
       children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", children: col.header }, col.key)) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, "aria-label": emptyMsg, children: emptyMsg }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(HeaderRow, { ...props }) }),
+        /* @__PURE__ */ jsx("tbody", { children: items.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, "aria-label": emptyMsg, children: emptyMsg }) }) : items.map((item, rowIndex) => /* @__PURE__ */ jsxs(
           "tr",
           {
             "aria-rowindex": rowIndex + 2,
-            ...onRowClick ? {
-              role: "button",
-              tabIndex: 0,
-              style: { cursor: "pointer" },
-              onClick: () => onRowClick(row, rowIndex),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onRowClick(row, rowIndex);
+            "data-selected": selection?.selected.has(item.key) ? "true" : void 0,
+            ...onRowClick ? { style: { cursor: "pointer" } } : {},
+            ...rowActivation(onRowClick, item.row, rowIndex),
+            children: [
+              selection ? /* @__PURE__ */ jsx(
+                SelectCell,
+                {
+                  item,
+                  columns,
+                  selection,
+                  locale,
+                  padding
                 }
-              }
-            } : {},
-            children: columns.map((col) => /* @__PURE__ */ jsx("td", { children: renderCell(col, row) }, col.key))
+              ) : null,
+              columns.map((col) => /* @__PURE__ */ jsx("td", { style: { padding, textAlign: alignOf(col) }, children: renderCell(col, item.row) }, col.key))
+            ]
           },
-          row.id != null ? String(row.id) : `row-${rowIndex}`
+          item.key
         )) })
       ]
     }
   );
 }
-function VirtualTable({
-  rows,
-  columns,
-  ariaLabel,
-  // locale reserved for future virtual-mode empty/pagination strings
-  locale: _locale,
-  onRowClick
-}) {
+function VirtualTable(props) {
+  const { items, columns, ariaLabel, locale, onRowClick, selection, density } = props;
   const scrollRef = useRef(null);
+  const padding = CELL_PADDING[density];
   const rowVirtualizer = useVirtualizer({
-    count: rows.length,
+    count: items.length,
     /* v8 ignore next 1 */
     getScrollElement: () => scrollRef.current,
     estimateSize: useCallback(() => 40, []),
@@ -386,18 +956,19 @@ function VirtualTable({
     {
       "data-virtual": "true",
       ref: scrollRef,
-      tabIndex: 0,
       role: "region",
+      tabIndex: 0,
       "aria-label": ariaLabel,
       style: { height: 400, overflow: "auto", position: "relative" },
       children: /* @__PURE__ */ jsxs(
         "table",
         {
           "aria-label": ariaLabel,
-          "aria-rowcount": rows.length,
+          "aria-rowcount": items.length,
+          "data-density": density,
           style: { width: "100%", borderCollapse: "collapse" },
           children: [
-            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", children: col.header }, col.key)) }) }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(HeaderRow, { ...props, sticky: true }) }),
             /* @__PURE__ */ jsx(
               "tbody",
               {
@@ -407,11 +978,12 @@ function VirtualTable({
                   display: "block"
                 },
                 children: virtualItems.map((virtualRow) => {
-                  const row = rows[virtualRow.index] ?? {};
-                  return /* @__PURE__ */ jsx(
+                  const item = items[virtualRow.index] ?? { row: {}, key: "" };
+                  return /* @__PURE__ */ jsxs(
                     "tr",
                     {
                       "aria-rowindex": virtualRow.index + 2,
+                      "data-selected": selection?.selected.has(item.key) ? "true" : void 0,
                       style: {
                         position: "absolute",
                         top: 0,
@@ -421,20 +993,22 @@ function VirtualTable({
                         display: "flex",
                         ...onRowClick ? { cursor: "pointer" } : {}
                       },
-                      ...onRowClick ? {
-                        role: "button",
-                        tabIndex: 0,
-                        onClick: () => onRowClick(row, virtualRow.index),
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            onRowClick(row, virtualRow.index);
+                      ...rowActivation(onRowClick, item.row, virtualRow.index),
+                      children: [
+                        selection ? /* @__PURE__ */ jsx(
+                          SelectCell,
+                          {
+                            item,
+                            columns,
+                            selection,
+                            locale,
+                            padding
                           }
-                        }
-                      } : {},
-                      children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { flex: 1 }, children: renderCell(col, row) }, col.key))
+                        ) : null,
+                        columns.map((col) => /* @__PURE__ */ jsx("td", { style: { flex: 1, padding, textAlign: alignOf(col) }, children: renderCell(col, item.row) }, col.key))
+                      ]
                     },
-                    row.id != null ? String(row.id) : `vrow-${virtualRow.index}`
+                    item.key || `vrow-${virtualRow.index}`
                   );
                 })
               }
@@ -458,113 +1032,872 @@ function validateEmptyStateProps(raw) {
   return EmptyStatePropsSchema.parse(raw);
 }
 
-// src/components/display/Skeleton.logic.ts
-function getAnimationClass(animation) {
-  switch (animation) {
-    case "pulse":
-      return "animate-pulse";
-    case "wave":
-      return "skeleton-wave";
-    case "none":
-      return "";
+// src/components/display/EmptyState.logic.ts
+var ACTION_VARIANT_CLASSES = {
+  primary: "inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 disabled:pointer-events-none disabled:opacity-50",
+  secondary: "inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 disabled:pointer-events-none disabled:opacity-50"
+};
+function EmptyStateInner({
+  icon,
+  title,
+  description,
+  action,
+  locale: _locale
+}) {
+  const variant = action?.variant ?? "primary";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      className: "flex flex-col items-center justify-center gap-4 px-6 py-12 text-center",
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-slate-400", children: icon }),
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-slate-900", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm leading-relaxed text-slate-500", children: description }),
+        action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onClick, className: ACTION_VARIANT_CLASSES[variant], children: action.label })
+      ]
+    }
+  );
+}
+function EmptyState(raw) {
+  try {
+    const parsed = validateEmptyStateProps(raw);
+    return /* @__PURE__ */ jsx(
+      EmptyStateInner,
+      {
+        ...parsed,
+        icon: raw.icon,
+        action: parsed.action && raw.action?.onClick ? { ...parsed.action, onClick: raw.action.onClick } : void 0
+      }
+    );
+  } catch (err) {
+    console.error("[EmptyState] Invalid props \u2014 component will not render.", err);
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("span", { role: "alert", children: t("EmptyState.error.invalidProps", locale) });
   }
 }
-function getVariantClass(variant) {
-  switch (variant) {
-    case "rect":
-      return "rounded-md";
-    case "circle":
-      return "rounded-full";
-    case "text":
-      return "rounded";
+var StatCardPropsSchema = z.object({
+  label: z.string().default(""),
+  value: z.string().default(""),
+  unit: z.string().optional(),
+  trend: z.enum(["up", "down", "flat"]).optional(),
+  /** Pre-formatted change, e.g. "+4.2%". */
+  change: z.string().optional(),
+  tone: z.enum(["neutral", "success", "warning", "danger"]).default("neutral"),
+  description: z.string().optional(),
+  loading: z.boolean().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateStatCardProps(raw) {
+  return StatCardPropsSchema.parse(raw);
+}
+var TONE_CLASSES = {
+  neutral: "text-slate-900",
+  success: "text-green-700",
+  warning: "text-amber-700",
+  danger: "text-red-700"
+};
+var TREND_ARROW = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
+function StatCard(raw) {
+  const parsed = StatCardPropsSchema.safeParse(raw);
+  const locale = raw?.locale === "fr" ? "fr" : "en";
+  if (!parsed.success) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("StatCard.error.invalidProps", locale) });
+  }
+  const p = parsed.data;
+  if (p.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("StatCard.loading", p.locale), children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 72, locale: p.locale }) });
+  }
+  if (p.label === "" && p.value === "") {
+    return /* @__PURE__ */ jsx(EmptyState, { title: t("StatCard.empty.message", p.locale), locale: p.locale });
   }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": `${t("StatCard.title", p.locale)}: ${p.label}`,
+      lang: p.locale,
+      className: "flex flex-col gap-1 rounded-lg border border-slate-200 bg-white p-4",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: p.label }),
+        /* @__PURE__ */ jsxs("span", { className: `text-2xl font-semibold tabular-nums ${TONE_CLASSES[p.tone]}`, children: [
+          p.value,
+          p.unit ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-base font-normal text-slate-500", children: p.unit }) : null
+        ] }),
+        p.trend || p.change ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-sm text-slate-600", children: [
+          p.trend ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: TREND_ARROW[p.trend] }),
+            /* @__PURE__ */ jsx("span", { children: t(`StatCard.trend.${p.trend}`, p.locale) })
+          ] }) : null,
+          p.change ? /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: p.change }) : null
+        ] }) : null,
+        p.description ? /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: p.description }) : null
+      ]
+    }
+  );
 }
-var SKELETON_BG_CLASS = "bg-gray-200 dark:bg-gray-700";
-function textLineKey(index) {
-  return `skeleton-line-${index}`;
+
+// src/components/shared/markdown.ts
+var SPECIAL = /([\\`*_[\]()<>&!|~])/g;
+var BREAKS = /* @__PURE__ */ new Set([10, 11, 12, 13, 133, 8232, 8233]);
+function flatten(text) {
+  let out = "";
+  let gap = false;
+  for (const c of text) {
+    const n = c.codePointAt(0) ?? 0;
+    if (BREAKS.has(n)) {
+      gap = true;
+      continue;
+    }
+    if (n < 32 && n !== 9) continue;
+    if (n === 127) continue;
+    if (gap) out += " ";
+    gap = false;
+    out += c;
+  }
+  return gap ? `${out} ` : out;
 }
-function lastLineWidth(index, total, baseWidth) {
-  if (total > 1 && index === total - 1) {
-    return "75%";
+function mdEscape(text) {
+  const flat = flatten(text).replace(SPECIAL, "\\$1").replace(/\b(https?|ftp):\/\//gi, "$1:\\/\\/").replace(/\bwww\./gi, (m) => `${m.slice(0, 3)}\\.`);
+  return flat.replace(/^(\s*)([#>+-])/, "$1\\$2").replace(/^(\s*\d+)([.)])(?=\s|$)/, "$1\\$2");
+}
+function mdUrl(href) {
+  return href.replace(
+    /[()[\]\\<>`\s]/g,
+    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`
+  );
+}
+function mdCode(text) {
+  const flat = flatten(text);
+  const longest = Math.max(0, ...(flat.match(/`+/g) ?? []).map((r) => r.length));
+  const fence = "`".repeat(longest + 1);
+  return `${fence} ${flat} ${fence}`;
+}
+function mdTable(headers, rows) {
+  const line = (cells) => `| ${cells.join(" | ")} |`;
+  return [line(headers), line(headers.map(() => "---")), ...rows.map(line)].join("\n");
+}
+function mdHeading(text, level = 1) {
+  return `${"#".repeat(level)} ${text}`;
+}
+
+// src/components/display/StatCard.markdown.ts
+function statCardToMarkdown(props, locale = "en") {
+  const parsed = StatCardPropsSchema.safeParse(props);
+  const title = mdHeading(t("StatCard.title", locale));
+  if (!parsed.success || parsed.data.label === "" && parsed.data.value === "") {
+    return `${title}
+
+${t("StatCard.empty.message", locale)}
+`;
   }
-  return baseWidth;
+  const { label, value, unit, trend, change, description } = parsed.data;
+  const amount = unit ? `${value} ${unit}` : value;
+  const movement = [trend ? t(`StatCard.trend.${trend}`, locale) : "", change ?? ""].filter(Boolean).join(" ");
+  const line = `- **${mdEscape(label)}**: ${mdEscape(amount)}${movement ? ` (${mdEscape(movement)})` : ""}`;
+  return `${title}
+
+${line}
+${description ? `
+${mdEscape(description)}
+` : ""}`;
 }
-var SkeletonPropsSchema = z.object({
-  variant: z.enum(["rect", "circle", "text"]).default("rect"),
-  width: z.union([z.string().min(1), z.number().positive()]).optional(),
-  height: z.union([z.string().min(1), z.number().positive()]).optional(),
-  count: z.number().int().min(1).max(20).default(1),
-  animation: z.enum(["pulse", "wave", "none"]).default("pulse"),
+var BadgePropsSchema = z.object({
+  label: z.string(),
+  variant: z.enum(["default", "primary", "success", "warning", "danger", "info", "neutral"]).default("default"),
+  dot: z.boolean().optional(),
+  count: z.number().int().nonnegative().optional(),
   locale: z.enum(["en", "fr"]).default("en")
 });
-function validateSkeletonProps(raw) {
-  return SkeletonPropsSchema.parse(raw);
+function validateBadgeProps(raw) {
+  return BadgePropsSchema.parse(raw);
 }
-function resolveSkeletonDimensions(variant, width, height) {
-  const toCss = (v, fallback) => {
-    if (v === void 0) return fallback;
-    if (typeof v === "number") return `${v}px`;
-    return v;
-  };
-  if (variant === "circle") {
-    const size = width !== void 0 ? toCss(width, "40px") : height !== void 0 ? toCss(height, "40px") : "40px";
-    return { widthCss: size, heightCss: size };
+var variantClasses = {
+  default: "bg-slate-100 text-slate-700 ring-1 ring-slate-200",
+  primary: "bg-indigo-100 text-indigo-800 ring-1 ring-indigo-300",
+  success: "bg-green-100 text-green-800 ring-1 ring-green-300",
+  warning: "bg-amber-100 text-amber-800 ring-1 ring-amber-300",
+  danger: "bg-red-100 text-red-800 ring-1 ring-red-300",
+  info: "bg-blue-100 text-blue-800 ring-1 ring-blue-300",
+  neutral: "bg-slate-100 text-slate-800 ring-1 ring-slate-300"
+};
+var dotClasses = {
+  default: "bg-slate-400",
+  primary: "bg-indigo-500",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  neutral: "bg-slate-400"
+};
+function BadgeInner({ label, variant, dot, count, locale }) {
+  const ariaLabel = t("Badge.aria.label", locale);
+  const displayCount = count !== void 0 ? ` (${count})` : "";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-label": `${ariaLabel}: ${label}${displayCount}`,
+      lang: locale,
+      className: `inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${variantClasses[variant]}`,
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `h-1.5 w-1.5 rounded-full ${dotClasses[variant]}` }),
+        label,
+        count !== void 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-semibold tabular-nums", children: count })
+      ]
+    }
+  );
+}
+function Badge(raw) {
+  try {
+    const props = validateBadgeProps(raw);
+    return /* @__PURE__ */ jsx(BadgeInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("span", { role: "alert", children: t("Badge.error.invalidProps", locale) });
   }
-  if (variant === "text") {
-    return {
-      widthCss: toCss(width, "100%"),
-      heightCss: toCss(height, "16px")
-    };
+}
+
+// src/components/shared/decimal.ts
+var DECIMAL2 = /^(-)?(\d+)(?:\.(\d+))?$/;
+function sumDecimalStrings(values) {
+  let scale = 0;
+  const parsed = [];
+  for (const v of values) {
+    const m = DECIMAL2.exec(v);
+    if (!m) return void 0;
+    const frac2 = m[3] ?? "";
+    scale = Math.max(scale, frac2.length);
+    parsed.push({ neg: m[1] === "-", int: m[2] ?? "0", frac: frac2 });
   }
-  return {
-    widthCss: toCss(width, "100%"),
-    heightCss: toCss(height, "100px")
+  let total = 0n;
+  for (const p of parsed) {
+    const n = BigInt(p.int + p.frac.padEnd(scale, "0"));
+    total += p.neg ? -n : n;
+  }
+  const neg = total < 0n;
+  const digits = (neg ? -total : total).toString().padStart(scale + 1, "0");
+  const int = digits.slice(0, digits.length - scale);
+  const frac = digits.slice(digits.length - scale).replace(/0+$/, "");
+  return `${neg ? "-" : ""}${int}${frac ? `.${frac}` : ""}`;
+}
+function formatDecimalString(value, locale, currency) {
+  if (!DECIMAL2.test(value)) return value;
+  try {
+    const nf = new Intl.NumberFormat(
+      locale,
+      currency ? { style: "currency", currency } : { maximumFractionDigits: 20 }
+    );
+    return nf.format(value);
+  } catch {
+    return value;
+  }
+}
+function truncateAddress(address, head = 6, tail = 4) {
+  return address.length <= head + tail + 1 ? address : `${address.slice(0, head)}\u2026${address.slice(address.length - tail)}`;
+}
+var BalanceCardPropsSchema = z.object({
+  token: z.string().default(""),
+  balance: z.string().default(""),
+  address: z.string().default(""),
+  tokenAddress: z.string().optional(),
+  decimals: z.number().int().nonnegative().optional(),
+  network: z.string().optional(),
+  testnet: z.boolean().default(false),
+  /** Decimal string in `currency`. */
+  usdValue: z.string().optional(),
+  currency: z.string().default("USD"),
+  loading: z.boolean().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateBalanceCardProps(raw) {
+  return BalanceCardPropsSchema.parse(raw);
+}
+function BalanceCard(raw) {
+  const parsed = BalanceCardPropsSchema.safeParse(raw);
+  const locale = raw?.locale === "fr" ? "fr" : "en";
+  const [copied, setCopied] = useState(false);
+  if (!parsed.success) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("BalanceCard.error.invalidProps", locale) });
+  }
+  const p = parsed.data;
+  if (p.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("BalanceCard.loading", p.locale), children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 120, locale: p.locale }) });
+  }
+  if (p.token === "" && p.balance === "") {
+    return /* @__PURE__ */ jsx(EmptyState, { title: t("BalanceCard.empty.message", p.locale), locale: p.locale });
+  }
+  const canCopy = typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function";
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(p.address);
+      setCopied(true);
+    } catch {
+    }
   };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": `${t("BalanceCard.title", p.locale)}: ${p.token}`,
+      lang: p.locale,
+      className: "flex flex-col gap-2",
+      children: [
+        /* @__PURE__ */ jsx(
+          StatCard,
+          {
+            label: t("BalanceCard.title", p.locale),
+            value: p.balance,
+            unit: p.token,
+            locale: p.locale
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          p.network ? /* @__PURE__ */ jsx(Badge, { label: p.network, variant: "info", locale: p.locale }) : null,
+          p.testnet ? /* @__PURE__ */ jsx(Badge, { label: t("BalanceCard.testnet", p.locale), variant: "warning", locale: p.locale }) : null
+        ] }),
+        p.usdValue ? /* @__PURE__ */ jsxs("span", { className: "text-sm text-slate-600", children: [
+          t("BalanceCard.value", p.locale),
+          ":",
+          " ",
+          formatDecimalString(p.usdValue, p.locale, p.currency)
+        ] }) : null,
+        p.address ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-slate-600", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono", title: p.address, children: truncateAddress(p.address) }),
+          canCopy ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: copy,
+              className: "rounded border border-slate-300 px-2 py-0.5 text-xs hover:bg-slate-50",
+              children: t("BalanceCard.copy", p.locale)
+            }
+          ) : null,
+          copied ? /* @__PURE__ */ jsx("output", { children: t("BalanceCard.copied", p.locale) }) : null
+        ] }) : null
+      ]
+    }
+  );
 }
-function SkeletonInner({ variant, width, height, count, animation, locale }) {
-  const { widthCss, heightCss } = resolveSkeletonDimensions(variant, width, height);
-  const animClass = getAnimationClass(animation);
-  const variantClass = getVariantClass(variant);
-  const ariaLabel = t("Skeleton.aria.label", locale);
-  const baseClass = `${SKELETON_BG_CLASS} ${variantClass} ${animClass}`.trim();
-  if (variant === "text") {
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: role="status" is the correct ARIA pattern for loading indicators; <output> conveys form output semantics which is incorrect here
-      /* @__PURE__ */ jsx("div", { role: "status", "aria-label": ariaLabel, "aria-busy": "true", className: "flex flex-col gap-2", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `block ${baseClass}`,
-          style: {
-            width: lastLineWidth(i, count, widthCss),
-            height: heightCss
-          },
-          "aria-hidden": "true"
-        },
-        textLineKey(i)
-      )) })
+
+// src/components/display/BalanceCard.markdown.ts
+function balanceCardToMarkdown(props, locale = "en") {
+  const parsed = BalanceCardPropsSchema.safeParse(props);
+  const title = mdHeading(t("BalanceCard.title", locale));
+  if (!parsed.success || parsed.data.token === "" && parsed.data.balance === "") {
+    return `${title}
+
+${t("BalanceCard.empty.message", locale)}
+`;
+  }
+  const p = parsed.data;
+  const where = [p.network, p.testnet ? t("BalanceCard.testnet", locale) : ""].filter(Boolean);
+  const lines = [
+    `- ${mdEscape(p.token)}: ${mdEscape(p.balance)}${where.length ? ` (${mdEscape(where.join(", "))})` : ""}`
+  ];
+  if (p.usdValue) {
+    lines.push(
+      `- ${t("BalanceCard.value", locale)}: ${mdEscape(formatDecimalString(p.usdValue, locale, p.currency))}`
     );
   }
+  if (p.address) lines.push(`- ${t("BalanceCard.address", locale)}: ${mdCode(p.address)}`);
+  if (p.tokenAddress)
+    lines.push(`- ${t("BalanceCard.contract", locale)}: ${mdCode(p.tokenAddress)}`);
+  return `${title}
+
+${lines.join("\n")}
+`;
+}
+var VirtualListPropsSchema = z.object({
+  /** Array of items to render — required, can be empty */
+  items: z.array(z.unknown()),
+  /** Fixed row height in px — mutually exclusive with estimateSize */
+  itemHeight: z.number().positive().optional(),
+  /** Variable row height estimator — mutually exclusive with itemHeight */
+  estimateSize: z.function().args(z.number()).returns(z.number()).optional(),
+  /** Row renderer — required (runtime function, excluded from strict Zod parse but validated for presence) */
+  renderItem: z.function().args(z.unknown(), z.number()).returns(z.unknown()).optional(),
+  /** Rows to render outside visible area (default: 5) */
+  overscan: z.number().int().min(0).optional(),
+  /** CSS class applied to the scroll container */
+  className: z.string().optional(),
+  /** Locale for built-in empty state + error messages */
+  locale: z.enum(["en", "fr"]).optional(),
+  /** a11y: when provided, rows become keyboard-activable (role=button + tabIndex=0 + Enter/Space) */
+  onRowClick: z.function().args(z.unknown(), z.number()).returns(z.void()).optional()
+});
+function validateVirtualListProps(raw) {
+  return VirtualListPropsSchema.parse(raw);
+}
+var DEFAULT_OVERSCAN = 5;
+var DEFAULT_ITEM_HEIGHT = 40;
+function VirtualList(props) {
+  try {
+    validateVirtualListProps({
+      items: props.items,
+      itemHeight: props.itemHeight,
+      overscan: props.overscan,
+      className: props.className,
+      locale: props.locale
+    });
+  } catch {
+    const locale2 = props.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("VirtualList.error.invalidProps", locale2) });
+  }
+  const locale = props.locale === "fr" ? "fr" : "en";
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ jsx("output", { "aria-live": "polite", children: t("VirtualList.empty.message", locale) });
+  }
+  return /* @__PURE__ */ jsx(
+    VirtualListInner,
+    {
+      items: props.items,
+      itemHeight: props.itemHeight,
+      estimateSize: props.estimateSize,
+      renderItem: props.renderItem,
+      onRowClick: props.onRowClick,
+      overscan: props.overscan ?? DEFAULT_OVERSCAN,
+      className: props.className,
+      locale
+    }
+  );
+}
+function VirtualListInner({
+  items,
+  itemHeight,
+  estimateSize,
+  renderItem,
+  onRowClick,
+  overscan,
+  className
+}) {
+  const scrollRef = useRef(null);
+  const resolvedEstimateSize = useCallback(
+    (index) => {
+      if (estimateSize) return estimateSize(index);
+      return itemHeight ?? DEFAULT_ITEM_HEIGHT;
+    },
+    [estimateSize, itemHeight]
+  );
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    /* v8 ignore next 1 */
+    getScrollElement: () => scrollRef.current,
+    estimateSize: resolvedEstimateSize,
+    overscan
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      role: "status",
-      "aria-label": ariaLabel,
-      "aria-busy": "true",
-      className: `block ${baseClass}`,
-      style: { width: widthCss, height: heightCss }
+      "data-virtual": "true",
+      ref: scrollRef,
+      className,
+      style: { height: 400, overflow: "auto", position: "relative" },
+      children: /* @__PURE__ */ jsx("div", { style: { height: `${totalSize}px`, position: "relative" }, children: virtualItems.map((virtualRow) => {
+        const item = items[virtualRow.index];
+        const index = virtualRow.index;
+        const rowProps = onRowClick ? {
+          role: "button",
+          tabIndex: 0,
+          "data-list-row": true,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${virtualRow.start}px)`,
+            cursor: "pointer"
+          },
+          onClick: () => onRowClick(item, index),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onRowClick(item, index);
+            }
+          }
+        } : {
+          "data-list-row": true,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${virtualRow.start}px)`
+          }
+        };
+        return /* @__PURE__ */ jsx("div", { ...rowProps, children: renderItem(item, index) }, virtualRow.key);
+      }) })
     }
   );
 }
-function Skeleton(raw) {
+
+// src/components/shared/datetime.ts
+function formatTimestamp(iso, locale, timeZone) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
   try {
-    const props = validateSkeletonProps(raw);
-    return /* @__PURE__ */ jsx(SkeletonInner, { ...props });
+    return new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short",
+      ...timeZone ? { timeZone } : {}
+    }).format(d);
   } catch {
-    const locale = raw.locale === "fr" ? "fr" : "en";
-    return /* @__PURE__ */ jsx("span", { role: "alert", className: "text-red-600 text-sm", children: t("Skeleton.error.invalidProps", locale) });
+    return iso;
+  }
+}
+
+// src/components/shared/url.ts
+function normalizeHttpUrl(value) {
+  if (typeof value !== "string") return void 0;
+  try {
+    const u = new URL(value);
+    return u.protocol === "https:" || u.protocol === "http:" ? u.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var FeedMessageSchema = z.object({
+  id: z.string().optional(),
+  sender: z.string().min(1),
+  channel: z.string().optional(),
+  /** Plain text. Rendered as text, never as HTML. */
+  content: z.string(),
+  /** ISO 8601. */
+  timestamp: z.string(),
+  attachmentUrl: z.string().optional(),
+  attachmentLabel: z.string().optional(),
+  unread: z.boolean().optional()
+});
+var MessageFeedPropsSchema = z.object({
+  messages: z.array(FeedMessageSchema).default([]),
+  maxItems: z.number().int().positive().optional(),
+  /** IANA timezone for timestamps (e.g. `hostContext.timeZone`). */
+  timeZone: z.string().optional(),
+  /** Above this many shown messages the feed is virtualised through VirtualList. */
+  virtualizeThreshold: z.number().int().positive().default(50),
+  loading: z.boolean().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateMessageFeedProps(raw) {
+  return MessageFeedPropsSchema.parse(raw);
+}
+function latestMessages(messages, maxItems) {
+  const shown = maxItems === void 0 ? [...messages] : messages.slice(-maxItems);
+  return { shown, total: messages.length };
+}
+function Attachment({
+  m,
+  locale,
+  onOpenLink
+}) {
+  if (!m.attachmentUrl) return null;
+  const label = m.attachmentLabel ?? t("MessageFeed.attachment", locale);
+  const url = normalizeHttpUrl(m.attachmentUrl);
+  if (!url) return /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: label });
+  return onOpenLink ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onOpenLink(url),
+      className: "text-left text-sm text-blue-700 underline",
+      children: label
+    }
+  ) : /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url,
+      rel: "noopener noreferrer",
+      target: "_blank",
+      className: "text-sm text-blue-700 underline",
+      children: label
+    }
+  );
+}
+function Message({
+  m,
+  locale,
+  timeZone,
+  onOpenLink
+}) {
+  return /* @__PURE__ */ jsxs("article", { className: "flex flex-col gap-1 border-b border-slate-100 py-2", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("strong", { className: "text-slate-900", children: m.sender }),
+      m.channel ? /* @__PURE__ */ jsx(Badge, { label: m.channel, variant: "neutral", locale }) : null,
+      /* @__PURE__ */ jsx("time", { dateTime: m.timestamp, className: "text-xs text-slate-500", children: formatTimestamp(m.timestamp, locale, timeZone) }),
+      m.unread ? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-blue-700", children: t("MessageFeed.unread", locale) }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "m-0 whitespace-pre-wrap text-sm text-slate-800", children: m.content }),
+    /* @__PURE__ */ jsx(Attachment, { m, locale, onOpenLink })
+  ] });
+}
+function MessageFeed(raw = {}) {
+  const parsed = MessageFeedPropsSchema.safeParse(raw);
+  const locale = raw?.locale === "fr" ? "fr" : "en";
+  if (!parsed.success) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("MessageFeed.error.invalidProps", locale) });
+  }
+  const p = parsed.data;
+  if (p.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("MessageFeed.loading", p.locale), children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", count: 5, locale: p.locale }) });
+  }
+  if (p.messages.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: t("MessageFeed.empty.message", p.locale), locale: p.locale });
+  }
+  const { shown, total } = latestMessages(p.messages, p.maxItems);
+  const virtual = shown.length > p.virtualizeThreshold;
+  return /* @__PURE__ */ jsxs("section", { "aria-label": t("MessageFeed.title", p.locale), lang: p.locale, children: [
+    shown.length < total ? /* @__PURE__ */ jsx("p", { className: "m-0 pb-1 text-xs text-slate-500", children: t("MessageFeed.showing", p.locale).replace("{n}", String(shown.length)).replace("{total}", String(total)) }) : null,
+    virtual ? /* @__PURE__ */ jsx(
+      VirtualList,
+      {
+        items: shown,
+        itemHeight: 96,
+        locale: p.locale,
+        renderItem: (m) => /* @__PURE__ */ jsx(Message, { m, locale: p.locale, timeZone: p.timeZone, onOpenLink: raw.onOpenLink })
+      }
+    ) : /* @__PURE__ */ jsx("ol", { className: "m-0 list-none p-0", children: shown.map((m, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Message, { m, locale: p.locale, timeZone: p.timeZone, onOpenLink: raw.onOpenLink }) }, m.id ?? `msg-${i}`)) })
+  ] });
+}
+
+// src/components/display/MessageFeed.markdown.ts
+function messageFeedToMarkdown(props, locale = "en") {
+  const parsed = MessageFeedPropsSchema.safeParse(props);
+  const title = mdHeading(t("MessageFeed.title", locale));
+  if (!parsed.success || parsed.data.messages.length === 0) {
+    return `${title}
+
+${t("MessageFeed.empty.message", locale)}
+`;
+  }
+  const { messages, maxItems, timeZone } = parsed.data;
+  const { shown, total } = latestMessages(messages, maxItems);
+  const lines = shown.map((m) => {
+    const when = [formatTimestamp(m.timestamp, locale, timeZone), m.channel ?? ""].filter(Boolean).join(", ");
+    const href = normalizeHttpUrl(m.attachmentUrl);
+    const label = mdEscape(m.attachmentLabel ?? t("MessageFeed.attachment", locale));
+    const attachment = m.attachmentUrl ? href ? ` [${label}](${mdUrl(href)})` : ` ${label}` : "";
+    return `> **${mdEscape(m.sender)}** (${mdEscape(when)}): ${mdEscape(m.content)}${attachment}`;
+  });
+  const cut = shown.length < total ? `${t("MessageFeed.showing", locale).replace("{n}", String(shown.length)).replace("{total}", String(total))}
+
+` : "";
+  return `${title}
+
+${cut}${lines.join("\n>\n")}
+`;
+}
+
+// src/components/forms/RadioGroup.logic.ts
+function getOptionLabelClasses(appearance, isSelected) {
+  const base = "mosaic-forms-radiogroup-option-label inline-flex items-center px-3 py-1 text-sm";
+  const shape = "rounded-full border" ;
+  const tone = isSelected ? "bg-slate-900 text-white border-slate-900" : "bg-white text-slate-700 border-slate-300 hover:bg-slate-50";
+  return [base, shape, tone].filter(Boolean).join(" ");
+}
+
+// src/components/display/PipelineBoard.logic.ts
+function stageSummary(deals) {
+  const amounts = deals.flatMap((d) => d.amount === void 0 ? [] : [d.amount]);
+  return { count: deals.length, total: sumDecimalStrings(amounts) };
+}
+var SUMMARY_STAGE_LIMIT = 5;
+var PipelineDealSchema = z.object({
+  id: z.string().min(1),
+  title: z.string().min(1),
+  /** Decimal STRING (never a float), in the board currency. */
+  amount: z.string().optional(),
+  contact: z.string().optional(),
+  url: z.string().optional()
+});
+var PipelineStageSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+  deals: z.array(PipelineDealSchema).default([])
+});
+var PipelineBoardPropsSchema = z.object({
+  stages: z.array(PipelineStageSchema).default([]),
+  /** ISO 4217 code used to format amounts. */
+  currency: z.string().default("EUR"),
+  layout: z.enum(["board", "summary"]).default("board"),
+  loading: z.boolean().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validatePipelineBoardProps(raw) {
+  return PipelineBoardPropsSchema.parse(raw);
+}
+function dealsLabel(n, locale) {
+  return n === 1 ? t("PipelineBoard.deals.one", locale) : t("PipelineBoard.deals.many", locale).replace("{n}", String(n));
+}
+function Totals({
+  stage,
+  currency,
+  locale
+}) {
+  const { count, total } = stageSummary(stage.deals);
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-col text-sm text-slate-600", children: [
+    /* @__PURE__ */ jsx("span", { children: dealsLabel(count, locale) }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: total === void 0 ? "\u2014" : formatDecimalString(total, locale, currency) })
+  ] });
+}
+function PipelineBoard(raw = {}) {
+  const parsed = PipelineBoardPropsSchema.safeParse(raw);
+  const locale = raw?.locale === "fr" ? "fr" : "en";
+  const [hidden, setHidden] = useState(/* @__PURE__ */ new Set());
+  if (!parsed.success) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("PipelineBoard.error.invalidProps", locale) });
   }
+  const p = parsed.data;
+  if (p.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("PipelineBoard.loading", p.locale), children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 160, locale: p.locale }) });
+  }
+  if (p.stages.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: t("PipelineBoard.empty.message", p.locale), locale: p.locale });
+  }
+  if (p.layout === "summary") {
+    const shown = p.stages.slice(0, SUMMARY_STAGE_LIMIT);
+    const rest = p.stages.length - shown.length;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": t("PipelineBoard.title", p.locale),
+        lang: p.locale,
+        className: "flex flex-col gap-2",
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: shown.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-900", children: s.name }),
+            /* @__PURE__ */ jsx(Totals, { stage: s, currency: p.currency, locale: p.locale })
+          ] }, s.id)) }),
+          rest > 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: t("PipelineBoard.more", p.locale).replace("{n}", String(rest)) }) : null,
+          raw.onRequestFullscreen ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: raw.onRequestFullscreen,
+              className: "self-start rounded border border-slate-300 px-3 py-1 text-sm hover:bg-slate-50",
+              children: t("PipelineBoard.summary.open", p.locale)
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  const visible = p.stages.filter((s) => !hidden.has(s.id));
+  const toggle = (id) => {
+    const next = new Set(hidden);
+    if (next.has(id)) next.delete(id);
+    else if (visible.length > 1) next.add(id);
+    setHidden(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": t("PipelineBoard.title", p.locale),
+      lang: p.locale,
+      className: "flex flex-col gap-3",
+      children: [
+        /* @__PURE__ */ jsxs("fieldset", { className: "m-0 flex min-w-0 flex-wrap gap-2 border-0 p-0", children: [
+          /* @__PURE__ */ jsx("legend", { className: "sr-only", children: t("PipelineBoard.filter.label", p.locale) }),
+          p.stages.map((s) => {
+            const on = !hidden.has(s.id);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": on,
+                onClick: () => toggle(s.id),
+                className: getOptionLabelClasses("chips", on),
+                children: s.name
+              },
+              s.id
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex flex-row gap-3 overflow-x-auto",
+            style: {
+              scrollPaddingLeft: "var(--mosaic-safe-area-left, 0px)",
+              scrollPaddingRight: "var(--mosaic-safe-area-right, 0px)"
+            },
+            children: visible.map((s) => /* @__PURE__ */ jsxs(
+              "section",
+              {
+                "aria-label": s.name,
+                className: "flex w-64 shrink-0 flex-col gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3",
+                children: [
+                  /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx("strong", { className: "text-slate-900", children: s.name }),
+                    /* @__PURE__ */ jsx(Totals, { stage: s, currency: p.currency, locale: p.locale })
+                  ] }),
+                  s.deals.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: t("PipelineBoard.stage.empty", p.locale) }) : /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: s.deals.map((d) => /* @__PURE__ */ jsxs("li", { className: "rounded border border-slate-200 bg-white p-2", children: [
+                    raw.onOpenLink && normalizeHttpUrl(d.url) ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => raw.onOpenLink?.(normalizeHttpUrl(d.url)),
+                        className: "text-left font-medium text-blue-700 underline",
+                        children: d.title
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-900", children: d.title }),
+                    d.amount !== void 0 ? /* @__PURE__ */ jsx("span", { className: "block text-sm tabular-nums text-slate-700", children: formatDecimalString(d.amount, p.locale, p.currency) }) : null,
+                    d.contact ? /* @__PURE__ */ jsx(Badge, { label: d.contact, variant: "neutral", locale: p.locale }) : null
+                  ] }, d.id)) })
+                ]
+              },
+              s.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/display/PipelineBoard.markdown.ts
+function pipelineBoardToMarkdown(props, locale = "en") {
+  const parsed = PipelineBoardPropsSchema.safeParse(props);
+  const title = mdHeading(t("PipelineBoard.title", locale));
+  if (!parsed.success || parsed.data.stages.length === 0) {
+    return `${title}
+
+${t("PipelineBoard.empty.message", locale)}
+`;
+  }
+  const { stages, currency } = parsed.data;
+  const money = (v) => mdEscape(formatDecimalString(v, locale, currency));
+  const table = mdTable(
+    [
+      t("PipelineBoard.col.stage", locale),
+      t("PipelineBoard.col.deals", locale),
+      t("PipelineBoard.total", locale)
+    ],
+    stages.map((s) => {
+      const sum = stageSummary(s.deals);
+      return [
+        mdEscape(s.name),
+        String(sum.count),
+        sum.total === void 0 ? "-" : money(sum.total)
+      ];
+    })
+  );
+  const sections = stages.filter((s) => s.deals.length > 0).map((s) => {
+    const lines = s.deals.map((d) => {
+      const amount = d.amount === void 0 ? "" : ` (${money(d.amount)})`;
+      const contact = d.contact ? ` - ${mdEscape(d.contact)}` : "";
+      return `- ${mdEscape(d.title)}${amount}${contact}`;
+    });
+    return `${mdHeading(mdEscape(s.name), 2)}
+
+${lines.join("\n")}`;
+  });
+  return `${title}
+
+${table}
+${sections.length ? `
+${sections.join("\n\n")}
+` : ""}`;
 }
 
-export { EmptyStatePropsSchema, Skeleton, SkeletonPropsSchema, StreamingTableView, TableView, TableViewPropsSchema, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateTableViewProps };
+export { BalanceCard, BalanceCardPropsSchema, EmptyStatePropsSchema, MessageFeed, MessageFeedPropsSchema, PipelineBoard, PipelineBoardPropsSchema, Skeleton, SkeletonPropsSchema, StatCard, StatCardPropsSchema, StreamingTableView, TableView, TableViewPropsSchema, balanceCardToMarkdown, compareDecimalStrings, messageFeedToMarkdown, nextSort, pipelineBoardToMarkdown, resolveSkeletonDimensions, sortItems, statCardToMarkdown, validateBalanceCardProps, validateEmptyStateProps, validateMessageFeedProps, validatePipelineBoardProps, validateSkeletonProps, validateStatCardProps, validateTableViewProps };
 //# sourceMappingURL=display.js.map
 //# sourceMappingURL=display.js.map