@frontmcp/ui 0.6.0 → 0.6.1

package/esm/pages/index.js

@@ -1,500 +1,17 @@
-// libs/ui/src/theme/cdn.ts
-var CDN = {
-  /**
-   * Tailwind CSS v4 Browser CDN
-   * Generates styles on-the-fly with @theme support
-   * @see https://tailwindcss.com/docs/installation/play-cdn
-   */
-  tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
-  /**
-   * HTMX 2.x - High power tools for HTML
-   * Enables AJAX, WebSockets, Server Sent Events directly in HTML
-   * @see https://htmx.org
-   */
-  htmx: {
-    url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
-    integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
-  },
-  /**
-   * Alpine.js - Lightweight reactive framework
-   * Used for more complex client-side interactions
-   * @see https://alpinejs.dev
-   */
-  alpine: {
-    url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
-    integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
-  },
-  /**
-   * Google Fonts - Inter for modern UI typography
-   */
-  fonts: {
-    preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
-    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
-    mono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
-  },
-  /**
-   * Lucide Icons - Beautiful & consistent icons
-   * @see https://lucide.dev
-   */
-  icons: {
-    url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js",
-    integrity: "sha384-wpLmHb7v7V1LsEuTmPQ9tXqWZvTtRWWVqJuE+Yz6X0I6O2T6bHJVeXH1lVWqF4qE"
-  }
-};
-var scriptCache = /* @__PURE__ */ new Map();
-function getCachedScript(url) {
-  return scriptCache.get(url);
-}
-function isScriptCached(url) {
-  return scriptCache.has(url);
-}
-function buildFontPreconnect() {
-  return CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
-}
-function buildFontStylesheets(options = {}) {
-  const { inter = true, mono = false } = options;
-  const links = [];
-  if (inter) {
-    links.push(`<link href="${CDN.fonts.inter}" rel="stylesheet">`);
-  }
-  if (mono) {
-    links.push(`<link href="${CDN.fonts.mono}" rel="stylesheet">`);
-  }
-  return links.join("\n  ");
-}
-function buildScriptTag(url, integrity, options = {}) {
-  const attrs = [`src="${url}"`];
-  if (integrity) {
-    attrs.push(`integrity="${integrity}"`);
-    attrs.push('crossorigin="anonymous"');
-  }
-  if (options.defer) attrs.push("defer");
-  if (options.async) attrs.push("async");
-  return `<script ${attrs.join(" ")}></script>`;
-}
-function buildInlineScriptTag(content) {
-  return `<script>${content}</script>`;
-}
-function buildCdnScripts(options = {}) {
-  const { tailwind = true, htmx = true, alpine = false, icons = false, inline = false } = options;
-  const scripts = [];
-  if (inline) {
-    if (tailwind) {
-      if (isScriptCached(CDN.tailwind)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)));
-      } else {
-        console.warn(
-          "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first."
-        );
-      }
-    }
-    if (htmx) {
-      if (isScriptCached(CDN.htmx.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)));
-      } else {
-        console.warn(
-          "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first."
-        );
-      }
-    }
-    if (alpine) {
-      if (isScriptCached(CDN.alpine.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)));
-      } else {
-        console.warn(
-          "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first."
-        );
-      }
-    }
-    if (icons) {
-      if (isScriptCached(CDN.icons.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)));
-      } else {
-        console.warn(
-          "[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first."
-        );
-      }
-    }
-  } else {
-    if (tailwind) {
-      scripts.push(buildScriptTag(CDN.tailwind));
-    }
-    if (htmx) {
-      scripts.push(buildScriptTag(CDN.htmx.url, CDN.htmx.integrity));
-    }
-    if (alpine) {
-      scripts.push(buildScriptTag(CDN.alpine.url, CDN.alpine.integrity, { defer: true }));
-    }
-    if (icons) {
-      scripts.push(buildScriptTag(CDN.icons.url, CDN.icons.integrity));
-    }
-  }
-  return scripts.join("\n  ");
-}
-
-// libs/ui/src/theme/platforms.ts
-var OPENAI_PLATFORM = {
-  id: "openai",
-  name: "OpenAI",
-  supportsWidgets: true,
-  supportsTailwind: true,
-  supportsHtmx: true,
-  networkMode: "full",
-  scriptStrategy: "cdn",
-  options: {
-    sdk: "apps-sdk",
-    version: "1.0"
-  }
-};
-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
-  }
-};
-function canUseCdn(platform) {
-  return platform.networkMode === "full" && platform.scriptStrategy === "cdn";
-}
-function needsInlineScripts(platform) {
-  return platform.scriptStrategy === "inline" || platform.networkMode === "blocked";
-}
-
-// libs/ui/src/theme/presets/github-openai.ts
-var GITHUB_OPENAI_THEME = {
-  name: "github-openai",
-  colors: {
-    semantic: {
-      // Primary: Near-black for main actions and branding
-      primary: "#24292f",
-      // Secondary: Medium gray for secondary elements
-      secondary: "#57606a",
-      // Accent: Blue for links, focus states, and highlights
-      accent: "#0969da",
-      // Status colors
-      success: "#1a7f37",
-      // GitHub green
-      warning: "#9a6700",
-      // Amber warning
-      danger: "#cf222e",
-      // GitHub red
-      info: "#0969da"
-      // Blue info
-    },
-    surface: {
-      // Pure white background
-      background: "#ffffff",
-      // Light gray surface (GitHub code background style)
-      surface: "#f6f8fa",
-      // White elevated surfaces (modals, cards)
-      elevated: "#ffffff",
-      // Dark semi-transparent overlay
-      overlay: "rgba(27, 31, 36, 0.5)"
-    },
-    text: {
-      // Near-black for primary text
-      primary: "#24292f",
-      // Gray for secondary/muted text
-      secondary: "#57606a",
-      // Light gray for disabled text
-      disabled: "#8c959f",
-      // White for text on dark backgrounds
-      inverse: "#ffffff",
-      // Blue for links
-      link: "#0969da"
-    },
-    border: {
-      // Light gray border (GitHub style)
-      default: "#d0d7de",
-      // Medium gray on hover
-      hover: "#8c959f",
-      // Blue focus ring
-      focus: "#0969da",
-      // Subtle divider
-      divider: "#d8dee4"
-    }
-  },
-  typography: {
-    families: {
-      // System UI font stack (GitHub/Apple style)
-      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-      // Monospace stack
-      mono: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace'
-    },
-    sizes: {
-      xs: "0.75rem",
-      // 12px
-      sm: "0.875rem",
-      // 14px
-      base: "1rem",
-      // 16px
-      lg: "1.125rem",
-      // 18px
-      xl: "1.25rem",
-      // 20px
-      "2xl": "1.5rem",
-      // 24px
-      "3xl": "1.875rem",
-      // 30px
-      "4xl": "2.25rem"
-      // 36px
-    },
-    weights: {
-      normal: "400",
-      medium: "500",
-      semibold: "600",
-      bold: "700"
-    }
-  },
-  radius: {
-    none: "0",
-    sm: "3px",
-    // GitHub uses smaller radii
-    md: "6px",
-    lg: "8px",
-    xl: "12px",
-    "2xl": "16px",
-    full: "9999px"
-  },
-  shadows: {
-    // Subtle shadows with gray tones
-    sm: "0 1px 0 rgba(27, 31, 36, 0.04)",
-    md: "0 3px 6px rgba(140, 149, 159, 0.15)",
-    lg: "0 8px 24px rgba(140, 149, 159, 0.2)",
-    xl: "0 12px 28px rgba(140, 149, 159, 0.3)"
-  },
-  components: {
-    button: {
-      radius: "6px",
-      paddingX: "16px",
-      paddingY: "5px",
-      fontSize: "14px",
-      fontWeight: "500"
-    },
-    card: {
-      radius: "6px",
-      padding: "16px",
-      shadow: "0 1px 0 rgba(27, 31, 36, 0.04)",
-      borderWidth: "1px"
-    },
-    input: {
-      radius: "6px",
-      paddingX: "12px",
-      paddingY: "5px",
-      borderWidth: "1px",
-      focusRingWidth: "3px"
-    }
-  },
-  cdn: {
-    fonts: {
-      preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
-      stylesheets: [
-        // System UI fonts don't need external stylesheets, but we include
-        // Inter as an optional enhancement for consistent cross-platform rendering
-        "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      ]
-    },
-    icons: {
-      script: {
-        url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js"
-      }
-    },
-    scripts: {
-      tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
-      htmx: {
-        url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
-        integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
-      },
-      alpine: {
-        url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
-        integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
-      }
-    }
-  }
-};
-var DEFAULT_THEME = GITHUB_OPENAI_THEME;
-
-// libs/ui/src/theme/theme.ts
-function mergeThemesCore(base, override) {
-  const baseColors = base.colors ?? { semantic: { primary: "#24292f" } };
-  const filterStrings = (arr) => arr.filter((s) => s !== void 0);
-  return {
-    ...base,
-    ...override,
-    colors: {
-      ...baseColors,
-      ...override.colors,
-      semantic: { ...baseColors.semantic, ...override.colors?.semantic },
-      surface: { ...baseColors.surface, ...override.colors?.surface },
-      text: { ...baseColors.text, ...override.colors?.text },
-      border: { ...baseColors.border, ...override.colors?.border },
-      custom: { ...baseColors.custom, ...override.colors?.custom }
-    },
-    typography: {
-      ...base.typography,
-      ...override.typography,
-      families: { ...base.typography?.families, ...override.typography?.families },
-      sizes: { ...base.typography?.sizes, ...override.typography?.sizes },
-      weights: { ...base.typography?.weights, ...override.typography?.weights },
-      lineHeight: { ...base.typography?.lineHeight, ...override.typography?.lineHeight }
-    },
-    spacing: { ...base.spacing, ...override.spacing },
-    radius: { ...base.radius, ...override.radius },
-    shadows: { ...base.shadows, ...override.shadows },
-    components: {
-      ...base.components,
-      ...override.components,
-      button: { ...base.components?.button, ...override.components?.button },
-      card: { ...base.components?.card, ...override.components?.card },
-      input: { ...base.components?.input, ...override.components?.input }
-    },
-    cdn: {
-      ...base.cdn,
-      ...override.cdn,
-      fonts: {
-        // Concatenate then dedupe so base entries are preserved without duplicates
-        preconnect: filterStrings(
-          Array.from(/* @__PURE__ */ new Set([...base.cdn?.fonts?.preconnect ?? [], ...override.cdn?.fonts?.preconnect ?? []]))
-        ),
-        stylesheets: filterStrings(
-          Array.from(/* @__PURE__ */ new Set([...base.cdn?.fonts?.stylesheets ?? [], ...override.cdn?.fonts?.stylesheets ?? []]))
-        )
-      },
-      icons: {
-        ...base.cdn?.icons,
-        ...override.cdn?.icons,
-        // Deep merge script to preserve integrity when only url is overridden
-        script: override.cdn?.icons?.script ? { ...base.cdn?.icons?.script, ...override.cdn?.icons?.script } : base.cdn?.icons?.script
-      },
-      scripts: {
-        // tailwind is a simple string, just use override or base
-        tailwind: override.cdn?.scripts?.tailwind ?? base.cdn?.scripts?.tailwind,
-        // Deep merge htmx/alpine to preserve integrity when only url is overridden
-        htmx: override.cdn?.scripts?.htmx ? { ...base.cdn?.scripts?.htmx, ...override.cdn?.scripts?.htmx } : base.cdn?.scripts?.htmx,
-        alpine: override.cdn?.scripts?.alpine ? { ...base.cdn?.scripts?.alpine, ...override.cdn?.scripts?.alpine } : base.cdn?.scripts?.alpine
-      }
-    },
-    customVars: { ...base.customVars, ...override.customVars },
-    customCss: [base.customCss, override.customCss].filter(Boolean).join("\n")
-  };
-}
-function mergeThemes(base, override) {
-  const merged = mergeThemesCore(base, override);
-  let darkVariant;
-  if (override.dark !== void 0) {
-    const darkBase = base.dark ?? base;
-    const { dark: _nestedDark, ...overrideDarkWithoutNested } = override.dark;
-    darkVariant = mergeThemesCore(darkBase, overrideDarkWithoutNested);
-  } else if (base.dark !== void 0) {
-    const { dark: _nestedDark, ...baseDarkWithoutNested } = base.dark;
-    darkVariant = baseDarkWithoutNested;
-  }
-  return {
-    ...merged,
-    dark: darkVariant
-  };
-}
-function emitColorScale(lines, name, scale) {
-  for (const [shade, value] of Object.entries(scale)) {
-    if (value) lines.push(`--color-${name}-${shade}: ${value};`);
-  }
-}
-function buildThemeCss(theme) {
-  const lines = [];
-  const semantic = theme.colors.semantic;
-  if (typeof semantic.primary === "string") {
-    lines.push(`--color-primary: ${semantic.primary};`);
-  } else if (semantic.primary) {
-    emitColorScale(lines, "primary", semantic.primary);
-  }
-  if (semantic.secondary) {
-    if (typeof semantic.secondary === "string") {
-      lines.push(`--color-secondary: ${semantic.secondary};`);
-    } else {
-      emitColorScale(lines, "secondary", semantic.secondary);
-    }
-  }
-  if (semantic.accent) {
-    if (typeof semantic.accent === "string") {
-      lines.push(`--color-accent: ${semantic.accent};`);
-    } else {
-      emitColorScale(lines, "accent", semantic.accent);
-    }
-  }
-  if (semantic.neutral) {
-    if (typeof semantic.neutral === "string") {
-      lines.push(`--color-neutral: ${semantic.neutral};`);
-    } else {
-      emitColorScale(lines, "neutral", semantic.neutral);
-    }
-  }
-  if (semantic.success) lines.push(`--color-success: ${semantic.success};`);
-  if (semantic.warning) lines.push(`--color-warning: ${semantic.warning};`);
-  if (semantic.danger) lines.push(`--color-danger: ${semantic.danger};`);
-  if (semantic.info) lines.push(`--color-info: ${semantic.info};`);
-  const surface = theme.colors.surface;
-  if (surface?.background) lines.push(`--color-background: ${surface.background};`);
-  if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);
-  if (surface?.elevated) lines.push(`--color-elevated: ${surface.elevated};`);
-  if (surface?.overlay) lines.push(`--color-overlay: ${surface.overlay};`);
-  const text = theme.colors.text;
-  if (text?.primary) lines.push(`--color-text-primary: ${text.primary};`);
-  if (text?.secondary) lines.push(`--color-text-secondary: ${text.secondary};`);
-  if (text?.disabled) lines.push(`--color-text-disabled: ${text.disabled};`);
-  if (text?.inverse) lines.push(`--color-text-inverse: ${text.inverse};`);
-  if (text?.link) lines.push(`--color-text-link: ${text.link};`);
-  const border = theme.colors.border;
-  if (border?.default) lines.push(`--color-border: ${border.default};`);
-  if (border?.hover) lines.push(`--color-border-hover: ${border.hover};`);
-  if (border?.focus) lines.push(`--color-border-focus: ${border.focus};`);
-  if (border?.divider) lines.push(`--color-divider: ${border.divider};`);
-  if (theme.colors.custom) {
-    for (const [key, value] of Object.entries(theme.colors.custom)) {
-      lines.push(`--color-${key}: ${value};`);
-    }
-  }
-  const typography = theme.typography;
-  if (typography?.families?.sans) lines.push(`--font-sans: ${typography.families.sans};`);
-  if (typography?.families?.serif) lines.push(`--font-serif: ${typography.families.serif};`);
-  if (typography?.families?.mono) lines.push(`--font-mono: ${typography.families.mono};`);
-  if (typography?.families?.display) lines.push(`--font-display: ${typography.families.display};`);
-  const radius = theme.radius;
-  if (radius?.none) lines.push(`--radius-none: ${radius.none};`);
-  if (radius?.sm) lines.push(`--radius-sm: ${radius.sm};`);
-  if (radius?.md) lines.push(`--radius-md: ${radius.md};`);
-  if (radius?.lg) lines.push(`--radius-lg: ${radius.lg};`);
-  if (radius?.xl) lines.push(`--radius-xl: ${radius.xl};`);
-  if (radius?.["2xl"]) lines.push(`--radius-2xl: ${radius["2xl"]};`);
-  if (radius?.full) lines.push(`--radius-full: ${radius.full};`);
-  if (theme.customVars) {
-    for (const [key, value] of Object.entries(theme.customVars)) {
-      lines.push(`${key}: ${value};`);
-    }
-  }
-  return lines.join("\n      ");
-}
-
-// 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/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";
 function getSizeClass(size) {
   const sizeMap = {
     xs: "max-w-sm",
@@ -659,20 +176,20 @@ function createLayoutBuilder(defaults) {
 function consentLayout(content, options) {
   const { clientName, clientIcon, userInfo, ...baseOptions } = options;
   const headerHtml = clientName ? `<div class="text-center mb-6">
-        ${clientIcon ? `<img src="${escapeHtml(clientIcon)}" alt="${escapeHtml(
+        ${clientIcon ? `<img src="${escapeHtml2(clientIcon)}" alt="${escapeHtml2(
     clientName
   )}" class="w-16 h-16 rounded-xl mx-auto mb-4">` : `<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-secondary text-white font-bold text-2xl mx-auto mb-4">
-              ${escapeHtml(clientName.charAt(0).toUpperCase())}
+              ${escapeHtml2(clientName.charAt(0).toUpperCase())}
             </div>`}
-        <h1 class="text-2xl font-bold text-text-primary">${escapeHtml(clientName)}</h1>
+        <h1 class="text-2xl font-bold text-text-primary">${escapeHtml2(clientName)}</h1>
       </div>` : "";
   const userInfoHtml = userInfo ? `<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg mb-6">
-        ${userInfo.avatar ? `<img src="${escapeHtml(userInfo.avatar)}" class="w-10 h-10 rounded-full">` : `<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-medium">
-              ${escapeHtml((userInfo.name || userInfo.email || "U").charAt(0).toUpperCase())}
+        ${userInfo.avatar ? `<img src="${escapeHtml2(userInfo.avatar)}" class="w-10 h-10 rounded-full">` : `<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-medium">
+              ${escapeHtml2((userInfo.name || userInfo.email || "U").charAt(0).toUpperCase())}
             </div>`}
         <div>
-          ${userInfo.name ? `<div class="font-medium text-text-primary">${escapeHtml(userInfo.name)}</div>` : ""}
-          ${userInfo.email ? `<div class="text-sm text-text-secondary">${escapeHtml(userInfo.email)}</div>` : ""}
+          ${userInfo.name ? `<div class="font-medium text-text-primary">${escapeHtml2(userInfo.name)}</div>` : ""}
+          ${userInfo.email ? `<div class="text-sm text-text-secondary">${escapeHtml2(userInfo.email)}</div>` : ""}
         </div>
       </div>` : "";
   const wrappedContent = `
@@ -708,15 +225,15 @@ function errorLayout(content, options) {
         </svg>
       </div>
 
-      ${errorCode ? `<p class="text-6xl font-bold text-danger mb-2">${escapeHtml(errorCode)}</p>` : ""}
-      <h1 class="text-2xl font-bold text-text-primary mb-4">${escapeHtml(errorTitle)}</h1>
-      ${errorMessage ? `<p class="text-text-secondary mb-8">${escapeHtml(errorMessage)}</p>` : ""}
+      ${errorCode ? `<p class="text-6xl font-bold text-danger mb-2">${escapeHtml2(errorCode)}</p>` : ""}
+      <h1 class="text-2xl font-bold text-text-primary mb-4">${escapeHtml2(errorTitle)}</h1>
+      ${errorMessage ? `<p class="text-text-secondary mb-8">${escapeHtml2(errorMessage)}</p>` : ""}
 
       ${content}
 
       <div class="flex gap-4 justify-center mt-8">
-        ${showRetry ? `<button onclick="${retryUrl ? `window.location.href='${escapeHtml(retryUrl)}'` : "window.location.reload()"}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">Try Again</button>` : ""}
-        ${showHome ? `<a href="${escapeHtml(
+        ${showRetry ? `<button onclick="${retryUrl ? `window.location.href='${escapeHtml2(retryUrl)}'` : "window.location.reload()"}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">Try Again</button>` : ""}
+        ${showHome ? `<a href="${escapeHtml2(
     homeUrl
   )}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-text-primary font-medium rounded-lg transition-colors">Go Home</a>` : ""}
       </div>
@@ -750,102 +267,58 @@ var errorLayoutBuilder = createLayoutBuilder({
   background: "solid"
 });
 
-// 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 } 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
@@ -938,7 +411,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",
@@ -953,24 +426,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}
@@ -1023,19 +496,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"/>
@@ -1047,18 +520,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">
@@ -1069,7 +542,7 @@ function permissionList(permissions, options = {}) {
 
 // libs/ui/src/components/form.ts
 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);
@@ -1125,7 +598,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"
@@ -1137,13 +610,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}
@@ -1180,30 +653,30 @@ function consentPage(options) {
   }) : "";
   const clientHeader = `
     <div class="text-center mb-6">
-      ${client.icon ? `<img src="${escapeHtml(client.icon)}" alt="${escapeHtml(
+      ${client.icon ? `<img src="${escapeHtml2(client.icon)}" alt="${escapeHtml2(
     client.name
   )}" class="w-16 h-16 rounded-xl mx-auto mb-4 shadow-md">` : `<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-secondary text-white font-bold text-2xl mx-auto mb-4 shadow-md">
-            ${escapeHtml(client.name.charAt(0).toUpperCase())}
+            ${escapeHtml2(client.name.charAt(0).toUpperCase())}
           </div>`}
       <h1 class="text-xl font-bold text-text-primary">
         ${client.verified ? `<span class="inline-flex items-center gap-1">
-          ${escapeHtml(client.name)}
+          ${escapeHtml2(client.name)}
           <svg class="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
           </svg>
-        </span>` : escapeHtml(client.name)}
+        </span>` : escapeHtml2(client.name)}
       </h1>
       <p class="text-text-secondary mt-1">wants to access your account</p>
     </div>
   `;
   const userSection = user ? `
     <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-lg mb-6">
-      ${user.avatar ? `<img src="${escapeHtml(user.avatar)}" class="w-12 h-12 rounded-full">` : `<div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-semibold text-lg">
-            ${escapeHtml((user.name || user.email || "U").charAt(0).toUpperCase())}
+      ${user.avatar ? `<img src="${escapeHtml2(user.avatar)}" class="w-12 h-12 rounded-full">` : `<div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-semibold text-lg">
+            ${escapeHtml2((user.name || user.email || "U").charAt(0).toUpperCase())}
           </div>`}
       <div class="flex-1 min-w-0">
-        ${user.name ? `<div class="font-medium text-text-primary truncate">${escapeHtml(user.name)}</div>` : ""}
-        ${user.email ? `<div class="text-sm text-text-secondary truncate">${escapeHtml(user.email)}</div>` : ""}
+        ${user.name ? `<div class="font-medium text-text-primary truncate">${escapeHtml2(user.name)}</div>` : ""}
+        ${user.email ? `<div class="text-sm text-text-secondary truncate">${escapeHtml2(user.email)}</div>` : ""}
       </div>
       <a href="/login?prompt=select_account" class="text-sm text-primary hover:text-primary/80">
         Switch account
@@ -1212,7 +685,7 @@ function consentPage(options) {
   ` : "";
   const permissionsSection = `
     <div class="mb-6">
-      <h3 class="font-medium text-text-primary mb-3">This will allow ${escapeHtml(client.name)} to:</h3>
+      <h3 class="font-medium text-text-primary mb-3">This will allow ${escapeHtml2(client.name)} to:</h3>
       ${permissionList(permissions, {
     checkable: allowScopeSelection,
     inputName: "scope"
@@ -1233,12 +706,12 @@ function consentPage(options) {
   ].filter(Boolean).join("\n");
   const actionsHtml = `
     <div class="flex gap-3 pt-4">
-      <form action="${escapeHtml(denyUrl || approveUrl)}" method="post" class="flex-1">
+      <form action="${escapeHtml2(denyUrl || approveUrl)}" method="post" class="flex-1">
         ${hiddenFields}
         <input type="hidden" name="action" value="deny">
         ${outlineButton(denyText, { type: "submit", fullWidth: true })}
       </form>
-      <form action="${escapeHtml(approveUrl)}" method="post" class="flex-1">
+      <form action="${escapeHtml2(approveUrl)}" method="post" class="flex-1">
         ${hiddenFields}
         <input type="hidden" name="action" value="approve">
         ${primaryButton(approveText, { type: "submit", fullWidth: true })}
@@ -1247,13 +720,13 @@ function consentPage(options) {
   `;
   const linksHtml = client.privacyUrl || client.termsUrl || client.websiteUrl ? `
     <div class="text-center text-xs text-text-secondary mt-6 space-x-3">
-      ${client.websiteUrl ? `<a href="${escapeHtml(
+      ${client.websiteUrl ? `<a href="${escapeHtml2(
     client.websiteUrl
   )}" target="_blank" rel="noopener" class="hover:text-primary">Website</a>` : ""}
-      ${client.privacyUrl ? `<a href="${escapeHtml(
+      ${client.privacyUrl ? `<a href="${escapeHtml2(
     client.privacyUrl
   )}" target="_blank" rel="noopener" class="hover:text-primary">Privacy Policy</a>` : ""}
-      ${client.termsUrl ? `<a href="${escapeHtml(
+      ${client.termsUrl ? `<a href="${escapeHtml2(
     client.termsUrl
   )}" target="_blank" rel="noopener" class="hover:text-primary">Terms of Service</a>` : ""}
     </div>
@@ -1280,7 +753,7 @@ function consentSuccessPage(options) {
   const redirectScript = redirectUrl && autoRedirectDelay > 0 ? `
     <script>
       setTimeout(() => {
-        window.location.href = '${escapeHtml(redirectUrl)}';
+        window.location.href = '${escapeHtml2(redirectUrl)}';
       }, ${autoRedirectDelay});
     </script>
   ` : "";
@@ -1293,9 +766,9 @@ function consentSuccessPage(options) {
       </div>
       <h1 class="text-2xl font-bold text-text-primary mb-2">Authorization Successful</h1>
       <p class="text-text-secondary mb-4">
-        You have authorized <strong>${escapeHtml(client.name)}</strong> to access your account.
+        You have authorized <strong>${escapeHtml2(client.name)}</strong> to access your account.
       </p>
-      ${redirectUrl ? `<p class="text-sm text-text-secondary">Redirecting you back to ${escapeHtml(client.name)}...</p>` : ""}
+      ${redirectUrl ? `<p class="text-sm text-text-secondary">Redirecting you back to ${escapeHtml2(client.name)}...</p>` : ""}
     </div>
     ${redirectScript}
   `;
@@ -1317,13 +790,13 @@ function consentDeniedPage(options) {
       </div>
       <h1 class="text-2xl font-bold text-text-primary mb-2">Authorization Denied</h1>
       <p class="text-text-secondary mb-6">
-        You denied <strong>${escapeHtml(client.name)}</strong> access to your account.
+        You denied <strong>${escapeHtml2(client.name)}</strong> access to your account.
       </p>
       ${redirectUrl ? `
-        <a href="${escapeHtml(
+        <a href="${escapeHtml2(
     redirectUrl
   )}" class="inline-block px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
-          Return to ${escapeHtml(client.name)}
+          Return to ${escapeHtml2(client.name)}
         </a>
       ` : ""}
     </div>
@@ -1359,20 +832,20 @@ function errorPage(options) {
       ${details ? `
         <div class="p-4 bg-gray-50 rounded-lg text-sm text-text-secondary mb-4">
           <strong class="text-text-primary">Details:</strong>
-          <p class="mt-1">${escapeHtml(details)}</p>
+          <p class="mt-1">${escapeHtml2(details)}</p>
         </div>
       ` : ""}
       ${showStack && stack ? `
         <details class="p-4 bg-gray-900 rounded-lg text-sm">
           <summary class="text-gray-300 cursor-pointer hover:text-white">Stack Trace</summary>
-          <pre class="mt-2 text-xs text-gray-400 overflow-x-auto whitespace-pre-wrap">${escapeHtml(stack)}</pre>
+          <pre class="mt-2 text-xs text-gray-400 overflow-x-auto whitespace-pre-wrap">${escapeHtml2(stack)}</pre>
         </details>
       ` : ""}
     </div>
   ` : "";
   const requestIdHtml = requestId ? `
     <p class="text-xs text-text-secondary mt-6">
-      Request ID: <code class="px-1.5 py-0.5 bg-gray-100 rounded text-xs">${escapeHtml(requestId)}</code>
+      Request ID: <code class="px-1.5 py-0.5 bg-gray-100 rounded text-xs">${escapeHtml2(requestId)}</code>
     </p>
   ` : "";
   const content = `
@@ -1420,7 +893,7 @@ function unauthorizedPage(options = {}) {
     showHome: false,
     actions: `
       <div class="flex justify-center mt-8">
-        <a href="${escapeHtml(
+        <a href="${escapeHtml2(
       loginUrl
     )}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
           Sign In
@@ -1441,7 +914,7 @@ function serverErrorPage(options = {}) {
 }
 function maintenancePage(options = {}) {
   const { estimatedTime, ...rest } = options;
-  const timeMessage = estimatedTime ? `We expect to be back by ${escapeHtml(estimatedTime)}.` : "We'll be back shortly.";
+  const timeMessage = estimatedTime ? `We expect to be back by ${escapeHtml2(estimatedTime)}.` : "We'll be back shortly.";
   return errorPage({
     code: 503,
     title: "Under Maintenance",
@@ -1484,7 +957,7 @@ function sessionExpiredPage(options = {}) {
     showHome: false,
     actions: `
       <div class="flex justify-center mt-8">
-        <a href="${escapeHtml(
+        <a href="${escapeHtml2(
       loginUrl
     )}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
           Sign In Again
@@ -1527,12 +1000,12 @@ function oauthErrorPage(options) {
     }
   };
   const errorInfo = errorCode && errorMessages[errorCode] ? errorMessages[errorCode] : { title: "Authorization Error", message: errorDescription || "An error occurred during authorization." };
-  const clientMessage = clientName ? ` while connecting to ${escapeHtml(clientName)}` : "";
+  const clientMessage = clientName ? ` while connecting to ${escapeHtml2(clientName)}` : "";
   const redirectAction = redirectUri ? `
-    <a href="${escapeHtml(
+    <a href="${escapeHtml2(
     redirectUri
   )}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-text-primary font-medium rounded-lg transition-colors">
-      Return to ${clientName ? escapeHtml(clientName) : "Application"}
+      Return to ${clientName ? escapeHtml2(clientName) : "Application"}
     </a>
   ` : "";
   return errorPage({