@frontmcp/ui 0.8.1 → 0.10.0

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) => {