@frontmcp/ui 0.6.0 → 0.6.1

package/esm/components/index.js

@@ -677,83 +677,23 @@ var ActionListOptionsSchema = z9.object({
   className: z9.string().optional()
 }).strict();
 
-// libs/ui/src/theme/platforms.ts
-var CLAUDE_PLATFORM = {
-  id: "claude",
-  name: "Claude (Artifacts)",
-  supportsWidgets: true,
-  supportsTailwind: true,
-  supportsHtmx: false,
-  // Network blocked, HTMX won't work for API calls
-  networkMode: "blocked",
-  scriptStrategy: "inline",
-  maxInlineSize: 100 * 1024,
-  // 100KB limit for artifacts
-  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
-  options: {
-    mode: "artifacts",
-    framework: "react"
-    // Claude artifacts prefer React
-  }
-};
-
-// libs/ui/src/utils/escape-html.ts
-function escapeHtml(str) {
-  if (str === null || str === void 0) {
-    return "";
-  }
-  const s = String(str);
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
-
-// libs/ui/src/validation/error-box.ts
-var errorIcon = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-</svg>`;
-function validationErrorBox(options) {
-  const { componentName, invalidParam } = options;
-  return `<div
-  class="validation-error flex items-start gap-3 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg"
-  role="alert"
-  data-testid="validation-error"
-  data-component="${escapeHtml(componentName)}"
-  data-param="${escapeHtml(invalidParam)}"
->
-  ${errorIcon}
-  <div class="min-w-0">
-    <p class="font-semibold text-sm">${escapeHtml(componentName)}: Invalid Configuration</p>
-    <p class="text-sm opacity-90 mt-0.5">The "${escapeHtml(invalidParam)}" parameter is invalid.</p>
-  </div>
-</div>`;
-}
-
-// libs/ui/src/validation/wrapper.ts
-function getFirstInvalidPath(error) {
-  const firstError = error.issues[0];
-  if (!firstError || firstError.path.length === 0) {
-    return "options";
-  }
-  return firstError.path.map(String).join(".");
-}
-function validateOptions(options, config) {
-  const result = config.schema.safeParse(options);
-  if (result.success) {
-    return { success: true, data: result.data };
-  }
-  const invalidParam = getFirstInvalidPath(result.error);
-  return {
-    success: false,
-    error: validationErrorBox({
-      componentName: config.componentName,
-      invalidParam
-    })
-  };
-}
-
-// libs/ui/src/validation/schema-paths.ts
-import { z as z10 } from "zod";
+// libs/ui/src/layouts/base.ts
+import {
+  OPENAI_PLATFORM,
+  canUseCdn,
+  needsInlineScripts,
+  DEFAULT_THEME,
+  buildThemeCss,
+  mergeThemes,
+  buildFontPreconnect,
+  buildFontStylesheets,
+  buildCdnScripts
+} from "@frontmcp/uipack/theme";
+import { escapeHtml } from "@frontmcp/uipack/utils";
+import { escapeHtml as escapeHtml2 } from "@frontmcp/uipack/utils";
 
 // libs/ui/src/components/button.ts
+import { validateOptions } from "@frontmcp/uipack/validation";
 function getVariantClasses(variant) {
   const variants = {
     primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
@@ -843,7 +783,7 @@ function button(text, options = {}) {
   }
   const variantClasses = getVariantClasses(variant);
   const sizeClasses = getSizeClasses(size, iconOnly);
-  const safeClassName = className ? escapeHtml(className) : "";
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "inline-flex items-center justify-center",
     "font-medium",
@@ -858,24 +798,24 @@ function button(text, options = {}) {
   ].filter(Boolean).join(" ");
   const dataAttrs = data ? Object.entries(data).map(([key, val]) => {
     const safeKey = sanitizeDataKey(key);
-    return safeKey ? `data-${safeKey}="${escapeHtml(val)}"` : "";
+    return safeKey ? `data-${safeKey}="${escapeHtml2(val)}"` : "";
   }).filter(Boolean).join(" ") : "";
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
-  const nameAttr = name ? `name="${escapeHtml(name)}"` : "";
-  const valueAttr = value ? `value="${escapeHtml(value)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
+  const nameAttr = name ? `name="${escapeHtml2(name)}"` : "";
+  const valueAttr = value ? `value="${escapeHtml2(value)}"` : "";
   const disabledAttr = disabled || loading ? "disabled" : "";
-  const targetAttr = target ? `target="${escapeHtml(target)}"` : "";
+  const targetAttr = target ? `target="${escapeHtml2(target)}"` : "";
   const relAttr = target === "_blank" ? 'rel="noopener noreferrer"' : "";
   const trimmedText = text.trim();
   const effectiveAriaLabel = ariaLabel ?? (iconOnly && trimmedText ? trimmedText : void 0);
-  const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${escapeHtml(effectiveAriaLabel)}"` : "";
+  const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${escapeHtml2(effectiveAriaLabel)}"` : "";
   const iconBeforeHtml = iconBefore && !loading ? `<span class="${iconOnly ? "" : "mr-2"}">${iconBefore}</span>` : "";
   const iconAfterHtml = iconAfter && !loading ? `<span class="${iconOnly ? "" : "ml-2"}">${iconAfter}</span>` : "";
   const loadingHtml = loading ? loadingSpinner : "";
-  const textHtml = iconOnly ? "" : escapeHtml(text);
+  const textHtml = iconOnly ? "" : escapeHtml2(text);
   const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
   if (href && !disabled && !loading && isValidHrefProtocol(href)) {
-    return `<a href="${escapeHtml(
+    return `<a href="${escapeHtml2(
       href
     )}" class="${baseClasses}" ${idAttr} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
       ${contentHtml}
@@ -899,7 +839,7 @@ function buttonGroup(buttons, options = {}) {
   }
   const validatedOptions = validation.data;
   const { attached = false, direction = "horizontal", gap = "md", className = "" } = validatedOptions;
-  const safeClassName = className ? escapeHtml(className) : "";
+  const safeClassName = className ? escapeHtml2(className) : "";
   if (attached) {
     const classes = direction === "horizontal" ? "inline-flex rounded-lg shadow-sm [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px" : "inline-flex flex-col rounded-lg shadow-sm [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px";
     return `<div class="${classes} ${safeClassName}">${buttons.join("")}</div>`;
@@ -936,7 +876,7 @@ function getSizeClasses2(size) {
 }
 function buildDataAttrs(data) {
   if (!data) return "";
-  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml(value)}"`).join(" ");
+  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml2(value)}"`).join(" ");
 }
 function card(content, options = {}) {
   const {
@@ -957,18 +897,18 @@ function card(content, options = {}) {
   const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
   const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs(data);
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
   const hasHeader = title || subtitle || headerActions;
   const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
         <div>
-          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>` : ""}
-          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml(subtitle)}</p>` : ""}
+          ${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>` : ""}
       </div>` : "";
   const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : "";
   if (href) {
-    return `<a href="${escapeHtml(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
+    return `<a href="${escapeHtml2(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
       ${content}
       ${footerHtml}
@@ -1009,7 +949,7 @@ function getInputStateClasses(state) {
 }
 function buildDataAttrs2(data) {
   if (!data) return "";
-  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml(value)}"`).join(" ");
+  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml2(value)}"`).join(" ");
 }
 function input(options) {
   const {
@@ -1052,26 +992,26 @@ function input(options) {
   const dataAttrs = buildDataAttrs2(data);
   const inputAttrs = [
     `type="${type}"`,
-    `name="${escapeHtml(name)}"`,
-    `id="${escapeHtml(id)}"`,
-    value ? `value="${escapeHtml(value)}"` : "",
-    placeholder ? `placeholder="${escapeHtml(placeholder)}"` : "",
+    `name="${escapeHtml2(name)}"`,
+    `id="${escapeHtml2(id)}"`,
+    value ? `value="${escapeHtml2(value)}"` : "",
+    placeholder ? `placeholder="${escapeHtml2(placeholder)}"` : "",
     required ? "required" : "",
     disabled ? "disabled" : "",
     readonly ? "readonly" : "",
-    autocomplete ? `autocomplete="${escapeHtml(autocomplete)}"` : "",
-    pattern ? `pattern="${escapeHtml(pattern)}"` : "",
-    min !== void 0 ? `min="${escapeHtml(String(min))}"` : "",
-    max !== void 0 ? `max="${escapeHtml(String(max))}"` : "",
-    step !== void 0 ? `step="${escapeHtml(String(step))}"` : "",
+    autocomplete ? `autocomplete="${escapeHtml2(autocomplete)}"` : "",
+    pattern ? `pattern="${escapeHtml2(pattern)}"` : "",
+    min !== void 0 ? `min="${escapeHtml2(String(min))}"` : "",
+    max !== void 0 ? `max="${escapeHtml2(String(max))}"` : "",
+    step !== void 0 ? `step="${escapeHtml2(String(step))}"` : "",
     `class="${baseClasses}"`,
     dataAttrs
   ].filter(Boolean).join(" ");
-  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
-        ${escapeHtml(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
+  const labelHtml = label ? `<label for="${escapeHtml2(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${escapeHtml2(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
       </label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  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 inputHtml = hasIcon ? `<div class="relative">
@@ -1118,18 +1058,18 @@ function select(options) {
   const optionsHtml = selectOptions.map((opt) => {
     const selected = opt.selected || opt.value === value ? "selected" : "";
     const optDisabled = opt.disabled ? "disabled" : "";
-    return `<option value="${escapeHtml(opt.value)}" ${selected} ${optDisabled}>${escapeHtml(opt.label)}</option>`;
+    return `<option value="${escapeHtml2(opt.value)}" ${selected} ${optDisabled}>${escapeHtml2(opt.label)}</option>`;
   }).join("\n");
-  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
-        ${escapeHtml(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
+  const labelHtml = label ? `<label for="${escapeHtml2(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${escapeHtml2(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
       </label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  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">
     ${labelHtml}
     <select
-      name="${escapeHtml(name)}"
-      id="${escapeHtml(id)}"
+      name="${escapeHtml2(name)}"
+      id="${escapeHtml2(id)}"
       class="${baseClasses}"
       ${required ? "required" : ""}
       ${disabled ? "disabled" : ""}
@@ -1180,24 +1120,24 @@ function textarea(options) {
     className
   ].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs2(data);
-  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
-        ${escapeHtml(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
+  const labelHtml = label ? `<label for="${escapeHtml2(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${escapeHtml2(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
       </label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  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">
     ${labelHtml}
     <textarea
-      name="${escapeHtml(name)}"
-      id="${escapeHtml(id)}"
+      name="${escapeHtml2(name)}"
+      id="${escapeHtml2(id)}"
       rows="${rows}"
       class="${baseClasses}"
-      ${placeholder ? `placeholder="${escapeHtml(placeholder)}"` : ""}
+      ${placeholder ? `placeholder="${escapeHtml2(placeholder)}"` : ""}
       ${required ? "required" : ""}
       ${disabled ? "disabled" : ""}
       ${readonly ? "readonly" : ""}
       ${dataAttrs}
-    >${escapeHtml(value)}</textarea>
+    >${escapeHtml2(value)}</textarea>
     ${helperHtml}
     ${errorHtml}
   </div>`;
@@ -1219,21 +1159,21 @@ function checkbox(options) {
     "focus:ring-2 focus:ring-primary/20 focus:ring-offset-0",
     disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
   ].join(" ");
-  const helperHtml = helper && !error ? `<p class="text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  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}">
     <label class="flex items-start gap-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}">
       <input
         type="checkbox"
-        name="${escapeHtml(name)}"
-        id="${escapeHtml(id)}"
-        value="${escapeHtml(value)}"
+        name="${escapeHtml2(name)}"
+        id="${escapeHtml2(id)}"
+        value="${escapeHtml2(value)}"
         class="${checkboxClasses}"
         ${checked ? "checked" : ""}
         ${disabled ? "disabled" : ""}
       >
       <div>
-        <span class="text-sm font-medium text-text-primary">${escapeHtml(label)}</span>
+        <span class="text-sm font-medium text-text-primary">${escapeHtml2(label)}</span>
         ${helperHtml}
         ${errorHtml}
       </div>
@@ -1252,19 +1192,19 @@ function radioGroup(options) {
     return `<label class="flex items-center gap-2 ${cursorClass}">
         <input
           type="radio"
-          name="${escapeHtml(name)}"
-          id="${escapeHtml(radioId)}"
-          value="${escapeHtml(opt.value)}"
+          name="${escapeHtml2(name)}"
+          id="${escapeHtml2(radioId)}"
+          value="${escapeHtml2(opt.value)}"
           class="${radioClasses}"
           ${checked}
           ${disabled}
         >
-        <span class="text-sm text-text-primary">${escapeHtml(opt.label)}</span>
+        <span class="text-sm text-text-primary">${escapeHtml2(opt.label)}</span>
       </label>`;
   }).join("\n");
-  const labelHtml = label ? `<label class="block text-sm font-medium text-text-primary mb-2">${escapeHtml(label)}</label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  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">
     ${labelHtml}
     <div class="${directionClasses}">
@@ -1277,10 +1217,10 @@ function radioGroup(options) {
 function form(content, options = {}) {
   const { action, method = "post", id, className = "", preventDefault = false, autocomplete, enctype } = options;
   const attrs = [
-    action ? `action="${escapeHtml(action)}"` : "",
+    action ? `action="${escapeHtml2(action)}"` : "",
     `method="${method}"`,
-    id ? `id="${escapeHtml(id)}"` : "",
-    className ? `class="${escapeHtml(className)}"` : "",
+    id ? `id="${escapeHtml2(id)}"` : "",
+    className ? `class="${escapeHtml2(className)}"` : "",
     autocomplete ? `autocomplete="${autocomplete}"` : "",
     enctype ? `enctype="${enctype}"` : "",
     preventDefault ? 'onsubmit="return false;"' : ""
@@ -1297,8 +1237,8 @@ function formRow(fields, options = {}) {
 function formSection(content, options = {}) {
   const { title, description, className = "" } = options;
   const headerHtml = title ? `<div class="mb-4">
-        <h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>
-        ${description ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml(description)}</p>` : ""}
+        <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}">
     ${headerHtml}
@@ -1320,7 +1260,7 @@ function formActions(buttons, options = {}) {
   </div>`;
 }
 function hiddenInput(name, value) {
-  return `<input type="hidden" name="${escapeHtml(name)}" value="${escapeHtml(value)}">`;
+  return `<input type="hidden" name="${escapeHtml2(name)}" value="${escapeHtml2(value)}">`;
 }
 function csrfInput(token) {
   return hiddenInput("_csrf", token);
@@ -1378,7 +1318,7 @@ function badge(text, options = {}) {
       outline: "border border-current"
     };
     const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], className].filter(Boolean).join(" ");
-    return `<span class="${dotClasses}" aria-label="${escapeHtml(text)}" title="${escapeHtml(text)}"></span>`;
+    return `<span class="${dotClasses}" aria-label="${escapeHtml2(text)}" title="${escapeHtml2(text)}"></span>`;
   }
   const variantClasses = getVariantClasses3(variant);
   const sizeClasses = getSizeClasses3(size, false);
@@ -1401,7 +1341,7 @@ function badge(text, options = {}) {
         </svg>
       </button>` : "";
   return `<span class="${baseClasses}">
-    ${iconHtml}${escapeHtml(text)}${removeHtml}
+    ${iconHtml}${escapeHtml2(text)}${removeHtml}
   </span>`;
 }
 function badgeGroup(badges, options = {}) {
@@ -1472,7 +1412,7 @@ function alert(message, options = {}) {
   const iconHtml = showIcon ? `<div class="flex-shrink-0 ${variantClasses.icon}">
         ${icon || alertIcons[variant]}
       </div>` : "";
-  const titleHtml = title ? `<h3 class="font-semibold">${escapeHtml(title)}</h3>` : "";
+  const titleHtml = title ? `<h3 class="font-semibold">${escapeHtml2(title)}</h3>` : "";
   const dismissHtml = dismissible ? `<button
         type="button"
         class="flex-shrink-0 ml-auto -mr-1 -mt-1 p-1 rounded hover:bg-black/5 transition-colors"
@@ -1484,13 +1424,13 @@ function alert(message, options = {}) {
         </svg>
       </button>` : "";
   const actionsHtml = actions ? `<div class="mt-3">${actions}</div>` : "";
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
   return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
     <div class="flex gap-3">
       ${iconHtml}
       <div class="flex-1">
         ${titleHtml}
-        <div class="${title ? "mt-1" : ""}">${escapeHtml(message)}</div>
+        <div class="${title ? "mt-1" : ""}">${escapeHtml2(message)}</div>
         ${actionsHtml}
       </div>
       ${dismissHtml}
@@ -1512,7 +1452,7 @@ function toast(message, options = {}) {
     "top-center": "top-4 left-1/2 -translate-x-1/2",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
   };
-  const titleHtml = title ? `<h4 class="font-semibold">${escapeHtml(title)}</h4>` : "";
+  const titleHtml = title ? `<h4 class="font-semibold">${escapeHtml2(title)}</h4>` : "";
   const autoDismissScript = duration > 0 ? `<script>
         setTimeout(() => {
           const toast = document.getElementById('${id}');
@@ -1523,7 +1463,7 @@ function toast(message, options = {}) {
         }, ${duration});
       </script>` : "";
   return `<div
-    id="${escapeHtml(id)}"
+    id="${escapeHtml2(id)}"
     class="fixed ${positionClasses[position]} z-50 min-w-[300px] max-w-md rounded-lg border shadow-lg ${variantClasses.container} transition-all duration-300 transform"
     role="alert"
   >
@@ -1533,7 +1473,7 @@ function toast(message, options = {}) {
       </div>
       <div class="flex-1">
         ${titleHtml}
-        <p class="${title ? "mt-1 text-sm opacity-90" : ""}">${escapeHtml(message)}</p>
+        <p class="${title ? "mt-1 text-sm opacity-90" : ""}">${escapeHtml2(message)}</p>
       </div>
       <button
         type="button"
@@ -1558,7 +1498,7 @@ function toastContainer(position = "top-right", id = "toast-container") {
     "top-center": "top-4 left-1/2 -translate-x-1/2",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
   };
-  return `<div id="${escapeHtml(id)}" class="fixed ${positionClasses[position]} z-50 flex flex-col gap-2"></div>`;
+  return `<div id="${escapeHtml2(id)}" class="fixed ${positionClasses[position]} z-50 flex flex-col gap-2"></div>`;
 }
 
 // libs/ui/src/components/avatar.ts
@@ -1631,7 +1571,7 @@ function avatar(options) {
     shapeClasses,
     className
   ].filter(Boolean).join(" ");
-  const contentHtml = src ? `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="w-full h-full object-cover">` : `<span class="font-medium text-white ${sizeClasses.text}">${escapeHtml(displayInitials)}</span>`;
+  const contentHtml = src ? `<img src="${escapeHtml2(src)}" alt="${escapeHtml2(alt)}" class="w-full h-full object-cover">` : `<span class="font-medium text-white ${sizeClasses.text}">${escapeHtml2(displayInitials)}</span>`;
   const bgClasses = src ? "bg-gray-200" : displayBgColor;
   const statusHtml = status !== "none" ? `<span class="absolute bottom-0 right-0 block ${sizeClasses.status} ${shapeClasses} ${statusColor} border-white"></span>` : "";
   const innerHtml = `
@@ -1641,7 +1581,7 @@ function avatar(options) {
     </div>
   `;
   if (href) {
-    return `<a href="${escapeHtml(href)}" class="inline-block">${innerHtml}</a>`;
+    return `<a href="${escapeHtml2(href)}" class="inline-block">${innerHtml}</a>`;
   }
   return innerHtml;
 }
@@ -1676,8 +1616,8 @@ function avatarWithText(options) {
   const avatarHtml = avatar({ ...avatarOptions, alt: avatarOptions.alt || name });
   const textHtml = `
     <div class="${align === "right" ? "text-right" : ""}">
-      <div class="font-medium text-text-primary">${escapeHtml(name)}</div>
-      ${subtitle ? `<div class="text-sm text-text-secondary">${escapeHtml(subtitle)}</div>` : ""}
+      <div class="font-medium text-text-primary">${escapeHtml2(name)}</div>
+      ${subtitle ? `<div class="text-sm text-text-secondary">${escapeHtml2(subtitle)}</div>` : ""}
     </div>
   `;
   const flexDirection = align === "right" ? "flex-row-reverse" : "flex-row";
@@ -1722,12 +1662,12 @@ function modal(content, options) {
   const sizeClasses = getSizeClasses5(size);
   const visibilityClasses = open ? "" : "hidden";
   const headerHtml = title || showClose ? `<div class="flex items-center justify-between p-4 border-b border-divider">
-        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>` : "<div></div>"}
+        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml2(title)}</h3>` : "<div></div>"}
         ${showClose ? `
           <button
             type="button"
             class="p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors"
-            onclick="document.getElementById('${escapeHtml(id)}').classList.add('hidden')"
+            onclick="document.getElementById('${escapeHtml2(id)}').classList.add('hidden')"
             aria-label="Close"
           >
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1743,18 +1683,18 @@ function modal(content, options) {
   const escapeHandler = closeOnEscape ? `<script>
         document.addEventListener('keydown', function(e) {
           if (e.key === 'Escape') {
-            document.getElementById('${escapeHtml(id)}')?.classList.add('hidden');
+            document.getElementById('${escapeHtml2(id)}')?.classList.add('hidden');
           }
         });
       </script>` : "";
   return `
     <div
-      id="${escapeHtml(id)}"
+      id="${escapeHtml2(id)}"
       class="fixed inset-0 z-50 overflow-y-auto ${visibilityClasses}"
       ${backdropClickHandler}
       role="dialog"
       aria-modal="true"
-      aria-labelledby="${escapeHtml(id)}-title"
+      aria-labelledby="${escapeHtml2(id)}-title"
     >
       <!-- Backdrop -->
       <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
@@ -1777,7 +1717,7 @@ function modalTrigger(triggerContent, modalId, options = {}) {
   const { className = "", tag = "button" } = options;
   const attrs = `
     class="${className}"
-    onclick="document.getElementById('${escapeHtml(modalId)}').classList.remove('hidden')"
+    onclick="document.getElementById('${escapeHtml2(modalId)}').classList.remove('hidden')"
   `;
   if (tag === "button") {
     return `<button type="button" ${attrs}>${triggerContent}</button>`;
@@ -1822,29 +1762,29 @@ function confirmModal(options) {
       <div class="mx-auto w-12 h-12 rounded-full ${iconColors[variant]} flex items-center justify-center mb-4">
         ${displayIcon}
       </div>
-      <h3 class="text-lg font-semibold text-text-primary mb-2">${escapeHtml(title)}</h3>
-      <p class="text-text-secondary">${escapeHtml(message)}</p>
+      <h3 class="text-lg font-semibold text-text-primary mb-2">${escapeHtml2(title)}</h3>
+      <p class="text-text-secondary">${escapeHtml2(message)}</p>
     </div>
   `;
   const confirmButton = confirmHref && isSafeUrl(confirmHref) ? `<a
-        href="${escapeHtml(confirmHref)}"
+        href="${escapeHtml2(confirmHref)}"
         class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
       >
-        ${escapeHtml(confirmText)}
+        ${escapeHtml2(confirmText)}
       </a>` : `<button
         type="button"
         class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
-        onclick="document.getElementById('${escapeHtml(id)}').classList.add('hidden')"
+        onclick="document.getElementById('${escapeHtml2(id)}').classList.add('hidden')"
       >
-        ${escapeHtml(confirmText)}
+        ${escapeHtml2(confirmText)}
       </button>`;
   const footer = `
     <button
       type="button"
       class="px-4 py-2 rounded-lg border border-border text-text-primary hover:bg-gray-50 transition-colors"
-      onclick="document.getElementById('${escapeHtml(id)}').classList.add('hidden')"
+      onclick="document.getElementById('${escapeHtml2(id)}').classList.add('hidden')"
     >
-      ${escapeHtml(cancelText)}
+      ${escapeHtml2(cancelText)}
     </button>
     ${confirmButton}
   `;
@@ -1887,12 +1827,12 @@ function drawer(content, options) {
   };
   const visibilityClasses = open ? "" : "hidden";
   const headerHtml = title || showClose ? `<div class="flex items-center justify-between p-4 border-b border-divider">
-        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>` : "<div></div>"}
+        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml2(title)}</h3>` : "<div></div>"}
         ${showClose ? `
           <button
             type="button"
             class="p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors"
-            onclick="document.getElementById('${escapeHtml(id)}').classList.add('hidden')"
+            onclick="document.getElementById('${escapeHtml2(id)}').classList.add('hidden')"
             aria-label="Close"
           >
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1905,7 +1845,7 @@ function drawer(content, options) {
   const backdropClickHandler = closeOnBackdrop ? `onclick="if (event.target === this) this.classList.add('hidden')"` : "";
   return `
     <div
-      id="${escapeHtml(id)}"
+      id="${escapeHtml2(id)}"
       class="fixed inset-0 z-50 ${visibilityClasses}"
       ${backdropClickHandler}
       role="dialog"
@@ -1968,9 +1908,9 @@ function buildTableHeader(columns, options) {
       class="${paddingClass} ${alignClass} font-semibold text-text-primary ${sortableClasses} ${col.headerClass || ""}"
       ${widthStyle}
     >
-      ${col.sortable ? `<span class="inline-flex items-center">${escapeHtml(col.header)}${buildSortIndicator(
+      ${col.sortable ? `<span class="inline-flex items-center">${escapeHtml2(col.header)}${buildSortIndicator(
       col.sortDirection || null
-    )}</span>` : escapeHtml(col.header)}
+    )}</span>` : escapeHtml2(col.header)}
     </th>`;
   }).join("\n");
   return `<thead class="bg-gray-50 border-b border-border">
@@ -2007,20 +1947,20 @@ function buildTableBody(data, columns, options) {
       bordered ? "border-b border-border" : "",
       onRowClick ? "cursor-pointer" : ""
     ].filter(Boolean).join(" ");
-    const clickHandler = onRowClick ? `onclick="window.location.href='${escapeHtml(onRowClick.replace("{key}", rowId))}'"` : "";
+    const clickHandler = onRowClick ? `onclick="window.location.href='${escapeHtml2(onRowClick.replace("{key}", rowId))}'"` : "";
     const selectCell = selectable ? `<td class="${paddingClass}" onclick="event.stopPropagation()">
           <input
             type="checkbox"
             class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
             name="selected[]"
-            value="${escapeHtml(rowId)}"
+            value="${escapeHtml2(rowId)}"
             aria-label="Select row"
           >
         </td>` : "";
     const cells = columns.map((col) => {
       const value = row[col.key];
       const alignClass = getAlignClasses(col.align);
-      const cellContent = col.render ? col.render(value, row, rowIndex) : escapeHtml(String(value ?? ""));
+      const cellContent = col.render ? col.render(value, row, rowIndex) : escapeHtml2(String(value ?? ""));
       return `<td class="${paddingClass} ${alignClass} ${col.cellClass || ""}">${cellContent}</td>`;
     }).join("\n");
     return `<tr class="${rowClasses}" ${clickHandler}>
@@ -2042,7 +1982,7 @@ function table(data, options) {
   const { id, bordered, stickyHeader, className = "", loading = false } = options;
   const tableClasses = ["w-full", bordered ? "border border-border" : "", "text-sm"].filter(Boolean).join(" ");
   const wrapperClasses = ["relative overflow-x-auto", stickyHeader ? "max-h-96 overflow-y-auto" : "", className].filter(Boolean).join(" ");
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
   const header = buildTableHeader(options.columns, options);
   const body = buildTableBody(data, options.columns, options);
   const loadingOverlay = loading ? buildLoadingOverlay() : "";
@@ -2072,7 +2012,7 @@ function pagination(options) {
       return `<span class="${baseClasses} ${stateClasses}">${label}</span>`;
     }
     const pageUrl = baseUrl ? `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}page=${pageNum}` : `?page=${pageNum}`;
-    return `<a href="${escapeHtml(pageUrl)}" class="${baseClasses} ${stateClasses}">${label}</a>`;
+    return `<a href="${escapeHtml2(pageUrl)}" class="${baseClasses} ${stateClasses}">${label}</a>`;
   };
   const pageNumbers = [];
   const maxVisible = 5;
@@ -2170,19 +2110,19 @@ function getPermissionIcon(scope, customIcon) {
 }
 function permissionList(permissions, options = {}) {
   const { id, checkable = false, inputName = "scopes", title, className = "" } = options;
-  const titleHtml = title ? `<h4 class="font-medium text-text-primary mb-3">${escapeHtml(title)}</h4>` : "";
+  const titleHtml = title ? `<h4 class="font-medium text-text-primary mb-3">${escapeHtml2(title)}</h4>` : "";
   const itemsHtml = permissions.map((perm, index) => {
     const icon = getPermissionIcon(perm.scope, perm.icon);
     const sensitiveClasses = perm.sensitive ? "border-warning/30 bg-warning/5" : "border-border";
     const sensitiveLabel = perm.sensitive ? '<span class="text-xs text-warning font-medium ml-2">Sensitive</span>' : "";
     const checkboxHtml = checkable ? `<input
           type="checkbox"
-          name="${escapeHtml(inputName)}[]"
-          value="${escapeHtml(perm.scope)}"
+          name="${escapeHtml2(inputName)}[]"
+          value="${escapeHtml2(perm.scope)}"
           class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
           ${perm.checked || perm.required ? "checked" : ""}
           ${perm.required ? "disabled" : ""}
-          id="${id ? escapeHtml(id) : "perm"}-${index}"
+          id="${id ? escapeHtml2(id) : "perm"}-${index}"
         >` : `<div class="w-5 h-5 rounded-full bg-success/10 text-success flex items-center justify-center">
           <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
@@ -2194,18 +2134,18 @@ function permissionList(permissions, options = {}) {
       </div>
       <div class="flex-1 min-w-0">
         <div class="flex items-center">
-          <span class="font-medium text-text-primary">${escapeHtml(perm.name)}</span>
+          <span class="font-medium text-text-primary">${escapeHtml2(perm.name)}</span>
           ${perm.required ? '<span class="text-xs text-text-secondary ml-2">(Required)</span>' : ""}
           ${sensitiveLabel}
         </div>
-        ${perm.description ? `<p class="text-sm text-text-secondary mt-0.5">${escapeHtml(perm.description)}</p>` : ""}
+        ${perm.description ? `<p class="text-sm text-text-secondary mt-0.5">${escapeHtml2(perm.description)}</p>` : ""}
       </div>
       <div class="flex-shrink-0">
         ${checkboxHtml}
       </div>
     </div>`;
   }).join("\n");
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
   return `<div class="permission-list ${className}" ${idAttr}>
     ${titleHtml}
     <div class="space-y-2">
@@ -2235,8 +2175,8 @@ function featureList(features, options = {}) {
     return `<li class="flex items-start gap-3">
       <div class="flex-shrink-0 mt-0.5">${iconHtml}</div>
       <div class="flex-1">
-        <span class="${textClasses}">${escapeHtml(feature.name)}</span>
-        ${feature.description ? `<p class="text-sm text-text-secondary">${escapeHtml(feature.description)}</p>` : ""}
+        <span class="${textClasses}">${escapeHtml2(feature.name)}</span>
+        ${feature.description ? `<p class="text-sm text-text-secondary">${escapeHtml2(feature.description)}</p>` : ""}
       </div>
     </li>`;
   }).join("\n");
@@ -2258,7 +2198,7 @@ function descriptionList(items, options = {}) {
   const hasCopyable = items.some((item) => item.copyable);
   if (layout === "horizontal") {
     const itemsHtml2 = items.map((item) => {
-      const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${escapeHtml(
+      const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${escapeHtml2(
         item.description
       )}', this)" class="ml-2 p-1 rounded hover:bg-gray-100 transition-colors">
             <svg class="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -2266,9 +2206,9 @@ function descriptionList(items, options = {}) {
             </svg>
           </button>` : "";
       return `<div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4 ${dividers ? "border-b border-divider" : ""}">
-        <dt class="text-sm font-medium text-text-secondary">${escapeHtml(item.term)}</dt>
+        <dt class="text-sm font-medium text-text-secondary">${escapeHtml2(item.term)}</dt>
         <dd class="mt-1 sm:mt-0 sm:col-span-2 text-sm text-text-primary flex items-center">
-          ${escapeHtml(item.description)}
+          ${escapeHtml2(item.description)}
           ${copyBtn}
         </dd>
       </div>`;
@@ -2277,7 +2217,7 @@ function descriptionList(items, options = {}) {
   }
   if (layout === "grid") {
     const itemsHtml2 = items.map((item) => {
-      const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${escapeHtml(
+      const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${escapeHtml2(
         item.description
       )}', this)" class="absolute top-2 right-2 p-1 rounded hover:bg-gray-100 transition-colors">
             <svg class="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -2285,15 +2225,15 @@ function descriptionList(items, options = {}) {
             </svg>
           </button>` : "";
       return `<div class="relative p-4 bg-gray-50 rounded-lg">
-        <dt class="text-sm font-medium text-text-secondary">${escapeHtml(item.term)}</dt>
-        <dd class="mt-1 text-sm text-text-primary font-medium">${escapeHtml(item.description)}</dd>
+        <dt class="text-sm font-medium text-text-secondary">${escapeHtml2(item.term)}</dt>
+        <dd class="mt-1 text-sm text-text-primary font-medium">${escapeHtml2(item.description)}</dd>
         ${copyBtn}
       </div>`;
     }).join("\n");
     return `<dl class="grid grid-cols-2 gap-4 ${className}">${itemsHtml2}</dl>${hasCopyable ? copyScript : ""}`;
   }
   const itemsHtml = items.map((item) => {
-    const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${escapeHtml(
+    const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${escapeHtml2(
       item.description
     )}', this)" class="ml-2 p-1 rounded hover:bg-gray-100 transition-colors">
           <svg class="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -2301,9 +2241,9 @@ function descriptionList(items, options = {}) {
           </svg>
         </button>` : "";
     return `<div class="${dividers ? "py-3 border-b border-divider last:border-0" : "py-2"}">
-      <dt class="text-sm text-text-secondary">${escapeHtml(item.term)}</dt>
+      <dt class="text-sm text-text-secondary">${escapeHtml2(item.term)}</dt>
       <dd class="mt-1 text-sm text-text-primary font-medium flex items-center">
-        ${escapeHtml(item.description)}
+        ${escapeHtml2(item.description)}
         ${copyBtn}
       </dd>
     </div>`;
@@ -2320,10 +2260,10 @@ function actionList(items, className = "") {
     const contentHtml = `
       ${iconHtml}
       <div class="flex-1 min-w-0">
-        <div class="font-medium ${item.destructive ? "text-danger" : "text-text-primary"}">${escapeHtml(
+        <div class="font-medium ${item.destructive ? "text-danger" : "text-text-primary"}">${escapeHtml2(
       item.label
     )}</div>
-        ${item.description ? `<p class="text-sm text-text-secondary">${escapeHtml(item.description)}</p>` : ""}
+        ${item.description ? `<p class="text-sm text-text-secondary">${escapeHtml2(item.description)}</p>` : ""}
       </div>
       <svg class="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
@@ -2333,7 +2273,7 @@ function actionList(items, className = "") {
       return `<div class="${baseClasses}">${contentHtml}</div>`;
     }
     if (item.href) {
-      return `<a href="${escapeHtml(item.href)}" class="${baseClasses}">${contentHtml}</a>`;
+      return `<a href="${escapeHtml2(item.href)}" class="${baseClasses}">${contentHtml}</a>`;
     }
     return `<div class="${baseClasses}">${contentHtml}</div>`;
   }).join("\n");