@frontmcp/sdk 0.6.0 → 0.6.2

package/src/auth/ui/base-layout.js

@@ -1,279 +0,0 @@
-"use strict";
-/**
- * Base Layout for Server-Rendered Pages
- *
- * Provides a consistent HTML shell with all CDN resources pre-configured:
- * - Tailwind CSS v4 (Browser CDN) - Utility-first CSS framework with @theme support
- * - Google Fonts (Inter) - Modern UI typography
- *
- * No build step required - all resources loaded from CDN at runtime.
- *
- * @example
- * ```typescript
- * // Basic usage
- * const html = baseLayout('<div>content</div>', { title: 'Page' });
- *
- * // With custom theme
- * const html = baseLayout('<div>content</div>', {
- *   title: 'Page',
- *   theme: {
- *     colors: {
- *       primary: '#3b82f6',
- *       'primary-dark': '#2563eb',
- *     },
- *   },
- * });
- * ```
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.authLayout = exports.DEFAULT_THEME = exports.CDN = void 0;
-exports.escapeHtml = escapeHtml;
-exports.baseLayout = baseLayout;
-exports.createLayout = createLayout;
-exports.centeredCardLayout = centeredCardLayout;
-exports.wideLayout = wideLayout;
-exports.extraWideLayout = extraWideLayout;
-// ============================================
-// CDN Configuration
-// ============================================
-/**
- * CDN URLs and versions - centralized for easy updates
- */
-exports.CDN = {
-    /** Tailwind CSS v4 Browser CDN - generates styles on-the-fly with @theme support */
-    tailwind: 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4',
-    /** Google Fonts - Inter for modern UI */
-    fonts: {
-        preconnect: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],
-        stylesheet: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
-    },
-};
-/**
- * Default theme with FrontMCP branding
- */
-exports.DEFAULT_THEME = {
-    colors: {
-        primary: '#3b82f6', // blue-500
-        'primary-dark': '#2563eb', // blue-600
-        secondary: '#8b5cf6', // violet-500
-        accent: '#06b6d4', // cyan-500
-        success: '#22c55e', // green-500
-        warning: '#f59e0b', // amber-500
-        danger: '#ef4444', // red-500
-    },
-    fonts: {
-        sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    },
-};
-// ============================================
-// Utility Functions
-// ============================================
-/**
- * Escape HTML special characters to prevent XSS
- * Per OWASP guidelines, escapes: & < > " ' /
- *
- * @param str - The string to escape
- * @returns The escaped string safe for HTML content and attributes
- *
- * @example
- * escapeHtml('<script>alert("xss")</script>')
- * // => '&lt;script&gt;alert(&quot;xss&quot;)&lt;&#x2F;script&gt;'
- */
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;')
-        .replace(/\//g, '&#x2F;');
-}
-/**
- * Build the @theme CSS block from theme configuration
- */
-function buildThemeCss(theme) {
-    const lines = [];
-    // Add color variables
-    if (theme.colors) {
-        for (const [key, value] of Object.entries(theme.colors)) {
-            if (value) {
-                lines.push(`--color-${key}: ${value};`);
-            }
-        }
-    }
-    // Add font variables
-    if (theme.fonts) {
-        for (const [key, value] of Object.entries(theme.fonts)) {
-            if (value) {
-                lines.push(`--font-${key}: ${value};`);
-            }
-        }
-    }
-    // Add custom variables
-    if (theme.customVars) {
-        lines.push(theme.customVars);
-    }
-    return lines.join('\n        ');
-}
-// ============================================
-// Layout Builder
-// ============================================
-/**
- * Build the complete HTML document with CDN resources
- *
- * @param content - The page content (HTML string)
- * @param options - Layout configuration options
- * @returns Complete HTML document string
- *
- * @example
- * ```typescript
- * const html = baseLayout('<div>My content</div>', {
- *   title: 'Sign In',
- *   description: 'Sign in to your account',
- *   theme: {
- *     colors: {
- *       primary: '#ff6b6b',
- *     },
- *   },
- * });
- * ```
- */
-function baseLayout(content, options) {
-    const { title, description, includeTailwind = true, includeFonts = true, headExtra = '', bodyClass = 'bg-gray-50 min-h-screen font-sans antialiased', theme, } = options;
-    // Merge theme with defaults
-    const mergedTheme = {
-        colors: { ...exports.DEFAULT_THEME.colors, ...theme?.colors },
-        fonts: { ...exports.DEFAULT_THEME.fonts, ...theme?.fonts },
-        customVars: theme?.customVars,
-        customCss: theme?.customCss,
-    };
-    // Build font preconnect links
-    const fontPreconnect = includeFonts
-        ? exports.CDN.fonts.preconnect
-            .map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? ' crossorigin' : ''}>`)
-            .join('\n  ')
-        : '';
-    // Build font stylesheet
-    const fontStylesheet = includeFonts ? `<link href="${exports.CDN.fonts.stylesheet}" rel="stylesheet">` : '';
-    // Build Tailwind v4 script and theme styles
-    const themeCss = buildThemeCss(mergedTheme);
-    const customCss = mergedTheme.customCss || '';
-    const tailwindBlock = includeTailwind
-        ? `<script src="${exports.CDN.tailwind}"></script>
-  <style type="text/tailwindcss">
-    @theme {
-      ${themeCss}
-    }
-    ${customCss}
-  </style>`
-        : '';
-    // Build meta description
-    const metaDescription = description ? `<meta name="description" content="${escapeHtml(description)}">` : '';
-    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)} - FrontMCP</title>
-  ${metaDescription}
-
-  <!-- Google Fonts CDN - Inter (modern UI font) -->
-  ${fontPreconnect}
-  ${fontStylesheet}
-
-  <!-- Tailwind CSS v4 Browser CDN with @theme support -->
-  ${tailwindBlock}
-  ${headExtra}
-</head>
-<body class="${escapeHtml(bodyClass)}">
-  ${content}
-</body>
-</html>`;
-}
-/**
- * Create a layout wrapper function with preset options
- *
- * @param defaultOptions - Default options to apply to all pages
- * @returns A function that wraps content with the layout
- *
- * @example
- * ```typescript
- * const brandedLayout = createLayout({
- *   theme: {
- *     colors: {
- *       primary: '#ff6b6b',
- *       'primary-dark': '#ee5a5a',
- *     },
- *   },
- * });
- *
- * const html = brandedLayout('<div>Content</div>', { title: 'Page' });
- * ```
- */
-function createLayout(defaultOptions) {
-    return (content, options) => {
-        // Deep merge themes
-        const mergedTheme = defaultOptions.theme || options.theme
-            ? {
-                colors: { ...defaultOptions.theme?.colors, ...options.theme?.colors },
-                fonts: { ...defaultOptions.theme?.fonts, ...options.theme?.fonts },
-                customVars: options.theme?.customVars ?? defaultOptions.theme?.customVars,
-                customCss: options.theme?.customCss ?? defaultOptions.theme?.customCss,
-            }
-            : undefined;
-        return baseLayout(content, {
-            ...defaultOptions,
-            ...options,
-            theme: mergedTheme,
-        });
-    };
-}
-// ============================================
-// Pre-configured Layouts
-// ============================================
-/**
- * Default auth layout with standard styling
- */
-exports.authLayout = createLayout({
-    bodyClass: 'bg-gray-50 min-h-screen font-sans antialiased',
-});
-/**
- * Centered card layout for login/auth pages
- */
-function centeredCardLayout(content, options) {
-    const wrappedContent = `
-  <div class="min-h-screen flex items-center justify-center p-4">
-    <div class="w-full max-w-md">
-      ${content}
-    </div>
-  </div>`;
-    return baseLayout(wrappedContent, {
-        ...options,
-        bodyClass: 'bg-gradient-to-br from-primary to-secondary min-h-screen font-sans antialiased',
-    });
-}
-/**
- * Wide layout for consent/selection pages
- */
-function wideLayout(content, options) {
-    const wrappedContent = `
-  <div class="min-h-screen py-8 px-4">
-    <div class="max-w-2xl mx-auto">
-      ${content}
-    </div>
-  </div>`;
-    return baseLayout(wrappedContent, options);
-}
-/**
- * Extra wide layout for tool selection pages
- */
-function extraWideLayout(content, options) {
-    const wrappedContent = `
-  <div class="min-h-screen py-8 px-4">
-    <div class="max-w-3xl mx-auto">
-      ${content}
-    </div>
-  </div>`;
-    return baseLayout(wrappedContent, options);
-}
-//# sourceMappingURL=base-layout.js.map

package/src/auth/ui/base-layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-layout.js","sourceRoot":"","sources":["../../../../src/auth/ui/base-layout.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Base Layout for Server-Rendered Pages\n *\n * Provides a consistent HTML shell with all CDN resources pre-configured:\n * - Tailwind CSS v4 (Browser CDN) - Utility-first CSS framework with @theme support\n * - Google Fonts (Inter) - Modern UI typography\n *\n * No build step required - all resources loaded from CDN at runtime.\n *\n * @example\n * ```typescript\n * // Basic usage\n * const html = baseLayout('<div>content</div>', { title: 'Page' });\n *\n * // With custom theme\n * const html = baseLayout('<div>content</div>', {\n *   title: 'Page',\n *   theme: {\n *     colors: {\n *       primary: '#3b82f6',\n *       'primary-dark': '#2563eb',\n *     },\n *   },\n * });\n * ```\n */\n\n// ============================================\n// CDN Configuration\n// ============================================\n\n/**\n * CDN URLs and versions - centralized for easy updates\n */\nexport const CDN = {\n  /** Tailwind CSS v4 Browser CDN - generates styles on-the-fly with @theme support */\n  tailwind: 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4',\n\n  /** Google Fonts - Inter for modern UI */\n  fonts: {\n    preconnect: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],\n    stylesheet: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',\n  },\n} as const;\n\n// ============================================\n// Theme Configuration\n// ============================================\n\n/**\n * Theme color configuration\n * Keys become CSS custom properties: --color-{key}\n */\nexport interface ThemeColors {\n  /** Primary brand color */\n  primary?: string;\n  /** Darker primary for hover states */\n  'primary-dark'?: string;\n  /** Secondary brand color */\n  secondary?: string;\n  /** Accent color for highlights */\n  accent?: string;\n  /** Success state color */\n  success?: string;\n  /** Warning state color */\n  warning?: string;\n  /** Error/danger state color */\n  danger?: string;\n  /** Custom colors (any additional colors) */\n  [key: string]: string | undefined;\n}\n\n/**\n * Theme font configuration\n * Keys become CSS custom properties: --font-{key}\n */\nexport interface ThemeFonts {\n  /** Sans-serif font family */\n  sans?: string;\n  /** Serif font family */\n  serif?: string;\n  /** Monospace font family */\n  mono?: string;\n  /** Custom fonts */\n  [key: string]: string | undefined;\n}\n\n/**\n * Complete theme configuration for FrontMCP UI\n */\nexport interface ThemeConfig {\n  /** Custom colors */\n  colors?: ThemeColors;\n  /** Custom fonts */\n  fonts?: ThemeFonts;\n  /** Additional custom CSS variables (raw @theme content) */\n  customVars?: string;\n  /** Additional custom CSS (outside @theme) */\n  customCss?: string;\n}\n\n/**\n * Default theme with FrontMCP branding\n */\nexport const DEFAULT_THEME: ThemeConfig = {\n  colors: {\n    primary: '#3b82f6', // blue-500\n    'primary-dark': '#2563eb', // blue-600\n    secondary: '#8b5cf6', // violet-500\n    accent: '#06b6d4', // cyan-500\n    success: '#22c55e', // green-500\n    warning: '#f59e0b', // amber-500\n    danger: '#ef4444', // red-500\n  },\n  fonts: {\n    sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n  },\n};\n\n// ============================================\n// Layout Options\n// ============================================\n\n/**\n * Options for the base layout\n */\nexport interface BaseLayoutOptions {\n  /** Page title (will be suffixed with \" - FrontMCP\") */\n  title: string;\n\n  /** Optional description for meta tag */\n  description?: string;\n\n  /** Include Tailwind CSS (default: true) */\n  includeTailwind?: boolean;\n\n  /** Include Google Fonts (default: true) */\n  includeFonts?: boolean;\n\n  /** Additional head content (scripts, styles, meta tags) */\n  headExtra?: string;\n\n  /** Body classes (default: 'bg-gray-50 min-h-screen font-sans antialiased') */\n  bodyClass?: string;\n\n  /** Theme configuration - colors, fonts, and custom CSS */\n  theme?: ThemeConfig;\n}\n\n// ============================================\n// Utility Functions\n// ============================================\n\n/**\n * Escape HTML special characters to prevent XSS\n * Per OWASP guidelines, escapes: & < > \" ' /\n *\n * @param str - The string to escape\n * @returns The escaped string safe for HTML content and attributes\n *\n * @example\n * escapeHtml('<script>alert(\"xss\")</script>')\n * // => '&lt;script&gt;alert(&quot;xss&quot;)&lt;&#x2F;script&gt;'\n */\nexport function escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;')\n    .replace(/\\//g, '&#x2F;');\n}\n\n/**\n * Build the @theme CSS block from theme configuration\n */\nfunction buildThemeCss(theme: ThemeConfig): string {\n  const lines: string[] = [];\n\n  // Add color variables\n  if (theme.colors) {\n    for (const [key, value] of Object.entries(theme.colors)) {\n      if (value) {\n        lines.push(`--color-${key}: ${value};`);\n      }\n    }\n  }\n\n  // Add font variables\n  if (theme.fonts) {\n    for (const [key, value] of Object.entries(theme.fonts)) {\n      if (value) {\n        lines.push(`--font-${key}: ${value};`);\n      }\n    }\n  }\n\n  // Add custom variables\n  if (theme.customVars) {\n    lines.push(theme.customVars);\n  }\n\n  return lines.join('\\n        ');\n}\n\n// ============================================\n// Layout Builder\n// ============================================\n\n/**\n * Build the complete HTML document with CDN resources\n *\n * @param content - The page content (HTML string)\n * @param options - Layout configuration options\n * @returns Complete HTML document string\n *\n * @example\n * ```typescript\n * const html = baseLayout('<div>My content</div>', {\n *   title: 'Sign In',\n *   description: 'Sign in to your account',\n *   theme: {\n *     colors: {\n *       primary: '#ff6b6b',\n *     },\n *   },\n * });\n * ```\n */\nexport function baseLayout(content: string, options: BaseLayoutOptions): string {\n  const {\n    title,\n    description,\n    includeTailwind = true,\n    includeFonts = true,\n    headExtra = '',\n    bodyClass = 'bg-gray-50 min-h-screen font-sans antialiased',\n    theme,\n  } = options;\n\n  // Merge theme with defaults\n  const mergedTheme: ThemeConfig = {\n    colors: { ...DEFAULT_THEME.colors, ...theme?.colors },\n    fonts: { ...DEFAULT_THEME.fonts, ...theme?.fonts },\n    customVars: theme?.customVars,\n    customCss: theme?.customCss,\n  };\n\n  // Build font preconnect links\n  const fontPreconnect = includeFonts\n    ? CDN.fonts.preconnect\n        .map((url, i) => `<link rel=\"preconnect\" href=\"${url}\"${i > 0 ? ' crossorigin' : ''}>`)\n        .join('\\n  ')\n    : '';\n\n  // Build font stylesheet\n  const fontStylesheet = includeFonts ? `<link href=\"${CDN.fonts.stylesheet}\" rel=\"stylesheet\">` : '';\n\n  // Build Tailwind v4 script and theme styles\n  const themeCss = buildThemeCss(mergedTheme);\n  const customCss = mergedTheme.customCss || '';\n\n  const tailwindBlock = includeTailwind\n    ? `<script src=\"${CDN.tailwind}\"></script>\n  <style type=\"text/tailwindcss\">\n    @theme {\n      ${themeCss}\n    }\n    ${customCss}\n  </style>`\n    : '';\n\n  // Build meta description\n  const metaDescription = description ? `<meta name=\"description\" content=\"${escapeHtml(description)}\">` : '';\n\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${escapeHtml(title)} - FrontMCP</title>\n  ${metaDescription}\n\n  <!-- Google Fonts CDN - Inter (modern UI font) -->\n  ${fontPreconnect}\n  ${fontStylesheet}\n\n  <!-- Tailwind CSS v4 Browser CDN with @theme support -->\n  ${tailwindBlock}\n  ${headExtra}\n</head>\n<body class=\"${escapeHtml(bodyClass)}\">\n  ${content}\n</body>\n</html>`;\n}\n\n/**\n * Create a layout wrapper function with preset options\n *\n * @param defaultOptions - Default options to apply to all pages\n * @returns A function that wraps content with the layout\n *\n * @example\n * ```typescript\n * const brandedLayout = createLayout({\n *   theme: {\n *     colors: {\n *       primary: '#ff6b6b',\n *       'primary-dark': '#ee5a5a',\n *     },\n *   },\n * });\n *\n * const html = brandedLayout('<div>Content</div>', { title: 'Page' });\n * ```\n */\nexport function createLayout(\n  defaultOptions: Partial<BaseLayoutOptions>,\n): (content: string, options: BaseLayoutOptions) => string {\n  return (content: string, options: BaseLayoutOptions) => {\n    // Deep merge themes\n    const mergedTheme: ThemeConfig | undefined =\n      defaultOptions.theme || options.theme\n        ? {\n            colors: { ...defaultOptions.theme?.colors, ...options.theme?.colors },\n            fonts: { ...defaultOptions.theme?.fonts, ...options.theme?.fonts },\n            customVars: options.theme?.customVars ?? defaultOptions.theme?.customVars,\n            customCss: options.theme?.customCss ?? defaultOptions.theme?.customCss,\n          }\n        : undefined;\n\n    return baseLayout(content, {\n      ...defaultOptions,\n      ...options,\n      theme: mergedTheme,\n    });\n  };\n}\n\n// ============================================\n// Pre-configured Layouts\n// ============================================\n\n/**\n * Default auth layout with standard styling\n */\nexport const authLayout = createLayout({\n  bodyClass: 'bg-gray-50 min-h-screen font-sans antialiased',\n});\n\n/**\n * Centered card layout for login/auth pages\n */\nexport function centeredCardLayout(content: string, options: BaseLayoutOptions): string {\n  const wrappedContent = `\n  <div class=\"min-h-screen flex items-center justify-center p-4\">\n    <div class=\"w-full max-w-md\">\n      ${content}\n    </div>\n  </div>`;\n\n  return baseLayout(wrappedContent, {\n    ...options,\n    bodyClass: 'bg-gradient-to-br from-primary to-secondary min-h-screen font-sans antialiased',\n  });\n}\n\n/**\n * Wide layout for consent/selection pages\n */\nexport function wideLayout(content: string, options: BaseLayoutOptions): string {\n  const wrappedContent = `\n  <div class=\"min-h-screen py-8 px-4\">\n    <div class=\"max-w-2xl mx-auto\">\n      ${content}\n    </div>\n  </div>`;\n\n  return baseLayout(wrappedContent, options);\n}\n\n/**\n * Extra wide layout for tool selection pages\n */\nexport function extraWideLayout(content: string, options: BaseLayoutOptions): string {\n  const wrappedContent = `\n  <div class=\"min-h-screen py-8 px-4\">\n    <div class=\"max-w-3xl mx-auto\">\n      ${content}\n    </div>\n  </div>`;\n\n  return baseLayout(wrappedContent, options);\n}\n"]}

package/src/auth/ui/index.js

@@ -1,34 +0,0 @@
-"use strict";
-/**
- * Auth UI Module
- *
- * Server-rendered UI templates for OAuth flows with Tailwind CSS (CDN)
- * and Google Fonts.
- *
- * No build step required - all rendering is done at runtime.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderToHtml = exports.buildErrorPage = exports.buildLoginPage = exports.buildToolConsentPage = exports.buildFederatedLoginPage = exports.buildIncrementalAuthPage = exports.buildConsentPage = exports.escapeHtml = exports.extraWideLayout = exports.wideLayout = exports.centeredCardLayout = exports.authLayout = exports.createLayout = exports.baseLayout = exports.DEFAULT_THEME = exports.CDN = void 0;
-// Base layout exports
-var base_layout_1 = require("./base-layout");
-Object.defineProperty(exports, "CDN", { enumerable: true, get: function () { return base_layout_1.CDN; } });
-Object.defineProperty(exports, "DEFAULT_THEME", { enumerable: true, get: function () { return base_layout_1.DEFAULT_THEME; } });
-Object.defineProperty(exports, "baseLayout", { enumerable: true, get: function () { return base_layout_1.baseLayout; } });
-Object.defineProperty(exports, "createLayout", { enumerable: true, get: function () { return base_layout_1.createLayout; } });
-Object.defineProperty(exports, "authLayout", { enumerable: true, get: function () { return base_layout_1.authLayout; } });
-Object.defineProperty(exports, "centeredCardLayout", { enumerable: true, get: function () { return base_layout_1.centeredCardLayout; } });
-Object.defineProperty(exports, "wideLayout", { enumerable: true, get: function () { return base_layout_1.wideLayout; } });
-Object.defineProperty(exports, "extraWideLayout", { enumerable: true, get: function () { return base_layout_1.extraWideLayout; } });
-Object.defineProperty(exports, "escapeHtml", { enumerable: true, get: function () { return base_layout_1.escapeHtml; } });
-// Template builder exports
-var templates_1 = require("./templates");
-// Template builders
-Object.defineProperty(exports, "buildConsentPage", { enumerable: true, get: function () { return templates_1.buildConsentPage; } });
-Object.defineProperty(exports, "buildIncrementalAuthPage", { enumerable: true, get: function () { return templates_1.buildIncrementalAuthPage; } });
-Object.defineProperty(exports, "buildFederatedLoginPage", { enumerable: true, get: function () { return templates_1.buildFederatedLoginPage; } });
-Object.defineProperty(exports, "buildToolConsentPage", { enumerable: true, get: function () { return templates_1.buildToolConsentPage; } });
-Object.defineProperty(exports, "buildLoginPage", { enumerable: true, get: function () { return templates_1.buildLoginPage; } });
-Object.defineProperty(exports, "buildErrorPage", { enumerable: true, get: function () { return templates_1.buildErrorPage; } });
-// Utility functions
-Object.defineProperty(exports, "renderToHtml", { enumerable: true, get: function () { return templates_1.renderToHtml; } });
-//# sourceMappingURL=index.js.map

package/src/auth/ui/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/auth/ui/index.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;;AAEH,sBAAsB;AACtB,6CAcuB;AAbrB,kGAAA,GAAG,OAAA;AACH,4GAAA,aAAa,OAAA;AAKb,yGAAA,UAAU,OAAA;AACV,2GAAA,YAAY,OAAA;AACZ,yGAAA,UAAU,OAAA;AACV,iHAAA,kBAAkB,OAAA;AAClB,yGAAA,UAAU,OAAA;AACV,8GAAA,eAAe,OAAA;AACf,yGAAA,UAAU,OAAA;AAGZ,2BAA2B;AAC3B,yCAcqB;AATnB,oBAAoB;AACpB,6GAAA,gBAAgB,OAAA;AAChB,qHAAA,wBAAwB,OAAA;AACxB,oHAAA,uBAAuB,OAAA;AACvB,iHAAA,oBAAoB,OAAA;AACpB,2GAAA,cAAc,OAAA;AACd,2GAAA,cAAc,OAAA;AACd,oBAAoB;AACpB,yGAAA,YAAY,OAAA","sourcesContent":["/**\n * Auth UI Module\n *\n * Server-rendered UI templates for OAuth flows with Tailwind CSS (CDN)\n * and Google Fonts.\n *\n * No build step required - all rendering is done at runtime.\n */\n\n// Base layout exports\nexport {\n  CDN,\n  DEFAULT_THEME,\n  type ThemeColors,\n  type ThemeFonts,\n  type ThemeConfig,\n  type BaseLayoutOptions,\n  baseLayout,\n  createLayout,\n  authLayout,\n  centeredCardLayout,\n  wideLayout,\n  extraWideLayout,\n  escapeHtml,\n} from './base-layout';\n\n// Template builder exports\nexport {\n  // Types\n  type AppAuthCard,\n  type ProviderCard,\n  type ToolCard,\n  // Template builders\n  buildConsentPage,\n  buildIncrementalAuthPage,\n  buildFederatedLoginPage,\n  buildToolConsentPage,\n  buildLoginPage,\n  buildErrorPage,\n  // Utility functions\n  renderToHtml,\n} from './templates';\n"]}