@frontmcp/ui 0.6.0 → 0.6.2

package/web-components/index.js

@@ -42,55 +42,8 @@ __export(web_components_exports, {
 });
 module.exports = __toCommonJS(web_components_exports);
 
-// 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
+var import_validation = require("@frontmcp/uipack/validation");
 
 // libs/ui/src/web-components/core/attribute-parser.ts
 function parseAttributeValue(attrName, value) {
@@ -294,7 +247,7 @@ var FmcpElement = class extends HTMLElementBase {
     if (!result.success) {
       const firstError = result.error.issues[0];
       const invalidParam = firstError?.path.join(".") || "options";
-      this.innerHTML = validationErrorBox({
+      this.innerHTML = (0, import_validation.validationErrorBox)({
         componentName: this.config.name,
         invalidParam
       });
@@ -354,81 +307,63 @@ 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
+var import_theme = require("@frontmcp/uipack/theme");
+var import_utils = require("@frontmcp/uipack/utils");
+var import_utils2 = require("@frontmcp/uipack/utils");
 
-// libs/ui/src/validation/schema-paths.ts
-var import_zod = require("zod");
+// libs/ui/src/components/button.ts
+var import_validation2 = require("@frontmcp/uipack/validation");
 
 // libs/ui/src/components/button.schema.ts
-var import_zod2 = require("zod");
-var ButtonVariantSchema = import_zod2.z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
-var ButtonSizeSchema = import_zod2.z.enum(["xs", "sm", "md", "lg", "xl"]);
-var ButtonOptionsSchema = import_zod2.z.object({
+var import_zod = require("zod");
+var ButtonVariantSchema = import_zod.z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
+var ButtonSizeSchema = import_zod.z.enum(["xs", "sm", "md", "lg", "xl"]);
+var ButtonOptionsSchema = import_zod.z.object({
   /** Button variant */
   variant: ButtonVariantSchema.optional(),
   /** Button size */
   size: ButtonSizeSchema.optional(),
   /** Button type attribute */
-  type: import_zod2.z.enum(["button", "submit", "reset"]).optional(),
+  type: import_zod.z.enum(["button", "submit", "reset"]).optional(),
   /** Disabled state */
-  disabled: import_zod2.z.boolean().optional(),
+  disabled: import_zod.z.boolean().optional(),
   /** Loading state */
-  loading: import_zod2.z.boolean().optional(),
+  loading: import_zod.z.boolean().optional(),
   /** Full width */
-  fullWidth: import_zod2.z.boolean().optional(),
+  fullWidth: import_zod.z.boolean().optional(),
   /** Icon before text (HTML string) */
-  iconBefore: import_zod2.z.string().optional(),
+  iconBefore: import_zod.z.string().optional(),
   /** Icon after text (HTML string) */
-  iconAfter: import_zod2.z.string().optional(),
+  iconAfter: import_zod.z.string().optional(),
   /** Icon only (no text) */
-  iconOnly: import_zod2.z.boolean().optional(),
+  iconOnly: import_zod.z.boolean().optional(),
   /** Additional CSS classes */
-  className: import_zod2.z.string().optional(),
+  className: import_zod.z.string().optional(),
   /** Button ID */
-  id: import_zod2.z.string().optional(),
+  id: import_zod.z.string().optional(),
   /** Name attribute */
-  name: import_zod2.z.string().optional(),
+  name: import_zod.z.string().optional(),
   /** Value attribute */
-  value: import_zod2.z.string().optional(),
+  value: import_zod.z.string().optional(),
   /** Click handler (URL for links) */
-  href: import_zod2.z.string().optional(),
+  href: import_zod.z.string().optional(),
   /** Open in new tab */
-  target: import_zod2.z.enum(["_blank", "_self"]).optional(),
+  target: import_zod.z.enum(["_blank", "_self"]).optional(),
   /** Data attributes */
-  data: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.string()).optional(),
+  data: import_zod.z.record(import_zod.z.string(), import_zod.z.string()).optional(),
   /** ARIA label */
-  ariaLabel: import_zod2.z.string().optional()
+  ariaLabel: import_zod.z.string().optional()
 }).strict();
-var ButtonGroupOptionsSchema = import_zod2.z.object({
+var ButtonGroupOptionsSchema = import_zod.z.object({
   /** Attach buttons visually */
-  attached: import_zod2.z.boolean().optional(),
+  attached: import_zod.z.boolean().optional(),
   /** Direction */
-  direction: import_zod2.z.enum(["horizontal", "vertical"]).optional(),
+  direction: import_zod.z.enum(["horizontal", "vertical"]).optional(),
   /** Gap between buttons */
-  gap: import_zod2.z.enum(["sm", "md", "lg"]).optional(),
+  gap: import_zod.z.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: import_zod2.z.string().optional()
+  className: import_zod.z.string().optional()
 }).strict();
 
 // libs/ui/src/components/button.ts
@@ -481,7 +416,7 @@ function isValidHrefProtocol(href) {
   return trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/") || trimmed.startsWith("#") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:");
 }
 function button(text, options = {}) {
-  const validation = validateOptions(options, {
+  const validation = (0, import_validation2.validateOptions)(options, {
     schema: ButtonOptionsSchema,
     componentName: "button"
   });
@@ -521,7 +456,7 @@ function button(text, options = {}) {
   }
   const variantClasses = getVariantClasses(variant);
   const sizeClasses = getSizeClasses(size, iconOnly);
-  const safeClassName = className ? escapeHtml(className) : "";
+  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
   const baseClasses = [
     "inline-flex items-center justify-center",
     "font-medium",
@@ -536,24 +471,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}="${(0, import_utils2.escapeHtml)(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="${(0, import_utils2.escapeHtml)(id)}"` : "";
+  const nameAttr = name ? `name="${(0, import_utils2.escapeHtml)(name)}"` : "";
+  const valueAttr = value ? `value="${(0, import_utils2.escapeHtml)(value)}"` : "";
   const disabledAttr = disabled || loading ? "disabled" : "";
-  const targetAttr = target ? `target="${escapeHtml(target)}"` : "";
+  const targetAttr = target ? `target="${(0, import_utils2.escapeHtml)(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="${(0, import_utils2.escapeHtml)(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 ? "" : (0, import_utils2.escapeHtml)(text);
   const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
   if (href && !disabled && !loading && isValidHrefProtocol(href)) {
-    return `<a href="${escapeHtml(
+    return `<a href="${(0, import_utils2.escapeHtml)(
       href
     )}" class="${baseClasses}" ${idAttr} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
       ${contentHtml}
@@ -737,7 +672,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}="${(0, import_utils2.escapeHtml)(value)}"`).join(" ");
 }
 function card(content, options = {}) {
   const {
@@ -758,18 +693,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="${(0, import_utils2.escapeHtml)(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">${(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>` : ""}
       </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="${(0, import_utils2.escapeHtml)(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
       ${content}
       ${footerHtml}
@@ -783,40 +718,40 @@ function card(content, options = {}) {
 }
 
 // libs/ui/src/components/card.schema.ts
-var import_zod3 = require("zod");
-var CardVariantSchema = import_zod3.z.enum(["default", "outlined", "elevated", "filled", "ghost"]);
-var CardSizeSchema = import_zod3.z.enum(["sm", "md", "lg"]);
-var CardOptionsSchema = import_zod3.z.object({
+var import_zod2 = require("zod");
+var CardVariantSchema = import_zod2.z.enum(["default", "outlined", "elevated", "filled", "ghost"]);
+var CardSizeSchema = import_zod2.z.enum(["sm", "md", "lg"]);
+var CardOptionsSchema = import_zod2.z.object({
   /** Card variant */
   variant: CardVariantSchema.optional(),
   /** Card size (padding) */
   size: CardSizeSchema.optional(),
   /** Card title */
-  title: import_zod3.z.string().optional(),
+  title: import_zod2.z.string().optional(),
   /** Card subtitle/description */
-  subtitle: import_zod3.z.string().optional(),
+  subtitle: import_zod2.z.string().optional(),
   /** Header actions (HTML string) */
-  headerActions: import_zod3.z.string().optional(),
+  headerActions: import_zod2.z.string().optional(),
   /** Footer content (HTML string) */
-  footer: import_zod3.z.string().optional(),
+  footer: import_zod2.z.string().optional(),
   /** Additional CSS classes */
-  className: import_zod3.z.string().optional(),
+  className: import_zod2.z.string().optional(),
   /** Card ID */
-  id: import_zod3.z.string().optional(),
+  id: import_zod2.z.string().optional(),
   /** Data attributes */
-  data: import_zod3.z.record(import_zod3.z.string(), import_zod3.z.string()).optional(),
+  data: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.string()).optional(),
   /** Clickable card (adds hover effects) */
-  clickable: import_zod3.z.boolean().optional(),
+  clickable: import_zod2.z.boolean().optional(),
   /** Click handler URL */
-  href: import_zod3.z.string().optional()
+  href: import_zod2.z.string().optional()
 }).strict();
-var CardGroupOptionsSchema = import_zod3.z.object({
+var CardGroupOptionsSchema = import_zod2.z.object({
   /** Direction */
-  direction: import_zod3.z.enum(["horizontal", "vertical"]).optional(),
+  direction: import_zod2.z.enum(["horizontal", "vertical"]).optional(),
   /** Gap between cards */
-  gap: import_zod3.z.enum(["sm", "md", "lg"]).optional(),
+  gap: import_zod2.z.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: import_zod3.z.string().optional()
+  className: import_zod2.z.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-card.ts
@@ -949,7 +884,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">${(0, import_utils2.escapeHtml)(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"
@@ -961,13 +896,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="${(0, import_utils2.escapeHtml)(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" : ""}">${(0, import_utils2.escapeHtml)(message)}</div>
         ${actionsHtml}
       </div>
       ${dismissHtml}
@@ -976,27 +911,27 @@ function alert(message, options = {}) {
 }
 
 // libs/ui/src/components/alert.schema.ts
-var import_zod4 = require("zod");
-var AlertVariantSchema = import_zod4.z.enum(["info", "success", "warning", "danger", "neutral"]);
-var AlertOptionsSchema = import_zod4.z.object({
+var import_zod3 = require("zod");
+var AlertVariantSchema = import_zod3.z.enum(["info", "success", "warning", "danger", "neutral"]);
+var AlertOptionsSchema = import_zod3.z.object({
   /** Alert variant */
   variant: AlertVariantSchema.optional(),
   /** Alert title */
-  title: import_zod4.z.string().optional(),
+  title: import_zod3.z.string().optional(),
   /** Show icon */
-  showIcon: import_zod4.z.boolean().optional(),
+  showIcon: import_zod3.z.boolean().optional(),
   /** Custom icon (HTML string, overrides default) */
-  icon: import_zod4.z.string().optional(),
+  icon: import_zod3.z.string().optional(),
   /** Dismissible alert */
-  dismissible: import_zod4.z.boolean().optional(),
+  dismissible: import_zod3.z.boolean().optional(),
   /** Additional CSS classes */
-  className: import_zod4.z.string().optional(),
+  className: import_zod3.z.string().optional(),
   /** Alert ID */
-  id: import_zod4.z.string().optional(),
+  id: import_zod3.z.string().optional(),
   /** Actions (HTML string for buttons) */
-  actions: import_zod4.z.string().optional()
+  actions: import_zod3.z.string().optional()
 }).strict();
-var ToastPositionSchema = import_zod4.z.enum([
+var ToastPositionSchema = import_zod3.z.enum([
   "top-right",
   "top-left",
   "bottom-right",
@@ -1004,17 +939,17 @@ var ToastPositionSchema = import_zod4.z.enum([
   "top-center",
   "bottom-center"
 ]);
-var ToastOptionsSchema = import_zod4.z.object({
+var ToastOptionsSchema = import_zod3.z.object({
   /** Toast variant */
   variant: AlertVariantSchema.optional(),
   /** Toast title */
-  title: import_zod4.z.string().optional(),
+  title: import_zod3.z.string().optional(),
   /** Duration in ms (0 = no auto-dismiss) */
-  duration: import_zod4.z.number().min(0).optional(),
+  duration: import_zod3.z.number().min(0).optional(),
   /** Position */
   position: ToastPositionSchema.optional(),
   /** Toast ID */
-  id: import_zod4.z.string().optional()
+  id: import_zod3.z.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-alert.ts
@@ -1128,7 +1063,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="${(0, import_utils2.escapeHtml)(text)}" title="${(0, import_utils2.escapeHtml)(text)}"></span>`;
   }
   const variantClasses = getVariantClasses4(variant);
   const sizeClasses = getSizeClasses3(size, false);
@@ -1151,13 +1086,13 @@ function badge(text, options = {}) {
         </svg>
       </button>` : "";
   return `<span class="${baseClasses}">
-    ${iconHtml}${escapeHtml(text)}${removeHtml}
+    ${iconHtml}${(0, import_utils2.escapeHtml)(text)}${removeHtml}
   </span>`;
 }
 
 // libs/ui/src/components/badge.schema.ts
-var import_zod5 = require("zod");
-var BadgeVariantSchema = import_zod5.z.enum([
+var import_zod4 = require("zod");
+var BadgeVariantSchema = import_zod4.z.enum([
   "default",
   "primary",
   "secondary",
@@ -1167,28 +1102,28 @@ var BadgeVariantSchema = import_zod5.z.enum([
   "info",
   "outline"
 ]);
-var BadgeSizeSchema = import_zod5.z.enum(["sm", "md", "lg"]);
-var BadgeOptionsSchema = import_zod5.z.object({
+var BadgeSizeSchema = import_zod4.z.enum(["sm", "md", "lg"]);
+var BadgeOptionsSchema = import_zod4.z.object({
   /** Badge variant */
   variant: BadgeVariantSchema.optional(),
   /** Badge size */
   size: BadgeSizeSchema.optional(),
   /** Rounded pill style */
-  pill: import_zod5.z.boolean().optional(),
+  pill: import_zod4.z.boolean().optional(),
   /** Icon before text (HTML string) */
-  icon: import_zod5.z.string().optional(),
+  icon: import_zod4.z.string().optional(),
   /** Dot indicator (no text) */
-  dot: import_zod5.z.boolean().optional(),
+  dot: import_zod4.z.boolean().optional(),
   /** Additional CSS classes */
-  className: import_zod5.z.string().optional(),
+  className: import_zod4.z.string().optional(),
   /** Removable badge */
-  removable: import_zod5.z.boolean().optional()
+  removable: import_zod4.z.boolean().optional()
 }).strict();
-var BadgeGroupOptionsSchema = import_zod5.z.object({
+var BadgeGroupOptionsSchema = import_zod4.z.object({
   /** Gap between badges */
-  gap: import_zod5.z.enum(["sm", "md", "lg"]).optional(),
+  gap: import_zod4.z.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: import_zod5.z.string().optional()
+  className: import_zod4.z.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-badge.ts
@@ -1277,7 +1212,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}="${(0, import_utils2.escapeHtml)(value)}"`).join(" ");
 }
 function input(options) {
   const {
@@ -1320,26 +1255,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="${(0, import_utils2.escapeHtml)(name)}"`,
+    `id="${(0, import_utils2.escapeHtml)(id)}"`,
+    value ? `value="${(0, import_utils2.escapeHtml)(value)}"` : "",
+    placeholder ? `placeholder="${(0, import_utils2.escapeHtml)(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="${(0, import_utils2.escapeHtml)(autocomplete)}"` : "",
+    pattern ? `pattern="${(0, import_utils2.escapeHtml)(pattern)}"` : "",
+    min !== void 0 ? `min="${(0, import_utils2.escapeHtml)(String(min))}"` : "",
+    max !== void 0 ? `max="${(0, import_utils2.escapeHtml)(String(max))}"` : "",
+    step !== void 0 ? `step="${(0, import_utils2.escapeHtml)(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="${(0, import_utils2.escapeHtml)(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${(0, import_utils2.escapeHtml)(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">${(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 inputHtml = hasIcon ? `<div class="relative">
@@ -1386,18 +1321,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="${(0, import_utils2.escapeHtml)(opt.value)}" ${selected} ${optDisabled}>${(0, import_utils2.escapeHtml)(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="${(0, import_utils2.escapeHtml)(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${(0, import_utils2.escapeHtml)(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">${(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">
     ${labelHtml}
     <select
-      name="${escapeHtml(name)}"
-      id="${escapeHtml(id)}"
+      name="${(0, import_utils2.escapeHtml)(name)}"
+      id="${(0, import_utils2.escapeHtml)(id)}"
       class="${baseClasses}"
       ${required ? "required" : ""}
       ${disabled ? "disabled" : ""}
@@ -1412,8 +1347,8 @@ function select(options) {
 }
 
 // libs/ui/src/components/form.schema.ts
-var import_zod6 = require("zod");
-var InputTypeSchema = import_zod6.z.enum([
+var import_zod5 = require("zod");
+var InputTypeSchema = import_zod5.z.enum([
   "text",
   "email",
   "password",
@@ -1426,221 +1361,221 @@ var InputTypeSchema = import_zod6.z.enum([
   "datetime-local",
   "hidden"
 ]);
-var InputSizeSchema = import_zod6.z.enum(["sm", "md", "lg"]);
-var InputStateSchema = import_zod6.z.enum(["default", "error", "success", "warning"]);
-var InputOptionsSchema = import_zod6.z.object({
+var InputSizeSchema = import_zod5.z.enum(["sm", "md", "lg"]);
+var InputStateSchema = import_zod5.z.enum(["default", "error", "success", "warning"]);
+var InputOptionsSchema = import_zod5.z.object({
   /** Input type */
   type: InputTypeSchema.optional(),
   /** Input name (required) */
-  name: import_zod6.z.string(),
+  name: import_zod5.z.string(),
   /** Input ID (defaults to name) */
-  id: import_zod6.z.string().optional(),
+  id: import_zod5.z.string().optional(),
   /** Input value */
-  value: import_zod6.z.string().optional(),
+  value: import_zod5.z.string().optional(),
   /** Placeholder text */
-  placeholder: import_zod6.z.string().optional(),
+  placeholder: import_zod5.z.string().optional(),
   /** Label text */
-  label: import_zod6.z.string().optional(),
+  label: import_zod5.z.string().optional(),
   /** Helper text */
-  helper: import_zod6.z.string().optional(),
+  helper: import_zod5.z.string().optional(),
   /** Error message */
-  error: import_zod6.z.string().optional(),
+  error: import_zod5.z.string().optional(),
   /** Input size */
   size: InputSizeSchema.optional(),
   /** Input state */
   state: InputStateSchema.optional(),
   /** Required field */
-  required: import_zod6.z.boolean().optional(),
+  required: import_zod5.z.boolean().optional(),
   /** Disabled state */
-  disabled: import_zod6.z.boolean().optional(),
+  disabled: import_zod5.z.boolean().optional(),
   /** Readonly state */
-  readonly: import_zod6.z.boolean().optional(),
+  readonly: import_zod5.z.boolean().optional(),
   /** Autocomplete attribute */
-  autocomplete: import_zod6.z.string().optional(),
+  autocomplete: import_zod5.z.string().optional(),
   /** Pattern for validation */
-  pattern: import_zod6.z.string().optional(),
+  pattern: import_zod5.z.string().optional(),
   /** Min value (for number/date) */
-  min: import_zod6.z.union([import_zod6.z.string(), import_zod6.z.number()]).optional(),
+  min: import_zod5.z.union([import_zod5.z.string(), import_zod5.z.number()]).optional(),
   /** Max value (for number/date) */
-  max: import_zod6.z.union([import_zod6.z.string(), import_zod6.z.number()]).optional(),
+  max: import_zod5.z.union([import_zod5.z.string(), import_zod5.z.number()]).optional(),
   /** Step value (for number) */
-  step: import_zod6.z.union([import_zod6.z.string(), import_zod6.z.number()]).optional(),
+  step: import_zod5.z.union([import_zod5.z.string(), import_zod5.z.number()]).optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional(),
+  className: import_zod5.z.string().optional(),
   /** Data attributes */
-  data: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.string()).optional(),
+  data: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.string()).optional(),
   /** Icon before input (HTML string) */
-  iconBefore: import_zod6.z.string().optional(),
+  iconBefore: import_zod5.z.string().optional(),
   /** Icon after input (HTML string) */
-  iconAfter: import_zod6.z.string().optional()
+  iconAfter: import_zod5.z.string().optional()
 }).strict();
-var SelectOptionItemSchema = import_zod6.z.object({
-  value: import_zod6.z.string(),
-  label: import_zod6.z.string(),
-  disabled: import_zod6.z.boolean().optional(),
-  selected: import_zod6.z.boolean().optional()
+var SelectOptionItemSchema = import_zod5.z.object({
+  value: import_zod5.z.string(),
+  label: import_zod5.z.string(),
+  disabled: import_zod5.z.boolean().optional(),
+  selected: import_zod5.z.boolean().optional()
 }).strict();
-var SelectOptionsSchema = import_zod6.z.object({
+var SelectOptionsSchema = import_zod5.z.object({
   /** Input name (required) */
-  name: import_zod6.z.string(),
+  name: import_zod5.z.string(),
   /** Input ID (defaults to name) */
-  id: import_zod6.z.string().optional(),
+  id: import_zod5.z.string().optional(),
   /** Input value */
-  value: import_zod6.z.string().optional(),
+  value: import_zod5.z.string().optional(),
   /** Placeholder text */
-  placeholder: import_zod6.z.string().optional(),
+  placeholder: import_zod5.z.string().optional(),
   /** Label text */
-  label: import_zod6.z.string().optional(),
+  label: import_zod5.z.string().optional(),
   /** Helper text */
-  helper: import_zod6.z.string().optional(),
+  helper: import_zod5.z.string().optional(),
   /** Error message */
-  error: import_zod6.z.string().optional(),
+  error: import_zod5.z.string().optional(),
   /** Input size */
   size: InputSizeSchema.optional(),
   /** Input state */
   state: InputStateSchema.optional(),
   /** Required field */
-  required: import_zod6.z.boolean().optional(),
+  required: import_zod5.z.boolean().optional(),
   /** Disabled state */
-  disabled: import_zod6.z.boolean().optional(),
+  disabled: import_zod5.z.boolean().optional(),
   /** Readonly state */
-  readonly: import_zod6.z.boolean().optional(),
+  readonly: import_zod5.z.boolean().optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional(),
+  className: import_zod5.z.string().optional(),
   /** Data attributes */
-  data: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.string()).optional(),
+  data: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.string()).optional(),
   /** Icon before input (HTML string) */
-  iconBefore: import_zod6.z.string().optional(),
+  iconBefore: import_zod5.z.string().optional(),
   /** Icon after input (HTML string) */
-  iconAfter: import_zod6.z.string().optional(),
+  iconAfter: import_zod5.z.string().optional(),
   /** Select options (required) */
-  options: import_zod6.z.array(SelectOptionItemSchema),
+  options: import_zod5.z.array(SelectOptionItemSchema),
   /** Multiple selection */
-  multiple: import_zod6.z.boolean().optional()
+  multiple: import_zod5.z.boolean().optional()
 }).strict();
-var TextareaResizeSchema = import_zod6.z.enum(["none", "vertical", "horizontal", "both"]);
-var TextareaOptionsSchema = import_zod6.z.object({
+var TextareaResizeSchema = import_zod5.z.enum(["none", "vertical", "horizontal", "both"]);
+var TextareaOptionsSchema = import_zod5.z.object({
   /** Input name (required) */
-  name: import_zod6.z.string(),
+  name: import_zod5.z.string(),
   /** Input ID (defaults to name) */
-  id: import_zod6.z.string().optional(),
+  id: import_zod5.z.string().optional(),
   /** Input value */
-  value: import_zod6.z.string().optional(),
+  value: import_zod5.z.string().optional(),
   /** Placeholder text */
-  placeholder: import_zod6.z.string().optional(),
+  placeholder: import_zod5.z.string().optional(),
   /** Label text */
-  label: import_zod6.z.string().optional(),
+  label: import_zod5.z.string().optional(),
   /** Helper text */
-  helper: import_zod6.z.string().optional(),
+  helper: import_zod5.z.string().optional(),
   /** Error message */
-  error: import_zod6.z.string().optional(),
+  error: import_zod5.z.string().optional(),
   /** Input size */
   size: InputSizeSchema.optional(),
   /** Input state */
   state: InputStateSchema.optional(),
   /** Required field */
-  required: import_zod6.z.boolean().optional(),
+  required: import_zod5.z.boolean().optional(),
   /** Disabled state */
-  disabled: import_zod6.z.boolean().optional(),
+  disabled: import_zod5.z.boolean().optional(),
   /** Readonly state */
-  readonly: import_zod6.z.boolean().optional(),
+  readonly: import_zod5.z.boolean().optional(),
   /** Autocomplete attribute */
-  autocomplete: import_zod6.z.string().optional(),
+  autocomplete: import_zod5.z.string().optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional(),
+  className: import_zod5.z.string().optional(),
   /** Data attributes */
-  data: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.string()).optional(),
+  data: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.string()).optional(),
   /** Icon before input (HTML string) */
-  iconBefore: import_zod6.z.string().optional(),
+  iconBefore: import_zod5.z.string().optional(),
   /** Icon after input (HTML string) */
-  iconAfter: import_zod6.z.string().optional(),
+  iconAfter: import_zod5.z.string().optional(),
   /** Number of rows */
-  rows: import_zod6.z.number().min(1).optional(),
+  rows: import_zod5.z.number().min(1).optional(),
   /** Resize behavior */
   resize: TextareaResizeSchema.optional()
 }).strict();
-var CheckboxOptionsSchema = import_zod6.z.object({
+var CheckboxOptionsSchema = import_zod5.z.object({
   /** Input name (required) */
-  name: import_zod6.z.string(),
+  name: import_zod5.z.string(),
   /** Input ID */
-  id: import_zod6.z.string().optional(),
+  id: import_zod5.z.string().optional(),
   /** Input value */
-  value: import_zod6.z.string().optional(),
+  value: import_zod5.z.string().optional(),
   /** Label text (required) */
-  label: import_zod6.z.string(),
+  label: import_zod5.z.string(),
   /** Checked state */
-  checked: import_zod6.z.boolean().optional(),
+  checked: import_zod5.z.boolean().optional(),
   /** Disabled state */
-  disabled: import_zod6.z.boolean().optional(),
+  disabled: import_zod5.z.boolean().optional(),
   /** Helper text */
-  helper: import_zod6.z.string().optional(),
+  helper: import_zod5.z.string().optional(),
   /** Error message */
-  error: import_zod6.z.string().optional(),
+  error: import_zod5.z.string().optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
+  className: import_zod5.z.string().optional()
 }).strict();
-var RadioOptionItemSchema = import_zod6.z.object({
-  value: import_zod6.z.string(),
-  label: import_zod6.z.string(),
-  disabled: import_zod6.z.boolean().optional()
+var RadioOptionItemSchema = import_zod5.z.object({
+  value: import_zod5.z.string(),
+  label: import_zod5.z.string(),
+  disabled: import_zod5.z.boolean().optional()
 }).strict();
-var RadioGroupOptionsSchema = import_zod6.z.object({
+var RadioGroupOptionsSchema = import_zod5.z.object({
   /** Group name (required) */
-  name: import_zod6.z.string(),
+  name: import_zod5.z.string(),
   /** Radio options (required) */
-  options: import_zod6.z.array(RadioOptionItemSchema),
+  options: import_zod5.z.array(RadioOptionItemSchema),
   /** Selected value */
-  value: import_zod6.z.string().optional(),
+  value: import_zod5.z.string().optional(),
   /** Label for the group */
-  label: import_zod6.z.string().optional(),
+  label: import_zod5.z.string().optional(),
   /** Helper text */
-  helper: import_zod6.z.string().optional(),
+  helper: import_zod5.z.string().optional(),
   /** Error message */
-  error: import_zod6.z.string().optional(),
+  error: import_zod5.z.string().optional(),
   /** Layout direction */
-  direction: import_zod6.z.enum(["horizontal", "vertical"]).optional(),
+  direction: import_zod5.z.enum(["horizontal", "vertical"]).optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
+  className: import_zod5.z.string().optional()
 }).strict();
-var FormMethodSchema = import_zod6.z.enum(["get", "post", "dialog"]);
-var FormEnctypeSchema = import_zod6.z.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
-var FormOptionsSchema = import_zod6.z.object({
+var FormMethodSchema = import_zod5.z.enum(["get", "post", "dialog"]);
+var FormEnctypeSchema = import_zod5.z.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
+var FormOptionsSchema = import_zod5.z.object({
   /** Form action URL */
-  action: import_zod6.z.string().optional(),
+  action: import_zod5.z.string().optional(),
   /** Form method */
   method: FormMethodSchema.optional(),
   /** Form ID */
-  id: import_zod6.z.string().optional(),
+  id: import_zod5.z.string().optional(),
   /** Form enctype */
   enctype: FormEnctypeSchema.optional(),
   /** Disable browser validation */
-  novalidate: import_zod6.z.boolean().optional(),
+  novalidate: import_zod5.z.boolean().optional(),
   /** Autocomplete behavior */
-  autocomplete: import_zod6.z.enum(["on", "off"]).optional(),
+  autocomplete: import_zod5.z.enum(["on", "off"]).optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
+  className: import_zod5.z.string().optional()
 }).strict();
-var FormRowOptionsSchema = import_zod6.z.object({
+var FormRowOptionsSchema = import_zod5.z.object({
   /** Number of columns */
-  cols: import_zod6.z.number().min(1).max(12).optional(),
+  cols: import_zod5.z.number().min(1).max(12).optional(),
   /** Gap between columns */
-  gap: import_zod6.z.enum(["sm", "md", "lg"]).optional(),
+  gap: import_zod5.z.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
+  className: import_zod5.z.string().optional()
 }).strict();
-var FormSectionOptionsSchema = import_zod6.z.object({
+var FormSectionOptionsSchema = import_zod5.z.object({
   /** Section title */
-  title: import_zod6.z.string().optional(),
+  title: import_zod5.z.string().optional(),
   /** Section description */
-  description: import_zod6.z.string().optional(),
+  description: import_zod5.z.string().optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
+  className: import_zod5.z.string().optional()
 }).strict();
-var FormActionsOptionsSchema = import_zod6.z.object({
+var FormActionsOptionsSchema = import_zod5.z.object({
   /** Alignment */
-  align: import_zod6.z.enum(["left", "center", "right", "between"]).optional(),
+  align: import_zod5.z.enum(["left", "center", "right", "between"]).optional(),
   /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
+  className: import_zod5.z.string().optional()
 }).strict();
 
 // libs/ui/src/web-components/elements/fmcp-input.ts