@vantageos/mosaic 0.3.1 → 0.5.0

package/dist/preact/confirmation.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { jsx, jsxs } from 'preact/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { useRef, useId, useEffect, useState } from 'preact/compat';
 
 // src/components/confirmation/Alert.logic.ts
@@ -66,6 +66,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",
@@ -135,7 +137,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 ──────────────────────────────────────────────────
@@ -158,6 +252,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",
@@ -227,7 +323,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,
@@ -390,6 +578,11 @@ var TokenDisplayOnceModalPropsSchema = z.object({
   warningMessage: z.string().min(1),
   copyLabel: z.string().min(1),
   closeLabel: z.string().min(1),
+  /** Non-secret metadata, shown in the view AND carried by the A-1 fallback. */
+  scope: z.string().optional(),
+  expiresAt: z.string().optional(),
+  /** Supplied by the issuer; NEVER derived from the secret. */
+  fingerprint: z.string().optional(),
   locale: z.enum(["en", "fr"]).default("en")
 });
 function validateTokenDisplayOnceModalProps(raw) {
@@ -401,6 +594,9 @@ function TokenDisplayOnceModalInner({
   warningMessage,
   copyLabel,
   closeLabel,
+  scope,
+  expiresAt,
+  fingerprint,
   locale,
   onClose
 }) {
@@ -463,6 +659,29 @@ function TokenDisplayOnceModalInner({
                 children: warningMessage
               }
             ),
+            scope || expiresAt || fingerprint ? /* @__PURE__ */ jsxs("dl", { className: "m-0 text-sm text-gray-700", children: [
+              scope ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("dt", { className: "inline", children: [
+                  t("TokenDisplayOnceModal.field.scope", locale),
+                  ": "
+                ] }),
+                /* @__PURE__ */ jsx("dd", { className: "m-0 inline", children: scope })
+              ] }) : null,
+              expiresAt ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("dt", { className: "inline", children: [
+                  t("TokenDisplayOnceModal.field.expires", locale),
+                  ": "
+                ] }),
+                /* @__PURE__ */ jsx("dd", { className: "m-0 inline", children: expiresAt })
+              ] }) : null,
+              fingerprint ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("dt", { className: "inline", children: [
+                  t("TokenDisplayOnceModal.field.fingerprint", locale),
+                  ": "
+                ] }),
+                /* @__PURE__ */ jsx("dd", { className: "m-0 inline font-mono", children: fingerprint })
+              ] }) : null
+            ] }) : null,
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-md px-3 py-2", children: /* @__PURE__ */ jsx("code", { className: "flex-1 text-sm font-mono text-gray-800 break-all select-all", children: secureToken }) }),
             /* @__PURE__ */ jsx("output", { "aria-live": "polite", "aria-atomic": "true", className: "min-h-[1.25rem] block", children: copied && /* @__PURE__ */ jsx("span", { className: "text-sm text-green-700 font-medium", children: t("TokenDisplayOnceModal.copied", locale) }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 mt-2", children: [
@@ -500,7 +719,413 @@ function TokenDisplayOnceModal(raw) {
     return null;
   }
 }
+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 validateBadgeProps(raw) {
+  return BadgePropsSchema.parse(raw);
+}
+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) });
+  }
+}
+
+// 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"
+};
+var EmptyStatePropsSchema = z.object({
+  title: z.string().min(1),
+  description: z.string().optional(),
+  action: z.object({
+    label: z.string().min(1),
+    variant: z.enum(["primary", "secondary"]).default("primary")
+  }).optional(),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateEmptyStateProps(raw) {
+  return EmptyStatePropsSchema.parse(raw);
+}
+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) });
+  }
+}
+
+// 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
+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);
+}
+
+// src/components/shared/datetime.ts
+function formatTimestamp(iso, locale, timeZone) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short",
+      ...timeZone ? { timeZone } : {}
+    }).format(d);
+  } catch {
+    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 AmountSchema = z.object({
+  /** Decimal STRING (never a float). */
+  value: z.string().min(1),
+  symbol: z.string().min(1)
+});
+var QuoteSchema = z.object({
+  sell: AmountSchema,
+  buy: AmountSchema,
+  minReceived: AmountSchema.optional(),
+  route: z.array(z.string().min(1)).optional(),
+  /** Percent as a decimal string, e.g. "0.42". */
+  priceImpact: z.string().optional()
+});
+var TransactionPreviewPropsSchema = z.object({
+  kind: z.enum(["transfer", "swap"]).default("transfer"),
+  network: z.string().optional(),
+  testnet: z.boolean().default(false),
+  from: z.string().optional(),
+  to: z.string().optional(),
+  amount: AmountSchema.optional(),
+  fee: AmountSchema.optional(),
+  quote: QuoteSchema.optional(),
+  simulation: z.object({
+    status: z.enum(["success", "failed", "unavailable"]),
+    message: z.string().optional()
+  }).optional(),
+  warnings: z.array(z.string()).default([]),
+  /** ISO 8601 expiry of the quote. */
+  expiresAt: z.string().optional(),
+  /** Wallet link-out. Only http(s) urls are ever rendered. */
+  handoff: z.object({ url: z.string().min(1) }).optional(),
+  timeZone: z.string().optional(),
+  loading: z.boolean().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateTransactionPreviewProps(raw) {
+  return TransactionPreviewPropsSchema.parse(raw);
+}
+function hasPreviewContent(p) {
+  return Boolean(p.from || p.to || p.amount || p.quote || p.fee);
+}
+var amountText = (a) => `${a.value} ${a.symbol}`;
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 py-1 sm:flex-row sm:gap-3", children: [
+    /* @__PURE__ */ jsx("dt", { className: "w-36 shrink-0 text-sm text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "m-0 min-w-0 break-all text-sm text-slate-900", children })
+  ] });
+}
+function TransactionPreview(raw = {}) {
+  const parsed = TransactionPreviewPropsSchema.safeParse(raw);
+  const locale = raw?.locale === "fr" ? "fr" : "en";
+  if (!parsed.success) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", children: t("TransactionPreview.error.invalidProps", locale) });
+  }
+  const p = parsed.data;
+  if (p.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("TransactionPreview.loading", p.locale), children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", count: 6, locale: p.locale }) });
+  }
+  if (!hasPreviewContent(p)) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: t("TransactionPreview.empty.message", p.locale), locale: p.locale });
+  }
+  const highImpact = p.quote?.priceImpact !== void 0 && compareDecimalStrings(p.quote.priceImpact, "1") >= 0;
+  const handoff = normalizeHttpUrl(p.handoff?.url);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": t("TransactionPreview.title", p.locale),
+      lang: p.locale,
+      className: "flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4",
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("strong", { className: "text-slate-900", children: t(`TransactionPreview.kind.${p.kind}`, p.locale) }),
+          p.testnet ? /* @__PURE__ */ jsx(
+            Badge,
+            {
+              label: t("TransactionPreview.testnet", p.locale),
+              variant: "warning",
+              locale: p.locale
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "note",
+            className: "m-0 rounded bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-900",
+            children: t("TransactionPreview.notice", p.locale)
+          }
+        ),
+        /* @__PURE__ */ jsxs("dl", { className: "m-0", children: [
+          p.network ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.network", p.locale), children: p.network }) : null,
+          p.from ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.from", p.locale), children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: p.from }) }) : null,
+          p.to ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.to", p.locale), children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: p.to }) }) : null,
+          p.amount ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.amount", p.locale), children: amountText(p.amount) }) : null,
+          p.quote ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.sell", p.locale), children: amountText(p.quote.sell) }),
+            /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.buy", p.locale), children: amountText(p.quote.buy) }),
+            p.quote.minReceived ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.minReceived", p.locale), children: amountText(p.quote.minReceived) }) : null,
+            p.quote.route ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.route", p.locale), children: p.quote.route.join(" > ") }) : null,
+            p.quote.priceImpact !== void 0 ? /* @__PURE__ */ jsxs(Row, { label: t("TransactionPreview.field.priceImpact", p.locale), children: [
+              /* @__PURE__ */ jsx("span", { children: `${p.quote.priceImpact}%` }),
+              highImpact ? /* @__PURE__ */ jsx("strong", { className: "ml-2 text-red-700", children: t("TransactionPreview.priceImpact.high", p.locale) }) : null
+            ] }) : null
+          ] }) : null,
+          p.fee ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.fee", p.locale), children: amountText(p.fee) }) : null,
+          p.expiresAt ? /* @__PURE__ */ jsx(Row, { label: t("TransactionPreview.field.expires", p.locale), children: formatTimestamp(p.expiresAt, p.locale, p.timeZone) }) : null
+        ] }),
+        p.simulation ? /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+          /* @__PURE__ */ jsx("strong", { className: p.simulation.status === "failed" ? "text-red-700" : "text-slate-800", children: t(`TransactionPreview.simulation.${p.simulation.status}`, p.locale) }),
+          p.simulation.message ? /* @__PURE__ */ jsx("span", { className: "block text-slate-600", children: p.simulation.message }) : null
+        ] }) : null,
+        p.warnings.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+          /* @__PURE__ */ jsx("strong", { className: "text-amber-800", children: t("TransactionPreview.warnings", p.locale) }),
+          /* @__PURE__ */ jsx("ul", { className: "m-0 pl-5", children: p.warnings.map((w) => /* @__PURE__ */ jsx("li", { children: w }, w)) })
+        ] }) : null,
+        handoff ? raw.onHandoff ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => raw.onHandoff?.(handoff),
+            className: "self-start rounded border border-slate-300 px-3 py-1 text-sm hover:bg-slate-50",
+            children: t("TransactionPreview.handoff", p.locale)
+          }
+        ) : /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: handoff,
+            rel: "noopener noreferrer",
+            target: "_blank",
+            className: "self-start text-sm text-blue-700 underline",
+            children: t("TransactionPreview.handoff", p.locale)
+          }
+        ) : null
+      ]
+    }
+  );
+}
 
-export { Alert, AlertPropsSchema, ConfirmDialog, ConfirmDialogPropsSchema, ConfirmDialog as ConfirmModal, TokenDisplayOnceModal, TokenDisplayOnceModalPropsSchema, validateAlertProps, validateConfirmDialogProps, validateTokenDisplayOnceModalProps };
+export { Alert, AlertPropsSchema, ConfirmDialog, ConfirmDialogPropsSchema, ConfirmDialog as ConfirmModal, TokenDisplayOnceModal, TokenDisplayOnceModalPropsSchema, TransactionPreview, TransactionPreviewPropsSchema, validateAlertProps, validateConfirmDialogProps, validateTokenDisplayOnceModalProps, validateTransactionPreviewProps };
 //# sourceMappingURL=confirmation.js.map
 //# sourceMappingURL=confirmation.js.map