@frontmcp/ui 0.8.0 → 0.9.0

package/index.js

@@ -1219,6 +1219,7 @@ var dangerButton = (text, opts) => button(text, { ...opts, variant: "danger" });
 var linkButton = (text, opts) => button(text, { ...opts, variant: "link" });
 
 // libs/ui/src/components/card.ts
+var import_runtime = require("@frontmcp/uipack/runtime");
 function getVariantClasses2(variant) {
   const variants = {
     default: "bg-white border border-border rounded-xl shadow-sm",
@@ -1253,33 +1254,38 @@ function card(content, options = {}) {
     id,
     data,
     clickable = false,
-    href
+    href,
+    sanitize = false
   } = options;
+  const safeContent = sanitize ? (0, import_runtime.sanitizeHtmlContent)(content) : content;
+  const safeHeaderActions = sanitize && headerActions ? (0, import_runtime.sanitizeHtmlContent)(headerActions) : headerActions;
+  const safeFooter = sanitize && footer ? (0, import_runtime.sanitizeHtmlContent)(footer) : footer;
   const variantClasses = getVariantClasses2(variant);
   const sizeClasses = getSizeClasses2(size);
   const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
-  const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(" ");
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  const allClasses = [variantClasses, sizeClasses, clickableClasses, safeClassName].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs(data);
   const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  const hasHeader = title || subtitle || headerActions;
+  const hasHeader = title || subtitle || safeHeaderActions;
   const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
         <div>
           ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>` : ""}
           ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${(0, import_utils2.escapeHtml)(subtitle)}</p>` : ""}
         </div>
-        ${headerActions ? `<div class="flex items-center gap-2">${headerActions}</div>` : ""}
+        ${safeHeaderActions ? `<div class="flex items-center gap-2">${safeHeaderActions}</div>` : ""}
       </div>` : "";
-  const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : "";
+  const footerHtml = safeFooter ? `<div class="mt-4 pt-4 border-t border-divider">${safeFooter}</div>` : "";
   if (href) {
     return `<a href="${(0, import_utils2.escapeHtml)(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
-      ${content}
+      ${safeContent}
       ${footerHtml}
     </a>`;
   }
   return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
     ${headerHtml}
-    ${content}
+    ${safeContent}
     ${footerHtml}
   </div>`;
 }
@@ -1287,12 +1293,14 @@ function cardGroup(cards, options = {}) {
   const { direction = "vertical", gap = "md", className = "" } = options;
   const gapClasses = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
   const directionClasses = direction === "horizontal" ? "flex flex-row flex-wrap" : "flex flex-col";
-  return `<div class="${directionClasses} ${gapClasses[gap]} ${className}">
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="${directionClasses} ${gapClasses[gap]} ${safeClassName}">
     ${cards.join("\n")}
   </div>`;
 }
 
 // libs/ui/src/components/form.ts
+var import_runtime2 = require("@frontmcp/uipack/runtime");
 function getInputSizeClasses(size) {
   const sizes = {
     sm: "px-3 py-1.5 text-sm",
@@ -1337,11 +1345,15 @@ function input(options) {
     className = "",
     data,
     iconBefore,
-    iconAfter
+    iconAfter,
+    sanitize = false
   } = options;
+  const safeIconBefore = sanitize && iconBefore ? (0, import_runtime2.sanitizeHtmlContent)(iconBefore) : iconBefore;
+  const safeIconAfter = sanitize && iconAfter ? (0, import_runtime2.sanitizeHtmlContent)(iconAfter) : iconAfter;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
-  const hasIcon = iconBefore || iconAfter;
+  const hasIcon = safeIconBefore || safeIconAfter;
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1349,8 +1361,8 @@ function input(options) {
     disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
     sizeClasses,
     stateClasses,
-    hasIcon ? (iconBefore ? "pl-10" : "") + (iconAfter ? " pr-10" : "") : "",
-    className
+    hasIcon ? (safeIconBefore ? "pl-10" : "") + (safeIconAfter ? " pr-10" : "") : "",
+    safeClassName
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
   const inputAttrs = [
@@ -1375,8 +1387,8 @@ function input(options) {
       </label>` : "";
   const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
   const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  const iconBeforeHtml = iconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconBefore}</span>` : "";
-  const iconAfterHtml = iconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconAfter}</span>` : "";
+  const iconBeforeHtml = safeIconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${safeIconBefore}</span>` : "";
+  const iconAfterHtml = safeIconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${safeIconAfter}</span>` : "";
   const inputHtml = hasIcon ? `<div class="relative">
         ${iconBeforeHtml}
         <input ${inputAttrs}>
@@ -1408,6 +1420,7 @@ function select(options) {
   } = options;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1415,7 +1428,7 @@ function select(options) {
     disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
     sizeClasses,
     stateClasses,
-    className
+    safeClassName
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
   const optionsHtml = selectOptions.map((opt) => {
@@ -1472,6 +1485,7 @@ function textarea(options) {
     horizontal: "resize-x",
     both: "resize"
   };
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1480,7 +1494,7 @@ function textarea(options) {
     sizeClasses,
     stateClasses,
     resizeClasses[resize],
-    className
+    safeClassName
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
   const labelHtml = label ? `<label for="${(0, import_utils2.escapeHtml)(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
@@ -1524,7 +1538,8 @@ function checkbox(options) {
   ].join(" ");
   const helperHtml = helper && !error ? `<p class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
   const errorHtml = error ? `<p class="text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  return `<div class="form-field ${className}">
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="form-field ${safeClassName}">
     <label class="flex items-start gap-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}">
       <input
         type="checkbox"
@@ -1568,7 +1583,8 @@ function radioGroup(options) {
   const labelHtml = label ? `<label class="block text-sm font-medium text-text-primary mb-2">${(0, import_utils2.escapeHtml)(label)}</label>` : "";
   const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
   const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  return `<div class="form-field ${className}" role="radiogroup">
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="form-field ${safeClassName}" role="radiogroup">
     ${labelHtml}
     <div class="${directionClasses}">
       ${radiosHtml}
@@ -1590,10 +1606,26 @@ function form(content, options = {}) {
   ].filter(Boolean).join(" ");
   return `<form ${attrs}>${content}</form>`;
 }
+var GRID_COLS_MAP = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12"
+};
 function formRow(fields, options = {}) {
   const { gap = "md", className = "" } = options;
   const gapClasses = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
-  return `<div class="grid grid-cols-${fields.length} ${gapClasses[gap]} ${className}">
+  const gridCols = GRID_COLS_MAP[fields.length] ?? "grid-cols-1";
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="grid ${gridCols} ${gapClasses[gap]} ${safeClassName}">
     ${fields.join("\n")}
   </div>`;
 }
@@ -1603,7 +1635,8 @@ function formSection(content, options = {}) {
         <h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>
         ${description ? `<p class="text-sm text-text-secondary mt-1">${(0, import_utils2.escapeHtml)(description)}</p>` : ""}
       </div>` : "";
-  return `<div class="form-section ${className}">
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="form-section ${safeClassName}">
     ${headerHtml}
     <div class="space-y-4">
       ${content}
@@ -1618,7 +1651,8 @@ function formActions(buttons, options = {}) {
     right: "justify-end",
     between: "justify-between"
   };
-  return `<div class="flex items-center gap-3 pt-4 ${alignClasses[align]} ${className}">
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="flex items-center gap-3 pt-4 ${alignClasses[align]} ${safeClassName}">
     ${buttons.join("\n")}
   </div>`;
 }
@@ -1630,6 +1664,7 @@ function csrfInput(token) {
 }
 
 // libs/ui/src/components/badge.ts
+var import_runtime3 = require("@frontmcp/uipack/runtime");
 function getVariantClasses3(variant) {
   const variants = {
     default: "bg-gray-100 text-gray-800",
@@ -1667,8 +1702,11 @@ function badge(text, options = {}) {
     icon,
     dot = false,
     className = "",
-    removable = false
+    removable = false,
+    sanitize = false
   } = options;
+  const safeIcon = sanitize && icon ? (0, import_runtime3.sanitizeHtmlContent)(icon) : icon;
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   if (dot) {
     const dotVariants = {
       default: "bg-gray-400",
@@ -1680,7 +1718,7 @@ function badge(text, options = {}) {
       info: "bg-blue-500",
       outline: "border border-current"
     };
-    const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], className].filter(Boolean).join(" ");
+    const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], safeClassName].filter(Boolean).join(" ");
     return `<span class="${dotClasses}" aria-label="${(0, import_utils2.escapeHtml)(text)}" title="${(0, import_utils2.escapeHtml)(text)}"></span>`;
   }
   const variantClasses = getVariantClasses3(variant);
@@ -1690,9 +1728,9 @@ function badge(text, options = {}) {
     pill ? "rounded-full" : "rounded-md",
     variantClasses,
     sizeClasses,
-    className
+    safeClassName
   ].filter(Boolean).join(" ");
-  const iconHtml = icon ? `<span class="mr-1">${icon}</span>` : "";
+  const iconHtml = safeIcon ? `<span class="mr-1">${safeIcon}</span>` : "";
   const removeHtml = removable ? `<button
         type="button"
         class="ml-1.5 -mr-1 hover:opacity-70 transition-opacity"
@@ -1710,7 +1748,8 @@ function badge(text, options = {}) {
 function badgeGroup(badges, options = {}) {
   const { gap = "sm", className = "" } = options;
   const gapClasses = { sm: "gap-1", md: "gap-2", lg: "gap-3" };
-  return `<div class="inline-flex flex-wrap ${gapClasses[gap]} ${className}">
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  return `<div class="inline-flex flex-wrap ${gapClasses[gap]} ${safeClassName}">
     ${badges.join("\n")}
   </div>`;
 }
@@ -1726,6 +1765,7 @@ var busyDot = (label = "Busy") => badge(label, { variant: "danger", dot: true })
 var awayDot = (label = "Away") => badge(label, { variant: "warning", dot: true });
 
 // libs/ui/src/components/alert.ts
+var import_runtime4 = require("@frontmcp/uipack/runtime");
 var alertIcons = {
   info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
@@ -1769,11 +1809,24 @@ function getVariantClasses4(variant) {
   return variants[variant];
 }
 function alert(message, options = {}) {
-  const { variant = "info", title, showIcon = true, icon, dismissible = false, className = "", id, actions } = options;
+  const {
+    variant = "info",
+    title,
+    showIcon = true,
+    icon,
+    dismissible = false,
+    className = "",
+    id,
+    actions,
+    sanitize = false
+  } = options;
+  const safeIcon = sanitize && icon ? (0, import_runtime4.sanitizeHtmlContent)(icon) : icon;
+  const safeActions = sanitize && actions ? (0, import_runtime4.sanitizeHtmlContent)(actions) : actions;
   const variantClasses = getVariantClasses4(variant);
-  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  const baseClasses = ["rounded-lg border p-4", variantClasses.container, safeClassName].filter(Boolean).join(" ");
   const iconHtml = showIcon ? `<div class="flex-shrink-0 ${variantClasses.icon}">
-        ${icon || alertIcons[variant]}
+        ${safeIcon || alertIcons[variant]}
       </div>` : "";
   const titleHtml = title ? `<h3 class="font-semibold">${(0, import_utils2.escapeHtml)(title)}</h3>` : "";
   const dismissHtml = dismissible ? `<button
@@ -1786,7 +1839,7 @@ function alert(message, options = {}) {
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
         </svg>
       </button>` : "";
-  const actionsHtml = actions ? `<div class="mt-3">${actions}</div>` : "";
+  const actionsHtml = safeActions ? `<div class="mt-3">${safeActions}</div>` : "";
   const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
   return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
     <div class="flex gap-3">
@@ -5258,7 +5311,17 @@ var ReactRendererAdapter = class {
       return true;
     }
     if (typeof content === "string") {
-      return content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(") || /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*return\s*[\s\S]*</.test(content);
+      if (content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(")) {
+        return true;
+      }
+      const funcIndex = content.indexOf("function");
+      if (funcIndex !== -1) {
+        const afterFunc = content.slice(funcIndex, Math.min(funcIndex + 2e3, content.length));
+        if (afterFunc.includes("return") && afterFunc.includes("<")) {
+          return true;
+        }
+      }
+      return false;
     }
     return false;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontmcp/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "FrontMCP UI - React components and hooks for MCP applications",
   "author": "AgentFront <info@agentfront.dev>",
   "homepage": "https://docs.agentfront.dev",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@frontmcp/uipack": "0.8.0"
+    "@frontmcp/uipack": "0.9.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/renderers/index.js

@@ -250,7 +250,17 @@ var ReactRendererAdapter = class {
       return true;
     }
     if (typeof content === "string") {
-      return content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(") || /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*return\s*[\s\S]*</.test(content);
+      if (content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(")) {
+        return true;
+      }
+      const funcIndex = content.indexOf("function");
+      if (funcIndex !== -1) {
+        const afterFunc = content.slice(funcIndex, Math.min(funcIndex + 2e3, content.length));
+        if (afterFunc.includes("return") && afterFunc.includes("<")) {
+          return true;
+        }
+      }
+      return false;
     }
     return false;
   }

package/renderers/react.adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.adapter.d.ts","sourceRoot":"","sources":["../../src/renderers/react.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC5G,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAsDrD;;;;;;;GAOG;AACH,qBAAa,oBAAqB,YAAW,eAAe;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAW;IAGhC,OAAO,CAAC,KAAK,CAA6B;IAC1C,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,WAAW,CAA8B;IAEjD;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO;IAqB7C;;;OAGG;IACG,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;IAMhG;;OAEG;IACG,WAAW,CACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,YAAY,CAAC;IA4DxB;;OAEG;IACG,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAI1G;;OAEG;IACG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAsChF;;OAEG;IACH,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAQlC;;OAEG;YACW,iBAAiB;IAa/B;;OAEG;YACW,SAAS;IAmCvB;;OAEG;IACH,OAAO,CAAC,YAAY;CAsBrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED;;GAEG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,eAAe,CAAC,CAEjE"}
+{"version":3,"file":"react.adapter.d.ts","sourceRoot":"","sources":["../../src/renderers/react.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC5G,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAsDrD;;;;;;;GAOG;AACH,qBAAa,oBAAqB,YAAW,eAAe;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAW;IAGhC,OAAO,CAAC,KAAK,CAA6B;IAC1C,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,WAAW,CAA8B;IAEjD;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO;IAiC7C;;;OAGG;IACG,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;IAMhG;;OAEG;IACG,WAAW,CACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,YAAY,CAAC;IA4DxB;;OAEG;IACG,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAI1G;;OAEG;IACG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAsChF;;OAEG;IACH,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAQlC;;OAEG;YACW,iBAAiB;IAa/B;;OAEG;YACW,SAAS;IAmCvB;;OAEG;IACH,OAAO,CAAC,YAAY;CAsBrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED;;GAEG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,eAAe,CAAC,CAEjE"}

package/universal/index.js

@@ -287,6 +287,8 @@ function withFrontMCP(Component) {
 
 // libs/ui/src/universal/renderers/html.renderer.ts
 var import_react3 = __toESM(require("react"));
+var import_runtime = require("@frontmcp/uipack/runtime");
+var sanitizeHtml = import_runtime.sanitizeHtmlContent;
 var htmlRenderer = {
   type: "html",
   priority: 0,
@@ -305,13 +307,6 @@ var htmlRenderer = {
     });
   }
 };
-function sanitizeHtml(html) {
-  let sanitized = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
-  sanitized = sanitized.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, "");
-  sanitized = sanitized.replace(/\s+on\w+\s*=\s*[^\s>]*/gi, "");
-  sanitized = sanitized.replace(/href\s*=\s*["']javascript:[^"']*["']/gi, 'href="#"');
-  return sanitized;
-}
 var safeHtmlRenderer = {
   type: "html",
   priority: 0,
@@ -1177,7 +1172,7 @@ function buildMinimalRuntime(options) {
 }
 
 // libs/ui/src/universal/cached-runtime.ts
-var import_runtime = require("@frontmcp/uipack/runtime");
+var import_runtime2 = require("@frontmcp/uipack/runtime");
 var import_build = require("@frontmcp/uipack/build");
 var RUNTIME_PLACEHOLDERS = {
   /** Placeholder for transpiled component code */
@@ -1655,7 +1650,7 @@ function getCachedRuntime(options, config = {}) {
   }
   const vendorParts = [];
   if (options.includeBridge) {
-    vendorParts.push((0, import_runtime.getMCPBridgeScript)());
+    vendorParts.push((0, import_runtime2.getMCPBridgeScript)());
   }
   vendorParts.push(buildStoreRuntime2(), buildRequireShim());
   if (options.cdnType === "umd" || options.includeMarkdown) {

package/universal/renderers/html.renderer.d.ts

@@ -5,6 +5,12 @@
  * Used for pre-rendered or server-side generated HTML content.
  */
 import type { ClientRenderer } from '../types';
+import { sanitizeHtmlContent } from '@frontmcp/uipack/runtime';
+/**
+ * Re-export sanitizeHtmlContent as sanitizeHtml for backward compatibility.
+ * Uses DOMPurify in browser environments for robust sanitization.
+ */
+export declare const sanitizeHtml: typeof sanitizeHtmlContent;
 /**
  * HTML renderer implementation.
  *
@@ -22,16 +28,9 @@ import type { ClientRenderer } from '../types';
  * ```
  */
 export declare const htmlRenderer: ClientRenderer;
-/**
- * Sanitize HTML string (basic XSS protection).
- * For production use, consider using a library like DOMPurify.
- *
- * @param html - HTML string to sanitize
- * @returns Sanitized HTML string
- */
-export declare function sanitizeHtml(html: string): string;
 /**
  * Create a safe HTML renderer that sanitizes content.
+ * Uses DOMPurify in browser environments for robust protection against XSS.
  */
 export declare const safeHtmlRenderer: ClientRenderer;
 //# sourceMappingURL=html.renderer.d.ts.map

package/universal/renderers/html.renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.renderer.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/html.renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,cAsB1B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAYjD;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAsB9B,CAAC"}
+{"version":3,"file":"html.renderer.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/html.renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,YAAY,4BAAsB,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,cAsB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAsB9B,CAAC"}

package/web-components/index.js

@@ -652,6 +652,7 @@ function registerFmcpButton() {
 }
 
 // libs/ui/src/components/card.ts
+var import_runtime = require("@frontmcp/uipack/runtime");
 function getVariantClasses2(variant) {
   const variants = {
     default: "bg-white border border-border rounded-xl shadow-sm",
@@ -686,33 +687,38 @@ function card(content, options = {}) {
     id,
     data,
     clickable = false,
-    href
+    href,
+    sanitize = false
   } = options;
+  const safeContent = sanitize ? (0, import_runtime.sanitizeHtmlContent)(content) : content;
+  const safeHeaderActions = sanitize && headerActions ? (0, import_runtime.sanitizeHtmlContent)(headerActions) : headerActions;
+  const safeFooter = sanitize && footer ? (0, import_runtime.sanitizeHtmlContent)(footer) : footer;
   const variantClasses = getVariantClasses2(variant);
   const sizeClasses = getSizeClasses2(size);
   const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
-  const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(" ");
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  const allClasses = [variantClasses, sizeClasses, clickableClasses, safeClassName].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs(data);
   const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  const hasHeader = title || subtitle || headerActions;
+  const hasHeader = title || subtitle || safeHeaderActions;
   const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
         <div>
           ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>` : ""}
           ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${(0, import_utils2.escapeHtml)(subtitle)}</p>` : ""}
         </div>
-        ${headerActions ? `<div class="flex items-center gap-2">${headerActions}</div>` : ""}
+        ${safeHeaderActions ? `<div class="flex items-center gap-2">${safeHeaderActions}</div>` : ""}
       </div>` : "";
-  const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : "";
+  const footerHtml = safeFooter ? `<div class="mt-4 pt-4 border-t border-divider">${safeFooter}</div>` : "";
   if (href) {
     return `<a href="${(0, import_utils2.escapeHtml)(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
-      ${content}
+      ${safeContent}
       ${footerHtml}
     </a>`;
   }
   return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
     ${headerHtml}
-    ${content}
+    ${safeContent}
     ${footerHtml}
   </div>`;
 }
@@ -835,6 +841,7 @@ function registerFmcpCard() {
 }
 
 // libs/ui/src/components/alert.ts
+var import_runtime2 = require("@frontmcp/uipack/runtime");
 var alertIcons = {
   info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
@@ -878,11 +885,24 @@ function getVariantClasses3(variant) {
   return variants[variant];
 }
 function alert(message, options = {}) {
-  const { variant = "info", title, showIcon = true, icon, dismissible = false, className = "", id, actions } = options;
+  const {
+    variant = "info",
+    title,
+    showIcon = true,
+    icon,
+    dismissible = false,
+    className = "",
+    id,
+    actions,
+    sanitize = false
+  } = options;
+  const safeIcon = sanitize && icon ? (0, import_runtime2.sanitizeHtmlContent)(icon) : icon;
+  const safeActions = sanitize && actions ? (0, import_runtime2.sanitizeHtmlContent)(actions) : actions;
   const variantClasses = getVariantClasses3(variant);
-  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
+  const baseClasses = ["rounded-lg border p-4", variantClasses.container, safeClassName].filter(Boolean).join(" ");
   const iconHtml = showIcon ? `<div class="flex-shrink-0 ${variantClasses.icon}">
-        ${icon || alertIcons[variant]}
+        ${safeIcon || alertIcons[variant]}
       </div>` : "";
   const titleHtml = title ? `<h3 class="font-semibold">${(0, import_utils2.escapeHtml)(title)}</h3>` : "";
   const dismissHtml = dismissible ? `<button
@@ -895,7 +915,7 @@ function alert(message, options = {}) {
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
         </svg>
       </button>` : "";
-  const actionsHtml = actions ? `<div class="mt-3">${actions}</div>` : "";
+  const actionsHtml = safeActions ? `<div class="mt-3">${safeActions}</div>` : "";
   const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
   return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
     <div class="flex gap-3">
@@ -1012,6 +1032,7 @@ function registerFmcpAlert() {
 }
 
 // libs/ui/src/components/badge.ts
+var import_runtime3 = require("@frontmcp/uipack/runtime");
 function getVariantClasses4(variant) {
   const variants = {
     default: "bg-gray-100 text-gray-800",
@@ -1049,8 +1070,11 @@ function badge(text, options = {}) {
     icon,
     dot = false,
     className = "",
-    removable = false
+    removable = false,
+    sanitize = false
   } = options;
+  const safeIcon = sanitize && icon ? (0, import_runtime3.sanitizeHtmlContent)(icon) : icon;
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   if (dot) {
     const dotVariants = {
       default: "bg-gray-400",
@@ -1062,7 +1086,7 @@ function badge(text, options = {}) {
       info: "bg-blue-500",
       outline: "border border-current"
     };
-    const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], className].filter(Boolean).join(" ");
+    const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], safeClassName].filter(Boolean).join(" ");
     return `<span class="${dotClasses}" aria-label="${(0, import_utils2.escapeHtml)(text)}" title="${(0, import_utils2.escapeHtml)(text)}"></span>`;
   }
   const variantClasses = getVariantClasses4(variant);
@@ -1072,9 +1096,9 @@ function badge(text, options = {}) {
     pill ? "rounded-full" : "rounded-md",
     variantClasses,
     sizeClasses,
-    className
+    safeClassName
   ].filter(Boolean).join(" ");
-  const iconHtml = icon ? `<span class="mr-1">${icon}</span>` : "";
+  const iconHtml = safeIcon ? `<span class="mr-1">${safeIcon}</span>` : "";
   const removeHtml = removable ? `<button
         type="button"
         class="ml-1.5 -mr-1 hover:opacity-70 transition-opacity"
@@ -1193,6 +1217,7 @@ function registerFmcpBadge() {
 }
 
 // libs/ui/src/components/form.ts
+var import_runtime4 = require("@frontmcp/uipack/runtime");
 function getInputSizeClasses(size) {
   const sizes = {
     sm: "px-3 py-1.5 text-sm",
@@ -1237,11 +1262,15 @@ function input(options) {
     className = "",
     data,
     iconBefore,
-    iconAfter
+    iconAfter,
+    sanitize = false
   } = options;
+  const safeIconBefore = sanitize && iconBefore ? (0, import_runtime4.sanitizeHtmlContent)(iconBefore) : iconBefore;
+  const safeIconAfter = sanitize && iconAfter ? (0, import_runtime4.sanitizeHtmlContent)(iconAfter) : iconAfter;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
-  const hasIcon = iconBefore || iconAfter;
+  const hasIcon = safeIconBefore || safeIconAfter;
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1249,8 +1278,8 @@ function input(options) {
     disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
     sizeClasses,
     stateClasses,
-    hasIcon ? (iconBefore ? "pl-10" : "") + (iconAfter ? " pr-10" : "") : "",
-    className
+    hasIcon ? (safeIconBefore ? "pl-10" : "") + (safeIconAfter ? " pr-10" : "") : "",
+    safeClassName
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
   const inputAttrs = [
@@ -1275,8 +1304,8 @@ function input(options) {
       </label>` : "";
   const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
   const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  const iconBeforeHtml = iconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconBefore}</span>` : "";
-  const iconAfterHtml = iconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconAfter}</span>` : "";
+  const iconBeforeHtml = safeIconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${safeIconBefore}</span>` : "";
+  const iconAfterHtml = safeIconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${safeIconAfter}</span>` : "";
   const inputHtml = hasIcon ? `<div class="relative">
         ${iconBeforeHtml}
         <input ${inputAttrs}>
@@ -1308,6 +1337,7 @@ function select(options) {
   } = options;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1315,7 +1345,7 @@ function select(options) {
     disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
     sizeClasses,
     stateClasses,
-    className
+    safeClassName
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
   const optionsHtml = selectOptions.map((opt) => {