@frontmcp/ui 0.8.0 → 0.9.0

package/esm/index.mjs

@@ -1022,6 +1022,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
+import { sanitizeHtmlContent } from "@frontmcp/uipack/runtime";
 function getVariantClasses2(variant) {
   const variants = {
     default: "bg-white border border-border rounded-xl shadow-sm",
@@ -1056,33 +1057,38 @@ function card(content, options = {}) {
     id,
     data,
     clickable = false,
-    href
+    href,
+    sanitize = false
   } = options;
+  const safeContent = sanitize ? sanitizeHtmlContent(content) : content;
+  const safeHeaderActions = sanitize && headerActions ? sanitizeHtmlContent(headerActions) : headerActions;
+  const safeFooter = sanitize && footer ? 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 ? escapeHtml2(className) : "";
+  const allClasses = [variantClasses, sizeClasses, clickableClasses, safeClassName].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs(data);
   const idAttr = id ? `id="${escapeHtml2(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">${escapeHtml2(title)}</h3>` : ""}
           ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml2(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="${escapeHtml2(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
-      ${content}
+      ${safeContent}
       ${footerHtml}
     </a>`;
   }
   return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
     ${headerHtml}
-    ${content}
+    ${safeContent}
     ${footerHtml}
   </div>`;
 }
@@ -1090,12 +1096,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 ? escapeHtml2(className) : "";
+  return `<div class="${directionClasses} ${gapClasses[gap]} ${safeClassName}">
     ${cards.join("\n")}
   </div>`;
 }
 
 // libs/ui/src/components/form.ts
+import { sanitizeHtmlContent as sanitizeHtmlContent2 } from "@frontmcp/uipack/runtime";
 function getInputSizeClasses(size) {
   const sizes = {
     sm: "px-3 py-1.5 text-sm",
@@ -1140,11 +1148,15 @@ function input(options) {
     className = "",
     data,
     iconBefore,
-    iconAfter
+    iconAfter,
+    sanitize = false
   } = options;
+  const safeIconBefore = sanitize && iconBefore ? sanitizeHtmlContent2(iconBefore) : iconBefore;
+  const safeIconAfter = sanitize && iconAfter ? sanitizeHtmlContent2(iconAfter) : iconAfter;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
-  const hasIcon = iconBefore || iconAfter;
+  const hasIcon = safeIconBefore || safeIconAfter;
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1152,8 +1164,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 = [
@@ -1178,8 +1190,8 @@ function input(options) {
       </label>` : "";
   const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml2(helper)}</p>` : "";
   const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml2(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}>
@@ -1211,6 +1223,7 @@ function select(options) {
   } = options;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1218,7 +1231,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) => {
@@ -1275,6 +1288,7 @@ function textarea(options) {
     horizontal: "resize-x",
     both: "resize"
   };
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1283,7 +1297,7 @@ function textarea(options) {
     sizeClasses,
     stateClasses,
     resizeClasses[resize],
-    className
+    safeClassName
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
   const labelHtml = label ? `<label for="${escapeHtml2(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
@@ -1327,7 +1341,8 @@ function checkbox(options) {
   ].join(" ");
   const helperHtml = helper && !error ? `<p class="text-sm text-text-secondary">${escapeHtml2(helper)}</p>` : "";
   const errorHtml = error ? `<p class="text-sm text-danger">${escapeHtml2(error)}</p>` : "";
-  return `<div class="form-field ${className}">
+  const safeClassName = className ? escapeHtml2(className) : "";
+  return `<div class="form-field ${safeClassName}">
     <label class="flex items-start gap-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}">
       <input
         type="checkbox"
@@ -1371,7 +1386,8 @@ function radioGroup(options) {
   const labelHtml = label ? `<label class="block text-sm font-medium text-text-primary mb-2">${escapeHtml2(label)}</label>` : "";
   const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml2(helper)}</p>` : "";
   const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml2(error)}</p>` : "";
-  return `<div class="form-field ${className}" role="radiogroup">
+  const safeClassName = className ? escapeHtml2(className) : "";
+  return `<div class="form-field ${safeClassName}" role="radiogroup">
     ${labelHtml}
     <div class="${directionClasses}">
       ${radiosHtml}
@@ -1393,10 +1409,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 ? escapeHtml2(className) : "";
+  return `<div class="grid ${gridCols} ${gapClasses[gap]} ${safeClassName}">
     ${fields.join("\n")}
   </div>`;
 }
@@ -1406,7 +1438,8 @@ function formSection(content, options = {}) {
         <h3 class="text-lg font-semibold text-text-primary">${escapeHtml2(title)}</h3>
         ${description ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml2(description)}</p>` : ""}
       </div>` : "";
-  return `<div class="form-section ${className}">
+  const safeClassName = className ? escapeHtml2(className) : "";
+  return `<div class="form-section ${safeClassName}">
     ${headerHtml}
     <div class="space-y-4">
       ${content}
@@ -1421,7 +1454,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 ? escapeHtml2(className) : "";
+  return `<div class="flex items-center gap-3 pt-4 ${alignClasses[align]} ${safeClassName}">
     ${buttons.join("\n")}
   </div>`;
 }
@@ -1433,6 +1467,7 @@ function csrfInput(token) {
 }
 
 // libs/ui/src/components/badge.ts
+import { sanitizeHtmlContent as sanitizeHtmlContent3 } from "@frontmcp/uipack/runtime";
 function getVariantClasses3(variant) {
   const variants = {
     default: "bg-gray-100 text-gray-800",
@@ -1470,8 +1505,11 @@ function badge(text, options = {}) {
     icon,
     dot = false,
     className = "",
-    removable = false
+    removable = false,
+    sanitize = false
   } = options;
+  const safeIcon = sanitize && icon ? sanitizeHtmlContent3(icon) : icon;
+  const safeClassName = className ? escapeHtml2(className) : "";
   if (dot) {
     const dotVariants = {
       default: "bg-gray-400",
@@ -1483,7 +1521,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="${escapeHtml2(text)}" title="${escapeHtml2(text)}"></span>`;
   }
   const variantClasses = getVariantClasses3(variant);
@@ -1493,9 +1531,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"
@@ -1513,7 +1551,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 ? escapeHtml2(className) : "";
+  return `<div class="inline-flex flex-wrap ${gapClasses[gap]} ${safeClassName}">
     ${badges.join("\n")}
   </div>`;
 }
@@ -1529,6 +1568,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
+import { sanitizeHtmlContent as sanitizeHtmlContent4 } from "@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"/>
@@ -1572,11 +1612,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 ? sanitizeHtmlContent4(icon) : icon;
+  const safeActions = sanitize && actions ? sanitizeHtmlContent4(actions) : actions;
   const variantClasses = getVariantClasses4(variant);
-  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  const safeClassName = className ? escapeHtml2(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">${escapeHtml2(title)}</h3>` : "";
   const dismissHtml = dismissible ? `<button
@@ -1589,7 +1642,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="${escapeHtml2(id)}"` : "";
   return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
     <div class="flex gap-3">
@@ -5088,7 +5141,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/esm/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/esm/renderers/index.mjs

@@ -206,7 +206,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/esm/universal/index.mjs

@@ -202,6 +202,8 @@ function withFrontMCP(Component) {
 
 // libs/ui/src/universal/renderers/html.renderer.ts
 import React2 from "react";
+import { sanitizeHtmlContent } from "@frontmcp/uipack/runtime";
+var sanitizeHtml = sanitizeHtmlContent;
 var htmlRenderer = {
   type: "html",
   priority: 0,
@@ -220,13 +222,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,

package/esm/web-components/index.mjs

@@ -618,6 +618,7 @@ function registerFmcpButton() {
 }
 
 // libs/ui/src/components/card.ts
+import { sanitizeHtmlContent } from "@frontmcp/uipack/runtime";
 function getVariantClasses2(variant) {
   const variants = {
     default: "bg-white border border-border rounded-xl shadow-sm",
@@ -652,33 +653,38 @@ function card(content, options = {}) {
     id,
     data,
     clickable = false,
-    href
+    href,
+    sanitize = false
   } = options;
+  const safeContent = sanitize ? sanitizeHtmlContent(content) : content;
+  const safeHeaderActions = sanitize && headerActions ? sanitizeHtmlContent(headerActions) : headerActions;
+  const safeFooter = sanitize && footer ? 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 ? escapeHtml2(className) : "";
+  const allClasses = [variantClasses, sizeClasses, clickableClasses, safeClassName].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs(data);
   const idAttr = id ? `id="${escapeHtml2(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">${escapeHtml2(title)}</h3>` : ""}
           ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml2(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="${escapeHtml2(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
-      ${content}
+      ${safeContent}
       ${footerHtml}
     </a>`;
   }
   return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
     ${headerHtml}
-    ${content}
+    ${safeContent}
     ${footerHtml}
   </div>`;
 }
@@ -801,6 +807,7 @@ function registerFmcpCard() {
 }
 
 // libs/ui/src/components/alert.ts
+import { sanitizeHtmlContent as sanitizeHtmlContent2 } from "@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"/>
@@ -844,11 +851,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 ? sanitizeHtmlContent2(icon) : icon;
+  const safeActions = sanitize && actions ? sanitizeHtmlContent2(actions) : actions;
   const variantClasses = getVariantClasses3(variant);
-  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  const safeClassName = className ? escapeHtml2(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">${escapeHtml2(title)}</h3>` : "";
   const dismissHtml = dismissible ? `<button
@@ -861,7 +881,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="${escapeHtml2(id)}"` : "";
   return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
     <div class="flex gap-3">
@@ -978,6 +998,7 @@ function registerFmcpAlert() {
 }
 
 // libs/ui/src/components/badge.ts
+import { sanitizeHtmlContent as sanitizeHtmlContent3 } from "@frontmcp/uipack/runtime";
 function getVariantClasses4(variant) {
   const variants = {
     default: "bg-gray-100 text-gray-800",
@@ -1015,8 +1036,11 @@ function badge(text, options = {}) {
     icon,
     dot = false,
     className = "",
-    removable = false
+    removable = false,
+    sanitize = false
   } = options;
+  const safeIcon = sanitize && icon ? sanitizeHtmlContent3(icon) : icon;
+  const safeClassName = className ? escapeHtml2(className) : "";
   if (dot) {
     const dotVariants = {
       default: "bg-gray-400",
@@ -1028,7 +1052,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="${escapeHtml2(text)}" title="${escapeHtml2(text)}"></span>`;
   }
   const variantClasses = getVariantClasses4(variant);
@@ -1038,9 +1062,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"
@@ -1159,6 +1183,7 @@ function registerFmcpBadge() {
 }
 
 // libs/ui/src/components/form.ts
+import { sanitizeHtmlContent as sanitizeHtmlContent4 } from "@frontmcp/uipack/runtime";
 function getInputSizeClasses(size) {
   const sizes = {
     sm: "px-3 py-1.5 text-sm",
@@ -1203,11 +1228,15 @@ function input(options) {
     className = "",
     data,
     iconBefore,
-    iconAfter
+    iconAfter,
+    sanitize = false
   } = options;
+  const safeIconBefore = sanitize && iconBefore ? sanitizeHtmlContent4(iconBefore) : iconBefore;
+  const safeIconAfter = sanitize && iconAfter ? sanitizeHtmlContent4(iconAfter) : iconAfter;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
-  const hasIcon = iconBefore || iconAfter;
+  const hasIcon = safeIconBefore || safeIconAfter;
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1215,8 +1244,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 = [
@@ -1241,8 +1270,8 @@ function input(options) {
       </label>` : "";
   const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml2(helper)}</p>` : "";
   const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml2(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}>
@@ -1274,6 +1303,7 @@ function select(options) {
   } = options;
   const sizeClasses = getInputSizeClasses(size);
   const stateClasses = getInputStateClasses(state);
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "w-full rounded-lg border bg-white",
     "transition-colors duration-200",
@@ -1281,7 +1311,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) => {