@vantageos/mosaic 0.1.0

package/dist/index.cjs

@@ -0,0 +1,699 @@
+'use strict';
+
+var zod = require('zod');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactVirtual = require('@tanstack/react-virtual');
+var DOMPurify = require('dompurify');
+var marked = require('marked');
+var rxjs = require('rxjs');
+var server = require('@mcp-ui/server');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
+
+// src/i18n/strings.ts
+var EN = {
+  "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"
+};
+var FR = {
+  "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"
+};
+var TABLE = {
+  en: EN,
+  fr: FR
+};
+function t(key, locale = "en") {
+  return TABLE[locale]?.[key] ?? TABLE.en[key];
+}
+var ProgressBarPropsSchema = zod.z.object({
+  value: zod.z.number().min(0).max(100),
+  label: zod.z.string().min(1),
+  locale: zod.z.enum(["en", "fr"]).default("en"),
+  colorVariant: zod.z.enum(["default", "warning", "danger"]).default("default")
+});
+function validateProps(raw) {
+  return ProgressBarPropsSchema.parse(raw);
+}
+function pickLocale(raw) {
+  return raw.locale === "fr" ? "fr" : "en";
+}
+var colorVariantClasses = {
+  default: "bg-blue-600",
+  warning: "bg-amber-500",
+  danger: "bg-red-600"
+};
+var containerVariantClasses = {
+  default: "progressbar-default",
+  warning: "progressbar-warning",
+  danger: "progressbar-danger"
+};
+function ProgressBarInner(props) {
+  const { value, label, colorVariant } = props;
+  const fillClass = colorVariantClasses[colorVariant];
+  const containerClass = containerVariantClasses[colorVariant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label,
+      tabIndex: 0,
+      className: `mosaic-progress ${containerClass}`,
+      style: { width: "100%" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "progress-fill",
+            className: `mosaic-progress-fill ${fillClass}`,
+            style: { width: `${value}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mosaic-progress-label", children: [
+          label,
+          ": ",
+          value,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+function ProgressBar(raw) {
+  try {
+    const props = validateProps(raw);
+    return /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { ...props });
+  } catch {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", className: "mosaic-progress-error", children: t("ProgressBar.error.invalidProps", pickLocale(raw)) });
+  }
+}
+var ConfirmDialogPropsSchema = zod.z.object({
+  title: zod.z.string().min(1),
+  message: zod.z.string().min(1),
+  confirmLabel: zod.z.string().min(1),
+  cancelLabel: zod.z.string().min(1),
+  variant: zod.z.enum(["default", "danger"]).default("default"),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateConfirmDialogProps(raw) {
+  return ConfirmDialogPropsSchema.parse(raw);
+}
+function ConfirmDialogInner({
+  title,
+  message,
+  confirmLabel,
+  cancelLabel,
+  variant,
+  onConfirm,
+  onCancel
+}) {
+  const dialogRef = react.useRef(null);
+  const titleId = react.useId();
+  const messageId = react.useId();
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    dialog.showModal();
+    return () => {
+      if (dialog.open) dialog.close();
+    };
+  }, []);
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+    }
+  }
+  function handleBackdropClick(e) {
+    if (e.target === dialogRef.current) {
+      onCancel();
+    }
+  }
+  const confirmClassName = variant === "danger" ? "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600 px-4 py-2 rounded-md text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" : "bg-gray-900 text-white hover:bg-gray-700 focus-visible:outline-gray-900 px-4 py-2 rounded-md text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": messageId,
+      onKeyDown: handleKeyDown,
+      onClick: handleBackdropClick,
+      className: "rounded-lg shadow-xl p-0 backdrop:bg-black/40 w-full max-w-md mx-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "p-6 flex flex-col gap-4",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "text-lg font-semibold text-gray-900", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { id: messageId, className: "text-sm text-gray-600", children: message }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3 mt-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancel,
+                  className: "px-4 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 transition-colors",
+                  children: cancelLabel
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onConfirm, className: confirmClassName, children: confirmLabel })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function ConfirmDialog(raw) {
+  try {
+    const parsed = validateConfirmDialogProps(raw);
+    return /* @__PURE__ */ jsxRuntime.jsx(ConfirmDialogInner, { ...parsed, onConfirm: raw.onConfirm, onCancel: raw.onCancel });
+  } catch (err) {
+    console.error("[ConfirmDialog] Invalid props \u2014 component will not render.", err);
+    return null;
+  }
+}
+var ColumnDefSchema = zod.z.object({
+  key: zod.z.string().min(1),
+  header: zod.z.string().min(1)
+  // render is a runtime function — excluded from Zod, typed separately
+});
+var TableViewPropsSchema = zod.z.object({
+  columns: zod.z.array(ColumnDefSchema).min(1, "TableView requires at least one column"),
+  virtualizeThreshold: zod.z.number().int().positive().default(100),
+  ariaLabel: zod.z.string().min(1),
+  locale: zod.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__ */ jsxRuntime.jsx("div", { role: "alert", children: t("TableView.error.invalidProps", locale) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TableViewInner, { ...props, virtualizeThreshold: validatedThreshold });
+}
+function TableViewInner({
+  columns,
+  rows$,
+  virtualizeThreshold = 100,
+  ariaLabel,
+  locale
+}) {
+  const resolvedLocale = locale === "fr" ? "fr" : "en";
+  const [rows, setRows] = react.useState([]);
+  react.useEffect(() => {
+    setRows([]);
+    const sub = rows$.subscribe((chunk) => {
+      setRows((prev) => [...prev, ...chunk]);
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [rows$]);
+  const isVirtual = rows.length > virtualizeThreshold;
+  if (isVirtual) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VirtualTable,
+      {
+        rows,
+        columns,
+        ariaLabel,
+        locale: resolvedLocale
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StaticTable,
+    {
+      rows,
+      columns,
+      ariaLabel,
+      locale: resolvedLocale
+    }
+  );
+}
+function renderCell(col, row) {
+  if (col.render) {
+    return col.render(row);
+  }
+  return String(row[col.key] ?? "");
+}
+function StaticTable({
+  rows,
+  columns,
+  ariaLabel,
+  locale
+}) {
+  const emptyMsg = t("TableView.empty.message", locale);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      "aria-label": ariaLabel,
+      "aria-rowcount": rows.length,
+      style: { width: "100%", borderCollapse: "collapse" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: col.header }, col.key)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, "aria-label": emptyMsg, children: emptyMsg }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "tr",
+          {
+            "aria-rowindex": rowIndex + 2,
+            children: columns.map((col) => /* @__PURE__ */ jsxRuntime.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
+}) {
+  const scrollRef = react.useRef(null);
+  const rowVirtualizer = reactVirtual.useVirtualizer({
+    count: rows.length,
+    /* v8 ignore next 1 */
+    getScrollElement: () => scrollRef.current,
+    estimateSize: react.useCallback(() => 40, []),
+    overscan: OVERSCAN
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-virtual": "true",
+      ref: scrollRef,
+      style: { height: 400, overflow: "auto", position: "relative" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "table",
+        {
+          "aria-label": ariaLabel,
+          "aria-rowcount": rows.length,
+          style: { width: "100%", borderCollapse: "collapse" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: col.header }, col.key)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "tbody",
+              {
+                style: {
+                  height: `${totalSize}px`,
+                  position: "relative",
+                  display: "block"
+                },
+                children: virtualItems.map((virtualRow) => {
+                  const row = rows[virtualRow.index] ?? {};
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "tr",
+                    {
+                      "aria-rowindex": virtualRow.index + 2,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`,
+                        display: "flex"
+                      },
+                      children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { flex: 1 }, children: renderCell(col, row) }, col.key))
+                    },
+                    row.id != null ? String(row.id) : `vrow-${virtualRow.index}`
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var MarkdownRendererPropsSchema = zod.z.object({
+  content: zod.z.string(),
+  locale: zod.z.enum(["en", "fr"]),
+  maxLength: zod.z.number().positive().default(5e4),
+  allowHtml: zod.z.boolean().default(false)
+});
+function validateProps2(raw) {
+  return MarkdownRendererPropsSchema.parse(raw);
+}
+var tooLongMessages = {
+  en: "Content exceeds maximum length.",
+  fr: "Le contenu d\xE9passe la longueur maximale."
+};
+function MarkdownRendererInner({
+  content,
+  locale,
+  maxLength,
+  allowHtml
+}) {
+  if (content.length > maxLength) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", lang: locale, children: tooLongMessages[locale] });
+  }
+  const source = allowHtml ? content : content.replace(/<[^>]*>/g, "");
+  const rawHtml = marked.marked.parse(source, { async: false });
+  const cleanHtml = DOMPurify__default.default.sanitize(rawHtml);
+  const ariaLabel = locale === "fr" ? "Contenu format\xE9" : "Formatted content";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      "aria-label": ariaLabel,
+      lang: locale,
+      dangerouslySetInnerHTML: { __html: cleanHtml }
+    }
+  );
+}
+function MarkdownRenderer(raw) {
+  try {
+    const props = validateProps2(raw);
+    return /* @__PURE__ */ jsxRuntime.jsx(MarkdownRendererInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", children: t("MarkdownRenderer.error.invalidProps", locale) });
+  }
+}
+var TokenDisplayOnceModalPropsSchema = zod.z.object({
+  token: zod.z.string().min(1),
+  title: zod.z.string().min(1),
+  warningMessage: zod.z.string().min(1),
+  copyLabel: zod.z.string().min(1),
+  closeLabel: zod.z.string().min(1),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateTokenDisplayOnceModalProps(raw) {
+  return TokenDisplayOnceModalPropsSchema.parse(raw);
+}
+function TokenDisplayOnceModalInner({
+  token,
+  title,
+  warningMessage,
+  copyLabel,
+  closeLabel,
+  locale,
+  onClose
+}) {
+  const dialogRef = react.useRef(null);
+  const titleId = react.useId();
+  const warningId = react.useId();
+  const [copied, setCopied] = react.useState(false);
+  const [secureToken] = react.useState(token);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    dialog.showModal();
+    return () => {
+      if (dialog.open) dialog.close();
+    };
+  }, []);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(secureToken);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      setCopied(false);
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  }
+  function handleBackdropClick(e) {
+    if (e.target === dialogRef.current) {
+      onClose();
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": warningId,
+      onKeyDown: handleKeyDown,
+      onClick: handleBackdropClick,
+      className: "rounded-lg shadow-xl p-0 backdrop:bg-black/40 w-full max-w-lg mx-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "p-6 flex flex-col gap-4",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "text-lg font-semibold text-gray-900", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                id: warningId,
+                className: "text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2",
+                children: warningMessage
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-md px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "flex-1 text-sm font-mono text-gray-800 break-all select-all", children: secureToken }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("output", { "aria-live": "polite", "aria-atomic": "true", className: "min-h-[1.25rem] block", children: copied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-green-700 font-medium", children: t("TokenDisplayOnceModal.copied", locale) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3 mt-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  className: "px-4 py-2 rounded-md text-sm font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 transition-colors",
+                  children: copyLabel
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "px-4 py-2 rounded-md text-sm font-medium bg-gray-900 text-white hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 transition-colors",
+                  children: closeLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function TokenDisplayOnceModal(raw) {
+  try {
+    const parsed = validateTokenDisplayOnceModalProps(raw);
+    return /* @__PURE__ */ jsxRuntime.jsx(TokenDisplayOnceModalInner, { ...parsed, onClose: raw.onClose });
+  } catch (err) {
+    console.warn("[TokenDisplayOnceModal] Invalid props \u2014 component will not render.", err);
+    return null;
+  }
+}
+var StatusBadgePropsSchema = zod.z.object({
+  status: zod.z.string(),
+  variant: zod.z.enum(["success", "warning", "danger", "info", "neutral"]).default("neutral"),
+  label: zod.z.string().optional(),
+  locale: zod.z.enum(["en", "fr"])
+});
+function validateProps3(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__ */ jsxRuntime.jsx(
+    "output",
+    {
+      "aria-label": ariaLabel,
+      lang: locale,
+      className: `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 = validateProps3(raw);
+    return /* @__PURE__ */ jsxRuntime.jsx(StatusBadgeInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", children: t("StatusBadge.error.invalidProps", locale) });
+  }
+}
+function useStreamingHydration(props$) {
+  const [state, setState] = react.useState({});
+  react.useEffect(() => {
+    const sub = props$.subscribe((chunk) => {
+      setState((prev) => ({ ...prev, ...chunk }));
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [props$]);
+  return state;
+}
+var MOSAIC_STREAM_CHUNK_TYPE = "mosaic.stream.chunk";
+function createPostMessageObservable() {
+  const subject = new rxjs.Subject();
+  if (typeof window !== "undefined") {
+    window.addEventListener("message", (event) => {
+      const data = event.data;
+      if (data?.type === MOSAIC_STREAM_CHUNK_TYPE) {
+        subject.next(data.data ?? data.params);
+      }
+    });
+  }
+  return subject.asObservable();
+}
+var MCP_UI_CAPABILITY_KEY = "io.modelcontextprotocol/ui";
+var MOSAIC_MIME_TYPE = "text/html;profile=mcp-app";
+var SCHEMA_BY_NAME = {
+  ProgressBar: ProgressBarPropsSchema,
+  ConfirmDialog: ConfirmDialogPropsSchema,
+  TableView: TableViewPropsSchema,
+  MarkdownRenderer: MarkdownRendererPropsSchema,
+  TokenDisplayOnceModal: TokenDisplayOnceModalPropsSchema,
+  StatusBadge: StatusBadgePropsSchema
+};
+var COMPONENT_KEYS = Object.keys(SCHEMA_BY_NAME);
+var I18N_TITLE = {
+  ProgressBar: { en: "Progress", fr: "Progression" },
+  ConfirmDialog: { en: "Confirmation", fr: "Confirmation" },
+  TableView: { en: "Data table", fr: "Tableau de donn\xE9es" },
+  MarkdownRenderer: { en: "Markdown content", fr: "Contenu Markdown" },
+  TokenDisplayOnceModal: { en: "Token (shown once)", fr: "Jeton (affich\xE9 une fois)" },
+  StatusBadge: { en: "Status", fr: "Statut" }
+};
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function fallbackMarkdown(componentName, locale) {
+  const heading = I18N_TITLE[componentName][locale];
+  const note = locale === "fr" ? "Rendu Markdown de secours \u2014 composant Mosaic charg\xE9 via MCP UI." : "Markdown fallback \u2014 Mosaic component rendered via MCP UI.";
+  return `# ${heading}
+
+${note}
+`;
+}
+function buildHtml(componentName, props, locale) {
+  const propsJson = escapeHtml(JSON.stringify(props));
+  const title = escapeHtml(I18N_TITLE[componentName][locale]);
+  return `<!DOCTYPE html><html lang="${locale}"><head><meta charset="utf-8"><title>${title}</title></head><body><div id="mosaic-root" data-component="${componentName}" data-props='${propsJson}'></div></body></html>`;
+}
+function createMosaicResource(componentName, props, locale = "en") {
+  const schema = SCHEMA_BY_NAME[componentName];
+  if (!schema) {
+    throw new Error(`createMosaicResource: unknown component '${componentName}'`);
+  }
+  const validated = schema.parse(props);
+  const uri = `ui://mosaic/${componentName.toLowerCase()}`;
+  const html = buildHtml(componentName, validated, locale);
+  const fallback = fallbackMarkdown(componentName, locale);
+  const resource = server.createUIResource({
+    uri,
+    content: { type: "rawHtml", htmlString: html },
+    encoding: "text",
+    metadata: {
+      ui: {
+        resourceUri: uri,
+        locale,
+        componentName,
+        fallback
+      }
+    }
+  });
+  resource.resource.mimeType = MOSAIC_MIME_TYPE;
+  return resource;
+}
+var MOSAIC_SUPPORTED_COMPONENTS = COMPONENT_KEYS;
+
+exports.ConfirmDialog = ConfirmDialog;
+exports.ConfirmDialogPropsSchema = ConfirmDialogPropsSchema;
+exports.MCP_UI_CAPABILITY_KEY = MCP_UI_CAPABILITY_KEY;
+exports.MOSAIC_MIME_TYPE = MOSAIC_MIME_TYPE;
+exports.MOSAIC_STREAM_CHUNK_TYPE = MOSAIC_STREAM_CHUNK_TYPE;
+exports.MOSAIC_SUPPORTED_COMPONENTS = MOSAIC_SUPPORTED_COMPONENTS;
+exports.MarkdownRenderer = MarkdownRenderer;
+exports.MarkdownRendererPropsSchema = MarkdownRendererPropsSchema;
+exports.ProgressBar = ProgressBar;
+exports.ProgressBarPropsSchema = ProgressBarPropsSchema;
+exports.StatusBadge = StatusBadge;
+exports.StatusBadgePropsSchema = StatusBadgePropsSchema;
+exports.TableView = TableView;
+exports.TableViewPropsSchema = TableViewPropsSchema;
+exports.TokenDisplayOnceModal = TokenDisplayOnceModal;
+exports.TokenDisplayOnceModalPropsSchema = TokenDisplayOnceModalPropsSchema;
+exports.createMosaicResource = createMosaicResource;
+exports.createPostMessageObservable = createPostMessageObservable;
+exports.useStreamingHydration = useStreamingHydration;
+exports.validateConfirmDialogProps = validateConfirmDialogProps;
+exports.validateMarkdownRendererProps = validateProps2;
+exports.validateProps = validateProps;
+exports.validateStatusBadgeProps = validateProps3;
+exports.validateTableViewProps = validateTableViewProps;
+exports.validateTokenDisplayOnceModalProps = validateTokenDisplayOnceModalProps;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map