@vantageos/mosaic 0.2.2 → 0.3.0

package/dist/index.js

@@ -9,6 +9,7 @@ import { createUIResource } from '@mcp-ui/server';
 
 // src/i18n/strings.ts
 var EN = {
+  // ─── Non-forms components ──────────────────────────────────────────────────
   "ProgressBar.aria.label": "Progress",
   "ProgressBar.error.invalidProps": "ProgressBar: invalid props",
   "ConfirmDialog.button.confirm": "Confirm",
@@ -27,9 +28,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",
@@ -48,7 +120,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,
@@ -210,6 +352,23 @@ function ConfirmDialog(raw) {
     return null;
   }
 }
+var TabItemSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  /** ReactNode / PreactNode — accepted as unknown at Zod layer (JSX not serialisable). */
+  content: z.unknown(),
+  disabled: z.boolean().optional().default(false)
+});
+var TabsPropsSchema = z.object({
+  tabs: z.array(TabItemSchema).min(1),
+  value: z.string().optional(),
+  defaultValue: z.string().optional(),
+  orientation: z.enum(["horizontal", "vertical"]).default("horizontal"),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateTabsProps(raw) {
+  return TabsPropsSchema.parse(raw);
+}
 var ColumnDefSchema = z.object({
   key: z.string().min(1),
   header: z.string().min(1)
@@ -399,6 +558,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",
@@ -455,6 +617,125 @@ 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) });
+  }
+}
 var MarkdownRendererPropsSchema = z.object({
   content: z.string(),
   locale: z.enum(["en", "fr"]),
@@ -615,6 +896,26 @@ function TokenDisplayOnceModal(raw) {
     return null;
   }
 }
+var ToastPropsSchema = z.object({
+  variant: z.enum(["success", "error", "info", "warning"]),
+  title: z.string().min(1),
+  description: z.string().optional(),
+  duration: z.number().int().nonnegative().default(5e3),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateToastProps(raw) {
+  return ToastPropsSchema.parse(raw);
+}
+var AlertPropsSchema = z.object({
+  variant: z.enum(["success", "error", "info", "warning"]),
+  title: z.string().min(1),
+  description: z.string().optional(),
+  dismissible: z.boolean().default(false),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateAlertProps(raw) {
+  return AlertPropsSchema.parse(raw);
+}
 var StatusBadgePropsSchema = z.object({
   status: z.string(),
   variant: z.enum(["success", "warning", "danger", "info", "neutral"]).default("neutral"),
@@ -739,6 +1040,6 @@ function createMosaicResource(componentName, props, locale = "en") {
 }
 var MOSAIC_SUPPORTED_COMPONENTS = COMPONENT_KEYS;
 
-export { ConfirmDialog, ConfirmDialogPropsSchema, MCP_UI_CAPABILITY_KEY, MOSAIC_MIME_TYPE, MOSAIC_STREAM_CHUNK_TYPE, MOSAIC_SUPPORTED_COMPONENTS, MarkdownRenderer, MarkdownRendererPropsSchema, ProgressBar, ProgressBarPropsSchema, StatusBadge, StatusBadgePropsSchema, StreamingTableView, TableView, TableViewPropsSchema, TokenDisplayOnceModal, TokenDisplayOnceModalPropsSchema, createMosaicResource, createPostMessageObservable, useStreamingHydration, validateConfirmDialogProps, validateProps2 as validateMarkdownRendererProps, validateProps, validateProps3 as validateStatusBadgeProps, validateTableViewProps, validateTokenDisplayOnceModalProps };
+export { AlertPropsSchema, ConfirmDialog, ConfirmDialogPropsSchema, EmptyStatePropsSchema, MCP_UI_CAPABILITY_KEY, MOSAIC_MIME_TYPE, MOSAIC_STREAM_CHUNK_TYPE, MOSAIC_SUPPORTED_COMPONENTS, MarkdownRenderer, MarkdownRendererPropsSchema, ProgressBar, ProgressBarPropsSchema, Skeleton, SkeletonPropsSchema, StatusBadge, StatusBadgePropsSchema, StreamingTableView, TableView, TableViewPropsSchema, TabsPropsSchema, ToastPropsSchema, TokenDisplayOnceModal, TokenDisplayOnceModalPropsSchema, createMosaicResource, createPostMessageObservable, resolveSkeletonDimensions, useStreamingHydration, validateAlertProps, validateConfirmDialogProps, validateEmptyStateProps, validateProps2 as validateMarkdownRendererProps, validateProps, validateSkeletonProps, validateProps3 as validateStatusBadgeProps, validateTableViewProps, validateTabsProps, validateToastProps, validateTokenDisplayOnceModalProps };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map