@vantageos/mosaic 0.2.2 → 0.3.0

package/dist/display.d.cts

@@ -95,4 +95,135 @@ declare function TableView<TRow extends Record<string, unknown> = Record<string,
  */
 declare function StreamingTableView<TRow extends Record<string, unknown> = Record<string, unknown>>(props: StreamingTableViewProps<TRow>): react_jsx_runtime.JSX.Element;
 
-export { type ColumnDef, StreamingTableView, type StreamingTableViewProps, TableView, type TableViewProps, TableViewPropsSchema, type TableViewPropsSchemaInput, type TableViewPropsSchemaOutput, validateTableViewProps };
+/**
+ * EmptyState component props schema.
+ *
+ * Empty-set illustration + title + description + optional CTA.
+ * Consumer-driven i18n: caller passes already-localized strings.
+ *
+ * icon        — optional ReactNode / PreactNode passed by the caller
+ * title       — required heading (h2, consumer-driven i18n)
+ * description — optional supporting text
+ * action      — optional CTA: { label, onClick, variant? }
+ */
+declare const EmptyStatePropsSchema: z.ZodObject<{
+    title: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
+    action: z.ZodOptional<z.ZodObject<{
+        label: z.ZodString;
+        variant: z.ZodDefault<z.ZodEnum<["primary", "secondary"]>>;
+    }, "strip", z.ZodTypeAny, {
+        label: string;
+        variant: "primary" | "secondary";
+    }, {
+        label: string;
+        variant?: "primary" | "secondary" | undefined;
+    }>>;
+    locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
+}, "strip", z.ZodTypeAny, {
+    locale: "en" | "fr";
+    title: string;
+    description?: string | undefined;
+    action?: {
+        label: string;
+        variant: "primary" | "secondary";
+    } | undefined;
+}, {
+    title: string;
+    locale?: "en" | "fr" | undefined;
+    description?: string | undefined;
+    action?: {
+        label: string;
+        variant?: "primary" | "secondary" | undefined;
+    } | undefined;
+}>;
+type EmptyStatePropsSchemaInput = z.input<typeof EmptyStatePropsSchema>;
+type EmptyStatePropsSchemaOutput = z.output<typeof EmptyStatePropsSchema>;
+/**
+ * Full EmptyState props including framework-specific node types and callback.
+ * `icon` and `action.onClick` are excluded from Zod (functions/nodes are not serializable).
+ *
+ * Note: action.variant is optional for callers — Zod applies "primary" default at parse time.
+ */
+type EmptyStateProps = Omit<EmptyStatePropsSchemaOutput, "action"> & {
+    icon?: any;
+    action?: {
+        label: string;
+        variant?: "primary" | "secondary";
+        onClick: () => void;
+    };
+};
+declare function validateEmptyStateProps(raw: unknown): EmptyStatePropsSchemaOutput;
+
+/**
+ * Skeleton — cross-runtime loading placeholder (React 19 implementation).
+ *
+ * Accepts `Record<string, unknown>` for MCP postMessage injection safety.
+ * Zod validation narrows before render. Invalid props → accessible error span.
+ *
+ * Animation "none" is auto-applied when prefers-reduced-motion is set (via
+ * Tailwind's animate-pulse which respects the media query natively), or by
+ * passing animation="none" explicitly.
+ *
+ * WCAG-AA:
+ * - role="status" + aria-busy="true" on the container
+ * - aria-label resolves via t() in EN/FR
+ * - aria-hidden="true" on individual line spans (status role covers the group)
+ */
+declare function Skeleton(raw: Record<string, unknown>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Skeleton component props schema.
+ *
+ * variant  — shape of the placeholder:
+ *            "rect"   → rectangular block (default)
+ *            "circle" → circular avatar / icon placeholder
+ *            "text"   → single or multi-line text placeholder
+ *
+ * width / height — CSS values (string) or pixels (number).
+ *   "rect" defaults: width="100%", height=100
+ *   "circle" defaults: width=height (equal, square rendered as circle)
+ *   "text" defaults: width="100%", height=16
+ *
+ * count  — number of text line spans (only meaningful for variant="text").
+ *          Default 1. Ignored for rect/circle.
+ *
+ * animation — shimmer style:
+ *   "pulse" → opacity pulse (default)
+ *   "wave"  → left-to-right gradient sweep
+ *   "none"  → static placeholder (auto-selected when prefers-reduced-motion)
+ */
+declare const SkeletonPropsSchema: z.ZodObject<{
+    variant: z.ZodDefault<z.ZodEnum<["rect", "circle", "text"]>>;
+    width: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    height: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    count: z.ZodDefault<z.ZodNumber>;
+    animation: z.ZodDefault<z.ZodEnum<["pulse", "wave", "none"]>>;
+    locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
+}, "strip", z.ZodTypeAny, {
+    locale: "en" | "fr";
+    variant: "text" | "rect" | "circle";
+    count: number;
+    animation: "none" | "pulse" | "wave";
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+}, {
+    locale?: "en" | "fr" | undefined;
+    width?: string | number | undefined;
+    variant?: "text" | "rect" | "circle" | undefined;
+    count?: number | undefined;
+    height?: string | number | undefined;
+    animation?: "none" | "pulse" | "wave" | undefined;
+}>;
+type SkeletonProps = z.infer<typeof SkeletonPropsSchema>;
+declare function validateSkeletonProps(raw: unknown): SkeletonProps;
+/**
+ * Resolve final width/height CSS values given the variant and raw props.
+ * Centralised here so React + Preact runtimes share identical defaults.
+ */
+declare function resolveSkeletonDimensions(variant: SkeletonProps["variant"], width: SkeletonProps["width"], height: SkeletonProps["height"]): {
+    widthCss: string;
+    heightCss: string;
+};
+
+export { type ColumnDef, type EmptyStateProps, EmptyStatePropsSchema, type EmptyStatePropsSchemaInput, type EmptyStatePropsSchemaOutput, Skeleton, type SkeletonProps, SkeletonPropsSchema, StreamingTableView, type StreamingTableViewProps, TableView, type TableViewProps, TableViewPropsSchema, type TableViewPropsSchemaInput, type TableViewPropsSchemaOutput, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateTableViewProps };

package/dist/display.d.ts

@@ -95,4 +95,135 @@ declare function TableView<TRow extends Record<string, unknown> = Record<string,
  */
 declare function StreamingTableView<TRow extends Record<string, unknown> = Record<string, unknown>>(props: StreamingTableViewProps<TRow>): react_jsx_runtime.JSX.Element;
 
-export { type ColumnDef, StreamingTableView, type StreamingTableViewProps, TableView, type TableViewProps, TableViewPropsSchema, type TableViewPropsSchemaInput, type TableViewPropsSchemaOutput, validateTableViewProps };
+/**
+ * EmptyState component props schema.
+ *
+ * Empty-set illustration + title + description + optional CTA.
+ * Consumer-driven i18n: caller passes already-localized strings.
+ *
+ * icon        — optional ReactNode / PreactNode passed by the caller
+ * title       — required heading (h2, consumer-driven i18n)
+ * description — optional supporting text
+ * action      — optional CTA: { label, onClick, variant? }
+ */
+declare const EmptyStatePropsSchema: z.ZodObject<{
+    title: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
+    action: z.ZodOptional<z.ZodObject<{
+        label: z.ZodString;
+        variant: z.ZodDefault<z.ZodEnum<["primary", "secondary"]>>;
+    }, "strip", z.ZodTypeAny, {
+        label: string;
+        variant: "primary" | "secondary";
+    }, {
+        label: string;
+        variant?: "primary" | "secondary" | undefined;
+    }>>;
+    locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
+}, "strip", z.ZodTypeAny, {
+    locale: "en" | "fr";
+    title: string;
+    description?: string | undefined;
+    action?: {
+        label: string;
+        variant: "primary" | "secondary";
+    } | undefined;
+}, {
+    title: string;
+    locale?: "en" | "fr" | undefined;
+    description?: string | undefined;
+    action?: {
+        label: string;
+        variant?: "primary" | "secondary" | undefined;
+    } | undefined;
+}>;
+type EmptyStatePropsSchemaInput = z.input<typeof EmptyStatePropsSchema>;
+type EmptyStatePropsSchemaOutput = z.output<typeof EmptyStatePropsSchema>;
+/**
+ * Full EmptyState props including framework-specific node types and callback.
+ * `icon` and `action.onClick` are excluded from Zod (functions/nodes are not serializable).
+ *
+ * Note: action.variant is optional for callers — Zod applies "primary" default at parse time.
+ */
+type EmptyStateProps = Omit<EmptyStatePropsSchemaOutput, "action"> & {
+    icon?: any;
+    action?: {
+        label: string;
+        variant?: "primary" | "secondary";
+        onClick: () => void;
+    };
+};
+declare function validateEmptyStateProps(raw: unknown): EmptyStatePropsSchemaOutput;
+
+/**
+ * Skeleton — cross-runtime loading placeholder (React 19 implementation).
+ *
+ * Accepts `Record<string, unknown>` for MCP postMessage injection safety.
+ * Zod validation narrows before render. Invalid props → accessible error span.
+ *
+ * Animation "none" is auto-applied when prefers-reduced-motion is set (via
+ * Tailwind's animate-pulse which respects the media query natively), or by
+ * passing animation="none" explicitly.
+ *
+ * WCAG-AA:
+ * - role="status" + aria-busy="true" on the container
+ * - aria-label resolves via t() in EN/FR
+ * - aria-hidden="true" on individual line spans (status role covers the group)
+ */
+declare function Skeleton(raw: Record<string, unknown>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Skeleton component props schema.
+ *
+ * variant  — shape of the placeholder:
+ *            "rect"   → rectangular block (default)
+ *            "circle" → circular avatar / icon placeholder
+ *            "text"   → single or multi-line text placeholder
+ *
+ * width / height — CSS values (string) or pixels (number).
+ *   "rect" defaults: width="100%", height=100
+ *   "circle" defaults: width=height (equal, square rendered as circle)
+ *   "text" defaults: width="100%", height=16
+ *
+ * count  — number of text line spans (only meaningful for variant="text").
+ *          Default 1. Ignored for rect/circle.
+ *
+ * animation — shimmer style:
+ *   "pulse" → opacity pulse (default)
+ *   "wave"  → left-to-right gradient sweep
+ *   "none"  → static placeholder (auto-selected when prefers-reduced-motion)
+ */
+declare const SkeletonPropsSchema: z.ZodObject<{
+    variant: z.ZodDefault<z.ZodEnum<["rect", "circle", "text"]>>;
+    width: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    height: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    count: z.ZodDefault<z.ZodNumber>;
+    animation: z.ZodDefault<z.ZodEnum<["pulse", "wave", "none"]>>;
+    locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
+}, "strip", z.ZodTypeAny, {
+    locale: "en" | "fr";
+    variant: "text" | "rect" | "circle";
+    count: number;
+    animation: "none" | "pulse" | "wave";
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+}, {
+    locale?: "en" | "fr" | undefined;
+    width?: string | number | undefined;
+    variant?: "text" | "rect" | "circle" | undefined;
+    count?: number | undefined;
+    height?: string | number | undefined;
+    animation?: "none" | "pulse" | "wave" | undefined;
+}>;
+type SkeletonProps = z.infer<typeof SkeletonPropsSchema>;
+declare function validateSkeletonProps(raw: unknown): SkeletonProps;
+/**
+ * Resolve final width/height CSS values given the variant and raw props.
+ * Centralised here so React + Preact runtimes share identical defaults.
+ */
+declare function resolveSkeletonDimensions(variant: SkeletonProps["variant"], width: SkeletonProps["width"], height: SkeletonProps["height"]): {
+    widthCss: string;
+    heightCss: string;
+};
+
+export { type ColumnDef, type EmptyStateProps, EmptyStatePropsSchema, type EmptyStatePropsSchemaInput, type EmptyStatePropsSchemaOutput, Skeleton, type SkeletonProps, SkeletonPropsSchema, StreamingTableView, type StreamingTableViewProps, TableView, type TableViewProps, TableViewPropsSchema, type TableViewPropsSchemaInput, type TableViewPropsSchemaOutput, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateTableViewProps };

package/dist/display.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/i18n/strings.ts
 var EN = {
+  // ─── Non-forms components ──────────────────────────────────────────────────
   "ProgressBar.aria.label": "Progress",
   "ProgressBar.error.invalidProps": "ProgressBar: invalid props",
   "ConfirmDialog.button.confirm": "Confirm",
@@ -25,9 +26,80 @@ var EN = {
   "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"
+  "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",
@@ -46,7 +118,77 @@ var FR = {
   "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"
+  "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,
@@ -244,6 +386,9 @@ function VirtualTable({
     {
       "data-virtual": "true",
       ref: scrollRef,
+      tabIndex: 0,
+      role: "region",
+      "aria-label": ariaLabel,
       style: { height: 400, overflow: "auto", position: "relative" },
       children: /* @__PURE__ */ jsxs(
         "table",
@@ -300,7 +445,126 @@ function VirtualTable({
     }
   );
 }
+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/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) });
+  }
+}
 
-export { StreamingTableView, TableView, TableViewPropsSchema, validateTableViewProps };
+export { EmptyStatePropsSchema, Skeleton, SkeletonPropsSchema, StreamingTableView, TableView, TableViewPropsSchema, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateTableViewProps };
 //# sourceMappingURL=display.js.map
 //# sourceMappingURL=display.js.map