@frontmcp/ui 0.6.0 → 0.6.2

package/esm/web-components/{index.js → index.mjs}

@@ -1,52 +1,5 @@
-// 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/web-components/core/base-element.ts
+import { validationErrorBox } from "@frontmcp/uipack/validation";
 
 // libs/ui/src/web-components/core/attribute-parser.ts
 function parseAttributeValue(attrName, value) {
@@ -310,81 +263,73 @@ var FmcpElement = class extends HTMLElementBase {
   }
 };
 
-// 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/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/validation/schema-paths.ts
-import { z } from "zod";
+// libs/ui/src/components/button.ts
+import { validateOptions } from "@frontmcp/uipack/validation";
 
 // libs/ui/src/components/button.schema.ts
-import { z as z2 } from "zod";
-var ButtonVariantSchema = z2.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
-var ButtonSizeSchema = z2.enum(["xs", "sm", "md", "lg", "xl"]);
-var ButtonOptionsSchema = z2.object({
+import { z } from "zod";
+var ButtonVariantSchema = z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
+var ButtonSizeSchema = z.enum(["xs", "sm", "md", "lg", "xl"]);
+var ButtonOptionsSchema = z.object({
   /** Button variant */
   variant: ButtonVariantSchema.optional(),
   /** Button size */
   size: ButtonSizeSchema.optional(),
   /** Button type attribute */
-  type: z2.enum(["button", "submit", "reset"]).optional(),
+  type: z.enum(["button", "submit", "reset"]).optional(),
   /** Disabled state */
-  disabled: z2.boolean().optional(),
+  disabled: z.boolean().optional(),
   /** Loading state */
-  loading: z2.boolean().optional(),
+  loading: z.boolean().optional(),
   /** Full width */
-  fullWidth: z2.boolean().optional(),
+  fullWidth: z.boolean().optional(),
   /** Icon before text (HTML string) */
-  iconBefore: z2.string().optional(),
+  iconBefore: z.string().optional(),
   /** Icon after text (HTML string) */
-  iconAfter: z2.string().optional(),
+  iconAfter: z.string().optional(),
   /** Icon only (no text) */
-  iconOnly: z2.boolean().optional(),
+  iconOnly: z.boolean().optional(),
   /** Additional CSS classes */
-  className: z2.string().optional(),
+  className: z.string().optional(),
   /** Button ID */
-  id: z2.string().optional(),
+  id: z.string().optional(),
   /** Name attribute */
-  name: z2.string().optional(),
+  name: z.string().optional(),
   /** Value attribute */
-  value: z2.string().optional(),
+  value: z.string().optional(),
   /** Click handler (URL for links) */
-  href: z2.string().optional(),
+  href: z.string().optional(),
   /** Open in new tab */
-  target: z2.enum(["_blank", "_self"]).optional(),
+  target: z.enum(["_blank", "_self"]).optional(),
   /** Data attributes */
-  data: z2.record(z2.string(), z2.string()).optional(),
+  data: z.record(z.string(), z.string()).optional(),
   /** ARIA label */
-  ariaLabel: z2.string().optional()
+  ariaLabel: z.string().optional()
 }).strict();
-var ButtonGroupOptionsSchema = z2.object({
+var ButtonGroupOptionsSchema = z.object({
   /** Attach buttons visually */
-  attached: z2.boolean().optional(),
+  attached: z.boolean().optional(),
   /** Direction */
-  direction: z2.enum(["horizontal", "vertical"]).optional(),
+  direction: z.enum(["horizontal", "vertical"]).optional(),
   /** Gap between buttons */
-  gap: z2.enum(["sm", "md", "lg"]).optional(),
+  gap: z.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: z2.string().optional()
+  className: z.string().optional()
 }).strict();
 
 // libs/ui/src/components/button.ts
@@ -477,7 +422,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",
@@ -492,24 +437,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}
@@ -693,7 +638,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 {
@@ -714,18 +659,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}
@@ -739,40 +684,40 @@ function card(content, options = {}) {
 }
 
 // libs/ui/src/components/card.schema.ts
-import { z as z3 } from "zod";
-var CardVariantSchema = z3.enum(["default", "outlined", "elevated", "filled", "ghost"]);
-var CardSizeSchema = z3.enum(["sm", "md", "lg"]);
-var CardOptionsSchema = z3.object({
+import { z as z2 } from "zod";
+var CardVariantSchema = z2.enum(["default", "outlined", "elevated", "filled", "ghost"]);
+var CardSizeSchema = z2.enum(["sm", "md", "lg"]);
+var CardOptionsSchema = z2.object({
   /** Card variant */
   variant: CardVariantSchema.optional(),
   /** Card size (padding) */
   size: CardSizeSchema.optional(),
   /** Card title */
-  title: z3.string().optional(),
+  title: z2.string().optional(),
   /** Card subtitle/description */
-  subtitle: z3.string().optional(),
+  subtitle: z2.string().optional(),
   /** Header actions (HTML string) */
-  headerActions: z3.string().optional(),
+  headerActions: z2.string().optional(),
   /** Footer content (HTML string) */
-  footer: z3.string().optional(),
+  footer: z2.string().optional(),
   /** Additional CSS classes */
-  className: z3.string().optional(),
+  className: z2.string().optional(),
   /** Card ID */
-  id: z3.string().optional(),
+  id: z2.string().optional(),
   /** Data attributes */
-  data: z3.record(z3.string(), z3.string()).optional(),
+  data: z2.record(z2.string(), z2.string()).optional(),
   /** Clickable card (adds hover effects) */
-  clickable: z3.boolean().optional(),
+  clickable: z2.boolean().optional(),
   /** Click handler URL */
-  href: z3.string().optional()
+  href: z2.string().optional()
 }).strict();
-var CardGroupOptionsSchema = z3.object({
+var CardGroupOptionsSchema = z2.object({
   /** Direction */
-  direction: z3.enum(["horizontal", "vertical"]).optional(),
+  direction: z2.enum(["horizontal", "vertical"]).optional(),
   /** Gap between cards */
-  gap: z3.enum(["sm", "md", "lg"]).optional(),
+  gap: z2.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: z3.string().optional()
+  className: z2.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-card.ts
@@ -905,7 +850,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"
@@ -917,13 +862,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}
@@ -932,27 +877,27 @@ function alert(message, options = {}) {
 }
 
 // libs/ui/src/components/alert.schema.ts
-import { z as z4 } from "zod";
-var AlertVariantSchema = z4.enum(["info", "success", "warning", "danger", "neutral"]);
-var AlertOptionsSchema = z4.object({
+import { z as z3 } from "zod";
+var AlertVariantSchema = z3.enum(["info", "success", "warning", "danger", "neutral"]);
+var AlertOptionsSchema = z3.object({
   /** Alert variant */
   variant: AlertVariantSchema.optional(),
   /** Alert title */
-  title: z4.string().optional(),
+  title: z3.string().optional(),
   /** Show icon */
-  showIcon: z4.boolean().optional(),
+  showIcon: z3.boolean().optional(),
   /** Custom icon (HTML string, overrides default) */
-  icon: z4.string().optional(),
+  icon: z3.string().optional(),
   /** Dismissible alert */
-  dismissible: z4.boolean().optional(),
+  dismissible: z3.boolean().optional(),
   /** Additional CSS classes */
-  className: z4.string().optional(),
+  className: z3.string().optional(),
   /** Alert ID */
-  id: z4.string().optional(),
+  id: z3.string().optional(),
   /** Actions (HTML string for buttons) */
-  actions: z4.string().optional()
+  actions: z3.string().optional()
 }).strict();
-var ToastPositionSchema = z4.enum([
+var ToastPositionSchema = z3.enum([
   "top-right",
   "top-left",
   "bottom-right",
@@ -960,17 +905,17 @@ var ToastPositionSchema = z4.enum([
   "top-center",
   "bottom-center"
 ]);
-var ToastOptionsSchema = z4.object({
+var ToastOptionsSchema = z3.object({
   /** Toast variant */
   variant: AlertVariantSchema.optional(),
   /** Toast title */
-  title: z4.string().optional(),
+  title: z3.string().optional(),
   /** Duration in ms (0 = no auto-dismiss) */
-  duration: z4.number().min(0).optional(),
+  duration: z3.number().min(0).optional(),
   /** Position */
   position: ToastPositionSchema.optional(),
   /** Toast ID */
-  id: z4.string().optional()
+  id: z3.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-alert.ts
@@ -1084,7 +1029,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 = getVariantClasses4(variant);
   const sizeClasses = getSizeClasses3(size, false);
@@ -1107,13 +1052,13 @@ function badge(text, options = {}) {
         </svg>
       </button>` : "";
   return `<span class="${baseClasses}">
-    ${iconHtml}${escapeHtml(text)}${removeHtml}
+    ${iconHtml}${escapeHtml2(text)}${removeHtml}
   </span>`;
 }
 
 // libs/ui/src/components/badge.schema.ts
-import { z as z5 } from "zod";
-var BadgeVariantSchema = z5.enum([
+import { z as z4 } from "zod";
+var BadgeVariantSchema = z4.enum([
   "default",
   "primary",
   "secondary",
@@ -1123,28 +1068,28 @@ var BadgeVariantSchema = z5.enum([
   "info",
   "outline"
 ]);
-var BadgeSizeSchema = z5.enum(["sm", "md", "lg"]);
-var BadgeOptionsSchema = z5.object({
+var BadgeSizeSchema = z4.enum(["sm", "md", "lg"]);
+var BadgeOptionsSchema = z4.object({
   /** Badge variant */
   variant: BadgeVariantSchema.optional(),
   /** Badge size */
   size: BadgeSizeSchema.optional(),
   /** Rounded pill style */
-  pill: z5.boolean().optional(),
+  pill: z4.boolean().optional(),
   /** Icon before text (HTML string) */
-  icon: z5.string().optional(),
+  icon: z4.string().optional(),
   /** Dot indicator (no text) */
-  dot: z5.boolean().optional(),
+  dot: z4.boolean().optional(),
   /** Additional CSS classes */
-  className: z5.string().optional(),
+  className: z4.string().optional(),
   /** Removable badge */
-  removable: z5.boolean().optional()
+  removable: z4.boolean().optional()
 }).strict();
-var BadgeGroupOptionsSchema = z5.object({
+var BadgeGroupOptionsSchema = z4.object({
   /** Gap between badges */
-  gap: z5.enum(["sm", "md", "lg"]).optional(),
+  gap: z4.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: z5.string().optional()
+  className: z4.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-badge.ts
@@ -1233,7 +1178,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 {
@@ -1276,26 +1221,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">
@@ -1342,18 +1287,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" : ""}
@@ -1368,8 +1313,8 @@ function select(options) {
 }
 
 // libs/ui/src/components/form.schema.ts
-import { z as z6 } from "zod";
-var InputTypeSchema = z6.enum([
+import { z as z5 } from "zod";
+var InputTypeSchema = z5.enum([
   "text",
   "email",
   "password",
@@ -1382,221 +1327,221 @@ var InputTypeSchema = z6.enum([
   "datetime-local",
   "hidden"
 ]);
-var InputSizeSchema = z6.enum(["sm", "md", "lg"]);
-var InputStateSchema = z6.enum(["default", "error", "success", "warning"]);
-var InputOptionsSchema = z6.object({
+var InputSizeSchema = z5.enum(["sm", "md", "lg"]);
+var InputStateSchema = z5.enum(["default", "error", "success", "warning"]);
+var InputOptionsSchema = z5.object({
   /** Input type */
   type: InputTypeSchema.optional(),
   /** Input name (required) */
-  name: z6.string(),
+  name: z5.string(),
   /** Input ID (defaults to name) */
-  id: z6.string().optional(),
+  id: z5.string().optional(),
   /** Input value */
-  value: z6.string().optional(),
+  value: z5.string().optional(),
   /** Placeholder text */
-  placeholder: z6.string().optional(),
+  placeholder: z5.string().optional(),
   /** Label text */
-  label: z6.string().optional(),
+  label: z5.string().optional(),
   /** Helper text */
-  helper: z6.string().optional(),
+  helper: z5.string().optional(),
   /** Error message */
-  error: z6.string().optional(),
+  error: z5.string().optional(),
   /** Input size */
   size: InputSizeSchema.optional(),
   /** Input state */
   state: InputStateSchema.optional(),
   /** Required field */
-  required: z6.boolean().optional(),
+  required: z5.boolean().optional(),
   /** Disabled state */
-  disabled: z6.boolean().optional(),
+  disabled: z5.boolean().optional(),
   /** Readonly state */
-  readonly: z6.boolean().optional(),
+  readonly: z5.boolean().optional(),
   /** Autocomplete attribute */
-  autocomplete: z6.string().optional(),
+  autocomplete: z5.string().optional(),
   /** Pattern for validation */
-  pattern: z6.string().optional(),
+  pattern: z5.string().optional(),
   /** Min value (for number/date) */
-  min: z6.union([z6.string(), z6.number()]).optional(),
+  min: z5.union([z5.string(), z5.number()]).optional(),
   /** Max value (for number/date) */
-  max: z6.union([z6.string(), z6.number()]).optional(),
+  max: z5.union([z5.string(), z5.number()]).optional(),
   /** Step value (for number) */
-  step: z6.union([z6.string(), z6.number()]).optional(),
+  step: z5.union([z5.string(), z5.number()]).optional(),
   /** Additional CSS classes */
-  className: z6.string().optional(),
+  className: z5.string().optional(),
   /** Data attributes */
-  data: z6.record(z6.string(), z6.string()).optional(),
+  data: z5.record(z5.string(), z5.string()).optional(),
   /** Icon before input (HTML string) */
-  iconBefore: z6.string().optional(),
+  iconBefore: z5.string().optional(),
   /** Icon after input (HTML string) */
-  iconAfter: z6.string().optional()
+  iconAfter: z5.string().optional()
 }).strict();
-var SelectOptionItemSchema = z6.object({
-  value: z6.string(),
-  label: z6.string(),
-  disabled: z6.boolean().optional(),
-  selected: z6.boolean().optional()
+var SelectOptionItemSchema = z5.object({
+  value: z5.string(),
+  label: z5.string(),
+  disabled: z5.boolean().optional(),
+  selected: z5.boolean().optional()
 }).strict();
-var SelectOptionsSchema = z6.object({
+var SelectOptionsSchema = z5.object({
   /** Input name (required) */
-  name: z6.string(),
+  name: z5.string(),
   /** Input ID (defaults to name) */
-  id: z6.string().optional(),
+  id: z5.string().optional(),
   /** Input value */
-  value: z6.string().optional(),
+  value: z5.string().optional(),
   /** Placeholder text */
-  placeholder: z6.string().optional(),
+  placeholder: z5.string().optional(),
   /** Label text */
-  label: z6.string().optional(),
+  label: z5.string().optional(),
   /** Helper text */
-  helper: z6.string().optional(),
+  helper: z5.string().optional(),
   /** Error message */
-  error: z6.string().optional(),
+  error: z5.string().optional(),
   /** Input size */
   size: InputSizeSchema.optional(),
   /** Input state */
   state: InputStateSchema.optional(),
   /** Required field */
-  required: z6.boolean().optional(),
+  required: z5.boolean().optional(),
   /** Disabled state */
-  disabled: z6.boolean().optional(),
+  disabled: z5.boolean().optional(),
   /** Readonly state */
-  readonly: z6.boolean().optional(),
+  readonly: z5.boolean().optional(),
   /** Additional CSS classes */
-  className: z6.string().optional(),
+  className: z5.string().optional(),
   /** Data attributes */
-  data: z6.record(z6.string(), z6.string()).optional(),
+  data: z5.record(z5.string(), z5.string()).optional(),
   /** Icon before input (HTML string) */
-  iconBefore: z6.string().optional(),
+  iconBefore: z5.string().optional(),
   /** Icon after input (HTML string) */
-  iconAfter: z6.string().optional(),
+  iconAfter: z5.string().optional(),
   /** Select options (required) */
-  options: z6.array(SelectOptionItemSchema),
+  options: z5.array(SelectOptionItemSchema),
   /** Multiple selection */
-  multiple: z6.boolean().optional()
+  multiple: z5.boolean().optional()
 }).strict();
-var TextareaResizeSchema = z6.enum(["none", "vertical", "horizontal", "both"]);
-var TextareaOptionsSchema = z6.object({
+var TextareaResizeSchema = z5.enum(["none", "vertical", "horizontal", "both"]);
+var TextareaOptionsSchema = z5.object({
   /** Input name (required) */
-  name: z6.string(),
+  name: z5.string(),
   /** Input ID (defaults to name) */
-  id: z6.string().optional(),
+  id: z5.string().optional(),
   /** Input value */
-  value: z6.string().optional(),
+  value: z5.string().optional(),
   /** Placeholder text */
-  placeholder: z6.string().optional(),
+  placeholder: z5.string().optional(),
   /** Label text */
-  label: z6.string().optional(),
+  label: z5.string().optional(),
   /** Helper text */
-  helper: z6.string().optional(),
+  helper: z5.string().optional(),
   /** Error message */
-  error: z6.string().optional(),
+  error: z5.string().optional(),
   /** Input size */
   size: InputSizeSchema.optional(),
   /** Input state */
   state: InputStateSchema.optional(),
   /** Required field */
-  required: z6.boolean().optional(),
+  required: z5.boolean().optional(),
   /** Disabled state */
-  disabled: z6.boolean().optional(),
+  disabled: z5.boolean().optional(),
   /** Readonly state */
-  readonly: z6.boolean().optional(),
+  readonly: z5.boolean().optional(),
   /** Autocomplete attribute */
-  autocomplete: z6.string().optional(),
+  autocomplete: z5.string().optional(),
   /** Additional CSS classes */
-  className: z6.string().optional(),
+  className: z5.string().optional(),
   /** Data attributes */
-  data: z6.record(z6.string(), z6.string()).optional(),
+  data: z5.record(z5.string(), z5.string()).optional(),
   /** Icon before input (HTML string) */
-  iconBefore: z6.string().optional(),
+  iconBefore: z5.string().optional(),
   /** Icon after input (HTML string) */
-  iconAfter: z6.string().optional(),
+  iconAfter: z5.string().optional(),
   /** Number of rows */
-  rows: z6.number().min(1).optional(),
+  rows: z5.number().min(1).optional(),
   /** Resize behavior */
   resize: TextareaResizeSchema.optional()
 }).strict();
-var CheckboxOptionsSchema = z6.object({
+var CheckboxOptionsSchema = z5.object({
   /** Input name (required) */
-  name: z6.string(),
+  name: z5.string(),
   /** Input ID */
-  id: z6.string().optional(),
+  id: z5.string().optional(),
   /** Input value */
-  value: z6.string().optional(),
+  value: z5.string().optional(),
   /** Label text (required) */
-  label: z6.string(),
+  label: z5.string(),
   /** Checked state */
-  checked: z6.boolean().optional(),
+  checked: z5.boolean().optional(),
   /** Disabled state */
-  disabled: z6.boolean().optional(),
+  disabled: z5.boolean().optional(),
   /** Helper text */
-  helper: z6.string().optional(),
+  helper: z5.string().optional(),
   /** Error message */
-  error: z6.string().optional(),
+  error: z5.string().optional(),
   /** Additional CSS classes */
-  className: z6.string().optional()
+  className: z5.string().optional()
 }).strict();
-var RadioOptionItemSchema = z6.object({
-  value: z6.string(),
-  label: z6.string(),
-  disabled: z6.boolean().optional()
+var RadioOptionItemSchema = z5.object({
+  value: z5.string(),
+  label: z5.string(),
+  disabled: z5.boolean().optional()
 }).strict();
-var RadioGroupOptionsSchema = z6.object({
+var RadioGroupOptionsSchema = z5.object({
   /** Group name (required) */
-  name: z6.string(),
+  name: z5.string(),
   /** Radio options (required) */
-  options: z6.array(RadioOptionItemSchema),
+  options: z5.array(RadioOptionItemSchema),
   /** Selected value */
-  value: z6.string().optional(),
+  value: z5.string().optional(),
   /** Label for the group */
-  label: z6.string().optional(),
+  label: z5.string().optional(),
   /** Helper text */
-  helper: z6.string().optional(),
+  helper: z5.string().optional(),
   /** Error message */
-  error: z6.string().optional(),
+  error: z5.string().optional(),
   /** Layout direction */
-  direction: z6.enum(["horizontal", "vertical"]).optional(),
+  direction: z5.enum(["horizontal", "vertical"]).optional(),
   /** Additional CSS classes */
-  className: z6.string().optional()
+  className: z5.string().optional()
 }).strict();
-var FormMethodSchema = z6.enum(["get", "post", "dialog"]);
-var FormEnctypeSchema = z6.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
-var FormOptionsSchema = z6.object({
+var FormMethodSchema = z5.enum(["get", "post", "dialog"]);
+var FormEnctypeSchema = z5.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
+var FormOptionsSchema = z5.object({
   /** Form action URL */
-  action: z6.string().optional(),
+  action: z5.string().optional(),
   /** Form method */
   method: FormMethodSchema.optional(),
   /** Form ID */
-  id: z6.string().optional(),
+  id: z5.string().optional(),
   /** Form enctype */
   enctype: FormEnctypeSchema.optional(),
   /** Disable browser validation */
-  novalidate: z6.boolean().optional(),
+  novalidate: z5.boolean().optional(),
   /** Autocomplete behavior */
-  autocomplete: z6.enum(["on", "off"]).optional(),
+  autocomplete: z5.enum(["on", "off"]).optional(),
   /** Additional CSS classes */
-  className: z6.string().optional()
+  className: z5.string().optional()
 }).strict();
-var FormRowOptionsSchema = z6.object({
+var FormRowOptionsSchema = z5.object({
   /** Number of columns */
-  cols: z6.number().min(1).max(12).optional(),
+  cols: z5.number().min(1).max(12).optional(),
   /** Gap between columns */
-  gap: z6.enum(["sm", "md", "lg"]).optional(),
+  gap: z5.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: z6.string().optional()
+  className: z5.string().optional()
 }).strict();
-var FormSectionOptionsSchema = z6.object({
+var FormSectionOptionsSchema = z5.object({
   /** Section title */
-  title: z6.string().optional(),
+  title: z5.string().optional(),
   /** Section description */
-  description: z6.string().optional(),
+  description: z5.string().optional(),
   /** Additional CSS classes */
-  className: z6.string().optional()
+  className: z5.string().optional()
 }).strict();
-var FormActionsOptionsSchema = z6.object({
+var FormActionsOptionsSchema = z5.object({
   /** Alignment */
-  align: z6.enum(["left", "center", "right", "between"]).optional(),
+  align: z5.enum(["left", "center", "right", "between"]).optional(),
   /** Additional CSS classes */
-  className: z6.string().optional()
+  className: z5.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-input.ts