@frontmcp/ui 0.5.0 → 0.6.0

package/esm/pages/index.js

@@ -0,0 +1,1563 @@
+// 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
+function getSizeClass(size) {
+  const sizeMap = {
+    xs: "max-w-sm",
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-xl",
+    xl: "max-w-2xl",
+    "2xl": "max-w-3xl",
+    "3xl": "max-w-4xl",
+    full: "max-w-full"
+  };
+  return sizeMap[size];
+}
+function getAlignmentClasses(alignment) {
+  const alignMap = {
+    center: "min-h-screen flex items-center justify-center",
+    top: "min-h-screen flex flex-col items-center pt-12",
+    start: "min-h-screen"
+  };
+  return alignMap[alignment];
+}
+function getBackgroundClasses(background, theme) {
+  switch (background) {
+    case "gradient":
+      return "bg-gradient-to-br from-primary to-secondary";
+    case "pattern":
+      return 'bg-surface bg-[url("data:image/svg+xml,...")]';
+    // Pattern would be defined
+    case "solid":
+      return "bg-background";
+    case "none":
+    default:
+      return "";
+  }
+}
+function buildMetaTags(options) {
+  const tags = [];
+  if (options.description) {
+    tags.push(`<meta name="description" content="${escapeHtml(options.description)}">`);
+  }
+  if (options.og) {
+    if (options.og.title) {
+      tags.push(`<meta property="og:title" content="${escapeHtml(options.og.title)}">`);
+    }
+    if (options.og.description) {
+      tags.push(`<meta property="og:description" content="${escapeHtml(options.og.description)}">`);
+    }
+    if (options.og.image) {
+      tags.push(`<meta property="og:image" content="${escapeHtml(options.og.image)}">`);
+    }
+    if (options.og.type) {
+      tags.push(`<meta property="og:type" content="${escapeHtml(options.og.type)}">`);
+    }
+  }
+  if (options.favicon) {
+    tags.push(`<link rel="icon" href="${escapeHtml(options.favicon)}">`);
+  }
+  return tags.join("\n  ");
+}
+function buildBodyAttrs(attrs) {
+  if (!attrs) return "";
+  return Object.entries(attrs).map(([key, value]) => `${key}="${escapeHtml(value)}"`).join(" ");
+}
+function baseLayout(content, options) {
+  const {
+    title,
+    pageType = "custom",
+    size = "md",
+    alignment = "center",
+    background = "solid",
+    platform = OPENAI_PLATFORM,
+    theme: themeOverrides,
+    includeHtmx,
+    includeAlpine = false,
+    includeIcons = false,
+    headExtra = "",
+    bodyAttrs,
+    bodyClass = "",
+    titleSuffix = "FrontMCP"
+  } = options;
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const shouldIncludeHtmx = includeHtmx ?? platform.supportsHtmx;
+  const useCdn = canUseCdn(platform);
+  const useInline = needsInlineScripts(platform);
+  const fontPreconnect = useCdn ? buildFontPreconnect() : "";
+  const fontStylesheets = useCdn ? buildFontStylesheets({ inter: true }) : "";
+  const scripts = buildCdnScripts({
+    tailwind: platform.supportsTailwind,
+    htmx: shouldIncludeHtmx,
+    alpine: includeAlpine,
+    icons: includeIcons,
+    inline: useInline
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = platform.supportsTailwind ? `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>` : "";
+  const sizeClass = getSizeClass(size);
+  const alignmentClasses = getAlignmentClasses(alignment);
+  const backgroundClasses = getBackgroundClasses(background, theme);
+  const allBodyClasses = [backgroundClasses, "font-sans antialiased", bodyClass].filter(Boolean).join(" ");
+  const metaTags = buildMetaTags(options);
+  const bodyAttrStr = buildBodyAttrs(bodyAttrs);
+  const wrappedContent = alignment === "center" ? `<div class="${alignmentClasses} p-4">
+    <div class="w-full ${sizeClass}">
+      ${content}
+    </div>
+  </div>` : `<div class="${alignmentClasses}">
+    <div class="w-full ${sizeClass} mx-auto px-4 py-8">
+      ${content}
+    </div>
+  </div>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}${titleSuffix ? ` - ${escapeHtml(titleSuffix)}` : ""}</title>
+  ${metaTags}
+
+  <!-- Fonts -->
+  ${fontPreconnect}
+  ${fontStylesheets}
+
+  <!-- Tailwind CSS -->
+  ${scripts}
+  ${styleBlock}
+
+  ${headExtra}
+</head>
+<body class="${escapeHtml(allBodyClasses)}"${bodyAttrStr ? ` ${bodyAttrStr}` : ""}>
+  ${wrappedContent}
+</body>
+</html>`;
+}
+function createLayoutBuilder(defaults) {
+  return (content, options = {}) => {
+    let mergedTheme = DEFAULT_THEME;
+    if (defaults.theme) {
+      mergedTheme = mergeThemes(mergedTheme, defaults.theme);
+    }
+    if (options.theme) {
+      mergedTheme = mergeThemes(mergedTheme, options.theme);
+    }
+    const merged = {
+      ...defaults,
+      ...options,
+      theme: mergedTheme
+    };
+    if (!merged.title) {
+      throw new Error("createLayoutBuilder: title is required either in defaults or options");
+    }
+    return baseLayout(content, merged);
+  };
+}
+
+// libs/ui/src/layouts/presets.ts
+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(
+    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())}
+            </div>`}
+        <h1 class="text-2xl font-bold text-text-primary">${escapeHtml(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())}
+            </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>` : ""}
+        </div>
+      </div>` : "";
+  const wrappedContent = `
+    ${headerHtml}
+    ${userInfoHtml}
+    ${content}
+  `;
+  return baseLayout(wrappedContent, {
+    ...baseOptions,
+    pageType: "consent",
+    size: baseOptions.size ?? "lg",
+    alignment: "top",
+    background: "solid"
+  });
+}
+function errorLayout(content, options) {
+  const {
+    errorCode,
+    errorTitle = "Something went wrong",
+    errorMessage,
+    showRetry = true,
+    retryUrl,
+    showHome = true,
+    homeUrl = "/",
+    ...baseOptions
+  } = options;
+  const errorHtml = `
+    <div class="text-center">
+      <!-- Error icon -->
+      <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-danger/10 mb-6">
+        <svg class="w-10 h-10 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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>
+      </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>` : ""}
+
+      ${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(
+    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>
+    </div>
+  `;
+  return baseLayout(errorHtml, {
+    ...baseOptions,
+    pageType: "error",
+    size: "sm",
+    alignment: "center",
+    background: "solid",
+    title: baseOptions.title ?? errorTitle
+  });
+}
+var authLayoutBuilder = createLayoutBuilder({
+  pageType: "auth",
+  size: "sm",
+  alignment: "center",
+  background: "gradient"
+});
+var consentLayoutBuilder = createLayoutBuilder({
+  pageType: "consent",
+  size: "lg",
+  alignment: "top",
+  background: "solid"
+});
+var errorLayoutBuilder = createLayoutBuilder({
+  pageType: "error",
+  size: "sm",
+  alignment: "center",
+  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.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({
+  /** Button variant */
+  variant: ButtonVariantSchema.optional(),
+  /** Button size */
+  size: ButtonSizeSchema.optional(),
+  /** Button type attribute */
+  type: z2.enum(["button", "submit", "reset"]).optional(),
+  /** Disabled state */
+  disabled: z2.boolean().optional(),
+  /** Loading state */
+  loading: z2.boolean().optional(),
+  /** Full width */
+  fullWidth: z2.boolean().optional(),
+  /** Icon before text (HTML string) */
+  iconBefore: z2.string().optional(),
+  /** Icon after text (HTML string) */
+  iconAfter: z2.string().optional(),
+  /** Icon only (no text) */
+  iconOnly: z2.boolean().optional(),
+  /** Additional CSS classes */
+  className: z2.string().optional(),
+  /** Button ID */
+  id: z2.string().optional(),
+  /** Name attribute */
+  name: z2.string().optional(),
+  /** Value attribute */
+  value: z2.string().optional(),
+  /** Click handler (URL for links) */
+  href: z2.string().optional(),
+  /** Open in new tab */
+  target: z2.enum(["_blank", "_self"]).optional(),
+  /** Data attributes */
+  data: z2.record(z2.string(), z2.string()).optional(),
+  /** ARIA label */
+  ariaLabel: z2.string().optional()
+}).strict();
+var ButtonGroupOptionsSchema = z2.object({
+  /** Attach buttons visually */
+  attached: z2.boolean().optional(),
+  /** Direction */
+  direction: z2.enum(["horizontal", "vertical"]).optional(),
+  /** Gap between buttons */
+  gap: z2.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: z2.string().optional()
+}).strict();
+
+// libs/ui/src/components/button.ts
+function getVariantClasses(variant) {
+  const variants = {
+    primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
+    secondary: "bg-secondary hover:bg-secondary/90 text-white shadow-sm",
+    outline: "border-2 border-primary text-primary hover:bg-primary/10",
+    ghost: "text-text-primary hover:bg-gray-100",
+    danger: "bg-danger hover:bg-danger/90 text-white shadow-sm",
+    success: "bg-success hover:bg-success/90 text-white shadow-sm",
+    link: "text-primary hover:text-primary/80 hover:underline"
+  };
+  return variants[variant];
+}
+function getSizeClasses(size, iconOnly) {
+  if (iconOnly) {
+    const iconSizes = {
+      xs: "p-1.5",
+      sm: "p-2",
+      md: "p-2.5",
+      lg: "p-3",
+      xl: "p-4"
+    };
+    return iconSizes[size];
+  }
+  const sizes = {
+    xs: "px-2.5 py-1.5 text-xs",
+    sm: "px-3 py-2 text-sm",
+    md: "px-4 py-2.5 text-sm",
+    lg: "px-5 py-3 text-base",
+    xl: "px-6 py-3.5 text-lg"
+  };
+  return sizes[size];
+}
+function sanitizeDataKey(key) {
+  const sanitized = key.toLowerCase().replace(/[^a-z0-9_-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  if (!sanitized) {
+    console.warn(`[frontmcp/ui] Dropping invalid data-* key: "${key}"`);
+    return null;
+  }
+  return sanitized;
+}
+var loadingSpinner = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>`;
+function isValidHrefProtocol(href) {
+  const trimmed = href.trim().toLowerCase();
+  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, {
+    schema: ButtonOptionsSchema,
+    componentName: "button"
+  });
+  if (!validation.success) {
+    return validation.error;
+  }
+  const validatedOptions = validation.data;
+  const {
+    variant = "primary",
+    size = "md",
+    type = "button",
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    iconBefore,
+    iconAfter,
+    iconOnly = false,
+    className = "",
+    id,
+    name,
+    value,
+    href,
+    target,
+    data,
+    ariaLabel
+  } = validatedOptions;
+  if (!iconOnly && !text.trim()) {
+    console.warn("[frontmcp/ui] Button has empty text. Consider providing text or using iconOnly with ariaLabel.");
+  }
+  if (iconOnly && !ariaLabel && !text.trim()) {
+    console.warn(
+      "[frontmcp/ui] iconOnly button requires non-empty text or ariaLabel for accessibility; control will have no label."
+    );
+  }
+  if (href && !isValidHrefProtocol(href)) {
+    console.warn(`[frontmcp/ui] Button href contains potentially dangerous protocol: "${href.slice(0, 20)}..."`);
+  }
+  const variantClasses = getVariantClasses(variant);
+  const sizeClasses = getSizeClasses(size, iconOnly);
+  const safeClassName = className ? escapeHtml(className) : "";
+  const baseClasses = [
+    "inline-flex items-center justify-center",
+    "font-medium",
+    "rounded-lg",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2",
+    disabled || loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+    fullWidth ? "w-full" : "",
+    variantClasses,
+    sizeClasses,
+    safeClassName
+  ].filter(Boolean).join(" ");
+  const dataAttrs = data ? Object.entries(data).map(([key, val]) => {
+    const safeKey = sanitizeDataKey(key);
+    return safeKey ? `data-${safeKey}="${escapeHtml(val)}"` : "";
+  }).filter(Boolean).join(" ") : "";
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const nameAttr = name ? `name="${escapeHtml(name)}"` : "";
+  const valueAttr = value ? `value="${escapeHtml(value)}"` : "";
+  const disabledAttr = disabled || loading ? "disabled" : "";
+  const targetAttr = target ? `target="${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 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 contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
+  if (href && !disabled && !loading && isValidHrefProtocol(href)) {
+    return `<a href="${escapeHtml(
+      href
+    )}" class="${baseClasses}" ${idAttr} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
+      ${contentHtml}
+    </a>`;
+  }
+  return `<button type="${type}" class="${baseClasses}" ${idAttr} ${nameAttr} ${valueAttr} ${disabledAttr} ${dataAttrs} ${ariaLabelAttr}>
+    ${contentHtml}
+  </button>`;
+}
+var primaryButton = (text, opts) => button(text, { ...opts, variant: "primary" });
+var outlineButton = (text, opts) => button(text, { ...opts, variant: "outline" });
+
+// libs/ui/src/components/list.ts
+var permissionIcons = {
+  read: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+  </svg>`,
+  write: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+  </svg>`,
+  delete: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+  </svg>`,
+  profile: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+  </svg>`,
+  email: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+  </svg>`,
+  settings: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+  </svg>`,
+  default: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+  </svg>`
+};
+function getPermissionIcon(scope, customIcon) {
+  if (customIcon) return customIcon;
+  const scopeLower = scope.toLowerCase();
+  if (scopeLower.includes("read")) return permissionIcons["read"];
+  if (scopeLower.includes("write") || scopeLower.includes("create") || scopeLower.includes("update"))
+    return permissionIcons["write"];
+  if (scopeLower.includes("delete")) return permissionIcons["delete"];
+  if (scopeLower.includes("profile")) return permissionIcons["profile"];
+  if (scopeLower.includes("email")) return permissionIcons["email"];
+  if (scopeLower.includes("settings") || scopeLower.includes("config")) return permissionIcons["settings"];
+  return permissionIcons["default"];
+}
+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 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)}"
+          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}"
+        >` : `<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"/>
+          </svg>
+        </div>`;
+    return `<div class="flex items-start gap-3 p-3 border ${sensitiveClasses} rounded-lg">
+      <div class="flex-shrink-0 mt-0.5 text-text-secondary">
+        ${icon}
+      </div>
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center">
+          <span class="font-medium text-text-primary">${escapeHtml(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>` : ""}
+      </div>
+      <div class="flex-shrink-0">
+        ${checkboxHtml}
+      </div>
+    </div>`;
+  }).join("\n");
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  return `<div class="permission-list ${className}" ${idAttr}>
+    ${titleHtml}
+    <div class="space-y-2">
+      ${itemsHtml}
+    </div>
+  </div>`;
+}
+
+// libs/ui/src/components/form.ts
+function hiddenInput(name, value) {
+  return `<input type="hidden" name="${escapeHtml(name)}" value="${escapeHtml(value)}">`;
+}
+function csrfInput(token) {
+  return hiddenInput("_csrf", token);
+}
+
+// libs/ui/src/components/alert.ts
+var alertIcons = {
+  info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  success: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  warning: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>`,
+  danger: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  neutral: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`
+};
+function getVariantClasses2(variant) {
+  const variants = {
+    info: {
+      container: "bg-blue-50 border-blue-200 text-blue-800",
+      icon: "text-blue-500"
+    },
+    success: {
+      container: "bg-success/10 border-success/30 text-success",
+      icon: "text-success"
+    },
+    warning: {
+      container: "bg-warning/10 border-warning/30 text-warning",
+      icon: "text-warning"
+    },
+    danger: {
+      container: "bg-danger/10 border-danger/30 text-danger",
+      icon: "text-danger"
+    },
+    neutral: {
+      container: "bg-gray-50 border-gray-200 text-gray-800",
+      icon: "text-gray-500"
+    }
+  };
+  return variants[variant];
+}
+function alert(message, options = {}) {
+  const { variant = "info", title, showIcon = true, icon, dismissible = false, className = "", id, actions } = options;
+  const variantClasses = getVariantClasses2(variant);
+  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  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 dismissHtml = dismissible ? `<button
+        type="button"
+        class="flex-shrink-0 ml-auto -mr-1 -mt-1 p-1 rounded hover:bg-black/5 transition-colors"
+        onclick="this.closest('.alert').remove()"
+        aria-label="Dismiss"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>` : "";
+  const actionsHtml = actions ? `<div class="mt-3">${actions}</div>` : "";
+  const idAttr = id ? `id="${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>
+        ${actionsHtml}
+      </div>
+      ${dismissHtml}
+    </div>
+  </div>`;
+}
+
+// libs/ui/src/pages/consent.ts
+function consentPage(options) {
+  const {
+    client,
+    user,
+    permissions,
+    approveUrl,
+    denyUrl,
+    csrfToken,
+    state,
+    redirectUri,
+    responseType,
+    nonce,
+    codeChallenge,
+    codeChallengeMethod,
+    error,
+    layout = {},
+    warningMessage,
+    allowScopeSelection = false,
+    approveText = "Allow",
+    denyText = "Deny"
+  } = options;
+  const errorAlert = error ? alert(error, { variant: "danger", dismissible: true }) : "";
+  const unverifiedWarning = !client.verified ? alert(warningMessage || "This application has not been verified. Only authorize applications you trust.", {
+    variant: "warning",
+    title: "Unverified Application"
+  }) : "";
+  const clientHeader = `
+    <div class="text-center mb-6">
+      ${client.icon ? `<img src="${escapeHtml(client.icon)}" alt="${escapeHtml(
+    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())}
+          </div>`}
+      <h1 class="text-xl font-bold text-text-primary">
+        ${client.verified ? `<span class="inline-flex items-center gap-1">
+          ${escapeHtml(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)}
+      </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())}
+          </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>` : ""}
+      </div>
+      <a href="/login?prompt=select_account" class="text-sm text-primary hover:text-primary/80">
+        Switch account
+      </a>
+    </div>
+  ` : "";
+  const permissionsSection = `
+    <div class="mb-6">
+      <h3 class="font-medium text-text-primary mb-3">This will allow ${escapeHtml(client.name)} to:</h3>
+      ${permissionList(permissions, {
+    checkable: allowScopeSelection,
+    inputName: "scope"
+  })}
+    </div>
+  `;
+  const hiddenFields = [
+    csrfToken ? csrfInput(csrfToken) : "",
+    state ? hiddenInput("state", state) : "",
+    redirectUri ? hiddenInput("redirect_uri", redirectUri) : "",
+    responseType ? hiddenInput("response_type", responseType) : "",
+    nonce ? hiddenInput("nonce", nonce) : "",
+    codeChallenge ? hiddenInput("code_challenge", codeChallenge) : "",
+    codeChallengeMethod ? hiddenInput("code_challenge_method", codeChallengeMethod) : "",
+    hiddenInput("client_id", client.clientId),
+    // Include all scopes if not selectable
+    !allowScopeSelection ? permissions.map((p) => hiddenInput("scope[]", p.scope)).join("\n") : ""
+  ].filter(Boolean).join("\n");
+  const actionsHtml = `
+    <div class="flex gap-3 pt-4">
+      <form action="${escapeHtml(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">
+        ${hiddenFields}
+        <input type="hidden" name="action" value="approve">
+        ${primaryButton(approveText, { type: "submit", fullWidth: true })}
+      </form>
+    </div>
+  `;
+  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
+  )}" target="_blank" rel="noopener" class="hover:text-primary">Website</a>` : ""}
+      ${client.privacyUrl ? `<a href="${escapeHtml(
+    client.privacyUrl
+  )}" target="_blank" rel="noopener" class="hover:text-primary">Privacy Policy</a>` : ""}
+      ${client.termsUrl ? `<a href="${escapeHtml(
+    client.termsUrl
+  )}" target="_blank" rel="noopener" class="hover:text-primary">Terms of Service</a>` : ""}
+    </div>
+  ` : "";
+  const content = `
+    ${errorAlert}
+    ${unverifiedWarning}
+    ${clientHeader}
+    ${userSection}
+    ${permissionsSection}
+    ${actionsHtml}
+    ${linksHtml}
+  `;
+  return consentLayout(content, {
+    title: `Authorize ${client.name}`,
+    clientName: client.name,
+    clientIcon: client.icon,
+    userInfo: user,
+    ...layout
+  });
+}
+function consentSuccessPage(options) {
+  const { client, redirectUrl, autoRedirectDelay = 3e3, layout = {} } = options;
+  const redirectScript = redirectUrl && autoRedirectDelay > 0 ? `
+    <script>
+      setTimeout(() => {
+        window.location.href = '${escapeHtml(redirectUrl)}';
+      }, ${autoRedirectDelay});
+    </script>
+  ` : "";
+  const content = `
+    <div class="text-center">
+      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success/10 mb-6">
+        <svg class="w-8 h-8 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+        </svg>
+      </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.
+      </p>
+      ${redirectUrl ? `<p class="text-sm text-text-secondary">Redirecting you back to ${escapeHtml(client.name)}...</p>` : ""}
+    </div>
+    ${redirectScript}
+  `;
+  return consentLayout(content, {
+    title: "Authorization Successful",
+    clientName: client.name,
+    clientIcon: client.icon,
+    ...layout
+  });
+}
+function consentDeniedPage(options) {
+  const { client, redirectUrl, layout = {} } = options;
+  const content = `
+    <div class="text-center">
+      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-6">
+        <svg class="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </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.
+      </p>
+      ${redirectUrl ? `
+        <a href="${escapeHtml(
+    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)}
+        </a>
+      ` : ""}
+    </div>
+  `;
+  return consentLayout(content, {
+    title: "Authorization Denied",
+    clientName: client.name,
+    clientIcon: client.icon,
+    ...layout
+  });
+}
+
+// libs/ui/src/pages/error.ts
+function errorPage(options) {
+  const {
+    code,
+    title = "Something went wrong",
+    message,
+    details,
+    showStack = false,
+    stack,
+    showRetry = true,
+    retryUrl,
+    showHome = true,
+    homeUrl = "/",
+    showBack = false,
+    actions,
+    layout = {},
+    requestId
+  } = options;
+  const detailsHtml = details || showStack && stack ? `
+    <div class="mt-8 text-left">
+      ${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>
+        </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>
+        </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>
+    </p>
+  ` : "";
+  const content = `
+    ${detailsHtml}
+    ${actions || ""}
+    ${requestIdHtml}
+  `;
+  return errorLayout(content, {
+    title: `${code ? `Error ${code} - ` : ""}${title}`,
+    errorCode: code?.toString(),
+    errorTitle: title,
+    errorMessage: message,
+    showRetry,
+    retryUrl,
+    showHome,
+    homeUrl,
+    ...layout
+  });
+}
+function notFoundPage(options = {}) {
+  return errorPage({
+    code: 404,
+    title: "Page Not Found",
+    message: "The page you're looking for doesn't exist or has been moved.",
+    showRetry: false,
+    ...options
+  });
+}
+function forbiddenPage(options = {}) {
+  return errorPage({
+    code: 403,
+    title: "Access Denied",
+    message: "You don't have permission to access this resource.",
+    showRetry: false,
+    ...options
+  });
+}
+function unauthorizedPage(options = {}) {
+  const { loginUrl = "/login", ...rest } = options;
+  return errorPage({
+    code: 401,
+    title: "Authentication Required",
+    message: "Please sign in to access this resource.",
+    showRetry: false,
+    showHome: false,
+    actions: `
+      <div class="flex justify-center mt-8">
+        <a href="${escapeHtml(
+      loginUrl
+    )}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
+          Sign In
+        </a>
+      </div>
+    `,
+    ...rest
+  });
+}
+function serverErrorPage(options = {}) {
+  return errorPage({
+    code: 500,
+    title: "Server Error",
+    message: "We're having trouble processing your request. Please try again later.",
+    showRetry: true,
+    ...options
+  });
+}
+function maintenancePage(options = {}) {
+  const { estimatedTime, ...rest } = options;
+  const timeMessage = estimatedTime ? `We expect to be back by ${escapeHtml(estimatedTime)}.` : "We'll be back shortly.";
+  return errorPage({
+    code: 503,
+    title: "Under Maintenance",
+    message: `We're currently performing scheduled maintenance. ${timeMessage}`,
+    showRetry: true,
+    showHome: false,
+    ...rest
+  });
+}
+function rateLimitPage(options = {}) {
+  const { retryAfter, ...rest } = options;
+  const retryMessage = retryAfter ? `Please wait ${retryAfter} seconds before trying again.` : "Please wait a moment before trying again.";
+  return errorPage({
+    code: 429,
+    title: "Too Many Requests",
+    message: `You've made too many requests. ${retryMessage}`,
+    showRetry: true,
+    showHome: true,
+    ...rest
+  });
+}
+function offlinePage(options = {}) {
+  return errorPage({
+    title: "You're Offline",
+    message: "Please check your internet connection and try again.",
+    showRetry: true,
+    showHome: false,
+    ...options,
+    layout: {
+      ...options.layout
+    }
+  });
+}
+function sessionExpiredPage(options = {}) {
+  const { loginUrl = "/login", ...rest } = options;
+  return errorPage({
+    title: "Session Expired",
+    message: "Your session has expired. Please sign in again to continue.",
+    showRetry: false,
+    showHome: false,
+    actions: `
+      <div class="flex justify-center mt-8">
+        <a href="${escapeHtml(
+      loginUrl
+    )}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
+          Sign In Again
+        </a>
+      </div>
+    `,
+    ...rest
+  });
+}
+function oauthErrorPage(options) {
+  const { errorCode, errorDescription, redirectUri, clientName, ...rest } = options;
+  const errorMessages = {
+    invalid_request: {
+      title: "Invalid Request",
+      message: "The authorization request is missing required parameters or is malformed."
+    },
+    unauthorized_client: {
+      title: "Unauthorized Client",
+      message: "The client is not authorized to request an authorization code."
+    },
+    access_denied: {
+      title: "Access Denied",
+      message: "The resource owner denied the authorization request."
+    },
+    unsupported_response_type: {
+      title: "Unsupported Response Type",
+      message: "The authorization server does not support the requested response type."
+    },
+    invalid_scope: {
+      title: "Invalid Scope",
+      message: "The requested scope is invalid, unknown, or malformed."
+    },
+    server_error: {
+      title: "Server Error",
+      message: "The authorization server encountered an unexpected error."
+    },
+    temporarily_unavailable: {
+      title: "Temporarily Unavailable",
+      message: "The authorization server is temporarily unavailable. Please try again later."
+    }
+  };
+  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 redirectAction = redirectUri ? `
+    <a href="${escapeHtml(
+    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"}
+    </a>
+  ` : "";
+  return errorPage({
+    title: errorInfo.title,
+    message: `${errorInfo.message}${clientMessage}`,
+    details: errorCode && errorDescription ? `Error: ${errorCode}
+${errorDescription}` : void 0,
+    showRetry: errorCode === "server_error" || errorCode === "temporarily_unavailable",
+    showHome: true,
+    actions: redirectAction ? `<div class="flex justify-center gap-4 mt-8">${redirectAction}</div>` : void 0,
+    ...rest
+  });
+}
+export {
+  consentDeniedPage,
+  consentPage,
+  consentSuccessPage,
+  errorPage,
+  forbiddenPage,
+  maintenancePage,
+  notFoundPage,
+  oauthErrorPage,
+  offlinePage,
+  rateLimitPage,
+  serverErrorPage,
+  sessionExpiredPage,
+  unauthorizedPage
+};