@frontmcp/ui 0.6.1 → 0.6.2

package/esm/pages/index.js

@@ -1,1036 +0,0 @@
-// 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",
-    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="${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">
-              ${escapeHtml2(clientName.charAt(0).toUpperCase())}
-            </div>`}
-        <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="${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">${escapeHtml2(userInfo.name)}</div>` : ""}
-          ${userInfo.email ? `<div class="text-sm text-text-secondary">${escapeHtml2(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">${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='${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>
-    </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/components/button.ts
-import { validateOptions } from "@frontmcp/uipack/validation";
-
-// libs/ui/src/components/button.schema.ts
-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: z.enum(["button", "submit", "reset"]).optional(),
-  /** Disabled state */
-  disabled: z.boolean().optional(),
-  /** Loading state */
-  loading: z.boolean().optional(),
-  /** Full width */
-  fullWidth: z.boolean().optional(),
-  /** Icon before text (HTML string) */
-  iconBefore: z.string().optional(),
-  /** Icon after text (HTML string) */
-  iconAfter: z.string().optional(),
-  /** Icon only (no text) */
-  iconOnly: z.boolean().optional(),
-  /** Additional CSS classes */
-  className: z.string().optional(),
-  /** Button ID */
-  id: z.string().optional(),
-  /** Name attribute */
-  name: z.string().optional(),
-  /** Value attribute */
-  value: z.string().optional(),
-  /** Click handler (URL for links) */
-  href: z.string().optional(),
-  /** Open in new tab */
-  target: z.enum(["_blank", "_self"]).optional(),
-  /** Data attributes */
-  data: z.record(z.string(), z.string()).optional(),
-  /** ARIA label */
-  ariaLabel: z.string().optional()
-}).strict();
-var ButtonGroupOptionsSchema = z.object({
-  /** Attach buttons visually */
-  attached: z.boolean().optional(),
-  /** Direction */
-  direction: z.enum(["horizontal", "vertical"]).optional(),
-  /** Gap between buttons */
-  gap: z.enum(["sm", "md", "lg"]).optional(),
-  /** Additional CSS classes */
-  className: z.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 ? escapeHtml2(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}="${escapeHtml2(val)}"` : "";
-  }).filter(Boolean).join(" ") : "";
-  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="${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="${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 ? "" : escapeHtml2(text);
-  const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
-  if (href && !disabled && !loading && isValidHrefProtocol(href)) {
-    return `<a href="${escapeHtml2(
-      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">${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="${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 ? 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"/>
-          </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">${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">${escapeHtml2(perm.description)}</p>` : ""}
-      </div>
-      <div class="flex-shrink-0">
-        ${checkboxHtml}
-      </div>
-    </div>`;
-  }).join("\n");
-  const idAttr = id ? `id="${escapeHtml2(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="${escapeHtml2(name)}" value="${escapeHtml2(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">${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"
-        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="${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" : ""}">${escapeHtml2(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="${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">
-            ${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">
-          ${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>` : 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="${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">${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
-      </a>
-    </div>
-  ` : "";
-  const permissionsSection = `
-    <div class="mb-6">
-      <h3 class="font-medium text-text-primary mb-3">This will allow ${escapeHtml2(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="${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="${escapeHtml2(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="${escapeHtml2(
-    client.websiteUrl
-  )}" target="_blank" rel="noopener" class="hover:text-primary">Website</a>` : ""}
-      ${client.privacyUrl ? `<a href="${escapeHtml2(
-    client.privacyUrl
-  )}" target="_blank" rel="noopener" class="hover:text-primary">Privacy Policy</a>` : ""}
-      ${client.termsUrl ? `<a href="${escapeHtml2(
-    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 = '${escapeHtml2(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>${escapeHtml2(client.name)}</strong> to access your account.
-      </p>
-      ${redirectUrl ? `<p class="text-sm text-text-secondary">Redirecting you back to ${escapeHtml2(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>${escapeHtml2(client.name)}</strong> access to your account.
-      </p>
-      ${redirectUrl ? `
-        <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 ${escapeHtml2(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">${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">${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">${escapeHtml2(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="${escapeHtml2(
-      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 ${escapeHtml2(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="${escapeHtml2(
-      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 ${escapeHtml2(clientName)}` : "";
-  const redirectAction = redirectUri ? `
-    <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 ? escapeHtml2(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
-};