@frontmcp/ui 0.8.1 → 0.10.0

package/components/index.js

@@ -984,6 +984,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",
@@ -1018,33 +1019,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>`;
 }
@@ -1052,12 +1058,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",
@@ -1102,11 +1110,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",
@@ -1114,8 +1126,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 = [
@@ -1140,8 +1152,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}>
@@ -1173,6 +1185,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",
@@ -1180,7 +1193,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) => {
@@ -1237,6 +1250,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",
@@ -1245,7 +1259,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">
@@ -1289,7 +1303,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"
@@ -1333,7 +1348,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}
@@ -1355,10 +1371,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>`;
 }
@@ -1368,7 +1400,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}
@@ -1383,7 +1416,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>`;
 }
@@ -1395,6 +1429,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",
@@ -1432,8 +1467,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",
@@ -1445,7 +1483,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);
@@ -1455,9 +1493,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"
@@ -1475,7 +1513,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>`;
 }
@@ -1491,6 +1530,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"/>
@@ -1534,11 +1574,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
@@ -1551,7 +1604,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">

package/esm/bridge/index.mjs

@@ -1455,6 +1455,13 @@ var ExtAppsNotSupportedError = class extends Error {
 };
 
 // libs/ui/src/bridge/adapters/claude.adapter.ts
+var CLAUDE_DOMAINS = ["claude.ai", "anthropic.com"];
+function isValidClaudeDomain(hostname) {
+  const lowerHost = hostname.toLowerCase();
+  return CLAUDE_DOMAINS.some(
+    (domain) => lowerHost === domain || lowerHost.endsWith("." + domain)
+  );
+}
 var ClaudeAdapter = class extends BaseAdapter {
   id = "claude";
   name = "Claude (Anthropic)";
@@ -1495,8 +1502,7 @@ var ClaudeAdapter = class extends BaseAdapter {
     if (win.claude) return true;
     if (win.__claudeArtifact) return true;
     if (typeof location !== "undefined") {
-      const href = location.href;
-      if (href.includes("claude.ai") || href.includes("anthropic.com")) {
+      if (isValidClaudeDomain(location.hostname)) {
         return true;
       }
     }
@@ -1556,6 +1562,13 @@ function createClaudeAdapter() {
 }
 
 // libs/ui/src/bridge/adapters/gemini.adapter.ts
+var GEMINI_DOMAINS = ["gemini.google.com", "bard.google.com"];
+function isValidGeminiDomain(hostname) {
+  const lowerHost = hostname.toLowerCase();
+  return GEMINI_DOMAINS.some(
+    (domain) => lowerHost === domain || lowerHost.endsWith("." + domain)
+  );
+}
 var GeminiAdapter = class extends BaseAdapter {
   id = "gemini";
   name = "Google Gemini";
@@ -1585,8 +1598,7 @@ var GeminiAdapter = class extends BaseAdapter {
     if (win.__mcpPlatform === "gemini") return true;
     if (win.gemini) return true;
     if (typeof location !== "undefined") {
-      const href = location.href;
-      if (href.includes("gemini.google.com") || href.includes("bard.google.com")) {
+      if (isValidGeminiDomain(location.hostname)) {
         return true;
       }
     }

package/esm/components/index.mjs

@@ -856,6 +856,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",
@@ -890,33 +891,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>`;
 }
@@ -924,12 +930,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",
@@ -974,11 +982,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",
@@ -986,8 +998,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 = [
@@ -1012,8 +1024,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}>
@@ -1045,6 +1057,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",
@@ -1052,7 +1065,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) => {
@@ -1109,6 +1122,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",
@@ -1117,7 +1131,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">
@@ -1161,7 +1175,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"
@@ -1205,7 +1220,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}
@@ -1227,10 +1243,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>`;
 }
@@ -1240,7 +1272,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}
@@ -1255,7 +1288,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>`;
 }
@@ -1267,6 +1301,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",
@@ -1304,8 +1339,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",
@@ -1317,7 +1355,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);
@@ -1327,9 +1365,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"
@@ -1347,7 +1385,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>`;
 }
@@ -1363,6 +1402,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"/>
@@ -1406,11 +1446,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
@@ -1423,7 +1476,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">