@frontmcp/sdk 0.4.0 → 0.5.0

package/src/auth/ui/base-layout.d.ts

@@ -0,0 +1,188 @@
+/**
+ * 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
+ * - HTMX (CDN) - Progressive enhancement for interactivity
+ * - 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',
+ *     },
+ *   },
+ * });
+ * ```
+ */
+/**
+ * CDN URLs and versions - centralized for easy updates
+ */
+export declare const CDN: {
+    /** Tailwind CSS v4 Browser CDN - generates styles on-the-fly with @theme support */
+    readonly tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4";
+    /** HTMX - lightweight JS for AJAX, CSS Transitions, WebSockets */
+    readonly htmx: {
+        readonly url: "https://unpkg.com/htmx.org@1.9.10";
+        readonly integrity: "sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC";
+    };
+    /** Google Fonts - Inter for modern UI */
+    readonly fonts: {
+        readonly preconnect: readonly ["https://fonts.googleapis.com", "https://fonts.gstatic.com"];
+        readonly stylesheet: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
+    };
+};
+/**
+ * Theme color configuration
+ * Keys become CSS custom properties: --color-{key}
+ */
+export interface ThemeColors {
+    /** Primary brand color */
+    primary?: string;
+    /** Darker primary for hover states */
+    'primary-dark'?: string;
+    /** Secondary brand color */
+    secondary?: string;
+    /** Accent color for highlights */
+    accent?: string;
+    /** Success state color */
+    success?: string;
+    /** Warning state color */
+    warning?: string;
+    /** Error/danger state color */
+    danger?: string;
+    /** Custom colors (any additional colors) */
+    [key: string]: string | undefined;
+}
+/**
+ * Theme font configuration
+ * Keys become CSS custom properties: --font-{key}
+ */
+export interface ThemeFonts {
+    /** Sans-serif font family */
+    sans?: string;
+    /** Serif font family */
+    serif?: string;
+    /** Monospace font family */
+    mono?: string;
+    /** Custom fonts */
+    [key: string]: string | undefined;
+}
+/**
+ * Complete theme configuration for FrontMCP UI
+ */
+export interface ThemeConfig {
+    /** Custom colors */
+    colors?: ThemeColors;
+    /** Custom fonts */
+    fonts?: ThemeFonts;
+    /** Additional custom CSS variables (raw @theme content) */
+    customVars?: string;
+    /** Additional custom CSS (outside @theme) */
+    customCss?: string;
+}
+/**
+ * Default theme with FrontMCP branding
+ */
+export declare const DEFAULT_THEME: ThemeConfig;
+/**
+ * Options for the base layout
+ */
+export interface BaseLayoutOptions {
+    /** Page title (will be suffixed with " - FrontMCP") */
+    title: string;
+    /** Optional description for meta tag */
+    description?: string;
+    /** Include HTMX script (default: true) */
+    includeHtmx?: boolean;
+    /** Include Tailwind CSS (default: true) */
+    includeTailwind?: boolean;
+    /** Include Google Fonts (default: true) */
+    includeFonts?: boolean;
+    /** Additional head content (scripts, styles, meta tags) */
+    headExtra?: string;
+    /** Body classes (default: 'bg-gray-50 min-h-screen font-sans antialiased') */
+    bodyClass?: string;
+    /** Theme configuration - colors, fonts, and custom CSS */
+    theme?: ThemeConfig;
+}
+/**
+ * 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;'
+ */
+export declare function escapeHtml(str: string): string;
+/**
+ * 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',
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export declare function baseLayout(content: string, options: BaseLayoutOptions): string;
+/**
+ * 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' });
+ * ```
+ */
+export declare function createLayout(defaultOptions: Partial<BaseLayoutOptions>): (content: string, options: BaseLayoutOptions) => string;
+/**
+ * Default auth layout with standard styling
+ */
+export declare const authLayout: (content: string, options: BaseLayoutOptions) => string;
+/**
+ * Centered card layout for login/auth pages
+ */
+export declare function centeredCardLayout(content: string, options: BaseLayoutOptions): string;
+/**
+ * Wide layout for consent/selection pages
+ */
+export declare function wideLayout(content: string, options: BaseLayoutOptions): string;
+/**
+ * Extra wide layout for tool selection pages
+ */
+export declare function extraWideLayout(content: string, options: BaseLayoutOptions): string;

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

@@ -0,0 +1,292 @@
+"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
+ * - HTMX (CDN) - Progressive enhancement for interactivity
+ * - 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',
+    /** HTMX - lightweight JS for AJAX, CSS Transitions, WebSockets */
+    htmx: {
+        url: 'https://unpkg.com/htmx.org@1.9.10',
+        integrity: 'sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC',
+    },
+    /** 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, includeHtmx = true, 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 HTMX script
+    const htmxScript = includeHtmx
+        ? `<script src="${exports.CDN.htmx.url}" integrity="${exports.CDN.htmx.integrity}" crossorigin="anonymous"></script>`
+        : '';
+    // 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}
+
+  <!-- HTMX CDN - progressive enhancement (~14KB gzipped) -->
+  ${htmxScript}
+  ${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

@@ -0,0 +1 @@
+{"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 * - HTMX (CDN) - Progressive enhancement for interactivity\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  /** HTMX - lightweight JS for AJAX, CSS Transitions, WebSockets */\n  htmx: {\n    url: 'https://unpkg.com/htmx.org@1.9.10',\n    integrity: 'sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC',\n  },\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 HTMX script (default: true) */\n  includeHtmx?: boolean;\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    includeHtmx = true,\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 HTMX script\n  const htmxScript = includeHtmx\n    ? `<script src=\"${CDN.htmx.url}\" integrity=\"${CDN.htmx.integrity}\" crossorigin=\"anonymous\"></script>`\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\n  <!-- HTMX CDN - progressive enhancement (~14KB gzipped) -->\n  ${htmxScript}\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/htmx-templates.d.ts

@@ -0,0 +1,135 @@
+/**
+ * HTMX Template Builders for OAuth UI
+ *
+ * Server-side HTML rendering with HTMX for interactivity.
+ * No build step required - pure runtime rendering with Tailwind CSS CDN.
+ *
+ * Features:
+ * - OAuth consent page with multiple apps
+ * - Incremental authorization page for single app
+ * - Federated login page for multi-provider selection
+ * - All pages use Tailwind CSS from CDN (no build required)
+ * - Google Fonts (Inter) for modern typography
+ * - HTMX for progressive enhancement (~14KB)
+ *
+ * Uses base-layout.ts for consistent HTML shell with CDN resources.
+ */
+import { escapeHtml as baseEscapeHtml } from './base-layout';
+/**
+ * App information for authorization cards
+ */
+export interface AppAuthCard {
+    /** App identifier */
+    appId: string;
+    /** Display name */
+    appName: string;
+    /** App description */
+    description?: string;
+    /** Icon URL (optional, will use initials fallback) */
+    iconUrl?: string;
+    /** Scopes required by this app */
+    requiredScopes?: string[];
+}
+/**
+ * Provider information for federated login
+ */
+export interface ProviderCard {
+    /** Provider identifier */
+    providerId: string;
+    /** Display name */
+    providerName: string;
+    /** Provider URL (for remote providers) */
+    providerUrl?: string;
+    /** Auth mode */
+    mode: string;
+    /** App IDs associated with this provider */
+    appIds: string[];
+    /** Whether this is the parent/primary provider */
+    isPrimary?: boolean;
+}
+/**
+ * Tool information for consent page
+ */
+export interface ToolCard {
+    /** Tool identifier */
+    toolId: string;
+    /** Display name */
+    toolName: string;
+    /** Tool description */
+    description?: string;
+    /** Parent app ID */
+    appId: string;
+    /** Parent app name */
+    appName: string;
+}
+/**
+ * Escape HTML special characters
+ * Re-exported from base-layout for convenience
+ */
+export declare const escapeHtml: typeof baseEscapeHtml;
+/**
+ * Build OAuth consent page with HTMX + Tailwind
+ * Shows all apps at once with Authorize/Skip buttons
+ */
+export declare function buildConsentPage(params: {
+    apps: AppAuthCard[];
+    clientName: string;
+    pendingAuthId: string;
+    csrfToken: string;
+    callbackPath: string;
+}): string;
+/**
+ * Build incremental auth page (single app) with HTMX + Tailwind
+ * Used when a tool requires authorization for a skipped app
+ */
+export declare function buildIncrementalAuthPage(params: {
+    app: AppAuthCard;
+    toolId: string;
+    sessionHint: string;
+    callbackPath: string;
+}): string;
+/**
+ * Build federated login page for multi-provider selection
+ */
+export declare function buildFederatedLoginPage(params: {
+    providers: ProviderCard[];
+    clientName: string;
+    pendingAuthId: string;
+    csrfToken: string;
+    callbackPath: string;
+}): string;
+/**
+ * Build consent page for tool selection
+ */
+export declare function buildToolConsentPage(params: {
+    tools: ToolCard[];
+    clientName: string;
+    pendingAuthId: string;
+    csrfToken: string;
+    callbackPath: string;
+    userName?: string;
+    userEmail?: string;
+}): string;
+/**
+ * Build simple login page
+ */
+export declare function buildLoginPage(params: {
+    clientName: string;
+    scope: string;
+    pendingAuthId: string;
+    callbackPath: string;
+}): string;
+/**
+ * Build error page
+ */
+export declare function buildErrorPage(params: {
+    error: string;
+    description: string;
+}): string;
+/**
+ * Simple wrapper for compatibility - just returns the HTML string
+ * (HTMX templates are already complete HTML documents)
+ */
+export declare function renderToHtml(html: string, _options?: {
+    title?: string;
+}): string;