@frontmcp/sdk 0.4.0 → 0.5.0

package/src/auth/ui/htmx-templates.js

@@ -0,0 +1,433 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.escapeHtml = void 0;
+exports.buildConsentPage = buildConsentPage;
+exports.buildIncrementalAuthPage = buildIncrementalAuthPage;
+exports.buildFederatedLoginPage = buildFederatedLoginPage;
+exports.buildToolConsentPage = buildToolConsentPage;
+exports.buildLoginPage = buildLoginPage;
+exports.buildErrorPage = buildErrorPage;
+exports.renderToHtml = renderToHtml;
+const base_layout_1 = require("./base-layout");
+// ============================================
+// Utility Functions
+// ============================================
+/**
+ * Escape HTML special characters
+ * Re-exported from base-layout for convenience
+ */
+exports.escapeHtml = base_layout_1.escapeHtml;
+// ============================================
+// Template Builders
+// ============================================
+/**
+ * Build OAuth consent page with HTMX + Tailwind
+ * Shows all apps at once with Authorize/Skip buttons
+ */
+function buildConsentPage(params) {
+    const { apps, clientName, pendingAuthId, csrfToken, callbackPath } = params;
+    const appCards = apps.map((app) => buildAppCardHtml(app, pendingAuthId, csrfToken, callbackPath)).join('\n');
+    const content = `
+    <h1 class="text-3xl font-bold text-gray-900 mb-4">Authorize ${(0, exports.escapeHtml)(clientName)}</h1>
+    <p class="text-gray-600 mb-8">
+      Select which apps you want to authorize. You can skip apps and authorize them later when needed.
+    </p>
+
+    <div class="space-y-4" id="app-list">
+      ${appCards}
+    </div>
+
+    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
+      Skipped apps can be authorized later when you try to use their tools (progressive authorization).
+    </div>`;
+    return (0, base_layout_1.wideLayout)(content, { title: `Authorize ${clientName}` });
+}
+/**
+ * Build single app authorization card HTML
+ */
+function buildAppCardHtml(app, pendingAuthId, csrfToken, callbackPath) {
+    const icon = app.iconUrl
+        ? `<img src="${(0, exports.escapeHtml)(app.iconUrl)}" alt="${(0, exports.escapeHtml)(app.appName)}" class="w-12 h-12 rounded-lg object-cover">`
+        : `<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg">${(0, exports.escapeHtml)(app.appName.charAt(0).toUpperCase())}</div>`;
+    const description = app.description ? `<p class="text-sm text-gray-500">${(0, exports.escapeHtml)(app.description)}</p>` : '';
+    const scopes = app.requiredScopes?.length
+        ? `<div class="mb-4">
+        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Permissions</p>
+        <div class="flex flex-wrap gap-2">
+          ${app.requiredScopes
+            .map((scope) => `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">${(0, exports.escapeHtml)(scope)}</span>`)
+            .join('')}
+        </div>
+      </div>`
+        : '';
+    return `<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow" data-app-id="${(0, exports.escapeHtml)(app.appId)}">
+    <div class="flex items-center gap-4 mb-4">
+      ${icon}
+      <div class="flex-1">
+        <h3 class="font-semibold text-gray-900">${(0, exports.escapeHtml)(app.appName)}</h3>
+        ${description}
+      </div>
+    </div>
+
+    ${scopes}
+
+    <form method="POST" action="${(0, exports.escapeHtml)(callbackPath)}" class="flex gap-3 pt-4 border-t border-gray-100">
+      <input type="hidden" name="csrf" value="${(0, exports.escapeHtml)(csrfToken)}">
+      <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
+      <input type="hidden" name="app" value="${(0, exports.escapeHtml)(app.appId)}">
+      <button type="submit" name="action" value="authorize"
+        class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors"
+        hx-post="${(0, exports.escapeHtml)(callbackPath)}"
+        hx-swap="outerHTML"
+        hx-target="closest div[data-app-id]">
+        Authorize
+      </button>
+      <button type="submit" name="action" value="skip"
+        class="px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors"
+        hx-post="${(0, exports.escapeHtml)(callbackPath)}"
+        hx-swap="outerHTML"
+        hx-target="closest div[data-app-id]">
+        Skip
+      </button>
+    </form>
+  </div>`;
+}
+/**
+ * Build incremental auth page (single app) with HTMX + Tailwind
+ * Used when a tool requires authorization for a skipped app
+ */
+function buildIncrementalAuthPage(params) {
+    const { app, toolId, sessionHint, callbackPath } = params;
+    const description = app.description ? `<p class="text-gray-500 mt-2">${(0, exports.escapeHtml)(app.description)}</p>` : '';
+    const content = `
+    <!-- Warning icon -->
+    <div class="flex justify-center mb-6">
+      <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
+        <svg class="w-8 h-8 text-amber-600" 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>
+    </div>
+
+    <h1 class="text-2xl font-bold text-gray-900 text-center mb-2">Authorization Required</h1>
+    <p class="text-gray-600 text-center mb-8">
+      To use "<span class="font-mono text-sm bg-gray-100 px-1 rounded">${(0, exports.escapeHtml)(toolId)}</span>", you need to authorize ${(0, exports.escapeHtml)(app.appName)}.
+    </p>
+
+    <!-- App card -->
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg">
+          ${(0, exports.escapeHtml)(app.appName.charAt(0).toUpperCase())}
+        </div>
+        <div class="flex-1">
+          <h3 class="font-semibold text-gray-900">${(0, exports.escapeHtml)(app.appName)}</h3>
+          ${description}
+        </div>
+      </div>
+
+      <form method="GET" action="${(0, exports.escapeHtml)(callbackPath)}" class="flex gap-3 pt-4 border-t border-gray-100">
+        <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(sessionHint)}">
+        <input type="hidden" name="app_id" value="${(0, exports.escapeHtml)(app.appId)}">
+        <input type="hidden" name="incremental" value="true">
+        <button type="button" onclick="window.close()"
+          class="flex-1 px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors">
+          Cancel
+        </button>
+        <button type="submit"
+          class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">
+          Authorize
+        </button>
+      </form>
+    </div>
+
+    <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800 text-center">
+      This is an incremental authorization. Your existing session will be expanded to include ${(0, exports.escapeHtml)(app.appName)}.
+    </div>`;
+    return (0, base_layout_1.centeredCardLayout)(content, { title: `Authorize ${app.appName}` });
+}
+/**
+ * Build federated login page for multi-provider selection
+ */
+function buildFederatedLoginPage(params) {
+    const { providers, clientName, pendingAuthId, csrfToken, callbackPath } = params;
+    const providerCards = providers
+        .map((provider) => {
+        const isPrimaryBadge = provider.isPrimary
+            ? `<span class="px-2 py-0.5 text-xs font-medium bg-blue-600 text-white rounded-full">Primary</span>`
+            : '';
+        const providerUrl = provider.providerUrl
+            ? `<p class="text-xs text-gray-400 font-mono truncate">${(0, exports.escapeHtml)(provider.providerUrl)}</p>`
+            : '';
+        const appIds = provider.appIds.length > 0
+            ? `<p class="text-xs text-gray-500 mt-1">Apps: ${provider.appIds.map((id) => (0, exports.escapeHtml)(id)).join(', ')}</p>`
+            : '';
+        return `<label class="flex items-start gap-4 p-4 bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
+      <input type="checkbox" name="providers" value="${(0, exports.escapeHtml)(provider.providerId)}"
+        class="mt-1 w-5 h-5 rounded border-gray-300" ${provider.isPrimary ? 'checked' : ''}>
+      <div class="flex-1">
+        <div class="flex items-center gap-2 mb-1">
+          <span class="font-semibold text-gray-900">${(0, exports.escapeHtml)(provider.providerName)}</span>
+          ${isPrimaryBadge}
+        </div>
+        <p class="text-sm text-gray-500">Mode: ${(0, exports.escapeHtml)(provider.mode)}</p>
+        ${providerUrl}
+        ${appIds}
+      </div>
+    </label>`;
+    })
+        .join('\n');
+    const content = `
+    <h1 class="text-3xl font-bold text-gray-900 mb-4">Select Authorization Providers</h1>
+    <p class="text-gray-600 mb-8">
+      ${(0, exports.escapeHtml)(clientName)} uses multiple authentication providers. Select which ones you want to authorize.
+    </p>
+
+    <form method="GET" action="${(0, exports.escapeHtml)(callbackPath)}" id="federated-form">
+      <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
+      <input type="hidden" name="federated" value="true">
+
+      <!-- Select all toggle -->
+      <label class="flex items-center gap-3 mb-6 cursor-pointer">
+        <input type="checkbox" id="select-all" class="w-5 h-5 rounded border-gray-300"
+          onchange="document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = this.checked)">
+        <span class="text-gray-700">Select all providers</span>
+      </label>
+
+      <!-- Provider cards -->
+      <div class="space-y-4 mb-8">
+        ${providerCards}
+      </div>
+
+      <!-- Email input -->
+      <div class="mb-6">
+        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+        <input type="email" id="email" name="email" required placeholder="you@example.com"
+          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+      </div>
+
+      <!-- Buttons -->
+      <div class="flex gap-4">
+        <button type="button"
+          class="flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors"
+          onclick="document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = false); document.getElementById('federated-form').submit();">
+          Skip All
+        </button>
+        <button type="submit"
+          class="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
+          Continue
+        </button>
+      </div>
+    </form>
+
+    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
+      Skipped providers can be authorized later when you try to use their tools (progressive authorization).
+    </div>`;
+    return (0, base_layout_1.wideLayout)(content, { title: 'Select Providers' });
+}
+/**
+ * Build consent page for tool selection
+ */
+function buildToolConsentPage(params) {
+    const { tools, clientName, pendingAuthId, csrfToken, callbackPath, userName, userEmail } = params;
+    // Group tools by app
+    const toolsByApp = {};
+    for (const tool of tools) {
+        if (!toolsByApp[tool.appId]) {
+            toolsByApp[tool.appId] = { appName: tool.appName, tools: [] };
+        }
+        toolsByApp[tool.appId].tools.push(tool);
+    }
+    const userInfo = userName || userEmail
+        ? `<div class="p-3 bg-gray-50 rounded-lg mb-6 text-sm">
+        <span class="text-gray-500">Signed in as: </span>
+        <span class="font-medium text-gray-900">${(0, exports.escapeHtml)(userName || userEmail || '')}</span>
+      </div>`
+        : '';
+    const appGroups = Object.entries(toolsByApp)
+        .map(([appId, { appName, tools: appTools }]) => {
+        const toolItems = appTools
+            .map((tool) => {
+            const desc = tool.description
+                ? `<p class="text-sm text-gray-500 mt-0.5">${(0, exports.escapeHtml)(tool.description)}</p>`
+                : '';
+            return `<label class="flex items-start gap-3 p-3 bg-white rounded-lg cursor-pointer hover:bg-gray-50">
+        <input type="checkbox" name="tools" value="${(0, exports.escapeHtml)(tool.toolId)}" class="mt-0.5 w-5 h-5 rounded border-gray-300" checked>
+        <div>
+          <span class="font-medium text-gray-900">${(0, exports.escapeHtml)(tool.toolName)}</span>
+          ${desc}
+        </div>
+      </label>`;
+        })
+            .join('\n');
+        return `<div class="bg-gray-50 rounded-xl overflow-hidden">
+      <div class="flex items-center justify-between px-4 py-3 bg-gray-100">
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
+            ${(0, exports.escapeHtml)(appName.charAt(0).toUpperCase())}
+          </div>
+          <span class="font-semibold text-gray-900">${(0, exports.escapeHtml)(appName)}</span>
+        </div>
+        <button type="button" class="text-sm text-blue-600 hover:text-blue-800"
+          onclick="const container = this.closest('.bg-gray-50').querySelector('[data-app]'); const cbs = container.querySelectorAll('input[name=tools]'); const allChecked = [...cbs].every(cb => cb.checked); cbs.forEach(cb => cb.checked = !allChecked); updateCount();">
+          Toggle All
+        </button>
+      </div>
+      <div class="p-4 space-y-2" data-app="${(0, exports.escapeHtml)(appId)}">
+        ${toolItems}
+      </div>
+    </div>`;
+    })
+        .join('\n');
+    const updateCountScript = `
+  <script>
+    function updateCount() {
+      const all = document.querySelectorAll('input[name="tools"]');
+      const checked = document.querySelectorAll('input[name="tools"]:checked');
+      document.getElementById('selection-count').textContent = checked.length + ' of ' + all.length + ' selected';
+      document.getElementById('select-all').checked = all.length > 0 && all.length === checked.length;
+    }
+    document.querySelectorAll('input[name="tools"]').forEach(cb => cb.addEventListener('change', updateCount));
+  </script>`;
+    const content = `
+    <h1 class="text-3xl font-bold text-gray-900 mb-4">Select Tools to Enable</h1>
+    <p class="text-gray-600 mb-6">
+      Choose which tools ${(0, exports.escapeHtml)(clientName)} can access. You can change this later.
+    </p>
+
+    ${userInfo}
+
+    <form method="POST" action="${(0, exports.escapeHtml)(callbackPath)}" id="consent-form">
+      <input type="hidden" name="csrf" value="${(0, exports.escapeHtml)(csrfToken)}">
+      <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
+
+      <!-- Select all toggle -->
+      <div class="flex items-center justify-between mb-6">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input type="checkbox" id="select-all" class="w-5 h-5 rounded border-gray-300" checked
+            onchange="document.querySelectorAll('input[name=tools]').forEach(cb => cb.checked = this.checked); updateCount();">
+          <span class="text-gray-700">Select all tools</span>
+        </label>
+        <span id="selection-count" class="text-sm text-gray-500">${tools.length} of ${tools.length} selected</span>
+      </div>
+
+      <!-- Tool groups by app -->
+      <div class="space-y-6 mb-8">
+        ${appGroups}
+      </div>
+
+      <!-- Buttons -->
+      <div class="flex gap-4">
+        <button type="button" onclick="history.back()"
+          class="flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors">
+          Cancel
+        </button>
+        <button type="submit"
+          class="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
+          Confirm Selection
+        </button>
+      </div>
+    </form>
+    ${updateCountScript}`;
+    return (0, base_layout_1.extraWideLayout)(content, { title: 'Select Tools' });
+}
+/**
+ * Build simple login page
+ */
+function buildLoginPage(params) {
+    const { clientName, scope, pendingAuthId, callbackPath } = params;
+    const scopesHtml = scope
+        ? `<div class="p-4 bg-gray-50 rounded-lg mb-6">
+        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Requested permissions</p>
+        <p class="text-gray-700">${scope
+            .split(' ')
+            .map((s) => (0, exports.escapeHtml)(s))
+            .join(', ') || 'Default access'}</p>
+      </div>`
+        : '';
+    const content = `
+    <div class="bg-white rounded-2xl shadow-xl p-8">
+      <h1 class="text-3xl font-bold text-gray-900 mb-2 text-center">Sign In</h1>
+      <p class="text-gray-600 mb-8 text-center">Authorize access to ${(0, exports.escapeHtml)(clientName)}</p>
+
+      ${scopesHtml}
+
+      <form method="GET" action="${(0, exports.escapeHtml)(callbackPath)}">
+        <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
+
+        <!-- Email -->
+        <div class="mb-4">
+          <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+          <input type="email" id="email" name="email" required placeholder="you@example.com"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+        </div>
+
+        <!-- Name (optional) -->
+        <div class="mb-6">
+          <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name (optional)</label>
+          <input type="text" id="name" name="name" placeholder="Your name"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+        </div>
+
+        <!-- Submit -->
+        <button type="submit"
+          class="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
+          Authorize
+        </button>
+      </form>
+
+      <p class="text-center text-sm text-gray-500 mt-6">Client: ${(0, exports.escapeHtml)(clientName)}</p>
+    </div>`;
+    return (0, base_layout_1.centeredCardLayout)(content, { title: 'Sign In' });
+}
+/**
+ * Build error page
+ */
+function buildErrorPage(params) {
+    const { error, description } = params;
+    const content = `
+    <div class="bg-white rounded-2xl shadow-xl p-8 text-center">
+      <!-- Error icon -->
+      <div class="flex justify-center mb-6">
+        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center">
+          <svg class="w-8 h-8 text-red-600" 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>
+      </div>
+
+      <h1 class="text-2xl font-bold text-gray-900 mb-4">Authorization Error</h1>
+      <p class="mb-4">
+        <code class="px-2 py-1 bg-gray-100 rounded text-red-600 font-mono text-sm">${(0, exports.escapeHtml)(error)}</code>
+      </p>
+      <p class="text-gray-600">${(0, exports.escapeHtml)(description)}</p>
+    </div>`;
+    return (0, base_layout_1.centeredCardLayout)(content, { title: 'Error' });
+}
+// ============================================
+// Legacy Compatibility - renderToHtml wrapper
+// ============================================
+/**
+ * Simple wrapper for compatibility - just returns the HTML string
+ * (HTMX templates are already complete HTML documents)
+ */
+function renderToHtml(html, _options) {
+    return html;
+}
+//# sourceMappingURL=htmx-templates.js.map

package/src/auth/ui/htmx-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmx-templates.js","sourceRoot":"","sources":["../../../../src/auth/ui/htmx-templates.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * HTMX Template Builders for OAuth UI\n *\n * Server-side HTML rendering with HTMX for interactivity.\n * No build step required - pure runtime rendering with Tailwind CSS CDN.\n *\n * Features:\n * - OAuth consent page with multiple apps\n * - Incremental authorization page for single app\n * - Federated login page for multi-provider selection\n * - All pages use Tailwind CSS from CDN (no build required)\n * - Google Fonts (Inter) for modern typography\n * - HTMX for progressive enhancement (~14KB)\n *\n * Uses base-layout.ts for consistent HTML shell with CDN resources.\n */\n\nimport {\n  baseLayout,\n  wideLayout,\n  extraWideLayout,\n  centeredCardLayout,\n  escapeHtml as baseEscapeHtml,\n} from './base-layout';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * App information for authorization cards\n */\nexport interface AppAuthCard {\n  /** App identifier */\n  appId: string;\n  /** Display name */\n  appName: string;\n  /** App description */\n  description?: string;\n  /** Icon URL (optional, will use initials fallback) */\n  iconUrl?: string;\n  /** Scopes required by this app */\n  requiredScopes?: string[];\n}\n\n/**\n * Provider information for federated login\n */\nexport interface ProviderCard {\n  /** Provider identifier */\n  providerId: string;\n  /** Display name */\n  providerName: string;\n  /** Provider URL (for remote providers) */\n  providerUrl?: string;\n  /** Auth mode */\n  mode: string;\n  /** App IDs associated with this provider */\n  appIds: string[];\n  /** Whether this is the parent/primary provider */\n  isPrimary?: boolean;\n}\n\n/**\n * Tool information for consent page\n */\nexport interface ToolCard {\n  /** Tool identifier */\n  toolId: string;\n  /** Display name */\n  toolName: string;\n  /** Tool description */\n  description?: string;\n  /** Parent app ID */\n  appId: string;\n  /** Parent app name */\n  appName: string;\n}\n\n// ============================================\n// Utility Functions\n// ============================================\n\n/**\n * Escape HTML special characters\n * Re-exported from base-layout for convenience\n */\nexport const escapeHtml = baseEscapeHtml;\n\n// ============================================\n// Template Builders\n// ============================================\n\n/**\n * Build OAuth consent page with HTMX + Tailwind\n * Shows all apps at once with Authorize/Skip buttons\n */\nexport function buildConsentPage(params: {\n  apps: AppAuthCard[];\n  clientName: string;\n  pendingAuthId: string;\n  csrfToken: string;\n  callbackPath: string;\n}): string {\n  const { apps, clientName, pendingAuthId, csrfToken, callbackPath } = params;\n\n  const appCards = apps.map((app) => buildAppCardHtml(app, pendingAuthId, csrfToken, callbackPath)).join('\\n');\n\n  const content = `\n    <h1 class=\"text-3xl font-bold text-gray-900 mb-4\">Authorize ${escapeHtml(clientName)}</h1>\n    <p class=\"text-gray-600 mb-8\">\n      Select which apps you want to authorize. You can skip apps and authorize them later when needed.\n    </p>\n\n    <div class=\"space-y-4\" id=\"app-list\">\n      ${appCards}\n    </div>\n\n    <div class=\"mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800\">\n      Skipped apps can be authorized later when you try to use their tools (progressive authorization).\n    </div>`;\n\n  return wideLayout(content, { title: `Authorize ${clientName}` });\n}\n\n/**\n * Build single app authorization card HTML\n */\nfunction buildAppCardHtml(app: AppAuthCard, pendingAuthId: string, csrfToken: string, callbackPath: string): string {\n  const icon = app.iconUrl\n    ? `<img src=\"${escapeHtml(app.iconUrl)}\" alt=\"${escapeHtml(\n        app.appName,\n      )}\" class=\"w-12 h-12 rounded-lg object-cover\">`\n    : `<div class=\"w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg\">${escapeHtml(\n        app.appName.charAt(0).toUpperCase(),\n      )}</div>`;\n\n  const description = app.description ? `<p class=\"text-sm text-gray-500\">${escapeHtml(app.description)}</p>` : '';\n\n  const scopes = app.requiredScopes?.length\n    ? `<div class=\"mb-4\">\n        <p class=\"text-xs font-medium text-gray-500 uppercase tracking-wide mb-2\">Permissions</p>\n        <div class=\"flex flex-wrap gap-2\">\n          ${app.requiredScopes\n            .map(\n              (scope) =>\n                `<span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800\">${escapeHtml(\n                  scope,\n                )}</span>`,\n            )\n            .join('')}\n        </div>\n      </div>`\n    : '';\n\n  return `<div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\" data-app-id=\"${escapeHtml(\n    app.appId,\n  )}\">\n    <div class=\"flex items-center gap-4 mb-4\">\n      ${icon}\n      <div class=\"flex-1\">\n        <h3 class=\"font-semibold text-gray-900\">${escapeHtml(app.appName)}</h3>\n        ${description}\n      </div>\n    </div>\n\n    ${scopes}\n\n    <form method=\"POST\" action=\"${escapeHtml(callbackPath)}\" class=\"flex gap-3 pt-4 border-t border-gray-100\">\n      <input type=\"hidden\" name=\"csrf\" value=\"${escapeHtml(csrfToken)}\">\n      <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n      <input type=\"hidden\" name=\"app\" value=\"${escapeHtml(app.appId)}\">\n      <button type=\"submit\" name=\"action\" value=\"authorize\"\n        class=\"flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors\"\n        hx-post=\"${escapeHtml(callbackPath)}\"\n        hx-swap=\"outerHTML\"\n        hx-target=\"closest div[data-app-id]\">\n        Authorize\n      </button>\n      <button type=\"submit\" name=\"action\" value=\"skip\"\n        class=\"px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors\"\n        hx-post=\"${escapeHtml(callbackPath)}\"\n        hx-swap=\"outerHTML\"\n        hx-target=\"closest div[data-app-id]\">\n        Skip\n      </button>\n    </form>\n  </div>`;\n}\n\n/**\n * Build incremental auth page (single app) with HTMX + Tailwind\n * Used when a tool requires authorization for a skipped app\n */\nexport function buildIncrementalAuthPage(params: {\n  app: AppAuthCard;\n  toolId: string;\n  sessionHint: string;\n  callbackPath: string;\n}): string {\n  const { app, toolId, sessionHint, callbackPath } = params;\n\n  const description = app.description ? `<p class=\"text-gray-500 mt-2\">${escapeHtml(app.description)}</p>` : '';\n\n  const content = `\n    <!-- Warning icon -->\n    <div class=\"flex justify-center mb-6\">\n      <div class=\"w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center\">\n        <svg class=\"w-8 h-8 text-amber-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <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\"/>\n        </svg>\n      </div>\n    </div>\n\n    <h1 class=\"text-2xl font-bold text-gray-900 text-center mb-2\">Authorization Required</h1>\n    <p class=\"text-gray-600 text-center mb-8\">\n      To use \"<span class=\"font-mono text-sm bg-gray-100 px-1 rounded\">${escapeHtml(\n        toolId,\n      )}</span>\", you need to authorize ${escapeHtml(app.appName)}.\n    </p>\n\n    <!-- App card -->\n    <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6\">\n      <div class=\"flex items-center gap-4 mb-4\">\n        <div class=\"w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg\">\n          ${escapeHtml(app.appName.charAt(0).toUpperCase())}\n        </div>\n        <div class=\"flex-1\">\n          <h3 class=\"font-semibold text-gray-900\">${escapeHtml(app.appName)}</h3>\n          ${description}\n        </div>\n      </div>\n\n      <form method=\"GET\" action=\"${escapeHtml(callbackPath)}\" class=\"flex gap-3 pt-4 border-t border-gray-100\">\n        <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(sessionHint)}\">\n        <input type=\"hidden\" name=\"app_id\" value=\"${escapeHtml(app.appId)}\">\n        <input type=\"hidden\" name=\"incremental\" value=\"true\">\n        <button type=\"button\" onclick=\"window.close()\"\n          class=\"flex-1 px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          class=\"flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors\">\n          Authorize\n        </button>\n      </form>\n    </div>\n\n    <div class=\"p-4 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800 text-center\">\n      This is an incremental authorization. Your existing session will be expanded to include ${escapeHtml(\n        app.appName,\n      )}.\n    </div>`;\n\n  return centeredCardLayout(content, { title: `Authorize ${app.appName}` });\n}\n\n/**\n * Build federated login page for multi-provider selection\n */\nexport function buildFederatedLoginPage(params: {\n  providers: ProviderCard[];\n  clientName: string;\n  pendingAuthId: string;\n  csrfToken: string;\n  callbackPath: string;\n}): string {\n  const { providers, clientName, pendingAuthId, csrfToken, callbackPath } = params;\n\n  const providerCards = providers\n    .map((provider) => {\n      const isPrimaryBadge = provider.isPrimary\n        ? `<span class=\"px-2 py-0.5 text-xs font-medium bg-blue-600 text-white rounded-full\">Primary</span>`\n        : '';\n\n      const providerUrl = provider.providerUrl\n        ? `<p class=\"text-xs text-gray-400 font-mono truncate\">${escapeHtml(provider.providerUrl)}</p>`\n        : '';\n\n      const appIds =\n        provider.appIds.length > 0\n          ? `<p class=\"text-xs text-gray-500 mt-1\">Apps: ${provider.appIds.map((id) => escapeHtml(id)).join(', ')}</p>`\n          : '';\n\n      return `<label class=\"flex items-start gap-4 p-4 bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50\">\n      <input type=\"checkbox\" name=\"providers\" value=\"${escapeHtml(provider.providerId)}\"\n        class=\"mt-1 w-5 h-5 rounded border-gray-300\" ${provider.isPrimary ? 'checked' : ''}>\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <span class=\"font-semibold text-gray-900\">${escapeHtml(provider.providerName)}</span>\n          ${isPrimaryBadge}\n        </div>\n        <p class=\"text-sm text-gray-500\">Mode: ${escapeHtml(provider.mode)}</p>\n        ${providerUrl}\n        ${appIds}\n      </div>\n    </label>`;\n    })\n    .join('\\n');\n\n  const content = `\n    <h1 class=\"text-3xl font-bold text-gray-900 mb-4\">Select Authorization Providers</h1>\n    <p class=\"text-gray-600 mb-8\">\n      ${escapeHtml(clientName)} uses multiple authentication providers. Select which ones you want to authorize.\n    </p>\n\n    <form method=\"GET\" action=\"${escapeHtml(callbackPath)}\" id=\"federated-form\">\n      <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n      <input type=\"hidden\" name=\"federated\" value=\"true\">\n\n      <!-- Select all toggle -->\n      <label class=\"flex items-center gap-3 mb-6 cursor-pointer\">\n        <input type=\"checkbox\" id=\"select-all\" class=\"w-5 h-5 rounded border-gray-300\"\n          onchange=\"document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = this.checked)\">\n        <span class=\"text-gray-700\">Select all providers</span>\n      </label>\n\n      <!-- Provider cards -->\n      <div class=\"space-y-4 mb-8\">\n        ${providerCards}\n      </div>\n\n      <!-- Email input -->\n      <div class=\"mb-6\">\n        <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">Email</label>\n        <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"you@example.com\"\n          class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n      </div>\n\n      <!-- Buttons -->\n      <div class=\"flex gap-4\">\n        <button type=\"button\"\n          class=\"flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors\"\n          onclick=\"document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = false); document.getElementById('federated-form').submit();\">\n          Skip All\n        </button>\n        <button type=\"submit\"\n          class=\"flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors\">\n          Continue\n        </button>\n      </div>\n    </form>\n\n    <div class=\"mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800\">\n      Skipped providers can be authorized later when you try to use their tools (progressive authorization).\n    </div>`;\n\n  return wideLayout(content, { title: 'Select Providers' });\n}\n\n/**\n * Build consent page for tool selection\n */\nexport function buildToolConsentPage(params: {\n  tools: ToolCard[];\n  clientName: string;\n  pendingAuthId: string;\n  csrfToken: string;\n  callbackPath: string;\n  userName?: string;\n  userEmail?: string;\n}): string {\n  const { tools, clientName, pendingAuthId, csrfToken, callbackPath, userName, userEmail } = params;\n\n  // Group tools by app\n  const toolsByApp: Record<string, { appName: string; tools: ToolCard[] }> = {};\n  for (const tool of tools) {\n    if (!toolsByApp[tool.appId]) {\n      toolsByApp[tool.appId] = { appName: tool.appName, tools: [] };\n    }\n    toolsByApp[tool.appId].tools.push(tool);\n  }\n\n  const userInfo =\n    userName || userEmail\n      ? `<div class=\"p-3 bg-gray-50 rounded-lg mb-6 text-sm\">\n        <span class=\"text-gray-500\">Signed in as: </span>\n        <span class=\"font-medium text-gray-900\">${escapeHtml(userName || userEmail || '')}</span>\n      </div>`\n      : '';\n\n  const appGroups = Object.entries(toolsByApp)\n    .map(([appId, { appName, tools: appTools }]) => {\n      const toolItems = appTools\n        .map((tool) => {\n          const desc = tool.description\n            ? `<p class=\"text-sm text-gray-500 mt-0.5\">${escapeHtml(tool.description)}</p>`\n            : '';\n          return `<label class=\"flex items-start gap-3 p-3 bg-white rounded-lg cursor-pointer hover:bg-gray-50\">\n        <input type=\"checkbox\" name=\"tools\" value=\"${escapeHtml(\n          tool.toolId,\n        )}\" class=\"mt-0.5 w-5 h-5 rounded border-gray-300\" checked>\n        <div>\n          <span class=\"font-medium text-gray-900\">${escapeHtml(tool.toolName)}</span>\n          ${desc}\n        </div>\n      </label>`;\n        })\n        .join('\\n');\n\n      return `<div class=\"bg-gray-50 rounded-xl overflow-hidden\">\n      <div class=\"flex items-center justify-between px-4 py-3 bg-gray-100\">\n        <div class=\"flex items-center gap-3\">\n          <div class=\"w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm\">\n            ${escapeHtml(appName.charAt(0).toUpperCase())}\n          </div>\n          <span class=\"font-semibold text-gray-900\">${escapeHtml(appName)}</span>\n        </div>\n        <button type=\"button\" class=\"text-sm text-blue-600 hover:text-blue-800\"\n          onclick=\"const container = this.closest('.bg-gray-50').querySelector('[data-app]'); const cbs = container.querySelectorAll('input[name=tools]'); const allChecked = [...cbs].every(cb => cb.checked); cbs.forEach(cb => cb.checked = !allChecked); updateCount();\">\n          Toggle All\n        </button>\n      </div>\n      <div class=\"p-4 space-y-2\" data-app=\"${escapeHtml(appId)}\">\n        ${toolItems}\n      </div>\n    </div>`;\n    })\n    .join('\\n');\n\n  const updateCountScript = `\n  <script>\n    function updateCount() {\n      const all = document.querySelectorAll('input[name=\"tools\"]');\n      const checked = document.querySelectorAll('input[name=\"tools\"]:checked');\n      document.getElementById('selection-count').textContent = checked.length + ' of ' + all.length + ' selected';\n      document.getElementById('select-all').checked = all.length > 0 && all.length === checked.length;\n    }\n    document.querySelectorAll('input[name=\"tools\"]').forEach(cb => cb.addEventListener('change', updateCount));\n  </script>`;\n\n  const content = `\n    <h1 class=\"text-3xl font-bold text-gray-900 mb-4\">Select Tools to Enable</h1>\n    <p class=\"text-gray-600 mb-6\">\n      Choose which tools ${escapeHtml(clientName)} can access. You can change this later.\n    </p>\n\n    ${userInfo}\n\n    <form method=\"POST\" action=\"${escapeHtml(callbackPath)}\" id=\"consent-form\">\n      <input type=\"hidden\" name=\"csrf\" value=\"${escapeHtml(csrfToken)}\">\n      <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n\n      <!-- Select all toggle -->\n      <div class=\"flex items-center justify-between mb-6\">\n        <label class=\"flex items-center gap-3 cursor-pointer\">\n          <input type=\"checkbox\" id=\"select-all\" class=\"w-5 h-5 rounded border-gray-300\" checked\n            onchange=\"document.querySelectorAll('input[name=tools]').forEach(cb => cb.checked = this.checked); updateCount();\">\n          <span class=\"text-gray-700\">Select all tools</span>\n        </label>\n        <span id=\"selection-count\" class=\"text-sm text-gray-500\">${tools.length} of ${tools.length} selected</span>\n      </div>\n\n      <!-- Tool groups by app -->\n      <div class=\"space-y-6 mb-8\">\n        ${appGroups}\n      </div>\n\n      <!-- Buttons -->\n      <div class=\"flex gap-4\">\n        <button type=\"button\" onclick=\"history.back()\"\n          class=\"flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          class=\"flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors\">\n          Confirm Selection\n        </button>\n      </div>\n    </form>\n    ${updateCountScript}`;\n\n  return extraWideLayout(content, { title: 'Select Tools' });\n}\n\n/**\n * Build simple login page\n */\nexport function buildLoginPage(params: {\n  clientName: string;\n  scope: string;\n  pendingAuthId: string;\n  callbackPath: string;\n}): string {\n  const { clientName, scope, pendingAuthId, callbackPath } = params;\n\n  const scopesHtml = scope\n    ? `<div class=\"p-4 bg-gray-50 rounded-lg mb-6\">\n        <p class=\"text-xs font-medium text-gray-500 uppercase tracking-wide mb-2\">Requested permissions</p>\n        <p class=\"text-gray-700\">${\n          scope\n            .split(' ')\n            .map((s) => escapeHtml(s))\n            .join(', ') || 'Default access'\n        }</p>\n      </div>`\n    : '';\n\n  const content = `\n    <div class=\"bg-white rounded-2xl shadow-xl p-8\">\n      <h1 class=\"text-3xl font-bold text-gray-900 mb-2 text-center\">Sign In</h1>\n      <p class=\"text-gray-600 mb-8 text-center\">Authorize access to ${escapeHtml(clientName)}</p>\n\n      ${scopesHtml}\n\n      <form method=\"GET\" action=\"${escapeHtml(callbackPath)}\">\n        <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n\n        <!-- Email -->\n        <div class=\"mb-4\">\n          <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">Email</label>\n          <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"you@example.com\"\n            class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n        </div>\n\n        <!-- Name (optional) -->\n        <div class=\"mb-6\">\n          <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-2\">Name (optional)</label>\n          <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Your name\"\n            class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n        </div>\n\n        <!-- Submit -->\n        <button type=\"submit\"\n          class=\"w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors\">\n          Authorize\n        </button>\n      </form>\n\n      <p class=\"text-center text-sm text-gray-500 mt-6\">Client: ${escapeHtml(clientName)}</p>\n    </div>`;\n\n  return centeredCardLayout(content, { title: 'Sign In' });\n}\n\n/**\n * Build error page\n */\nexport function buildErrorPage(params: { error: string; description: string }): string {\n  const { error, description } = params;\n\n  const content = `\n    <div class=\"bg-white rounded-2xl shadow-xl p-8 text-center\">\n      <!-- Error icon -->\n      <div class=\"flex justify-center mb-6\">\n        <div class=\"w-16 h-16 rounded-full bg-red-100 flex items-center justify-center\">\n          <svg class=\"w-8 h-8 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n          </svg>\n        </div>\n      </div>\n\n      <h1 class=\"text-2xl font-bold text-gray-900 mb-4\">Authorization Error</h1>\n      <p class=\"mb-4\">\n        <code class=\"px-2 py-1 bg-gray-100 rounded text-red-600 font-mono text-sm\">${escapeHtml(error)}</code>\n      </p>\n      <p class=\"text-gray-600\">${escapeHtml(description)}</p>\n    </div>`;\n\n  return centeredCardLayout(content, { title: 'Error' });\n}\n\n// ============================================\n// Legacy Compatibility - renderToHtml wrapper\n// ============================================\n\n/**\n * Simple wrapper for compatibility - just returns the HTML string\n * (HTMX templates are already complete HTML documents)\n */\nexport function renderToHtml(html: string, _options?: { title?: string }): string {\n  return html;\n}\n"]}

package/src/auth/ui/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Auth UI Module
+ *
+ * Server-rendered UI templates for OAuth flows using HTMX
+ * with Tailwind CSS (CDN) and Google Fonts.
+ *
+ * No build step required - all rendering is done at runtime.
+ * HTMX provides progressive enhancement for interactivity (~14KB).
+ */
+export { CDN, DEFAULT_THEME, type ThemeColors, type ThemeFonts, type ThemeConfig, type BaseLayoutOptions, baseLayout, createLayout, authLayout, centeredCardLayout, wideLayout, extraWideLayout, escapeHtml, } from './base-layout';
+export { type AppAuthCard, type ProviderCard, type ToolCard, buildConsentPage, buildIncrementalAuthPage, buildFederatedLoginPage, buildToolConsentPage, buildLoginPage, buildErrorPage, renderToHtml, } from './htmx-templates';

package/src/auth/ui/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * Auth UI Module
+ *
+ * Server-rendered UI templates for OAuth flows using HTMX
+ * with Tailwind CSS (CDN) and Google Fonts.
+ *
+ * No build step required - all rendering is done at runtime.
+ * HTMX provides progressive enhancement for interactivity (~14KB).
+ */
+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 htmx_templates_1 = require("./htmx-templates");
+// Template builders
+Object.defineProperty(exports, "buildConsentPage", { enumerable: true, get: function () { return htmx_templates_1.buildConsentPage; } });
+Object.defineProperty(exports, "buildIncrementalAuthPage", { enumerable: true, get: function () { return htmx_templates_1.buildIncrementalAuthPage; } });
+Object.defineProperty(exports, "buildFederatedLoginPage", { enumerable: true, get: function () { return htmx_templates_1.buildFederatedLoginPage; } });
+Object.defineProperty(exports, "buildToolConsentPage", { enumerable: true, get: function () { return htmx_templates_1.buildToolConsentPage; } });
+Object.defineProperty(exports, "buildLoginPage", { enumerable: true, get: function () { return htmx_templates_1.buildLoginPage; } });
+Object.defineProperty(exports, "buildErrorPage", { enumerable: true, get: function () { return htmx_templates_1.buildErrorPage; } });
+// Utility functions
+Object.defineProperty(exports, "renderToHtml", { enumerable: true, get: function () { return htmx_templates_1.renderToHtml; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/auth/ui/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;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,mDAc0B;AATxB,oBAAoB;AACpB,kHAAA,gBAAgB,OAAA;AAChB,0HAAA,wBAAwB,OAAA;AACxB,yHAAA,uBAAuB,OAAA;AACvB,sHAAA,oBAAoB,OAAA;AACpB,gHAAA,cAAc,OAAA;AACd,gHAAA,cAAc,OAAA;AACd,oBAAoB;AACpB,8GAAA,YAAY,OAAA","sourcesContent":["/**\n * Auth UI Module\n *\n * Server-rendered UI templates for OAuth flows using HTMX\n * with Tailwind CSS (CDN) and Google Fonts.\n *\n * No build step required - all rendering is done at runtime.\n * HTMX provides progressive enhancement for interactivity (~14KB).\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 './htmx-templates';\n"]}