@vantageos/mosaic 0.2.2 → 0.3.0

package/dist/preact/display.js

@@ -1,3 +1,777 @@
+import { z } from 'zod';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { h } from 'preact';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef, useCallback, useState, useEffect } from 'preact/compat';
 
+// 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);
+}
+
+// src/i18n/strings.ts
+var EN = {
+  // ─── Non-forms components ──────────────────────────────────────────────────
+  "ProgressBar.aria.label": "Progress",
+  "ProgressBar.error.invalidProps": "ProgressBar: invalid props",
+  "ConfirmDialog.button.confirm": "Confirm",
+  "ConfirmDialog.button.cancel": "Cancel",
+  "ConfirmDialog.aria.dialog": "Confirmation dialog",
+  "TableView.aria.table": "Data table",
+  "TableView.pagination.next": "Next page",
+  "TableView.pagination.prev": "Previous page",
+  "TableView.empty.message": "No data to display",
+  "TableView.error.invalidProps": "TableView: invalid props",
+  "MarkdownRenderer.aria.content": "Rendered Markdown content",
+  "MarkdownRenderer.error.invalidProps": "MarkdownRenderer: invalid props",
+  "MarkdownRenderer.error.tooLong": "Content exceeds maximum length",
+  "TokenDisplayOnceModal.button.copy": "Copy token",
+  "TokenDisplayOnceModal.button.close": "Close",
+  "TokenDisplayOnceModal.warning.once": "This token will only be shown once. Copy it now.",
+  "TokenDisplayOnceModal.copied": "Copied",
+  "StatusBadge.aria.status": "Status",
+  "StatusBadge.error.invalidProps": "StatusBadge: invalid props",
+  "EmptyState.error.invalidProps": "EmptyState: invalid props",
+  "Toast.aria.close": "Close notification",
+  "Toast.error.invalidProps": "Toast: invalid props",
+  "Alert.aria.dismiss": "Dismiss alert",
+  "Alert.error.invalidProps": "Alert: invalid props",
+  "VirtualList.empty.message": "No items to display",
+  "VirtualList.error.invalidProps": "VirtualList: invalid props",
+  "Skeleton.aria.label": "Loading",
+  "Skeleton.error.invalidProps": "Skeleton: invalid props",
+  // ─── Forms — useMosaicForm ─────────────────────────────────────────────────
+  "useMosaicForm.error.invalidProps": "useMosaicForm: invalid options",
+  // ─── Forms — FormProvider ──────────────────────────────────────────────────
+  "FormProvider.error.invalidProps": "FormProvider: invalid props",
+  // ─── Forms — FormField ────────────────────────────────────────────────────
+  "FormField.error.invalidProps": "FormField: invalid props",
+  // ─── Forms — ErrorDisplay ─────────────────────────────────────────────────
+  "ErrorDisplay.error.required": "This field is required",
+  "ErrorDisplay.error.min": "Value is below the minimum",
+  "ErrorDisplay.error.max": "Value exceeds the maximum",
+  "ErrorDisplay.error.minLength": "Input is too short",
+  "ErrorDisplay.error.maxLength": "Input is too long",
+  "ErrorDisplay.error.pattern": "Invalid format",
+  "ErrorDisplay.error.email": "Enter a valid email address",
+  "ErrorDisplay.error.url": "Enter a valid URL",
+  "ErrorDisplay.error.generic": "Invalid value",
+  // ─── Forms — SubmitButton ─────────────────────────────────────────────────
+  "SubmitButton.aria.submit": "Submit form",
+  "SubmitButton.state.loading": "Submitting\u2026",
+  "SubmitButton.error.invalidProps": "SubmitButton: invalid props",
+  // ─── Forms — Input ────────────────────────────────────────────────────────
+  "Input.aria.label": "Input field",
+  "Input.error.required": "This field is required",
+  "Input.error.invalid": "Invalid value",
+  "Input.error.tooLong": "Input is too long",
+  "Input.error.tooShort": "Input is too short",
+  "Input.error.invalidProps": "Input: invalid props",
+  // ─── Forms — Textarea ─────────────────────────────────────────────────────
+  "Textarea.aria.label": "Text area",
+  "Textarea.error.required": "This field is required",
+  "Textarea.error.tooLong": "Text is too long",
+  "Textarea.counter.remaining": "characters remaining",
+  "Textarea.error.invalidProps": "Textarea: invalid props",
+  // ─── Forms — FieldArray ───────────────────────────────────────────────────
+  "FieldArray.aria.list": "List of items",
+  "FieldArray.aria.addItem": "Add item",
+  "FieldArray.aria.removeItem": "Remove item",
+  "FieldArray.error.invalidProps": "FieldArray: invalid props",
+  // ─── Forms — Checkbox ─────────────────────────────────────────────────────
+  "Checkbox.aria.label": "Checkbox",
+  "Checkbox.error.required": "This field must be checked",
+  "Checkbox.error.invalidProps": "Checkbox: invalid props",
+  // ─── Forms — MultiSelect ──────────────────────────────────────────────────
+  "MultiSelect.aria.label": "Multi-select field",
+  "MultiSelect.aria.removeChip": "Remove",
+  "MultiSelect.error.required": "Select at least one option",
+  "MultiSelect.error.maxItems": "Maximum number of selections reached",
+  "MultiSelect.placeholder": "Select options\u2026",
+  "MultiSelect.search.placeholder": "Search\u2026",
+  "MultiSelect.empty": "No options available",
+  "MultiSelect.error.invalidProps": "MultiSelect: invalid props",
+  // ─── Forms — RadioGroup ───────────────────────────────────────────────────
+  "RadioGroup.aria.label": "Radio group",
+  "RadioGroup.error.required": "Select one option",
+  "RadioGroup.error.invalidProps": "RadioGroup: invalid props",
+  // ─── Forms — Select ───────────────────────────────────────────────────────
+  "Select.placeholder": "Select an option\u2026",
+  "Select.search.placeholder": "Search\u2026",
+  "Select.empty": "No options available",
+  "Select.error.required": "Select an option",
+  "Select.error.invalidProps": "Select: invalid props"
+};
+var FR = {
+  // ─── Non-forms components ──────────────────────────────────────────────────
+  "ProgressBar.aria.label": "Progression",
+  "ProgressBar.error.invalidProps": "ProgressBar : propri\xE9t\xE9s invalides",
+  "ConfirmDialog.button.confirm": "Confirmer",
+  "ConfirmDialog.button.cancel": "Annuler",
+  "ConfirmDialog.aria.dialog": "Bo\xEEte de dialogue de confirmation",
+  "TableView.aria.table": "Tableau de donn\xE9es",
+  "TableView.pagination.next": "Page suivante",
+  "TableView.pagination.prev": "Page pr\xE9c\xE9dente",
+  "TableView.empty.message": "Aucune donn\xE9e \xE0 afficher",
+  "TableView.error.invalidProps": "TableView : propri\xE9t\xE9s invalides",
+  "MarkdownRenderer.aria.content": "Contenu Markdown rendu",
+  "MarkdownRenderer.error.invalidProps": "MarkdownRenderer : propri\xE9t\xE9s invalides",
+  "MarkdownRenderer.error.tooLong": "Le contenu d\xE9passe la longueur maximale",
+  "TokenDisplayOnceModal.button.copy": "Copier le jeton",
+  "TokenDisplayOnceModal.button.close": "Fermer",
+  "TokenDisplayOnceModal.warning.once": "Ce jeton ne sera affich\xE9 qu'une seule fois. Copiez-le maintenant.",
+  "TokenDisplayOnceModal.copied": "Copi\xE9",
+  "StatusBadge.aria.status": "Statut",
+  "StatusBadge.error.invalidProps": "StatusBadge : 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",
+  "Alert.aria.dismiss": "Fermer l'alerte",
+  "Alert.error.invalidProps": "Alert : propri\xE9t\xE9s invalides",
+  "VirtualList.empty.message": "Aucun \xE9l\xE9ment \xE0 afficher",
+  "VirtualList.error.invalidProps": "VirtualList : propri\xE9t\xE9s invalides",
+  "Skeleton.aria.label": "Chargement",
+  "Skeleton.error.invalidProps": "Skeleton : propri\xE9t\xE9s invalides",
+  // ─── Forms — useMosaicForm ─────────────────────────────────────────────────
+  "useMosaicForm.error.invalidProps": "useMosaicForm : options invalides",
+  // ─── Forms — FormProvider ──────────────────────────────────────────────────
+  "FormProvider.error.invalidProps": "FormProvider : propri\xE9t\xE9s invalides",
+  // ─── Forms — FormField ────────────────────────────────────────────────────
+  "FormField.error.invalidProps": "FormField : propri\xE9t\xE9s invalides",
+  // ─── Forms — ErrorDisplay ─────────────────────────────────────────────────
+  "ErrorDisplay.error.required": "Ce champ est obligatoire",
+  "ErrorDisplay.error.min": "La valeur est inf\xE9rieure au minimum",
+  "ErrorDisplay.error.max": "La valeur d\xE9passe le maximum",
+  "ErrorDisplay.error.minLength": "La saisie est trop courte",
+  "ErrorDisplay.error.maxLength": "La saisie est trop longue",
+  "ErrorDisplay.error.pattern": "Format invalide",
+  "ErrorDisplay.error.email": "Saisissez une adresse e-mail valide",
+  "ErrorDisplay.error.url": "Saisissez une URL valide",
+  "ErrorDisplay.error.generic": "Valeur invalide",
+  // ─── Forms — SubmitButton ─────────────────────────────────────────────────
+  "SubmitButton.aria.submit": "Soumettre le formulaire",
+  "SubmitButton.state.loading": "Envoi en cours\u2026",
+  "SubmitButton.error.invalidProps": "SubmitButton : propri\xE9t\xE9s invalides",
+  // ─── Forms — Input ────────────────────────────────────────────────────────
+  "Input.aria.label": "Champ de saisie",
+  "Input.error.required": "Ce champ est obligatoire",
+  "Input.error.invalid": "Valeur invalide",
+  "Input.error.tooLong": "La saisie est trop longue",
+  "Input.error.tooShort": "La saisie est trop courte",
+  "Input.error.invalidProps": "Input : propri\xE9t\xE9s invalides",
+  // ─── Forms — Textarea ─────────────────────────────────────────────────────
+  "Textarea.aria.label": "Zone de texte",
+  "Textarea.error.required": "Ce champ est obligatoire",
+  "Textarea.error.tooLong": "Le texte est trop long",
+  "Textarea.counter.remaining": "caract\xE8res restants",
+  "Textarea.error.invalidProps": "Textarea : propri\xE9t\xE9s invalides",
+  // ─── Forms — FieldArray ───────────────────────────────────────────────────
+  "FieldArray.aria.list": "Liste d'\xE9l\xE9ments",
+  "FieldArray.aria.addItem": "Ajouter un \xE9l\xE9ment",
+  "FieldArray.aria.removeItem": "Supprimer l'\xE9l\xE9ment",
+  "FieldArray.error.invalidProps": "FieldArray : propri\xE9t\xE9s invalides",
+  // ─── Forms — Checkbox ─────────────────────────────────────────────────────
+  "Checkbox.aria.label": "Case \xE0 cocher",
+  "Checkbox.error.required": "Ce champ doit \xEAtre coch\xE9",
+  "Checkbox.error.invalidProps": "Checkbox : propri\xE9t\xE9s invalides",
+  // ─── Forms — MultiSelect ──────────────────────────────────────────────────
+  "MultiSelect.aria.label": "Champ de s\xE9lection multiple",
+  "MultiSelect.aria.removeChip": "Retirer",
+  "MultiSelect.error.required": "S\xE9lectionnez au moins une option",
+  "MultiSelect.error.maxItems": "Nombre maximum de s\xE9lections atteint",
+  "MultiSelect.placeholder": "S\xE9lectionner des options\u2026",
+  "MultiSelect.search.placeholder": "Rechercher\u2026",
+  "MultiSelect.empty": "Aucune option disponible",
+  "MultiSelect.error.invalidProps": "MultiSelect : propri\xE9t\xE9s invalides",
+  // ─── Forms — RadioGroup ───────────────────────────────────────────────────
+  "RadioGroup.aria.label": "Groupe de boutons radio",
+  "RadioGroup.error.required": "S\xE9lectionnez une option",
+  "RadioGroup.error.invalidProps": "RadioGroup : propri\xE9t\xE9s invalides",
+  // ─── Forms — Select ───────────────────────────────────────────────────────
+  "Select.placeholder": "S\xE9lectionner une option\u2026",
+  "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"
+};
+var TABLE = {
+  en: EN,
+  fr: FR
+};
+function t(key, locale = "en") {
+  return TABLE[locale]?.[key] ?? TABLE.en[key];
+}
+function EmptyStateInner({
+  icon,
+  title,
+  description,
+  action,
+  locale: _locale
+}) {
+  const variant = action?.variant ?? "primary";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      class: "flex flex-col items-center justify-center gap-4 px-6 py-12 text-center",
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", class: "text-slate-400", children: icon }),
+        /* @__PURE__ */ jsx("h2", { class: "text-base font-semibold text-slate-900", children: title }),
+        description && /* @__PURE__ */ jsx("p", { class: "max-w-sm text-sm leading-relaxed text-slate-500", children: description }),
+        action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onClick, class: 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")
+  };
+}
+
+// src/runtimes/preact/components/display/Skeleton.tsx
+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__ */ h("div", { role: "status", "aria-label": ariaLabel, "aria-busy": "true", class: "flex flex-col gap-2" }, Array.from({ length: count }, (_, i) => /* @__PURE__ */ h(
+        "span",
+        {
+          key: textLineKey(i),
+          class: `block ${baseClass}`,
+          style: {
+            width: lastLineWidth(i, count, widthCss),
+            height: heightCss
+          },
+          "aria-hidden": "true"
+        }
+      )))
+    );
+  }
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-busy": "true",
+      class: `block ${baseClass}`,
+      style: { width: widthCss, height: heightCss }
+    }
+  );
+}
+function Skeleton(raw) {
+  try {
+    const props = validateSkeletonProps(raw);
+    return /* @__PURE__ */ h(SkeletonInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ h("span", { role: "alert", class: "text-red-600 text-sm" }, t("Skeleton.error.invalidProps", locale));
+  }
+}
+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",
+    {
+      "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);
+      }) })
+    }
+  );
+}
+var StatusBadgePropsSchema = z.object({
+  status: z.string(),
+  variant: z.enum(["success", "warning", "danger", "info", "neutral"]).default("neutral"),
+  label: z.string().optional(),
+  locale: z.enum(["en", "fr"])
+});
+function validateProps(raw) {
+  return StatusBadgePropsSchema.parse(raw);
+}
+var variantClasses = {
+  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"
+};
+function StatusBadgeInner({ status, variant, label, locale }) {
+  const ariaLabel = label ?? status;
+  return /* @__PURE__ */ jsx(
+    "output",
+    {
+      "aria-label": ariaLabel,
+      lang: locale,
+      class: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${variantClasses[variant]}`,
+      children: label ?? status
+    }
+  );
+}
+function StatusBadge(raw) {
+  try {
+    const props = validateProps(raw);
+    return /* @__PURE__ */ jsx(StatusBadgeInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsx("span", { role: "alert", children: t("StatusBadge.error.invalidProps", locale) });
+  }
+}
+var ColumnDefSchema = z.object({
+  key: z.string().min(1),
+  header: z.string().min(1)
+  // render is a runtime function — excluded from Zod, typed separately
+});
+var TableViewPropsSchema = z.object({
+  columns: z.array(ColumnDefSchema).min(1, "TableView requires at least one column"),
+  virtualizeThreshold: z.number().int().positive().default(100),
+  ariaLabel: z.string().min(1),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateTableViewProps(raw) {
+  return TableViewPropsSchema.parse(raw);
+}
+var OVERSCAN = 5;
+function TableView(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 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
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StaticTable,
+    {
+      rows: props.rows,
+      columns: props.columns,
+      ariaLabel: props.ariaLabel,
+      locale: resolvedLocale,
+      onRowClick: props.onRowClick
+    }
+  );
+}
+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) });
+  }
+  return /* @__PURE__ */ jsx(
+    StreamingTableViewInner,
+    {
+      ...props,
+      virtualizeThreshold: validatedThreshold,
+      onRowClick: props.onRowClick
+    }
+  );
+}
+function StreamingTableViewInner({
+  columns,
+  rows$,
+  virtualizeThreshold = 100,
+  ariaLabel,
+  locale,
+  onRowClick
+}) {
+  const resolvedLocale = locale === "fr" ? "fr" : "en";
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    setRows([]);
+    const sub = rows$.subscribe((chunk) => {
+      setRows((prev) => [...prev, ...chunk]);
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [rows$]);
+  const isVirtual = rows.length > virtualizeThreshold;
+  if (isVirtual) {
+    return /* @__PURE__ */ jsx(
+      VirtualTable,
+      {
+        rows,
+        columns,
+        ariaLabel,
+        locale: resolvedLocale,
+        onRowClick
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StaticTable,
+    {
+      rows,
+      columns,
+      ariaLabel,
+      locale: resolvedLocale,
+      onRowClick
+    }
+  );
+}
+function renderCell(col, row) {
+  if (col.render) {
+    return col.render(row);
+  }
+  return String(row[col.key] ?? "");
+}
+function StaticTable({
+  rows,
+  columns,
+  ariaLabel,
+  locale,
+  onRowClick
+}) {
+  const emptyMsg = t("TableView.empty.message", locale);
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      "aria-label": ariaLabel,
+      "aria-rowcount": rows.length,
+      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(
+          "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);
+                }
+              }
+            } : {},
+            children: columns.map((col) => /* @__PURE__ */ jsx("td", { children: renderCell(col, row) }, col.key))
+          },
+          row.id != null ? String(row.id) : `row-${rowIndex}`
+        )) })
+      ]
+    }
+  );
+}
+function VirtualTable({
+  rows,
+  columns,
+  ariaLabel,
+  // locale reserved for future virtual-mode empty/pagination strings
+  locale: _locale,
+  onRowClick
+}) {
+  const scrollRef = useRef(null);
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    /* v8 ignore next 1 */
+    getScrollElement: () => scrollRef.current,
+    estimateSize: useCallback(() => 40, []),
+    overscan: OVERSCAN
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-virtual": "true",
+      ref: scrollRef,
+      tabIndex: 0,
+      role: "region",
+      "aria-label": ariaLabel,
+      style: { height: 400, overflow: "auto", position: "relative" },
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          "aria-label": ariaLabel,
+          "aria-rowcount": rows.length,
+          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",
+              {
+                style: {
+                  height: `${totalSize}px`,
+                  position: "relative",
+                  display: "block"
+                },
+                children: virtualItems.map((virtualRow) => {
+                  const row = rows[virtualRow.index] ?? {};
+                  return /* @__PURE__ */ jsx(
+                    "tr",
+                    {
+                      "aria-rowindex": virtualRow.index + 2,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`,
+                        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);
+                          }
+                        }
+                      } : {},
+                      children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { flex: 1 }, children: renderCell(col, row) }, col.key))
+                    },
+                    row.id != null ? String(row.id) : `vrow-${virtualRow.index}`
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { EmptyState, EmptyStatePropsSchema, Skeleton, SkeletonPropsSchema, StatusBadge, StatusBadgePropsSchema, StreamingTableView, TableView, TableViewPropsSchema, VirtualList, VirtualListPropsSchema, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateProps as validateStatusBadgeProps, validateTableViewProps, validateVirtualListProps };
 //# sourceMappingURL=display.js.map
 //# sourceMappingURL=display.js.map